/* v3.15: self-hosted fonts (SIL Open Font License 1.1; licences in public/fonts). Latin subset,
   the same characters Google Fonts served. Paths are relative to this file (src/shared/). */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../public/fonts/outfit-latin.woff2") format("woff2"); }
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../public/fonts/patrickhand-latin.woff2") format("woff2"); }
/* ------------------------------------------------------------------ theme */
:root, [data-theme="dark"] {
  --bg: #0b1220; --bg-glow: #1a2740;
  --top: #0e1628; --card: #151e32; --card2: #1a2740; --well: #121b2e; --board-card: #10192c;
  --ink: #f4f7fb; --ink-soft: #d5e2f0; --muted: #9aaec4; --line: #2a3a55; --line-hi: #4b5d78;
  --orange: #ef8f2f; --orange-d: #d9781c; --blue: #2f5ea8; --accent: #7dd3fc;
  --danger: #e07a7a; --good: #34c27a; --purple: #8b5cf6;
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
  --tab-h: 62px;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #4e9ecc; --bg-glow: #7cc0e6;
  --top: #dae9fc; --card: #dae9fc; --card2: #ffffff; --well: #eef5fd; --board-card: #dae9fc;
  --ink: #102033; --ink-soft: #20395a; --muted: #3d5670; --line: #b9d3ee; --line-hi: #7fb2e0;
  --blue: #2f6fc0; --accent: #1b86d1;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--font); color: var(--ink);
  background: radial-gradient(900px 420px at 50% -10%, var(--bg-glow), transparent 55%), var(--bg);
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }

.app {
  max-width: 760px; margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(var(--tab-h) + 26px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ top bar */
.topbar {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px;
  background: var(--top); border: 1px solid var(--line); border-radius: 18px;
  padding: 6px 6px 6px 8px; margin-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-fox { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; }
.brand h1 { font-size: 21px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.brand h1 span { font-weight: 500; opacity: .75; font-size: .75em; }
.icon-btn { width: 42px; height: 42px; border: 0; background: transparent; color: var(--ink-soft); display: grid; place-items: center; border-radius: 12px; }
.icon-btn:hover { background: rgba(127,127,127,.12); }

/* ------------------------------------------------------------------ bottom tabs */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--top) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active { color: var(--orange); }
/* v3.33.1: Settings is for signed-in accounts only — guests see four tabs */
@media (max-width: 1099px) { .tabbar.guest { grid-template-columns: repeat(4, 1fr); } }   /* phones/tablets: 4 tabs; the desktop side menu keeps its one column */
.tabbar.guest a[data-tab="settings"] { display: none; }
@media (min-width: 1100px) { .tabbar a[data-tab="settings"] { display: none; } }   /* v3.33.5: big screens use the account circle at the top */
@media (min-width: 900px) { .tabbar { max-width: 760px; margin: 0 auto; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; } }

/* ------------------------------------------------------------------ views */
.view { display: none; animation: fade .22s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.page-head h2 { font-size: 25px; letter-spacing: -.03em; line-height: 1.1; }
.page-head p { color: var(--muted); font-size: 14px; margin-top: 3px; }
.back-btn {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card2); color: var(--ink); font-size: 26px; line-height: 1; display: grid; place-items: center; padding-bottom: 3px;
}

/* ------------------------------------------------------------------ home */
.hero-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px 18px 16px; display: grid; grid-template-columns: 1fr 168px; gap: 8px; overflow: hidden; margin-bottom: 16px;
}
.hero-card h2 { font-size: clamp(28px, 6vw, 36px); line-height: 1.05; letter-spacing: -.04em; }
.hero-card h2 em { font-style: normal; color: var(--orange); }
.hero-card p.lead { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 34ch; }
.hero-art { width: 168px; height: 200px; object-fit: cover; object-position: top; align-self: end; margin-bottom: -16px; border-radius: 14px 14px 0 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sell { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; margin-bottom: 10px; }
.sell:hover { border-color: var(--line-hi); }
.sell-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sell-top b { font-size: 15px; }
.only { font-size: 11px; font-weight: 700; background: var(--orange); color: #fff; border-radius: 999px; padding: 3px 8px; }
.sell h3 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 6px; }
.sell p { color: var(--muted); font-size: 14px; line-height: 1.45; }
.sell-go { display: inline-block; margin-top: 12px; background: #fff; color: #0b1220; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.section { margin: 8px 0 18px; }
.section h3 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 10px; }
.train-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.train { background: var(--card2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 10px 14px; text-align: center; }
.train:hover { border-color: var(--line-hi); }
.train .ico { display: block; margin-bottom: 8px; color: var(--ink-soft); }
.train b { display: block; font-size: 13px; font-weight: 650; }
.play-list { display: grid; gap: 8px; }
.play-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: var(--card2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.play-item:hover { border-color: var(--line-hi); }
.play-item .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--well); display: grid; place-items: center; font-size: 22px; }
.play-item b { display: block; font-size: 15px; }
.play-item span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.play-item .go { color: var(--muted); font-size: 20px; }
.footer-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.img-tile { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.img-tile img { display: block; width: 100%; aspect-ratio: 16 / 8.6; object-fit: cover; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; font-size: 15px; color: var(--ink); background: var(--card2); }
.btn.primary { background: var(--orange); color: #fff; }
.btn.primary:hover { background: var(--orange-d); }
.btn.secondary { background: transparent; border: 1.5px solid var(--line-hi); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 12px; }
.btn.small { padding: 7px 12px; font-size: 13px; border: 1px solid var(--line); }
.btn.bar { width: 100%; border-radius: 16px; background: var(--blue); color: #fff; padding: 16px 18px; margin: 10px 0 14px; font-size: 17px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-col { display: grid; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------------ lists */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.panel-h { font-size: 15px; font-weight: 700; margin-bottom: 8px; cursor: default; }
details.panel summary { cursor: pointer; list-style: none; margin: 0; }
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); text-align: left; color: inherit; width: 100%; font-size: inherit; }
.item:hover { border-color: var(--line-hi); }
.item h3 { font-size: 16px; }
.item p { font-size: 13px; color: var(--muted); }
.badge { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--well); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--well); display: grid; place-items: center; font-size: 22px; font-weight: 800; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.studio-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
.studio-tools input { margin: 0; }
#studio-count { margin: 4px 2px 8px; }
.fam { display: grid; gap: 0; }
.fam.open .fam-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--well); border: 1px solid var(--orange); border-top: 0; border-radius: 0 0 14px 14px; }
.chip { min-width: 40px; height: 36px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.chip.done { border-color: var(--accent); color: var(--accent); }
.chip.learned { background: var(--good); border-color: var(--good); color: #fff; }

/* Grandmasters */
.grp-h { font-size: 18px; margin: 16px 2px 10px; letter-spacing: -.02em; }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.gm-card { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); }
.gm-card b { font-size: 13px; line-height: 1.15; }
.gm-card small { font-size: 11px; color: var(--muted); }
.gm-face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--well); display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--ink-soft); border: 2px solid var(--line); }
.gm-face { position: relative; }
/* absolute fill: the photo always covers the whole circle (fixes the grey band on some portraits) */
.gm-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.gm-face.big { width: 96px; height: 96px; flex: 0 0 96px; font-size: 28px; }
.gm-profile { display: flex; gap: 14px; align-items: flex-start; }
.gm-profile p { line-height: 1.45; font-size: 14px; }
.gm-game { flex-wrap: wrap; }
.gm-game > div:first-child { flex: 1 1 220px; }
.gm-btns { display: flex; gap: 6px; margin-left: auto; }

.steps { display: grid; gap: 8px; margin: 10px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.stats div { background: var(--well); border-radius: 12px; padding: 10px; text-align: center; }
.stats b { display: block; font-size: 22px; }
.stats span { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ play view */
.board-wrap { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .app { max-width: 1000px; }
  .board-wrap.play { grid-template-columns: minmax(440px, 1fr) 300px; align-items: start; }
}
.board-card { background: var(--board-card); border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.meta-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(127,127,127,.13); font-size: 13px; color: var(--ink-soft); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.board-holder { position: relative; }

.foxy-row { display: flex; align-items: flex-end; gap: 8px; margin: -4px 0 6px; }
.foxy-row img { width: 96px; height: auto; flex: 0 0 96px; margin-bottom: -6px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.speech { position: relative; flex: 1; background: #fff; color: #102033; border: 2px solid #102033; border-radius: 16px; padding: 10px 12px; font-size: 14px; line-height: 1.35; margin-bottom: 14px; }
.speech b { display: block; font-size: 15px; }
.speech::before { content: ""; position: absolute; left: -11px; bottom: 16px; border: 9px solid transparent; border-right-color: #102033; border-left: 0; }

.line-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; margin-bottom: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; font-weight: 700; }
.line-family { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.line-count { position: absolute; right: 12px; font-size: 14px; white-space: nowrap; }
.line-status { position: absolute; left: 10px; font-size: 12px; padding: 4px 10px; border-radius: 10px; background: var(--good); color: #fff; white-space: nowrap; }
.line-status.learned { background: var(--purple); }
.line-bar:has(.line-status:not([hidden])) .line-family { max-width: calc(100% - 250px); }

.board { width: 100%; aspect-ratio: 1; display: grid; box-shadow: 0 0 0 2px #fff, 0 8px 24px rgba(0,0,0,.42); grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; position: relative; }
.sq { position: relative; display: grid; place-items: center; line-height: 1; }
.board.theme-ocean .lt { background-color: #f5f8fd; } .board.theme-ocean .dk { background-color: #4a82d0; }
.board.theme-forest .lt { background-color: #ead7a4; } .board.theme-forest .dk { background-color: #4a7a4a; }
.board.theme-midnight .lt { background-color: #cbd5e1; } .board.theme-midnight .dk { background-color: #0f2744; }
.board.theme-rose .lt { background-color: #f5d0d8; } .board.theme-rose .dk { background-color: #7a3b5a; }
.sq.hl { box-shadow: inset 0 0 0 3px #f5b942; }
.sq.last { background-image: linear-gradient(rgba(255,210,70,.5), rgba(255,210,70,.5)); }
.sq.dk.last { background-image: linear-gradient(rgba(255,222,110,.68), rgba(255,222,110,.68)); }
.sq.move::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(20,120,80,.6); z-index: 3; }
.sq.capture::after { content: ""; position: absolute; inset: 5%; border: 4px solid rgba(20,120,80,.6); border-radius: 50%; z-index: 3; }
.sq.check { box-shadow: inset 0 0 0 4px #e0555a; background-image: radial-gradient(rgba(224,85,90,.55), transparent 70%); }
/* FoxyChess piece set: 84% of a square with a soft drop shadow (old sizing) */
.piece { width: 84.2%; height: 84.2%; object-fit: contain; display: block; position: relative; z-index: 2; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.sq.drag-src .piece { opacity: .25; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.board.locked .piece { cursor: default; }
.coord { position: absolute; font-size: 10px; font-weight: 700; opacity: .75; pointer-events: none; color: #0e2442; }
.dk .coord { color: #e7f0fa; }
.coord.file { right: 3px; bottom: 2px; }
.coord.rank { left: 3px; top: 2px; }
.board-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

.promo { position: absolute; inset: 0; background: rgba(10,20,40,.72); display: none; place-items: center; grid-auto-flow: column; justify-content: center; gap: 8px; border-radius: 10px; z-index: 10; }
.promo.show { display: grid; }
.promo button { width: 64px; height: 64px; border-radius: 12px; border: 0; background: #f4fbff; padding: 6px; }
.promo button img { width: 100%; height: 100%; object-fit: contain; }

.eval { position: relative; height: 30px; margin-top: 12px; border-radius: 999px; overflow: hidden; background: #2b3444; border: 1px solid var(--line); display: grid; place-items: center; }
.eval-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: #e9eef5; transition: width .35s ease; }
.eval span { position: relative; font-weight: 800; font-size: 13px; color: #102033; background: rgba(255,255,255,.88); padding: 2px 10px; border-radius: 999px; }
.nav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.btn.nav { border-radius: 12px; padding: 10px 0; font-size: 16px; background: var(--card2); border: 1px solid var(--line); }
.status { min-height: 22px; font-weight: 600; margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.btn.act { border-radius: 14px; padding: 13px 10px; background: var(--card2); border: 1px solid var(--line); font-size: 15px; }
.act-i { color: var(--accent); font-size: 14px; }
.side { display: flex; flex-direction: column; gap: 12px; }
.moves { max-height: 240px; overflow: auto; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.5; position: relative; }
.mv-row { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; }
.mv-row b { color: var(--muted); font-weight: 600; }
.mv-row button { text-align: left; border: 0; background: transparent; color: var(--ink); padding: 3px 6px; border-radius: 6px; font-size: 14px; }
.mv-row button.on { background: var(--orange); color: #fff; }
.fen { font-size: 11px; word-break: break-all; color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------------------ forms */
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
input, select { width: 100%; background: var(--well); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: 11px 12px; font-size: 16px; outline: none; }
label.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; color: var(--ink); cursor: pointer; }
label.toggle b { display: block; font-size: 15px; }
label.toggle small { display: block; color: var(--muted); font-size: 12px; }
label.toggle input { appearance: none; -webkit-appearance: none; flex: 0 0 50px; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; padding: 0; border: 0; transition: background .2s; }
label.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s; }
label.toggle input:checked { background: var(--good); }
label.toggle input:checked::after { left: 23px; }
.plan-picks { display: grid; gap: 8px; }
.plan-picks button[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }

/* ------------------------------------------------------------------ overlays */
.overlay { position: fixed; inset: 0; background: rgba(6,10,18,.62); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px; }
.overlay.show { display: flex; }
.modal { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.modal h3 { font-size: 22px; margin-bottom: 6px; }
.modal p.hint { color: var(--muted); font-size: 14px; }
.modal.result { text-align: center; }
.modal.result h3 { font-size: 24px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--card2); color: var(--ink); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 80; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.win-toast { position: fixed; left: 50%; top: calc(14% + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 2147483647; padding: 14px 26px; border-radius: 999px; background: rgba(16,32,51,.93); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 12px 30px rgba(4,17,31,.35); pointer-events: none; white-space: nowrap; opacity: 0; }
.win-toast.show { animation: winPop 4.2s ease forwards; }
@keyframes winPop { 0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.92); } 8% { opacity: 1; transform: translateX(-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.confetti-layer, .fireworks-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483646; overflow: hidden; }
.fireworks-layer { width: 100%; height: 100%; }
.confetti-layer i { position: absolute; top: -28px; width: 10px; height: 18px; border-radius: 2px; animation-name: confettiFall; animation-timing-function: cubic-bezier(.2,.7,.25,1); animation-fill-mode: forwards; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--twist, 360deg)); opacity: .9; } }

@media (max-width: 640px) {
  .hero-card { grid-template-columns: 1fr 132px; padding: 18px 14px 0; }
  .hero-art { width: 132px; height: 180px; }
  .hero-card h2 { font-size: 28px; }
  .app { padding-left: 10px; padding-right: 10px; }
  .board-card { padding: 8px; }
  .gm-profile { flex-direction: column; align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ------------------------------------------------------------------ bot picker (old FoxyChess layout) */
.bot-prompt { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: end; margin: -4px 0 10px; }
.bot-prompt img { width: 78px; height: 86px; object-fit: contain; object-position: center bottom; }
.bot-prompt-bubble { position: relative; background: #fff; color: #111; border: 3px solid #111; border-radius: 15px; padding: 10px 12px; font-size: 17px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.bot-prompt-bubble::before { content: ""; position: absolute; left: -13px; bottom: 12px; width: 16px; height: 16px; background: #fff; border-left: 3px solid #111; border-bottom: 3px solid #111; transform: rotate(45deg); }
.bot-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bot-cats:empty { display: none; }
.bot-cats button { border: 1px solid var(--line); background: var(--card2); color: var(--ink); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: 13px; text-transform: capitalize; }
.bot-grid { background: #d7ecff; border-radius: 16px; padding: 8px; color: #102033; }
.bot-tier + .bot-tier { margin-top: 4px; }
.bot-tier-label { display: inline-block; background: #fff; color: #102033; font-size: 14px; font-weight: 800; margin: 6px 2px 8px; padding: 3px 10px; border-radius: 999px; }
.bot-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 601px) { .bot-tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bot-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 148px; padding: 8px 6px 10px; border-radius: 16px; background: #f4fbff; border: 1.5px solid #8fc7ff; color: #102033; font: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.bot-card:active { transform: scale(.97); }
.bot-card.selected { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 45%, transparent); }
.bot-av { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; }
.bot-av img { height: 90px; width: auto; max-width: 100%; object-fit: contain; }
.bot-nm { font-size: 13px; font-weight: 800; margin-top: 6px; text-align: center; line-height: 1.1; }
.bot-elo { font-size: 13px; color: #3d5670; margin-top: 2px; font-weight: 600; }
.bot-start { position: sticky; bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom, 0px)); margin-top: 12px; z-index: 5; }
.bot-start .btn { width: 100%; padding: 15px; font-size: 17px; border-radius: 16px; }

/* ------------------------------------------------------------------ vs-character game screen */
.foxy-row img { width: 112px; flex: 0 0 112px; max-height: 128px; object-fit: contain; object-position: center bottom; }
.speech.pop { animation: speechPop .28s ease; }
@keyframes speechPop { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  body.vs-character #view-play .meta-row { display: none; }
  body.vs-character #view-play .page-head p { display: none; }
}

/* ------------------------------------------------------------------ online waiting screen (old FoxyChess) */
.online-wait { display: grid; gap: 12px; background: #dae9fc; border: 1.5px solid rgba(255,255,255,.35); border-radius: 24px; padding: 10px; box-shadow: 0 16px 44px rgba(37,83,130,.14); color: #102033; }
.online-video-wrap { border-radius: 18px; overflow: hidden; background: #dae9fc; height: min(62vh, 560px); }
.online-video-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; }
.online-video-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.online-video-wrap [hidden] { display: none !important; }
.online-wait-copy { text-align: center; font-weight: 700; }
.btn-row.center { justify-content: center; margin: 0 0 6px; }
.online-wait .btn.secondary { color: #102033; border-color: #7fb2e0; background: #fff; }
.online-wait .btn.ghost { color: #3d5670; }

/* ------------------------------------------------------------------ GM picker (old style, big circles) */
.gm-picker .gm-card { min-height: 170px; gap: 0; }
.gm-picker .gm-face { width: 88px; height: 88px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(16,32,51,.18); background: #d7e6f4; color: #1a3a58; font-size: 24px; margin-bottom: 4px; }
.gm-picker .gm-face img { object-position: center 25%; }
.gm-picker .bot-nm { min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.gm-n { font-size: 11px; color: #5b7390; margin-top: 2px; }
.gm-picker .list .item { background: #f4fbff; border-color: #8fc7ff; color: #102033; }
.gm-picker .list .item p { color: #3d5670; }

/* ------------------------------------------------------------------ card selector (barrel) */
.page-head .view-toggle { margin-left: auto; border: 1px solid var(--line); background: var(--card2); }
.tb-scene { border-radius: 16px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line); }
.tb-scene img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: cover; }
.tb-stage { position: relative; overflow: hidden; touch-action: none; border-radius: 18px; background: linear-gradient(90deg, #0788d1 0, #47b5e8 8%, #52b9e8 50%, #47b5e8 92%, #0788d1 100%); user-select: none; -webkit-user-select: none; }
.tb-wheel { position: absolute; inset: 0; }
.tb-card { position: absolute; left: 12px; right: 12px; top: 50%; padding: 15px 16px 12px; border: 5px solid #70d8ff; border-radius: 28px; background: linear-gradient(180deg, #fff 0%, #fbfdff 84%, #eaf9ff 100%); box-shadow: 0 0 0 3px #078dd5, 0 10px 20px rgba(0,76,139,.4); color: #09275f; overflow: hidden; will-change: height, transform; }
.tb-card.active { padding-right: 88px; }
.tb-wheel.settling .tb-card { transition: height 340ms cubic-bezier(.2,.78,.22,1), margin-top 340ms cubic-bezier(.2,.78,.22,1), transform 340ms cubic-bezier(.2,.78,.22,1); }
.tb-card h1 { font-size: 26px; line-height: 1.05; margin: 0 48px 8px 0; color: #082760; letter-spacing: -.5px; }
.tb-card.active h1 { margin-right: 0; }
.tb-star { position: absolute; right: 12px; top: 11px; width: 40px; height: 40px; border: 2px solid #c7d9e8; border-radius: 11px; display: grid; place-items: center; font-size: 24px; color: #8494aa; background: #f8fbff; z-index: 2; }
.tb-card.active .tb-star { right: 96px; }
.tb-star.lit { color: #ffae00; background: #fff4c7; border-color: #ffc94e; }
.tb-badge { display: inline-block; background: #fff0d8; color: #a65d00; border-radius: 11px; padding: 4px 11px; font-size: 15px; font-weight: 800; }
.tb-count { float: right; font-size: 16px; margin-top: 6px; }
.tb-desc { font-size: 14px; line-height: 1.2; margin: 7px 0; color: #0b2b63; clear: both; }
.tb-moves { background: #eef9fd; color: #102b62; border: 2px solid #b8e5f7; border-radius: 14px; padding: 6px 10px; font-size: 14px; line-height: 1.3; height: 74px; overflow: hidden; }
.tb-moves > b { display: block; font-size: 17px; margin-bottom: 3px; }
.tb-actions { margin-top: 5px; }
.tb-actions button { width: 100%; height: 54px; border: 0; border-radius: 12px; margin: 5px 0; color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 4px 7px rgba(0,58,113,.19); font: inherit; }
.tb-actions button .i { font-size: 22px; width: 26px; text-align: center; }
.tb-actions button > span:last-child { display: flex; flex-direction: column; line-height: 1.05; text-align: center; }
.tb-actions button b { font-size: 18px; }
.tb-actions button small { font-size: 12px; font-weight: 600; margin-top: 3px; }
.tb-actions .play { background: #08a54b; }
.tb-actions .add { background: #ff9d00; }
.tb-actions .add.on { background: #d97e00; box-shadow: inset 0 0 0 3px #8a5000; }
.tb-actions .resume { background: #a8ddf8; color: #09275f; }
.tb-actions .learn { background: #7d39c9; margin-bottom: 0; }
.tb-actions .learn.on { background: #4a1c85; box-shadow: inset 0 0 0 3px #2c0f52; }
.tb-lines { position: absolute; right: 10px; top: 12px; bottom: 12px; width: 70px; background: #f9fcff; border: 2px solid #b8d4e8; border-radius: 22px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,58,113,.22); z-index: 3; }
.tb-nums { position: absolute; inset: 0; }
.tb-num { position: absolute; left: 5px; right: 5px; top: 50%; height: 40px; margin-top: -20px; border: 0; background: transparent; color: #09275f; font: inherit; font-size: 18px; font-weight: 600; border-radius: 11px; }
.tb-num.sel { background: #10a9f2; color: #fff; font-weight: 900; }
.tb-num.done:not(.sel) { color: #0d8fe0; }
.tb-num.learned:not(.sel) { color: #2c9a52; font-weight: 900; }
.tb-arrow { position: absolute; left: 0; right: 0; height: 44px; border: 0; background: #f8fcff; z-index: 3; font-size: 26px; font-weight: 900; color: #0d8fe0; line-height: 1; }
.tb-arrow.up { top: 0; } .tb-arrow.down { bottom: 0; }
.tb-stage.compact .tb-card h1 { font-size: 22px; }
.tb-stage.compact .tb-desc { font-size: 13px; margin: 4px 0; }
.tb-stage.compact .tb-moves { height: 58px; }
.tb-stage.compact .tb-actions button { height: 44px; margin: 3px 0; }
.tb-stage.compact .tb-actions button b { font-size: 16px; }
.tb-stage.compact .tb-actions button small { display: none; }
.tb-tabs { display: grid; grid-template-columns: 1fr 1fr 56px; gap: 8px; margin-top: 8px; }
.tb-tabs a { display: grid; place-items: center; height: 48px; border-radius: 24px; border: 3px solid #d7f5ff; background: #fff; color: #09275f; font-weight: 900; font-size: 17px; }
.tb-tabs a.active { background: #129ee9; color: #fff; }
.tb-tabs a.gear { font-size: 22px; }
body[data-view="barrel"] .app { padding-bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom, 0px)); }

/* ------------------------------------------------------------------ Foxy Training (old dashboard look) */
.ft-card { background: #dae9fc; color: #102033; border: 1.5px solid #b9d3ee; border-radius: 22px; padding: 16px; margin-bottom: 12px; }
.ft-h { font-size: 22px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 12px; }
.ft-elo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ft-elo div { background: #fff; border: 1.5px solid #c5d9ef; border-radius: 16px; padding: 10px; text-align: center; }
.ft-elo span { display: block; font-size: 15px; }
.ft-elo strong { display: block; font-size: 38px; font-weight: 900; line-height: 1.1; }
.ft-status { background: #f3f4f6; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 15px; color: #333; }
.ft-chart { background: #fff; border: 1.5px solid #dbe4ee; border-radius: 16px; padding: 6px; }
.ft-chart svg { width: 100%; height: auto; display: block; }
.ft-grid { stroke: #e5e9ef; stroke-width: 1; }
.ft-axis { stroke: #777; stroke-width: 1.5; }
.ft-line { fill: none; stroke: #2f5ea8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ft-dot { fill: #2f5ea8; }
.ft-lbl { font-size: 13px; font-weight: 700; fill: #555; }
.ft-summary { background: #fff; border-radius: 14px; padding: 10px 12px; margin-top: 10px; font-size: 15px; }
.ft-summary strong { display: block; color: #2f5ea8; font-size: 17px; margin-bottom: 2px; }
.ft-next { display: grid; gap: 10px; }
.ft-next-row { display: flex; align-items: center; gap: 12px; }
.ft-next-i { font-size: 32px; }
.ft-next small { display: block; color: #3d5670; font-size: 12px; }
.ft-next b { font-size: 17px; }
.ft-next .btn { width: 100%; border-radius: 14px; padding: 14px; }
.ft-next .muted { color: #3d5670; }
.ft-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border-bottom: 1.5px solid #c5d9ef; padding-bottom: 10px; margin-bottom: 8px; }
.ft-head .ft-h { margin: 0; line-height: 1.1; max-width: 8ch; }
.ft-head p { font-size: 14px; color: #3d5670; }
.ft-master { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 10px 12px; background: #eaf6ea; border: 1.5px solid #cfe6cf; border-radius: 12px; color: #102033; cursor: pointer; }
.ft-master input { width: 22px; height: 22px; accent-color: #34c27a; flex: 0 0 22px; }
.ft-master strong { display: block; font-size: 16px; }
.ft-master small { display: block; color: #3d5670; font-size: 12px; }
.ft-sec { font-weight: 900; font-size: 17px; margin: 4px 0 6px; }
.ft-sec small { display: block; font-weight: 700; font-size: 13px; color: #3d5670; }
.ft-rows { display: grid; gap: 8px; }
.ft-row { display: grid; grid-template-columns: 32px 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #fff; border: 1.5px solid #dbe4ee; border-radius: 16px; padding: 10px; }
.ft-icon { font-size: 24px; text-align: center; }
.ft-copy strong { display: block; font-size: 15px; font-weight: 900; }
.ft-copy small { display: block; font-size: 12px; color: #4a5a6c; line-height: 1.25; }
.ft-switch { position: relative; display: inline-block; width: 50px; height: 30px; margin: 0; }
.ft-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; padding: 0; }
.ft-switch span { position: absolute; inset: 0; background: #b8c2cc; border-radius: 999px; transition: background .2s; }
.ft-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s; }
.ft-switch input:checked + span { background: #34a853; }
.ft-switch input:checked + span::after { left: 23px; }
.ft-step { display: flex; align-items: center; gap: 6px; }
.ft-step button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #e3eefb; color: #2f5ea8; font-size: 22px; font-weight: 900; line-height: 1; }
.ft-step b { min-width: 16px; text-align: center; font-size: 19px; }
.ft-note { font-size: 13px; color: #3d5670; margin: 10px 2px; }
.ft-famlink { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: #eef5fd; border: 1.5px solid #9ec5ee; border-radius: 16px; padding: 12px; color: #102033; font: inherit; }
.ft-famlink .i { font-size: 26px; color: #2f6fc0; text-align: center; }
.ft-famlink strong { display: block; font-size: 16px; }
.ft-famlink small { display: block; font-size: 12px; color: #3d5670; }
.ft-famlink b { font-size: 24px; color: #2f6fc0; }
.ft-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.ft-actions .btn { border-radius: 12px; padding: 13px; }
.ft-card .btn.secondary { color: #102033; border-color: #7fb2e0; background: #fff; }
.ft-card .item { background: #fff; border-color: #dbe4ee; color: #102033; }
.ft-card .item p, .ft-card .muted { color: #3d5670; }
.ft-settings-link { margin-top: 14px; }
/* families overlay */
.modal.ft-fam { max-height: 86vh; overflow: auto; background: #dae9fc; color: #102033; border-color: #b9d3ee; }
.modal.ft-fam .hint { color: #3d5670; margin-bottom: 10px; }
.ft-fam-menu { display: grid; gap: 8px; }
.ft-fam-menu button { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; text-align: left; background: #fff; border: 1.5px solid #dbe4ee; border-radius: 14px; padding: 12px; font: inherit; color: #102033; }
.ft-fam-menu small { color: #3d5670; font-size: 12px; }
.ft-fam-head { display: flex; align-items: center; gap: 10px; }
.ft-fam .btn.small { background: #fff; color: #102033; border-color: #b9d3ee; }
.ft-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.ft-sides label { display: flex; align-items: center; gap: 6px; margin: 0; color: #102033; font-size: 14px; }
.ft-sides input { width: 18px; height: 18px; }
.ft-seg { display: flex; gap: 6px; width: 100%; }
.ft-seg button { flex: 1; border: 1.5px solid #b9d3ee; background: #eef5fd; border-radius: 10px; padding: 8px; font: inherit; font-weight: 700; color: #102033; }
.ft-seg button.on { background: #2f6fc0; color: #fff; border-color: #2f6fc0; }
.ft-bulk { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.ft-bulk .muted { margin-left: auto; color: #3d5670; }
.ft-fam-rows { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.ft-fam-rows label { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 10px; margin: 0; color: #102033; font-size: 14px; }
@media (max-width: 380px) { .ft-row { grid-template-columns: 26px 50px minmax(0, 1fr); } .ft-step { grid-column: 2 / -1; justify-content: flex-end; } }

.pill-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin: -4px 0 -4px -4px; flex: 0 0 26px; }
/* v3.46: your rating change sits next to your rating on the board once the game ends (as on Chess.com) */
.pill .delta { font-weight: 900; font-size: 14px; margin-left: 2px; }
.pill .delta.up { color: #34c27a; } .pill .delta.down { color: #ff6b6b; }
#play-opp-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#play-opp-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-row .pill:first-child { max-width: 74%; }
.meta-row .pill:last-child { flex-shrink: 0; }

/* ------------------------------------------------------------------ picture intros */
.intro-art { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.intro-art img { display: block; width: 100%; height: auto; }
.intro-art .hotspot { position: absolute; border-radius: 40px; }
.intro-art .hotspot:active { background: rgba(255,255,255,.18); }
.intro-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.intro-btns .btn { border-radius: 14px; padding: 13px 8px; }
.intro-btns:has(> :only-child) { grid-template-columns: 1fr; }
.intro-next { text-align: center; font-weight: 700; margin-top: 10px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ calculation chalkboard (rebuilt) */
.chalk-frame { position: relative; background: linear-gradient(180deg, #7a4a24, #5b3418); border-radius: 18px; padding: 14px 12px 12px; box-shadow: inset 0 0 0 3px #3e2310, 0 12px 28px rgba(0,0,0,.35); }
.chalk-sign { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); background: linear-gradient(#6b3f1d, #4d2b12); color: #f6ead6; font-family: Georgia, "Times New Roman", serif; font-size: 18px; padding: 6px 16px; border-radius: 8px; border: 2px solid #3a200d; white-space: nowrap; box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.chalk-sign span { color: #f2c14e; margin-left: 4px; }
.chalkboard { position: relative; background: radial-gradient(120% 90% at 30% 20%, #2f3a36 0%, #1f2724 60%, #19201d 100%); border-radius: 10px; padding: 26px 16px 18px; min-height: 360px; overflow: hidden; color: #eef2ec; font-family: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive; box-shadow: inset 0 0 40px rgba(0,0,0,.55); }
.chalkboard::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px); pointer-events: none; }
.chalkboard h3 { font-size: 32px; font-weight: 400; letter-spacing: .5px; margin: 4px 0 14px; text-align: center; text-shadow: 0 0 1px rgba(255,255,255,.6); }
.chalkboard h3::after { content: ""; display: block; height: 4px; margin: 4px auto 0; width: 86%; border-radius: 4px; background: #f2c14e; opacity: .9; transform: rotate(-.6deg); }
.chalkboard ul { list-style: none; display: grid; gap: 14px; position: relative; z-index: 1; padding-right: 92px; }
.chalkboard li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: 19px; line-height: 1.22; }
.chalkboard li b { color: #ffe08a; font-weight: 400; }
.chalkboard .ci { font-size: 24px; filter: grayscale(.2) drop-shadow(0 0 2px rgba(255,255,255,.25)); text-align: center; }
.chalk-fox { position: absolute; right: -8px; bottom: -6px; width: 118px; height: auto; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
@media (min-width: 601px) { .chalkboard ul { padding-right: 150px; } .chalk-fox { width: 170px; } .chalkboard li { font-size: 21px; } }
.calc-quick { display: block; text-align: center; margin: 8px auto 0; }

/* ------------------------------------------------------------------ Foxy Game Report */
.modal.foxy-report { max-height: 86vh; overflow: auto; background: #dae9fc; color: #102033; border-color: #b9d3ee; }
.foxy-report h3 { font-size: 22px; }
.foxy-report h4 { font-size: 16px; margin: 12px 0 6px; }
.fr-result { font-weight: 800; margin: 2px 0 6px; }
.fr-note { font-size: 13px; color: #3d5670; margin: 6px 0; line-height: 1.4; }
.fr-chain { background: #fff; border-radius: 12px; padding: 8px 10px; font-size: 14px; }
.fr-story { display: grid; gap: 6px; padding-left: 20px; font-size: 14px; line-height: 1.35; }
.fr-story li { background: #fff; border-radius: 10px; padding: 7px 9px; }
.fr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.fr-grid div { background: #fff; border-radius: 10px; padding: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; }
.fr-grid b { font-size: 18px; }
.foxy-report .btn-col { margin-top: 12px; }

/* ------------------------------------------------------------------ Play Foxy intro (coded) */
.pf-hero { position: relative; min-height: 470px; overflow: hidden; }
.pf-copy { position: relative; z-index: 2; }
.pf-copy p { max-width: 57%; }
.only { display: inline-block; background: var(--orange); color: #1a1208; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 6px 14px; }
.pf-copy h3 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.06; letter-spacing: -.03em; margin: 18px 0 14px; }
.pf-copy p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.pf-copy .pf-tag { color: var(--orange); font-style: italic; font-size: 16px; margin-top: 16px; }
.pf-fox { position: absolute; right: -22px; top: 205px; width: 47%; max-width: 330px; height: auto; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.pf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.pf-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 92px; border-radius: 16px; padding: 12px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.pf-btn img { width: 46px; height: 58px; object-fit: contain; flex: 0 0 46px; }
.pf-btn.w { border: 1.5px solid #d9dee6; color: var(--ink); }
.pf-btn.b { border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
.pf-btn:active { transform: scale(.98); }
@media (min-width: 700px) { .pf-copy p { max-width: 55%; font-size: 17px; } .pf-fox { width: 42%; top: 60px; } }

/* ------------------------------------------------------------------ Foxy Training intro (coded) */
.ti-cards { display: grid; gap: 12px; }
.ti-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 16px 12px; }
.ti-card svg { width: 58px; height: 58px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ti-card h3 { font-size: 19px; margin-bottom: 4px; }
.ti-card p { color: var(--muted); font-size: 15px; line-height: 1.45; }
.ti-btns { display: grid; gap: 10px; margin-top: 12px; }
.ti-btns .btn { width: 100%; border-radius: 16px; padding: 16px; font-size: 18px; }
.ti-btns .btn.secondary { border: 1.5px solid var(--line-hi); }

/* ------------------------------------------------------------------ online time controls + clocks */
.tc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tc-card { display: grid; gap: 2px; padding: 16px 14px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); text-align: center; }
.tc-card b { font-size: 28px; letter-spacing: -.02em; }
.tc-card span { font-weight: 700; color: var(--orange); }
.tc-card small { color: var(--muted); font-size: 12px; }
.tc-card.on { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.center-link { text-align: center; margin-top: 10px; }
.clock-row { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; }
.clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; padding: 5px 12px; border-radius: 10px; background: rgba(127,127,127,.15); color: var(--ink-soft); min-width: 86px; text-align: center; }
.clock.run { background: #f4f7fb; color: #102033; }
.clock.low.run { background: #e0555a; color: #fff; }
.clock-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.live-banner { display: flex; align-items: center; gap: 10px; margin: -6px 0 12px; padding: 10px 14px; border-radius: 14px; background: #1f7a4a; color: #fff; font-weight: 700; font-size: 14px; }
.live-banner b { animation: livePulse 1.2s infinite; }
.live-banner span { flex: 1; min-width: 0; }
.live-banner em { font-style: normal; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.live-banner.low { background: #b8323a; }
@keyframes livePulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------------ home top (new design) */
.hm-hero { display: grid; grid-template-columns: 1fr 46%; column-gap: 12px; align-items: end; margin-bottom: 12px; }
.hm-hero h2 { grid-column: 1 / -1; font-size: clamp(34px, 9.3vw, 56px); line-height: 1.04; letter-spacing: -.04em; margin-bottom: 10px; }
.hm-hero h2 em { font-style: normal; color: var(--orange); }
.hm-copy .lead { color: var(--muted); font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
.hm-cta { display: grid; gap: 8px; margin-bottom: 4px; }
.hm-cta .btn { width: 100%; padding: 12px 10px; }
.hm-fox { width: 100%; height: auto; border-radius: 16px; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
@media (min-width: 700px) { .hm-hero { grid-template-columns: 1fr 40%; } .hm-hero h2 { grid-column: 1; } .hm-fox { grid-row: 1 / span 2; grid-column: 2; } .hm-cta { grid-template-columns: auto auto; justify-content: start; } }
.hm-card { display: grid; grid-template-columns: 1fr 34%; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 12px 14px; margin-bottom: 10px; }
.hm-card:hover { border-color: var(--line-hi); }
.only.sm { font-size: 13px; padding: 4px 10px; color: #fff; }
.hm-text h3 { font-size: 19px; letter-spacing: -.02em; margin: 8px 0 6px; line-height: 1.15; }
.hm-text p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; margin-bottom: 6px; opacity: .92; }
.hm-side { display: grid; justify-items: center; gap: 6px; }
.hm-side img { width: 100%; max-width: 150px; border-radius: 12px; }
.hm-go { display: block; width: 100%; text-align: center; background: #fff; color: #0b1220; border-radius: 999px; padding: 8px 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mini-board { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 150px; aspect-ratio: 6 / 3; border-radius: 6px; overflow: hidden; }
.mini-board i { display: grid; place-items: center; background: #2b3444; }
.mini-board i:nth-child(12n+1), .mini-board i:nth-child(12n+3), .mini-board i:nth-child(12n+5), .mini-board i:nth-child(12n+8), .mini-board i:nth-child(12n+10), .mini-board i:nth-child(12n+12) { background: #4b5566; }
.mini-board img { width: 86%; height: 86%; object-fit: contain; }
@media (max-width: 380px) { .hm-copy .cta-row { flex-wrap: wrap; } }

/* ------------------------------------------------------------------ calculation intro (new design) */
#view-calc-intro .only { margin-top: -6px; }
.ct-head { font-size: clamp(34px, 10vw, 52px); line-height: 1.05; letter-spacing: -.035em; margin: 16px 0 16px; }
.ct-cards { display: grid; gap: 10px; }
.ct-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 14px 12px; }
.ct-card svg { width: 56px; height: 56px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ct-card p { font-size: 16px; line-height: 1.45; }
.ct-card b { color: var(--orange); font-weight: 600; }
.ct-pieces { display: flex; gap: 2px; justify-content: center; }
.ct-pieces img { width: 28px; height: 40px; object-fit: contain; }

/* ------------------------------------------------------------------ top bar + home lower (mockup) */
.topbar { grid-template-columns: auto 1fr auto; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 2px 10px; }
.brand-word { text-align: center; font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.top-icons { display: flex; gap: 2px; }
.top-icons .icon-btn { color: var(--ink); }
/* v3.33.2: the account area in the top bar */
.top-icons { align-items: center; }
.top-acct { display: flex; align-items: center; gap: 6px; }
.top-acct[hidden] { display: none; }
.top-pill { min-height: 34px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; white-space: nowrap; cursor: pointer; border: 1.5px solid var(--line); background: transparent; color: var(--ink); }
.top-pill.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.top-pill:hover { filter: brightness(1.08); }
.top-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 35%, transparent); }
@media (max-width: 380px) { .top-pill { padding: 0 10px; font-size: 12.5px; } .brand-word { font-size: 16px; } }
@media (min-width: 900px) { .top-pill { min-height: 42px; padding: 0 18px; font-size: 15px; } .top-avatar { width: 46px; height: 46px; font-size: 20px; } }
.nav-fox { border: 2px solid var(--line); }
.wb-h { font-size: 18px; margin: 14px 0 8px; letter-spacing: -.01em; }
.wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wb-tile { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 600; min-width: 0; }
.wb-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tile svg, .wb-row svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wb-rows { display: grid; gap: 6px; margin-top: 8px; }
.wb-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.wb-row b { color: var(--muted); font-size: 20px; line-height: 1; }
.wb-row .crown { font-size: 20px; text-align: center; }
.wb-hub { display: grid; grid-template-columns: 40px auto 1fr auto; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, #e8621a, #f5822a); color: #fff; }
.wb-hub img { width: 38px; height: 38px; border-radius: 50%; }
.wb-hub strong { font-size: 18px; }
.wb-hub span { font-size: 14px; opacity: .8; }
.wb-hub b { font-size: 22px; }
.tabbar .tab-fox { width: 28px; height: 28px; border-radius: 50%; }
.tabbar a.active svg { fill: color-mix(in srgb, var(--orange) 30%, transparent); }
@media (max-width: 380px) { .wb-hub span { display: none; } .wb-tile { font-size: 13px; gap: 6px; padding: 9px 8px; } }
.wb-grid { gap: 6px; }
.wb-tile { gap: 6px; padding: 10px 7px; font-size: clamp(12px, 3.2vw, 15px); }
.wb-tile span { overflow: visible; text-overflow: clip; }
.wb-tile svg { width: 20px; height: 20px; flex-basis: 20px; }
@media (max-width: 380px) { .wb-tile { font-size: 11.5px; padding: 9px 5px; } }

/* ------------------------------------------------------------------ old FoxyChess board + pieces */
.board.theme-ocean .lt { background-color: #f4fbff; } .board.theme-ocean .dk { background-color: #2f82d8; }
.board { border: clamp(6px, 1.6vw, 12px) solid #17406a; outline: 2px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.42); border-radius: 10px; box-sizing: border-box; }
.piece { width: 88%; height: 88%; }
.sq.sel { box-shadow: inset 0 0 0 5px #ffd500, 0 0 18px rgba(255,213,0,.6); z-index: 1; }
.sq.drop-target { box-shadow: inset 0 0 0 5px rgba(0,190,255,.95), 0 0 18px rgba(0,190,255,.8); z-index: 1; }
.drag-ghost { filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); }
.coord { font-size: 9px; font-weight: 800; }

/* ------------------------------------------------------------------ game review */
/* v3.17: the review panel sits under the play board (the board itself shows the review) */
.review-screen { display: grid; gap: 10px; margin-top: 10px; }
.review-screen[hidden] { display: none; }
body.reviewing .nav-row, body.reviewing .move-strip, body.reviewing #play-status, body.reviewing #play-actions,
body.reviewing #m-toolbar, body.reviewing #eval, body.reviewing #calc-info, body.reviewing #coach, body.reviewing .promo { display: none !important; }
.rv-head { display: flex; justify-content: space-between; align-items: center; }
.rv-head h2 { font-size: 24px; } .rv-head p { color: var(--muted); font-size: 14px; }
.rv-assess { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-height: 92px; }
.rv-move { display: block; font-size: 17px; margin-bottom: 6px; }
.rv-grade { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.g-best { background: #1f9d55; } .g-sound { background: #2f82d8; } .g-inaccuracy { background: #d9a520; } .g-mistake { background: #e07b24; } .g-blunder { background: #d64545; }
.rv-best { margin-top: 4px; } .rv-err { color: var(--danger); }
.rv-progress { position: relative; height: 26px; border-radius: 999px; background: var(--card2); overflow: hidden; display: grid; place-items: center; }
.rv-progress[hidden] { display: none; }
.rv-progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--orange); transition: width .2s; }
.rv-progress strong { position: relative; font-size: 13px; }
.rv-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rv-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-summary > b { width: 100%; }
.rv-summary span { color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
/* v3.49: the game's accuracy as one big figure (the coloured counts sit beside it) */
.rv-summary .rv-acc { display: flex; align-items: baseline; gap: 6px; margin-right: 10px; flex: 0 0 auto; }
.rv-summary .rv-acc b { font-size: 30px; font-weight: 900; line-height: 1; color: var(--orange); letter-spacing: -.02em; }
.rv-summary .rv-acc span { color: var(--muted); background: none; padding: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
/* v3.49: while the engine works, the text box says so in bigger type */
.rv-assess .rv-evaluating { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; }
.rv-assess .rv-evaluating b { color: var(--orange); }
/* v3.49: the best move sits inside its ▶ button */
.rv-shows .rv-best-btn b { font-weight: 900; margin-left: 2px; }

/* ------------------------------------------------------------------ GM portraits either side of the board */
.gm-flank { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.flank { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flank.b { flex-direction: row-reverse; text-align: right; }
.flank b { display: block; font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.flank small { color: var(--muted); font-size: 11px; }
.gm-face.flank { width: 52px; height: 52px; flex: 0 0 52px; font-size: 16px; }
body[data-view="play"] .gm-flank:not([hidden]) ~ .clock-row { display: none; }

/* ================================================================== PHONE GAME SCREEN (chess.com-style, board fixed) */
.move-strip, .m-toolbar { display: none; }
@media (max-width: 640px) {
  body[data-view="play"] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
  body[data-view="play"] .topbar, body[data-view="play"] .tabbar, body[data-view="play"] .live-banner { display: none !important; }
  body[data-view="play"] .app { padding: calc(4px + env(safe-area-inset-top, 0px)) 6px 0; height: 100dvh; overflow: hidden; }
  #view-play.active { display: flex; flex-direction: column; height: calc(100dvh - 4px - env(safe-area-inset-top, 0px)); animation: none; }
  #view-play .page-head { margin: 0 0 4px; gap: 8px; min-height: 36px; }
  #view-play .page-head h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-play .page-head p { display: none; }
  #view-play .back-btn { flex-basis: 34px; width: 34px; height: 34px; font-size: 22px; border: 0; background: transparent; }
  /* character + speech: fixed height so the board never jumps */
  #view-play .foxy-row { height: 92px; margin: 0 0 6px; align-items: flex-end; flex: 0 0 auto; }
  #view-play .foxy-row img { width: 82px; flex-basis: 82px; max-height: 92px; margin-bottom: 0; }
  #view-play .speech { height: 84px; margin-bottom: 4px; padding: 7px 10px; font-size: 13.5px; overflow: hidden; display: flex; flex-direction: column; }
  #view-play .speech span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #view-play .line-bar { min-height: 34px; margin-bottom: 6px; padding: 4px 10px; font-size: 14px; flex: 0 0 auto; }
  #view-play .board-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0; }
  #view-play .board-card { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #view-play .meta-row, #view-play .nav-row, #view-play .action-grid, #view-play .side { display: none; }
  body[data-ctx="online"] #view-play .meta-row { display: flex; margin-bottom: 4px; }
  #view-play .board-holder { align-self: center; flex: 0 0 auto; }
  #view-play .board { margin: 0 auto; }
  #view-play .eval { height: 26px; margin-top: 6px; flex: 0 0 auto; }
  #view-play .status { display: none; }
  body[data-mode="calc"] #view-play .status, body[data-mode="line"] #view-play .status { display: block; font-size: 13px; margin-top: 4px; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* move strip: ‹ 1. e4 h5 › */
  #view-play .move-strip { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; height: 40px; margin-top: 4px; flex: 0 0 auto; }
  .ms-arrow { border: 0; background: transparent; color: var(--ink-soft); height: 40px; display: grid; place-items: center; }
  .ms-arrow svg, .tb-btn svg, .tb-big svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .ms-arrow:disabled { opacity: .3; }
  .ms-moves { display: flex; align-items: center; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; scroll-behavior: smooth; font-size: 17px; font-weight: 700; }
  .ms-moves::-webkit-scrollbar { display: none; }
  .ms-moves i { font-style: normal; color: var(--muted); font-weight: 600; margin-left: 6px; }
  .ms-moves button { border: 0; background: transparent; color: var(--ink); font: inherit; padding: 4px 7px; border-radius: 7px; }
  .ms-moves button.on { background: var(--card2); box-shadow: inset 0 -3px 0 var(--orange); }
  .ms-empty { color: var(--muted) !important; font-weight: 500 !important; font-size: 14px; }
  /* bottom toolbar */
  #view-play .m-toolbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: auto; padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); flex: 0 0 auto; min-height: 58px; position: relative; z-index: 3; }
  body[data-view="play"] .app { overflow: auto; }
  .modal-back { overflow: auto; -webkit-overflow-scrolling: touch; }
  .modal.result { max-height: calc(100dvh - 32px); overflow: auto; }
  body.reviewing #view-play { overflow: auto; }
  body.reviewing #view-play .review-screen { display: grid; flex: 0 0 auto; }
  body.reviewing #view-play .rv-controls {
    position: sticky; bottom: 0; z-index: 5;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bg); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.reviewing #view-play .rv-controls .btn { min-height: 44px; padding: 8px 4px; font-size: 14px; }
  .tb-btn { border: 0; background: transparent; color: var(--ink-soft); display: grid; justify-items: center; gap: 3px; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 12px; }
  .tb-btn span { line-height: 1.1; text-align: center; }
  .tb-btn.hot { background: #2f8a3e; color: #fff; }
  .tb-btn.on { color: var(--orange); }
  .tb-btn:disabled { opacity: .35; }
  .tb-big { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; }
  .tb-big svg { width: 20px; height: 20px; color: var(--accent); }
  /* GM games: big portraits at the board's top corners, names underneath */
  body[data-mode="gm"] #view-play .foxy-row, body[data-mode="gm"] #view-play .line-bar { display: none !important; }
  body[data-mode="gm"] #view-play .gm-flank:not([hidden]) { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 6px; flex: 0 0 auto; }
  body[data-mode="gm"] .flank { flex-direction: column !important; align-items: center; text-align: center !important; gap: 3px; max-width: 48%; }
  body[data-mode="gm"] .gm-face.flank { width: 88px; height: 88px; flex-basis: 88px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35); font-size: 24px; }
  body[data-mode="gm"] .flank b { max-width: 44vw; font-size: 13px; }
  body[data-mode="gm"] #view-play .page-head h2 { font-size: 14px; }
}

/* ------------------------------------------------------------------ Options sheet */
.sheet { position: fixed; inset: 0; z-index: 75; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.sheet[hidden] { display: none; }
.sheet-card { width: min(520px, 100%); display: grid; gap: 10px; animation: sheetUp .22s ease; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-list { background: #2c2f36; border-radius: 16px; overflow: hidden; display: grid; }
.sheet-list button, .sheet-cancel { border: 0; background: transparent; color: #f2f4f8; font: inherit; font-size: 20px; font-weight: 600; padding: 16px; }
.sheet-list button + button { border-top: 1px solid rgba(255,255,255,.1); }
.sheet-cancel { background: #2c2f36; border-radius: 16px; font-weight: 800; }

/* ------------------------------------------------------------------ result pop-up (chess.com style) */
.modal.result { position: relative; background: #262a30; color: #f2f4f8; border-color: #3a3f47; padding: 22px 18px 18px; text-align: center; }
.modal.result h3 { font-size: 26px; margin: 4px 30px 4px; }
.modal.result .hint { color: #c9ced6; font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.result-x { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; color: #c9ced6; font-size: 22px; }
.btn.review-big { width: 100%; background: linear-gradient(#86b84c, #6ea43d); color: #fff; font-size: 22px; font-weight: 900; padding: 16px; border-radius: 14px; box-shadow: 0 4px 0 #4f7a27; }
.btn.report-big { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; background: linear-gradient(#f5a04a, #d9781c); color: #fff; font-size: 21px; font-weight: 900; padding: 14px 16px; border-radius: 14px; box-shadow: 0 4px 0 #a85a12; }
.btn.report-big img { width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.result-pair .btn { background: #3a3f47; border: 0; color: #f2f4f8; border-radius: 12px; padding: 14px 8px; font-size: 17px; }
.modal.result .btn.ghost { color: #c9ced6; margin-top: 8px; }

/* ------------------------------------------------------------------ training families list */
.ftf-group { background: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.ftf-group.now { box-shadow: inset 0 0 0 2px var(--orange); }
.ftf-group h4 { font-size: 15px; margin-bottom: 6px; }
.ftf-group h4 b { color: var(--orange); font-weight: 800; }
.ftf-group ol { list-style: none; display: grid; gap: 4px; }
.ftf-group li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 8px; background: #f2f6fb; }
.ftf-group li em { font-style: normal; color: #5b7390; white-space: nowrap; font-size: 12px; }
.ftf-group li.learned { background: #e3f6ea; } .ftf-group li.learned em { color: #1f9d55; font-weight: 700; }
.ftf-group li.practising { background: #fff3e2; } .ftf-group li.practising em { color: #c26a12; font-weight: 700; }
.ftf-group li.more { justify-content: center; color: #5b7390; background: transparent; }
@media (max-width: 640px) {
  body[data-mode="gm"] .gm-face.flank { flex: none !important; min-width: 88px; min-height: 88px; aspect-ratio: 1; display: grid; place-items: center; }
}

.wb-tile svg.fill { fill: currentColor; stroke: none; }
.wb-tile svg, .wb-tile .tile-piece { width: 24px; height: 24px; flex: 0 0 24px; color: var(--ink); }
.wb-tile .tile-piece { object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ------------------------------------------------------------------ GM games on phones — option B:
   foxychess header + tab bar back; no title row, no eval bar; move strip kept; 64px portraits */
@media (max-width: 640px) {
  body[data-view="play"][data-mode="gm"] .topbar { display: grid !important; margin-bottom: 6px; padding: 2px 2px 6px; }
  body[data-view="play"][data-mode="gm"] .tabbar { display: grid !important; }
  body[data-view="play"][data-mode="gm"] #view-play .page-head,
  body[data-view="play"][data-mode="gm"] #view-play .eval { display: none !important; }
  body[data-mode="gm"] .gm-face.flank { width: 64px !important; height: 64px !important; min-width: 64px; min-height: 64px; flex-basis: 64px; font-size: 18px; border-width: 2px; }
  body[data-mode="gm"] #view-play .gm-flank:not([hidden]) { margin-bottom: 4px; }
  body[data-mode="gm"] .flank { gap: 1px; }
  body[data-mode="gm"] .flank b { font-size: 12px; }
  body[data-mode="gm"] .flank small { font-size: 10.5px; }
  body[data-mode="gm"] #view-play .m-toolbar { padding-bottom: 6px; }
}
@media (max-width: 640px) {
  body[data-mode="gm"] #view-play .gm-flank:not([hidden]) { align-items: center; }
  body[data-mode="gm"] .flank.w { flex-direction: row !important; text-align: left !important; gap: 8px; }
  body[data-mode="gm"] .flank.b { flex-direction: row-reverse !important; text-align: right !important; gap: 8px; }
  body[data-mode="gm"] .flank b { max-width: 28vw; white-space: normal; line-height: 1.15; }
}
/* keep the board centred in the space that's left instead of pinned to the top */
@media (max-width: 640px) {
  /* board + eval + move strip stay together, with the spare space split above and below */
  #view-play .board-holder { margin: auto auto 0; }
  #view-play .move-strip { margin-bottom: auto; }
  #view-play .m-toolbar { margin-top: 0; }
}

/* ------------------------------------------------------------------ Foxy's Hub (grouped rows) */
.hub-group { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 6px; margin-bottom: 12px; }
.hub-group h3 { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--orange); margin-bottom: 6px; }
.hub-row { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 12px; padding: 9px 2px; border-radius: 12px; }
.hub-row + .hub-row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.hub-row:active { background: var(--card2); }
.hub-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.hub-ico img { width: 30px; height: 30px; object-fit: contain; }
.hub-ico.fox img { width: 100%; height: 100%; border-radius: 12px; }
.hub-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-ico.orange svg { stroke: var(--orange); }
.hub-text b { display: block; font-size: 16px; }
.hub-text small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.hub-row i { font-style: normal; color: var(--muted); font-size: 20px; text-align: right; }
.hub-search { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 13px 14px; border-radius: 14px; background: var(--well); border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.hub-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* ------------------------------------------------------------------ GM games: give the board every spare pixel */
@media (max-width: 640px) {
  body[data-view="play"][data-mode="gm"] { --tab-h: 54px; }
  body[data-view="play"][data-mode="gm"] .app { padding-left: 0; padding-right: 0; }
  body[data-view="play"][data-mode="gm"] #view-play > *:not(.board-wrap) { padding-left: 6px; padding-right: 6px; }
  body[data-view="play"][data-mode="gm"] #view-play .board-card > *:not(.board-holder) { margin-left: 6px; margin-right: 6px; }
  body[data-view="play"][data-mode="gm"] .topbar { padding: 0 4px 4px; margin-bottom: 4px; }
  body[data-view="play"][data-mode="gm"] .nav-fox { width: 34px; height: 34px; }
  body[data-view="play"][data-mode="gm"] .brand-word { font-size: 16px; }
  body[data-view="play"][data-mode="gm"] .top-icons .icon-btn { width: 34px; height: 34px; }
  body[data-view="play"][data-mode="gm"] .tabbar svg { width: 21px; height: 21px; }
  body[data-view="play"][data-mode="gm"] .tabbar .tab-fox { width: 24px; height: 24px; }
  body[data-view="play"][data-mode="gm"] .tabbar a { font-size: 10px; gap: 1px; }
  body[data-mode="gm"] .gm-face.flank { width: 56px !important; height: 56px !important; min-width: 56px; min-height: 56px; flex-basis: 56px; font-size: 16px; }
  body[data-mode="gm"] #view-play .move-strip { height: 34px; margin-top: 2px; }
  body[data-mode="gm"] .tb-big { min-height: 48px; font-size: 16px; }
  body[data-mode="gm"] #view-play .m-toolbar { gap: 6px; padding-top: 4px; }
}

.foxy-report { position: relative; }
.report-x { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #102033; font-size: 18px; font-weight: 800; box-shadow: 0 2px 6px rgba(16,32,51,.2); }
.foxy-report h3 { padding-right: 44px; }

/* ------------------------------------------------------------------ no double-tap zoom on the game screens */
body { touch-action: manipulation; }
.board, .sq, .piece, button, .btn, a { touch-action: manipulation; }
.board { touch-action: none; }

/* ------------------------------------------------------------------ short phones (iPhone SE and similar): trim the furniture so the board stays big */
@media (max-width: 640px) and (max-height: 700px) {
  #view-play .page-head { min-height: 30px; margin-bottom: 2px; }
  #view-play .page-head h2 { font-size: 15px; }
  #view-play .back-btn { flex-basis: 30px; width: 30px; height: 30px; font-size: 20px; }
  #view-play .foxy-row { height: 74px; margin-bottom: 4px; }
  #view-play .foxy-row img { width: 66px; flex-basis: 66px; max-height: 74px; }
  #view-play .speech { height: 68px; font-size: 12.5px; padding: 6px 9px; }
  #view-play .speech span { -webkit-line-clamp: 2; }
  #view-play .line-bar { min-height: 28px; margin-bottom: 4px; font-size: 13px; padding: 3px 8px; }
  #view-play .line-count, #view-play .line-status { font-size: 11.5px; }
  #view-play .eval { height: 22px; margin-top: 4px; }
  #view-play .eval span { font-size: 12px; padding: 1px 8px; }
  #view-play .move-strip { height: 32px; margin-top: 2px; }
  #view-play .status { font-size: 12px; min-height: 15px; margin-top: 2px; }
  #view-play .m-toolbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .tb-btn { font-size: 11px; gap: 2px; padding: 2px; }
  .tb-btn svg { width: 22px; height: 22px; }
  .tb-big { min-height: 44px; font-size: 15px; }
}

/* Photo credits */
.credits-intro p { margin: 0 0 8px; }
.credits-list { display: grid; gap: 8px; margin-top: 12px; }
.credit-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.credit-row .gm-face { width: 56px; height: 56px; font-size: 17px; }
.credit-row h3 { margin: 0 0 2px; font-size: 16px; }
.credit-row p { margin: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.credit-row a { color: var(--orange); }
.center-link.small { font-size: 13px; }
.center-link.small a { color: var(--muted); text-decoration: underline; }


/* ==================================================================
   DESKTOP / LAPTOP LAYOUT (v2.2) — use the whole screen, chess.com style.
   • The bottom tab bar becomes a menu down the left-hand side.
   • Game screen: players/Foxy/GMs to the LEFT of the board, eval bar running
     down the board's side, and the moves, board controls and buttons in a
     column on the RIGHT. The board is sized to the window height.
   • Bigger pictures everywhere (150px — same as Foxy on the home page).
   ================================================================== */
@media (min-width: 1100px) {
  :root { --tab-h: 0px; --side-nav: 116px; }
  body { padding-left: var(--side-nav); }

  /* left-hand menu */
  .tabbar {
    top: 0; bottom: 0; left: 0; right: auto; width: var(--side-nav); height: auto; max-width: none; margin: 0;
    grid-template-columns: 1fr; grid-auto-rows: 100px; align-content: start; padding: 22px 0 0;
    border-radius: 0; border: 0; border-right: 1px solid var(--line);
  }
  .tabbar a { font-size: 15px; gap: 8px; border-radius: 16px; margin: 0 10px; }
  .tabbar a:hover { background: rgba(127,127,127,.12); }
  .tabbar svg { width: 36px; height: 36px; }
  .tabbar .tab-fox { width: 44px; height: 44px; }
  .app { max-width: none; margin: 0; padding: 18px 36px 36px; }
  .toast { bottom: 24px; }

  /* bigger pictures: bots, GMs, Foxy */
  .bot-tier-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .bot-card { min-height: 230px; padding: 12px 8px 14px; }
  .bot-av { height: 152px; }
  .bot-av img { height: 150px; }
  .bot-nm { font-size: 16px; }
  .bot-elo { font-size: 15px; }
  .gm-picker .gm-face { width: 150px; height: 150px; font-size: 40px; }
  .gm-face.big { width: 150px; height: 150px; flex-basis: 150px; font-size: 40px; line-height: 1; }
  .bot-prompt { grid-template-columns: 130px minmax(0, 1fr); }
  .bot-prompt img { width: 130px; height: 140px; }

  /* ---------------- game screen ---------------- */
  body[data-view="play"] .topbar, body[data-view="play"] .live-banner { display: none; }
  body[data-view="play"] .app { max-width: none; padding: 16px 20px; }
  #view-play.active {
    --left: clamp(170px, 14vw, 220px); --right: clamp(280px, 22vw, 340px); --gap: 18px;
    --bs: max(420px, min(calc(100vh - 78px), calc(100vw - var(--side-nav) - var(--left) - var(--right) - 2 * var(--gap) - 40px)));
    display: grid; column-gap: var(--gap); row-gap: 10px; justify-content: center; align-content: start;
    grid-template-columns: var(--left) var(--bs) var(--right);
    grid-template-rows: repeat(6, auto) 1fr auto;
  }
  #view-play .board-wrap, #view-play .board-card { display: contents; }

  /* centre: board + vertical eval bar */
  #view-play .board-holder { grid-column: 2; grid-row: 1 / 8; align-self: start; width: var(--bs); }
  #view-play .board { width: var(--bs) !important; }
  #view-play .eval { grid-column: 2; grid-row: 8; align-self: start; width: var(--bs); margin: 8px 0 0; }
  #view-play { --pct: 50%; }

  /* left: opponent / Foxy / GMs beside the board, names at top and bottom */
  #view-play .foxy-row, #view-play .gm-flank { grid-column: 1; grid-row: 1 / 5; align-self: start; }
  #view-play .foxy-row { flex-direction: column; align-items: center; margin: 0; gap: 12px; justify-self: center; width: 100%; }
  #view-play .foxy-row img { width: 150px; flex: 0 0 auto; margin: 0; }
  #view-play .speech { margin: 0; width: 100%; font-size: 14.5px; }
  #view-play .speech::before { left: calc(50% - 9px); top: -11px; bottom: auto; border: 9px solid transparent; border-bottom-color: #102033; border-top: 0; }
  #view-play .gm-flank:not([hidden]) { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: var(--bs); margin: 0; grid-row: 1 / 8; }
  body[data-orient="w"] #view-play .flank.b, body:not([data-orient]) #view-play .flank.b { order: -1; }
  body[data-orient="b"] #view-play .flank.w { order: -1; }
  #view-play .flank { flex-direction: column !important; align-items: center; text-align: center !important; gap: 8px; }
  #view-play .gm-face.flank { display: grid; place-items: center; line-height: 1; width: 150px; height: 150px; min-width: 150px; min-height: 150px; flex: 0 0 150px; font-size: 40px; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  #view-play .flank b { max-width: var(--left); font-size: 16px; white-space: normal; }
  #view-play .flank small { font-size: 13px; }
  #view-play .meta-row { grid-column: 1; grid-row: 5 / 8; align-self: end; flex-direction: column; align-items: center; margin: 0; }
  #view-play .meta-row .pill { max-width: var(--left) !important; white-space: normal; }
  #view-play .gm-flank:not([hidden]) ~ .meta-row, body[data-mode="gm"] #view-play .meta-row { display: none; }

  /* right: title, clocks, moves, board controls, buttons */
  #view-play .page-head { grid-column: 3; grid-row: 1; margin: 0; }
  #view-play .page-head h2 { font-size: 22px; }
  #view-play .line-bar { grid-column: 3; grid-row: 2; margin: 0; }
  #view-play .clock-row { grid-column: 3; grid-row: 3; margin: 0; }
  #view-play .clock { font-size: 26px; }
  #view-play .side { grid-column: 3; grid-row: 4; }
  #view-play .moves { max-height: max(140px, calc(var(--bs) - 430px)); }
  #view-play .nav-row { grid-column: 3; grid-row: 5; margin: 0; }
  #view-play .status { grid-column: 3; grid-row: 6; margin: 0; }
  #view-play .action-grid { grid-column: 3; grid-row: 7; margin: 0; align-self: start; }
  #view-play .move-strip, #view-play .m-toolbar { display: none !important; }
}

/* v2.3 — home page and Play Online on large screens */
.online-board-wrap { margin: 18px auto 0; max-width: 560px; }
.online-board { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
@media (min-width: 1100px) {
  .tc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
  .tc-card { padding: 22px 14px; }
  .tc-card b { font-size: 36px; }
  .online-board-wrap { max-width: 820px; margin-top: 26px; }
  #view-online .center-link { text-align: center; }

  /* home: hero + the three feature cards the same height */
  .hm-hero { grid-template-columns: 1fr 40%; }
  .hm-hero h2 { font-size: 64px; }
  .hm-copy .lead { font-size: 20px; }
  .hm-cta { grid-auto-flow: column; justify-content: start; }
  .hm-cta .btn { width: auto; padding: 13px 26px; font-size: 16px; }
  .hm-card { min-height: 240px; grid-template-columns: 1fr 230px; padding: 22px 26px; gap: 24px; margin-bottom: 14px; }
  .hm-text h3 { font-size: 28px; margin: 12px 0 10px; }
  .hm-text p { font-size: 16.5px; }
  .only.sm { font-size: 14px; padding: 5px 12px; }
  .hm-side img { max-width: 190px; }
  .hm-side .mini-board { width: 190px; max-width: 190px; }
  .hm-go { font-size: 15px; padding: 10px 8px; }

  /* "And that is not the whole board." — bigger */
  .wb-h { font-size: 30px; margin: 30px 0 14px; }
  .wb-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .wb-tile { flex-direction: column; justify-content: center; gap: 10px; padding: 22px 10px; font-size: 17px; border-radius: 14px; text-align: center; }
  .wb-tile svg, .wb-tile .tile-piece { width: 44px; height: 44px; flex-basis: 44px; }
  .wb-rows { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
  .wb-row { padding: 18px 20px; font-size: 18px; border-radius: 14px; }
  .wb-row svg { width: 30px; height: 30px; flex-basis: 30px; }
  .wb-hub { padding: 16px 22px; margin-top: 12px; border-radius: 14px; grid-template-columns: 52px auto 1fr auto; }
  .wb-hub img { width: 50px; height: 50px; }
  .wb-hub strong { font-size: 22px; }
  .wb-hub span { font-size: 16px; }
}

/* v2.4 — large screens only (phones unchanged) */
@media (min-width: 1100px) {

  .topbar { padding: 10px 14px 10px 12px; }
  .nav-fox { width: 62px; height: 62px; }
  .brand-word { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }   /* same height as "Not an engine. A hustler." */
  .icon-btn { width: 56px; height: 56px; }
  .icon-btn svg { width: 34px; height: 34px; }
}

/* v2.5 — players beside the board + calculation info (desktop); hidden on phones */
.pl-card, .calc-info { display: none; }
@media (min-width: 1100px) {
  #view-play .pl-card:not([hidden]) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; grid-column: 1; }
  #view-play .pl-card.top { grid-row: 1 / 4; align-self: start; }
  #view-play .pl-card.bottom { grid-row: 5 / 8; align-self: end; }
  .pl-face { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); background: #d7e6f4; display: grid; place-items: center; }
  .pl-face img { width: 100%; height: 100%; object-fit: cover; }
  .pl-face.icon img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.3)); }
  .pl-card b { font-size: 16px; max-width: var(--left); overflow-wrap: anywhere; }
  .pl-card small { color: var(--muted); font-size: 13px; }
  #view-play .calc-info:not([hidden]) { display: grid; gap: 6px; grid-column: 1; grid-row: 4; align-self: center; background: var(--card); border: 1px solid var(--orange); border-radius: 14px; padding: 12px; text-align: center; }
  .calc-info b { font-size: 18px; color: var(--orange); }
  .calc-info small { color: var(--muted); font-size: 12.5px; }
  .calc-info span { font-size: 13.5px; }
  .ci-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .ci-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--orange); }
  .ci-dots i.on { background: var(--orange); }
  .ci-dots i.x { border-color: var(--accent); } .ci-dots i.x.on { background: var(--accent); }
  #view-play .meta-row { display: none !important; }
}

/* v2.6 — desktop clocks beside the players */
@media (min-width: 1100px) {
  .pl-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .pl-clock:not([hidden]) { margin-top: 4px; }
  .pl-clock .clock { font-size: 30px; min-width: 150px; padding: 8px 14px; border-radius: 12px; }
  .pl-clock .clock.run { background: #f5f8fd; color: #0b1220; box-shadow: 0 0 0 2px var(--orange); }
  .pl-clock .clock.low.run { background: #e0555a; color: #fff; }
  #view-play .pl-card.bottom:not([hidden]) { flex-direction: column; }
  #view-play .pl-card.bottom .pl-clock { order: -1; margin: 0 0 6px; }   /* your clock above your picture, like chess.com */
  body.clocks-beside #view-play .clock-row { display: none !important; }
}

/* ==================================================================
   v3.0 — NEW LOOK (home page redesign, carried through the site)
   ================================================================== */
:root { --edge: #2d5aa8; --edge-glow: 0 0 0 1px rgba(90,150,240,.10), 0 8px 22px rgba(20,60,140,.22); }

/* two-tone wordmark, left beside the fox */
.topbar { grid-template-columns: auto 1fr auto; }
.brand-word { text-align: left; font-size: 22px; font-weight: 800; letter-spacing: -.02em; padding-left: 4px; }
.bw-a { color: #fff; } .bw-b { color: var(--orange); }
body[data-theme="light"] .bw-a, :root[data-theme="light"] .bw-a { color: #102033; }

/* blue outlines with a soft glow — every box on the site */
.panel, .item, .hm-card, .wb-tile, .wb-row, .play-item, .hub-row, .tc-card, .bot-card, .gm-card,
.gm-picker .gm-card, .credit-row, .side .panel, .moves-panel, .btn.act, .btn.nav, .line-bar, .page-head .back,
.settings-group, .ft-card, .result-card, .sheet-list {
  border-color: var(--edge) !important;
}
.panel, .hm-card, .wb-tile, .wb-row, .play-item, .hub-row, .tc-card, .bot-card, .credit-row { box-shadow: var(--edge-glow); }

/* buttons with icons + arrows */
.btn.big { gap: 12px; padding: 14px 20px; font-size: 17px; border-radius: 999px; }
.btn.big .ic { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn.big .arr { width: 20px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.big span { flex: 1; text-align: left; }
.btn.secondary.big { border: 1.5px solid #7c93b8; color: #fff; background: rgba(11,18,32,.35); }
.btn.primary.big { box-shadow: 0 6px 18px rgba(245,130,42,.35); }

/* hero: fox on the right, text over the left, light streaks + faint board */
.hm-hero { display: block; position: relative; min-height: 380px; margin: 0 -2px 14px; overflow: hidden; border-radius: 0 0 18px 18px; isolation: isolate; }
.hm-fx { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hm-fx .checks { position: absolute; top: 0; right: 0; width: 70%; height: 70%;
  background: repeating-conic-gradient(rgba(74,130,208,.18) 0 25%, transparent 0 50%) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000 0%, transparent 70%); }
.hm-fx .streak { position: absolute; height: 2px; width: 70%; background: linear-gradient(90deg, transparent, #f5822a, transparent); transform: rotate(-38deg); opacity: .8; filter: drop-shadow(0 0 6px #f5822a); }
.hm-fx .s1 { top: 18%; right: -18%; } .hm-fx .s2 { top: 58%; right: -30%; opacity: .5; }
.hm-fox { position: absolute; right: -16px; bottom: 0; height: 100%; z-index: -1; pointer-events: none; }
.hm-fox img { height: 100%; width: auto; max-width: none; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, #000 85%, transparent 100%); }
.hm-copy { position: relative; max-width: 62%; padding: 34px 0 18px 4px; }
.hm-hero h2 { font-size: clamp(38px, 10.5vw, 64px); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.45); max-width: 120%; width: max-content; }
.hm-copy .lead { color: #8fb7ee; font-size: 17px; margin-bottom: 16px; max-width: 16em; }
.hm-cta { display: grid; gap: 10px; }
.hm-cta .btn { width: 100%; }

/* Play Foxy card with the big sunglasses fox */
.hm-card.hm-foxy { display: block; position: relative; overflow: hidden; min-height: 300px; padding: 18px 16px; isolation: isolate;
  background: radial-gradient(circle at 85% 30%, rgba(74,130,208,.22), transparent 55%), var(--card); }
.hm-foxy::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .6;
  background: repeating-conic-gradient(rgba(74,130,208,.16) 0 25%, transparent 0 50%) 0 0 / 38px 38px;
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 90%); mask-image: linear-gradient(100deg, transparent 40%, #000 90%); }
.hm-foxy .hm-text { position: relative; max-width: 62%; }
.hm-foxy h3 { font-size: 30px; line-height: 1.08; }
.hm-foxy p { font-size: 14.5px; }
.hm-challenge { margin-top: 10px; width: 100%; max-width: 300px; }
.hm-shades { position: absolute; right: -24px; bottom: 0; height: 96%; z-index: -1; pointer-events: none; }
.hm-shades img { height: 100%; width: auto; max-width: none; display: block; }

/* Calculate • Improve • Win */
.hm-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 16px; color: #5b9cf0;
  font-size: 14px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.hm-divider::before, .hm-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #2d5aa8); }
.hm-divider::after { background: linear-gradient(90deg, #2d5aa8, transparent); }
.hm-divider .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.hm-divider img { width: 34px; height: 44px; filter: drop-shadow(0 0 10px rgba(91,156,240,.8)) hue-rotate(0deg); }

/* ocean mini-board */
.mini-board.ocean { border: 2px solid #1b3a66; }
.mini-board.ocean i { background: #f5f8fd; }
.mini-board.ocean i.d { background: #4a82d0; }

/* whole-board tiles: icon beside the label, 3 across */
.wb-grid { grid-template-columns: repeat(3, 1fr); }

/* glowing floor + king at the foot of the page */
.hm-floor { position: relative; height: 170px; margin: 18px -16px -10px; overflow: hidden; }
.hm-floor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-floor-king { position: absolute; left: 50%; bottom: 58px; width: 46px; transform: translateX(-50%);
  filter: drop-shadow(0 0 14px rgba(245,130,42,.9)) drop-shadow(0 10px 8px rgba(0,0,0,.6)); }

@media (min-width: 700px) {
  .hm-hero { min-height: 460px; }
  .hm-copy { max-width: 55%; padding-top: 60px; }
  .hm-cta { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .hm-foxy .hm-text { max-width: 55%; }
}
@media (min-width: 1100px) {
  .hm-hero { display: block; min-height: 520px; }
  .hm-hero h2 { font-size: 76px; }
  .hm-copy { max-width: 50%; padding: 80px 0 28px 8px; }
  .hm-copy .lead { font-size: 22px; }
  .hm-cta { grid-auto-flow: row; grid-template-columns: repeat(2, 280px); }
  .hm-cta .btn { width: 100%; }
  .hm-card.hm-foxy { display: block; min-height: 340px; padding: 28px 32px; }
  .hm-foxy .hm-text { max-width: 55%; }
  .hm-foxy h3 { font-size: 40px; }
  .hm-foxy p { font-size: 17px; }
  .hm-card:not(.hm-foxy) { min-height: 240px; }
  .hm-divider { font-size: 17px; margin: 28px 0 22px; }
  .hm-floor { height: 240px; margin: 26px -36px -36px; }
  .hm-floor-king { width: 60px; bottom: 90px; }
}
/* v3.0 mobile polish: keep the words readable over the foxes */
.hm-hero::after, .hm-card.hm-foxy::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.7) 42%, rgba(11,18,32,0) 68%); }
.hm-card.hm-foxy::after { background: linear-gradient(90deg, rgba(21,30,50,.95) 0%, rgba(21,30,50,.75) 45%, rgba(21,30,50,0) 70%); }
.hm-copy, .hm-foxy .hm-text { z-index: 1; }
.hm-hero h2 { max-width: none; font-size: clamp(34px, 9.2vw, 64px); }
.hm-fox { height: 92%; right: -44px; }
.hm-shades { height: 80%; right: -48px; }
.hm-foxy h3 { font-size: 26px; }
.hm-divider { font-size: 12px; letter-spacing: .16em; gap: 9px; }
.hm-divider img { width: 26px; height: 34px; }
@media (min-width: 700px) { .hm-fox { height: 100%; right: -10px; } .hm-shades { height: 96%; right: -24px; } .hm-divider { font-size: 15px; letter-spacing: .25em; } }
@media (min-width: 1100px) { .hm-foxy h3 { font-size: 40px; } .hm-divider { font-size: 17px; } .hm-divider img { width: 34px; height: 44px; } }
/* v3.0 — disconnect pop-up, offline lock */
.net-pop .modal { text-align: center; border-color: var(--orange) !important; }
.net-pop { z-index: 70; }
.net-ico { font-size: 40px; margin-bottom: 6px; }
.net-clock { display: grid; gap: 2px; margin: 10px auto 6px; padding: 10px 18px; border-radius: 14px; background: #f5f8fd; color: #0b1220; width: max-content; }
.net-clock span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.net-clock b { font-size: 34px; font-variant-numeric: tabular-nums; }
.net-count { color: var(--orange); font-weight: 700; margin: 8px 0 4px; }
.offline-note { display: grid; gap: 4px; border-color: var(--orange) !important; }
.offline-note b { color: var(--orange); font-size: 17px; }
.tc-grid.locked { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.hm-fox { width: auto; left: auto; border-radius: 0; -webkit-mask-image: none; mask-image: none; display: block; }
@media (min-width: 1100px) {
  .hm-fox { right: 2%; height: 100%; }
  .hm-hero::after { background: linear-gradient(90deg, rgba(11,18,32,.9) 0%, rgba(11,18,32,.55) 40%, rgba(11,18,32,0) 58%); }
  .brand-word { font-size: 30px; }
}

/* v3.3 — rating bands in puzzle families */
.band-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 0; background: var(--well); border: 1px solid var(--orange); border-top: 0; border-bottom: 0; }
.band-pill { border: 1px solid var(--edge, var(--line)); background: var(--card2); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.band-pill small { font-weight: 500; color: var(--muted); }
.band-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.band-pill.on small { color: rgba(255,255,255,.8); }
.band-next { display: inline-flex; margin: 0; border-radius: 0; width: 100%; justify-content: center; }
.fam.open .band-pills + .band-next, .fam.open .band-pills + .chips { border-radius: 0; }
.fam-loading { padding: 10px; background: var(--well); border: 1px solid var(--orange); border-top: 0; border-radius: 0 0 14px 14px; margin: 0; }

/* v3.3 — blue outline on the Foxy Training cards, like every other box */
.ti-card { border: 1px solid var(--edge) !important; box-shadow: var(--edge-glow); }

/* Cross Swords: below the Play list on phones and tablets (v3.6), beside it on desktop (v3.3) */
.play-wrap { display: flex; flex-direction: column-reverse; gap: 16px; }
.play-swords { display: block; width: 100%; aspect-ratio: 1712 / 1152; object-fit: cover; border-radius: 18px; border: 1px solid var(--edge); box-shadow: var(--edge-glow); }
@media (min-width: 900px) {
  .play-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
  .play-swords { display: block; width: 100%; aspect-ratio: 1712 / 1152; object-fit: cover; border-radius: 18px; border: 1px solid var(--edge); box-shadow: var(--edge-glow); }
}

/* v3.6 — family synopsis above the numbered lines */
.fam-synopsis { margin: 0; padding: 12px 14px; background: var(--well); border: 1px solid var(--orange); border-top: 0; border-bottom: 0; line-height: 1.5; font-size: 15px; font-weight: 600; color: var(--ink); }

/* v3.8 — coach panel (desktop) and the family synopsis beside the board (desktop) */
.coach, .pl-synopsis { display: none; }
@media (min-width: 1100px) {
  #view-play .coach:not([hidden]) { display: flex; gap: 12px; align-items: center; grid-column: 3; grid-row: 3; margin: 0; align-self: start;
    background: #fff; color: #1a2130; border-radius: 16px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25); position: relative; }
  #view-play .coach-ico { font-size: 30px; line-height: 1; color: #1a2130; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
  #view-play .coach p { margin: 0; font-size: 16px; font-weight: 600; }
  #view-play .pl-card.top { position: relative; }
  #view-play .pl-synopsis:not([hidden]) { display: block; position: absolute; top: calc(var(--bs, 640px) / 2); left: 50%; transform: translate(-50%, -50%);   /* v3.9: centred against the board */ width: var(--left); max-width: var(--left); max-height: 260px; overflow: auto; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); text-align: left;
    background: var(--card2); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; }
}
/* line bar: long family names no longer run into the line count */
.line-bar { justify-content: flex-start; padding-right: 118px; }
.line-family { max-width: 100%; }
.colour-pills { display: flex; gap: 6px; margin: 0 0 8px; }
.colour-pills .band-pill { padding: 6px 16px; }

/* v3.9 — phones: the coach line under the board is bolder, bigger and centred */
@media (max-width: 1099px) {
  body[data-mode="line"] #view-play .status.coaching { font-size: 16px; font-weight: 800; text-align: center; white-space: normal; color: var(--ink); line-height: 1.3; }
}

/* v3.9 — "Continue Foxy Training?" on opening the site */
.resume-card { max-width: 380px; text-align: center; }
.resume-card h3 { margin: 0 0 8px; font-size: 22px; }
.resume-card p { margin: 0 0 18px; font-size: 17px; }
.resume-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* v3.9 — Membership page */
.mem { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.mem-hero { display: flex; gap: 24px; align-items: center; margin: 8px 0 10px; }
.mem-fox { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); flex: 0 0 auto; }
.mem-hero h2 { font-size: clamp(32px, 6vw, 64px); line-height: 1.02; margin: 0 0 10px; }
.mem-hero p { margin: 0; font-size: 18px; color: var(--muted); max-width: 720px; }
.mem-free h3 { margin: 0 0 8px; }
.mem-free ul { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 17px; }
.mem-h { margin: 22px 0 0; font-size: clamp(24px, 4vw, 36px); }
.mem-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mem-stat { display: flex; flex-direction: column; gap: 4px; }
.mem-stat b { font-size: clamp(48px, 8vw, 80px); line-height: 1; }
.mem-stat small, .mem-note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.mem-table > div { display: grid; grid-template-columns: minmax(0, 1fr) 100px 90px; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; font-size: 17px; }
.mem-table > div:last-child { border-bottom: 0; }
.mem-table em { font-style: normal; color: var(--muted); text-align: right; }
.mem-table b { text-align: right; }
.mem-total b { font-size: 30px; color: var(--orange); }
.mem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mem-grid p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.mem-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; border: 2px solid var(--orange); }
.mem-vs span { display: block; color: var(--muted); }
.mem-vs b { font-size: clamp(44px, 8vw, 84px); line-height: 1; }
.mem-vs b.hot { color: var(--orange); }
.mem-vs i { font-style: normal; font-size: 28px; color: var(--muted); }
.mem-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.mem-plan { display: flex; flex-direction: column; gap: 8px; position: relative; }
.mem-plan h4 { margin: 0; font-size: 20px; }
.mem-plan > b { font-size: 52px; line-height: 1; }
.mem-plan > b small { font-size: 16px; font-weight: 400; color: var(--muted); }
.mem-plan p { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.mem-plan .btn { margin-top: auto; min-height: 52px; font-weight: 700; }
.mem-plan.best { border: 2px solid var(--orange); }
.mem-save { position: absolute; top: -14px; left: 18px; background: var(--orange); color: #1a1206; font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 999px; }
.mem-blue { background: #2f6fbf; color: #fff; border: 0; }
.mem-link { margin-bottom: 10px; display: inline-flex; }
@media (max-width: 760px) {
  .mem-hero { flex-direction: column; align-items: flex-start; }
  .mem-two, .mem-grid, .mem-plans { grid-template-columns: 1fr; }
  .mem-plans .best { order: -1; }
  .mem-vs { grid-template-columns: 1fr; }
  .mem-table > div { grid-template-columns: minmax(0, 1fr) 80px; }
  .mem-table em { display: none; }
}
/* v3.10 — Log in / Sign up at the top of Home */
.hm-account-row { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 4px 10px; }
.hm-account-row[hidden] { display: none; }
.hm-account-row .btn { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* v3.10 — Guide, Contact, and the "?" hooks that link to Guide sections */
.page-head { position: relative; }
.guide-q { position: absolute; top: 4px; right: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card2); border: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: 16px; text-decoration: none; }
.guide-q:hover { background: var(--orange); color: #1a1206; }
.line-bar-q { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; font-size: 14px; z-index: 2; }
.result .guide-q.result-q { position: absolute; top: 10px; left: 10px; }
.guide-list { display: flex; flex-direction: column; gap: 12px; }
.guide-sec h3 { margin: 0 0 8px; font-size: 18px; }
.guide-sec p { margin: 0; line-height: 1.6; }
.contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.contact-form label { font-weight: 700; font-size: 14px; }
.contact-form input, .contact-form textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
.contact-form textarea { resize: vertical; }
.contact-form .btn { margin-top: 6px; }
/* v3.10 — "How it works" ? hooks, the Guide page, and the Contact form */
.guide-q { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card2); border: 1px solid var(--edge); color: var(--muted); font-weight: 800; font-size: 15px; text-decoration: none; }
.guide-q:hover { color: var(--ink); border-color: var(--orange); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.line-bar { position: relative; }
.line-bar-q { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.result .result-q { position: absolute; top: 14px; right: 52px; }
.guide-list { display: flex; flex-direction: column; gap: 12px; }
.guide-sec h3 { margin: 0 0 6px; font-size: 18px; }
.guide-sec p { margin: 0; line-height: 1.55; color: var(--ink); }
.contact-form { display: flex; flex-direction: column; gap: 4px; max-width: 480px; }
.contact-form label { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; }
.contact-form input, .contact-form textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }
.contact-form button { margin-top: 16px; }
/* v3.11 — real accounts */
.auth-links a { color: var(--orange); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
#auth-form input { width: 100%; }
#auth-status { min-height: 1.2em; margin: 6px 0 0; }

/* ------------------------------------------------------------------ v3.12 padlocks */
.lock-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -2px; }
.lock-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line-hi); color: var(--orange); }
.is-locked, .bot-card { position: relative; }
.is-locked > .lock-badge, .is-locked > .lock-edit, .bot-card > .lock-badge, .bot-card > .lock-edit { position: absolute; top: 6px; right: 6px; z-index: 2; }
.bot-card.locked { filter: grayscale(.85); opacity: .62; }
.bot-card.locked .lock-badge { background: #102033; color: #fff; border-color: #102033; }
.fam.locked .fam-head, .item.locked { opacity: .66; }
.fam.locked .badge, .item.locked .badge { color: var(--orange); }
.gm-game.locked .btn { gap: 6px; }
/* the admin's Free / Members switch ("Edit padlocks" mode) */
.lock-edit { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--good) 22%, var(--card2)); color: var(--ink); border: 1.5px dashed var(--good); }
.lock-edit.on { background: color-mix(in srgb, var(--orange) 26%, var(--card2)); border-color: var(--orange); }
.lock-edit .lock-ic { width: 12px; height: 12px; }
/* v3.33: Edit padlocks — a free family's "First 4 / All lines" switch, and the plans in the padlock box */
.lock-full { display: inline-flex; align-items: center; margin-right: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
  background: var(--card2); color: var(--ink); border: 1.5px dashed var(--line); }
.lock-full.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 22%, var(--card2)); }
.lock-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.lock-plans .btn { min-height: 46px; font-weight: 800; }
#lock-overlay .resume-actions { grid-template-columns: 1fr; }
#lock-small { margin: 0 0 12px; }
.adm-free-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.adm-free-counts span { padding: 4px 10px; border-radius: 999px; background: var(--card2); font-size: 13px; }
.adm-free-counts span.full { background: color-mix(in srgb, var(--good) 22%, var(--card2)); }
.lock-card { text-align: center; }
.lock-big { width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.lock-big svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ------------------------------------------------------------------ v3.12 pages, account, admin */
.md-doc h3, .md-sec h3 { margin: 18px 0 8px; font-size: 17px; }
.md-doc .md-sec:first-child h3 { margin-top: 2px; }
.md-doc p, .md-doc li, .guide-sec li { line-height: 1.55; margin: 0 0 10px; color: var(--ink-soft); }
.md-doc ul, .guide-sec ul { padding-left: 20px; margin: 0 0 10px; }
.md-doc a, .guide-sec a, .footer-links a, .mem-note a, .auth-legal a { color: var(--accent); text-decoration: underline; }
.md-doc h4 { margin: 12px 0 6px; }
.md-table { overflow-x: auto; margin: 0 0 12px; }
.md-table table { border-collapse: collapse; min-width: 560px; font-size: 13.5px; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; line-height: 1.45; }
.md-table th { background: var(--card); }
.contact-intro { margin-bottom: 12px; }
.contact-intro p:last-child { margin-bottom: 0; }
.footer-links { margin-top: 6px; }
.acct-box { margin-bottom: 12px; }
.acct-line { margin-bottom: 10px; line-height: 1.5; }
.acct-box .btn-row { flex-wrap: wrap; }
.admin-tabs { margin: 4px 0 12px; flex-wrap: wrap; }
.adm-list { padding: 4px 12px; }
.adm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; }
.adm-row + .adm-row { border-top: 1px solid var(--line); }
.adm-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.adm-row small a { color: var(--accent); text-decoration: underline; }
.adm-row select { width: auto; margin: 0; }
#adm-text { width: 100%; min-height: 320px; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--well); color: var(--ink); resize: vertical; }
#adm-search { width: 100%; }
.adm-acct, .adm-msg { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.adm-acct { grid-template-columns: 1fr auto; align-items: center; }
.adm-acct .btn-row { margin: 0; }
.adm-msg-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-msg-h .btn { margin-left: auto; }
.adm-msg p { white-space: normal; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 560px) { .adm-row { grid-template-columns: 1fr auto; } .adm-row .btn { display: none; } .adm-acct { grid-template-columns: 1fr; } }
.guide-sec p + p, .guide-sec ul + p, .guide-sec p + ul { margin-top: 10px; }
.adm-h { font-size: 17px; margin: 18px 0 4px; }

/* ------------------------------------------------------------------ v3.13 bigger gold padlocks, Free labels */
.lock-badge { width: 38px; height: 38px; background: linear-gradient(145deg, #FFE066, #F5B700); border: 2px solid #fff; color: #3a2600; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.lock-badge .lock-ic { width: 22px; height: 22px; stroke-width: 2.4; }
.bot-card.locked { filter: none; opacity: 1; }
.bot-card.locked .bot-av, .bot-card.locked .bot-nm, .bot-card.locked .bot-elo { filter: grayscale(.85); opacity: .55; }
.bot-card.locked .lock-badge { background: linear-gradient(145deg, #FFE066, #F5B700); color: #3a2600; border-color: #fff; }
.fam.locked .fam-head, .item.locked { opacity: 1; }
.fam.locked .fam-head > div, .item.locked > div { opacity: .6; }
.fam.locked .badge, .item.locked .badge { color: #F5B700; }
.fam .badge .lock-ic, .item .badge .lock-ic { width: 26px; height: 26px; stroke-width: 2.4; color: #F5B700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.gm-game.locked .btn .lock-ic { color: #F5B700; width: 20px; height: 20px; }
.free-tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px;
  background: linear-gradient(145deg, #2EE59D, #00B36B); color: #fff; box-shadow: 0 2px 6px rgba(0, 179, 107, .45); }
.bot-card > .free-tag { position: absolute; top: 6px; left: 6px; margin: 0; z-index: 2; font-size: 12px; }
.bot-tier-free .bot-tier-label { background: linear-gradient(145deg, #2EE59D, #00B36B); color: #fff; }
/* v3.15 reminder-email consent */
.auth-optin { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.auth-optin input, #auth-form .auth-optin input { width: 20px; min-width: 20px; height: 20px; margin: 1px 0 0; padding: 0; flex: 0 0 20px; accent-color: var(--orange); }
.auth-optin span { flex: 1 1 auto; min-width: 0; }
.acct-optin { margin-top: 12px; }

/* v3.19: Admin → Mail */
.mail-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.mail-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.mail-top small { display: block; }
.mail-list { padding: 0; overflow: hidden; }
.mail-list > p { padding: 14px; }
.mail-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; }
.mail-row:first-child { border-top: 0; }
.mail-row:hover { background: rgba(127, 127, 127, .08); }
.mail-row .mail-who, .mail-row .mail-subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .mail-who small { display: block; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.mail-row .mail-subj b { font-weight: 600; }
.mail-row.unread .mail-who b, .mail-row.unread .mail-subj b { font-weight: 800; }
.mail-row.unread { box-shadow: inset 3px 0 0 var(--orange); }
.mail-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) {
  .mail-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mail-row .mail-subj { grid-column: 1 / -1; grid-row: 2; }
}
.mail-msg { display: grid; gap: 8px; }
.mail-msg.out { border-left: 3px solid var(--orange); }
.mail-msg-h { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.mail-html iframe { width: 100%; height: 440px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mail-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-reply { display: grid; gap: 8px; }
.mail-reply > label { font-size: 13px; font-weight: 700; color: var(--muted); }
.mail-reply input:not([type="checkbox"]), .mail-reply textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }
.mail-reply textarea { resize: vertical; min-height: 9em; line-height: 1.5; }
.mail-reply > label.mail-quote { display: flex; gap: 8px; align-items: center; justify-content: flex-start; font-weight: 600; color: var(--ink-soft); }
.mail-quote input { width: auto; margin: 0; flex: none; }

/* v3.20: stylesheet check — index.html looks for this value to know the styles arrived */
:root { --foxy-css: 1; }
.acct-pass { margin-top: 12px; }
.acct-pass summary { cursor: pointer; font-weight: 700; }
.acct-pass label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
.acct-pass input { width: 100%; max-width: 360px; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }
.acct-pass .btn-row { margin-top: 10px; }
.gm-more { margin-top: 8px; }
.gm-more > summary { cursor: pointer; font-weight: 700; padding: 10px 4px; color: var(--ink-soft); }

/* v3.22.1: the Classic Games avatar (a knight) */
.gm-knight { color: var(--orange); background: linear-gradient(160deg, var(--card2), var(--well)); }
.acct-refund { margin-top: 12px; padding: 12px; border: 1px dashed var(--edge); border-radius: 12px; }
.acct-refund p { margin: 0 0 8px; }

/* v3.23: Admin → Creators */
.cr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.cr-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cr-form input { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }
.cr-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.cr-row.off { opacity: .6; }
.cr-table { display: grid; gap: 2px; font-size: 13px; }
.cr-tr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 11rem 5rem 13rem; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.cr-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-st.payable { color: var(--good); font-weight: 700; } .cr-st.reversed, .cr-st.paid-refunded { color: var(--bad, #d55); }
@media (max-width: 700px) { .cr-tr { grid-template-columns: 1fr 1fr; } }
/* v3.40: creator earnings (Settings) and payout states (Admin) */
.cr-st.due { color: var(--good); font-weight: 700; } .cr-st.clearing { color: var(--accent); }
.ce { margin-top: 12px; }
.ce-h { margin: 16px 0 6px; font-size: 15px; }
.ce-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ce-tile { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ce-tile small { color: var(--muted); font-size: 12px; }
.ce-tile b { font-size: 20px; color: var(--ink); }
.ce-tile span { color: var(--muted); font-size: 11px; }
.ce-tile.due, .ce-tile.next { border-color: var(--orange); }
.ce-tile.due b, .ce-tile.next b { color: var(--orange); }
.ce-list { display: grid; gap: 0; font-size: 13px; }
.ce-list > div { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.ce-list > div > span { min-width: 0; }
.ce-pay > div.cancelled { opacity: .6; text-decoration: line-through; }
.ce-pay > div.due span:last-child, .ce-pay > div.clearing span:last-child { color: var(--good); }
.ce-more { margin-top: 8px; } .ce-more summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.fr-story-text p { margin: 0 0 10px; line-height: 1.55; }

/* v3.23.2: Admin → Accounts → Refund */
.rf-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.rf-row:first-child { border-top: 0; }
.rf-act { display: flex; gap: 8px; align-items: center; }
.rf-act input { width: 6.5rem; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }
.rf-cancel { margin-top: 12px; }

/* v3.23.1: line numbers past a free family's sample — the same gold padlock as a locked family */
.chip.chip-locked { position: relative; background: var(--card2); border-color: var(--line); }
.chip.chip-locked small { position: absolute; top: 2px; left: 5px; font-size: 10px; font-weight: 700; opacity: .6; }
.chip.chip-locked .lock-ic { width: 26px; height: 26px; stroke-width: 2.4; color: #F5B700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* v3.23.1: phones/tablets — the coach's "From here, let's play …" sits in the line bar, 5px larger */
@media (max-width: 1099.98px) {
  #view-play .line-family.coach-bar { font-size: calc(1em + 5px); white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}
/* v3.23.1: the line number sits just left of the ? (they overlapped) */
#view-play .line-bar { padding-right: 128px; }
#view-play .line-count { right: 46px; }
/* v3.23.1: keep the bar one height (room for two lines of coach text) so the board doesn't jump */
@media (max-width: 1099.98px) { #view-play .line-bar { min-height: 54px; } }

/* v3.23.1 phones, line screen: family title centred on the screen, line number top right in the title
   row, the bar holds the coach text and ?, and the status under the board is centred and 5px larger */
.play-linecount { display: none; }
@media (max-width: 640px) {
  body[data-mode="line"] #view-play .page-head { position: relative; justify-content: flex-start; align-items: center; }
  body[data-mode="line"] #view-play .page-head > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 170px); text-align: center; }
  body[data-mode="line"] #view-play .play-linecount:not([hidden]) { display: block; margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink-soft); }
  body[data-mode="line"] #view-play .line-count { display: none; }
  body[data-mode="line"] #view-play .line-bar { padding-right: 48px; }
  body[data-mode="line"] #view-play .status { text-align: center; font-size: 18px; min-height: 23px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  body[data-mode="line"] #view-play .status { font-size: 17px; min-height: 21px; }
  body[data-mode="line"] #view-play .play-linecount:not([hidden]) { font-size: 12.5px; }
}

/* v3.23.1 phones: Learn (arrows) / Practice (no arrows) switch under the board in a line */
#view-play .status.lm { display: flex !important; justify-content: center; white-space: normal; overflow: visible; margin-top: 6px; }
.lm-switch { display: inline-flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); }
.lm-switch button { min-width: 132px; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.lm-switch button b { font-size: 18px; font-weight: 800; }
.lm-switch button small { font-size: 12px; font-weight: 600; opacity: .8; margin-top: 2px; }
.lm-switch button.on { background: var(--orange); color: #1a1206; }
@media (max-width: 640px) and (max-height: 700px) {
  .lm-switch button { padding: 4px 12px; min-width: 120px; }
  .lm-switch button b { font-size: 17px; }
  .lm-switch button small { font-size: 11px; }
}

/* v3.23.1 phones/tablets: a finished line's message is centred in the bar (the pill is not used) */
@media (max-width: 1099.98px) {
  #view-play .line-status { display: none !important; }
  #view-play .line-family.done-msg { position: absolute; left: 44px; right: 44px; text-align: center; max-width: none; color: var(--good); }
  #view-play .line-family.done-msg.learned { color: var(--purple); }
}

/* v3.23.1 phones: a bigger board — the play screen uses the full screen width (the board runs
   almost edge to edge); the rows above and below keep a small side margin */
@media (max-width: 640px) {
  body[data-view="play"] .app { padding-left: 0; padding-right: 0; }
  body[data-view="play"] #view-play > *:not(.board-wrap):not(.line-bar) { padding-left: 10px; padding-right: 10px; }
  body[data-view="play"] #view-play .board-card > *:not(.board-holder) { margin-left: 10px; margin-right: 10px; }
  body[data-view="play"] #view-play .line-bar { margin-left: 10px; margin-right: 10px; }
  body[data-view="play"] #view-play .board-holder { width: 100%; }
  body[data-view="play"] #view-play .board { border-radius: 4px; }
  /* a little less height above and below the board, so tall phones fit the full width */
  body[data-mode="line"] #view-play .line-bar { min-height: 48px; }
  body[data-mode="line"] #view-play .status.lm { margin-top: 4px; }
  .lm-switch { padding: 3px; }
  .lm-switch button { padding: 4px 14px; }
}

/* v3.23.1 phones: the game-review comment box keeps one height (room for the longest comment) so the
   page doesn't jump as you step through the moves */
@media (max-width: 640px) {
  body.reviewing #view-play .rv-assess { height: 160px; min-height: 160px; overflow-y: auto; }
}

/* v3.23.1: review grades added (Strong replaces Sound; Brilliant, Missed opportunity, Missed win) and the key */
.g-strong { background: #2f82d8; }
.g-brilliant { background: #13a89e; }
.g-missed-opportunity { background: #7c5cd6; }
.g-missed-win { background: #b8357a; }
.rv-note { font-size: 15px; line-height: 1.35; }
.rv-key { margin-top: 8px; font-size: 13px; }
.rv-key summary { cursor: pointer; color: var(--muted); font-weight: 700; padding: 4px 0; }
.rv-key dl { display: grid; gap: 6px; margin: 6px 0 0; }
.rv-key dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; }
.rv-key dt span { display: inline-block; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.rv-key dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) { .rv-key dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* v3.23.1: keep page titles clear of the ? help button (e.g. "Paul Morphy" on the GM page) */
.page-head:has(> .guide-q) { position: relative; padding-right: 42px; }

/* v3.23.1 iPhone: text boxes at 16px+ so tapping one doesn't zoom the whole page in */
@media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } }

/* v3.23.1: loading message on the Grandmaster pages — centred, dark text on its light bar */
.gm-loading { text-align: center; color: #14233a; font-weight: 700; margin: 0; }

/* v3.23.1: home tiles — each icon is white on a Foxy-orange square */
.wb-grid .wb-tile { --tile-c: var(--orange); --tile-glow: color-mix(in srgb, var(--orange) 35%, transparent); }
.wb-grid .wb-tile > svg, .wb-grid .wb-tile > .tile-piece {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 7px; box-sizing: border-box; border-radius: 10px;
  color: #fff; stroke: #fff; background: var(--tile-c); box-shadow: 0 3px 8px var(--tile-glow); }
.wb-grid .wb-tile > svg.fill { fill: #fff; stroke: none; }
.wb-grid .wb-tile > svg path[fill] { fill: var(--tile-c); }   /* the Traps "!" cut-out */
.wb-grid .wb-tile { gap: 10px; }
@media (max-width: 380px) {
  .wb-grid .wb-tile > svg, .wb-grid .wb-tile > .tile-piece { width: 30px; height: 30px; flex-basis: 30px; padding: 6px; }
  .wb-grid .wb-tile { gap: 7px; }
}
@media (min-width: 900px) {
  .wb-grid .wb-tile > svg, .wb-grid .wb-tile > .tile-piece { width: 46px; height: 46px; flex-basis: 46px; padding: 10px; border-radius: 13px; }
}

/* v3.23.1: padlocks instead of "Members" text — the gold padlock everywhere */
.btn.lock-btn { padding: 4px 10px; min-width: 44px; justify-content: center; }
.btn.lock-btn .lock-ic { width: 22px; height: 22px; color: #F5B700; stroke-width: 2.4; }
.lock-edit { padding: 4px 6px; gap: 4px; }
.lock-edit .lock-ic { width: 20px; height: 20px; stroke-width: 2.4; color: var(--muted); }
.lock-edit.on .lock-ic { color: #F5B700; }
.lock-edit.has-text { padding-right: 10px; }
.item.gm-game.locked > .gm-btns { opacity: 1; }   /* the padlock stays bright on a greyed row */
.btn.lock-btn { background: rgba(245, 183, 0, .12); border-color: rgba(245, 183, 0, .55); }

/* v3.23.1: one gold padlock everywhere — no circle, pill or box around it, same size (26px; 22px on
   small chips and buttons) */
.lock-badge, .bot-card.locked .lock-badge, .bot-card .lock-badge {
  width: auto; height: auto; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none; color: #F5B700; }
.lock-badge .lock-ic { width: 26px; height: 26px; stroke-width: 2.4; color: #F5B700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.bot-card > .lock-badge { top: 8px; right: 8px; }
.fam.locked .badge, .item.locked .badge, .badge:has(> .lock-ic:only-child) { background: none; padding: 0; border: 0; box-shadow: none; }
.btn.lock-btn { background: none !important; border-color: transparent !important; box-shadow: none; padding: 2px 6px; min-width: 0; }
.btn.lock-btn .lock-ic { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.lock-edit, .lock-edit.on { background: none !important; border-color: transparent !important; box-shadow: none; padding: 2px; }
.lock-edit .lock-ic { width: 26px; height: 26px; }
.lock-edit.on .lock-ic { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* v3.23.1: the waiting panel fits Foxy's card (no wide empty panel), with a live status line */
.online-wait { width: fit-content; max-width: 100%; margin-inline: auto; justify-items: center; padding: 10px 10px 14px; }
.online-video-wrap { height: min(62vh, 560px); aspect-ratio: 360 / 496; max-width: 100%; }
.online-video-wrap video, .online-video-wrap img { object-fit: cover; }
.online-wait-copy { margin: 2px 8px 0; max-width: 34ch; }
.online-wait-status { margin: -6px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: #3d5670; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .online-wait { width: 100%; }
  .online-video-wrap { height: auto; width: 100%; max-height: 58vh; }
}
@media (min-width: 641px) { .online-video-wrap { height: min(52vh, 520px); } }

/* v3.23.1: behind the waiting panel — the Home hero's chessboard checks, fading out from the middle,
   with a soft orange glow, so the dark page around Foxy isn't empty */
#view-online { position: relative; isolation: isolate; }
#view-online:has(> #online-wait:not([hidden]))::before {
  content: ""; position: absolute; inset: 40px -60px -80px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(245, 130, 42, .16), transparent 55%),
    repeating-conic-gradient(rgba(74, 130, 208, .22) 0 25%, transparent 0 50%) 50% 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 25%, transparent 78%); }
@media (max-width: 640px) {
  #view-online:has(> #online-wait:not([hidden]))::before { inset: 30px -16px -40px; background-size: auto, 40px 40px; }
}

/* v3.23.1: Admin padlock switches on Home tiles use their own colours (gold = members, grey = free) —
   the tiles' white icon styling was painting them white */
.wb-tile .lock-edit .lock-ic, .wb-row .lock-edit .lock-ic, .wb-hub .lock-edit .lock-ic { stroke: currentColor; fill: none; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; background: none; box-shadow: none; }

/* v3.23.1 admin filming bar (only admin sees it) */
.admin-demo-bar { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 4px 0; }
.admin-demo-bar[hidden] { display: none; }
.admin-demo-bar span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 1100px) {
  .admin-demo-bar { position: fixed; top: 14px; right: 90px; z-index: 60; margin: 0; padding: 6px 10px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
}

/* v3.23.1: the game-review comment box keeps one height on every screen size (it already did on phones) */
@media (min-width: 641px) {
  body.reviewing #view-play .rv-assess { height: 184px; min-height: 184px; overflow-y: auto; }
}

/* v3.24: Home — Play online / Play bots / Training stacked at the top; the "whole board" section is
   six selling-point cards (Traps, Gambits, Openings, Tactics, Endgames, Grandmaster games) */
.hm-cta, .hm-cta[class] { grid-template-columns: minmax(0, 300px); grid-auto-flow: row; }
.hm-cta .btn { width: 100%; }
@media (min-width: 700px) { .hm-cta { grid-template-columns: minmax(0, 300px); } }
@media (min-width: 1100px) { .hm-cta { grid-template-columns: 300px; grid-auto-flow: row; } }
/* version B: selling-point cards */
.usp-grid { display: grid; gap: 10px; }
.usp { display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 14px; align-items: center; padding: 14px 14px 14px 12px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--edge); box-shadow: var(--edge-glow); }
.usp:hover { border-color: var(--orange); }
.usp-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--orange); box-shadow: 0 3px 8px color-mix(in srgb, var(--orange) 35%, transparent); display: grid; place-items: center; }
.usp-ico svg, .usp-ico img { width: 28px; height: 28px; color: #fff; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.usp-ico svg.fill { fill: #fff; stroke: none; }
.usp-ico svg path[fill] { fill: var(--orange); }
.usp-ico img { object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.usp-text b { display: block; font-size: 18px; letter-spacing: -.01em; }
.usp-text small { display: block; color: var(--ink-soft); font-size: 14px; line-height: 1.4; margin-top: 3px; opacity: .92; }
.usp i { font-style: normal; color: var(--muted); font-size: 22px; }
@media (min-width: 700px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .usp-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .usp { grid-template-columns: 64px minmax(0, 1fr) 14px; min-height: 130px; padding: 20px 22px 20px 18px; gap: 18px; }
  .usp-ico { width: 64px; height: 64px; border-radius: 16px; }
  .usp-ico svg, .usp-ico img { width: 36px; height: 36px; }
  .usp-text b { font-size: 22px; }
  .usp-text small { font-size: 16px; }
}

/* v3.27: game review — "See what happens" / "See the better move", and room for the longer notes */
.rv-shows { margin-top: 8px; gap: 6px; }
.rv-shows .btn { font-size: 13px; padding: 6px 12px; border-color: var(--edge); }
.rv-shows .btn:disabled { opacity: .5; }
@media (max-width: 640px) { body.reviewing #view-play .rv-assess { height: 210px; min-height: 210px; } }
@media (min-width: 641px) { body.reviewing #view-play .rv-assess { height: 230px; min-height: 230px; } }

/* v3.26 Admin → Mail-outs */
.cr-form select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card2); color: var(--ink); }

/* v3.26: the lip-synced waiting clip sits exactly over the typing loop (.online-video-wrap already
   positions its children), so swapping between them doesn't move or resize anything. */
.online-video-wrap #online-video-say { z-index: 1; }

/* v3.27 — sign-in without passwords: Apple / Google buttons, "or", the 6-digit code, devices, Admin → Sign-ins */
.auth-providers { display: grid; gap: 10px; margin: 12px 0 4px; }
.btn-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.btn-provider svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-provider.apple { background: #000; color: #fff; }
.btn-provider.google { background: #fff; color: #1f1f1f; border-color: #747775; }
.btn-provider:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 6px 0 2px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#auth-form label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
#auth-form label.auth-optin { color: var(--ink); font-weight: 400; font-size: 14px; }
#auth-form input:not([type="checkbox"]) { box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge, var(--line)); background: var(--card2); color: var(--ink); }
#auth-form input.auth-code { font-size: 26px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.auth-sent { margin: 12px 0 0; line-height: 1.45; }
.auth-btns { flex-wrap: wrap; margin-top: 12px; }
.auth-btns #auth-submit { flex: 1 1 100%; }
.acct-devices { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.acct-devices li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.acct-devices .chip, .adm-flag-chip { display: inline-block; height: auto; min-width: 0; padding: 2px 8px; font-size: 11px; vertical-align: middle; }
.adm-si-setup { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.adm-si-setup li { margin-bottom: 8px; overflow-wrap: anywhere; }
.adm-si-setup code { font-size: 12px; background: var(--card2); padding: 1px 5px; border-radius: 6px; }
.adm-si-setup .good { color: #3fbf6f; font-weight: 700; }
.adm-flag { box-shadow: inset 3px 0 0 var(--orange); padding-left: 10px; }
.adm-flag-chip { border-color: var(--orange); color: var(--orange); }
.adm-si-more { grid-column: 1 / -1; }
.adm-si-ev { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
#auth-code-step .auth-links { margin: 10px 0 12px; }
.adm-bad { color: var(--orange); font-weight: 700; }
.mem-small { font-size: 13px; color: var(--muted); margin: 0; }
.adm-pr-form h4 { margin: 16px 0 6px; }
.adm-pr-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.adm-pr-row label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); flex: 1 1 160px; }
.adm-pr-row input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
/* v3.50: Admin → Padlocks → View the site as (Admin / Member / Free user) */
.adm-view { display: grid; gap: 8px; padding: 10px 0 4px; }
.adm-view > div:first-child { display: grid; gap: 2px; }
.adm-view small { color: var(--muted); font-weight: 400; }
.adm-view-btns { display: flex; flex-wrap: wrap; gap: 6px; }
/* v3.49: the preview login's name box with its fixed @foxychess.com */
.pv-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pv-name-wrap input { flex: 1 1 80px; min-width: 0; }
.pv-domain { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* v3.30 clubs */
.club-card p { line-height: 1.55; margin: 0 0 12px; }
.club-card p:last-child { margin-bottom: 0; }
.club-card .btn-row { margin: 14px 0; }
.good-note { color: #3fbf6f; font-weight: 700; }
.acct-club code { font-size: 12px; overflow-wrap: anywhere; background: var(--card2); padding: 1px 5px; border-radius: 6px; }
.adm-off { opacity: .65; }

/* v3.31: schools — pupil sign-in, teacher page, invitations and printed login cards */
.school-form { display: grid; gap: 6px; max-width: 360px; }
.school-form label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.school-form input { font: inherit; font-size: 22px; letter-spacing: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); text-transform: uppercase; }
#view-teacher .panel { margin-bottom: 14px; }
#view-teacher textarea, .adm-pr-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
#view-teacher select, .adm-pr-row select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
.adm-pr-form > label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); margin: 8px 0; }
.adm-pr-form > label input { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
.adm-inv-table { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; }
.adm-inv-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-inv-table th, .adm-inv-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); word-break: break-word; }
.t-cardlist { margin: 6px 0; padding-left: 18px; line-height: 1.8; }
.t-cardlist code, .t-pupils code { font-size: 15px; letter-spacing: 1px; }
#print-cards { display: none; }
@media print {
  body.printing-cards > *:not(#print-cards) { display: none !important; }
  body.printing-cards #print-cards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6mm; padding: 0; background: #fff; }
  .p-card { border: 1px dashed #777; border-radius: 4mm; padding: 5mm; color: #000; font-family: Arial, Helvetica, sans-serif; break-inside: avoid; page-break-inside: avoid; }
  .p-head { font-size: 10pt; color: #444; }
  .p-name { font-size: 18pt; font-weight: bold; margin: 2mm 0 3mm; }
  .p-row { font-size: 12pt; margin: 1.5mm 0; }
  .p-code { font-size: 16pt; letter-spacing: 2px; font-family: "Courier New", monospace; }
  .p-foot { font-size: 9pt; color: #555; margin-top: 3mm; }
}
.adm-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.adm-tag-wait { color: #d9a441; border-color: #d9a441; }
.school-form input::placeholder { text-transform: none; letter-spacing: 1px; font-size: 16px; }

/* v3.32: teacher's controls */
.t-modes { display: grid; gap: 8px; }
.t-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.t-mode.on { border-color: var(--accent); }
.t-mode small { display: block; color: var(--muted); }
.t-mode input { margin-top: 4px; }
.t-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.t-secs label { display: flex; gap: 8px; align-items: center; font-size: 15px; padding: 4px 0; }
.ft-classplan { background: var(--card2); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.ft-locked .ft-master, .ft-locked .ft-sec, .ft-locked .ft-rows, .ft-locked .ft-note, .ft-locked .ft-famlink, .ft-locked .ft-actions { display: none; }
.pupil-off { display: none !important; }
.t-mode input, .t-secs input { width: auto !important; flex: none; margin: 0; min-height: 0; padding: 0; }
.t-mode span, .t-secs label { text-align: left; flex: 1; }
.t-secs label { justify-content: flex-start; }

/* v3.34: Home — "All free at FoxyChess" card, in the Foxy colours (orange accent on the dark card) */
.hm-keep { display: block; margin: 18px 0; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid #2d5aa8;   /* the same blue border and glow as the other Home cards */
  box-shadow: 0 0 0 1px rgba(90,150,240,.10), 0 8px 22px rgba(20,60,140,.22); }
.hm-keep[hidden] { display: none; }
.hm-keep b { display: block; font-size: 20px; }
.hm-keep-sub { display: block; font-size: 14px; margin: 4px 0 12px; }
.hm-keep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-keep-chips span { padding: 6px 13px; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 700; font-size: 14px; }   /* orange pills, like "Play Foxy" */
.hm-keep-more { display: block; margin-top: 12px; color: var(--orange); font-weight: 800; font-size: 14px; }

/* v3.34: one subtext colour across Home — the blue under the headline */
:root, [data-theme="dark"] { --home-sub: #8fb7ee; }
[data-theme="light"] { --home-sub: #2f5f9e; }
#view-home .hm-text p, #view-home .usp-text small, #view-home .wb-hub span,
#view-home .hm-keep-sub, #view-home .footer-note { color: var(--home-sub); opacity: 1; }
/* the headline panel and the Foxy card stay dark in both themes, so they always use the light blue */
#view-home .hm-copy .lead, #view-home .hm-foxy .hm-text p { color: #8fb7ee; opacity: 1; }
/* v3.34: the headline panel and the Foxy card are dark in both themes, so their headings are always white */
#view-home .hm-hero h2, #view-home .hm-foxy h3 { color: #fff; }
#view-home .hm-hero h2 em { color: var(--orange); }
[data-theme="light"] #view-home .hm-divider span { color: var(--home-sub); }   /* "Calculate · Improve · Win" readable in light mode */

/* v3.40.1: a creator tool open in Settings shows on its own — nothing else from Settings around it */
.cr-back { display: none; }
#view-settings.cr-tool-open .cr-back { display: inline-flex; }
#view-settings.cr-tool-open > :not(#settings-account) { display: none !important; }
#view-settings.cr-tool-open #settings-account > :not(#acct-creator) { display: none !important; }
#view-settings.cr-tool-open #settings-account { border: 0; background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
#acct-creator [data-crtool].on { background: var(--orange); border-color: var(--orange); color: #fff; }
/* v3.40.2: creators see only their creator tools on the Settings page (other settings are at the bottom of Home) */
#view-settings.creator-only > :not(.page-head):not(#settings-account) { display: none !important; }
#view-settings.creator-only #settings-account > :not(#acct-creator) { display: none !important; }
#view-settings.creator-only .cr-back { display: none !important; }

/* v3.44: board cards — the six Home cards and every family on the Openings, Traps, Gambits, Tactics, Checkmates,
   Defend and Endgames screens. The small board is always in the standard blue (ocean) colours. */
.thumb { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 108px; height: 108px; flex: 0 0 108px; border-radius: 8px; overflow: hidden; border: 2px solid #17406a; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.35); background: #2f82d8; }
.thumb i { display: grid; place-items: center; }
.thumb i.lt { background: #f4fbff; } .thumb i.dk { background: #2f82d8; }
.thumb img { width: 92%; height: 92%; display: block; }
.thumb-slot { display: block; flex: 0 0 108px; width: 108px; height: 108px; }
.thumb-slot .thumb { width: 100%; height: 100%; }
.bcards { display: grid; gap: 10px; }
.bcard { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge) !important; box-shadow: var(--edge-glow); color: inherit; text-align: left; width: 100%; font-size: inherit; }
.bcard:hover { border-color: var(--orange) !important; }
.bc-text { flex: 1; min-width: 0; display: block; }
.bc-text > b, .bc-text h3 { display: block; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 3px; }
.bc-text small, .bc-sub { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: 0; opacity: .95; }
#view-home .bc-text small { color: var(--home-sub); opacity: 1; }
.bc-moves { font-size: 12.5px; color: var(--ink); opacity: .85; margin: 0 0 3px; font-variant-numeric: tabular-nums; }
.bc-meta { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.bc-go { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-style: normal; font-weight: 800; font-size: 13px; color: var(--orange); }
.bc-go b { font-size: 17px; line-height: 1; }
.fam.bc.open .fam-head { border-color: var(--orange) !important; }
.fam.locked .fam-head .thumb, .item.locked .thumb { opacity: .6; }
.bcard > .lock-edit, .bcard > .lock-badge { position: absolute; top: 8px; right: 8px; }
.bcard .badge { align-self: center; }
@media (min-width: 700px) {
  .bcards { grid-template-columns: repeat(2, 1fr); }
  .thumb, .thumb-slot { width: 128px; height: 128px; flex-basis: 128px; }
}
@media (min-width: 1100px) {
  .thumb, .thumb-slot { width: 150px; height: 150px; flex-basis: 150px; }
  .bc-text > b, .bc-text h3 { font-size: 20px; }
  .bc-text small, .bc-sub { font-size: 15px; }
  .bc-moves { font-size: 14px; }
  .bc-go { font-size: 15px; }
}

/* v3.44.1: the lines inside an open family — a card each with its own board (replaces the numbered chips) */
.lcards { display: grid; gap: 8px; padding: 10px; background: var(--well); border: 1px solid var(--orange); border-top: 0; border-radius: 0 0 14px 14px; }
.fam.open .band-pills + .lcards { border-radius: 0 0 14px 14px; }
.lcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); color: inherit; min-width: 0; }
.lcard:hover { border-color: var(--line-hi); }
.lcard .thumb { width: 72px; height: 72px; flex-basis: 72px; border-width: 1.5px; border-radius: 6px; box-shadow: none; }
.lcard .thumb img { width: 94%; height: 94%; }
.lc-text { flex: 1; min-width: 0; display: block; }
.lc-text b { display: block; font-size: 14.5px; line-height: 1.25; }
.lc-text small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lc-st { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--good); color: #fff; }
.lcard.learned { border-color: var(--good); } .lcard.learned .lc-st { font-size: 12px; font-weight: 800; padding: 3px 10px; }
.lcard.done { border-color: var(--accent); } .lcard.done .lc-st { background: var(--accent); color: #0b1220; }
/* v3.51: part-way through learning a line ("Learning 2/3", "Practice 1/3") */
.lcard.learning .lc-st, .lcard.practice .lc-st { background: var(--orange); color: #1a1206; }
.lcard.learning, .lcard.practice { border-color: var(--orange); }
/* v3.51: the family's badge — all of its lines learned, or some */
.fam-st { display: inline-block; margin: 3px 0 2px; font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--good); }
.fam-st.part { background: var(--orange); color: #1a1206; }
/* v3.51: "Line learned" across the board (confetti and fireworks come from FoxyCelebrate) */
.line-splash { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(239, 143, 47, .9), rgba(123, 74, 226, .9)); transition: opacity .4s; }
.line-splash.show { opacity: 1; }
.line-splash b { font-size: clamp(30px, 9vw, 60px); font-weight: 900; color: #fff; letter-spacing: -.01em; text-align: center; text-shadow: 0 4px 22px rgba(0, 0, 0, .45); transform: scale(.6); }
.line-splash.show b { animation: splash-pop .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes splash-pop { from { transform: scale(.6); } to { transform: scale(1); } }
.lcard.locked .lc-text, .lcard.stand-in .thumb { opacity: .55; }
.lcard .badge { background: none; padding: 0; margin-left: 4px; }
.lcard .badge .lock-ic { width: 24px; height: 24px; color: #F5B700; stroke-width: 2.4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.lc-more { grid-column: 1 / -1; justify-content: center; }
@media (min-width: 700px) { .lcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lcards { grid-template-columns: repeat(3, 1fr); } .lcard .thumb { width: 84px; height: 84px; flex-basis: 84px; } }

/* v3.45: more board colours (the frame matches each), and the little preview board in Settings */
.board.theme-wood .lt { background-color: #f0d9b5; } .board.theme-wood .dk { background-color: #b58863; }
.board.theme-green .lt { background-color: #eeeed2; } .board.theme-green .dk { background-color: #769656; }
.board.theme-slate .lt { background-color: #dee3e6; } .board.theme-slate .dk { background-color: #8ca2ad; }
.board.theme-wood { border-color: #5e4128; } .board.theme-green { border-color: #44603a; } .board.theme-slate { border-color: #4c5c66; }
.board.theme-forest { border-color: #3d5e3d; } .board.theme-rose { border-color: #5c2e45; } .board.theme-midnight { border-color: #0a1a30; }
.set-preview { margin: 8px 0 14px; }
.set-preview .thumb { width: 160px; height: 160px; flex-basis: 160px; }
.set-preview.theme-wood .thumb i.lt { background: #f0d9b5; } .set-preview.theme-wood .thumb i.dk { background: #b58863; } .set-preview.theme-wood .thumb { border-color: #5e4128; }
.set-preview.theme-green .thumb i.lt { background: #eeeed2; } .set-preview.theme-green .thumb i.dk { background: #769656; } .set-preview.theme-green .thumb { border-color: #44603a; }
.set-preview.theme-slate .thumb i.lt { background: #dee3e6; } .set-preview.theme-slate .thumb i.dk { background: #8ca2ad; } .set-preview.theme-slate .thumb { border-color: #4c5c66; }
.set-preview.theme-forest .thumb i.lt { background: #ead7a4; } .set-preview.theme-forest .thumb i.dk { background: #4a7a4a; } .set-preview.theme-forest .thumb { border-color: #3d5e3d; }
.set-preview.theme-midnight .thumb i.lt { background: #cbd5e1; } .set-preview.theme-midnight .thumb i.dk { background: #0f2744; } .set-preview.theme-midnight .thumb { border-color: #0a1a30; }
.set-preview.theme-rose .thumb i.lt { background: #f5d0d8; } .set-preview.theme-rose .thumb i.dk { background: #7a3b5a; } .set-preview.theme-rose .thumb { border-color: #5c2e45; }
/* v3.46: once a rating change is shown in your pill the two pills can be wider than the row — let them stack rather than cut the opponent's name short */
.meta-row { flex-wrap: wrap; }
.meta-row .pill:last-child { margin-left: auto; }

/* v3.48.1: the best move sits in a pill on the ▶ buttons' row ("Best: Be2" when there is no line to play) */
.rv-shows { align-items: center; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.review-screen { grid-template-columns: minmax(0, 1fr); }   /* the panel never grows wider than its column for a long row of counts */
.rv-head, .rv-summary { min-width: 0; }
.rv-bestpill { margin-left: auto; font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line-hi); white-space: nowrap; }
.rv-bestpill b { font-weight: 600; color: var(--muted); }

/* v3.48 phones: the game review on one screen, and the board keeps the size it had in the game.
   The game's own furniture round the board is swapped for the review's: the title bar, character row
   (or the online player strips and clocks) above the board give way to the text box — the move and its
   grade on one line, the note (bigger and bold; it scrolls only if it runs long) and a bottom row that
   stays put with ▶ See what happens · ▶ Best move · the best move in a pill. The move strip and toolbar
   under the board give way to "Game review · Move n of N" with Back to game, Start / Previous / Next /
   End, and the summary line with its coloured counts on one swipeable row. When a phone is too short
   for all of that, main.js trims in steps (rv-fit1: the counts go; rv-fit2: a tighter text box;
   rv-fit3: the summary line goes) rather than touch the board. The key is dropped on phones. */
@media (max-width: 640px) {
  body.rv-top #view-play .page-head, body.rv-top #view-play .foxy-row, body.rv-top #view-play .meta-row, body.rv-top #view-play .clock-row,
  body.rv-top #view-play .gm-flank, body.rv-top #view-play .line-bar { display: none !important; }
  body.rv-top.reviewing #view-play > .rv-assess { flex: 0 0 auto; height: 112px; min-height: 0; margin: 0 10px 4px; padding: 6px 10px 7px; overflow: hidden; display: flex; flex-direction: column; }
  body.rv-top #view-play .rv-assess .rv-top-line { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 24px; }
  body.rv-top #view-play .rv-assess .rv-move { display: block; font-size: 15px; margin: 0; white-space: nowrap; }
  body.rv-top #view-play .rv-assess .rv-grade { padding: 2px 9px; font-size: 12px; margin: 0; }
  body.rv-top #view-play .rv-assess .rv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 3px; }
  body.rv-top #view-play .rv-assess .rv-note { font-size: 15px; font-weight: 700; line-height: 1.25; }
  body.rv-top #view-play .rv-assess .rv-body p { font-size: 14px; line-height: 1.3; margin: 0; }
  body.rv-top #view-play .rv-assess .rv-body p.rv-evaluating { font-size: 16px; font-weight: 800; line-height: 1.3; }
  body.rv-top #view-play .rv-assess .rv-shows { flex: 0 0 auto; flex-wrap: nowrap; margin-top: 5px; gap: 6px; }
  body.rv-top #view-play .rv-assess .rv-shows .btn { font-size: 12.5px; padding: 5px 9px; white-space: nowrap; }
  body.rv-top #view-play .rv-assess .rv-bestpill { font-size: 13px; padding: 4px 10px; }
  body.rv-top.reviewing #view-play .review-screen { margin-top: auto; padding-top: 2px; gap: 4px; }   /* spare height on tall phones splits above the board and above the panel */
  body.rv-top #view-play .rv-head { gap: 8px; }
  body.rv-top #view-play .rv-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  body.rv-top #view-play .rv-head h2 { font-size: 16px; white-space: nowrap; }
  body.rv-top #view-play .rv-head p { font-size: 13px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.rv-top #view-play .rv-head .btn { padding: 6px 12px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
  body.rv-top #view-play #rv-progress { display: none; }
  body.rv-top.reviewing #view-play .rv-controls { position: static; padding: 0; gap: 6px; }
  body.rv-top.reviewing #view-play .rv-controls .btn { min-height: 36px; padding: 4px; font-size: 14px; }
  body.rv-top #view-play .rv-summary { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 47px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  body.rv-top #view-play .rv-summary > b { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 4px; }
  body.rv-top #view-play .rv-summary .rv-acc { margin-right: 2px; gap: 4px; }
  body.rv-top #view-play .rv-summary .rv-acc b { font-size: 26px; }
  body.rv-top #view-play .rv-summary .rv-acc span { font-size: 11px; }
  body.rv-top #view-play .rv-summary .rv-chips { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-right: 10px; }
  body.rv-top #view-play .rv-summary .rv-chips::-webkit-scrollbar { display: none; }
  body.rv-top #view-play .rv-summary .rv-chips span { flex: 0 0 auto; font-size: 11.5px; padding: 3px 8px; }
  body.rv-top #view-play .rv-summary .rv-wait { color: var(--muted); font-size: 13px; font-weight: 600; padding: 0; background: none; }
  body.rv-top #view-play .rv-key { display: none; }
  /* the trim steps (main.js adds these only when the screen is too short for everything) */
  body.rv-fit1 #view-play .rv-summary .rv-chips { display: none; }
  body.rv-fit1 #view-play .rv-summary { min-height: 30px; }
  body.rv-fit1 #view-play .rv-summary .rv-acc b { font-size: 22px; }
  body.rv-fit1 #view-play .rv-summary > b { margin-bottom: 0; }
  body.rv-fit2.rv-top.reviewing #view-play > .rv-assess { height: 100px; padding: 4px 9px 5px; margin-bottom: 3px; }
  body.rv-fit2 #view-play .rv-assess .rv-top-line { min-height: 22px; }
  body.rv-fit2 #view-play .rv-assess .rv-body { margin-top: 2px; }
  body.rv-fit2 #view-play .rv-assess .rv-shows { margin-top: 4px; }
  body.rv-fit2 #view-play .rv-assess .rv-shows .btn { padding: 4px 8px; }
  body.rv-fit2.rv-top.reviewing #view-play .rv-controls .btn { min-height: 34px; padding: 4px; font-size: 13.5px; }
  body.rv-fit3 #view-play .rv-summary { display: none; }
  body.rv-fit3.rv-top.reviewing #view-play .review-screen { gap: 3px; padding-top: 0; }
  body.rv-fit3.rv-top.reviewing #view-play .rv-controls { padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
}
/* narrow phones: the ▶ buttons shrink a little so the best-move pill still fits on their row */
@media (max-width: 350px) {
  body.rv-top #view-play .rv-assess .rv-shows .btn { font-size: 11.5px; padding: 4px 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.rv-top #view-play .rv-assess .rv-bestpill { flex: 0 0 auto; font-size: 12px; padding: 4px 8px; }
}