/* v2: hook, challenge tape, mood, faces + speech, W/L callouts. Desktop frame = 80rem x 45rem. */
#deck{gap:.55rem}
.hook{font-family:Anton,sans-serif;font-weight:400;font-size:2.55rem;line-height:1;letter-spacing:.01em;white-space:nowrap;
  text-transform:uppercase;margin:.05rem 0 .1rem}
.hw{display:inline-block}
.hw.acc{color:var(--acid);text-shadow:0 0 .3em rgba(198,255,26,.5)}
.hero{grid-template-columns:1.55fr .85fr 1fr}
.goal .bignum{font-size:3.4rem}
.goal .goalbody{gap:1.2rem}
.goal .meter{margin-top:1.15rem}
/* challenge tape: 30 slim bars, weeks marked */
.daynum{font-size:3.3rem}
.tape{display:grid;grid-template-columns:repeat(var(--n,30),1fr);gap:2px;height:1.5rem;margin:.55rem 0 .2rem}
.tape i{background:rgba(241,239,231,.1);border-radius:1px;transform-origin:50% 100%}
.tape i.wk{box-shadow:inset 0 -2px 0 rgba(241,239,231,.35)}
.tape i.past.on{background:var(--acid);box-shadow:var(--glow)}
.tape i.today.on{background:transparent;outline:1px solid var(--acid);box-shadow:inset 0 0 .5em rgba(198,255,26,.7),var(--glow)}
.tapeLabels{display:flex;justify-content:space-between;font-size:.56rem;color:var(--gray);letter-spacing:.08em}
.dayleft{margin-top:.35rem;font-size:.85rem;color:var(--paper)}
.dayleft b{font-family:Anton,sans-serif;font-weight:400;font-size:1.5rem;color:var(--acid);margin-right:.3rem}
/* mood */
.moodWord{font-family:Anton,sans-serif;font-size:2.1rem;line-height:1;color:#FFB020;text-shadow:0 0 .35em rgba(255,176,32,.45)}
.moodScale{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:.6rem 0 1rem}
.moodScale i{height:.5rem;background:rgba(241,239,231,.1);border-radius:1px}
.moodScale i.on{background:#FFB020;box-shadow:0 0 .7em rgba(255,176,32,.7)}
.moodScale .ends{position:absolute;left:0;right:0;top:.75rem;display:flex;justify-content:space-between;font-size:.52rem;color:var(--gray);letter-spacing:.12em;text-transform:uppercase}
.moodLine{font-size:.82rem;line-height:1.3}
.proof{font-size:.55rem;color:var(--gray);letter-spacing:.05em;margin-top:.3rem}
/* crew cards with faces and speech */
.card{border-color:color-mix(in srgb,var(--acc) 35%,transparent)}
.card::before,.card::after{border-color:var(--acc)}
.cardTop{display:flex;gap:.7rem;align-items:center}
.faceBox{width:2.9rem;flex:none}
.face{display:block;width:100%;height:auto;filter:drop-shadow(0 0 .5rem color-mix(in srgb,var(--acc) 35%,transparent))}
.card .who{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.card .nm{display:flex;align-items:center;gap:.5rem}
.card .name{font-size:1.35rem;line-height:1;color:var(--acc)}
.card .role{margin:0;font-size:.56rem;max-width:100%}
.card .st{white-space:nowrap;font-size:.52rem;padding:.12rem .45rem .12rem 1rem}
.say{position:relative;margin-top:.5rem;padding:.4rem .6rem;font-size:.78rem;line-height:1.28;border:1px solid var(--acc);
  border-radius:.35rem;background:color-mix(in srgb,var(--acc) 8%,transparent);min-height:0}
.say::before{content:"";position:absolute;left:1.2rem;top:-.42rem;width:.7rem;height:.7rem;background:var(--ink);
  border-left:1px solid var(--acc);border-top:1px solid var(--acc);transform:rotate(45deg)}
.card .proof{margin-top:.25rem}
.card .kv{font-size:.6rem;line-height:1.25;display:flex;gap:.4rem;color:rgba(241,239,231,.8)}
.card .kv .k{color:var(--gray);letter-spacing:.14em;text-transform:uppercase;font-size:.54rem;padding-top:.06rem}
/* lower: W / L */
.lower{grid-template-columns:5fr 7fr}
.wl{gap:.55rem;justify-content:center}
.call{border-left:3px solid var(--acid);padding:.35rem .7rem;background:linear-gradient(90deg,rgba(198,255,26,.09),transparent 80%)}
.call.l{border-color:#FF5A4F;background:linear-gradient(90deg,rgba(255,90,79,.1),transparent 80%)}
.call .tag{font-family:Anton,sans-serif;font-size:.95rem;letter-spacing:.06em;color:var(--acid);text-transform:uppercase}
.call.l .tag{color:#FF5A4F}
.call .txt{font-size:.92rem;line-height:1.25;margin-top:.15rem}
/* video stages: hook slam, bot talk beats, closer */
.stage{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,32,24,.96),rgba(11,11,12,.985));visibility:hidden;opacity:0}
#hookStage{flex-direction:column;gap:2rem}
.hookBig{font-family:Anton,sans-serif;font-size:6rem;line-height:1.02;text-transform:uppercase;text-align:center;max-width:70rem}
.hookBig .hw{opacity:0;margin:0 .1em}
.stageSub{font-size:1.1rem;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;opacity:0}
#talk{gap:3.5rem;padding:0 6rem}
.talkFace{width:17rem;flex:none}
.talkBody{width:46rem}
.talkName{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.2rem}
.talkName b{font-family:Anton,sans-serif;font-weight:400;font-size:4.6rem;line-height:1;color:var(--acc)}
.talkName span{font-size:.95rem;color:var(--gray);letter-spacing:.06em}
.bubble{position:relative;font-size:2.1rem;line-height:1.25;padding:1.1rem 1.4rem;border:2px solid var(--acc);border-radius:.6rem;
  background:color-mix(in srgb,var(--acc) 9%,rgba(11,11,12,.6))}
.bubble::before{content:"";position:absolute;left:-.8rem;top:1.6rem;width:1.4rem;height:1.4rem;background:#14150f;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(45deg)}
#talk .proof{font-size:.95rem;margin-top:.9rem}
#closer{flex-direction:column;gap:1.4rem;text-align:center}
.closerMark svg{display:block;width:7.5rem;height:auto;filter:drop-shadow(0 0 1.2rem rgba(198,255,26,.3))}
.closerBig{font-family:Anton,sans-serif;font-size:4.2rem;line-height:1.05;text-transform:uppercase;max-width:66rem}
.closerBig b{font-weight:400;color:var(--acid);text-shadow:0 0 .3em rgba(198,255,26,.5)}
.closerSub{font-size:1.2rem;color:var(--paper);letter-spacing:.04em}
.closerSub b{color:var(--acid)}
html.live .stage,html.still .stage{display:none}