/* Metro, Windows Phone 7/8 flavour: solid accent tiles, light type, turnstile
   entrance, live tiles that flip, tilt on press. */

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --bar: #1f1f1f;
  --off: #3a3a3a;
  --gap: 8px;
  --cols: 4;
  --font: "Segoe UI", "Open Sans", "Selawik", system-ui, sans-serif;
  --light: "Segoe UI Light", "Segoe UI", "Open Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.1, .9, .2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fff; --fg: #000; --dim: #6b6b6b; --bar: #ddd; --off: #b5b5b5;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #fff; --fg: #000; --dim: #6b6b6b; --bar: #ddd; --off: #b5b5b5;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.35 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
.dim { color: var(--dim); }

.hub {
  container-type: inline-size;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 96px;
}
@media (min-width: 640px)  { .hub { padding-left: 32px; padding-right: 32px; } }

/* ---- panorama header ------------------------------------------------- */
.pano { overflow: hidden; margin-bottom: 20px; }
.kicker {
  margin: 0;
  font: 600 13px/1 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.title {
  margin: 4px 0 6px -4px;
  font: 300 clamp(56px, 16vw, 110px)/1 var(--light);
  letter-spacing: -.02em;
  white-space: nowrap;
  animation: pan-in .9s var(--ease) both;
}
@keyframes pan-in { from { transform: translateX(30%); opacity: 0; } }
.pivot { display: flex; gap: 22px; font: 300 26px/1.2 var(--light); white-space: nowrap; }
.pivot .on { color: var(--fg); }
#boxline.up   { color: #60a917; }
#boxline.down { color: #e51400; }

/* ---- tile grid -------------------------------------------------------- */
.tiles {
  --u: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--u);
  grid-auto-flow: dense;
  gap: var(--gap);
}
@container (min-width: 620px) { .tiles { --cols: 8; } }
@container (min-width: 980px) { .tiles { --cols: 12; } }

.tile {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  perspective: 900px;
  transform-origin: 0 50%;
  animation: turnstile .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform .15s ease, filter .4s ease;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 3px;
}
.tile.wide { grid-column: span 4; }
@keyframes turnstile { from { transform: perspective(900px) rotateY(-80deg); opacity: 0; } }

.flipper {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}
.tile.flipped .flipper { transform: rotateX(180deg); }

.face {
  position: absolute; inset: 0;
  background: var(--c);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  padding: 10px 12px;
}
.face.back { transform: rotateX(180deg); }

.tile.down, .tile.asleep { --c: var(--off) !important; }
.tile.down .face, .tile.asleep .face { color: #ddd; }

/* ---- face content ----------------------------------------------------- */
.label {
  position: absolute; left: 12px; right: 12px; bottom: 8px;
  font: 400 14px/1.2 var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; justify-content: space-between; gap: 8px;
}
.label .state { opacity: .85; font-size: 12px; text-transform: lowercase; }
.glyph {
  position: absolute; left: 50%; top: 44%;
  width: 40%; max-width: 72px;
  transform: translate(-50%, -50%);
  stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.wide .glyph { width: 20%; }
.badge {
  position: absolute; right: 12px; top: 6px;
  font: 300 34px/1 var(--light);
}
.big {
  font: 300 clamp(26px, 9cqw, 44px)/1 var(--light);
  margin: 2px 0 4px;
}
.line { font-size: 14px; line-height: 1.3; }
.small { font-size: 12px; opacity: .85; }
.clamp2, .clamp3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.clamp2 { -webkit-line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; }
.headline { font: 300 20px/1.2 var(--light); }

/* nowPlaying "music" face: art on the left, text beside it */
.music { display: flex; gap: 12px; padding: 0; }
.music img {
  height: 100%; aspect-ratio: 1; object-fit: cover; flex: none;
  background: rgba(0,0,0,.2);
}
.music .meta { padding: 10px 12px 30px 0; min-width: 0; }
.music .meta .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music .label { left: auto; right: 12px; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; margin-right: 4px; }
.eq i { width: 2px; background: currentColor; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%,100% { height: 30%; } 50% { height: 100%; } }

/* ---- app bar ---------------------------------------------------------- */
.appbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--bar);
  font-size: 13px;
}
.round {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--fg); background: none; color: var(--fg);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.round svg { width: 22px; height: 22px; }
.round.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.round:active { background: var(--fg); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .title, .tile { animation: none; }
  .flipper { transition: none; }
  .eq i { animation: none; height: 60%; }
}