/* 72fold — midnight card room: navy felt, copper and champagne. */

:root {
  --ink: #090d14;
  --ink-2: #0e1520;
  --ink-3: #141d2b;
  --felt: #164463;
  --felt-deep: #0b2338;
  --rail: #1c1410;
  --gold: #e4a46f;
  --gold-hi: #f5cfa3;
  --gold-lo: #b8743f;
  --ivory: #f6ecdc;
  --text: #e8e4dc;
  --muted: #8e9aab;
  --line: rgba(228, 164, 111, 0.22);
  --line-2: rgba(232, 228, 220, 0.1);
  --good: #5fd39a;
  --bad: #ff6a58;

  --a-R: #e4a46f;
  --a-C: #6fb7d6;
  --a-F: rgba(255, 255, 255, 0.055);
  --allin: #e86a5a;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  --cw: 64px;
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 80% -12%, rgba(30, 86, 128, 0.42), transparent 62%),
    radial-gradient(900px 520px at -15% 115%, rgba(228, 164, 111, 0.08), transparent 60%),
    var(--ink);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  z-index: 100;
}
::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 8px; }
em { font-style: italic; }
kbd {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid currentColor;
  opacity: 0.45;
}
@media (hover: none) { kbd, .keys-hint { display: none !important; } }

/* ---------- shell ---------- */

/* clip, not hidden: dealt cards fly in from off-screen without sideways scroll */
.shell { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
  padding: 0 max(20px, env(safe-area-inset-left));
  background: rgba(9, 13, 20, 0.74);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
/* 7-2 offsuit, tossed into the muck */
.brand-mark { position: relative; width: 34px; height: 32px; }
.bm-card {
  position: absolute;
  width: 20px;
  height: 28px;
  border-radius: 4px;
  background: var(--ivory);
  color: #15171c;
  font: 600 14px/28px var(--display);
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--ease);
}
.bm-7 { left: 0; top: 3px; transform: rotate(-14deg); }
.bm-2 { left: 14px; top: 2px; transform: rotate(11deg); color: #c2261c; outline: 1px solid var(--gold); outline-offset: -3px; }
.brand:hover .bm-7 { transform: rotate(-24deg) translate(-2px, 3px); }
.brand:hover .bm-2 { transform: rotate(22deg) translate(2px, 3px); }
.brand-word { font: 600 25px/1 var(--display); letter-spacing: -0.02em; }
.brand-word em { color: var(--gold); font-weight: 400; margin-right: 1px; }
.topnav { display: flex; gap: 2px; }
.topnav a {
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.topnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.topnav a.is-on { color: var(--ink); background: var(--ivory); }
.topbar-note { margin-left: auto; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.install { position: relative; display: flex; }
.install-btn {
  padding: 8px 14px;
  font: 600 12px/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--gold-hi);
  background: rgba(228, 164, 111, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.install-btn:hover { background: rgba(228, 164, 111, 0.18); border-color: var(--gold); }
.install-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: 230px;
  padding: 10px 12px;
  font: 400 13px/1.45 var(--body);
  color: var(--text);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.install-tip svg { vertical-align: -2px; color: var(--gold); }

.main { width: 100%; max-width: 1140px; margin: 0 auto; padding: 36px 24px 72px; flex: 1; }
.tabbar { display: none; }

@media (max-width: 820px) {
  .topnav, .topbar-note { display: none; }
  .topbar { height: 56px; justify-content: center; }
  .install { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
  .main { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
    background: rgba(9, 13, 20, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 10px; font-weight: 500; color: var(--muted); border-radius: 12px; min-width: 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.is-on { color: var(--gold-hi); background: rgba(228, 164, 111, 0.09); }
}

/* ---------- type & generic ---------- */

.eyebrow { margin: 0 0 14px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.lede { max-width: 60ch; margin: 0; font-size: 18px; color: #c4cad4; font-weight: 300; }
.lede.center { margin: 0 auto 22px; text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.gold { color: var(--gold-hi); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head { margin-bottom: 40px; }
.page-title { margin: 0 0 18px; font: 400 clamp(38px, 6vw, 68px)/1.02 var(--display); letter-spacing: -0.025em; }
.page-title em, h1 em, .section-title em { color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.15s var(--ease), box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.35; }
.btn-gold {
  color: #241306;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 26px -10px rgba(228, 164, 111, 0.7);
}
.btn-gold:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 14px 34px -10px rgba(228, 164, 111, 0.95); }
.btn-ghost { border-color: var(--line); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover:not(:disabled) { border-color: rgba(228, 164, 111, 0.5); background: rgba(228, 164, 111, 0.06); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 58px; padding: 0 36px; font-size: 17px; }
.link { background: none; border: 0; padding: 6px 2px; font-size: 14px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.link:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--bad); color: #fff; font: 600 10px/1 var(--mono); }

.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); }
.seg button { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.seg button:hover { color: var(--text); }
.seg button.is-on { background: var(--ivory); color: var(--ink); }
.seg-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }

.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line-2); transition: background 0.2s; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.25s var(--ease), background 0.2s; }
.toggle input:checked + .toggle-track { background: rgba(228, 164, 111, 0.3); border-color: var(--gold-lo); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: var(--gold-hi); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.rise { animation: rise 0.7s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }

/* ---------- cards (four-colour deck) ---------- */

.pcard { flex: none; width: var(--cw); aspect-ratio: 5 / 7; perspective: 900px; animation: deal 0.45s var(--ease) both; transition: opacity 0.3s, transform 0.3s; }
@keyframes deal { from { opacity: 0; transform: translate(0, -40px) rotate(-8deg) scale(0.85); } }
.pcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.35, 0.8, 0.25, 1); }
.pcard.is-down .pcard-inner { transform: rotateY(180deg); }
.pcard-face, .pcard-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.09); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pcard-face {
  background: linear-gradient(155deg, #fffcf5 0%, #f4ecdc 65%, #ebe0ca 100%);
  color: #15171c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 12px 22px -12px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.pcard-face.suit-h { color: #c2261c; }
.pcard-face.suit-d { color: #1f5fae; }
.pcard-face.suit-c { color: #1d7a45; }
.pc-corner { position: absolute; top: 5%; left: 9%; display: flex; flex-direction: column; align-items: center; line-height: 0.9; }
.pc-corner b { font: 600 calc(var(--cw) * 0.3) / 0.92 var(--display); letter-spacing: -0.05em; }
.pc-corner i { font-style: normal; font-size: calc(var(--cw) * 0.2); }
.pc-mid { position: absolute; right: 8%; bottom: 4%; font-size: calc(var(--cw) * 0.5); line-height: 1; }
.pc-mid.is-face { font: italic 600 calc(var(--cw) * 0.5) / 1 var(--display); }
.pcard-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle, rgba(228, 164, 111, 0.55) 0 10%, transparent 11%),
    repeating-linear-gradient(60deg, #1b4b6d 0 3px, #102f47 3px 7px),
    #102f47;
  border: calc(var(--cw) * 0.05) solid #f3e9d6;
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.pcard.is-hl .pcard-face { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(245, 207, 163, 0.6); }
.pcard.is-dim { opacity: 0.38; }
.pcard.tiny { --cw: 28px; animation: none; }
.card-row { display: flex; gap: calc(var(--cw) * 0.1); align-items: center; }
.card-slot { width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * 0.09); border: 1px dashed rgba(245, 207, 163, 0.22); flex: none; }
.card-row.mini { --cw: 32px; gap: 3px; }
.card-row.mini .pcard { animation: none; }

/* ---------- felt & stage (play screens fill the viewport, never scroll) ---------- */

.felt {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  container-type: size;
  margin: 10px;
  border-radius: 999px;
  background: radial-gradient(ellipse 70% 62% at 50% 45%, #1f5a80 0%, var(--felt) 45%, var(--felt-deep) 100%);
  box-shadow:
    0 0 0 10px var(--rail),
    0 0 0 11px rgba(228, 164, 111, 0.5),
    0 40px 70px -30px rgba(0, 0, 0, 0.9),
    inset 0 2px 40px rgba(0, 0, 0, 0.5);
}
.felt::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--noise); opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; z-index: -1; }
.felt::after { content: ''; position: absolute; inset: 14px; border-radius: inherit; border: 1px solid rgba(228, 164, 111, 0.16); pointer-events: none; z-index: -1; }
.felt.flash-good { animation: flashGood 0.7s ease-out; }
.felt.flash-bad { animation: flashBad 0.7s ease-out; }
@keyframes flashGood { 0% { box-shadow: 0 0 0 10px var(--rail), 0 0 0 11px var(--good), 0 0 60px 8px rgba(95, 211, 154, 0.45), inset 0 2px 40px rgba(0, 0, 0, 0.5); } }
@keyframes flashBad {
  0% { box-shadow: 0 0 0 10px var(--rail), 0 0 0 11px var(--bad), 0 0 60px 8px rgba(255, 106, 88, 0.45), inset 0 2px 40px rgba(0, 0, 0, 0.5); }
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); }
}

.main:has(> .stage) { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.main:has(> .stage) > * { flex: none; margin-top: 0; margin-bottom: 0; }
.main:has(> .stage) > .stage { position: relative; flex: 1 1 0; min-height: 260px; display: flex; gap: 20px; }
.main:has(> .blitz-intro) { display: flex; flex-direction: column; justify-content: center; }

.felt-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.felt-center > * { pointer-events: auto; }

/* ---------- drills: top bar, scoreboard, verdict ---------- */

.drill-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.scoreboard { display: flex; align-items: center; gap: 10px; }
.streak { display: flex; align-items: baseline; gap: 10px; margin-right: 10px; }
.streak-num { font: 400 58px/0.9 var(--display); color: var(--ivory); animation: pop 0.4s var(--ease); }
.streak-label { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.streak.is-record .streak-num { color: var(--gold-hi); text-shadow: 0 0 30px rgba(245, 207, 163, 0.45); }
.score-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 78px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
.score-mini b { font: 500 18px/1 var(--mono); }
.score-mini span { font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }

.step-pills { display: flex; gap: 8px; }
.step-pills span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); transition: all 0.25s; }
.step-pills .is-on { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.step-pills .is-good { border-color: var(--good); color: var(--good); }
.step-pills .is-bad { border-color: var(--bad); color: var(--bad); }

.verdict { flex: none; align-self: center; width: 350px; max-height: 100%; overflow-y: auto; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--ink-2); animation: rise 0.35s var(--ease); }
.verdict.is-good { border-color: rgba(95, 211, 154, 0.35); }
.verdict.is-bad { border-color: rgba(255, 106, 88, 0.45); background: linear-gradient(180deg, rgba(255, 106, 88, 0.07), var(--ink-2)); }
.verdict-idle { animation: none; background: transparent; border-style: dashed; }
.verdict-idle .eyebrow { margin-bottom: 8px; }
.verdict-idle .verdict-title { color: var(--muted); }
.verdict-idle .verdict-why { color: var(--muted); font-size: 14px; }
.verdict-top { display: flex; align-items: center; gap: 12px; }
.verdict-top .btn { margin-left: auto; }
.verdict-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 17px; font-weight: 700; }
.is-good .verdict-mark { background: var(--good); color: #052014; }
.is-bad .verdict-mark { background: var(--bad); color: #2a0703; }
.verdict-title { margin: 0; font: 400 24px/1.1 var(--display); }
.verdict-sit { margin: 2px 0 0; font: 500 12px var(--mono); color: var(--muted); }
.verdict-why { margin: 12px 0 0; font-size: 14.5px; color: #d0d5dd; }
.verdict-grid { margin-top: 14px; }
.outs-mark { margin: 14px 0 0; font: 600 14px var(--mono); }
.outs-mark.is-good { color: var(--good); }
.outs-mark.is-bad { color: var(--bad); }
.math { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.math div { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); text-align: center; }
.math span { font: 500 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.math b { font: 600 17px/1 var(--mono); }
.out-cards { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }

@media (max-width: 999px) {
  .verdict {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 20;
    width: auto;
    max-height: calc(100% - 12px);
    padding: 14px 16px;
    background: rgba(12, 18, 28, 0.97);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    animation: sheet 0.3s var(--ease);
  }
  .verdict.is-bad { background: linear-gradient(180deg, rgba(58, 22, 18, 0.97), rgba(12, 18, 28, 0.97)); }
  .verdict-idle { display: none; }
  .verdict.is-good .verdict-why, .verdict.is-good .verdict-grid { display: none; }
}
@keyframes sheet { from { opacity: 0; transform: translateY(24px); } }

.play-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; }
.empty { padding: 60px 20px; text-align: center; }
.empty h2 { margin: 0 0 8px; font: 400 34px/1.1 var(--display); }
.empty .btn { margin-top: 18px; }

/* choice buttons */
.choices { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: 100%; max-width: 760px; margin: 0 auto; }
.choice {
  --c: var(--muted);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 66px;
  padding: 0 6px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  transition: transform 0.12s var(--ease), background 0.2s, border-color 0.2s, opacity 0.2s;
}
.choice::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--c); transition: left 0.2s, right 0.2s; }
.tone-fold { --c: #8e9aab; }
.tone-call { --c: var(--a-C); }
.tone-raise { --c: var(--a-R); }
.tone-allin { --c: var(--allin); }
.tone-plain { --c: var(--gold-hi); }
.choice-label { font-weight: 600; font-size: 15px; white-space: nowrap; }
.choice-sub { font: 500 10px/1 var(--mono); color: var(--muted); }
.choice-keys { display: inline-flex; gap: 4px; }
.choice-keys kbd { font-size: 9px; }
.choice:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.choice:hover:not(:disabled)::before { left: 0; right: 0; }
.choice:active:not(:disabled) { transform: scale(0.96); }
.choice:disabled { opacity: 0.28; }
.choice.is-best { background: var(--good); color: #052014; border-color: var(--good); opacity: 1; }
.choice.is-best .choice-sub { color: #0b3a22; }
.choice.is-wrong { background: var(--bad); color: #2a0703; border-color: var(--bad); opacity: 1; }
.choice.is-dim { opacity: 0.25; }
.choice.is-hint { animation: hint 1.1s ease-in-out infinite; border-color: var(--gold-hi); }
@keyframes hint { 50% { box-shadow: 0 0 0 4px rgba(245, 207, 163, 0.35), 0 0 30px rgba(245, 207, 163, 0.35); } }

/* ---------- range grid ---------- */

.rgrid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; width: 100%; }
.rg-cell { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; font: 600 clamp(7px, 1.1vw, 11px)/1 var(--mono); color: rgba(255, 255, 255, 0.35); transition: transform 0.15s var(--ease), box-shadow 0.15s; }
button.rg-cell:hover { transform: scale(1.15); z-index: 2; position: relative; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.rg-cell.a-R { background: var(--a-R); color: #2b1505; }
.rg-cell.a-C { background: var(--a-C); color: #06212e; }
.rg-cell.a-F { background: var(--a-F); }
.rg-cell.is-hl { position: relative; z-index: 3; transform: scale(1.25); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--ivory), 0 6px 16px rgba(0, 0, 0, 0.6); }
.rg-cell.m-none { opacity: 0.25; }
.rg-cell.m-bad { box-shadow: inset 0 0 0 2px var(--bad); }
.rg-cell.m-mid { box-shadow: inset 0 0 0 2px #f2c14e; }
.rg-cell.m-good { box-shadow: inset 0 0 0 2px #1f9e62; }
.rgrid.is-small { gap: 1.5px; }
.rgrid.is-small .rg-cell { border-radius: 2px; }
.rg-cell.mm { background: rgba(255, 255, 255, 0.06); }
.rg-cell.mm.l1 { background: #c4473a; }
.rg-cell.mm.l2 { background: #7d5d3a; }
.rg-cell.mm.l3 { background: var(--gold-hi); box-shadow: 0 0 6px rgba(245, 207, 163, 0.35); }
.a-R-text { color: var(--a-R); }
.a-C-text { color: var(--a-C); }
.a-F-text { color: var(--muted); }

/* ---------- preflop drill felt ---------- */

.mini-table { position: absolute; inset: 0; }
.mt-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s0 { left: 50%; top: 88%; }
.s1 { left: 13%; top: 72%; }
.s2 { left: 13%; top: 28%; }
.s3 { left: 50%; top: 12%; }
.s4 { left: 87%; top: 28%; }
.s5 { left: 87%; top: 72%; }
.mt-pos { display: grid; place-items: center; min-width: 46px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(5, 12, 20, 0.7); border: 1px solid var(--line); font: 600 12px/1 var(--mono); color: var(--text); }
.mt-seat.is-hero .mt-pos { background: var(--gold); color: #241306; border-color: var(--gold-hi); }
.mt-seat.is-fold .mt-pos { opacity: 0.4; }
.mt-status { font: 500 10px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mt-seat.is-raise .mt-status { color: var(--a-R); font-weight: 600; }
.mt-seat.is-raise .mt-pos { border-color: var(--a-R); }
.spot-label { margin: 0; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245, 207, 163, 0.75); }
.hero-hole { --cw: clamp(56px, min(14cqw, 26cqh), 110px); }
.hero-hole .card-row { gap: calc(var(--cw) * 0.08); }
.hero-hole .pcard:first-child { transform: rotate(-5deg); }
.hero-hole .pcard:last-child { transform: rotate(5deg); }
.spot-code { margin: 0; font: 600 20px/1 var(--display); }
.spot-code span { font: 400 13px var(--body); color: var(--muted); margin-left: 6px; }
@container (max-height: 330px) { .spot-code span { display: none; } }

/* ---------- odds drill felt ---------- */

.felt:has(.odds-seat) { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 16px; --cw: clamp(34px, min(10cqw, 15cqh), 68px); }
.felt:has(.odds-seat) .felt-center { position: static; flex: 1; }
.odds-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.odds-villain { flex-direction: column; }
.seat-tag { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: rgba(245, 207, 163, 0.6); }
.hand-pill { padding: 3px 11px; border-radius: 999px; background: rgba(5, 12, 20, 0.65); border: 1px solid var(--line-2); font: 500 12px/1.4 var(--mono); color: var(--text); text-align: center; }
.hand-pill.is-hero { border-color: var(--line); color: var(--gold-hi); }
.pot-line { display: flex; align-items: center; gap: 10px; font: 500 13px var(--mono); color: var(--muted); }
.pot-line b { color: var(--ivory); font-size: 15px; }
.bet-chip { padding: 3px 10px; border-radius: 999px; background: var(--a-R); color: #2b1505; font-weight: 600; }
.street-tag { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245, 207, 163, 0.55); }
.board .pcard { --cw: inherit; }

/* ---------- showdown ---------- */

.sd-felt { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 18px 20px; --cw: clamp(34px, min(9cqw, 17cqh), 72px); }
.sd-felt .sd-board { position: static; flex: none; }
.sd-hands { display: flex; justify-content: center; gap: clamp(10px, 4cqw, 40px); }
.sd-hand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: rgba(5, 12, 20, 0.4);
  transition: transform 0.15s var(--ease), border-color 0.2s, background 0.2s;
}
.sd-hand:hover { transform: translateY(-3px); border-color: var(--line); background: rgba(5, 12, 20, 0.6); }
.sd-num { position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ivory); color: var(--ink); font: 700 13px/1 var(--mono); }
.sd-name { font: 500 11px/1.3 var(--mono); color: var(--text); max-width: calc(var(--cw) * 2.6); text-align: center; }
.sd-hand.is-win { border-color: var(--good); background: rgba(95, 211, 154, 0.14); }
.sd-hand.is-wrong { border-color: var(--bad); }
.sd-hand.is-lose { opacity: 0.55; }
.miss-pop { position: absolute; left: 50%; top: 50%; z-index: 5; padding: 10px 20px; border-radius: 14px; background: rgba(8, 6, 6, 0.88); border: 1px solid var(--bad); font: 600 20px/1 var(--display); color: var(--good); transform: translate(-50%, -50%); animation: pop 0.25s var(--ease); white-space: nowrap; }

/* blitz shells */
.blitz-intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0; }
.giant { margin: 0 0 24px; font: 400 clamp(96px, 18vw, 180px)/0.85 var(--display); letter-spacing: -0.05em; }
.giant em { display: block; font-size: 0.32em; letter-spacing: -0.01em; color: var(--gold); }
.giant.is-record { color: var(--gold-hi); text-shadow: 0 0 60px rgba(245, 207, 163, 0.4); }
.blitz-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.blitz-rules li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.blitz-rules b { font-family: var(--mono); color: var(--ivory); margin-right: 4px; }
.blitz-intro > .btn-lg { margin-top: 18px; }
.hero-ctas { align-items: center; }
/* Fraunces' 4 has a ball terminal that reads oddly at huge sizes — big scores use the sans, labels stay serif */
.giant, .summary-title, .streak-num, .clock-num { font-family: var(--body); font-weight: 300; letter-spacing: -0.045em; }
.giant em, .summary-title em { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.result-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 32px; justify-content: center; margin: 8px 0 22px; }
.result-grid div, .progress-stats div { display: flex; flex-direction: column; gap: 4px; }
.result-grid b, .progress-stats b { font: 500 26px/1 var(--mono); color: var(--ivory); }
.result-grid span, .progress-stats span { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.blitz-hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.clock { display: flex; align-items: baseline; min-width: 76px; }
.clock-num { font: 400 54px/0.9 var(--display); font-variant-numeric: tabular-nums; }
.clock-unit { font: 500 14px var(--mono); color: var(--muted); margin-left: 3px; }
.clock.is-low .clock-num { color: var(--bad); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.timebar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.timebar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform-origin: left; }
.hud-score { display: flex; align-items: center; gap: 10px; }
.hud-score b { font: 500 30px/1 var(--mono); min-width: 3ch; text-align: right; }
.combo { padding: 5px 10px; border-radius: 999px; font: 600 13px/1 var(--mono); color: var(--muted); border: 1px solid var(--line-2); animation: pop 0.3s var(--ease); }
.combo.is-on { color: #241306; background: var(--gold-hi); border-color: var(--gold-hi); box-shadow: 0 0 24px rgba(245, 207, 163, 0.5); }

/* ---------- table (game) ---------- */

.table-bar { display: flex; align-items: center; gap: 20px; }
.bankroll { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 10px; }
.bankroll-label { grid-column: 1 / -1; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.bankroll-num { font: 500 34px/1 var(--mono); color: var(--gold-hi); animation: pop 0.35s var(--ease); font-variant-numeric: tabular-nums; }
.round-net { font: 600 16px/1 var(--mono); color: var(--muted); animation: pop 0.4s 0.2s var(--ease) both; }
.round-net.is-up { color: var(--good); }
.round-net.is-down { color: var(--bad); }
.table-info { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.table-info span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.table-info b { color: var(--text); }

.poker-felt { --cw: clamp(22px, min(4.6cqw, 8.5cqh), 50px); }
.table-center { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.table-center .board { --cw: clamp(30px, min(7.4cqw, 15cqh), 72px); }
.win-text { margin: 0; padding: 5px 14px; border-radius: 999px; background: rgba(5, 12, 20, 0.78); border: 1px solid var(--line); font: 500 13px/1.3 var(--body); color: var(--gold-hi); text-align: center; max-width: 60cqw; animation: pop 0.4s 0.2s var(--ease) both; }

.seat { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; transition: opacity 0.3s; }
.seat-cards { display: flex; margin-bottom: calc(var(--cw) * -0.35); position: relative; z-index: 1; }
.seat-cards .pcard + .pcard { margin-left: calc(var(--cw) * -0.3); }
.seat-cards .pcard:first-child { transform: rotate(-4deg); }
.seat-cards .pcard:last-child { transform: rotate(4deg); }
.seat.is-hero { --cw: clamp(34px, min(6.6cqw, 13cqh), 74px); }
.seat.is-hero .seat-cards { margin-bottom: calc(var(--cw) * -0.18); }
.seat.is-hero .seat-cards .pcard + .pcard { margin-left: calc(var(--cw) * -0.12); }
.seat-pod {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  min-width: 96px;
  padding: 6px 12px 6px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1b2636, #111926);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.seat-name { grid-column: 2; font-size: 12px; font-weight: 600; white-space: nowrap; }
.seat-stack { grid-column: 2; font: 500 12px/1.2 var(--mono); color: var(--gold-hi); }
.style-dot { grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; }
.st-shark { background: #6fb7d6; }
.st-rock { background: #a3a9b6; }
.st-maniac { background: #ff6a58; }
.st-station { background: #f2c14e; }
.st-nit { background: #b38be0; }
.seat-pos { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #233247; border: 1px solid var(--line); font: 700 9px/1 var(--mono); color: var(--muted); }
.seat-pos.is-btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.seat-last { margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(5, 12, 20, 0.7); font: 500 10.5px/1.4 var(--mono); color: var(--text); white-space: nowrap; animation: pop 0.25s var(--ease); }
.seat-last.is-fold { color: var(--muted); }
.seat-last.is-win { background: var(--good); color: #052014; font-weight: 700; }
.seat-hand { margin-top: 3px; font: 500 10px/1.2 var(--mono); color: var(--gold-hi); white-space: nowrap; }
.seat-bet {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 3px 9px 3px 22px;
  border-radius: 999px;
  background: rgba(5, 12, 20, 0.8);
  font: 600 11px/1.4 var(--mono);
  color: var(--ivory);
  transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by)));
  animation: pop 0.25s var(--ease);
  white-space: nowrap;
}
.seat-bet::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 45%, transparent 46%), repeating-conic-gradient(var(--ivory) 0 30deg, var(--gold-lo) 30deg 60deg);
}
.seat.s0 { --bx: 0px; --by: calc(var(--cw) * -2.6); }
.seat.s1 { --bx: calc(var(--cw) * 2.2); --by: calc(var(--cw) * -0.9); }
.seat.s2 { --bx: calc(var(--cw) * 2.2); --by: calc(var(--cw) * 0.9); }
.seat.s3 { --bx: 0px; --by: calc(var(--cw) * 2.1); }
.seat.s4 { --bx: calc(var(--cw) * -2.2); --by: calc(var(--cw) * 0.9); }
.seat.s5 { --bx: calc(var(--cw) * -2.2); --by: calc(var(--cw) * -0.9); }
.seat.is-turn .seat-pod { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(245, 207, 163, 0.25), 0 0 26px rgba(245, 207, 163, 0.35); animation: turn 1.2s ease-in-out infinite; }
@keyframes turn { 50% { box-shadow: 0 0 0 5px rgba(245, 207, 163, 0.12), 0 0 30px rgba(245, 207, 163, 0.25); } }
.seat.is-folded .seat-cards { opacity: 0.25; }
.seat.is-folded .seat-pod { opacity: 0.6; }
.seat.is-out { opacity: 0.3; }
.seat.is-winner .seat-pod { border-color: var(--good); box-shadow: 0 0 26px rgba(95, 211, 154, 0.45); }

@container (orientation: portrait) {
  .poker-felt { --cw: clamp(20px, min(8cqw, 6cqh), 44px); }
  .seat.is-hero { --cw: clamp(30px, min(12cqw, 9cqh), 64px); }
  .table-center .board { --cw: clamp(28px, min(14.5cqw, 11cqh), 66px); }
  .s0 { left: 50%; top: 89%; }
  .s1 { left: 15%; top: 70%; }
  .s2 { left: 15%; top: 29%; }
  .s3 { left: 50%; top: 11%; }
  .s4 { left: 85%; top: 29%; }
  .s5 { left: 85%; top: 70%; }
  .seat-pod { min-width: 74px; padding: 5px 9px 5px 8px; }
  .seat-name, .seat-stack { font-size: 11px; }
  .seat.s1 { --bx: calc(var(--cw) * 1.6); --by: calc(var(--cw) * -1.6); }
  .seat.s2 { --bx: calc(var(--cw) * 1.6); --by: calc(var(--cw) * 1.8); }
  .seat.s4 { --bx: calc(var(--cw) * -1.6); --by: calc(var(--cw) * 1.8); }
  .seat.s5 { --bx: calc(var(--cw) * -1.6); --by: calc(var(--cw) * -1.6); }
  .seat.s0 { --by: calc(var(--cw) * -2.3); }
  .seat.s3 { --by: calc(var(--cw) * 2.6); }
}

.coach-slot { height: 46px; display: flex; justify-content: center; }
.coach { display: flex; align-items: center; width: 100%; max-width: 760px; height: 100%; padding: 0 16px; border-radius: 14px; font-size: 13px; line-height: 1.35; border: 1px solid var(--line-2); background: var(--ink-2); animation: rise 0.3s var(--ease); }
.coach-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coach.is-good { border-color: rgba(95, 211, 154, 0.45); background: linear-gradient(90deg, rgba(95, 211, 154, 0.09), var(--ink-2)); }
.coach.is-bad { border-color: rgba(255, 106, 88, 0.5); background: linear-gradient(90deg, rgba(255, 106, 88, 0.1), var(--ink-2)); }
.coach.is-info { color: #c9d0da; }

.table-controls { min-height: 66px; display: flex; align-items: center; justify-content: center; }
.act-wrap { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.sizer { display: flex; align-items: center; gap: 12px; }
.sizer-presets { display: flex; gap: 4px; }
.sizer-presets button { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 12px; font-weight: 500; color: var(--muted); }
.sizer-presets button:hover { color: var(--gold-hi); border-color: var(--line); }
.sizer input[type='range'] { flex: 1; accent-color: var(--gold); min-width: 0; }
.waiting { margin: 0; font: 500 13px var(--mono); color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
.bet-actions { display: flex; gap: 10px; }
.bet-actions.center { justify-content: center; }

/* lobby */
.resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 16px; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--gold-lo); background: linear-gradient(110deg, rgba(228, 164, 111, 0.18), rgba(228, 164, 111, 0.04)); text-align: left; font-size: 15px; }
.resume b { color: var(--gold-hi); }
.sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.session {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 270px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  background: radial-gradient(500px 260px at 100% 0%, rgba(30, 86, 128, 0.4), transparent 70%), linear-gradient(180deg, var(--ink-3), var(--ink-2));
  text-align: left;
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.session:hover { transform: translateY(-4px); border-color: var(--line); }
.session h2 { margin: 0 0 10px; font: 400 42px/1 var(--display); }
.session p { margin: 0 0 22px; max-width: 38ch; color: var(--muted); font-size: 15px; }
.session .mode-cta { width: 100%; margin-top: auto; }
.session-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font: 600 12px/1 var(--mono);
  color: var(--ivory);
  background: radial-gradient(circle, var(--felt) 0 52%, transparent 53%), repeating-conic-gradient(var(--felt) 0 20deg, var(--ivory) 20deg 40deg);
  box-shadow: 0 0 0 2px var(--gold-lo), 0 10px 20px rgba(0, 0, 0, 0.5);
}
.session-rec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font: 500 12px var(--mono); color: var(--muted); }
.session-rec b { color: var(--gold-hi); font-size: 15px; }
.styles-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.style-tile { padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
.style-tile .style-dot { display: inline-block; width: 10px; height: 10px; }
.style-tile h3 { margin: 8px 0 4px; font: 400 22px/1 var(--display); }
.style-tile p { margin: 0; font-size: 13px; color: var(--muted); }

.modal-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 10, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 380px); padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); text-align: center; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); animation: rise 0.4s var(--ease); }
.modal-wide { width: min(100%, 560px); padding: 34px 28px; }
.summary-title { margin: 0; font: 400 clamp(54px, 12vw, 82px)/1 var(--display); }
.summary-title em { color: var(--gold); font-size: 0.45em; }

/* ---------- home ---------- */

.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 28px 0 64px; }
.hero h1 { margin: 0 0 24px; font: 400 clamp(44px, 7vw, 88px)/0.96 var(--display); letter-spacing: -0.035em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-ctas.center { justify-content: center; }
.hero-art { display: grid; place-items: center; }
.hero-felt {
  --cw: clamp(52px, 7.5vw, 76px);
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 42%, #22608a, var(--felt) 50%, var(--felt-deep));
  box-shadow: 0 0 0 10px var(--rail), 0 0 0 11px rgba(228, 164, 111, 0.5), 0 50px 80px -30px rgba(0, 0, 0, 0.9), inset 0 2px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
}
.hero-felt .hero-hole { --cw: clamp(64px, 9vw, 92px); }
.hero-felt .hero-hole .pcard:first-child { transform: rotate(-7deg); }
.hero-felt .hero-hole .pcard:last-child { transform: rotate(6deg); }
.hero-answer { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; background: rgba(5, 12, 20, 0.72); border: 1px solid var(--line); font-size: 13px; color: var(--muted); animation: rise 0.6s 0.9s var(--ease) both; }
.hero-answer b { padding: 6px 13px; border-radius: 999px; background: var(--gold); color: #241306; font-weight: 600; }

.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mode { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 24px 20px 20px; border-radius: var(--radius); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.3s; }
.mode::after { content: ''; position: absolute; inset: 0; background: radial-gradient(400px 220px at 100% 0%, rgba(228, 164, 111, 0.13), transparent 70%); opacity: 0; transition: opacity 0.35s; }
.mode:hover { transform: translateY(-4px); border-color: var(--line); }
.mode:hover::after { opacity: 1; }
.mode-num { font: italic 400 48px/0.9 var(--display); color: var(--gold); margin-bottom: 22px; }
.mode h2 { margin: 0 0 10px; font: 400 28px/1 var(--display); }
.mode p { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.mode-stat { margin-top: auto; font: 500 11px/1.4 var(--mono); color: #c4cad4; }
.mode-cta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--gold-hi); }
.mode-cta span { display: inline-block; transition: transform 0.3s var(--ease); }
.mode:hover .mode-cta span, .session:hover .mode-cta span { transform: translateX(5px); }

.progress { margin-top: 56px; padding: 32px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(20, 29, 43, 0.8), rgba(14, 21, 32, 0.6)); }
.progress-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 28px; }
.progress-head .muted { max-width: 54ch; margin: 0; font-size: 14px; }
.section-title { margin: 0 0 12px; font: 400 clamp(40px, 5vw, 58px)/1 var(--display); }
.section-title .unit { font-size: 0.55em; color: var(--muted); margin-left: 2px; }
.progress-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 28px; }
.memmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.memmap-group { display: flex; flex-direction: column; gap: 8px; }
.memmap-name { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.memmap-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-size: 12px; color: var(--muted); }
.memmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.memmap-legend .mm { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.memmap-legend .mm.l1 { background: #c4473a; }
.memmap-legend .mm.l2 { background: #7d5d3a; }
.memmap-legend .mm.l3 { background: var(--gold-hi); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-2); font: 500 11px/1.6 var(--mono); color: var(--muted); }
.foot p { margin: 0; }
.progress-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 18px; }
.tools-msg { width: 100%; margin: 4px 0 0; text-align: right; font: 500 12px/1.4 var(--body); }
.tools-msg.is-good { color: var(--good); }
.tools-msg.is-bad { color: var(--bad); }
@media (max-width: 560px) { .progress-tools { justify-content: flex-start; } .tools-msg { text-align: left; } }

/* ---------- learn ---------- */

.block { margin-bottom: 28px; padding: 30px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(20, 29, 43, 0.7), rgba(14, 21, 32, 0.5)); }
.block-title { margin: 0 0 22px; font: 400 32px/1.05 var(--display); }
.block-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 22px; }
.block-bar .block-title { margin: 0 auto 0 0; }
.block > .muted.small { margin: 18px 0 0; max-width: 85ch; }
.mini-title { margin: 0 0 12px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }

.rankings { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.rankings li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.rank-num { font: italic 400 24px/1 var(--display); color: var(--gold); }
.rank-copy h3 { margin: 0; font: 600 15px/1.2 var(--body); }
.rank-copy p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.positions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pos-tile { padding: 16px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
.pos-badge { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--gold); color: #241306; font: 700 11px/1 var(--mono); }
.pos-tile h3 { margin: 10px 0 4px; font: 400 20px/1 var(--display); }
.pos-tile p { margin: 0; font-size: 13px; color: var(--muted); }

.chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.chart-wrap .rgrid { max-width: 640px; }
.detail { position: sticky; top: 88px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); animation: rise 0.4s var(--ease); --cw: 70px; }
.detail-sit { margin: 16px 0 2px; font-size: 14px; color: var(--muted); }
.detail-move { margin: 0 0 10px; font: 400 38px/1.05 var(--display); }
.detail-why { margin: 0; font-size: 15px; color: #d0d5dd; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.sw.a-R { background: var(--a-R); }
.sw.a-C { background: var(--a-C); }
.sw.a-F { background: rgba(255, 255, 255, 0.12); }
.legend-note { margin-left: auto; font-family: var(--mono); color: var(--gold-hi); }

.odds-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0 8px 10px 0; }
.tbl td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line-2); }
.tbl td:not(:first-child) { font-family: var(--mono); color: var(--gold-hi); }

.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; margin: 0; }
.glossary div { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.glossary dt { font: 400 20px/1.2 var(--display); color: var(--gold-hi); }
.glossary dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px; border-radius: 24px; background: linear-gradient(110deg, rgba(228, 164, 111, 0.16), rgba(228, 164, 111, 0.03)); border: 1px solid var(--line); }
.cta-strip p { margin: 0; font: 400 28px/1.1 var(--display); }

/* ---------- start here (lessons) ---------- */

.start-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 22px 26px;
  border-radius: 22px;
  border: 1px solid var(--gold-lo);
  background: linear-gradient(110deg, rgba(228, 164, 111, 0.2), rgba(228, 164, 111, 0.04) 60%), var(--ink-2);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.start-strip:hover { transform: translateY(-3px); border-color: var(--gold); }
.ss-num { font: italic 400 54px/0.9 var(--display); color: var(--gold); }
.start-strip h2 { margin: 0 0 4px; font: 400 26px/1.1 var(--display); }
.start-strip p { margin: 0; font-size: 14px; color: var(--muted); }
.ss-progress { font: 500 13px var(--mono); color: var(--muted); white-space: nowrap; }
.ss-progress b { color: var(--gold-hi); font-size: 16px; }

.pos-caption { margin: -8px 0 18px; font-size: 14px; color: #c4cad4; }
.pos-caption b { color: var(--gold-hi); font-weight: 600; }
.pos-caption a, .verdict-why a, .lesson a:not(.btn):not(.path-step) { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 207, 163, 0.4); }

.start-head { margin-bottom: 28px; }
.lessons { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.lesson-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; }
.ln-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; color: var(--muted); font-size: 14px; transition: background 0.2s, color 0.2s; }
.ln-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.ln-item.is-on { background: var(--ink-3); border-color: var(--line); color: var(--text); }
.ln-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 12px/1 var(--mono); }
.ln-item.is-on .ln-num { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.ln-item.is-done .ln-num { background: var(--good); color: #052014; border-color: var(--good); }

.lesson { padding: 30px 32px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(20, 29, 43, 0.85), rgba(14, 21, 32, 0.6)); animation: rise 0.4s var(--ease); }
.lesson-count { margin: 0 0 6px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.lesson-title { margin: 0 0 16px; font: 400 40px/1.05 var(--display); }
.lesson p { max-width: 70ch; }
.lesson-lede { font-size: 18px; color: #d6dbe2; }
.lesson-list { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: #d0d5dd; }
.lesson-list b { color: var(--ivory); }
.lesson-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 18px 0; padding: 18px; border-radius: 18px; background: rgba(5, 12, 20, 0.45); border: 1px solid var(--line-2); --cw: 46px; }
.lv-col { display: flex; flex-direction: column; gap: 8px; }
.lv-col > span { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.lv-plus { font: 400 30px/1 var(--display); color: var(--gold); }
.lv-note { padding-left: 6px; }
.lv-note b { font: 400 28px/1 var(--display); color: var(--gold-hi); }
.lv-note span { font-size: 13px; color: var(--muted); max-width: 22ch; }

.check { margin-top: 26px; padding: 18px 20px; border-radius: 18px; border: 1px dashed var(--line); background: rgba(228, 164, 111, 0.04); }
.check-q { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.check-q span { display: block; margin-bottom: 6px; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.check-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.check-opt { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); font-weight: 500; transition: all 0.2s; }
.check-opt:hover { border-color: var(--gold); }
.check-opt.is-good { background: var(--good); border-color: var(--good); color: #052014; }
.check-opt.is-bad { background: var(--bad); border-color: var(--bad); color: #2a0703; }
.check-opt.is-dim { opacity: 0.4; }
.check-why { margin: 12px 0 0; font-size: 14px; }
.check-why.is-good { color: var(--good); }
.check-why.is-bad { color: #ff9a8c; }
.lesson-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }

.walk { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 10px 0 16px; }
.lesson-felt {
  position: relative;
  container-type: size;
  aspect-ratio: 1.15;
  margin: 12px;
  border-radius: 999px;
  background: radial-gradient(ellipse 70% 62% at 50% 45%, #1f5a80 0%, var(--felt) 45%, var(--felt-deep) 100%);
  box-shadow: 0 0 0 10px var(--rail), 0 0 0 11px rgba(228, 164, 111, 0.5), 0 30px 60px -30px rgba(0, 0, 0, 0.9), inset 0 2px 40px rgba(0, 0, 0, 0.5);
  --cw: clamp(22px, min(9.2cqw, 11cqh), 50px);
}
.lesson-felt .mt-seat { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: default; }
.lesson-felt button.mt-seat[tabindex='0'] { cursor: pointer; }
.lesson-felt .mt-pos { min-width: 44px; height: 26px; font-size: 11px; white-space: nowrap; animation: pop 0.35s var(--ease); }
.lesson-felt .mt-seat.is-sel .mt-pos { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(245, 207, 163, 0.45); }
.lesson-felt .mt-status { white-space: nowrap; }

/* dealer button: one chip that glides seat to seat */
.dealer-chip {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--ivory) 60%, #d9ccb3);
  color: var(--ink);
  font: 700 12px/1 var(--mono);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 5px 12px rgba(0, 0, 0, 0.55);
  transition: left 0.65s var(--ease), top 0.65s var(--ease);
  pointer-events: none;
}
.dealer-chip.d0 { left: 63%; top: 88%; }
.dealer-chip.d1 { left: 13%; top: 61%; }
.dealer-chip.d2 { left: 13%; top: 40%; }
.dealer-chip.d3 { left: 63%; top: 12%; }
.dealer-chip.d4 { left: 87%; top: 40%; }
.dealer-chip.d5 { left: 87%; top: 61%; }
.lesson-felt .mt-seat.is-raise .mt-pos { border-color: var(--a-R); box-shadow: 0 0 14px rgba(228, 164, 111, 0.5); }
.lesson-center { position: absolute; inset: 21% 17% 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.walk-hands { display: flex; gap: 14px; --cw: clamp(20px, min(7cqw, 8.5cqh), 42px); }
.walk-hand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.walk-hand > span { font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.walk-hand.is-you > span { color: var(--gold-hi); }
.walk-copy h3 { margin: 4px 0 8px; font: 400 28px/1.1 var(--display); }
.walk-copy p { margin: 0 0 10px; color: #d0d5dd; }
.walk-step { font: 500 11px/1 var(--mono) !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold) !important; }
.walk-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.seat-explain-pos { font: 600 clamp(22px, 9cqw, 44px)/1 var(--display); color: var(--gold-hi); }
.seat-explain-name { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

.spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 6px; --cw: 36px; }
.spot { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(5, 12, 20, 0.45); border-top: 3px solid var(--c, var(--line)); }
.spot.tone-strong { --c: var(--good); }
.spot.tone-weak { --c: #8e9aab; }
.spot.tone-draw { --c: var(--a-R); }
.spot h4 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 21px/1.1 var(--display); }
.spot h4 span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: var(--ink); font: 700 12px/1 var(--mono); }
.spot-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.spot-cards > div { display: flex; flex-direction: column; gap: 5px; }
.spot-cards > div > span { font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.spot p { margin: 0; font-size: 14px; color: #d0d5dd; }

.steps { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.step { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(5, 12, 20, 0.4); }
.step h4 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font: 400 23px/1.15 var(--display); }
.step h4 span { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.step p { margin: 0 0 10px; color: #d0d5dd; }
.step .lesson-visual { margin: 6px 0 12px; --cw: 40px; }
.step .lesson-list { margin-bottom: 8px; }
.price { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 520px; margin: 4px 0 12px; }
.price div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); text-align: center; }
.price span { font: 500 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.price b { font: 600 20px/1 var(--mono); }
.price .is-good b { color: var(--good); }

.opt-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin: 16px 0; }
.opt-col { padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(5, 12, 20, 0.4); display: flex; flex-direction: column; gap: 10px; }
.opt-col h4 { margin: 0 0 4px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.opt { display: flex; flex-direction: column; gap: 2px; }
.opt b { font: 400 22px/1.1 var(--display); }
.opt span { font-size: 14px; color: var(--muted); }

.rankings.compact li { padding: 7px 0; }
.lesson-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 560px; margin: 16px 0; }
.lesson-grids > div { display: flex; flex-direction: column; gap: 8px; }
.lesson-grids span { font: 500 11px/1 var(--mono); color: var(--muted); }

.path { display: grid; gap: 10px; margin-top: 12px; }
.path-step { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(5, 12, 20, 0.4); transition: border-color 0.2s, transform 0.2s var(--ease); }
.path-step:hover { border-color: var(--line); transform: translateX(4px); }
.path-step > b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #241306; font: 700 15px/1 var(--mono); }
.path-step h4 { margin: 0; font: 400 22px/1.1 var(--display); }
.path-step p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .lessons { grid-template-columns: 1fr; gap: 16px; }
  .lesson-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .lesson-nav::-webkit-scrollbar { display: none; }
  .ln-item { flex: none; padding: 6px; }
  .ln-title { display: none; }
  .ln-item.is-on .ln-title { display: inline; padding-right: 6px; }
  .walk { grid-template-columns: 1fr; }
  .opt-grid, .spots { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lesson { padding: 22px 16px; border-radius: 20px; }
  .lesson-title { font-size: 32px; }
  .lesson-felt { aspect-ratio: 0.92; margin: 10px 8px; }
  .lesson-center { inset: 20% 16% 22%; }
  .start-strip { grid-template-columns: auto 1fr; padding: 18px; gap: 6px 14px; }
  .ss-num { font-size: 42px; }
  .ss-progress { grid-column: 2; }
  .lesson-visual { --cw: 38px; padding: 14px; }
  .lesson-grids { gap: 12px; }
  .price { grid-template-columns: repeat(2, 1fr); }
  .step { padding: 16px 14px; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
  .memmap { grid-template-columns: repeat(3, 1fr); }
  .styles-grid { grid-template-columns: repeat(3, 1fr); }
  .positions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .chart-wrap, .odds-grid { grid-template-columns: 1fr; }
  .detail { position: static; }
  .rankings { grid-template-columns: 1fr; }
  .progress-head { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .main:has(> .stage) { padding: calc(10px + env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom)); gap: 10px; }
  .main:has(> .stage) > .stage { min-height: 200px; }
  .shell:has(.stage) .topbar { display: none; }
  .drill-top .seg, .drill-top .step-pills { order: -1; width: 100%; }
  .drill-top .scoreboard { width: 100%; }
  .drill-top .streak { margin-right: auto; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 8px 0 44px; }
  .hero-felt { width: min(90%, 360px); }
  .sessions { grid-template-columns: 1fr; }
  .session { min-height: 0; padding: 24px 20px; }
  .table-bar { gap: 6px 12px; flex-wrap: wrap; }
  .bankroll { grid-template-columns: auto auto auto; margin-right: auto; }
  .bankroll-label { grid-column: auto; }
  .bankroll-num { font-size: 26px; }
  .table-info { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .table-info span { flex: none; font-size: 11px; padding: 4px 8px; }
  .coach-slot { height: 50px; }
  .coach { padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .modes { grid-template-columns: 1fr; }
  .mode { min-height: 0; }
  .mode-num { font-size: 40px; margin-bottom: 12px; }
  .memmap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .progress { padding: 22px 16px; }
  .progress-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .block { padding: 22px 14px; border-radius: 20px; }
  .positions, .styles-grid { grid-template-columns: 1fr 1fr; }
  .glossary { grid-template-columns: 1fr; }
  .scoreboard { gap: 6px; }
  .streak { flex-direction: column; gap: 2px; align-items: center; }
  .streak-num { font-size: 40px; }
  .score-mini { min-width: 0; flex: 1; padding: 7px 4px; }
  .felt { margin: 10px 8px; }
  .choices { gap: 6px; }
  .choice { height: 58px; border-radius: 14px; }
  .choice-label { font-size: 13px; }
  .sizer { flex-direction: column; align-items: stretch; gap: 6px; }
  .sizer-presets { justify-content: space-between; }
  .sizer-presets button { flex: 1; }
  .math { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: repeat(2, auto); gap: 20px 40px; }
  .blitz-hud { gap: 12px; }
  .clock-num { font-size: 42px; }
  .hud-score b { font-size: 24px; }
  .rankings li { grid-template-columns: 24px 1fr; }
  .rankings .card-row { grid-column: 2; }
  .step-pills span { flex: 1; text-align: center; padding: 8px 6px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}