/* W!G - design 13: glossy 2007 phone UI, few colors (posterized bands), one hue that changes.
   Theme vars come from app.js (applyTheme): --h hue, --s main saturation, --s2/--s3/--s4 softer ones,
   --on text on the accent color, --onsh its shadow. Defaults below are "fialová". */
:root {
  --h: 272; --s: 45%; --s2: 32%; --s3: 16%; --s4: 22%;
  --on: #fff; --onsh: 0 -1px 0 rgba(0, 0, 0, .45);
  --font: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --tag: 'Sedgwick Ave Display', 'Marker Felt', cursive;
  --ink: hsl(var(--h), var(--s), 22%);
  --ink-soft: hsl(var(--h), var(--s), 30%);
  --line: hsl(var(--h), var(--s3), 88%);
  --grp: hsl(var(--h), var(--s3), 72%);
  --accent: hsl(var(--h), var(--s), 50%);
  --bar: linear-gradient(180deg, hsl(var(--h), var(--s2), 82%) 0%, hsl(var(--h), var(--s), 62%) 50%, hsl(var(--h), var(--s), 52%) 51%, hsl(var(--h), var(--s), 46%) 100%);
  --btn: linear-gradient(180deg, hsl(var(--h), var(--s), 80%) 0%, hsl(var(--h), var(--s), 58%) 50%, hsl(var(--h), var(--s), 48%) 51%, hsl(var(--h), var(--s), 52%) 100%);
  --sel: linear-gradient(180deg, hsl(var(--h), var(--s), 64%), hsl(var(--h), var(--s), 40%));
  --paper: linear-gradient(180deg, hsl(var(--h), var(--s3), 95%) 0%, hsl(var(--h), var(--s3), 82%) 100%);
  --text-dim: #7a7a7a;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #1a1720;
  font: 17px/1.25 var(--font);
  color: #000;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* posterized look: 7 levels per channel (filter #wigLow is added by app.js) */
.lofi, .nav, .section, .big, .seg button.on, .burnbtn, .toggle:checked { filter: url(#wigLow); }

/* app frame: full screen on phones, phone-width column on desktop */
.app { position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto; box-shadow: 0 0 40px rgba(0, 0, 0, .4); background: #fff; }
.screen { position: relative; min-height: 100dvh; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.screen.white { background: #fff; }
.screen.dark { background: #000; color: #fff; }
.screen.spring { background: #000; color: #fff; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.screen.paper { background: none; }
.screen.paper::before {
  content: ''; position: fixed; z-index: 0; top: 0; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  background: var(--paper); filter: url(#wigLow) blur(.4px); pointer-events: none;
}
.screen.paper > * { position: relative; z-index: 1; }
.screen.paper > .nav { position: sticky; z-index: 4; }
.screen.paper > .chatbar { position: sticky; z-index: 3; }
html.nofires .burnbtn { opacity: .45; }

/* ---------- navigation bar ---------- */
.nav {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  background: var(--bar);
  border-top: 1px solid hsl(var(--h), var(--s2), 90%); border-bottom: 1px solid hsl(var(--h), var(--s), 18%);
}
.nav h1 {
  margin: 0; font-size: 21px; font-weight: 700; color: var(--on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--onsh); max-width: 56vw; text-align: center;
}
.nav .l { justify-self: start; } .nav .r { justify-self: end; }
.barbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border-radius: 6px;
  font-size: 13px; font-weight: 700; color: var(--on); text-shadow: var(--onsh); white-space: nowrap;
  background: linear-gradient(180deg, hsl(var(--h), var(--s2), 76%) 0%, hsl(var(--h), var(--s), 54%) 50%, hsl(var(--h), var(--s), 44%) 51%, hsl(var(--h), var(--s), 48%) 100%);
  border: 1px solid hsl(var(--h), var(--s), 20%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 rgba(255, 255, 255, .25);
}
.barbtn.back { padding-left: 15px; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); border-radius: 0 6px 6px 0; }
.barbtn.dark, .pill {
  background: linear-gradient(180deg, #5a5a5a, #1a1a1a 50%, #000 51%, #222); border: 1px solid #000; color: #fff; text-shadow: 0 -1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.barbtn:active, .pill:active { filter: brightness(.8); }
.livepill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 6px; font: 800 12px var(--font); color: #fff;
  background: linear-gradient(180deg, #ff8a7a, #e8281a 50%, #c01008 51%, #d82010); border: 1px solid #400; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.livepill.off { background: linear-gradient(180deg, #aaa, #777 50%, #666 51%, #6d6d6d); border-color: #333; }
.livepill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.livepill:not(.off) i { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* section bar + info strip (13c) */
.section {
  height: 30px; padding: 0 14px; font: 700 15px/30px var(--font); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, hsl(var(--h), var(--s4), 74%), hsl(var(--h), var(--s4), 62%)); border-bottom: 1px solid hsl(var(--h), var(--s4), 50%);
}
.info { padding: 9px 14px; font-size: 13px; line-height: 1.35; color: var(--ink-soft);
  background: linear-gradient(180deg, hsl(var(--h), var(--s3), 97%), hsl(var(--h), var(--s3), 91%)); border-bottom: 1px solid hsl(var(--h), var(--s3), 82%); }

/* ---------- grouped table ---------- */
.content { padding: 12px 16px 20px; }
.group { background: #fff; border: 1px solid var(--grp); border-radius: 10px; margin: 8px 0 18px; overflow: hidden; }
.cell { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-top: 1px solid hsl(var(--h), var(--s2), 90%); }
.cell:first-child { border-top: 0; }
.cell > b { width: 92px; flex: none; font-size: 16px; }
.cell .val { color: hsl(var(--h), var(--s), 40%); flex: 1; min-width: 0; text-align: right; }
.cell input[type=text], .cell input[type=email], .cell input[type=password], .cell input:not([type]), .cell input[type=number] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; padding: 4px 0; color: hsl(var(--h), var(--s), 32%);
}
.cell input::placeholder { color: #a8a8a8; }
.chev::after { content: '›'; color: #9a9a9a; font-size: 24px; line-height: 1; margin-left: auto; font-weight: 700; }
.chev .val + ::after { margin-left: 6px; }
.foot { text-align: center; color: var(--ink); font-size: 14px; line-height: 1.4; text-shadow: 0 1px 0 #fff; margin: -6px 14px 14px; }
.nickhint { font-size: 13px; min-height: 18px; }
.nickhint.ok { color: #1f7a33; font-weight: 600; }
.nickhint.bad { color: #b3261e; font-weight: 600; }
.label { font-weight: 700; color: var(--ink); text-shadow: 0 1px 0 #fff; margin: 16px 2px 6px; font-size: 16px; }
.linkbtn { display: block; margin: 14px auto 0; background: none; border: 0; font-weight: 700; font-size: 15px; color: hsl(var(--h), var(--s), 34%); text-shadow: 0 1px 0 #fff; }

/* ---------- segmented control ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid hsl(var(--h), var(--s), 30%); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button {
  height: 44px; border: 0; border-left: 1px solid hsl(var(--h), var(--s), 30%); font-size: 16px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #fff, hsl(var(--h), var(--s3), 92%));
}
.seg button:first-child { border-left: 0; }
.seg button.on { color: var(--on); text-shadow: var(--onsh); background: var(--btn); }
.seg.small button { height: 36px; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
.seg.dark { border-color: #000; border-radius: 6px; background: #111; }
.seg.dark button { height: 34px; color: #fff; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  background: linear-gradient(180deg, #4a4a4a, #222 50%, #111 51%, #1a1a1a); border-left-color: #000; }
.seg.dark button.on { background: var(--btn); color: var(--on); text-shadow: var(--onsh); }

/* ---------- buttons ---------- */
.big {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 10px;
  font-size: 20px; font-weight: 700; color: var(--on); text-shadow: var(--onsh);
  background: var(--btn); border: 1px solid hsl(var(--h), var(--s), 22%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #fff;
}
.big:disabled { opacity: .55; }
.big:active { filter: url(#wigLow) brightness(.85); }
.small-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px; border-radius: 8px;
  font-size: 15px; font-weight: 700; color: var(--on); text-shadow: var(--onsh); background: var(--btn); border: 1px solid hsl(var(--h), var(--s), 22%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.small-btn.gray { background: linear-gradient(180deg, #fff, #eee 50%, #ddd 51%, #e6e6e6); color: #333; text-shadow: 0 1px 0 #fff; border-color: #999; }
.burnbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 38px; border-radius: 8px;
  font: 700 13px var(--font); letter-spacing: .3px; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, #ff8a7a 0%, #e8281a 50%, #c01008 51%, #d82010 100%); border: 1px solid #400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .5); touch-action: manipulation; user-select: none;
}
.burnbtn:active { filter: url(#wigLow) brightness(.75); }
.burnbtn.out { opacity: .45; }
.burnspace { width: 58px; flex: none; }
.pop { animation: pop .25s ease-out; }
@keyframes pop { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* round black play button */
.play { width: 38px; height: 38px; flex: none; border-radius: 50%; padding: 0; border: 1px solid #000; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #555, #111 60%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .4); }
.play::before { content: ''; width: 0; height: 0; margin-left: 3px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play.on { background: var(--sel); }
.play.on::before { width: 12px; height: 13px; margin: 0; border: 0; background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px); }
.play:active { filter: brightness(.75); }

/* ---------- covers: neon W!G tag on black ---------- */
.cover {
  width: 60px; height: 60px; flex: none; background: #050505; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  font-family: var(--tag); font-size: 21px; color: #050505; letter-spacing: -1px;
  -webkit-text-stroke: 1.2px hsl(var(--c) 95% 58%); text-shadow: 0 0 6px hsl(var(--c) 95% 45%), 1px 1px 0 hsl(calc(var(--c) + 120) 90% 50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.cover.lg { width: 104px; height: 104px; font-size: 34px; }
.cover.av { font-family: var(--font); font-weight: 800; -webkit-text-stroke: 0; color: hsl(var(--c) 90% 65%); text-shadow: none; font-size: 26px; border-radius: 8px; }

/* ---------- light list (Demos, Beats, profile) ---------- */
.rows { list-style: none; margin: 0; padding: 0; background: #fff; }
.rows li { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 84px; border-bottom: 1px solid var(--line); color: #000; }
.rows .t { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .s { color: var(--text-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.rows .n, .drows .n { font-weight: 700; font-size: 14px; white-space: nowrap; min-width: 50px; text-align: right; }
.rows a.main, .drows a.main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.rows .grow, .drows .grow { flex: 1; min-width: 0; }
.rows .rk { width: 22px; flex: none; text-align: center; font-weight: 800; color: hsl(var(--h), var(--s3), 55%); font-size: 16px; }
.rows li.me { box-shadow: inset 4px 0 0 var(--accent); }
.mine { font-size: 12px; color: hsl(var(--h), var(--s), 40%); font-weight: 700; margin-top: 2px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; background: hsl(var(--h), var(--s), 45%); vertical-align: 2px; }

/* ---------- dark list (Scores, Live, TV) ---------- */
.drows { list-style: none; margin: 0; padding: 0; }
.drows li { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; height: 69px; border-bottom: 1px solid #262626; background: #000; color: #fff; }
.drows li.sel { background: var(--sel); }
.drows li.sel .s { color: hsl(var(--h), 60%, 90%); }
.drows .rk { width: 20px; color: #9a9a9a; font-weight: 700; font-size: 17px; text-align: center; flex: none; }
.drows li.sel .rk { color: #fff; }
.drows .t { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drows .s { color: #9a9a9a; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.drows li.me .t::after { content: ' · ty'; color: #ffd60a; font-weight: 400; font-size: 13px; }
.dhead {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(180deg, #4b4b4b, #2a2a2a); border-top: 1px solid #5d5d5d; border-bottom: 1px solid #000; text-shadow: 0 -1px 0 #000;
}

/* ---------- cover flow (Scores) ---------- */
.stop { padding: calc(14px + env(safe-area-inset-top)) 16px 0; display: grid; gap: 8px; }
.flow { position: relative; height: 230px; perspective: 600px; overflow: hidden; margin-top: 8px; }
.flow .it {
  position: absolute; left: 50%; top: 14px; width: 160px; height: 160px; margin-left: -80px; border: 0; background: #050505; padding: 0;
  display: grid; place-items: center; font-family: var(--tag); font-size: 56px; color: #050505;
  -webkit-text-stroke: 2px hsl(var(--c) 95% 58%); text-shadow: 0 0 12px hsl(var(--c) 95% 45%), 3px 3px 0 hsl(calc(var(--c) + 120) 90% 50%);
  -webkit-box-reflect: below 2px linear-gradient(transparent 60%, rgba(255, 255, 255, .25));
  transition: transform .35s ease, opacity .35s; cursor: pointer;
}
.flow .it b { position: absolute; left: 8px; bottom: 6px; font: 700 13px var(--font); color: #ddd; -webkit-text-stroke: 0; text-shadow: none; }
.flowinfo { text-align: center; padding: 0 12px 14px; color: #fff; }
.flowinfo .a { font-size: 20px; font-weight: 700; }
.flowinfo .b { color: #aaa; font-weight: 700; font-size: 16px; margin-top: 2px; }
.flowinfo .c { font-weight: 700; margin-top: 8px; }

/* ---------- springboard (13b) ---------- */
.board { padding: calc(24px + env(safe-area-inset-top)) 10px 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 112px; gap: 6px 4px; align-content: start; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.app-icon:active { filter: brightness(.6); }
.icowrap { position: relative; width: 76px; height: 76px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.icowrap img { width: 100%; height: 100%; display: block; }
.badge {
  position: absolute; right: -6px; top: -6px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; z-index: 2;
  background: radial-gradient(circle at 50% 30%, #ff9a9a, #e01010 60%, #a00000); border: 2px solid #fff; color: #fff;
  font: 700 14px/24px var(--font); text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.badge.word { font-size: 11px; }
.hello { padding: calc(14px + env(safe-area-inset-top)) 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #ccc; font-size: 14px; font-weight: 700; }
.dock {
  position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 12px 6px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 49%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .1) 100%), #17141f;
  border-top: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 #000;
}
.dock .icowrap { width: 62px; height: 62px; }
.dock .app-icon { text-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 2px #000; }
.dock[hidden] { display: none; }

/* ---------- tab bar (2007 style, v4) ---------- */
.tabbar {
  position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 3px 4px calc(3px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #444 0%, #222 50%, #0b0b0b 51%, #000 100%); border-top: 1px solid #5a5a5a;
}
.tabbar[hidden] { display: none; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; border-radius: 4px; color: #9a9a9a; font-size: 10px; font-weight: 700; }
.tabbar a svg { width: 28px; height: 26px; }
.tabbar a svg * { fill: url(#tabOff); }
.tabbar a.on { background: hsla(var(--h), 70%, 75%, .24); color: #fff; }
.tabbar a.on svg * { fill: url(#tabOn); }
.tabbar a svg .hole { fill: #111 !important; }

/* ---------- welcome (13a) ---------- */
.logo { display: block; width: 280px; max-width: 76%; margin: 30px auto 0; -webkit-box-reflect: below -10px linear-gradient(transparent 65%, rgba(255, 255, 255, .3)); }
.welcome { display: flex; flex-direction: column; min-height: calc(100dvh - 52px - env(safe-area-inset-top)); padding: 0 18px calc(20px + env(safe-area-inset-bottom)); }

/* ---------- profile / detail ---------- */
.phead { display: flex; gap: 14px; padding: 16px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.phead .nm { font-size: 22px; font-weight: 800; }
.phead .meta { color: var(--text-dim); font-size: 15px; margin: 2px 0; }
.phead .stats { font-weight: 700; font-size: 15px; margin: 4px 0 8px; }
.bigrow { display: flex; align-items: center; padding: 14px; font-size: 20px; font-weight: 800; border-bottom: 1px solid var(--line); background: #fff; }

/* ---------- toggle (13i) ---------- */
.toggle { appearance: none; position: relative; width: 94px; height: 30px; border-radius: 6px; margin: 0; flex: none; cursor: pointer;
  border: 1px solid #8a8a8a; background: linear-gradient(180deg, #e0e0e0, #fafafa); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); }
.toggle::after { content: 'OFF'; position: absolute; right: 12px; top: 6px; font: 800 14px var(--font); color: #7d7d7d; }
.toggle::before { content: ''; position: absolute; left: 1px; top: 1px; width: 42px; height: 26px; border-radius: 5px; z-index: 1;
  background: linear-gradient(180deg, #fff, #d8d8d8); border: 1px solid #9a9a9a; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.toggle:checked { background: linear-gradient(180deg, hsl(var(--h), var(--s), 40%), hsl(var(--h), var(--s), 66%)); border-color: hsl(var(--h), var(--s), 22%); }
.toggle:checked::after { content: 'ON'; left: 14px; right: auto; color: var(--on); text-shadow: var(--onsh); }
.toggle:checked::before { left: 49px; }

/* color swatches in Settings */
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 12px; }
.swatches button { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .5); padding: 0;
  background: linear-gradient(180deg, hsl(var(--sh), var(--ss), 80%), hsl(var(--sh), var(--ss), 55%) 50%, hsl(var(--sh), var(--ss), 45%) 51%, hsl(var(--sh), var(--ss), 50%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.swatches button.on { outline: 3px solid #000; outline-offset: 2px; }

/* ---------- fans (13h) ---------- */
.medals { padding: 12px 16px 6px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.medal { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px 0 12px; border-radius: 10px; background: #fff;
  border: 1px solid hsl(var(--h), var(--s2), 75%); box-shadow: 0 2px 0 hsl(var(--h), var(--s2), 85%); }
.medal .ball { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 18px var(--font); flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .35); }
.medal:nth-child(1) .ball { background: radial-gradient(circle at 50% 30%, #fff3b0, #f2c200 60%, #b08000); color: #6a4a00; }
.medal:nth-child(2) .ball { background: radial-gradient(circle at 50% 30%, #fff, #c8c8c8 60%, #8a8a8a); color: #444; }
.medal:nth-child(3) .ball { background: radial-gradient(circle at 50% 30%, #ffd0a0, #d07a30 60%, #8a4a10); color: #fff; }
.medal .who { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medal .n { font-weight: 800; font-size: 16px; color: var(--ink); }
.medal.me { border-color: var(--accent); }
.flist li { height: 59px; padding: 0 22px; }
.flist .rk { color: hsl(var(--h), var(--s3), 55%); }
.flist .t { font-size: 16px; }

/* ---------- chat (13g) ---------- */
.chatlog { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; }
.msg .who { font-size: 12px; font-weight: 700; margin: 0 0 3px 10px; }
.msg .who.host { color: #d01010; }
.msg .bub { display: inline-block; padding: 9px 14px; border-radius: 16px; background: #fff; border: 1px solid hsl(var(--h), var(--s2), 80%);
  box-shadow: 0 2px 0 hsl(var(--h), var(--s2), 86%); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg.mine .bub { background: var(--sel); color: var(--on); border-color: hsl(var(--h), var(--s), 30%); text-shadow: var(--onsh); text-align: left; }
.msg .x { margin-left: 6px; border: 0; background: none; color: #c00; font-weight: 800; font-size: 12px; }
.chatbar { position: sticky; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 8px; padding: 8px 10px;
  background: linear-gradient(180deg, #e2e2e2, #c8c8c8); border-top: 1px solid #9a9a9a; }
.chatbar input { flex: 1; min-width: 0; height: 38px; border-radius: 19px; border: 1px solid #9a9a9a; padding: 0 14px; font-size: 16px; background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); outline: 0; }
.chatbar button { height: 38px; padding: 0 16px; border-radius: 19px; font-weight: 700; color: var(--on); text-shadow: var(--onsh); background: var(--btn);
  border: 1px solid hsl(var(--h), var(--s), 22%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.chatbar button:disabled, .chatbar input:disabled { opacity: .5; }
.chatclosed { margin: 0 12px 10px; padding: 10px 12px; border-radius: 10px; text-align: center; font-size: 14px; color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid var(--grp); }

/* ---------- live + tv ---------- */
.stream { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #111; border-bottom: 3px solid var(--accent); }
.stream iframe, .tvscreen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stream .top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.stream .top button { pointer-events: auto; }
.blackpill { padding: 3px 9px; border-radius: 7px; background: rgba(0, 0, 0, .8); border: 1px solid #555; font-size: 13px; font-weight: 700; color: #fff; }
.ytchat { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.offair { padding: calc(30px + env(safe-area-inset-top)) 20px 26px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 0%, hsl(var(--h), var(--s), 22%), #000 75%); }
.offair h2 { margin: 14px 0 6px; font-size: 24px; }
.offair p { margin: 0 0 16px; color: #bbb; }
.tvscreen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.thumb { width: 112px; height: 63px; flex: none; object-fit: cover; border-radius: 4px; background: #222; }
.drows.tv li { height: auto; min-height: 80px; padding: 8px 10px; cursor: pointer; }

/* track detail chart */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .lbl { font: 700 10px var(--font); fill: #9a9a9a; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--accent); }
.chart .gold { fill: #f2b600; stroke: #8a6a00; stroke-width: 1; }

/* in-app admin */
.stats4 { display: grid; grid-template-columns: repeat(2, 1fr); }
.stats4 > div { display: flex; flex-direction: column; padding: 12px; border-top: 1px solid var(--line); }
.stats4 > div:nth-child(-n+2) { border-top: 0; }
.stats4 > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats4 b { font-size: 24px; font-variant-numeric: tabular-nums; }
.stats4 span { color: var(--text-dim); font-size: 13px; }
.adminbtns { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; justify-content: flex-end; }
.cell input[type=number] { flex: none; max-width: 80px; text-align: right; border: 1px solid #ccc; border-radius: 6px; padding: 4px 6px; background: #fff; }

/* misc */
.empty { padding: 26px 14px; text-align: center; color: #8a8a8a; }
.dark .empty { color: #777; }
.loading { padding: 60px 0; text-align: center; color: #8a8a8a; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--text-dim); }
.file { position: relative; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file .val { color: hsl(var(--h), var(--s), 40%); text-align: left; }
.cell .check { margin-left: auto; color: hsl(var(--h), var(--s), 40%); font-weight: 800; font-size: 18px; }
.cell.linkish { width: 100%; background: #fff; border: 0; border-top: 1px solid hsl(var(--h), var(--s2), 90%); border-radius: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cell.linkish:first-child { border-top: 0; }
.cell.linkish:active, a.cell:active { background: var(--sel); color: var(--on); }
.cell.danger { color: #d40f0f; font-weight: 700; justify-content: center; }

.toast {
  position: fixed; z-index: 40; left: 50%; top: calc(60px + env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0;
  max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 10px; background: rgba(0, 0, 0, .82); color: #fff; border: 2px solid rgba(255, 255, 255, .8);
  font-weight: 700; font-size: 15px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); transition: all .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: rgba(170, 12, 12, .92); }

/* 2007 alert */
.alert-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .45); animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
.alert { width: min(290px, calc(100% - 40px)); padding: 18px 16px 14px; border-radius: 12px; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(180deg, hsla(var(--h), var(--s), 66%, .97) 0%, hsla(var(--h), var(--s), 38%, .97) 45%, hsla(var(--h), var(--s), 20%, .97) 100%);
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: popin .2s ease-out; }
.alert::before { content: ''; position: absolute; left: -20%; top: -60%; width: 140%; height: 90%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); pointer-events: none; }
@keyframes popin { 0% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1); } }
.alert h3 { position: relative; margin: 0 0 6px; font-size: 19px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); }
.alert p { position: relative; margin: 0 0 14px; font-size: 15px; line-height: 1.4; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); }
.alert-btns { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.alert-btns.stack { grid-auto-flow: row; }
.alert-btns button { height: 44px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .5); color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .05) 51%, rgba(255, 255, 255, .12)); }
.alert-btns button.def { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .14) 51%, rgba(255, 255, 255, .22)); }

/* staging marker */
.staging-bar {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: calc(18px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  display: grid; place-items: center; font: 800 11px var(--font); letter-spacing: 1px; text-transform: uppercase; color: #000;
  background: repeating-linear-gradient(135deg, #ffd60a 0 12px, #ffc300 12px 24px); pointer-events: none;
}
html.staging .app { padding-top: 18px; }
html.staging .nav { top: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* small phones (320px, 3GS edition) */
@media (max-width: 360px) {
  body { font-size: 15px; }
  .nav h1 { font-size: 18px; }
  .barbtn { font-size: 11px; padding: 0 8px; height: 30px; }
  .board { grid-auto-rows: 96px; padding-left: 4px; padding-right: 4px; }
  .icowrap { width: 60px; height: 60px; }
  .dock .icowrap { width: 50px; height: 50px; }
  .app-icon { font-size: 11px; }
  .rows li { gap: 7px; padding: 0 8px; height: 72px; }
  .cover { width: 48px; height: 48px; font-size: 17px; }
  .rows .t, .drows .t { font-size: 15px; }
  .rows .s, .drows .s { font-size: 12px; }
  .play { width: 32px; height: 32px; }
  .burnbtn { width: 50px; height: 34px; font-size: 12px; }
  .burnspace { width: 50px; }
  .rows .n, .drows .n { min-width: 40px; font-size: 13px; }
  .flow { height: 190px; } .flow .it { width: 130px; height: 130px; margin-left: -65px; font-size: 44px; }
  .cell > b { width: 78px; font-size: 15px; }
  .toggle { width: 80px; } .toggle:checked::before { left: 35px; }
  .swatches { grid-template-columns: repeat(5, 1fr); }
}

/* inside the 3GS shell */
html.embedded { scrollbar-width: none; }
html.embedded::-webkit-scrollbar, html.embedded body::-webkit-scrollbar { display: none; }

/* 13a: 4-digit code boxes over one hidden input */
.codebox { position: relative; display: flex; justify-content: center; gap: 12px; margin: 16px auto 0; cursor: text; }
.codebox span { width: 58px; height: 68px; border-radius: 10px; background: #fff; border: 2px solid hsl(var(--h), var(--s3), 70%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .15); display: grid; place-items: center; font: 700 32px var(--font); color: #000; }
.codebox span.on { border-color: hsl(var(--h), var(--s), 40%); }
.codebox input { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; border: 0; caret-color: transparent; }

/* 13a: "check your e-mail" */
.mailsent { margin-top: 26px; text-align: center; }
.mailsent .env { font-size: 54px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.waiting { display: flex; justify-content: center; gap: 8px; margin: 18px 0 6px; }
.waiting i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h), var(--s), 45%); animation: blink 1.2s infinite; }
.waiting i:nth-child(2) { animation-delay: .2s; } .waiting i:nth-child(3) { animation-delay: .4s; }
a.big { text-decoration: none; }