/* ═══════════════════════════════════════════════════════════════════════════
   POLYGONARC — feuille de style v0.5 · direction artistique A « Encre franche »
   Tirée des références (docs/references) : contours noirs épais, filets en
   tirets-points, aplats rouge / bleu francs, cases rondes à double anneau,
   ombres pleines décalées, fond blanc quadrillé. Polices embarquées.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Archivo Black'; src: url('../polices/archivo-black-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-weight: 400; src: url('../polices/archivo-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-weight: 600; src: url('../polices/archivo-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-weight: 700; src: url('../polices/archivo-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Archivo'; font-weight: 800; src: url('../polices/archivo-latin-800-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: url('../polices/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; font-weight: 700; src: url('../polices/caveat-latin-700-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #111; --ink-2: #3d3d3d; --ink-3: #7a7a7a; --ink-4: #c9c9c9;
  --paper: #fbfbfa; --surface: #fff; --soft: #f1f0ec;
  --red: #ee1c24; --blue: #0a7bff; --green: #16a34a; --yellow: #f5b800;
  --red-d: #9e0b10; --blue-d: #0648a0; --green-d: #0c5f2b; --yellow-d: #8a6700;
  --red-l: #fbd3d4; --blue-l: #cfe4ff; --green-l: #cdebd8; --yellow-l: #fdefb8;
  --bonus: var(--blue); --malus: var(--red);
  --ok: #16a34a; --warn: #e09a00; --bad: #ee1c24;
  --title: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --type: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --line: 4px; --radius: 16px; --shadow: 5px 5px 0 var(--ink); --shadow-s: 3px 3px 0 var(--ink);
  --cell: 64px; --gap: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--type); overflow: hidden; -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
.hidden { display: none !important; }
#app { position: relative; height: 100dvh; width: 100%; overflow: hidden; }

/* ── Écrans ─────────────────────────────────────────────────────────────── */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .2s, transform .2s; overflow: hidden; }
.scr.off { opacity: 0; pointer-events: none; transform: scale(.985); }
.scroll { overflow-y: auto; flex: 1; }
.page { width: 100%; max-width: 620px; margin: 0 auto; padding: 26px 18px 40px; display: flex; flex-direction: column; gap: 16px; }
.page.wide { max-width: 1040px; }

/* ── Titres ─────────────────────────────────────────────────────────────── */
.h1 { font-family: var(--title); font-size: 34px; letter-spacing: .01em; line-height: 1.05; }
.h2 { font-family: var(--title); font-size: 20px; }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.note { font-family: var(--hand); font-size: 23px; color: var(--red); line-height: 1.1; }
.muted { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; cursor: pointer; background: none; border: none; padding: 4px 0; align-self: flex-start; color: var(--ink-2); }
.back:hover { color: var(--ink); }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 18px; border-radius: 14px;
  cursor: pointer; font-family: var(--title); font-size: 17px; letter-spacing: .02em; border: var(--line) solid var(--ink); text-align: left; transition: transform .08s, box-shadow .08s; }
.btn:active:not([disabled]) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink) !important; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-fill { background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.btn-red { background: var(--red); color: #fff; box-shadow: var(--shadow); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: var(--shadow); }
.btn-line { background: var(--surface); box-shadow: var(--shadow-s); }
.btn-ghost { background: transparent; border-width: 2px; border-style: dashed; font-family: var(--type); font-weight: 700; font-size: 14px; }
.btn.center { justify-content: center; }
.btn .sub { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: .7; font-weight: 700; }
.icon-btn { background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; cursor: pointer; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.icon-btn:hover { background: var(--soft); }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }

/* ── Encadrés ───────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.panel.dash { position: relative; }
.panel.dash::before { content: ""; position: absolute; inset: 6px; border: 2px dashed var(--ink-4); border-radius: 11px; pointer-events: none; }
.card-box { background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-s); }

/* ── Logo / accueil ─────────────────────────────────────────────────────── */
#menu .page { min-height: 100%; justify-content: center; max-width: 560px; }
.logo { text-align: center; margin: 6px 0 22px; }
.logo svg { display: block; margin: 0 auto 12px; }
.logo-title { font-family: var(--title); font-size: 46px; letter-spacing: .03em; line-height: 1; }
.logo-sub { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; }
.menu-list { display: flex; flex-direction: column; gap: 12px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vtag { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--ink-3); letter-spacing: .1em; margin-top: 14px; }

/* ── Configuration ──────────────────────────────────────────────────────── */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg button { padding: 11px 4px; border-radius: 12px; border: 3px solid var(--ink); background: var(--surface); cursor: pointer; font-family: var(--title); font-size: 17px; }
.seg.sm button { font-family: var(--type); font-weight: 700; font-size: 13px; padding: 8px 4px; border-width: 2px; }
.seg button.on { background: var(--ink); color: #fff; }
.seats { display: flex; flex-direction: column; gap: 10px; }
.seat { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--surface); }
.seat .dot, .lobby-seat .dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); }
.seat input { width: 100%; border: none; border-bottom: 2px dashed var(--ink-4); background: transparent; padding: 4px 2px; font-weight: 800; font-size: 15px; }
.seat input:focus { outline: none; border-bottom-color: var(--ink); }
.seat-kind { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seat-kind button { padding: 6px 9px; border-radius: 9px; border: 2px solid var(--ink); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 800; }
.seat-kind button.on { background: var(--ink); color: #fff; }
details.rules-box { border: 3px dashed var(--ink); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
details.rules-box summary { cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 2px dashed var(--ink-4); }
.stepper-row:last-child { border-bottom: none; }
.stepper-row .t { font-weight: 800; font-size: 14px; }
.stepper-row .t small { display: block; font-family: var(--type); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); background: var(--surface); cursor: pointer; font-size: 18px; font-weight: 900; line-height: 1; }
.stepper .v { font-family: var(--mono); font-weight: 700; font-size: 15px; min-width: 52px; text-align: center; }
@media (max-width: 520px) { .seat { grid-template-columns: 22px 1fr; } .seat-kind { grid-column: 1 / -1; } .seat-kind button { flex: 1; } }

/* ══════════════════════════ ÉCRAN DE PARTIE ═════════════════════════════ */
#game { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "left board right"; gap: 0 18px; padding: 0 22px 18px; }
.topbar { grid-area: top; display: flex; align-items: center; gap: 18px; padding: 14px 0 12px; min-width: 0; }
.gl-logo { display: flex; align-items: center; gap: 10px; font-family: var(--title); font-size: 22px; flex-shrink: 0; }
.players { display: flex; gap: 10px; flex: 1; justify-content: safe center; min-width: 0; overflow-x: auto; padding: 4px 6px 8px; }
.pchip { display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border: 3px solid var(--ink); border-radius: 999px; background: var(--surface); flex-shrink: 0; transition: transform .2s, box-shadow .2s; position: relative; }
.pchip.act { box-shadow: 4px 4px 0 var(--ink); transform: translateY(-2px); }
.pchip .disc { width: 32px; height: 32px; border-radius: 50%; background: var(--pc); border: 3px solid var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.pchip .disc i { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.pchip b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pchip small { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.pchip .flags { position: absolute; top: -9px; right: -6px; display: flex; gap: 3px; }
.pchip .flags span { background: var(--surface); border: 2px solid var(--ink); border-radius: 7px; font-size: 10px; font-weight: 800; padding: 0 4px; line-height: 16px; }
.pchip .off { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--ink); }
.turn-box { text-align: right; flex-shrink: 0; }
.turn-who { font-family: var(--title); font-size: 22px; line-height: 1; white-space: nowrap; }
.turn-sub { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; margin-top: 5px; }
.turn-tools { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

.gl-left { grid-area: left; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: 4px 6px 8px 0; }
.gl-right { grid-area: right; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 4px 6px 8px 0; }

/* Panneau d'action */
.act-panel { text-align: center; }
.die { width: 86px; height: 86px; border: var(--line) solid var(--ink); border-radius: 18px; background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  place-items: center; padding: 13px; margin: 6px auto 12px; transform: rotate(-6deg); box-shadow: var(--shadow); cursor: default; }
.die i { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.die .q { grid-column: 1 / -1; grid-row: 1 / -1; font-family: var(--title); font-size: 30px; color: var(--ink-4); }
.die.go { cursor: pointer; animation: bob 1.2s ease-in-out infinite; }
.die.spin { animation: spin .5s cubic-bezier(.3,.7,.4,1); }
@keyframes spin { from { transform: rotate(-220deg) scale(.6) } to { transform: rotate(-6deg) scale(1) } }
@keyframes bob { 0%,100% { transform: rotate(-6deg) translateY(0) } 50% { transform: rotate(-3deg) translateY(-5px) } }
.act-msg { font-family: var(--title); font-size: 19px; line-height: 1.15; min-height: 22px; }
.act-note { font-family: var(--hand); font-size: 22px; color: var(--red); min-height: 26px; margin-top: 4px; }
.act-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.act-btns .btn { justify-content: center; font-size: 16px; padding: 12px; }
.timer { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.timer .bar { flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--soft); max-width: 160px; }
.timer .bar i { display: block; height: 100%; background: var(--ok); transition: width .25s linear, background .3s; }
.goals { font-size: 14px; line-height: 1.5; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin-bottom: 9px; }
.goal b { font-weight: 800; }
.goal .v { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.goal .tr { grid-column: 1 / -1; height: 10px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--soft); }
.goal .tr i { display: block; height: 100%; background: var(--pc, var(--ink)); transition: width .35s; }
.deck-line { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* Plateau */
.board-stage { grid-area: board; position: relative; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.board-zoom { transform-origin: center center; transition: transform .15s; will-change: transform; }
.board-frame { position: relative; background: var(--surface); border: 6px solid var(--ink); border-radius: 6px; padding: 24px; box-shadow: 8px 8px 0 var(--ink); }
.board { position: relative; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), var(--cell)); }
.bdot { position: absolute; width: clamp(3px, calc(var(--cell, 60px) * 0.11), 7px); height: clamp(3px, calc(var(--cell, 60px) * 0.11), 7px); border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.cell { width: var(--cell); height: var(--cell); border-radius: 50%; border: 2px solid var(--ink); padding: calc(var(--cell) * .07); position: relative; }
.cell .disc { width: 100%; height: 100%; border-radius: 50%; border: calc(var(--cell) * .07) solid var(--ink); background: #fff; transition: background-color .35s; position: relative; display: grid; place-items: center; }
.cell.o-red .disc { background: var(--red); } .cell.o-blue .disc { background: var(--blue); } .cell.o-green .disc { background: var(--green); } .cell.o-yellow .disc { background: var(--yellow); }
.cell.x .disc { background: #1b1b1b; }
.cell.x .disc::after { content: "✕"; color: #777; font-size: calc(var(--cell) * .38); font-weight: 900; }
.cell.sp .disc::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 3px dashed #fff; }
.cell.mv, .cell.tg { cursor: pointer; }
.cell.mv .disc::after, .cell.tg .disc::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 4px dashed var(--hl, var(--ink)); background: color-mix(in srgb, var(--hl, #000) 14%, transparent); animation: ring 1.4s linear infinite; }
.cell.tg { --hl: #d49b00; }
.cell.mv:hover .disc, .cell.tg:hover .disc { filter: brightness(.93); }
.cell.sel .disc { box-shadow: 0 0 0 5px var(--yellow); }
@keyframes ring { to { transform: rotate(360deg) } }
.cell.flash .disc { animation: flash .7s ease-out; }
@keyframes flash { 0% { transform: scale(1.18); filter: brightness(1.5) } 100% { transform: scale(1); filter: none } }
.cell.dz .disc { box-shadow: inset 0 0 0 3px #fff; }
.cell .coord { display: none; }
/* Calques : tours et pions */
.layer { position: absolute; inset: 24px; pointer-events: none; z-index: 2; }
.layer.under { z-index: 0; }
.board { z-index: 1; }
.seam { position: absolute; display: block; }
.seam.v { width: 0; border-left: 3px dashed var(--ink); transform: translateX(-1.5px); opacity: .55; }
.seam.h { height: 0; border-top: 3px dashed var(--ink); transform: translateY(-1.5px); opacity: .55; }
.tower-halo { position: absolute; background: var(--dc); border: 4px solid var(--ink); border-radius: 999px; }
.tower-icon { position: absolute; width: 30px; height: 34px; transform: translate(-50%, -50%); filter: drop-shadow(2px 2px 0 var(--ink)); }
/* Le pion est posé PAR-DESSUS le plateau (et non dans `.layer`, qui ne reçoit
   déjà plus les clics) : sans `pointer-events: none`, il avalait le clic sur sa
   propre case. Conséquence trouvée le 27/09 : impossible de désigner un pion
   adverse, donc « Déplacement d'adversaire » et « Ancrage » étaient injouables.
   Et l'anneau clignotant de son propre pion (`::before`, inset -4px) débordait
   sur les cases voisines, donc volait des clics de déplacement.
   Règle : TOUT ce qui se superpose au plateau est décoratif et laisse passer
   les clics — on ne vise jamais qu'une CASE. */
.pawn { position: absolute; z-index: 3; width: var(--cell); height: var(--cell); display: grid; place-items: center; pointer-events: none; transition: transform .32s cubic-bezier(.3,.8,.4,1); }
.pawn svg { width: 58%; height: 58%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.pawn.me::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 5px solid var(--pc); animation: pulse 1.3s ease-in-out infinite; }
.pawn.tp svg { animation: tp .45s ease-out; }
@keyframes tp { 0% { transform: scale(0) rotate(-90deg) } 70% { transform: scale(1.25) } 100% { transform: scale(1) } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.zoom-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 5; }
.zoom-ctl button { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--ink); background: var(--surface); font-weight: 900; font-size: 18px; cursor: pointer; box-shadow: var(--shadow-s); }
.board-stage.grab { cursor: grab; } .board-stage.grabbing { cursor: grabbing; }

/* Main de cartes */
.hand-panel { display: flex; flex-direction: column; flex-shrink: 0; }
.journal-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hand { position: relative; display: flex; flex-direction: column; gap: 0; padding: 6px 4px 10px; }
.hcard { position: relative; width: 180px; margin-left: 30px; cursor: pointer; transition: transform .15s, margin .15s; }
.hcard + .hcard { margin-top: -150px; }
.hcard:nth-child(even) { transform: rotate(3deg); margin-left: 60px; }
.hcard:nth-child(odd) { transform: rotate(-4deg); }
.hcard:hover, .hcard.sel { transform: translateX(-24px) rotate(0) !important; z-index: 5; }
.hcard.dim { filter: grayscale(.5) opacity(.75); }
.hand-empty { font-family: var(--hand); font-size: 22px; color: var(--ink-3); padding: 12px 0 0 6px; }
/* « Tri » (27/09/2026) : trois cartes à CHOISIR. L'éventail de l'ancienne main
   les empilait les unes sur les autres — on n'en lisait qu'une. Ici elles sont
   côte à côte, entières, et se soulèvent au survol. */
.hand.choix { flex-direction: row; gap: 7px; align-items: flex-start; }
.hand.choix .hcard, .hand.choix .hcard:nth-child(even), .hand.choix .hcard:nth-child(odd) {
  width: auto; flex: 1 1 0; min-width: 0; margin: 0 !important; transform: none !important; }
.hand.choix .hcard.sel { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 10px; }
.hand.choix .hcard.sel:hover { transform: translateY(-7px) !important; }
.hand.choix .hcard .nm { font-size: 8px; }
.hand.choix .hcard .kind, .hand.choix .hcard .rare { display: none; }
.hand-use { margin-top: 12px; }
.gcard { position: relative; width: 100%; aspect-ratio: 190 / 250; }
.gcard svg { width: 100%; height: 100%; display: block; }
.gcard .nm { position: absolute; left: 12%; right: 8%; top: 76.5%; transform: rotate(-16.5deg); text-align: center; font-family: var(--title); font-size: 13px; color: #fff; text-shadow: 0 2px 0 var(--ink); line-height: 1.32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .ic { position: absolute; left: 18%; right: 12%; top: 28%; height: 38%; display: grid; place-items: center; font-family: var(--title); font-size: 38px; transform: rotate(-16.5deg); color: var(--ink); }
.gcard .kind { position: absolute; left: 10%; top: 9%; transform: rotate(-16.5deg); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #fff; }

/* Journal */
.journal { flex: 1; min-height: 120px; overflow-y: auto; }
.journal ol { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; }
.journal li { padding: 2px 0 2px 9px; border-left: 4px solid var(--jc, var(--ink-4)); color: var(--ink-2); }
.journal li:first-child { color: var(--ink); font-weight: 700; }

/* Carte piochée / carte adverse */
.modal { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; padding: 16px; }
.modal.off { display: none; }
.wash { position: absolute; inset: 0; background: rgba(251,251,250,.88); backdrop-filter: blur(3px); }
.modal .who { position: relative; font-family: var(--title); font-size: 20px; }
.modal .bigcard { position: relative; width: min(260px, 64vw); animation: cardpop .4s cubic-bezier(.34,1.56,.64,1); }
.modal .bigcard .nm { font-size: 18px; }
.modal .bigcard .ic { font-size: 54px; }
.modal .desc { position: relative; max-width: 360px; text-align: center; font-size: 15px; line-height: 1.45; font-weight: 600; }
.modal .acts { position: relative; display: flex; gap: 10px; }
.modal .acts .btn { width: auto; padding: 13px 28px; }
@keyframes cardpop { from { transform: rotate(-8deg) scale(.6); opacity: 0 } to { transform: rotate(0) scale(1); opacity: 1 } }
.peek { position: absolute; right: 340px; top: 120px; z-index: 50; width: 150px; pointer-events: none; animation: peek 2.6s ease forwards; }
@keyframes peek { 0% { opacity: 0; transform: translateX(40px) rotate(8deg) } 10% { opacity: 1; transform: none } 80% { opacity: 1 } 100% { opacity: 0 } }

.banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 70; pointer-events: none; padding: 16px 30px; border-radius: 18px;
  border: var(--line) solid var(--ink); background: var(--surface); box-shadow: 7px 7px 0 var(--pc, var(--ink)); font-family: var(--title); font-size: 30px; animation: banner 1.4s ease forwards; white-space: nowrap; }
.banner small { display: block; font-family: var(--hand); font-size: 22px; color: var(--red); text-align: center; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9) } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 75% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -58%) } }
.pausebar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; background: var(--yellow); border: var(--line) solid var(--ink); box-shadow: var(--shadow); border-radius: 16px; padding: 14px 26px; font-family: var(--title); font-size: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(90vw, 420px); text-align: center; line-height: 1.25; }
/* Le bandeau explique maintenant POURQUOI et propose de reprendre : il lui
   faut de la place et un bouton cliquable au milieu d'une couche décorative. */
.pausebar button { font-size: 16px; pointer-events: auto; }
@media (max-width: 640px) { .pausebar { font-size: 17px; padding: 12px 18px; } }

#toasts { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: 92%; }
.toast { color: #fff; background: var(--ink); font-weight: 800; font-size: 13px; padding: 9px 16px; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.25); animation: toast 2.8s ease forwards; text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px) } 8% { opacity: 1; transform: none } 85% { opacity: 1 } 100% { opacity: 0 } }

/* Écran moyen paysage (tablette, petit portable) : 3 colonnes resserrées */
@media (min-width: 900px) and (max-width: 1240px) and (orientation: landscape) {
  #game { grid-template-columns: 230px minmax(0, 1fr) 240px; gap: 0 12px; padding: 0 12px 12px; }
  .gl-logo span { display: none; }
  .pchip { padding: 4px 10px 4px 4px; } .pchip b { font-size: 12px; max-width: 90px; } .pchip small { font-size: 9px; }
  .turn-who { font-size: 18px; }
  .panel { padding: 12px; }
  .die { width: 66px; height: 66px; padding: 10px; } .die i { width: 10px; height: 10px; }
  .act-msg { font-size: 16px; }
  .hcard { width: 150px; margin-left: 20px; } .hcard + .hcard { margin-top: -125px; } .hcard:nth-child(even) { margin-left: 40px; }
  .peek { right: 260px; }
}
/* Petit écran ou portrait : pile verticale */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1240px) {
  #game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(60vh, 1fr) auto auto; overflow-y: auto; grid-template-areas: "top" "board" "left" "right"; padding: 0 10px 10px; gap: 8px; }
  .gl-logo span, .turn-tools .sub { display: none; }
  .topbar { gap: 10px; padding: 8px 0 4px; flex-wrap: wrap; }
  .players { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .turn-box { margin-left: auto; }
  .turn-who { font-size: 17px; }
  .gl-left { flex-direction: row; overflow: visible; padding: 0; gap: 10px; }
  .gl-left .panel { padding: 10px 12px; box-shadow: var(--shadow-s); border-width: 3px; }
  .act-panel { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "die msg" "die btns"; column-gap: 12px; text-align: left; align-items: center; }
  .act-panel .die { grid-area: die; width: 62px; height: 62px; padding: 9px; margin: 0; border-width: 3px; box-shadow: var(--shadow-s); }
  .act-panel .die i { width: 10px; height: 10px; }
  .act-panel .act-msg { grid-area: msg; font-size: 15px; }
  .act-panel .act-note { display: none; }
  .act-panel .act-btns { grid-area: btns; flex-direction: row; margin-top: 6px; }
  .act-panel .act-btns .btn { padding: 8px 10px; font-size: 13px; border-width: 3px; box-shadow: var(--shadow-s); }
  .act-panel .lbl, .act-panel .timer { display: none; }
  .goals-panel { display: none; }
  .gl-right { flex-direction: row; align-items: stretch; padding: 0; }
  .hand-panel { flex: 1; }
  .hand { flex-direction: row; overflow-x: auto; padding: 4px 4px 8px; gap: 8px; }
  .hcard, .hcard:nth-child(even) { width: 84px; margin: 0 !important; transform: none !important; flex-shrink: 0; }
  .hcard.sel { outline: 4px solid var(--yellow); border-radius: 10px; }
  .hcard.sel, .hcard:hover { transform: none !important; }
  .hcard .nm { font-size: 7px; } .hcard .ic { font-size: 20px; } .hcard .kind { display: none; }
  .journal-panel { display: none; }
  .peek { right: 16px; top: 90px; width: 110px; }
  .hand-panel > .lbl { margin-bottom: 2px; }
  .hand-use { margin-top: 6px; }
  .hand-use .btn { padding: 8px; font-size: 13px; }
}

/* ── Fin de partie ──────────────────────────────────────────────────────── */
#victory { z-index: 200; background: var(--paper); }
.vic-head { text-align: center; }
.vic-tag { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .14em; }
.vic-name { font-family: var(--title); font-size: 52px; line-height: 1; margin: 6px 0; }
.vic-quote { font-family: var(--hand); font-size: 28px; }
table.rank { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rank th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 5px 6px; }
table.rank th:nth-child(-n+2) { text-align: left; }
table.rank td { padding: 9px 6px; border-top: 2px dashed var(--ink-4); text-align: right; font-family: var(--mono); font-weight: 700; }
table.rank td:nth-child(-n+2) { text-align: left; font-family: var(--type); font-weight: 800; }
table.rank tr.w td { background: var(--soft); }
.chart svg { width: 100%; height: auto; display: block; }

/* ── Tutoriel / règles / collection ─────────────────────────────────────── */
.tuto-dots { display: flex; gap: 5px; } .tuto-dots i { width: 24px; height: 6px; border-radius: 4px; background: var(--ink-4); } .tuto-dots i.on { background: var(--ink); }
.tuto-text { font-size: 15px; line-height: 1.7; color: var(--ink-2); } .tuto-text b { color: var(--ink); }
.sandbox { background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-s); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sandbox .board { --cell: 46px; --gap: 7px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.ccard { display: flex; flex-direction: column; gap: 8px; }
.ccard .d { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ccard .d b { color: var(--ink); }
.rules-list { font-size: 15px; line-height: 1.7; color: var(--ink-2); padding-left: 20px; } .rules-list b { color: var(--ink); }
/* L'écran Règles n'est plus une liste : c'est le livret, construit par
   js/livret.js à partir du moteur. Mêmes blocs que le livret imprimable. */
.rules-doc { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.rules-doc b { color: var(--ink); }
.rules-doc .lv-ch { margin-top: 26px; }
.rules-doc .lv-ch:first-child { margin-top: 10px; }
.rules-doc h3 { font-family: var(--title); font-size: 19px; color: var(--ink); margin: 0 0 8px;
  border-bottom: 3px solid var(--ink); padding-bottom: 5px; }
.rules-doc p { margin: 9px 0; }
.rules-doc ul { margin: 9px 0; padding-left: 20px; } .rules-doc li { margin: 6px 0; }
.rules-doc .lv-enc { border-left: 5px solid var(--red); background: var(--surface); padding: 10px 14px; margin: 14px 0;
  border-top: 1px solid var(--ink-4); border-right: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4); }
.rules-doc .lv-table { width: 100%; border-collapse: collapse; margin: 12px 0; background: var(--surface); font-size: 14px; }
.rules-doc .lv-table th, .rules-doc .lv-table td { border: 2px solid var(--ink); padding: 6px 9px; text-align: left; }
.rules-doc .lv-table th { background: var(--ink); color: #fff; font-family: var(--title); font-size: 12px; letter-spacing: .04em; }
.rules-doc .lv-table tbody tr:nth-child(even) { background: var(--soft); }
#rules-livret { margin-top: 26px; text-decoration: none; }
@media (max-width: 560px) { .rules-doc .lv-table { font-size: 12.5px; } .rules-doc .lv-table th, .rules-doc .lv-table td { padding: 5px 6px; } }

/* ── En ligne / salon ───────────────────────────────────────────────────── */
.code-big { font-family: var(--title); font-size: 56px; letter-spacing: .18em; text-align: center; }
.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; padding: 10px; border: 3px solid var(--ink); border-radius: 10px; background: var(--surface); }
.text-in { width: 100%; font-size: 16px; font-weight: 700; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 12px; background: var(--surface); }
.text-in.code { font-family: var(--title); letter-spacing: .3em; text-transform: uppercase; text-align: center; font-size: 26px; }
.lobby-seat { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--surface); font-weight: 800; }
.lobby-seat .st { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .lobby-seat .st.on { color: var(--ok); }
.lobby-seat button { padding: 5px 10px; font-size: 12px; font-weight: 800; border-radius: 9px; border: 2px solid var(--ink); background: var(--surface); cursor: pointer; }
.warn-box { border: 3px dashed var(--red); border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.55; background: #fff5f5; }
.warn-box code { font-family: var(--mono); background: var(--soft); padding: 1px 5px; border-radius: 4px; }

/* ── Réglages ───────────────────────────────────────────────────────────── */
.switch { width: 52px; height: 30px; border-radius: 16px; border: 3px solid var(--ink); background: var(--soft); position: relative; cursor: pointer; flex-shrink: 0; }
.switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); transition: left .15s; }
.switch.on { background: var(--ok); } .switch.on i { left: 24px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }


/* ── v0.7 : cartes rares ─────────────────────────────────────────────────── */
.gcard .rare{position:absolute;top:6%;right:7%;font:700 .52em/1 'Archivo Black',system-ui,sans-serif;
  letter-spacing:.09em;color:#f5b800;-webkit-text-stroke:.9px #111;paint-order:stroke;
  transform:rotate(-16.56deg);transform-origin:right top;pointer-events:none}
.tag-rare{display:inline-block;font:700 .82em/1.5 system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#111;background:#f5b800;border:2px solid #111;padding:0 6px}


/* ═══ COMPTE ET CLASSEMENT (27/09/2026) ═══════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-t { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); padding: 8px 6px; text-align: center; }
.stat-t b { display: block; font-family: var(--title); font-size: 21px; line-height: 1.1; }
.stat-t span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.mp-ligne { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--ink-4); font-size: 13.5px; }
.mp-ligne:last-child { border-bottom: none; }
.mp-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mp-plateau { width: 56px; flex: none; border: 2px solid var(--ink); border-radius: 8px; background: var(--surface);
  padding: 3px 3px 1px; cursor: pointer; display: block; transition: transform .08s, box-shadow .08s; }
.mp-plateau:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
.mp-plateau:active { transform: translate(1px, 1px); box-shadow: none; }
.mp-plateau svg { width: 100%; height: auto; display: block; }
.mp-plateau span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 2px 0 1px; }
.mp-issue { font-family: var(--title); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid var(--ink); border-radius: 6px; padding: 1px 7px; }
.mp-issue.gagne { background: var(--green); color: #fff; }
.mp-issue.perdu { background: var(--surface); color: var(--ink-2); }
.mp-d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.mp-info { width: 100%; color: var(--ink-2); line-height: 1.45; }
table.cl { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px;
  border: var(--line) solid var(--ink); }
table.cl th, table.cl td { border-bottom: 1px solid var(--ink-4); padding: 8px 10px; text-align: left; }
table.cl th { background: var(--ink); color: #fff; font-family: var(--title); font-size: 12px; letter-spacing: .05em; border-bottom: none; }
table.cl td:first-child { font-family: var(--mono); color: var(--ink-3); width: 2.5em; }
/* Sa propre ligne se repère d'un coup d'oeil : c'est la première chose qu'on
   cherche dans un classement. Doublée d'un trait, pas seulement d'une couleur. */
table.cl tr.moi { background: var(--yellow-l); box-shadow: inset 4px 0 0 var(--ink); }
table.cl tr.moi td { font-weight: 700; }
table.cl tbody tr:last-child td { border-bottom: none; }
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  table.cl { font-size: 12.5px; } table.cl th, table.cl td { padding: 6px 6px; }
  table.cl th:nth-child(4), table.cl td:nth-child(4),
  table.cl th:nth-child(6), table.cl td:nth-child(6) { display: none; }
  .mp-plateau { width: 48px; }
}

/* ── LA LANGUE (27/09/2026) ───────────────────────────────────────────────
   Le bouton porte l'icône dessinée ET le nom de la langue écrit dans cette
   langue : à 20 px l'icône seule ne suffit pas à quelqu'un qui découvre
   l'écran, et le nom écrit évite d'ouvrir la fenêtre pour vérifier.
   L'icône est décorative — c'est le bouton qui reçoit les clics (§ 4 duodecies). */
.lang-row { display: flex; justify-content: flex-end; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px 6px 8px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--type); font-weight: 700; font-size: 14px; color: var(--ink); }
.lang-btn:hover { background: var(--soft); }
.lang-btn .lang-ic { width: 22px; height: 22px; display: block; flex: 0 0 22px; pointer-events: none; }
.lang-btn .lang-ic svg { width: 100%; height: 100%; display: block; }
/* Le globe ne dit pas quelle langue est en cours : c'est le texte qui s'en
   charge. En grand, le nom entier ; en étroit, les deux lettres — mais jamais
   rien, sinon le bouton ne renseigne plus sur rien. */
.lang-btn .lang-code { display: none; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.lang-list { display: flex; flex-direction: column; gap: 8px; }
.lang-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; cursor: pointer;
  background: var(--surface); border: 3px solid var(--ink); border-radius: 14px; font-family: var(--title); font-size: 17px; color: var(--ink); text-align: left; }
.lang-opt:hover { background: var(--soft); }
.lang-opt.on { background: var(--ink); color: #fff; }
.lang-opt.on .muted { color: #cfcabb; }
.lang-opt .lang-tag { flex: 0 0 auto; min-width: 34px; text-align: center; padding: 3px 7px; border: 2px solid var(--ink); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; pointer-events: none; }
.lang-opt.on .lang-tag { border-color: #fff; }
.lang-opt .muted { margin-left: auto; font-size: 11px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 520px) { .lang-btn .lang-nom { display: none; } .lang-btn .lang-code { display: inline; } .lang-btn { padding: 6px 10px 6px 8px; } }