:root{
  --ink:#0D0D0D; --ink-soft:#4A4A46; --muted:#8C8C87;
  --paper:#FCFCFA; --surface:#FFFFFF; --surface-2:#EFEFEB; --line:#E2E2DD;
  --accent:#0D0D0D; --accent-ink:#0D0D0D; --accent-soft:#EFEFEB;
  --live:#E0293B; --live-soft:#FBE1E4;
  --scheduled:#2F6FB0; --scheduled-soft:#E3EDF7;
  --final:#857E73; --final-soft:#EFEDE8;
  --gold:#0D0D0D; --gold-ink:#0D0D0D; --gold-soft:#EFEFEB;
  --focus:#2F6FB0;
  --on-accent:#FFFFFF;
  --backdrop:#0B0A08;
  --shadow: 0 1px 2px rgba(20,17,13,.05), 0 8px 24px -10px rgba(20,17,13,.22);
  --media-1:#14110D; --media-2:#4A4A46;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F5F5F3; --ink-soft:#C7C6C1; --muted:#8F8D86;
    --paper:#0A0A09; --surface:#161615; --surface-2:#1F1F1D; --line:#2C2C29;
    --accent:#F5F5F3; --accent-ink:#F5F5F3; --accent-soft:#232320;
    --live:#FF5468; --live-soft:#3A1319;
    --scheduled:#6FA8E8; --scheduled-soft:#142334;
    --final:#A79F92; --final-soft:#1F1F1D;
    --gold:#F5F5F3; --gold-ink:#F5F5F3; --gold-soft:#232320;
    --focus:#6FA8E8;
    --on-accent:#0A0A09; --backdrop:#000000;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 30px -12px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ink:#F5F5F3; --ink-soft:#C7C6C1; --muted:#8F8D86;
  --paper:#0A0A09; --surface:#161615; --surface-2:#1F1F1D; --line:#2C2C29;
  --accent:#F5F5F3; --accent-ink:#F5F5F3; --accent-soft:#232320;
  --live:#FF5468; --live-soft:#3A1319;
  --scheduled:#6FA8E8; --scheduled-soft:#142334;
  --final:#A79F92; --final-soft:#1F1F1D;
  --gold:#F5F5F3; --gold-ink:#F5F5F3; --gold-soft:#232320;
  --focus:#6FA8E8;
  --on-accent:#0A0A09; --backdrop:#000000;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 30px -12px rgba(0,0,0,.65);
}
:root[data-theme="light"]{
  --ink:#0D0D0D; --ink-soft:#4A4A46; --muted:#8C8C87;
  --paper:#FCFCFA; --surface:#FFFFFF; --surface-2:#EFEFEB; --line:#E2E2DD;
  --accent:#0D0D0D; --accent-ink:#0D0D0D; --accent-soft:#EFEFEB;
  --live:#E0293B; --live-soft:#FBE1E4;
  --scheduled:#2F6FB0; --scheduled-soft:#E3EDF7;
  --final:#857E73; --final-soft:#EFEDE8;
  --gold:#0D0D0D; --gold-ink:#0D0D0D; --gold-soft:#EFEFEB;
  --focus:#2F6FB0;
  --on-accent:#FFFFFF; --backdrop:#0B0A08;
  --shadow: 0 1px 2px rgba(20,17,13,.05), 0 8px 24px -10px rgba(20,17,13,.22);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--backdrop); color:var(--ink);
  font-family:'Barlow',system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
::selection{background:var(--accent-soft); color:var(--ink);}
img{max-width:100%; display:block;}

.display{font-family:'Bebas Neue',system-ui,sans-serif; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance;}
.eyebrow{font-family:'Barlow',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}

/* ---------- Backdrop (desktop preview) ---------- */
body{
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(700px 500px at 85% 100%, rgba(255,255,255,.045), transparent 60%),
    var(--backdrop);
  min-height:100dvh;
}
.backdrop-brand{
  display:none; position:fixed; left:2.5rem; top:50%; transform:translateY(-50%);
  color:#F5F5F3; max-width:280px;
}
.backdrop-brand .badge{width:52px;height:52px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:1rem;}
.backdrop-brand .badge img{width:78%;height:78%;object-fit:contain;}
.backdrop-brand h1{font-family:'Bebas Neue'; font-size:2.4rem; letter-spacing:.01em; margin:0 0 .5rem; color:#fff;}
.backdrop-brand p{color:#B7B0A5; font-size:.92rem; margin:0;}
@media (min-width:900px){ .backdrop-brand{display:block;} }

/* ---------- App frame ---------- */
#app-frame{
  width:100%; max-width:430px; margin:0 auto; background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden;
  height:100dvh;
}
@media (min-width:560px){
  #app-frame{
    height:min(880px,92dvh); margin:4dvh auto; border-radius:34px;
    border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.03);
  }
}

#screens{flex:1; overflow-y:auto; overflow-x:hidden; position:relative; -webkit-overflow-scrolling:touch;}
.screen{display:none; min-height:100%;}
.screen.is-active{display:block; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}

.topbar{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;}
.badge{width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;}
.badge img{width:78%;height:78%;object-fit:contain;}
.topbar-word{display:flex;flex-direction:column;line-height:1.05;}
.topbar-word b{font-family:'Bebas Neue';font-size:1rem;letter-spacing:.05em;}
.topbar-word span{font-size:.6rem;letter-spacing:.09em;color:var(--muted);font-weight:700;}
.topbar-spacer{flex:1;}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);position:relative;}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--live);}

main.pad{padding:1.1rem 1.1rem 2rem;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 .7rem;}
.section-head h3{font-size:1.35rem; margin:0;}
.see-all{font-size:.76rem; font-weight:700; color:var(--accent-ink); background:none; border:none;}

.join-banner{
  display:flex; align-items:center; gap:.8rem; background:linear-gradient(135deg, var(--gold-soft), var(--surface));
  border:1px solid var(--gold); border-radius:14px; padding:.9rem 1rem; margin-bottom:1rem;
}
.join-banner svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--gold-ink);stroke-width:1.6;}
.join-banner b{display:block; font-size:.92rem;}
.join-banner span{font-size:.78rem; color:var(--ink-soft);}
.join-banner button{margin-left:auto; flex:none; background:var(--gold); color:var(--on-accent); border:none; font-weight:700; font-size:.78rem; padding:.5rem .8rem; border-radius:8px;}

.promo-banner{display:flex; align-items:center; gap:.8rem; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:1rem;}
.promo-banner svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;}
.promo-banner b{display:block; font-size:.92rem;}
.promo-banner span{font-size:.78rem; color:var(--ink-soft);}
.promo-banner button{margin-left:auto; flex:none; background:var(--ink); color:var(--on-accent); border:none; font-weight:700; font-size:.78rem; padding:.5rem .8rem; border-radius:8px;}

/* ---------- Clip / baller detail (used by Home + Clips) ---------- */
.clip-strip{display:flex; gap:.75rem; overflow-x:auto; padding:0 1.1rem .3rem; margin:0 -1.1rem 1.4rem;}
.clip-strip::-webkit-scrollbar{display:none;}
.clip-thumb-sm{flex:none; width:150px;}
.clip-thumb-sm .clip-thumb{aspect-ratio:16/10; border-radius:12px;}
.clip-thumb-sm h4{font-size:.8rem; margin:.4rem 0 .15rem;}
.clip-thumb-sm .meta{font-size:.7rem; color:var(--muted);}

.clip-thumb{position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.clip-thumb.cat-podclips, .player-frame.cat-podclips{background:linear-gradient(140deg, var(--media-1) 0%, var(--media-2) 100%);}
.clip-thumb.cat-bts, .player-frame.cat-bts{background:linear-gradient(140deg, var(--media-2) 0%, var(--media-1) 130%);}
.clip-thumb.cat-debates, .player-frame.cat-debates{background:linear-gradient(140deg, var(--media-1) 0%, var(--media-2) 130%);}
.clip-thumb.cat-reactions, .player-frame.cat-reactions{background:linear-gradient(140deg, var(--media-1) 0%, var(--live) 140%);}
.clip-thumb .wm{position:absolute; opacity:.16; width:64%; height:64%; color:#fff; fill:none; stroke:currentColor; stroke-width:1.2;}
.clip-thumb .play{position:relative; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;}
.clip-thumb .play svg{width:13px;height:13px; fill:var(--media-1); margin-left:2px;}
.clip-thumb .dur{position:absolute; bottom:.4rem; right:.4rem; background:rgba(0,0,0,.6); color:#fff; font-size:.66rem; padding:.12rem .4rem; border-radius:5px; font-family:'JetBrains Mono';}
.clip-body{padding:.65rem .7rem .8rem;}
.clip-body .eyebrow{font-size:.6rem;}
.clip-body h4{font-size:.85rem; margin:.25rem 0 .3rem; line-height:1.25;}
.clip-body .meta{font-size:.72rem; color:var(--muted);}

.baller-avatar{aspect-ratio:16/10; border-radius:12px; margin:0 1.1rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; background:linear-gradient(140deg, var(--media-1) 0%, var(--media-2) 130%); color:#fff;}
.baller-avatar .rank-big{font-family:'Bebas Neue'; font-size:3rem; line-height:1;}
.baller-avatar .rank-label{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75;}

.player-frame{aspect-ratio:16/10; border-radius:12px; margin:0 1.1rem 1rem; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.player-frame .play-big{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.player-frame .play-big svg{width:20px;height:20px;fill:var(--media-1);margin-left:3px;}
.clip-desc{padding:0 1.1rem;}
.clip-desc h3{margin:0 0 .3rem; font-size:1.1rem;}
.clip-desc .meta{color:var(--muted); font-size:.78rem; margin-bottom:.7rem;}
.clip-desc p{font-size:.87rem; color:var(--ink-soft); margin:0 0 1rem;}

.badge[data-goto]{cursor:pointer;}

/* ---------- Tab bar ---------- */
#tabbar{display:flex; border-top:1px solid var(--line); background:var(--surface); padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom));}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; background:none; border:none; padding:.35rem 0; color:var(--muted); text-decoration:none;}
.tab svg{width:20px;height:20px; fill:none; stroke:currentColor; stroke-width:1.8;}
.tab span{font-size:.62rem; font-weight:700; letter-spacing:.01em;}
.tab[aria-current="page"]{color:var(--accent);}
.tab[aria-current="page"] svg{stroke-width:2.1;}

/* ---------- Sheet / Modal ---------- */
.scrim{position:absolute; inset:0; background:rgba(11,10,8,.55); z-index:8; opacity:0; pointer-events:none; transition:opacity .2s;}
.scrim.is-open{opacity:1; pointer-events:auto;}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:9; background:var(--surface); border-radius:20px 20px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.25); max-height:82%; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .25s ease;}
.sheet.is-open{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--line);border-radius:99px;margin:.6rem auto;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:0 1.1rem .6rem;}
.sheet-head h3{font-size:1.15rem; margin:0;}
.sheet-close{background:none; border:none; color:var(--muted); font-size:1.3rem; line-height:1;}
.sheet-body{overflow-y:auto; padding:0 1.1rem 1.3rem;}

.cp-note{font-size:.75rem; color:var(--muted); background:var(--surface-2); border-radius:8px; padding:.55rem .7rem; margin-bottom:1rem;}
.cp-form{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem;}
.cp-form label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem;}
.cp-form input, .cp-form textarea, .cp-form select{width:100%; padding:.55rem .7rem; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-size:.88rem; resize:vertical;}
.cp-form textarea{min-height:4rem;}
.confirm-box h3{margin:0 0 .3rem; font-size:1.4rem;}
.confirm-box p{margin:0; font-size:.87rem; color:var(--ink-soft);}
.cp-submit{align-self:flex-start; padding:.6rem 1.1rem; border-radius:9px; border:none; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.85rem;}
.cp-error{color:var(--live); font-size:.78rem; margin:0 0 .5rem;}
.comment{border-top:1px solid var(--line); padding-top:.7rem; margin-top:.7rem;}
.comment:first-child{border-top:none; margin-top:0; padding-top:0;}
.comment-head{display:flex; gap:.5rem; align-items:baseline; margin-bottom:.15rem;}
.comment-head b{font-size:.85rem;}
.comment-head time{font-size:.68rem; color:var(--muted); font-family:'JetBrains Mono';}
.comment p{margin:0; font-size:.85rem; color:var(--ink-soft);}

.toast{position:absolute; left:1.1rem; right:1.1rem; bottom:1.2rem; background:var(--ink); color:var(--paper); padding:.8rem 1rem; border-radius:12px; font-size:.85rem; box-shadow:var(--shadow); z-index:12; opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; pointer-events:none;}
.toast.is-visible{opacity:1; transform:translateY(0);}