@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: oklch(96.6% 0.008 250);
  --surface: oklch(99.3% 0.004 250);
  --surface-2: oklch(97.6% 0.007 250);
  --ink: oklch(24% 0.035 265);
  --ink-2: oklch(45% 0.03 262);
  --ink-3: oklch(58% 0.02 260);
  --line: oklch(92% 0.01 250);
  --line-2: oklch(86% 0.014 250);
  --board: oklch(96.8% 0.06 94);
  --board-edge: oklch(86% 0.15 88);
  --slot: oklch(99.4% 0.02 94);
  --slot-line: oklch(84% 0.11 88);
  --accent: oklch(52% 0.2 275);
  --accent-soft: oklch(95.5% 0.03 275);
  --ok: oklch(62% 0.15 162);
  --ok-d: oklch(48% 0.13 162);
  --ok-soft: oklch(96% 0.045 162);
  --ok-line: oklch(82% 0.1 162);
  --warn: oklch(70% 0.16 58);
  --warn-soft: oklch(96.5% 0.05 70);
  --warn-line: oklch(82% 0.12 65);
  --bad: oklch(58% 0.21 22);
  --tint: oklch(89% 0.13 90);
  --shadow: 0 1px 2px oklch(30% 0.03 260 / 0.06), 0 6px 18px oklch(30% 0.03 260 / 0.07);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.45; overscroll-behavior-y: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
body.big { font-size: 18px; letter-spacing: 0.03em; word-spacing: 0.1em; line-height: 1.65; }
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
h1, h2, h3, p { margin: 0; }
#app { min-height: 100dvh; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* paysage iPhone : encoche à gauche ou à droite */ }

/* en-tête */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.top-in { max-width: 1152px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.logo, .wordmark { font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.04em; line-height: 1; display: flex; }
.logo span:nth-child(1), .wordmark span:nth-child(1) { color: #f43f5e; } .logo span:nth-child(2), .wordmark span:nth-child(2) { color: #f59e0b; } .logo span:nth-child(3), .wordmark span:nth-child(3) { color: #10b981; }
.logo span:nth-child(4), .wordmark span:nth-child(4) { color: #0ea5e9; } .logo span:nth-child(5), .wordmark span:nth-child(5) { color: #6366f1; } .logo span:nth-child(6), .wordmark span:nth-child(6) { color: #f43f5e; } .logo span:nth-child(7), .wordmark span:nth-child(7) { color: #f59e0b; }
.edition { font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: oklch(95% 0.06 90); color: oklch(42% 0.09 70); border: 1px solid oklch(87% 0.1 90); white-space: nowrap; }
.top-ctl { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 2px 8px; min-height: 44px; }
.pick label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pick select { appearance: none; -webkit-appearance: none; background: none; border: 0; font-weight: 600; font-size: 0.92rem; padding: 8px 18px 8px 2px; min-height: 40px; max-width: 190px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.pick .sep { width: 1px; align-self: stretch; margin: 8px 2px; background: var(--line-2); }
.ibtn { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); flex: none; transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease); }
.ibtn:hover { background: var(--accent-soft); color: var(--accent); }
.ibtn:active { transform: scale(0.95); }
.ibtn svg { width: 22px; height: 22px; }
.ibtn[disabled] { opacity: 0.4; pointer-events: none; }
.ibtn.av { font-size: 1.4rem; }
.ibtn[aria-pressed="false"] { color: var(--ink-3); }

/* mise en page */
.shell { max-width: 1152px; margin: 0 auto; padding: 18px 16px 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cdetail, .chip-n { display: none; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 16px 18px; }
.head-card h1 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-row .pid-n { margin-left: auto; }
.badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.badge.b1 { background: oklch(94% 0.06 162); color: oklch(40% 0.11 162); } .badge.b2 { background: oklch(94% 0.04 245); color: oklch(42% 0.14 250); }
.badge.b3 { background: oklch(95% 0.06 70); color: oklch(45% 0.12 55); } .badge.b4 { background: oklch(94% 0.05 295); color: oklch(42% 0.15 295); } .badge.b5 { background: oklch(94% 0.05 10); color: oklch(45% 0.16 15); }
.badge.b6 { background: oklch(94% 0.05 295); color: oklch(42% 0.17 295); } .badge.b7 { background: oklch(94% 0.04 235); color: oklch(42% 0.13 240); }
.badge.diff { background: oklch(95% 0.01 250); color: var(--ink-2); } /* niveau de difficulté (bureau), à côté de la jauge */
.badge.done { background: var(--ok-soft); color: var(--ok-d); }
.head-card .desc { color: var(--ink-2); font-size: 0.92rem; margin-top: 4px; max-width: 65ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; font-weight: 600; font-size: 0.92rem; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); transition: background 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--line); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: oklch(98% 0.01 275); }
.btn.primary:hover { background: oklch(46% 0.2 275); }
.btn.go { background: var(--ok-d); border-color: oklch(38% 0.11 162); color: oklch(99% 0.01 162); font-family: var(--display); font-size: 1.1rem; font-weight: 600; min-height: 56px; border-radius: 18px; box-shadow: 0 4px 0 oklch(38% 0.11 162); }
.btn.go:hover { background: oklch(44% 0.13 162); }
.btn.go:active { transform: translateY(3px); box-shadow: 0 1px 0 oklch(38% 0.11 162); }
.btn.go[disabled] { background: var(--line-2); border-color: var(--line-2); box-shadow: 0 4px 0 oklch(80% 0.01 250); color: var(--ink-3); opacity: 1; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn.wide { width: 100%; }
.pid-n { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); padding: 3px 10px; border-radius: 99px; }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: oklch(80% 0.08 275); color: var(--accent); }
.toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: oklch(98% 0.01 265); padding: 10px 18px; border-radius: 14px; font-weight: 600; font-size: 0.9rem; z-index: 90; animation: fadein 0.2s var(--ease); max-width: 90vw; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; padding-bottom: 6px; }
.dots .lab { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.dot { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 700; font-size: 0.85rem; color: var(--ink-2); position: relative; transition: transform 0.15s var(--ease); }
.dot:hover { transform: translateY(-1px); }
.dot.done { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-d); }
.dot.cur { background: var(--accent); border-color: var(--accent); color: oklch(98% 0.01 275); }
.dot .st { position: absolute; left: 0; right: 0; bottom: -8px; font-size: 0.5rem; letter-spacing: 0.5px; color: oklch(68% 0.17 80); line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 3px; gap: 2px; }
.seg button { min-height: 44px; padding: 0 14px; border-radius: 11px; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px oklch(30% 0.03 260 / 0.15); }
.seg.wide { display: flex; width: 100%; flex: none; }
.seg.wide button { flex: 1; min-height: 48px; }
.fld-lab { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }

/* plateau */
.board-wrap { width: min(100%, 460px); margin: 0 auto; }
/* « bureau » = largeur ≥ 900 px ET paysage (bureau, tablette couchée) ; une tablette debout (1024×1366) garde la mise en page empilée, en grand */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) { .board-wrap { width: clamp(280px, calc(100dvh - 500px), 460px); } }
.board { --n: 3; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; padding: 14px; background: var(--board); border: 3px solid var(--board-edge); border-radius: 28px; box-shadow: 0 8px 24px oklch(70% 0.1 88 / 0.22); }
.cell { position: relative; aspect-ratio: 1; border-radius: 18px; background: var(--slot); border: 2px dashed var(--slot-line); transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease); }
/* coordonnée « ligne,colonne » : centrée dans la case, taille qui suit le nombre de cases (--n) */
.cell::before { content: attr(data-pos); position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(0.5rem, calc(1.6rem / var(--n, 3) + 0.25rem), 0.9rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; color: oklch(64% 0.07 88); pointer-events: none; }
.cell.filled { border-style: solid; border-color: oklch(90% 0.07 90); background: var(--surface); }
.cell.filled::before, .board.tiny .cell::before { opacity: 0; } /* repère masqué : case pleine, ou case de moins de 40 px (classe posée par l'app) */
/* zone de toucher d'une case : au moins 44 px, centrée (inset négatif quand la case est plus petite). Derrière toutes les cases
   du plateau (z-index -1 dans le contexte du plateau) : une case voisine garde la priorité sur sa propre surface. */
.board { isolation: isolate; }
.cell::after { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); z-index: -1; border-radius: inherit; }
.cell.over { background: oklch(94% 0.04 250); border-color: var(--accent); transform: scale(0.96); }
.cell.target { border-color: var(--ok); background: var(--ok-soft); animation: pulse 1s var(--ease) infinite; }
.cell.landed { border-color: var(--ok); background: var(--ok-soft); transition: background 1.4s var(--ease), border-color 1.4s var(--ease); }
@keyframes pulse { 50% { transform: scale(1.05); } }

.piece { width: 100%; height: 100%; padding: 8%; touch-action: none; cursor: grab; position: relative; transition: transform 0.15s var(--ease); }
.piece.sel::after, .piece.glow::after, .piece.glow-bad::after { content: ""; position: absolute; inset: 2%; border-radius: 50%; z-index: -1; pointer-events: none; }
.piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.cell .piece, .tile .piece { position: absolute; inset: 0; }
.cell .piece { animation: place 0.2s var(--ease); }
@keyframes place { from { transform: scale(0.8); opacity: 0.4; } }
.piece.sel { transform: scale(1.1); z-index: 3; }
.piece.sel::after { background: radial-gradient(circle, oklch(60% 0.2 275 / 0.55) 40%, transparent 72%); inset: -10%; }
.piece.glow { animation: glow 0.9s var(--ease) infinite; }
.piece.glow::after { background: radial-gradient(circle, oklch(65% 0.17 162 / 0.6) 40%, transparent 72%); inset: -10%; }
.piece.glow-bad::after { background: radial-gradient(circle, oklch(70% 0.16 58 / 0.65) 40%, transparent 72%); inset: -10%; }
@keyframes glow { 50% { transform: scale(1.14); } }
.piece.wrong { animation: wiggle 0.4s var(--ease) 2; }
@keyframes wiggle { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.piece.ghost { position: fixed; z-index: 99; pointer-events: none; width: 84px; height: 84px; transform: translate(-50%, -62%) scale(1.1) rotate(-5deg); }

.status { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 0.92rem; font-weight: 500; color: var(--ink-2); }
.status svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.status.warn { background: var(--warn-soft); border-color: var(--warn-line); color: oklch(38% 0.1 55); }
.status.warn svg { color: var(--warn); }
.status.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-d); }
.status.ok svg { color: var(--ok); }

.win { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; animation: rise 0.22s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.win h2 { font-family: var(--display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.win .stars { display: flex; gap: 8px; justify-content: center; }
.win .stars svg { width: 48px; height: 48px; color: oklch(78% 0.17 85); animation: starin 0.3s var(--ease) backwards; }
.win .stars svg:nth-child(2) { animation-delay: 0.1s; } .win .stars svg:nth-child(3) { animation-delay: 0.2s; }
.win .stars svg.off { color: var(--line-2); }
.win-sub { color: var(--ink-2); font-size: 0.9375rem; margin-top: -6px; }
.win-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.win-2 .btn2 { padding: 6px 10px; font-size: 0.9375rem; line-height: 1.2; text-align: center; }

/* réserve */
.stock { background: var(--surface-2); border: 2px dashed var(--line-2); border-radius: 22px; padding: 14px; transition: background 0.15s var(--ease); }
.stock.over { background: oklch(94% 0.04 250); }
.stock-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stock-h h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.pill { margin-left: auto; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--line); color: var(--ink-2); white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; justify-items: center; }
.tile { position: relative; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px oklch(30% 0.03 260 / 0.1), 0 3px 8px oklch(30% 0.03 260 / 0.08); }
.tile.empty { background: transparent; box-shadow: none; border: 2px dashed var(--line); }

/* indices */
.clues-h { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; }
.clues-h .ic { width: 40px; height: 40px; border-radius: 12px; background: oklch(95% 0.03 235); color: oklch(48% 0.14 240); display: grid; place-items: center; flex: none; }
.clues-h .ic svg { width: 22px; height: 22px; }
.clues-h h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.clues-h p { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; }
.clues-h .pill { background: oklch(94% 0.04 235); color: oklch(42% 0.13 240); font-weight: 700; margin-left: auto; }
.clues-h .ibtn { width: 44px; height: 44px; }
.crows { display: flex; flex-direction: column; gap: 10px; }
.crow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 10px 10px 10px 12px; box-shadow: var(--shadow); transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.crow[hidden] { display: none; }
.done-toggle { align-self: flex-start; min-height: 36px; padding: 0 14px; border-radius: 12px; border: 1px dashed oklch(78% 0.08 162); background: var(--ok-soft); color: var(--ok-d); font-weight: 600; font-size: 0.85rem; }
.done-toggle[hidden] { display: none; }
.done-toggle:hover { background: oklch(93% 0.06 162); }
.crow.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.crow.bad { background: var(--warn-soft); border-color: var(--warn-line); }
.crow.flash { animation: flash 0.8s var(--ease) 3; }
@keyframes flash { 50% { background: oklch(94% 0.05 250); border-color: var(--accent); } }
.crow-lab { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.crow-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--line); color: var(--ink-2); font-size: 0.68rem; letter-spacing: 0; }
.crow.ok .crow-n { background: var(--ok); color: oklch(99% 0.01 162); }
.crow.bad .crow-n { background: var(--warn); color: oklch(25% 0.05 55); }
.crow-txt { font-size: 0.9rem; color: var(--ink); margin-top: 3px; line-height: 1.35; }
body.notext .crow-txt { display: none; }
.crow-say { width: 44px; height: 44px; border-radius: 12px; color: var(--ink-3); display: grid; place-items: center; }
.crow-say:hover { background: var(--accent-soft); color: var(--accent); }
.crow-say svg { width: 20px; height: 20px; }

/* mini-grilles */
.mg { --cols: 3; --rows: 3; position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 2px; width: 84px; aspect-ratio: var(--cols) / var(--rows); background: var(--line-2); border: 3px solid var(--line-2); border-radius: 12px; flex: none; }
.mg.lg { width: 108px; }
.mg-c { background: var(--surface); border-radius: 3px; }
.mg-c.on { background: var(--tint); }
.mg.neg .mg-c.on { background: oklch(88% 0.08 20); }
.mg .piece.mg-p { position: absolute; transform: translate(-50%, -50%); padding: 0; cursor: default; animation: none; inset: auto; }
.mg-glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px oklch(30% 0.03 260 / 0.3); display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; color: var(--accent); z-index: 2; line-height: 1; }
.mg-x { position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--bad); color: oklch(99% 0.01 20); display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; box-shadow: 0 1px 3px oklch(30% 0.1 20 / 0.4); z-index: 3; }

.guide { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; font-size: 0.85rem; color: var(--ink-2); }
.guide summary { font-weight: 700; color: var(--ink); cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.guide svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.guide ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.guide b { color: var(--ink); }

/* fenêtres */
@keyframes fadein { from { opacity: 0; } }
.field { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 1.1rem; font-weight: 600; -webkit-user-select: text; user-select: text; }
.field:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatars button { min-height: 44px; }
.avatars button { aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); font-size: 1.6rem; display: grid; place-items: center; }
.avatars button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.rules { display: grid; gap: 10px; counter-reset: r; margin: 0; padding: 0; list-style: none; }
.rules li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; counter-increment: r; font-size: 0.95rem; color: var(--ink); }
.rules li::before { content: counter(r); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: oklch(98% 0.01 275); display: grid; place-items: center; font-weight: 700; }
/* espace parents */
.pview { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.pview-h { display: flex; align-items: center; gap: 12px; }
.pview-h h1 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tab { flex: none; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: oklch(98% 0.01 275); }
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; font-weight: 500; text-align: left; }
.toggle .sw { margin-left: auto; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--line-2); position: relative; transition: background 0.2s var(--ease); }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); transition: transform 0.2s var(--ease); box-shadow: 0 1px 3px oklch(30% 0.03 260 / 0.3); }
.toggle[aria-checked="true"] .sw { background: var(--ok); } .toggle[aria-checked="true"] .sw::after { transform: translateX(20px); }
.stack { display: grid; gap: 10px; }
.who { display: flex; align-items: center; gap: 12px; }
.who .a { font-size: 1.8rem; }
table.prog { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 8px; }
table.prog td { padding: 8px 6px; border-top: 1px solid var(--line); } table.prog td:not(:first-child) { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); font-size: 0.85rem; }

.lbl-short { display: none; }
/* ---------- écran de jeu : épuré (Pause en haut, Indice en bas, le puzzle au centre) ---------- */
.gt-title { display: none; }
.pause-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 16px; margin-left: auto; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 0.92rem; flex: none; transition: background 0.15s var(--ease), transform 0.15s var(--ease); }
.pause-b svg { width: 22px; height: 22px; flex: none; }
.pause-b:active { transform: scale(0.96); background: var(--line); }
@media (hover: hover) and (pointer: fine) { .pause-b:hover { background: var(--accent-soft); color: var(--accent); } }

.dock { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.dock[hidden] { display: none; }
.hint-b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; min-width: 176px; padding: 0 24px; border-radius: 18px; background: oklch(87% 0.15 88); border: 1px solid oklch(74% 0.14 80); color: oklch(27% 0.06 65); font-family: var(--display); font-weight: 600; font-size: 1.1rem; box-shadow: 0 3px 0 oklch(70% 0.14 78); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease); }
.hint-b svg { width: 24px; height: 24px; flex: none; }
.hint-b:active { transform: translateY(3px); box-shadow: 0 0 0 oklch(70% 0.14 78); }
@media (hover: hover) and (pointer: fine) { .hint-b:hover { background: oklch(84% 0.16 88); } }
.dock .btn.go { flex: 1; min-width: 0; }
.undo-b { display: inline-grid; place-items: center; flex: none; width: 56px; min-height: 56px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink-2); transition: transform 0.15s var(--ease), opacity 0.15s var(--ease); }
.undo-b svg { width: 24px; height: 24px; }
.undo-b:active { transform: scale(0.95); }
.undo-b[disabled] { opacity: 0.4; pointer-events: none; }
.dock.full .hint-b { min-width: 56px; width: 56px; padding: 0; }
.dock.full .hint-l { display: none; }
@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
  .tile { max-width: 64px; border-radius: 16px; }
  .dock { position: sticky; bottom: 16px; z-index: 5; align-items: center; justify-content: flex-start; padding: 8px; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
  .dock .undo-b { order: 2; }
  .dock .hint-b { min-width: 0; padding: 0 20px; order: 3; }
  .dock .btn.go { order: 4; flex: 0 1 220px; }
  .dock .status { flex: 1; order: 1; }
  .dock .status:not(.warn):not(.ok) { background: none; border-color: transparent; }
}

body.adult .hint-b { font-family: var(--text); font-weight: 700; }

/* ---------- vocabulaire commun des menus : bouton principal, secondaire, lignes groupées, interrupteurs ---------- */
.cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 20px; border-radius: 20px; background: var(--accent); border: 1px solid oklch(44% 0.2 275); color: oklch(98% 0.01 275); font-family: var(--display); box-shadow: 0 4px 0 oklch(40% 0.2 275); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); flex: none; }
.cta svg { width: 26px; height: 26px; flex: none; }
.cta-t { display: flex; flex-direction: column; align-items: flex-start; text-align: start; line-height: 1.15; min-width: 0; }
.cta-t b { font-weight: 600; font-size: 1.375rem; }
.cta-t small { font-family: var(--text); font-size: 0.875rem; font-weight: 500; opacity: 0.92; margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta:active { transform: translateY(4px); box-shadow: 0 0 0 oklch(40% 0.2 275); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: oklch(48% 0.2 275); } }
body.adult .cta { font-family: var(--text); }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 1rem; transition: background 0.15s var(--ease), transform 0.15s var(--ease); }
.btn2 svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.btn2:active { transform: scale(0.98); background: var(--line); }
@media (hover: hover) and (pointer: fine) { .btn2:hover { background: var(--accent-soft); } }
.glab { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin: 8px 4px -4px; }
.group { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; flex: none; }
.row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 16px; text-align: start; font-weight: 500; font-size: 1rem; color: var(--ink); position: relative; transition: background 0.15s var(--ease); }
.row + .row { border-top: 1px solid var(--line); }
.row > svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.row > svg:last-child:not(:first-child) { width: 18px; height: 18px; color: var(--ink-3); }
.row:active { background: var(--line); }
@media (hover: hover) and (pointer: fine) { .row:hover { background: oklch(95% 0.015 275); } }
.row[disabled] { opacity: 0.45; pointer-events: none; }
.row-l { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.row-l small { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.row-v { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; flex: none; font-variant-numeric: tabular-nums; }
.row-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.row[aria-current="true"] > svg:last-child { color: var(--ok-d); }
.row .sw, .toggle .sw { margin-left: auto; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--line-2); position: relative; transition: background 0.2s var(--ease); }
.row .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); transition: transform 0.2s var(--ease); box-shadow: 0 1px 3px oklch(30% 0.03 260 / 0.3); }
.row[aria-checked="true"] .sw { background: var(--ok-d); } .row[aria-checked="true"] .sw::after { transform: translateX(20px); }
html[dir="rtl"] .row > svg:last-child:not(:first-child), html[dir="rtl"] .sheet-back svg, html[dir="rtl"] .btn2.solid svg { transform: scaleX(-1); }
.ovl-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; background: none; }
.row:has(.ovl-sel:focus-visible), .lang-b:has(.ovl-sel:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.hint { color: var(--ink-2); font-size: 0.9375rem; max-width: 65ch; }
.hint.strong { color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.msg { min-height: 1.4em; color: oklch(48% 0.16 25); font-size: 0.9375rem; font-weight: 500; }
.id-in { text-align: center; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.id-n { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* ---------- feuille du bas : Pause, réglages, profils, numéro de défi ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 70; background: oklch(25% 0.04 265 / 0.5); display: flex; align-items: flex-end; justify-content: center; animation: fadein 0.2s var(--ease); transition: opacity 0.18s var(--ease); }
.sheet-bg.out { opacity: 0; }
.sheet { width: min(100%, 520px); max-height: min(92dvh, 760px); background: var(--surface); border-radius: 28px 28px 0 0; display: flex; flex-direction: column; box-shadow: 0 -12px 48px oklch(25% 0.05 265 / 0.28); animation: sheetin 0.26s cubic-bezier(0.32, 0.72, 0, 1); transition: transform 0.18s var(--ease); outline: none; }
@keyframes sheetin { from { transform: translateY(100%); } }
.sheet[data-view="levels"], .sheet[data-view="settings"], .sheet[data-view="profiles"] { height: min(92dvh, 760px); }
.sheet-top { flex: none; padding: 8px 16px 0; touch-action: none; }
.sheet-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 4px; }
.sheet-head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-bottom: 8px; }
.s-ttl { flex: 1; min-width: 0; }
.s-ttl h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.s-ttl p { font-size: 0.875rem; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-x, .sheet-back, .sheet-share { border: 0; background: var(--surface-2); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sheet-body .sheet-alt { width: 100%; } /* confirmation : action secondaire (quitter, recommencer) sous « Continuer la partie » */
.sheet-body > .hint { padding: 4px 4px 0; }
body.adult .s-ttl h2 { font-family: var(--text); font-weight: 700; }
.rules li::before { flex: none; }
@media (min-width: 900px) {
  .sheet-bg { align-items: center; padding: 24px; }
  .sheet { border-radius: 28px; width: 480px; max-height: min(86dvh, 720px); animation: sheetfade 0.2s var(--ease); box-shadow: 0 20px 60px oklch(25% 0.05 265 / 0.35); }
  .sheet[data-view="levels"], .sheet[data-view="settings"], .sheet[data-view="profiles"] { height: min(86dvh, 720px); }
  .sheet-bg.out .sheet { opacity: 0; transform: scale(0.97) !important; }
  .sheet-grab { display: none; }
  @keyframes sheetfade { from { opacity: 0; transform: scale(0.97); } }
}

.lbl-short { display: none; }
/* mise en page empilée : téléphone (toute orientation) et tablette debout ; le téléphone couché la réarrange en deux colonnes plus bas */
@media (max-width: 899px), (orientation: portrait), (max-height: 520px) {
  html, body { overscroll-behavior: none; }
  body.in-game #app { padding-bottom: 0; }
  .game-root { height: var(--H, 100vh); display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--ad-h, 0px); /* place réservée à la bannière (app adulte) */ }
  .top { position: static; flex: none; }
  .top-in { padding: 8px 12px; gap: 12px; flex-wrap: nowrap; }
  .logo, .edition { display: none; }
  .pause-b { order: -1; margin-left: 0; padding: 0; width: 48px; }
  .pause-l { display: none; }
  /* titre discret : jamais plus d'une ligne chacun */
  .gt-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .gt-txt { flex: 1; min-width: 0; }
  .gt-title h1 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gt-title p { font-size: 0.78rem; color: var(--ink-2); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gt-side { display: flex; align-items: center; gap: 8px; flex: none; }
  .gt-stars { font-size: 0.8rem; letter-spacing: 1px; color: oklch(48% 0.12 75); }
  .gauge { height: 16px; }

  .shell { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 8px 12px 8px; gap: 8px; max-width: none; width: 100%; overflow: hidden; }
  .col { gap: 8px; }
  .col:not(.right) { flex: 1 0 auto; display: flex; flex-direction: column; } /* ne rétrécit jamais sous plateau mini + réserve : ce sont les indices qui défilent */
  .col.right { flex: 0 1 auto; min-height: 0; }
  .shell > *, .col { min-width: 0; max-width: 100%; }
  .head-card { display: none; }

  /* le plateau est le héros : il prend tout ce que les autres blocs ne prennent pas */
  /* le plateau prend tout l'espace laissé par la réserve et les indices (container query) ; il grandit quand des indices disparaissent */
  .board-wrap { width: 100%; max-width: 440px; margin: 0 auto; flex: 1 1 0; min-height: 150px; container-type: size; display: grid; place-items: center; }
  .board-wrap > .board { width: min(100cqw, 100cqh); }
  .board { padding: 10px; gap: 6px; border-radius: 22px; border-width: 2px; }
  .cell { border-radius: 14px; }

  .stock { padding: 8px; border-radius: 18px; border-width: 1.5px; }
  .stock-h { display: none; }
  /* pièces de 44 à 56 px (bornes lues par l'app : --tile-min / --tile-max) ; colonnes et taille (--cols, --tile) posées par l'app (layoutStock) ;
     si tout ne tient pas : des rangées qui défilent horizontalement */
  .tiles { --tile-min: 44px; --tile-max: 56px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(var(--tile-min), var(--tile, var(--tile-max)))); gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto; }
  .stock.scroll .tiles { overflow-x: auto; overflow-y: hidden; padding: 5px 5px 7px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .stock.scroll .tile { scroll-snap-align: start; }
  .tile { width: 100%; max-width: none; border-radius: 12px; }

  .status { min-height: 40px; padding: 4px 12px; font-size: 0.8rem; border-radius: 14px; line-height: 1.25; gap: 8px; }
  .status svg { width: 18px; height: 18px; }
  .status > span:last-child { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .dock { flex: none; position: relative; z-index: 2; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .dock .btn.go { height: 56px; font-size: 1.05rem; border-radius: 18px; }
  .lbl-long { display: none; } .lbl-short { display: inline; }
  .win { position: fixed; left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; box-shadow: 0 12px 40px oklch(25% 0.05 265 / 0.3); padding: 16px 14px 14px; gap: 10px; }
  .win .stars svg { width: 40px; height: 40px; }

  /* indices : détail dans l'en-tête + grille de pastilles visuelles (défilement vertical) */
  .clues-h { padding: 0; gap: 8px; cursor: pointer; position: relative; padding-top: 6px; }
  .clues-h .ic, .clues-h > .ibtn:not(.crow-say), .clues-h p, .clues-h h2 { display: none; }
  .clues-h .ch-main { flex: 1; min-width: 0; }
  .clues-h { min-width: 0; }
  .clues-h .cdetail > .cd-main { flex: 1 1 0; }
  .clues-h .cdetail { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .clues-h .crow-say { width: 44px; height: 44px; }
  .grab { position: absolute; top: -2px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-2); }
  .cd-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .clues-h .pill, .cd-lab { display: none; }
  .cd-top { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); }
  .cd-txt { font-family: var(--display); font-size: clamp(0.82rem, 4.1vw, 1rem); font-weight: 600; line-height: 1.2; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .cscroll { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; flex: 0 1 auto; min-height: 0; padding: 11px 8px 3px 8px; }
  .crows { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 12px 6px; }
  .crow { position: relative; display: flex; justify-content: center; align-items: center; padding: 10px 4px 6px; border-radius: 14px; min-height: 68px; cursor: pointer; box-shadow: none; }
  .crow > div:not(.mg), .crow .crow-say { display: none; }
  .crow .mg, .crow .mg.lg { width: 56px; }
  .chip-n { display: grid; place-items: center; position: absolute; left: -5px; top: -9px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--line); color: var(--ink-2); font-size: 0.62rem; font-weight: 700; z-index: 4; }
  .crow.ok .chip-n { background: var(--ok); color: oklch(99% 0.01 162); }
  .crow.bad .chip-n { background: var(--warn); color: oklch(25% 0.05 55); }
  .crow.act { outline: 3px solid var(--accent); outline-offset: -3px; }
  .crows.dense { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px 5px; }
  .crows.dense .crow { min-height: 52px; padding: 8px 2px 4px; border-radius: 12px; }
  .crows.dense .crow .mg { width: 40px !important; }
  .crows.dense .chip-n { min-width: 15px; height: 15px; left: -4px; top: -7px; font-size: 0.55rem; }
  .crows.focus .crow.rel { order: -1; border-color: var(--accent); }
  .crows.focus .crow:not(.rel) { opacity: 0.4; }
  .done-toggle { align-self: flex-start; }
  .col.right.exp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(var(--H, 100vh) * 0.7); background: var(--bg, #fff); border-radius: 22px 22px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px oklch(25% 0.05 265 / 0.3); }
  .col.right.exp .cscroll { flex: 1; min-height: 0; max-height: none; }
  .cd-txt.wrap, .col.right.exp .cd-txt { white-space: normal; text-overflow: clip; font-size: 0.9rem; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .col.right.exp .cd-txt { -webkit-line-clamp: unset; }
  .guide { display: none; }
}

@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) { .grab { display: none; } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }

/* impression */
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; font-size: 12pt; }
  #app, #confetti, .modal-bg { display: none !important; }
  #print-root { display: block !important; }
  .sheet { break-after: page; } .sheet:last-child { break-after: auto; }
  .sheet h2 { font-family: var(--display); font-size: 20pt; margin-bottom: 4mm; } .sheet .nm { margin-bottom: 6mm; }
  .p-grid { display: grid; gap: 3mm; margin: 4mm 0 8mm; width: 78mm; }
  .p-cell { aspect-ratio: 1; border: 1.2mm solid #000; border-radius: 3mm; }
  .p-clues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm 6mm; }
  .p-clues .crow { box-shadow: none; border: 0.5mm solid #000; background: #fff; break-inside: avoid; padding: 2mm; gap: 3mm; grid-template-columns: auto 1fr; }
  .p-clues .crow-txt { display: block !important; color: #000; font-size: 9.5pt; margin: 0; } .p-clues .crow-lab { display: none; }
  .p-clues .mg { width: 18mm; border-color: #666; background: #666; }
  .p-clues .mg-c { background: #fff; } .p-clues .mg-c.on { background: #999; }
  .cut { display: grid; gap: 4mm; } .cut .piece { width: 100%; filter: none; border: 0.3mm dashed #666; padding: 2mm; position: relative; }
  .p-solwrap { display: flex; flex-wrap: wrap; gap: 8mm; } .p-sol { display: grid; gap: 1.5mm; width: 40mm; } .p-sol .piece { padding: 1mm; filter: none; position: relative; }
  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- vie : écran d'accueil, décors, jauge, mode enfant / adulte ---------- */
.btn[hidden], .btn.go[hidden] { display: none; }

#splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, oklch(99% 0.02 90), oklch(95% 0.03 250)); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); overflow: hidden; }
#splash.out { opacity: 0; transform: scale(1.08); pointer-events: none; }
.sp-bg i { position: absolute; left: var(--x); top: var(--y); width: 22px; height: 22px; border-radius: 6px; background: oklch(85% 0.08 250 / 0.55); transform: rotate(var(--r)); animation: spfloat var(--d) ease-in-out infinite alternate; }
.sp-bg i:nth-child(3n) { border-radius: 50%; background: oklch(88% 0.1 90 / 0.6); } .sp-bg i:nth-child(3n+1) { background: oklch(86% 0.09 160 / 0.5); }
@keyframes spfloat { to { transform: translate(24px, -36px) rotate(calc(var(--r) + 120deg)); } }
.sp-in { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.sp-shapes { display: flex; gap: 12px; align-items: flex-end; height: 96px; }
.sp-shapes svg { width: 52px; height: 52px; animation: spjump 1.2s cubic-bezier(0.3, 0.9, 0.4, 1) infinite; animation-delay: calc(var(--i) * 0.13s); }
@keyframes spjump { 0%, 70%, 100% { transform: translateY(0) rotate(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.18, 0.8); } 38% { transform: translateY(-46px) rotate(200deg) scale(1.08); } 55% { transform: translateY(0) rotate(360deg) scale(1.1, 0.86); } }
.sp-word { font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: 0.06em; display: flex; }
.sp-word span { display: inline-block; animation: sppop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; animation-delay: calc(0.5s + var(--i) * 0.07s); }
.sp-word span:nth-child(1), .sp-word span:nth-child(6) { color: #f43f5e; } .sp-word span:nth-child(2), .sp-word span:nth-child(7) { color: #f59e0b; } .sp-word span:nth-child(3) { color: #10b981; } .sp-word span:nth-child(4) { color: #0ea5e9; } .sp-word span:nth-child(5) { color: #6366f1; }
@keyframes sppop { from { transform: translateY(24px) scale(0.4); opacity: 0; } }
.sp-bar { width: 140px; height: 6px; border-radius: 6px; background: oklch(90% 0.02 250); overflow: hidden; }
.sp-bar b { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981, #0ea5e9, #6366f1); transform-origin: left; animation: spload 1.6s var(--ease) forwards; }
@keyframes spload { from { transform: scaleX(0); } }

/* décors par monde */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity 0.4s var(--ease); }
.scene svg { width: 100%; height: 100%; display: block; }
body.adult .scene { opacity: 0.38; }
.shell { position: relative; z-index: 1; }
.game-root[data-w]:not([data-w=""]) :is(.head-card, .stock, .status, .crow, .clues-h, .done-toggle) { background-color: oklch(99.3% 0.004 250 / 0.93); }
.game-root[data-w]:not([data-w=""]) .col.right .clues-h { border-radius: 14px; padding: 4px 6px; }
/* le décor est figé : un SVG animé en boucle force un recalcul de style et de mise en page à chaque image (mesuré : 60 recalculs/s à l'arrêt) */
.tw { opacity: 0.7; } .fly { opacity: 0.8; }
.scene { contain: strict; }

/* jauge de difficulté */
.gauge { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; padding: 0 2px; flex: none; }
.gauge i { width: 6px; border-radius: 2px; background: var(--line-2); }
.gauge i:nth-child(1) { height: 7px; } .gauge i:nth-child(2) { height: 10px; } .gauge i:nth-child(3) { height: 13px; } .gauge i:nth-child(4) { height: 16px; } .gauge i:nth-child(5) { height: 18px; }
.gauge i.on { background: oklch(70% 0.17 150); } .gauge i.on.l3 { background: oklch(78% 0.16 95); } .gauge i.on.l4 { background: oklch(72% 0.17 60); } .gauge i.on.l5 { background: oklch(62% 0.21 25); }
.head-row { align-items: center; }

/* mode enfant : vivant ; mode adulte : sobre */
.logo span { display: inline-block; }
.board.won .cell .piece { animation: dance 0.6s var(--ease) 1; }
.board.won .cell:nth-child(2n) .piece { animation-delay: 0.12s; } .board.won .cell:nth-child(3n) .piece { animation-delay: 0.24s; }
@keyframes dance { 40% { transform: translateY(-6px); } }
@keyframes starin { from { transform: scale(0.8); opacity: 0; } }
body.adult { --display: var(--text); }
body.adult .head-card .desc, body.adult .head-card h1 { letter-spacing: 0; }
body.adult .logo span, body.adult .wordmark span { color: var(--ink) !important; }
body.adult .logo, body.adult .wordmark { font-weight: 800; letter-spacing: 0.02em; }

/* sélecteur de langue et écriture de droite à gauche */
.lang-sel { appearance: none; -webkit-appearance: none; min-height: 48px; padding: 0 36px 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; font-weight: 600; cursor: pointer; align-self: flex-start; max-width: 100%; }
html[dir="rtl"] .lang-sel { padding: 0 14px 0 36px; background-position: left 12px center; }
html[dir="rtl"] :is(.board, .board-wrap, .tiles, .mg, .dots, .logo, .wordmark, .hero-pieces, .sp-word, .gauge, .stars, .pid-n) { direction: ltr; }
html[dir="rtl"] .cta > svg { transform: scaleX(-1); }
html[dir="rtl"] :is(.crow, .head-card, .status, .clues-h, .modal, .win) { text-align: start; }
html[dir="rtl"] .ibtn svg[class~="flip"], html[dir="rtl"] .actions .ibtn:has(use[href="#i-left"]) svg, html[dir="rtl"] .actions .ibtn:has(use[href="#i-right"]) svg { transform: scaleX(-1); }

/* ---------- accueil et sélecteur de défi ---------- */
.scr { min-height: var(--H, 100vh); position: relative; display: flex; flex-direction: column; }
.scr:not(.game-root) { padding-bottom: var(--ad-h, 0px); } /* place de la bannière (app adulte) */
.htop { position: relative; z-index: 2; width: 100%; max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 6px; }
.htop .sp { flex: 1; }
.solid { background: oklch(99.3% 0.004 250 / 0.94); }
.btn2.solid { min-height: 48px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 62%; padding: 0 14px 0 6px; border-radius: 99px; background: oklch(99.3% 0.004 250 / 0.94); border: 1px solid var(--line-2); font-weight: 600; }
.pchip-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.pchip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip-st { color: oklch(46% 0.12 75); font-size: 0.875rem; font-variant-numeric: tabular-nums; flex: none; }
.pchip:active, .lang-b:active, .ibtn.solid:active { transform: scale(0.97); }
.lang-b { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 14px; background: oklch(99.3% 0.004 250 / 0.94); border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 600; font-size: 0.875rem; }
.lang-b svg { width: 20px; height: 20px; }
.home { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; flex: 1; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px 0 28px; }
.wordmark { font-size: clamp(2.8rem, 14vw, 4rem); justify-content: center; }
.tagline { color: var(--ink-2); font-size: 1.0625rem; font-weight: 500; margin-top: -10px; text-align: center; }
.hero-pieces { display: flex; gap: 12px; }
.hero-pieces svg { width: 54px; height: 54px; display: block; }
.hactions { display: flex; flex-direction: column; gap: 12px; }
.onb { gap: 14px; padding-top: 24px; justify-content: flex-start; }
.onb-h { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.onb-p { color: var(--ink-2); font-weight: 500; margin-top: 4px; }
.onb .avatars { grid-template-columns: repeat(4, 1fr); }
.onb .avatars button { min-height: 56px; }
.onb-go { margin-top: 8px; }
body.adult .adultw .scene { opacity: 0.1; }

.pick-main { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.pick-main > h1 { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.picker { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wtabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; overscroll-behavior-x: contain; }
.wtabs::-webkit-scrollbar { display: none; }
.wtab { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 600; font-size: 0.9375rem; color: var(--ink); white-space: nowrap; transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
.wtab svg { width: 16px; height: 16px; color: var(--ink-3); }
.wtab .wdot { width: 10px; height: 10px; border-radius: 50%; background: var(--wc); flex: none; }
.wtab .wcount { color: var(--ink-2); font-weight: 500; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wtab[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wtab[disabled] { opacity: 0.5; }
.phead-w { display: flex; flex-direction: column; gap: 8px; }
.phead { display: flex; align-items: baseline; gap: 10px; }
.phead h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.pstat { margin-inline-start: auto; font-size: 0.875rem; font-weight: 600; color: oklch(46% 0.12 75); font-variant-numeric: tabular-nums; }
.pdesc { font-size: 0.875rem; color: var(--ink-2); max-width: 65ch; }
.pbar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.lvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 6px 0; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); transition: transform 0.15s var(--ease); }
.lv:active { transform: scale(0.96); }
.lv b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.lv-st { display: flex; gap: 1px; }
.lv-st i { display: block; width: 12px; height: 12px; color: var(--line-2); }
.lv-st i.on { color: oklch(74% 0.16 80); }
.lv-st svg { width: 100%; height: 100%; display: block; }
.lv-sz { font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv.done { background: var(--ok-soft); border-color: var(--ok-line); }
.lv.cur { background: var(--accent); border-color: var(--accent); }
.lv.cur b { color: oklch(98% 0.01 275); }
.lv.cur .lv-st i { color: oklch(98% 0.01 275 / 0.4); } .lv.cur .lv-st i.on { color: oklch(90% 0.13 90); }
@media (hover: hover) and (pointer: fine) { .lv:hover, .wtab:hover { border-color: var(--accent); } }
@media (min-width: 900px) { .hero { gap: 28px; } }

/* bandeau d'état retiré de l'écran : il coupait le schéma des indices. Il reste lu par les lecteurs d'écran (zone aria-live),
   donc masqué visuellement seulement, jamais en display:none */
.status { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; }

/* indices : bureau, 2 colonnes visibles et colonne fixe */
/* badge Junior : même mot-symbole, petit badge sur le côté (app Junior) */
.logo.jr, .wordmark.jr { position: relative; width: fit-content; }
.wordmark.jr { margin-inline: auto; }
.jr-badge { position: absolute; right: -0.15em; top: -0.55em; transform: rotate(6deg); font-style: normal; font-family: var(--display); font-weight: 600; font-size: max(0.6rem, 0.3em); letter-spacing: 0.03em; line-height: 1; padding: 0.3em 0.6em; border-radius: 99px; background: var(--accent); color: #fff; white-space: nowrap; }
.logo.jr { margin-right: 2.2em; }
/* ---------- achat : écran de déblocage (Junior) / premium (adulte) ---------- */
.pw { gap: 14px; padding-top: 12px; justify-content: flex-start; overflow-y: auto; }
.pw-h { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.15; text-wrap: balance; }
.pw-sub { color: var(--ink-2); font-weight: 500; line-height: 1.4; }
.pw-list { list-style: none; display: grid; gap: 10px; padding: 0; margin: 4px 0 6px; }
.pw-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1.3; }
.pw-list svg { width: 22px; height: 22px; flex: none; color: var(--ok); }
.pw-offers { display: grid; gap: 10px; }
.offer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line-2); text-align: start; transition: transform 0.15s var(--ease), background 0.15s var(--ease); }
.offer:active { transform: scale(0.98); }
.offer:disabled { opacity: 0.55; }
.offer-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.offer-t b { font-size: 1.0625rem; }
.offer-t small { font-size: 0.8125rem; color: var(--ink-2); font-weight: 500; }
.offer-p { font-family: var(--display); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer.best { background: var(--accent-soft); border-color: var(--accent); padding-top: 18px; }
.offer-tag { position: absolute; top: -10px; inset-inline-start: 14px; padding: 2px 10px; border-radius: 99px; background: var(--accent); color: oklch(98% 0.01 275); font-size: 0.75rem; font-weight: 700; }
.pw-gate { display: grid; gap: 12px; }
.pw-msg { min-height: 1.4em; text-align: center; }
.pw-restore { align-self: center; min-height: 48px; padding: 0 16px; color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pw-ok { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; }
.pw-ok svg { width: 24px; height: 24px; color: var(--ok); }
.pro-b { border-color: var(--accent); color: var(--accent); }
.pro-b svg { color: var(--accent); }
.lv.locked { background: var(--surface-2); border-style: dashed; }
.lv.locked b { color: var(--ink-3); }
.lv-lock svg { width: 16px; height: 16px; color: var(--ink-3); display: block; }
.demo-note { font-weight: 600; color: var(--accent); }

.ab { gap: 18px; padding-top: 12px; justify-content: flex-start; }
.ab > .ab-sec, .ab > h1 { position: relative; }
.about-root .ab { margin-top: 4px; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); background: oklch(99.3% 0.004 250 / 0.9); border-radius: 24px 24px 0 0; box-shadow: var(--shadow); }
.ab-sec h2 { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; margin-bottom: 4px; }
.ab-sec p { color: var(--ink-2); line-height: 1.5; font-weight: 500; max-width: 62ch; }
/* promo croisée : section « l'autre édition » avec son bouton vers le site */
.ab-xp .btn2 { margin-top: 10px; align-self: flex-start; }
.about-b { align-self: center; min-height: 44px; padding: 0 18px; border-radius: 99px; background: oklch(99.3% 0.004 250 / 0.88); text-decoration: none; color: var(--ink); font-size: 0.9375rem; }

@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) {
  .shell { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); max-width: 1240px; }
  .col.right { position: sticky; top: 16px; max-height: calc(100vh - 32px); }
  .cscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 2px 2px; display: flex; flex-direction: column; gap: 10px; }
  .crows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .crow { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; box-shadow: none; }
  .crow .crow-say { display: none; }
  .crow .mg, .crow .mg.lg { width: 72px; }
  .crow-txt { font-size: 0.8rem; }
  .crows.focus .crow.rel { order: -1; border-color: var(--accent); }
  .crows.focus .crow:not(.rel) { opacity: 0.45; }
  .crow.act { outline: 2px solid var(--accent); outline-offset: -2px; }
}


/* indice contre une pub : petit badge lecture sur le bouton */
.hint-b.ad { position: relative; }
.hint-b.ad::after { content: ''; position: absolute; right: 10px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---- correctifs audit affichage (07.11) ---- */
@media (max-width:899px){
  .stack{grid-template-columns:minmax(0,1fr)}
  .who{flex-wrap:wrap}
  .who b{flex:1 1 9em !important;min-width:0;overflow-wrap:anywhere}
  .card .seg{display:flex;flex-wrap:wrap}
  .s-ttl p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .tab{min-height:44px}
  .seg button{min-width:44px}
  .row-l{overflow-wrap:anywhere}
}
@media (max-width:359px){
  .hero-pieces{gap:8px}
  .hero-pieces svg{width:48px;height:48px}
}
html[dir="rtl"] :is(.pw-h,.pw-sub,.pw-list li,.hint,.ab-sec h2,.ab-sec p,.offer-t,.row-l,.msg){unicode-bidi:plaintext}
.pick-main .glab{color:var(--ink)}
.demo-note{color:oklch(40% .2 275)}
.pw-restore{background:oklch(99.3% .004 250/.88);border-radius:99px;text-decoration:none}
.pw-msg:not(:empty){align-self:center;padding:6px 14px;border-radius:12px;background:oklch(99.3% .004 250/.92)}
.lv.locked b,.fld-lab,.muted{color:var(--ink-2)}

/* ---- correctifs audit jeu (07.11) ---- */
@media (max-width:899px), (orientation:portrait), (max-height:520px){
  /* liste d'indices : hauteur = un nombre entier de rangées (jamais de rangée coupée) ; 2 rangées sur les écrans hauts.
     --crow-h : hauteur réelle d'une pastille (marges 10 + 6, bordure 3, mini-grille 56 ; dense : 8 + 4 + 3 + 40), --crow-gap : espace entre rangées,
     --dt : bouton « Validés » quand il est visible */
  .cscroll{--crow-h:75px;--crow-gap:12px;--dt:0px;--rows:1;max-height:calc(11px + var(--dt) + var(--rows) * var(--crow-h) + (var(--rows) - 1) * var(--crow-gap) + 3px)}
  .cscroll:has(.crows.dense){--crow-h:55px;--crow-gap:10px}
  .cscroll:has(.done-toggle:not([hidden])){--dt:50px}
  .win{bottom:calc(var(--ad-h,0px) + 12px + env(safe-area-inset-bottom))}
  .col.right.exp{bottom:var(--ad-h,0px)}
  body.in-game .toast{bottom:calc(var(--ad-h,0px) + 88px + env(safe-area-inset-bottom))}
  .cd-txt.wrap{font-size:.8125rem;line-height:1.18;-webkit-line-clamp:4}
  .done-toggle{min-height:44px}
}
@media (orientation:portrait){
  .win{position:static;box-shadow:none;margin:0 0 env(safe-area-inset-bottom)}
  .col:has(.win) .stock{display:none}
  .shell:has(.win) .col.right{display:none}
}
/* téléphone couché (844×390, 932×430, 667×375) : plateau carré à gauche sur toute la hauteur sous un en-tête d'une ligne ; colonne de droite =
   indice actif, pastilles, réserve, aide, dock (l'app y déplace réserve et dock : placeDock). Rien ne défile hors des pastilles et, au besoin, des
   rangées de la réserve. La colonne du plateau mesure sa hauteur (--H - en-tête - marges), au plus 46 % : le plateau est carré, sans vide inutile. */
@media (orientation:landscape) and (max-height:520px){
  .top-in{padding:3px 12px;gap:10px}
  .pause-b{width:44px;min-height:44px}
  .gt-txt{display:flex;align-items:baseline;gap:8px;min-width:0}
  .gt-title h1{font-size:1.1rem;flex:none;max-width:60%}
  .gt-title p{flex:1}
  .shell{display:grid;grid-template-columns:minmax(0,min(calc(var(--H,100vh) - 67px - env(safe-area-inset-bottom,0px)),46%)) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .col:not(.right){display:contents}
  .board-wrap{grid-column:1;grid-row:1;min-height:0;max-width:none}
  .col.right{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:6px;min-height:0}
  .col.right .clues-h{flex:none}
  .col.right .cscroll{flex:0 1 auto}
  .col.right .stock{flex:none;margin-top:auto;padding:6px}
  .col.right .hbox,.col.right .hbox[data-mode="ask"]{flex:none;margin:0}
  .col.right .dock{flex:none;padding:0;border:0;background:none;justify-content:stretch;gap:10px}
  .dock .hint-b,.dock .undo-b,.dock .btn.go{min-height:48px;height:48px}
  .undo-b{width:48px}
  .hint-b{min-width:0;flex:1;padding:0 16px}
  .dock.full .hint-b{flex:none;width:48px;min-width:48px}
  /* victoire : la feuille prend la colonne de droite (réserve et indices n'ont plus d'objet) ; elle défile en interne au besoin, le bouton principal en haut */
  .shell:has(.win) .col.right{display:none}
  .win{position:static;grid-column:2;grid-row:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow);padding:12px 14px;gap:8px}
  .win .stars svg{width:32px;height:32px}
  .win h2{font-size:1.4rem}
  .win-sub{margin-top:-2px}
  .win .cta{min-height:56px}
  /* liste déployée : sous l'en-tête (qui reste visible : il est au-dessus, z-index d'un enfant flex), entre les encoches ; réserve et dock n'y entrent pas */
  .col.right.exp{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);top:calc(env(safe-area-inset-top,0px) + 52px);height:auto}
  .col.right.exp :is(.stock,.status,.hbox,.dock){display:none}
  /* accueil : héros à gauche, actions à droite : tout tient sans défiler */
  .home:has(.hactions){flex-direction:row;align-items:center;gap:20px;max-width:880px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .home:has(.hactions) .hero{flex:1 1 0;padding:0;gap:12px}
  .hactions{flex:1 1 0;gap:10px}
  .home:has(.hactions) .wordmark{font-size:2.4rem}
  .home:has(.hactions) .tagline{font-size:.95rem;margin-top:-4px}
  .home:has(.hactions) .hero-pieces svg{width:44px;height:44px}
  .hactions .cta{min-height:56px}
  .htop{padding-top:8px;padding-bottom:2px}
}

/* ---- correctifs audit indices (07.11) ---- */
@media (max-width:899px), (orientation:portrait), (max-height:520px){
  .crow .mg-x{width:14px;height:14px;font-size:.55rem;top:-17px;right:-6px}
  .shell:has(> .col.right.exp){z-index:3}
}
@media (max-width:899px) and (min-height:900px), (orientation:portrait) and (min-height:900px){ .cscroll{--rows:2} }
@media (max-width:899px) and (max-height:600px), (max-height:520px){
  .cscroll{--crow-h:55px;--crow-gap:10px;min-height:calc(11px + var(--crow-h) + 3px)} /* paysage : jamais moins d'une rangée entière */
  .crows{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px 5px}
  .crow{min-height:52px;padding:8px 2px 4px;border-radius:12px}
  .crow .mg,.crow .mg.lg{width:40px !important}
  .chip-n{min-width:15px;height:15px;left:-4px;top:-7px;font-size:.55rem}
}

/* ---- choix de la partie (adulte) : taille puis difficulté, comme une cadence aux échecs ---- */
.fsz { display: grid; gap: 10px; }
.fsz-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); }
.fsz-n { font-family: var(--display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ink); text-align: center; }
.fsz-d { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fsz-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 3px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 0.8125rem; line-height: 1.15; text-align: center; color: var(--ink); overflow-wrap: anywhere; transition: transform 0.15s var(--ease); }
.fsz-b:active { transform: scale(0.97); }
.fsz-b.rec { border-color: var(--accent); background: oklch(95% 0.03 275); }
.fsz-b i { font-style: normal; font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); }
/* écran étroit : cinq libellés ne tiennent pas à côté de la taille (« Difficile », « Gemiddeld » se couperaient au milieu) : la taille passe au-dessus */
@media (max-width: 479px) {
  .fsz-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; }
  .fsz-n { font-size: 1.125rem; line-height: 1.1; text-align: left; padding: 0 4px; }
  .fsz-d { gap: 4px; }
  .fsz-b { font-size: 0.75rem; min-height: 50px; padding: 5px 2px; }
  .fsz-b i { font-size: 0.625rem; }
  /* seuls le néerlandais et le russe ont des libellés d'un mot plus larges que le bouton (« Gemiddeld », « Средний ») : césure
     syllabique pour eux seulement, car avec hyphens: auto WebKit couperait aussi « Très fa-cile » au lieu de « Très / facile » */
  html:lang(nl) .fsz-b, html:lang(ru) .fsz-b { hyphens: auto; }
}

/* accueil : les cinq pièces sautillent à tour de rôle (coupé si « réduire les animations » est actif, voir plus haut) */
.hero-pieces svg { transform-origin: 50% 100%; animation: hop 3.2s cubic-bezier(0.3, 0.9, 0.4, 1) infinite; }
.hero-pieces svg:nth-child(2) { animation-delay: 0.18s; } .hero-pieces svg:nth-child(3) { animation-delay: 0.36s; }
.hero-pieces svg:nth-child(4) { animation-delay: 0.54s; } .hero-pieces svg:nth-child(5) { animation-delay: 0.72s; }
@keyframes hop { 0%, 38%, 100% { transform: translateY(0) rotate(0) scale(1, 1); } 8% { transform: scale(1.1, 0.88); } 20% { transform: translateY(-18px) rotate(-10deg) scale(1.04); } 30% { transform: translateY(0) rotate(6deg) scale(1.08, 0.9); } 36% { transform: rotate(-2deg); } }

/* « Réduire les animations » : on garde la vie de l'accueil avec une respiration très douce (pas de saut ni de rotation) */
@keyframes breathe { 50% { opacity: 0.8; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .hero-pieces svg { animation: breathe 4.5s ease-in-out infinite !important; }
  .hero-pieces svg:nth-child(2) { animation-delay: 0.3s !important; } .hero-pieces svg:nth-child(3) { animation-delay: 0.6s !important; }
  .hero-pieces svg:nth-child(4) { animation-delay: 0.9s !important; } .hero-pieces svg:nth-child(5) { animation-delay: 1.2s !important; }
}
body.calm .hero-pieces svg { animation: none !important; }

/* ---- correctifs des testeurs QA (07.11) ---- */
body.in-game .toast { top: calc(env(safe-area-inset-top, 0px) + 72px); bottom: auto; }
html:has(body.big) { font-size: 112.5%; }
.stock .piece::before { content: ""; position: absolute; inset: -4px; }
@media (max-width: 899px), (orientation: portrait), (max-height: 520px) {
  .grab { background: none; height: 18px; top: -12px; width: 44px; margin-left: -22px; }
  .grab::before { content: ""; position: absolute; left: 50%; top: 5px; width: 11px; height: 11px; border-left: 3px solid var(--ink-3); border-top: 3px solid var(--ink-3); border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
  .col.right.exp .grab::before { top: 1px; transform: translateX(-50%) rotate(225deg); }
}
/* petit écran (iPhone SE) : en 5×5 la liste d'indices se replie davantage pour laisser de la place au plateau */
@media (max-width: 899px) and (max-height: 700px), (max-height: 520px) { body[data-n="5"] .cscroll { --crow-h: 55px; --crow-gap: 10px; } body[data-n="5"] .crow { min-height: 52px; padding: 8px 2px 4px; } body[data-n="5"] .crow .mg, body[data-n="5"] .crow .mg.lg { width: 40px !important; } }
/* très petit écran (320×568) en 5×5 (adultes) : 25 cases et 25 pièces ne tiennent pas avec la liste ; elle est repliée par défaut,
   l'indice actif reste dans l'en-tête et le chevron déploie la liste entière */
@media (max-width: 899px) and (max-height: 600px), (max-height: 520px) { body[data-n="5"] .col.right:not(.exp) .cscroll { display: none; } }

/* ---------- aide « Indice » : explication puis confirmation « Placer pour moi » ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crow.hl { box-shadow: inset 0 0 0 3px var(--ok); }
.crow.hl.bad { box-shadow: inset 0 0 0 3px var(--warn); }
.hbox { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; background: oklch(97.5% 0.045 90); border: 1.5px solid oklch(84% 0.11 88); color: var(--ink); animation: rise 0.22s var(--ease); }
.hbox[hidden] { display: none; }
.hbox[data-kind="wrong"] { border-color: var(--warn-line); background: var(--warn-soft); }
.hbox[data-mode="note"] { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-d); }
.hbox-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hbox-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.hbox-ic > svg { width: 26px; height: 26px; color: oklch(62% 0.15 75); }
.hbox[data-kind="wrong"] .hbox-ic > svg { color: var(--warn); }
.hbox[data-mode="note"] .hbox-ic > svg { color: var(--ok); }
.hbox-ic.cv, .hbox-ic:has(.hbox-pc) { width: auto; height: auto; }
.hbox-cv { display: flex; gap: 6px; }
.hbox-cv .mg { width: 56px; flex: none; }
.hbox-cv:has(.mg + .mg) .mg { width: 40px; }
.hbox-pc { position: relative; width: 52px; height: 52px; }
.hbox-pc .piece { position: absolute; inset: 0; padding: 4%; cursor: default; pointer-events: none; animation: none; }
.hbox-body { flex: 1; min-width: 0; }
.hbox-t { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.hbox-s { margin-top: 2px; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.hbox-s[hidden] { display: none; }
.hbox[data-mode="ask"] .hbox-t { font-family: var(--display); font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.hbox-act { display: none; gap: 10px; }
.hbox[data-mode="ask"] .hbox-act { display: flex; }
.hbox-yes, .hbox-no { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 14px; border-radius: 16px; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; text-align: center; transition: transform 0.15s var(--ease); }
.hbox-yes { flex: 1.25 1 0; min-width: 0; background: var(--ok-d); border: 1px solid oklch(38% 0.11 162); color: oklch(99% 0.01 162); box-shadow: 0 3px 0 oklch(38% 0.11 162); }
.hbox-yes svg { width: 22px; height: 22px; flex: none; }
.hbox-no { flex: 1 1 0; min-width: 0; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink); }
.hbox-yes:active, .hbox-no:active { transform: translateY(2px); }
body.adult .hbox-yes, body.adult .hbox-no, body.adult .hbox[data-mode="ask"] .hbox-t { font-family: var(--text); }
body.adult .hbox-yes, body.adult .hbox-no { font-weight: 700; font-size: 1rem; }
body.adult .hbox-t { font-weight: 500; }
body.adult .hbox[data-mode="ask"] .hbox-t { font-weight: 700; }
/* l'étiquette passe à « Placer pour moi » : le bouton garde son libellé même quand « Vérifier » prend la place */
.hint-b.place { background: var(--ok-d); border-color: oklch(38% 0.11 162); color: oklch(99% 0.01 162); box-shadow: 0 3px 0 oklch(38% 0.11 162); }
.hint-b.place:active { box-shadow: 0 0 0 oklch(38% 0.11 162); }
@media (hover: hover) and (pointer: fine) { .hint-b.place:hover { background: oklch(44% 0.13 162); } }
.dock.hinting .btn.go { display: none; }
.dock.hinting.full .hint-b { width: auto; min-width: 0; flex: 1; padding: 0 18px; }
.dock.hinting.full .hint-l { display: inline; }
.dock.asking { display: none; }
@media (max-width: 899px), (orientation: portrait), (max-height: 520px) {
  .hbox { flex: none; margin: 0 12px 8px; padding: 10px 12px; gap: 8px; }
  .hbox[data-mode="ask"] { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .hbox-t { font-size: 0.875rem; }
  .hbox[data-mode="ask"] .hbox-t { font-size: 1.0625rem; }
  .hbox-ic { width: 28px; height: 28px; } .hbox-ic > svg { width: 24px; height: 24px; }
  .hbox-pc { width: 48px; height: 48px; }
}
@media (max-width: 899px), (orientation: portrait), (max-height: 520px) {
  /* l'aide ouverte : la liste d'indices (qui défile) cède de la place, pas le plateau : une seule rangée */
  .game-root.hbox-on .cscroll { --rows: 1; }
}
@media (max-width: 899px) and (max-height: 700px), (max-height: 520px) {
  .hbox { padding: 8px 10px; gap: 6px; } .hbox-yes, .hbox-no { min-height: 52px; }
  .game-root.hbox-on .clues-h, .game-root.hbox-on .cscroll { display: none; } /* phrase et image de l'indice sont déjà dans la boîte */
}
html[dir="rtl"] .hbox { text-align: start; }

/* ---- chapitres (sélecteur enfant) et fin de chapitre (08.11) ---- */
.chap { display: flex; align-items: center; gap: 8px; }
.chap-b { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: background 0.15s var(--ease), transform 0.15s var(--ease); }
.chap-b svg { width: 22px; height: 22px; }
.chap-b:active { transform: scale(0.95); }
.chap-b[disabled] { opacity: 0.35; }
.chap-b.locked { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chap-t { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .chap-b:not([disabled]):hover { border-color: var(--accent); color: var(--accent); } }
.win-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--ok-soft); color: var(--ok-d); font-family: var(--display); font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.win-emoji { font-size: 1.5rem; line-height: 1; }
.win-alt { width: 100%; }
/* achat : prix encore inconnu (boutique muette) : offre grisée, non cliquable */
.offer.wait { opacity: 0.6; }
.offer.wait .offer-p { color: var(--ink-3); }

/* ---- revue d'interface (08.11) ---- */
/* conseil du monde à l'ouverture d'un défi (téléphone) : bulle lisible, 4 s */
.toast.tip { background: oklch(97.5% 0.045 90); color: var(--ink); border: 1.5px solid oklch(84% 0.11 88); font-weight: 500; line-height: 1.35; max-width: min(92vw, 420px); text-align: start; padding: 10px 14px; }
body.adult .toast.tip { background: var(--surface); border-color: var(--line-2); }
/* téléphone : la bulle vit au-dessus du dock, le plateau reste dégagé */
@media (max-width: 899px), (orientation: portrait), (max-height: 520px) { body.in-game .toast.tip { top: auto; bottom: calc(var(--ad-h, 0px) + 88px + env(safe-area-inset-bottom)); } }
/* bouton secondaire avec sous-titre (« Défi du jour » déjà réussi : « Réussi ★★★ ») */
.b2-t { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.b2-t small { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); margin-top: 2px; }
/* bureau et tablette en paysage : plateau et réserve tiennent dans la hauteur de l'écran, sans défiler. La colonne gauche est une
   grille (en-tête, plateau extensible, aide, dock, réserve) ; le plateau prend la place restante (container query, comme sur téléphone). */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) {
  .game-root { height: calc(100dvh - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; padding-bottom: var(--ad-h, 0px); /* bannière (app adulte, tablette) : la réserve reste au-dessus */ }
  .game-root .top { flex: none; }
  /* une seule ligne flex de hauteur connue : les deux colonnes font exactement la hauteur restante, quel que soit leur contenu */
  .game-root .shell { flex: 1; min-height: 0; padding-bottom: 16px; display: flex; align-items: stretch; }
  .game-root .col { flex: 1 1 0; min-width: 0; }
  .game-root .col:not(.right) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; min-height: 0; } /* colonne bornée : un texte long (carte d'en-tête) ne l'élargit pas sur les indices */
  .game-root .col:not(.right):has(.win) { display: flex; } /* victoire : panneau sous la réserve, la page défile si besoin */
  .game-root .col.right { position: static; max-height: none; min-height: 0; }
  .board-wrap { width: 100%; max-width: 460px; min-height: 280px; container-type: size; display: grid; place-items: center; justify-self: center; } /* fenêtre trop basse : 280 px comme avant, la page défile */
  .board-wrap > .board { width: min(100cqw, 100cqh); }
  .col:has(.win) .board-wrap { container-type: normal; display: block; min-height: 0; width: min(100%, 320px); }
  .col:has(.win) .board-wrap > .board { width: auto; }
}
/* tablette couchée (1180×820, 1366×1024) et bureau bas : pièces de 48 à 56 px ; la carte d'en-tête tient sur une ligne et la réserve perd son
   titre : le plateau gagne ~80 px (cases ≥ 48 px en 5×5 sur 1180×820, plateau de 460 px sur 1366×1024), tout reste dans l'écran sans défiler */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 521px) and (max-height: 1024px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
  .tile { max-width: 56px; border-radius: 14px; }
  .head-card { padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
  .head-card .head-row { flex: none; max-width: 60%; }
  .head-card .desc { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .head-card .dots { display: none; }
  .stock-h { display: none; }
  .crow-txt { font-size: 0.875rem; } /* tablette : texte des indices lisible (14 px) */
}

/* tablette debout (820×1180, 1024×1366, 768×1024) : la mise en page empilée du téléphone, en grand : plateau jusqu'à 560 px, pièces de 48 à 72 px,
   pastilles de 72 px, texte de l'indice 18 px, marges confortables. (La disposition bureau à deux colonnes est réservée au paysage.) */
@media (min-width: 600px) and (orientation: portrait) {
  .top-in { padding: 10px 24px; }
  .gt-title h1 { font-size: 1.45rem; } .gt-title p { font-size: 0.95rem; }
  .shell { padding: 14px 24px 12px; gap: 14px; }
  .col { gap: 14px; }
  .board-wrap { max-width: 560px; }
  .board { padding: 14px; gap: 10px; border-radius: 28px; border-width: 3px; }
  .cell { border-radius: 18px; }
  .stock { padding: 12px; border-radius: 22px; }
  .tiles { --tile-min: 48px; --tile-max: 72px; gap: 10px; }
  .tile { border-radius: 16px; }
  .clues-h { padding-top: 8px; }
  .cd-txt { font-size: 1.125rem; }
  .cd-top { font-size: 0.8rem; }
  .clues-h .crow-say { width: 48px; height: 48px; }
  /* pastilles de 72 px (10 + 72 + 6 + bordure 3 = 91) ; au-delà de 14 indices (dense) : 56 px, la taille des téléphones (75), pour laisser le plateau grand */
  .cscroll { --crow-h: 91px; --crow-gap: 12px; padding: 11px 10px 3px; }
  .cscroll:has(.crows.dense) { --crow-h: 75px; --crow-gap: 12px; }
  .crows { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px 8px; }
  .crows.dense { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 8px; }
  .crow { min-height: 84px; padding: 10px 4px 6px; border-radius: 16px; }
  .crows.dense .crow { min-height: 68px; padding: 10px 4px 6px; border-radius: 14px; }
  .crow .mg, .crow .mg.lg { width: 72px !important; }
  .crows.dense .crow .mg { width: 56px !important; }
  .chip-n, .crows.dense .chip-n { min-width: 20px; height: 20px; left: -6px; top: -10px; font-size: 0.7rem; }
  .crow .mg-x { width: 18px; height: 18px; font-size: 0.65rem; top: -20px; right: -8px; }
  .dock { padding: 10px 24px calc(10px + env(safe-area-inset-bottom)); gap: 14px; }
  .hint-b { min-height: 64px; font-size: 1.2rem; min-width: 220px; }
  .undo-b { width: 64px; min-height: 64px; }
  .dock .btn.go { height: 64px; font-size: 1.15rem; }
  .dock.full .hint-b { width: 64px; min-width: 64px; }
  .hbox { margin: 0 24px 10px; padding: 12px 16px; }
  .hbox-t { font-size: 1.0625rem; }
  .hbox[data-mode="ask"] .hbox-t { font-size: 1.1875rem; }
  .win { width: 100%; max-width: 560px; margin-inline: auto; }
  .toast.tip { max-width: 560px; font-size: 1.0625rem; }
  .col.right.exp { left: 24px; right: 24px; border-radius: 24px 24px 0 0; }
}
@media (min-width: 600px) and (orientation: portrait) and (min-height: 1300px) { .cscroll { --rows: 3; } }