/* MOCK ONLY, round 2 (Omar, Oct 31): the phone's dashboard dock, for laptop. The drive is the hero: full-bleed, no panel.
   One compact frosted center piece per tab, sized to its content, sitting low (the road's vanishing point stays open above it),
   plus floating pills. The center piece only grows when a tab needs it (at the board).
   body.r2.r2-v1  "Dock": the tab nav as a top pill bar, the tab's rail as a bottom dock
   body.r2.r2-v2  "Orbit": the tab nav as a pill column hugging the center piece (the old board-in-the-center idea) */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2{--g:rgba(250,252,254,.72);--g-line:rgba(255,255,255,.62);--g-blur:blur(22px) saturate(1.6);--g-in:rgba(255,255,255,.55);--g-in-line:rgba(27,39,51,.08);
    --g-shadow:0 10px 30px rgba(8,16,28,.20),0 1px 2px rgba(8,16,28,.10);--txs:0 0 10px rgba(255,255,255,.55);
    --muted:#3e4955;--gold:#634502;--soft:#56616d}
  :root[data-mode="dark"] body.r2{--g:rgba(18,25,33,.70);--g-line:rgba(255,255,255,.12);--g-in:rgba(255,255,255,.07);--g-in-line:rgba(255,255,255,.10);
    --g-shadow:0 12px 30px rgba(0,0,0,.36);--txs:0 0 10px rgba(0,0,0,.55);--muted:#b4c0cc;--gold:#e1c27d;--soft:#9aa6b2}
  .r2g,body.r2 .rate,body.r2 .iconbtn,body.r2 .tabs{background:var(--g)!important;border:1px solid var(--g-line)!important;box-shadow:var(--g-shadow)!important;
    -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2 .rate,body.r2 .tabs,body.r2 .r2-nav,body.r2 .r2-cap{text-shadow:var(--txs)}

  /* ---------- the drive owns the screen: full-bleed on every tab, no blur, a light top scrim for the header only ---------- */
  body.r2.vid .bgv video,body.r2.vid.on-home .bgv video{left:0;right:0;width:100%;-webkit-mask:none;mask:none;object-position:50% 50%}
  body.r2.vid .bgv .still,body.r2.vid.on-home .bgv .still{filter:none;transform:none;background-position:center 50%}
  body.r2.vid .bgv .scrim,body.r2.vid.on-home .bgv .scrim{background:linear-gradient(180deg,rgba(14,28,46,.34) 0,rgba(14,28,46,0) 150px,rgba(14,28,46,0) 72%,rgba(14,28,46,.16) 100%)}
  :root[data-mode="dark"] body.r2.vid .bgv .scrim,:root[data-mode="dark"] body.r2.vid.on-home .bgv .scrim{background:linear-gradient(180deg,rgba(6,10,16,.55) 0,rgba(6,10,16,.22) 150px,rgba(6,10,16,.22) 72%,rgba(6,10,16,.40) 100%)}

  /* ---------- no stage, no panel, no carousel dots (the tabs and rails do that job) ---------- */
  body.r2 .stage{display:none}
  body.r2 .peekch,body.r2 .navrow,body.r2 .phonecards{display:none!important}
  body.r2 .main{justify-content:center}
  body.r2 .deck{flex:1 1 auto;max-width:none}
  body.r2 .viewport{margin-top:0!important}
  body.r2 .pcard[data-view="native"],body.r2 .pcard[data-view="board"]{background:none;border:0;box-shadow:none!important;overflow:visible}
  body.r2 .pcard[data-view="board"]::after{display:none}
  body.r2 .pcard[data-view="native"] .np,body.r2 .pcard[data-view="board"] .np{background:none;padding:0 0 22px;overflow:visible}
  body.r2 .pcard[data-view="frame"],body.r2 .pcard[data-view="review"]{background:var(--paper);box-shadow:0 18px 50px rgba(8,16,28,.34)!important}

  /* ---------- v1: the tab nav is a compact pill bar, centered at the top ---------- */
  body.r2 .tabs{align-self:center;border-radius:999px;padding:4px;gap:2px}
  body.r2 .tabs button{flex:0 0 auto!important;border-radius:999px;padding:8px 16px;color:var(--ink)}
  body.r2 .tabs button.on{text-shadow:none}
  /* v2: no top bar; a pill column hugs the center piece (placed by mock-r2.js) */
  body.r2-v2 .tabs{visibility:hidden;height:0;padding:0;border:0!important;margin:0}
  .r2-nav{display:none}
  body.r2-v2 .r2-nav{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:6;width:168px;left:0;top:0}
  .r2-nav button{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 12px;border-radius:999px;font:600 14px var(--disp);color:var(--ink);cursor:pointer;text-align:left}
  .r2-nav button svg{width:18px;height:18px;flex:none}
  .r2-nav button.on{background:var(--accent)!important;color:#fff;border-color:transparent!important;text-shadow:none}
  body.r2-v2 .viewport{padding-left:184px}
  body.r2-v2 .vb-sel .r2-arr.l{left:calc(50% - (var(--railw) / 2) - 54px)}
  body.r2-v2 .pcard[data-view="frame"],body.r2-v2 .pcard[data-view="review"]{margin-left:0}

  /* ---------- the caption pill (as on the phone) ---------- */
  .r2-cap{align-self:center;padding:7px 15px;border-radius:999px;font:italic 400 13.5px/1.3 var(--ui,inherit);color:var(--ink)}

  /* ---------- Home: Today in the center, low; the sections as a dock under it ---------- */
  body.r2 .np.nphome{justify-content:flex-end;align-items:center;gap:0}
  .r2h{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
  .r2h .r2-cap{margin-bottom:auto}
  .r2-today{width:min(640px,100%);padding:16px 16px 16px 22px;border-radius:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:12px;align-items:center}
  .r2-today .k{font:600 10.5px/1.1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
  .r2-today h1{font:600 26px/1.15 var(--disp);color:var(--ink);margin-top:5px;letter-spacing:-.005em;text-shadow:var(--txs)}
  .r2-go{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:4px;color:#fff;cursor:pointer;border:0;
    background:radial-gradient(circle at 32% 28%,var(--accent-hi),var(--accent) 58%,var(--accent-ink));box-shadow:0 0 0 6px rgba(var(--glow),.18),0 10px 22px rgba(8,16,28,.30)}
  :root[data-mode="dark"] .r2-go{background:radial-gradient(circle at 32% 28%,var(--accent),color-mix(in srgb,var(--accent) 70%,#000) 70%)}
  .r2-go svg{width:22px;height:22px;fill:#fff;margin-left:4px}
  .r2-go b{font:700 10.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase}
  .r2-steps{grid-column:1/-1;display:flex;gap:8px;list-style:none;margin:0;padding:0;counter-reset:st}
  .r2-steps li{flex:1;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 8px;border-radius:999px;background:var(--g-in);border:1px solid var(--g-in-line);
    font:600 13.5px var(--disp);color:var(--ink);counter-increment:st}
  .r2-steps li::before{content:counter(st);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--dash);font:700 11px/1 var(--disp);color:var(--soft)}
  .r2-steps li em{margin-left:auto;font-style:normal;font-weight:500;color:var(--muted);font-size:12.5px}
  .r2-steps li.ok::before{content:"✓";border-color:var(--good);color:var(--good)}
  .r2-dock{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;max-width:100%}
  .r2-dock button{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 30px 9px 9px;border-radius:18px;text-align:left;cursor:pointer;min-width:0}
  .r2-dock .ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--g-in);border:1px solid var(--g-in-line);color:var(--accent);display:grid;place-items:center}
  :root[data-mode="dark"] .r2-dock .ic{color:var(--accent-ink)}
  .r2-dock .ic svg{width:20px;height:20px}
  .r2-dock .tx{display:grid;gap:3px;min-width:0}
  .r2-dock .tx b{font:600 14.5px/1.1 var(--disp);color:var(--ink);white-space:nowrap}
  .r2-dock .tx span{font-size:12.5px;line-height:1.15;color:var(--muted);white-space:nowrap}
  .r2-dock .chev{position:absolute;right:11px;top:50%;translate:0 -50%;color:var(--accent);font:600 18px/1 var(--disp)}
  .r2-dock .gold .ic{background:#2a2216;color:var(--brandgold);border-color:transparent}
  /* v2 Home: the nav column carries the sections, so the dock becomes two quiet pills under Today */
  body.r2-v2 .r2-dock button.sec{display:none}

  /* ---------- Training Plan: today's card in the center, the week as a slim pill strip ---------- */
  body.r2 .np[data-np="plan"] .nph{display:none}
  body.r2 .np[data-np="plan"]{justify-content:flex-end;align-items:center}
  body.r2 .planp{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;container-type:normal}
  body.r2 .planp .hero,body.r2 .planp .hero[data-pl]{width:min(720px,100%);min-width:0;padding:16px 18px;border-radius:24px;overflow:visible;align-self:center;
    background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2 .pl-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;align-items:center}
  body.r2 .pl-th b{text-shadow:var(--txs)}
  body.r2 .pl-ss{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px}
  body.r2 .pl-s{background:var(--g-in);border-color:var(--g-in-line);box-shadow:none;border-radius:16px}
  body.r2 .pl-rule{grid-column:1/-1;background:color-mix(in srgb,var(--gold-tint) 72%,transparent)}
  body.r2 .pl-note{display:none}
  body.r2 .pl-act{grid-column:2;grid-row:1;margin:0;flex-wrap:nowrap}
  body.r2 .pl-act .btn{min-height:34px;flex:none;border-radius:999px;background:var(--g-in);border:1px solid var(--g-in-line);color:var(--ink)}
  body.r2 .planp .wk{height:auto;width:auto;max-width:100%}
  body.r2 .planp .wkh{display:none}
  body.r2 .planp .week{display:flex;gap:8px;overflow:visible;padding:0;flex:none}
  body.r2 .week li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:132px;padding:8px 14px 9px;border-radius:16px;cursor:pointer;
    background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2 .week .dd{font-size:10.5px;grid-row:auto}
  body.r2 .week .dl{flex-direction:column;align-items:flex-start;gap:1px}
  body.r2 .week .dl b{font-size:14px;text-shadow:var(--txs)}
  body.r2 .week .dl small{font-size:11.5px;color:var(--muted)}
  body.r2 .week .dc{display:none}
  body.r2 .week li.now{border:2px solid var(--accent)!important;padding:7px 13px 8px;background:color-mix(in srgb,var(--paper) 88%,transparent)}
  body.r2 .week li.easy{border-style:dashed!important;border-color:color-mix(in srgb,var(--soft) 55%,transparent)!important}

  /* ---------- Vs Bots, browsing: a frosted rail of villains, low on the screen, with a counter pill ---------- */
  body.r2 .vsb{justify-content:flex-end}
  body.r2 .vb-sel{flex:none;position:relative;align-items:center;gap:12px}
  body.r2 .vb-head{align-self:center;gap:14px;padding:8px 10px 8px 20px;border-radius:999px;align-items:center;
    background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2 .vb-head small,body.r2 .vb-head p{display:none}
  body.r2 .vb-head h2{font-size:19px;text-shadow:var(--txs)}
  body.r2 .vb-prog .bar{display:none}
  body.r2 .vb-grid{--cw:232px;display:flex;gap:12px;width:calc(var(--cw) * 5 + 48px);max-width:calc(100% - 120px);overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding:4px 2px 10px;flex:none}
  body.r2-v2 .vb-grid{width:calc(var(--cw) * 4 + 36px)}
  body.r2 .vb-grid::-webkit-scrollbar{display:none}
  body.r2 .vb-card{flex:0 0 var(--cw);scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 12px;border-radius:20px;container-type:normal;
    background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2 .vb-card.boss{border:2px solid var(--brandgold,var(--gold));padding:9px 9px 11px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold-tint) 80%,transparent),var(--g) 60%)}
  body.r2 .vb-card .vb-art{width:100%!important;height:132px!important;border-radius:14px;overflow:hidden}
  body.r2 .vb-card .vb-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  body.r2 .vb-card .vb-txt b{font-size:16.5px;text-shadow:var(--txs)}
  body.r2 .vb-card q{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r2-arr{position:absolute;bottom:calc(10px + 118px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);z-index:2;font:600 22px/1 var(--disp)}
  .r2-arr.l{left:calc(50% - (var(--railw) / 2) - 58px)}.r2-arr.r{right:calc(50% - (var(--railw) / 2) - 58px)}
  .r2-cnt{align-self:center;margin-top:-4px;padding:4px 12px;border-radius:999px;font:600 12px var(--disp);color:var(--ink);letter-spacing:.04em}

  /* ---------- Vs Bots, at the board: the piece grows. Solid board in the center, opponent + moves floating beside it ---------- */
  body.r2 .vb-play.wide{--cap:min(var(--bs),62vh);justify-content:center;align-content:center;grid-template-columns:var(--cap) minmax(280px,320px);grid-template-rows:auto 1fr auto auto auto auto;flex:none;height:var(--cap);margin:auto 0;column-gap:16px;row-gap:10px}
  body.r2 .vb-play .vb-board{width:calc(var(--cap) - 28px);height:calc(var(--cap) - 28px)}
  body.r2 .vb-play .vb-boardwrap{width:var(--cap)}
  body.r2 .vb-play .vb-moves{min-height:0}
  body.r2 .vb-play .vb-boardwrap{padding:14px;box-sizing:border-box;border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 50px rgba(8,16,28,.38)}
  body.r2 .vb-play .vb-opp,body.r2 .vb-play .vb-me,body.r2 .vb-play .vb-moves,body.r2 .vb-play .vb-tip{background:var(--paper);border-radius:18px;box-shadow:0 10px 26px rgba(8,16,28,.26)}
  body.r2 .vb-play .vb-opp,body.r2 .vb-play .vb-me{padding:10px 12px}
  body.r2 .vb-play .vb-actions .vb-btn{background:var(--paper);box-shadow:0 6px 16px rgba(8,16,28,.22)}
}

/* ===== PHONE Training Plan (round 2): Home's dashboard-dock language ===== */
.r2p{display:none}
.kd{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--soft)}
.kd.tactics{background:#2E5E46}.kd.play{background:#d29a22}.kd.review{background:#2f6b44}.kd.bots{background:#b3402f}.kd.masters{background:#1b2733}
:root[data-mode="dark"] .kd.tactics{background:#6f9fca}:root[data-mode="dark"] .kd.masters{background:#c9d3dd}:root[data-mode="dark"] .kd.review{background:#5aa274}
@media (max-width:899px) and (min-height:501px){
  body.r2{--pg:rgba(251,252,254,.86);--pg-line:rgba(255,255,255,.7);--pg-in:rgba(27,39,51,.06);--muted:#3e4955;--gold:#634502;--soft:#56616d}
  :root[data-mode="dark"] body.r2{--muted:#b4c0cc;--gold:#e1c27d;--soft:#9aa6b2;--pg:rgba(18,25,33,.80);--pg-line:rgba(255,255,255,.10);--pg-in:rgba(255,255,255,.07)}
  .r2pg{background:var(--pg);border:1px solid var(--pg-line);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 10px 26px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.08)}
  /* the drive full-bleed on Plan too (as on Home); no panel, no peek */
  body.r2.vid.sec-open .bgv{bottom:0;height:auto;-webkit-mask:none;mask:none}
  body.r2.vid .bgv .still,body.r2.vid .bgv video{object-position:50% 30%}
  body.r2.vid .bgv .scrim{background:linear-gradient(180deg,rgba(10,18,28,.28) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 50%,rgba(10,18,28,.22) 100%)}
  :root[data-mode="dark"] body.r2.vid .bgv .scrim{background:linear-gradient(180deg,rgba(5,9,14,.45) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 50%,rgba(5,9,14,.32) 100%)}
  body.r2 .pcard[data-view="native"]{background:none;border:0;box-shadow:none!important;overflow:visible}
  body.r2 .np[data-np="plan"]{background:none;padding:0;overflow:visible}
  body.r2 .np[data-np="plan"]>.nph,body.r2 .np[data-np="plan"]>.planp{display:none!important}
  body.r2 .peekch{display:none!important}
  body.r2 .rate,body.r2 .iconbtn{background:var(--pg)!important;border-color:var(--pg-line)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .r2p{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:5;left:12px;right:12px;top:64px;bottom:calc(var(--tbh,68px) + 10px)}
  .r2p-open{flex:1 1 auto;min-height:24px}
  .r2p-today{flex:none;border-radius:20px;padding:13px 12px 12px 15px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:9px;align-items:center}
  .r2p-today .k{font:600 10px/1.1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .r2p-today h2{font:600 21px/1.15 var(--disp);color:var(--ink);margin-top:4px}
  .r2p-today .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
  .r2p-go{width:64px;height:64px;border-radius:50%;border:0;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)}
  :root[data-mode="dark"] .r2p-go{background:radial-gradient(circle at 32% 28%,var(--accent),color-mix(in srgb,var(--accent) 70%,#000) 70%)}
  .r2p-go svg{width:18px;height:18px;fill:#fff;margin-left:3px}.r2p-go b{font:700 9.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
  .r2p-steps{grid-column:1/-1;display:flex;gap:6px;list-style:none;margin:0;padding:0}
  .r2p-steps li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;background:var(--pg-in);font:600 12.5px var(--disp);color:var(--ink);white-space:nowrap}
  .r2p-steps li span{overflow:hidden;text-overflow:ellipsis}
  .r2p-steps li em{margin-left:auto;font-style:normal;font-weight:500;color:var(--muted);font-size:11.5px}
  .r2p-steps li.ok span{text-decoration:line-through;color:var(--muted)}
  .r2p-acts{grid-column:1/-1;display:flex;align-items:center;gap:8px}
  .r2p-acts .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--accent-ink);font:600 12.5px var(--disp)}
  .r2p-acts .chip svg{width:15px;height:15px;fill:currentColor}
  .r2p-acts .chip.pri{background:var(--accent);border-color:var(--accent);color:#fff}
  :root[data-mode="dark"] .r2p-acts .chip.pri{background:color-mix(in srgb,var(--accent) 80%,#000)}
  .r2p-acts .rule{margin-left:auto;font-size:11.5px;color:var(--muted)}
  .r2p-wh{flex:none;display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.35)}
  .r2p-wh b{font:600 14px var(--disp)}.r2p-wh span{font:600 10px var(--disp);letter-spacing:.14em;text-transform:uppercase}
  .r2p-rail{flex:none;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -12px;padding:2px 12px 6px;scroll-padding:0 12px}
  .r2p-rail::-webkit-scrollbar{display:none}
  .r2d{flex:0 0 112px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 10px 10px;border-radius:16px;text-align:left;min-width:0}
  .r2d .dh{display:flex;align-items:center;gap:6px;width:100%}
  .r2d .dh b{font:700 10.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .r2d .tg{margin-left:auto;font:700 8.5px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:999px;background:var(--accent);color:#fff}
  .r2d .tg.gold{background:var(--gold-tint);color:var(--gold)}.r2d .tg.ok{background:var(--good);color:#fff}
  .r2d .df{font:600 14px/1.15 var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .r2d .dk{display:flex;align-items:center;gap:4px}
  .r2d .dk em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:2px;white-space:nowrap}
  .r2d.today{border:2px solid var(--accent);padding:8px 9px 9px}
  .r2d.rest{border-style:dashed;border-color:color-mix(in srgb,var(--soft) 60%,transparent)}
  .r2d.rest .df{color:var(--muted)}
  .r2d.past:not(.today) .df{color:var(--muted)}
  .r2p-foot{flex:none;display:flex;gap:8px}
  .r2p-foot .fb{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;font:600 13px var(--disp);color:var(--ink)}
  .r2p-foot .fb svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
  .r2p-foot .peek{flex:1;min-width:0;justify-content:flex-start;gap:8px}
  .r2p-foot .peek small{font:700 9.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
  .r2p-foot .peek span{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r2p-foot .peek i{margin-left:auto;font-style:normal;color:var(--accent);font-size:18px}
  /* month sheet: floats over the drive, above the tab bar */
  .r2p-sheet{position:fixed;inset:0 0 var(--tbh,68px) 0;z-index:40;display:flex;align-items:flex-end;padding:12px;background:rgba(8,14,22,.28)}
  .r2p-sheet[hidden]{display:none}
  .r2p-mo{width:100%;border-radius:22px;padding:14px 14px 12px;--pg:rgba(251,252,254,.92)}
  :root[data-mode="dark"] .r2p-mo{--pg:rgba(22,29,37,.92)}
  .r2p-mo .moh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
  .r2p-mo .k{font:600 10px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .r2p-mo h3{font:600 18px var(--disp);color:var(--ink);margin-top:3px}
  .r2p-mo .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted)}
  .r2p-mo .mg{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .r2p-mo .wd{text-align:center;font:700 10px var(--disp);letter-spacing:.1em;color:var(--soft)}
  .r2p-mo .mc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 7px;border-radius:10px;background:var(--pg-in)}
  .r2p-mo .mc b{font:600 13px var(--disp);color:var(--ink)}
  .r2p-mo .mc>span{display:flex;gap:2px;min-height:6px}.r2p-mo .mc .kd{width:6px;height:6px}
  .r2p-mo .mc.rest{background:transparent;border:1px dashed color-mix(in srgb,var(--soft) 50%,transparent)}
  .r2p-mo .mc.today{background:var(--accent)}.r2p-mo .mc.today b{color:#fff}
  .r2p-mo .mc.past{opacity:.55}
  .r2p-mo .lg{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:11.5px;color:var(--muted)}
  .r2p-mo .lg span{display:inline-flex;align-items:center;gap:5px}
}
@media (max-width:899px) and (min-height:501px) and (max-height:700px){
  .r2p{top:56px;gap:6px}
  .r2p-today{padding:10px 10px 10px 13px;row-gap:7px}
  .r2p-today h2{font-size:18px}.r2p-today .sub{display:none}
  .r2p-go{width:54px;height:54px}
  .r2d{padding:7px 9px 8px;gap:3px}.r2d.today{padding:6px 8px 7px}
  .r2p-foot .fb{height:36px}
  .r2p-wh{display:none}
}

/* ===================== r3 (Omar, Oct 31): V2 Orbit, polished. Dark is the default. =====================
   Spacing system: an 8px grid.  --u:8px.  Header inset 24/32.  Orbit gap (nav column to the center piece) 32.
   Nav pills 48 tall, 8 apart.  Card padding 24, radius 24.  Card to its strip/dock 16.  Inner pills 40 tall, 8 apart.
   Bottom margin 32.  Every floating thing snaps to that. */
@font-face{font-family:SignLG;src:url(sign/lg.woff2) format("woff2");font-display:block}
@font-face{font-family:SignOutfit;src:url(sign/outfit-900.woff2) format("woff2");font-weight:900;font-display:block}
.etc-sign{--h:80px;--badge:92px;--tuck:30px;--head:46px;--fs:44px;--es:14px;--cream:#fbf3df;--navy:#1f344e;--gold:#2E5E46;--ink:#15191b;
  position:relative;z-index:8;display:flex!important;align-items:center;gap:0!important;text-decoration:none;filter:drop-shadow(0 12px 20px rgba(0,0,0,.45))}
.etc-sign .badge{position:relative;z-index:3;width:var(--badge)!important;height:var(--badge)!important;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #1f344e,0 0 0 7px #2E5E46}
.etc-sign .plate{position:relative;margin-left:calc(var(--tuck) * -1);height:var(--h)}
.etc-sign svg.shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.etc-sign .t{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 calc(var(--head) + 20px) 0 calc(var(--tuck) + 16px);line-height:1}
.etc-sign .e{font:900 var(--es)/1 SignOutfit,Outfit,sans-serif;letter-spacing:.34em;text-transform:uppercase;margin:0 0 4px 3px;color:#fbf3df}
.etc-sign .c{font:400 var(--fs)/.9 SignLG,'Luckiest Guy',sans-serif;white-space:nowrap;letter-spacing:.01em;color:#fbf3df;-webkit-text-stroke:2.5px #15191b;paint-order:stroke fill;text-shadow:4px 4px 0 #15191b;transform:rotate(-3deg)}
.etc-sign .bulb{fill:#fff6d6;animation:etc-chase 2.4s linear infinite;animation-delay:calc(var(--i) * -.16s)}
.etc-sign .halo{fill:#f6c624;opacity:.55;animation:etc-chase 2.4s linear infinite;animation-delay:calc(var(--i) * -.16s)}
@keyframes etc-chase{0%,100%{opacity:.45}35%{opacity:1}60%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.etc-sign .bulb,.etc-sign .halo{animation:none}.etc-sign .bulb{opacity:.95}}
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2 .app{padding-top:24px!important}
  body.r2 .top{padding:0 8px;align-items:flex-start}
  body.r2 .top .rate,body.r2 .top .iconbtn{margin-top:20px}
  .etc-sign{--h:72px;--badge:84px;--tuck:28px;--head:42px;--fs:40px;--es:12.5px}
}
@media (max-width:899px) and (min-height:501px){
  .etc-sign{margin-top:4px;--h:42px;--badge:48px;--tuck:15px;--head:24px;--fs:22px;--es:8px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
  .etc-sign .badge{box-shadow:0 0 0 2.5px #1f344e,0 0 0 4.5px #2E5E46}
  .etc-sign .t{padding:0 calc(var(--head) + 10px) 0 calc(var(--tuck) + 9px)}
  .etc-sign .e{margin-bottom:2px;letter-spacing:.3em}
  .etc-sign .c{-webkit-text-stroke:1.6px #15191b;text-shadow:2px 2px 0 #15191b}
  body.r2 .rate.unset::before{display:none}
}

@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  /* dark first: a touch more glass behind text, a soft dark halo under it */
  :root[data-mode="dark"] body.r2{--g:rgba(16,23,31,.72);--g-line:rgba(255,255,255,.11);--g-in:rgba(255,255,255,.065);--g-in-line:rgba(255,255,255,.09)}
  /* the orbit: a 168px pill column, 32px from the center piece; content shifts right by 200 so the whole cluster is centered */
  body.r2-v2 .viewport{padding-left:200px}
  body.r2-v2 .r2-nav{width:168px;gap:8px}
  .r2-nav button{height:48px;padding:0 18px 0 14px}
  body.r2-v2 .pcard[data-view="native"] .np,body.r2-v2 .pcard[data-view="board"] .np{padding:0 0 32px}

  /* Home: Today card 640 wide, padding 24; dock 16 below */
  body.r2-v2 .r2h{gap:16px}
  body.r2-v2 .r2-today{padding:24px 24px 24px 24px;row-gap:16px}
  body.r2-v2 .r2-steps li{height:40px}
  body.r2-v2 .r2-dock{gap:16px}
  body.r2-v2 .r2-dock button{height:56px}

  /* Training Plan, simplified: Today first (one card, 888 wide, padding 24), the week second (7 equal 120px pills, 8 apart = 888) */
  body.r2-v2 .planp{gap:16px}
  body.r2-v2 .planp .hero,body.r2-v2 .planp .hero[data-pl]{width:888px;max-width:100%;padding:24px}
  body.r2-v2 .pl-card{grid-template-columns:minmax(0,1fr) auto;gap:16px 24px}
  body.r2-v2 .pl-ss{gap:8px}
  body.r2-v2 .pl-s{padding:8px 8px 8px 12px;grid-template-columns:28px minmax(0,1fr) auto;min-height:56px}
  body.r2-v2 .pl-st span{display:none}
  body.r2-v2 .pl-ck{width:28px;height:28px}
  body.r2-v2 .pl-go{min-height:40px;padding:0 18px;border-color:transparent;background:var(--accent);color:#fff}
  :root[data-mode="dark"] body.r2-v2 .pl-go{background:color-mix(in srgb,var(--accent) 82%,#000)}
  body.r2-v2 .pl-rule{grid-column:1;grid-row:3;background:none;padding:0;font-size:12.5px;color:var(--muted)}
  body.r2-v2 .pl-act{grid-column:2;grid-row:3;justify-self:end;gap:16px}
  body.r2-v2 .pl-act .btn{min-height:0;height:auto;padding:0;border:0!important;background:none!important;box-shadow:none;font-size:13px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
  :root[data-mode="dark"] body.r2-v2 .pl-act .btn{color:#a9c8e6}
  body.r2-v2 .pl-act .btn.ghost{color:var(--muted)}
  body.r2-v2 .planp .week{gap:8px}
  body.r2-v2 .week li{width:120px;height:56px;justify-content:center;padding:0 14px;gap:2px}
  body.r2-v2 .week li.now{padding:0 13px}
  body.r2-v2 .week .dl small{display:none}
  body.r2-v2 .week .dl b{font-size:14px}
  body.r2-v2 .week li.now .dd::after{content:" · today";letter-spacing:.08em}

  /* Vs Bots browsing: header pill, the rail (4 cards x 232 + 3 x 16 = 976), and ONE control pill under it: ‹ 1–4 of 11 › */
  body.r2-v2 .vb-sel{gap:16px}
  body.r2-v2 .vb-grid{--cw:232px;gap:16px;width:976px;max-width:100%;padding:0 0 4px}
  body.r2-v2 .vb-head{padding:8px 8px 8px 24px;gap:16px}
  body.r2-v2 .vb-sel .r2-arr{display:none}
  .r2-ctl{display:none}
  body.r2-v2 .r2-ctl{display:flex;align-items:center;gap:8px;align-self:center;padding:4px;border-radius:999px}
  body.r2-v2 .r2-ctl button{width:40px;height:40px;border-radius:50%;border:0;background:var(--g-in);color:var(--ink);font:600 24px/1 var(--disp);cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
  body.r2-v2 .r2-ctl button:disabled{opacity:.35;cursor:default}
  body.r2-v2 .r2-ctl span{min-width:150px;text-align:center;font:600 13px var(--disp);color:var(--ink)}
  body.r2-v2 .r2-cnt{display:none}

  /* the board: board + side column, 16 apart; the orbit 32 to its left */
  body.r2-v2 .vb-play.wide{column-gap:16px;row-gap:8px}
}
.r2-nav{display:none}@media (min-width:900px), (orientation:landscape) and (max-height:500px){body.r2-v2 .r2-nav{display:flex}}

/* ===== v20 production additions ===== */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  /* Training Plan before a plan exists: one compact row (a small Tap-to-plan circle, today, Start) instead of the giant circle */
  body.r2-v2 .planp .hero:not([data-pl]){display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:24px;row-gap:4px;align-items:center;justify-items:start;text-align:left;width:720px;max-width:100%;padding:16px 24px}
  body.r2-v2 .planp .hero:not([data-pl]) .big{grid-row:1/3;width:112px!important;height:auto;aspect-ratio:1;margin:0}
  body.r2-v2 .planp .hero:not([data-pl]) .big b{font-size:17px}
  body.r2-v2 .planp .hero:not([data-pl]) .big small{font-size:8.5px;letter-spacing:.14em}
  body.r2-v2 .planp .hero:not([data-pl]) .when{grid-column:2;font-size:20px;margin:0;align-self:end}
  body.r2-v2 .planp .hero:not([data-pl]) .whensub{grid-column:2;margin:0;align-self:start}
  body.r2-v2 .planp .hero:not([data-pl]) .btn.p{grid-column:3;grid-row:1/3;margin:0}
  /* week pills: a long day name ends in an ellipsis instead of being cut */
  body.r2 .week .dl b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.r2 .week .dl{min-width:0;max-width:100%}
}
/* phones held sideways get the Orbit too, compact for ~330-390px of height */
@media (orientation:landscape) and (max-height:500px){
  .etc-sign{--h:40px;--badge:46px;--tuck:14px;--head:22px;--fs:21px;--es:7.5px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
  .etc-sign .badge{box-shadow:0 0 0 2.5px #1f344e,0 0 0 4.5px #2E5E46}
  .etc-sign .t{padding:0 calc(var(--head) + 10px) 0 calc(var(--tuck) + 9px)}
  .etc-sign .e{margin-bottom:2px}.etc-sign .c{-webkit-text-stroke:1.5px #15191b;text-shadow:2px 2px 0 #15191b}
  body.r2 .app{padding-top:6px!important}
  body.r2 .top .rate,body.r2 .top .iconbtn{margin-top:4px}
  body.r2-v2 .r2-nav{width:136px;gap:6px}
  .r2-nav button{height:34px;padding:0 12px 0 10px;font-size:12.5px;gap:8px}
  .r2-nav button svg{width:15px;height:15px}
  body.r2-v2 .viewport{padding-left:156px}
  body.r2-v2 .pcard[data-view="native"] .np,body.r2-v2 .pcard[data-view="board"] .np{padding:0 0 10px}
  .r2-cap{display:none}
  body.r2-v2 .r2h{gap:8px}
  body.r2-v2 .r2-today{width:min(520px,100%);padding:12px 14px;row-gap:8px;border-radius:18px}
  .r2-today h1{font-size:18px}
  .r2-go{width:58px;height:58px}.r2-go svg{width:16px;height:16px}.r2-go b{font-size:9px}
  body.r2-v2 .r2-steps li{height:30px;font-size:12px}
  body.r2-v2 .r2-dock{gap:8px}
  body.r2-v2 .r2-dock button{height:44px;padding:6px 26px 6px 6px}
  .r2-dock .ic{width:30px;height:30px}
  body.r2-v2 .planp{gap:8px}
  body.r2-v2 .planp .hero,body.r2-v2 .planp .hero[data-pl]{padding:12px 14px;border-radius:18px}
  body.r2-v2 .planp .hero:not([data-pl]){padding:10px 14px;column-gap:14px}
  body.r2-v2 .planp .hero:not([data-pl]) .big{width:78px!important}
  body.r2-v2 .planp .hero:not([data-pl]) .big b{font-size:12px}body.r2-v2 .planp .hero:not([data-pl]) .big small{display:none}
  body.r2-v2 .planp .hero:not([data-pl]) .when{font-size:16px}
  body.r2-v2 .week li{width:86px;height:42px;padding:0 9px}
  body.r2-v2 .planp .week{gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none}
  body.r2-v2 .vb-sel{gap:8px}
  body.r2-v2 .vb-head{padding:4px 6px 4px 14px}.body.r2 .vb-head h2{font-size:15px}
  body.r2-v2 .vb-grid{--cw:168px;gap:10px;width:calc(var(--cw) * 4 + 30px)}
  body.r2 .vb-card .vb-art{height:72px!important}
  body.r2 .vb-card{padding:7px 7px 9px;gap:4px}
  body.r2 .vb-card q{display:none}
  body.r2-v2 .r2-ctl button{width:30px;height:30px;font-size:18px}
  body.r2-v2 .r2-ctl span{min-width:110px;font-size:12px}
}
/* player cards at the board: a touch more line-height so the name never touches its subline */
.vb-who b{line-height:1.3}.vb-who small{line-height:1.3}
@media (max-width:899px) and (min-height:501px){.r2p-foot .peek span{min-width:0;flex:1 1 auto}}
/* very short sideways screens (iPhone SE ~667x320): the native panels start at the top and scroll inside; secondary lines go */
@media (orientation:landscape) and (max-height:360px){
  body.r2 .pcard[data-view="native"] .np{justify-content:flex-start!important;overflow-y:auto!important;scrollbar-width:none;padding-bottom:8px}
  body.r2 .pcard[data-view="native"] .np::-webkit-scrollbar{display:none}
  body.r2 .pl-rule,body.r2 .pl-act{display:none}
  body.r2-v2 .pl-s{min-height:44px}
  body.r2 .vb-head .vb-prog{display:none}
  body.r2-v2 .vb-head{padding:3px 4px 3px 12px}
  body.r2 .vb-head h2{font-size:14px}
}
@media (orientation:landscape) and (max-height:360px){body.r2 .vsb,body.r2 .np[data-np="plan"]{justify-content:flex-start!important}}
@media (orientation:landscape) and (max-height:360px){body.r2 .vb-card .vb-art{height:52px!important}body.r2-v2 .vb-sel{gap:6px}body.r2-v2 .r2-ctl{padding:2px}}
body .top .brand{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ===================== v21.1 (Omar's live review, Oct 31): villain card framing =====================
   The cards crop a tall portrait into a wide box, and the old 22% focal point (plus a breath that grew from the feet)
   trimmed the tops of heads. Now: framed from the top of the head with a little headroom, one focal point per villain,
   still full-bleed. Transparent cutouts get real headroom (padding above the figure shows the villain's own tile);
   the three square paintings (Juicebox Kid, Elo Owl) use a focal point and a smaller overscan. The idle breath and sway
   pivot from the top of the frame, so the head stays put. */
.vb-art img.cut{box-sizing:border-box;object-fit:cover;object-position:50% 0;padding-top:3px}
body.r2 .vb-card .vb-art img.cut{object-position:50% 0;padding-top:8px}
.vb-art[data-v=juicebox-kid] img:not(.cut){object-position:50% 8%}
.vb-art[data-v=elo-owl] img:not(.cut){object-position:50% 0}
body.r2 .vb-card .vb-art[data-v=juicebox-kid] img:not(.cut){object-position:50% 8%}
body.r2 .vb-card .vb-art[data-v=elo-owl] img:not(.cut){object-position:50% 0}
@media (prefers-reduced-motion:no-preference){
  .vb-art img.cut{transform-origin:50% 0}
  .vb-art img:not(.cut),.vb-av img:not(.cut){--bs0:1.04;scale:1.04;transform-origin:50% 0}
  body.r2 .vb-card .vb-art img:not(.cut){--bs0:1.025;scale:1.025;transform-origin:50% 0}
}
@media (orientation:landscape) and (max-height:500px){body.r2 .vb-card .vb-art img.cut{padding-top:4px}}

/* ===================== v22.1 (Omar's live Vs Bots, Oct 31): no strip over Elo Owl's head =====================
   The square paintings carry a thin light band baked into their top/bottom edge, and v21.1 pinned them to the top of the
   frame (focal point 50% 0, breath + sway pivoting from the top), so the band showed, and the sway/ruffle tipped a top
   corner into view. Now every full-bleed (non-cutout) image overscans 6% on all four sides of its rounded box, so no idle,
   sway or signature move can ever expose an edge, and the box clips through its own rounded mask (isolation) on every
   browser. The framing stays head-first (focal point still the top), the scale overscan goes back to 1. */
.vb-art,.vb-av{isolation:isolate}
.vb-art img:not(.cut),.vb-av img:not(.cut),body.r2 .vb-card .vb-art img:not(.cut){position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none}
@media (prefers-reduced-motion:no-preference){
  .vb-art img:not(.cut),.vb-av img:not(.cut),body.r2 .vb-card .vb-art img:not(.cut){--bs0:1;scale:1;transform-origin:50% 6%}
}

/* ===================== v21.1: the sign's ESCAPE pops =====================
   It was small, widely spaced (.34em) and cream-on-gradient, so it faded. Now: bigger, tight tracking, gold with the same
   ink outline and drop shadow as TILT CITY, on the same -3deg tilt, and the two lines share the arrow's height evenly. */
.etc-sign .t{justify-content:center;gap:0}
.etc-sign .e{font-size:var(--es);line-height:.9;letter-spacing:.09em;color:#ffcf4a;margin:0 0 var(--eg,1px) 2px;
  -webkit-text-stroke:var(--esk,2px) #15191b;paint-order:stroke fill;text-shadow:var(--esh,2px) var(--esh,2px) 0 #15191b;transform:rotate(-3deg);transform-origin:0 100%}
.etc-sign .c{line-height:.84}
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  .etc-sign{--es:18px;--fs:38px;--eg:2px;--esk:2px;--esh:2px}
  .etc-sign .t{padding-top:5px}
}
@media (max-width:899px) and (min-height:501px){
  .etc-sign{--es:11.5px;--fs:21px;--eg:1px;--esk:1.3px;--esh:1.5px}
  .etc-sign .t{padding-top:2px}
  .etc-sign .e{letter-spacing:.08em}
}
@media (orientation:landscape) and (max-height:500px){
  .etc-sign{--es:10.5px;--fs:20px;--eg:1px;--esk:1.2px;--esh:1.5px}
  .etc-sign .t{padding-top:0}
}

/* ===================== v22.1 (Omar, Oct 31): the core line on Vs Bots =====================
   "Each villain is a bad habit. You don't free them by beating them. You free them by not being them."
   Laptop: two quiet lines under the title in the frosted pill. Phone (portrait): just the close, "You free them by not
   being them." Short sideways phones keep the slim one-line pill (no room). */
.vb-line .a,.vb-line .b,.vb-line .c{white-space:nowrap}
@media (min-width:900px){
  body.r2 .vb-head p.vb-line{display:block;margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted);text-shadow:var(--txs)}
  body.r2 .vb-head p.vb-line .a{display:block;color:var(--ink);font-weight:600}
  body.r2 .vb-head:has(.vb-line){border-radius:26px;padding-top:9px;padding-bottom:9px}
}
@media (max-width:899px) and (min-height:501px){
  .vb-head p.vb-line{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted);font-style:italic}
  .vb-head p.vb-line .a,.vb-head p.vb-line .b{display:none}
  .vb-head p.vb-line .c{white-space:normal}
  .vb-head p.vb-line{text-wrap:balance;max-width:190px}
}

/* ===================== v22.1 (Omar's pick, Oct 31): the "Big pawn" logo, route shield + green road sign =====================
   Inline SVG (etc/frost.js); the piece in the shield is its own layer (.etc-pc, data-piece) for the progress swap later.
   Laptop 96px tall (297 wide), phone 64px (198 wide: clears the Set it chip), sideways phones 48px. */
.etc-route{position:relative;z-index:8;display:block!important;flex:none;line-height:0;text-decoration:none}
.etc-route .etc-route-svg{display:block;height:var(--lh,96px);width:auto;max-width:none;overflow:visible;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
/* v23.4.3: the new logo is an image (etc/brand/etc-logo-v3-960.webp; the shield alone below 360px) */
.etc-route .etc-route-pic{display:block;line-height:0}
.etc-route .etc-route-img{display:block;height:var(--lh,96px);width:auto;max-width:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
@media (min-width:900px) and (max-height:760px){.etc-route{--lh:84px}}
@media (max-width:899px) and (min-height:501px){.etc-route{--lh:64px;margin-top:2px}}
@media (orientation:landscape) and (max-height:500px){.etc-route{--lh:48px}}

/* ===================== v22.2 (Omar's live Vs Bots, Oct 31): the hover lift stays inside the rail =====================
   The villain rail scrolls sideways, so it clips on every side; a hovered card lifts 4px and its top edge (the boss's gold
   border most visibly) was cut off by that clip, so the border looked like it escaped the card. The rail now has 12px of
   room above the cards (pulled back up by the same amount, so nothing moves at rest), and the boss keeps its gold border
   on hover instead of fading to the hover tint. */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2 .vb-grid{padding-top:12px;margin-top:-8px}
}
.vb-card.boss:hover,body.r2 .vb-card.boss:hover{border-color:var(--brandgold,var(--gold))}

/* ===================== v22.2: no settle after a tab switch =====================
   The panel's slide-in (translateX 26px) pushed past the right edge for a moment; on phones that briefly widened the page,
   so the fixed tab bar resized and jumped ~20px when the slide ended. The page now clips sideways overflow (clip, not
   hidden: no scroll container, fixed bars unaffected). The laptop pill nav is placed from the panel's resting position. */
html,body{overflow-x:clip}

/* v22.2.1: villain quotes on the laptop rail wrap to a second line instead of ending in "…" (every card keeps the same height) */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2 .vb-card q{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;min-height:2.6em}
}
/* v22.2.2: SoulTak3r (Omar's pick, st-comp_8: hood up, warm rim light): his face centered in every crop; the logo loop as a
   small round badge in the corner (the lock sits in the other corner while he's locked) */
.vb-art[data-v=soultak3r] img:not(.cut),body.r2 .vb-card .vb-art[data-v=soultak3r] img:not(.cut){object-position:50% 9%}
.vb-art .vb-stlogo{position:absolute;left:8px;bottom:8px;z-index:3;width:26%;max-width:52px;min-width:18px;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(243,160,60,.55),0 2px 8px rgba(0,0,0,.5);mix-blend-mode:normal;opacity:.95;pointer-events:none}
.vb-card.legend.locked .vb-stlogo{opacity:.8}
@media (max-width:899px) and (min-height:501px){.vb-card .vb-art .vb-stlogo{display:none}.vb-art.lg .vb-stlogo{display:block;left:4px;bottom:4px;width:30%}.vb-lock{width:22px;height:22px;inset:auto 4px 4px auto}.vb-lock .i{width:12px;height:12px}}
/* v22.2.2: on the phone's small square tile his face sits off-center in the painting, so the tile zooms in on it */
@media (max-width:899px) and (min-height:501px){
  .vb-card .vb-art[data-v=soultak3r] img:not(.cut){width:170%;height:170%;left:-45%;top:-11%;object-position:50% 0}
}
/* v22.3: Tuxedo Aviary's new art (a square crop of Omar's pick): owl and face up top, framed from near the top on the wide card */
.vb-art[data-v=tuxedo-aviary] img:not(.cut),body.r2 .vb-card .vb-art[data-v=tuxedo-aviary] img:not(.cut){object-position:50% 4%}

/* ===== v23.5 (Omar, Nov 1, round 2: "Center the board, move the pills above it"). Laptop only.
   The board pages (Tactics, Game Review, a game vs a bot): the board is centered on the screen and as big as the height
   allows, a compact row of pills sits above it, and a slim panel (max 340px) sits beside it on the right; the nav hugs
   the board on the left. The city behind is blurred and dimmed so it frames the board. body.bstage + --navL/--navT are
   set by frost.js. body.lift: Home, Vs Bots and Coach centered under the top bar, Training Plan a little higher. ===== */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2 .bgv .still,body.r2 .bgv video{transition:filter .45s ease,transform .45s ease}
  body.r2.bstage .bgv .still,body.r2.bstage .bgv video{filter:blur(12px) brightness(.62) saturate(.9)!important;transform:scale(1.06)!important}
  :root[data-mode="dark"] body.r2.bstage .bgv .still,:root[data-mode="dark"] body.r2.bstage .bgv video{filter:blur(12px) brightness(.5) saturate(.85)!important}
  body.r2.bstage .r2-nav{left:var(--navL)!important;top:var(--navT)!important;visibility:visible!important}
  /* Tactics and Game Review: the frame spans the whole width under the top bar so its own grid centers the board on the screen */
  body.r2.bstage .pcard[data-view="frame"],body.r2.bstage .pcard[data-view="review"]{position:fixed;left:0;right:0;top:var(--stT,132px);bottom:12px;width:auto;height:auto;margin:0;
    background:none!important;border:0;border-radius:0;box-shadow:none!important;overflow:visible}
  :root[data-mode="dark"] body.r2.bstage .pcard .sv-review{background:transparent}
  body.r2.bstage .pcard .sv-review{background:transparent}
  /* a game vs a bot: actions above the board, the opponent, moves, tip and your clock in the slim column on the right */
  body.r2.bstage .pcard[data-view="native"]{position:fixed;left:0;right:0;top:var(--stT,132px);bottom:12px;width:auto;height:auto;margin:0}
  body.r2.bstage .np.npbots,body.r2.bstage .np.npbots .vsb{height:100%;padding:0;justify-content:center}
  body.r2.bstage .vb-play,body.r2.bstage .vb-play.wide{--side:340px;width:100%;max-width:none;height:calc(var(--cap) + var(--toprow,64px) + 12px);flex:none;margin:auto 0;box-sizing:border-box;padding:0 24px;
    grid-template-columns:minmax(0,1fr) var(--cap) minmax(0,1fr);grid-template-rows:var(--toprow,64px) minmax(0,1fr) auto auto auto;
    grid-template-areas:". act opp" ". board moves" ". board tip" ". board hint" ". board me";column-gap:16px;row-gap:12px;align-content:center;background:none;border:0;box-shadow:none}
  body.r2.bstage .vb-play .vb-boardwrap{grid-area:board;width:var(--cap);height:var(--cap);padding:0;border:0;background:none;box-shadow:0 24px 60px rgba(0,0,0,.45);border-radius:14px;align-self:start}
  body.r2.bstage .vb-play .vb-board{width:var(--cap);height:var(--cap);border-radius:14px}
  body.r2.bstage .vb-play .vb-actions{grid-area:act;align-self:center;justify-content:center;display:flex;gap:8px;flex-wrap:nowrap;min-width:0}
  body.r2.bstage .vb-play .vb-opp,body.r2.bstage .vb-play .vb-me,body.r2.bstage .vb-play .vb-moves,body.r2.bstage .vb-play .vb-tip,body.r2.bstage .vb-play .vb-hint{justify-self:start;width:min(var(--side),100%);box-sizing:border-box;
    background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
  body.r2.bstage .vb-play .vb-opp{grid-area:opp;align-self:stretch}
  body.r2.bstage .vb-play .vb-moves{grid-area:moves;overflow:auto;min-height:0}
  body.r2.bstage .vb-play .vb-tip{grid-area:tip}
  body.r2.bstage .vb-play .vb-hint{grid-area:hint}
  body.r2.bstage .vb-play .vb-me{grid-area:me}
  body.r2.bstage .vb-play .vb-actions .vb-btn{border-radius:999px;background:var(--g);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

  /* lift: the frosted modals move up into the open sky */
  body.r2.lift .np.nphome{justify-content:center;padding-bottom:24px}
  body.r2.lift .vsb{justify-content:center}
  body.r2.lift .vsb .vb-sel{margin-top:-24px}
  body.r2.lift .np.npcoach{justify-content:center;padding:0 0 24px}
  body.r2.lift .np[data-np="plan"]{padding-bottom:max(32px,9vh)}
}

/* ===== v23.5.1 (Omar, Nov 1: iPhone held sideways broke the board pages; laptop board touched the bottom at ~809px tall).
   Laptop: the board pages keep 20px clear at the bottom.
   Short landscape (a phone sideways, max-height 500px): on the board pages the top bar steps aside, the nav becomes a slim
   icon rail on the left, and the frame fills the rest; inside it the board takes the full height on the left with the
   pills row and the panel beside it (no overlap, no clipping). frost.js sizes the bot board. ===== */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2.bstage .pcard[data-view="frame"],body.r2.bstage .pcard[data-view="review"],body.r2.bstage .pcard[data-view="native"]{bottom:20px}
}
@media (orientation:landscape) and (max-height:500px){
  body.r2.bstage .top{display:none!important}
  body.r2.bstage .r2-nav{left:calc(6px + env(safe-area-inset-left,0px))!important;top:50%!important;transform:translateY(-50%);width:auto;gap:6px}
  body.r2.bstage .r2-nav button{width:44px;height:38px;padding:0;justify-content:center;gap:0;font-size:0;line-height:0}
  body.r2.bstage .r2-nav button svg{width:18px;height:18px}
  body.r2.bstage .pcard[data-view="frame"],body.r2.bstage .pcard[data-view="review"],body.r2.bstage .pcard[data-view="native"]{
    left:calc(58px + env(safe-area-inset-left,0px));right:calc(6px + env(safe-area-inset-right,0px));top:calc(6px + env(safe-area-inset-top,0px));bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  /* a game vs a bot: board on the left at full height; buttons, opponent, moves, tip and you in the column beside it */
  body.r2.bstage .vb-play,body.r2.bstage .vb-play.wide{width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;
    grid-template-columns:var(--cap) minmax(220px,340px);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
    grid-template-areas:"board act" "board opp" "board moves" "board hint" "board tip" "board me";justify-content:center;align-content:stretch;column-gap:12px;row-gap:6px}
  body.r2.bstage .vb-play .vb-boardwrap{grid-area:board;align-self:center}
  body.r2.bstage .vb-play .vb-actions{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  body.r2.bstage .vb-play .vb-actions .vb-btn{height:34px;min-height:0;padding:0 12px;font-size:13px}
  body.r2.bstage .vb-play .vb-opp,body.r2.bstage .vb-play .vb-me,body.r2.bstage .vb-play .vb-moves,body.r2.bstage .vb-play .vb-tip,body.r2.bstage .vb-play .vb-hint{width:100%;justify-self:stretch}
  body.r2.bstage .vb-play .vb-opp,body.r2.bstage .vb-play .vb-me{padding:6px 10px}
}
@media (orientation:landscape) and (max-height:340px){body.r2.bstage .vb-play .vb-tip{display:none}}

/* v23.5.2: no slide-in on the board pages when a phone is sideways (iOS kept the old, smaller layer of the sliding card) */
@media (orientation:landscape) and (max-height:500px){body.r2.bstage .pcard{animation:none!important}}

/* v23.5.3 (queued): on the board-page bot game the villain's quip bubble sits over the moves box; give it a solid fill and
   lift it so its line never reads on top of "Moves show up here" (it was see-through there) */
@media (min-width:900px), (orientation:landscape) and (max-height:500px){
  body.r2.bstage .vb-play .vb-opp{position:relative;z-index:8}
  body.r2.bstage .vb-play .vb-bubble{z-index:20;background:#fbfcfe;color:#1b2733;border:1px solid rgba(27,39,51,.12);box-shadow:0 10px 26px rgba(0,0,0,.35)}
  :root[data-mode="dark"] body.r2.bstage .vb-play .vb-bubble{background:#1f2933;color:#e7edf3;border-color:rgba(255,255,255,.14)}
}

/* v23.5.3: freed villains (badge, the rule on the setup and end sheets, Elo Owl's hide-ratings switch, Tuxedo's draw offer) */
.vb-badge.freed{background:#b8860b;color:#fff}
.vb-new.freed{background:#b8860b}
.vb-goal.vb-free{border-left:3px solid #c9a227;padding-left:10px}
.vb-mini.vb-free b{color:#c9a227}
.vb-hide{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font:600 14px var(--disp,inherit);cursor:pointer}
.vb-hide input{width:18px;height:18px;accent-color:var(--accent,#2E5E46)}
.vb-frn{white-space:nowrap}
body.etc-hide-rt .top .rate{visibility:hidden}
.vb-offer span{flex:1 1 auto}

/* v23.5.3: the board pages on narrower laptop/tablet screens: the board sits right of the nav when centering would squeeze
   the panel (--bl from frost.js); the "turn your phone upright" card */
@media (min-width:900px) and (min-height:501px){
  body.r2.bstage .vb-play,body.r2.bstage .vb-play.wide{grid-template-columns:calc(var(--bl,50%) - 16px) var(--cap) minmax(0,1fr);padding:0 24px 0 0}
}
.etc-rot{display:none}
html.etc-rotate .etc-rot{display:grid;position:fixed;inset:0;z-index:2147483000;place-items:center;text-align:center;color:#e7edf3;
  background:radial-gradient(120% 90% at 50% 20%,#24323f 0,#121a22 55%,#0b1016 100%);
  padding:calc(16px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px))}
html.etc-rotate,html.etc-rotate body{overflow:hidden}
.etc-rot-in{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:440px}
.etc-rot-logo{width:min(220px,42vw);height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.etc-rot-ic{width:56px;height:56px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.etc-rot-ic .ph-l{stroke:rgba(231,237,243,.35);stroke-width:2.5;stroke-dasharray:4 4}
.etc-rot-ic .ph-p{stroke:#e8c76a;stroke-width:3}
.etc-rot-ic .arr{stroke:#e8c76a;stroke-width:3}
@media (prefers-reduced-motion:no-preference){.etc-rot-ic .ph-p{transform-origin:35px 24px;animation:etcRot 2.4s ease-in-out infinite}}
@keyframes etcRot{0%,30%{transform:rotate(-90deg) translate(-4px,10px)}55%,100%{transform:none}}
.etc-rot-t{margin:0;font:700 20px/1.2 Outfit,"Source Sans 3",system-ui,sans-serif;letter-spacing:.01em}
.etc-rot-s{margin:0;font:400 14px/1.4 "Source Sans 3",system-ui,sans-serif;color:#b4c0cc}
/* v23.5.3: phone portrait: the setup sheet's Play button stays in view (the sheet scrolls under it) */
@media (max-width:899px){
  .vb-sheet>.vb-btn.lg[data-act="go"],.vb-sheet>.vb-btn.lg[data-pick]{position:sticky;bottom:0;z-index:3;box-shadow:0 -10px 14px -2px var(--paper,#1b232d)}
}