/* Escape Tilt City v18: the Home panel (Omar's approved mock, mocks-inpanel/home.html, tightened spacing) and the
   Tilt City drive video backdrop (mocks-inpanel/home-video.html). Rendered by etc/home.js into .np[data-np="board"]. */

/* ---------- Home panel ---------- */
.np.nphome{padding:16px 22px 12px;gap:14px;align-items:stretch}
.nphome .hk{flex:none}
.nphome .hk .k,.nphome .hk-k{font:600 10px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.nphome .hk h1{font:600 22px/1.15 var(--disp);color:var(--ink);margin-top:5px}
.nphome .hb{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:22px;align-items:stretch}
.nphome .hl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,4.5vh,48px);min-height:0}
.nphome .hbig{position:relative;width:min(520px,44vh,82%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;color:#fff;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,var(--accent-hi),var(--accent) 60%,var(--accent-ink));
  box-shadow:0 0 0 14px rgba(var(--glow),.10),0 0 0 15px rgba(var(--glow),.18),0 18px 40px rgba(var(--shade),.25);transition:transform .18s ease,box-shadow .18s ease}
.nphome .hbig:hover{transform:scale(1.015)}
.nphome .hbig:active{transform:scale(.985)}
.nphome .hbig b{display:block;font:600 clamp(31px,4vh,40px)/1.08 var(--disp);letter-spacing:-.01em;color:#fff}
.nphome .hbig small{display:block;margin-top:9px;font:600 11px var(--disp);letter-spacing:.2em;text-transform:uppercase;opacity:.85;color:#fff}
.nphome .steps3{display:flex;gap:8px;width:100%;max-width:420px;counter-reset:st;list-style:none}
.nphome .steps3 span{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:12px;background:var(--tint2);font:600 12.5px/1.15 var(--disp);color:var(--muted);counter-increment:st}
.nphome .steps3 span::before{content:counter(st);flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--dash);display:grid;place-items:center;font:700 10px/1 var(--disp);color:var(--soft)}
.nphome .steps3 span.ok{color:var(--good)}
.nphome .steps3 span.ok::before{content:"✓";border-color:var(--good);color:var(--good)}
.nphome .hr{display:flex;flex-direction:column;gap:12px;min-height:0}
.nphome .hc{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px rgba(var(--shade),.05)}
.nphome .strip{flex:none;display:flex;align-items:center;gap:12px;padding:clamp(14px,2.2vh,22px) 18px;text-align:left;width:100%}
.nphome .strip .g{flex:1;min-width:0}
.nphome .strip .row{display:flex;align-items:center;gap:6px;min-width:0}
.nphome .strip .sp{flex:1}
.nphome .strip b.n{font:600 17px var(--disp);color:var(--ink)}
.nphome .strip .sub{font-size:13px;color:var(--muted);line-height:1.3;margin-top:5px}
.nphome .strip .td{flex:none;text-align:right;border-left:1px solid var(--line);padding-left:12px}
.nphome .strip .td b{display:block;font:600 20px/1 var(--disp);color:var(--gold)}
.nphome .strip .td small{font:700 9.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.nphome .strip .set{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 14px/1 var(--disp)}
.nphome .bar2{height:6px;border-radius:3px;background:var(--tint);overflow:hidden;margin-top:7px}
.nphome .bar2 i{display:block;height:100%;background:var(--brandgold);border-radius:3px}
.nphome .htiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:12px}
.nphome .htile{position:relative;display:flex;gap:12px;align-items:center;padding:14px 28px 14px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 2px 8px rgba(var(--shade),.05);min-width:0;min-height:0;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
.nphome .htile:hover{border-color:var(--accent-hi);box-shadow:0 6px 18px rgba(var(--shade),.10);transform:translateY(-1px)}
.nphome .htile .ti{flex:none;width:clamp(48px,5.4vh,60px);height:clamp(48px,5.4vh,60px);border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--accent)}
.nphome .htile .ti svg.i{width:24px;height:24px}
.nphome .hav{flex:none;width:clamp(48px,5.4vh,60px);height:clamp(48px,5.4vh,60px);border-radius:50%;display:grid;place-items:center;overflow:hidden;border:2px solid var(--brandgold);background:#cfdbe6 no-repeat}
.nphome .hav.jbk{background-image:url(ch-jbk.webp);background-position:50% 3%;background-size:165% auto}
.nphome .hav.tux{background-image:url(ch-tuxedo.webp);background-position:54% 4%;background-size:160% auto}
.nphome .hav.mat,.nphome .hav.coach{background-image:url(coach/soultaker-face.webp);background-position:50% 30%;background-size:cover}   /* v23.4: the coach's face (SoulTaker) */
.nphome .hav.crown{background:#2a2414;border-color:#8a6a1e}
.nphome .hav svg{width:100%;height:100%}
.nphome .htile .tt{min-width:0}
.nphome .htile .tt b{display:block;font:600 clamp(15.5px,1.75vh,18px)/1.15 var(--disp);color:var(--ink)}
.nphome .htile .tt small{display:block;font:600 9.5px var(--disp);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.nphome .htile .tt span{display:block;font-size:clamp(12.5px,1.4vh,14px);line-height:1.25;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nphome .htile::after{content:"›";position:absolute;right:12px;top:50%;translate:0 -50%;color:var(--accent);font:600 18px var(--disp)}
.nphome .htile.wide{grid-column:span 2;background:linear-gradient(100deg,var(--paper),var(--gold-tint));border-color:color-mix(in srgb,var(--brandgold) 38%,var(--line))}
.nphome .htile .tt .sm{display:none}
@media (min-width:900px), (orientation:landscape) and (max-height:500px){.nphome .htile .tt span.lg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@media (max-width:899px) and (min-height:501px){.nphome .htile .tt .lg{display:none}.nphome .htile .tt span.sm{display:block}}
.nphome .foot{flex:none;text-align:center;font:italic 13px var(--ui);color:var(--soft)}
@media (min-width:900px) and (min-height:1000px), (orientation:landscape) and (max-height:500px) and (min-height:1000px){
  .nphome .hk h1{font-size:25px}
  .nphome .steps3{max-width:480px}.nphome .steps3 span{font-size:13.5px;padding:11px 12px}
  .nphome .strip b.n{font-size:20px}.nphome .strip .td b{font-size:24px}.nphome .strip .sub{font-size:14px}
  .nphome .htile{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:24px 44px 24px 26px;border-radius:16px}
  .nphome .htile .ti,.nphome .hav{width:76px;height:76px}.nphome .htile .ti{border-radius:16px}.nphome .htile .ti svg.i{width:34px;height:34px}
  .nphome .htile .tt b{font-size:22px}.nphome .htile .tt small{font-size:11px;margin-bottom:5px}.nphome .htile .tt span{font-size:15px;margin-top:4px}
  .nphome .htile::after{right:18px;font-size:24px}
  .nphome .htile.wide{flex-direction:row;align-items:center;justify-content:flex-start;gap:20px}
}
@media (min-width:900px) and (max-height:760px), (orientation:landscape) and (max-height:500px) and (max-height:760px){
  .np.nphome{padding:12px 18px 10px;gap:10px}
  .nphome .hl{gap:18px}.nphome .hbig{width:min(420px,40vh,80%)}
  .nphome .htiles{gap:9px}.nphome .hr{gap:9px}
}
@media (max-width:899px) and (min-height:501px){
  .np.nphome{padding:12px 12px 10px;gap:8px}
  .nphome .hk h1{font-size:19px;margin-top:3px}
  .nphome .hb{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .nphome .hl{gap:16px;padding-top:12px;flex:none}
  .nphome .hbig{width:min(220px,27vh);box-shadow:0 0 0 10px rgba(var(--glow),.10),0 0 0 11px rgba(var(--glow),.18),0 12px 28px rgba(var(--shade),.22)}
  .nphome .hbig b{font-size:26px}.nphome .hbig small{font-size:9.5px;margin-top:6px}
  .nphome .steps3 span{font-size:11.5px;padding:6px 7px}
  .nphome .strip{padding:8px 11px}.nphome .strip .td b{font-size:17px}
  .nphome .hr{flex:1;gap:8px}
  .nphome .htiles{gap:7px;grid-template-rows:none;grid-auto-rows:minmax(0,1fr)}
  .nphome .htile{padding:10px 22px 10px 9px;gap:8px}.nphome .htile::after{right:8px}
  .nphome .htile .ti,.nphome .hav{width:34px;height:34px}.nphome .htile .ti{border-radius:10px}.nphome .htile .ti svg.i{width:18px;height:18px}
  .nphome .htile .tt b{font-size:13.5px}.nphome .htile .tt small{font-size:8.5px;margin-bottom:2px}.nphome .htile .tt span{font-size:11.5px}
  .nphome .foot{font-size:12px}
}
@media (max-width:899px) and (max-height:740px) and (min-height:501px){
  .nphome .hl{gap:10px;padding-top:4px}.nphome .hbig{width:min(190px,24vh)}.nphome .hk h1{font-size:17px}
}

/* Home is a panel now (v18): the old phone cards under the board are retired, and the Home tab's live dot is gone */
.phonecards{display:none!important}
.tabs .ld{display:none}
@media (max-width:899px) and (min-height:501px){.twin .viewport{flex:1 1 auto}}

/* ---------- the drive: a rotating video backdrop (laptop full-bleed; phone a band behind the top bar) ---------- */
.bgv{display:none}
body.twin.vid .bgv{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#1d2f44}
.bgv .still,.bgv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bgv .still{background:#1d2f44 center 40%/cover no-repeat}
.bgv video{opacity:0;transition:opacity .6s ease}
.bgv video.on{opacity:1}
.bgv .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,28,46,.62) 0,rgba(14,28,46,.42) 100px,rgba(20,38,60,.28) 260px,rgba(20,38,60,.30) 70%,rgba(14,28,46,.42) 100%)}
:root[data-mode="dark"] .bgv .scrim{background:linear-gradient(180deg,rgba(8,13,20,.74) 0,rgba(8,13,20,.58) 100px,rgba(10,16,24,.46) 260px,rgba(10,16,24,.50) 70%,rgba(8,13,20,.62) 100%)}
body.twin.vid{background:#1d2f44}
body.twin.vid::before{display:none}
body.twin.vid .app{position:relative;z-index:1}
body.twin.vid .ch .glow{background:radial-gradient(circle,rgba(255,255,255,.16) 0 38%,transparent 68%)}
body.twin.vid .chw img{filter:drop-shadow(0 16px 26px rgba(8,16,28,.55)) drop-shadow(0 0 2px rgba(8,16,28,.35))}
body.twin.vid .scoreboard,body.twin.vid .tabs{box-shadow:0 10px 28px rgba(8,16,28,.28)}
body.twin.vid .pcard{box-shadow:0 22px 60px rgba(8,16,28,.40),0 2px 6px rgba(8,16,28,.12)}
body.twin.vid .rate,body.twin.vid .iconbtn,body.twin.vid .ratef{box-shadow:0 4px 14px rgba(8,16,28,.25)}
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.twin.vid .navrow{align-self:center;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--line);box-shadow:0 6px 18px rgba(8,16,28,.22)}
  body.twin.vid .navrow .arrow{border:0;background:none}
}
@media (max-width:899px) and (min-height:501px){
  body.twin.vid{background:linear-gradient(180deg,var(--bg),var(--bg2))}
  body.twin.vid .bgv{bottom:auto;height:var(--band,120px);-webkit-mask:linear-gradient(#000 calc(100% - 30px),transparent);mask:linear-gradient(#000 calc(100% - 30px),transparent)}
  .bgv .still,.bgv video{object-position:50% 46%}
  .bgv .still{background-position:center 46%}
  .bgv .scrim{background:linear-gradient(180deg,rgba(14,28,46,.55) 0,rgba(14,28,46,.38) 60%,rgba(14,28,46,.30) 100%)}
  body.twin.vid .pcard{box-shadow:0 -6px 22px rgba(8,16,28,.30),0 14px 34px rgba(8,16,28,.14)}
}
@media (prefers-reduced-motion:reduce){.bgv video{display:none}}

/* ===== v18.1 (Omar, Oct 30): no character on Home; the drive takes his place ===== */
.nphome .strip .ti{flex:none;width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--accent)}
.nphome .strip .ti svg.i{width:22px;height:22px}
.nphome .htile.wide .ti{background:color-mix(in srgb,var(--brandgold) 22%,var(--paper));color:var(--gold)}
/* laptop: the left column is an open window on the drive. The clip runs at full frame height on the left (its road and
   vanishing point land in the window), fades into a soft, dimmed copy of the scene behind the panel. Light top gradient only. */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.twin .stage{visibility:hidden}
  body.twin.vid .bgv video{right:auto;width:max(calc(100vh * 542 / 720),calc(var(--winR,34vw) + 220px));object-position:50% 50%;
    -webkit-mask:linear-gradient(90deg,#000 0,#000 72%,transparent 100%);mask:linear-gradient(90deg,#000 0,#000 72%,transparent 100%)}
  body.twin.vid .bgv .still{filter:blur(28px) saturate(1.1) brightness(.62);transform:scale(1.12);background-position:center 40%}
  body.twin.vid .bgv .scrim{background:
    linear-gradient(180deg,rgba(14,28,46,.42) 0,rgba(14,28,46,.12) 110px,rgba(14,28,46,0) 180px),
    linear-gradient(90deg,rgba(14,28,46,0) 0,rgba(14,28,46,0) calc(var(--winR,34vw) - 40px),rgba(20,38,60,.34) calc(var(--winR,34vw) + 80px),rgba(20,38,60,.40) 100%)}
  :root[data-mode="dark"] body.twin.vid .bgv .scrim{background:
    linear-gradient(180deg,rgba(8,13,20,.5) 0,rgba(8,13,20,.16) 110px,rgba(8,13,20,0) 180px),
    linear-gradient(90deg,rgba(8,13,20,.06) 0,rgba(8,13,20,.06) calc(var(--winR,34vw) - 40px),rgba(10,16,24,.5) calc(var(--winR,34vw) + 80px),rgba(10,16,24,.58) 100%)}
}
/* phone: no peek on Home; a taller band so more of the drive shows; Home tightens to keep the first screen whole */
@media (max-width:899px) and (min-height:501px){
  body.twin.on-home .peekch{display:none}
  body.twin.on-home .viewport{margin-top:84px}
  body.twin.on-home .app{gap:6px}
  .nphome .hl{gap:10px;padding-top:4px}
  .nphome .hbig{width:min(168px,21vh);box-shadow:0 0 0 8px rgba(var(--glow),.10),0 0 0 9px rgba(var(--glow),.18),0 10px 24px rgba(var(--shade),.22)}
  .nphome .hbig b{font-size:22px}.nphome .hbig small{margin-top:4px}
  .nphome .hb{gap:8px}
  .nphome .strip{padding:7px 11px}
  .nphome .strip .ti{width:34px;height:34px;border-radius:10px}.nphome .strip .ti svg.i{width:18px;height:18px}
}
@media (max-width:899px) and (max-height:740px) and (min-height:501px){body.twin.on-home .viewport{margin-top:40px}}

/* ===== v18.2 (Omar, Oct 31): real phone screens. iOS Chrome shows ~390x600 in portrait and ~844x330 sideways.
   Portrait: the Start circle sits beside the three steps and sizes from the height; tiles keep their natural height
   (text never overlaps); short screens drop the tile subtitles first, then the quote. Sideways: the laptop layout,
   compacted for the short height. The circle is always a true circle (it never flex-shrinks). ===== */
.nphome .hbig{flex:none}
@media (max-width:899px) and (min-height:501px){
  .np.nphome{overflow-y:auto;scrollbar-width:none;padding:10px 12px 10px;gap:8px}
  .np.nphome::-webkit-scrollbar{display:none}
  .nphome .hb{flex:none;gap:8px}
  .nphome .hl{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding-top:2px}
  .nphome .hbig{width:clamp(104px,19vh,168px)}
  .nphome .hbig b{font-size:clamp(15px,2.7vh,22px)}
  .nphome .hbig small{font-size:8.5px;letter-spacing:.14em;margin-top:4px}
  .nphome .steps3{flex:1;min-width:0;flex-direction:column;gap:6px;max-width:none}
  .nphome .steps3 span{flex:none;padding:7px 9px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nphome .hr{flex:none;gap:8px}
  .nphome .htiles{grid-auto-rows:auto;gap:7px}
  .nphome .htile{min-height:50px}
  .nphome .foot{margin-top:auto;padding-top:2px}
  body.twin.on-home .viewport{margin-top:84px}
}
@media (max-width:899px) and (min-height:501px) and (max-height:740px){body.twin.on-home .viewport{margin-top:46px}}
@media (max-width:899px) and (min-height:501px) and (max-height:700px){
  .nphome .htile .tt span{display:none!important}
  .nphome .htile{min-height:44px;padding-block:7px}
  .nphome .hk h1{font-size:17px}
  .nphome .strip .sub{font-size:12px;line-height:1.25}
}
@media (max-width:899px) and (min-height:501px) and (max-height:620px){
  body.twin.on-home .viewport{margin-top:30px}
  .nphome .foot{display:none}
  .nphome .hk .k{font-size:9px}
}
/* sideways: the laptop layout, compact */
@media (orientation:landscape) and (max-height:500px){
  .twin .app{padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));gap:6px}
  .twin .brand.lockup img{height:34px!important}
  .twin .rate{height:30px;font-size:12px;gap:7px;padding:0 11px}.twin .rate b{font-size:14px}
  .twin .iconbtn{width:30px;height:30px}
  .twin .main{gap:16px}
  .twin .stage{width:26%;min-width:170px;gap:6px}
  .twin .navdial{height:calc(100vh - 150px)}
  .twin .scoreboard{padding:5px 10px 6px}.twin .scoreboard .gotd{display:none}.twin .scoreboard b{font-size:15px}.twin .scoreboard small{font-size:11.5px}
  .twin .tabs button{height:28px;font-size:13px}
  .twin .navrow{display:none}
  .twin .deck{gap:6px}
  .twin .pcard{border-radius:16px}
  .np.nphome{padding:8px 12px;gap:6px;overflow-y:auto;scrollbar-width:none}
  .nphome .hk .k{display:none}.nphome .hk h1{font-size:15px;margin:0}
  .nphome .hb{gap:12px}
  .nphome .hl{gap:8px}
  .nphome .hbig{width:min(150px,calc(100vh - 170px),90%);box-shadow:0 0 0 7px rgba(var(--glow),.10),0 0 0 8px rgba(var(--glow),.18),0 8px 20px rgba(var(--shade),.2)}
  .nphome .hbig b{font-size:clamp(14px,4.4vh,19px)}.nphome .hbig small{font-size:8px;margin-top:3px;letter-spacing:.12em}
  .nphome .steps3{gap:5px}.nphome .steps3 span{font-size:10.5px;padding:5px 6px}
  .nphome .hr{gap:6px}
  .nphome .strip{padding:5px 10px;gap:8px}.nphome .strip .sub{font-size:11.5px}.nphome .strip .ti{width:30px;height:30px}
  .nphome .htiles{grid-template-rows:none;grid-auto-rows:auto;gap:6px}
  .nphome .htile{padding:6px 24px 6px 8px;gap:8px}
  .nphome .htile .ti{width:30px;height:30px;border-radius:9px}.nphome .htile .ti svg.i{width:17px;height:17px}
  .nphome .htile .tt span{display:none!important}
  .nphome .htile .tt b{font-size:13.5px}.nphome .htile .tt small{font-size:8.5px;margin-bottom:1px}
  .nphome .foot{display:none}
}
@media (orientation:landscape) and (max-height:500px){
  .nphome .hr{min-height:auto}
  .nphome .htiles{flex:none}
  .nphome .htile .tt small{display:none}
  .nphome .htile{min-height:40px}
  /* every native panel (Plan, Vs Bots) keeps its natural height and scrolls inside on a short screen */
  .np[data-np="plan"]{overflow-y:auto;scrollbar-width:thin}
  .np[data-np="plan"]>*{flex:none}
  .np[data-np="plan"] .planp{gap:12px}
  .np[data-np="plan"] .planp .hero{min-width:0;padding:10px 14px 12px}
  .np[data-np="plan"] .nph h2{font-size:17px}
  /* Vs Bots: the villain grid keeps three columns; each card takes its natural height and the grid scrolls inside */
  .vb-grid{grid-auto-rows:max-content}
  .vb-card{container-type:normal}
}

/* ===== v18.2 phone Home (portrait): Omar's "dashboard dock" (mocks-phonehome/option-c.html). The drive owns the screen;
   one glass Today card with a modest Start; the sections ride an east-west rail of floating cards with dots. No characters.
   Landscape phones and laptops keep the panel layout above. ===== */
.hdock{display:none}
@media (max-width:899px) and (min-height:501px){
  body.twin{--glass:rgba(251,252,254,.90);--glass-line:rgba(255,255,255,.75)}
  :root[data-mode="dark"] body.twin{--glass:rgba(24,31,39,.86);--glass-line:rgba(255,255,255,.08)}
  body.twin.vid .bgv{bottom:0;height:auto;-webkit-mask:none;mask:none}
  body.twin.vid .bgv .still,body.twin.vid .bgv video{object-position:50% 30%}
  body.twin.vid .bgv .still{background-position:center 30%}
  body.twin.vid .bgv .scrim{background:linear-gradient(180deg,rgba(10,18,28,.28) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 55%,rgba(10,18,28,.22) 100%)}
  :root[data-mode="dark"] body.twin.vid .bgv .scrim{background:linear-gradient(180deg,rgba(5,9,14,.45) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 55%,rgba(5,9,14,.30) 100%)}
  body.twin.on-home .viewport{margin-top:0!important}
  body.twin.on-home .pcard{background:none;border:0;box-shadow:none!important;overflow:visible;border-radius:0}
  body.twin.on-home .np.nphome{background:none;padding:0;overflow:visible;gap:0}
  .nphome>.hk,.nphome>.hb,.nphome>.foot{display:none!important}
  .hdock{display:flex;flex-direction:column;height:100%;min-height:0}
  .hd-cap{display:none;flex:none;align-self:center;margin-top:10px;padding:7px 13px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(0,0,0,.14);font:italic 400 13px/1.3 var(--ui);color:var(--muted);text-align:center}
  .hd-open{flex:1 1 auto;min-height:40px}
  .hd-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 10px 28px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.08)}
  .hd-today{flex:none;padding:12px 12px 12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:9px;align-items:center}
  .hd-tx{display:grid;gap:4px;min-width:0}
  .hd-kick{font:600 10px/1.1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
  .hd-hl{font:600 18px/1.2 var(--disp);color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
  .hd-go{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:3px;color:#fff;
    background:radial-gradient(circle at 32% 28%,var(--accent-hi),var(--accent) 62%,var(--accent-ink));box-shadow:0 0 0 5px rgba(var(--glow),.16),0 8px 18px rgba(var(--shade),.28)}
  .hd-go svg{width:18px;height:18px;fill:#fff;margin-left:3px}
  .hd-go b{font:700 9.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#fff}
  .hd-steps{grid-column:1/-1;display:flex;gap:6px;list-style:none;counter-reset:st}
  .hd-steps li{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:10px;background:var(--tint2);font:600 12px/1.15 var(--disp);color:var(--muted);counter-increment:st;white-space:nowrap}
  .hd-steps li span{overflow:hidden;text-overflow:ellipsis}
  .hd-steps li::before{content:counter(st);flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--dash);display:grid;place-items:center;font:700 9px/1 var(--disp);color:var(--soft)}
  .hd-steps li.ok{color:var(--good)}.hd-steps li.ok::before{content:"✓";border-color:var(--good);color:var(--good)}
  .hd-rail{flex:none;margin:10px -16px 0;padding:2px 16px 4px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
  .hd-rail::-webkit-scrollbar{display:none}
  .hd-tile{position:relative;flex:0 0 212px;scroll-snap-align:start;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 26px 10px 10px;text-align:left;border-radius:16px}
  .hd-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--accent);display:grid;place-items:center}
  .hd-ic svg.i{width:19px;height:19px}
  .hd-tile.gold .hd-ic{background:#2a2216;color:var(--brandgold)}
  .hd-ttx{min-width:0;display:grid;gap:4px}
  .hd-ttx b{font:600 14px/1.15 var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-ttx span{font-size:12px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-chev{position:absolute;right:10px;top:50%;translate:0 -50%;color:var(--accent);font:600 18px/1 var(--disp)}
  .hd-dots{flex:none;display:flex;justify-content:center;gap:5px;margin-top:7px}
  .hd-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
  .hd-dots i.on{width:14px;border-radius:3px;background:#fff}
  /* the header rides the drive: glass pills, "Road out · Set it" until a goal is set */
  body.twin .rate,body.twin .iconbtn{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 4px 14px rgba(0,0,0,.14)}
  body.twin .rate.unset::before{content:"Road out";font:600 9.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  body.twin .rate.unset .bar{display:none}
}
@media (max-width:899px) and (min-height:720px){
  .hd-cap{display:block}
  .hd-today{padding:14px 14px 14px 16px}
  .hd-go{width:68px;height:68px}
  .hd-tile{padding:13px 26px 13px 12px}
}
@media (max-width:899px) and (min-height:501px) and (max-height:580px){.hd-dots{display:none}}
/* small phones sideways (iPhone SE ~667 wide): the top tabs drop their icons so all five labels fit */
@media (orientation:landscape) and (max-height:500px) and (max-width:760px){
  .twin .tabs button svg.i{display:none}
  .twin .tabs button{font-size:12.5px;gap:0;padding:0 4px}
  .twin .stage{min-width:150px;width:24%}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:760px){
  .np[data-np="plan"] .planp{grid-template-columns:minmax(0,1fr)}
  .vb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:500px){
  .np[data-np="plan"] .planp{align-items:start}
  .np[data-np="plan"] .planp .hero{align-self:start;justify-content:flex-start;gap:6px}
  .np[data-np="plan"] .planp .hero .big{width:min(132px,38vh)!important;height:auto!important;aspect-ratio:1;flex:none}
  .np[data-np="plan"] .planp .hero .big b{font-size:17px}
}

/* ===== v19 standing rule (Omar, Oct 31): no characters in the stage or the header on ANY tab, phone or laptop.
   Characters live only inside content (villain cards, the opponent at a board). The drive is the same on every tab. ===== */
.peekch{display:none!important}
@media (max-width:899px) and (min-height:501px){
  body.twin:not(.on-home) .viewport{margin-top:12px}
  body.twin.vid:not(.on-home) .pcard{box-shadow:0 14px 34px rgba(8,16,28,.28)}
}

/* ===== v22: Tilt City scenes (etc/scenes.js). Two still layers crossfade; stills drift slowly (Ken Burns); per-scene scrim. ===== */
.bgv .still{opacity:0;transition:opacity 1.2s ease;will-change:opacity}
.bgv .still.on{opacity:1}
.bgv video{z-index:1}
.bgv .scrim{z-index:2}
.bgv::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(10,18,28,0);transition:background-color 1.2s ease}
.bgv[data-scrim="1"]::after{background:rgba(10,18,28,.12)}
.bgv[data-scrim="2"]::after{background:rgba(10,18,28,.22)}
.bgv[data-scrim="3"]::after{background:rgba(10,18,28,.32)}
:root[data-mode="dark"] .bgv[data-scrim="1"]::after{background:rgba(4,8,14,.16)}
:root[data-mode="dark"] .bgv[data-scrim="2"]::after{background:rgba(4,8,14,.28)}
:root[data-mode="dark"] .bgv[data-scrim="3"]::after{background:rgba(4,8,14,.40)}
@media (prefers-reduced-motion:no-preference){
  .bgv .still.kb{animation:etcKB var(--kbd,12s) linear both}
}
@keyframes etcKB{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(var(--kx,-1.4%),var(--ky,-.8%))}}
@media (prefers-reduced-motion:reduce){.bgv .still{transition:none}.bgv .still.kb{animation:none}}