:root{
  /* Layout idea: one phone-width column, a gold "line" under the wordmark, plays as tickets with the price set large. Single dark theme, matching the brand banner. */
  color-scheme: dark;
  --ink:#0A0D14; --panel:#121723; --panel-2:#1A2030; --rule:#283044;
  --bone:#EFEBE2; --mute:#8D95A6; --gold:#CFA63A;
  --good:#63C394; --bad:#E57866;
  --nav:rgba(10,13,20,.96);
  --display:"Archivo","Arial Black","Helvetica Neue",sans-serif;
  --label:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}
:root[data-theme="light"]{
  color-scheme: light;
  --ink:#F4F1EA; --panel:#FFFFFF; --panel-2:#EFEAE0; --rule:#D6D0C2;
  --bone:#14181F; --mute:#5A6272; --gold:#85620A;
  --good:#1B7F55; --bad:#B83E2B;
  --nav:rgba(244,241,234,.96);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--bone)}
body{font-family:var(--body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
.wrap{max-width:620px;margin:0 auto;padding:0 18px 40px}
a{color:var(--gold)}
h1,h2,h3{margin:0;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

header.brand{padding:26px 0 0;text-align:center;position:relative}
#theme-btn{position:absolute;right:0;top:10px;min-height:36px;padding:4px 10px;font-size:13px}
.the{font-family:var(--label);font-weight:600;letter-spacing:.08em;color:var(--mute);font-size:14px}
.word{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(34px,10.5vw,54px);line-height:.95;letter-spacing:-.01em}
.word span{color:var(--gold);display:block}
.tag{font-family:var(--label);font-weight:600;letter-spacing:.07em;color:var(--mute);font-size:15px;margin-top:10px;text-transform:uppercase}
.line{height:3px;background:var(--gold);margin:18px 0 0;transform-origin:center;animation:draw .7s ease-out both}
@keyframes draw{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.line{animation:none}}

.view{display:none;padding-top:24px}
.view.on{display:block}
.eyebrow{font-family:var(--label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-size:14px}
h2{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:26px;line-height:1.05;margin-top:4px}
.sub{color:var(--mute);margin:8px 0 0;max-width:60ch}
.stack{display:flex;flex-direction:column;gap:12px;margin-top:18px}

.ticket{background:var(--panel);border-left:3px solid var(--gold);padding:16px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start}
.ticket .sport{font-family:var(--label);font-weight:600;letter-spacing:.1em;color:var(--mute);font-size:13px;grid-column:1/-1}
.ticket .bet{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:22px;line-height:1.1}
.ticket .price{font-family:var(--label);font-weight:700;font-size:34px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.ticket .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.ticket .why{grid-column:1/-1;color:var(--mute);font-size:15px;margin:2px 0 0}
.chip{font-family:var(--label);font-weight:600;letter-spacing:.06em;font-size:13px;text-transform:uppercase;padding:3px 9px;border:1px solid var(--rule);color:var(--bone);border-radius:2px;white-space:nowrap}
.chip.good{border-color:var(--good);color:var(--good)}
.chip.bad{border-color:var(--bad);color:var(--bad)}
.chip.gold{border-color:var(--gold);color:var(--gold)}

button,.btn{box-sizing:border-box;font-family:var(--label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:15px;border-radius:2px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);padding:10px 16px;cursor:pointer;min-height:44px}
button.ghost{background:transparent;color:var(--gold)}
button.quiet{background:transparent;color:var(--mute);border-color:var(--rule)}
button.small{min-height:36px;padding:6px 11px;font-size:13px}

.panel{background:var(--panel);padding:16px}
.panel h3{font-family:var(--label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px;color:var(--bone)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);margin-top:18px}
.tile{background:var(--panel);padding:14px}
.tile .k{font-family:var(--label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-size:13px}
.tile .v{font-family:var(--label);font-weight:700;font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .n{color:var(--mute);font-size:13px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.meter{height:6px;background:var(--panel-2);margin-top:10px}
.meter i{display:block;height:100%;background:var(--gold)}

/* Tools page layout */
body{background:radial-gradient(900px 380px at 50% -60px,rgba(207,166,58,.09),transparent 70%) no-repeat,var(--ink)}
.tgroup{margin-top:30px}
.tgrid,.tstack{display:grid;gap:14px;margin-top:12px}
.tstack{margin-top:0;align-content:start}
#v-tools .panel{border:1px solid var(--rule);border-top:2px solid var(--gold);background:linear-gradient(180deg,rgba(207,166,58,.05),transparent 90px),var(--panel)}
form.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
form.grid .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:5px;font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--mute)}
input,select,textarea{font-family:var(--body);font-size:16px;color:var(--bone);background:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:10px;min-height:44px;width:100%}
textarea{min-height:90px;font-size:13px;word-break:break-all}
.err{color:var(--bad);font-size:14px;min-height:1.2em;margin:0}
.row-actions{display:flex;flex-wrap:wrap;gap:8px}

.bet-row{background:var(--panel);padding:13px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.bet-row .what{font-weight:600;overflow-wrap:anywhere}
.bet-row .when{color:var(--mute);font-size:13px;font-family:var(--label);letter-spacing:.07em;text-transform:uppercase}
.bet-row .num{font-family:var(--label);font-weight:700;font-size:22px;text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.bet-row .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.bet-row.example{background:transparent;border:1px dashed var(--rule)}
.push{margin-left:auto}
.settle{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,130px) 1fr;gap:8px 10px;align-items:end;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.settle .err{grid-column:1/-1;min-height:0}

.out{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin-top:14px;align-items:baseline}
.out dt{color:var(--mute)} .out dd{margin:0;font-family:var(--label);font-weight:700;font-size:22px;text-align:right;font-variant-numeric:tabular-nums}
.verdict{margin-top:14px;padding:12px 14px;border-left:3px solid var(--rule);background:var(--panel-2)}
.verdict.good{border-color:var(--good)} .verdict.bad{border-color:var(--bad)}

.phase{margin-top:22px}
.phase > .eyebrow{color:var(--mute)}
details.lesson{background:var(--panel);margin-top:8px}
details.lesson summary{cursor:pointer;padding:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;font-weight:600;list-style:none}
details.lesson summary::-webkit-details-marker{display:none}
details.lesson .body{padding:0 14px 16px;max-width:65ch}
details.lesson .body p{margin:0 0 12px} details.lesson .body ul{margin:0 0 12px;padding-left:20px}
.soon{padding:11px 14px;color:var(--mute);border-bottom:1px solid var(--panel);display:flex;justify-content:space-between;gap:10px}
.soon span:last-child{font-family:var(--label);letter-spacing:.08em;text-transform:uppercase;font-size:12px;white-space:nowrap}

.ep{background:var(--panel);padding:16px;border-left:3px solid var(--rule)}
.ep .no{font-family:var(--label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-size:13px}
.ep h3{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:20px;margin-top:2px}
.ep p{margin:8px 0 0;color:var(--mute)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.filters button[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.day{font-family:var(--label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-size:13px;margin:18px 0 6px}
.hist{background:var(--panel);padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:2px;border-left:3px solid var(--rule)}
.hist.w{border-left-color:var(--good)} .hist.l{border-left-color:var(--bad)}
.hist .pick{font-weight:600} .hist .pick small{color:var(--mute);font-weight:400;font-size:13px;display:block}
.hist .px{font-family:var(--label);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}
.hist .sm{grid-column:1/-1;color:var(--mute);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px}
.tbl{overflow-x:auto;margin-top:12px}
table.sp{width:100%;border-collapse:collapse;background:var(--panel);font-variant-numeric:tabular-nums}
table.sp th{font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--mute);text-align:right;padding:10px 10px 6px}
table.sp td{padding:10px 8px;text-align:right;border-top:1px solid var(--rule);font-family:var(--label);font-weight:600;font-size:17px;white-space:nowrap}
table.sp th:first-child,table.sp td:first-child{text-align:left}
table.sp tr.tot td{border-top:2px solid var(--gold)}
details.start{background:var(--panel);border-left:3px solid var(--gold);margin-bottom:22px}
details.start summary{cursor:pointer;padding:14px;font-family:var(--label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.start summary::-webkit-details-marker{display:none}
details.start summary::after{content:"Hide";color:var(--mute);font-size:13px}
details.start:not([open]) summary::after{content:"Show"}
details.start .body{padding:0 14px 16px} details.start ul{margin:0 0 12px;padding-left:20px} details.start li{margin-bottom:6px}
.quiz{margin-top:14px;padding:12px;background:var(--panel-2)}
.quiz .q{font-weight:600;margin:4px 0 10px}
.quiz .opts{display:flex;flex-direction:column;gap:8px}
.quiz .opts button{text-align:left;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:500;font-size:15px;background:transparent;color:var(--bone);border-color:var(--rule)}
.quiz .opts button.right{border-color:var(--good);color:var(--good)} .quiz .opts button.wrong{border-color:var(--bad);color:var(--bad)}
.quiz .ex{margin:10px 0 0;color:var(--mute);font-size:14px;min-height:1.2em}
.recap{background:var(--panel);padding:12px 14px;margin-top:2px;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.recap .wk{font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--mute);grid-column:1/-1}
.recap .big{font-family:var(--label);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.recap .sm{grid-column:1/-1;color:var(--mute);font-size:13px}
.ticker{margin:0 -18px 6px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--panel);overflow:hidden}
.ticker[hidden],.tk-cap[hidden]{display:none}
.ticker .track{display:flex;width:max-content;animation:tick var(--dur,60s) linear infinite}
.ticker:hover .track,.ticker:active .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-right:1px solid var(--rule);white-space:nowrap;font-family:var(--label);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.tk .lg{color:var(--mute);font-size:12px;letter-spacing:.08em}
.tk .st{color:var(--mute);font-size:13px}
.tk.live .st{color:var(--gold)}
.tk b{font-weight:700;color:var(--bone)}
.tk.mine{background:rgba(207,166,58,.12);box-shadow:inset 0 -2px 0 var(--gold)}
.tk .pk{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:1px 6px;border-radius:2px}
.tk .pk.good{color:var(--good);border-color:var(--good)}
.tk .pk.bad{color:var(--bad);border-color:var(--bad)}
.tk-cap{color:var(--mute);font-size:12px;margin:0 0 18px}
@media (prefers-reduced-motion:reduce){.ticker{overflow-x:auto}.ticker .track{animation:none}}
.fine{color:var(--mute);font-size:13px;margin-top:28px;border-top:1px solid var(--rule);padding-top:14px}
.fine strong{color:var(--bone)}

nav.tabs{position:sticky;top:0;margin:0 -18px 18px;background:var(--nav);border-bottom:1px solid var(--rule);z-index:5}
nav.tabs div{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
nav.tabs a{font-family:var(--label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:var(--mute);text-decoration:none;text-align:center;padding:14px 1px 12px;border-bottom:3px solid transparent;margin-bottom:-1px}
nav.tabs a.on{color:var(--bone);border-bottom-color:var(--gold)}
/* ---------- Join, share, chart, progress ---------- */
.join{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.join .lead{font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--mute);width:100%}
.join a,a.btnlink{display:inline-block;padding:9px 14px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;font-family:var(--label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:14px;border-radius:2px}
.join a.quiet{border-color:var(--rule);color:var(--mute)}
.sharebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
.chart{margin-top:12px;padding:12px}
.chart svg{display:block;width:100%;height:auto}
.chart .c-grid{stroke:var(--rule)} .chart .c-zero,.chart .c-ev{stroke:var(--mute)} .chart .c-txt{fill:var(--mute)} .chart .c-net{stroke:var(--gold)}
.chart .cap{color:var(--mute);font-size:13px;margin-top:8px}
.chart .cap b{color:var(--gold);font-weight:600}
.sumline{color:var(--mute);font-size:14px;margin-top:10px}
.chip.done{border-color:var(--rule);color:var(--mute);background:transparent}
.prog{color:var(--mute);font-size:14px;margin:6px 0 4px}

/* ---------- Desktop layout ---------- */
@media (min-width:960px){
  body{font-size:17px}
  .wrap{max-width:1120px;padding:0 40px 64px}
  header.brand{padding:36px 0 0}
  .word{font-size:68px}
  .word span{display:inline;margin-left:.22em}
  .tag{font-size:17px}
  nav.tabs{margin:0 -40px 8px}
  nav.tabs div{max-width:1120px;padding:0 40px;grid-template-columns:repeat(6,max-content);justify-content:center;gap:6px}
  nav.tabs a{font-size:15px;padding:16px 26px 14px}
  .ticker{margin:0 -40px 6px}
  h2{font-size:34px}
  .view{padding-top:30px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles .tile{grid-column:auto !important}
  .tile .v{font-size:38px}
  #v-tracker .tiles .tile:nth-child(5){grid-column:span 2 !important}
  #v-plays.on{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-content:start}
  #v-plays > *{grid-column:1 / -1}
  #v-plays > .panel{grid-column:auto}
  #v-plays > #latest{grid-column:1 / -1}
  #latest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 14px} #latest-list .hist{margin-top:0}
  #plays-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
  #plays-list > p{grid-column:1 / -1;margin:0}
  .tgrid{grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .tstack{gap:20px}
  #v-tracker,#v-learn,#v-listen{max-width:880px}
  #v-listen #ep-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .recap{padding:14px 18px}
  details.lesson .body{max-width:72ch}
}
@media (min-width:1280px){
  #plays-list{grid-template-columns:repeat(3,1fr)}
}

/* static pages */
body.pg .wrap{max-width:720px}
.pg-head{padding:22px 0 6px}
.pg-head a{text-decoration:none;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:20px;color:var(--bone);letter-spacing:-.01em}
.pg-head a span{color:var(--gold)}
.pg-line{height:3px;background:var(--gold);margin:12px 0 22px}
body.pg h1{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:30px;line-height:1.08;margin:6px 0 16px}
body.pg h2{font-size:22px;margin:28px 0 10px}
.pg-body p{margin:0 0 14px} .pg-body ul{margin:0 0 14px;padding-left:20px} .pg-body li{margin-bottom:6px}
.pg-quiz{margin-top:24px;padding:14px;background:var(--panel-2)}
.pg-quiz ol{margin:8px 0 12px;padding-left:22px} .pg-quiz li{margin-bottom:4px}
.pg-quiz summary{cursor:pointer;color:var(--gold);font-family:var(--label);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pg-quiz details p{margin:10px 0 0;color:var(--mute)}
.pg-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.pg-nav a{flex:1 1 220px;padding:12px 14px;background:var(--panel);text-decoration:none;color:var(--bone);border-left:3px solid var(--gold)}
.pg-nav small{display:block;color:var(--mute);font-family:var(--label);letter-spacing:.08em;text-transform:uppercase}
.pg-cta{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.pg-cta a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--gold);color:var(--gold);font-family:var(--label);font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:2px}
.pg-cta a.solid{background:var(--gold);color:var(--ink)}
.pg-list h3{font-family:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-size:14px;margin:22px 0 8px}
.pg-list a{display:block;padding:11px 14px;background:var(--panel);margin-bottom:6px;color:var(--bone);text-decoration:none}
.pg-list a:hover{outline:1px solid var(--gold)}
.faq-item{padding:14px 0;border-top:1px solid var(--rule)}
.faq-item h2{margin:0 0 8px;font-size:19px}
.faq-item p{margin:0 0 10px}
body.emb{padding:12px}
.emb-wrap{max-width:560px;margin:0 auto}
.emb-foot{color:var(--mute);font-size:12px;margin:10px 2px 0}