/* =========================================================================
   POTOS — PROPRIO 2099 : écran de jeu (refonte v2, docs/proprio-v2.md §7) — Cyber-Néon
   • Mise en page : barre fine (chrono, qui joue, tour) + adversaires · plateau · zone « MOI »
     · zone du pouce. Grand écran : plateau à gauche, colonne de droite (MOI, fiche, journal).
   • Plateau GÉNÉRIQUE : grille posée par js/game-ui.js (--pr-cols / --pr-rows, rangées longues
     pour les coins et les côtés), --tile = largeur d'une case de côté (px, mesurée).
   • Fluidité (docs/fluidite.md) : seuls transform / opacity sont animés ; lueurs et liserés
     statiques ; jamais « classe d'état + balise nue » dans un sélecteur ; aucun backdrop-filter.
   Fin de fichier : réglages du salon de type « num » (compteur) et « map » (choix du plateau).
   ========================================================================= */
@layer theme, base, components, utilities;

@layer components {
  /* ======================= Barre du haut ======================= */
  #screen-game .game-top {
    position: sticky; top: 0; z-index: 30; display: grid; gap: 2px; padding: 4px 8px 6px;
    background: rgba(5, 8, 20, .96); border-bottom: 1px solid var(--line);
  }
  .gt-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
  /* Glyphes à 20 px comme les boutons d'icône du salon et de l'accueil : ← et 🔊 y sont déjà mis en forme à cette
     taille (à 16 px, chaque emoji repassait par la police de secours au lancement : ≈ 20 ms sur mobile) */
  .gt-row .icon-btn { position: relative; width: 38px; height: 38px; flex: none; font-size: 20px; }
  /* Cibles tactiles ≥ 44 px sans grossir le dessin : zone de toucher invisible autour des petits boutons */
  .gt-row .icon-btn::after, .me-cash::after, .me-set::after { content: ""; position: absolute; inset: -3px; }
  .me-cash::after { inset: -6px -2px; }
  .me-set::after { inset: -7px -2px; }
  .gt-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 600 .86rem/1.1 var(--font-display); white-space: nowrap; overflow: hidden; }
  .gt-clock { flex: none; font: 700 .82rem/1 var(--font-hud); color: var(--warn); font-variant-numeric: tabular-nums; }
  .gt-clock:empty { display: none; }
  .gt-clock.is-hot { color: var(--danger); }
  /* Qui joue, sur 2 lignes (tient dans les 38 px de la rangée) : le NOM du joueur actif a toute la largeur
     (sur une ligne, « Fromage Chaotique joue… » était coupé en « Fromage Chaotiq… » sur un téléphone de 375 px),
     dessous, en petit : le chrono du tour (#gt-clock, placé là par js/game.js) et le statut (« joue… »).
     Sans nom (« À toi ! ») : une seule ligne, chrono compris. */
  .gt-who { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; color: var(--text); border-left: 3px solid var(--pc, var(--accent)); padding-left: 7px; }
  .gt-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: inherit; }
  .gt-l2 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .gt-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .gt-name + .gt-l2 { margin-top: 1px; font-size: .8em; color: var(--muted); }
  .gt-round { flex: none; padding: 4px 9px; font: 700 .72rem/1 var(--font-hud); letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 99px; }
  .gt-round.is-last { color: var(--warn); border-color: rgb(var(--warn-rgb) / .6); }
  /* Téléphone : puce du tour plus compacte (≈ 15 px de plus pour le nom du joueur actif) */
  @media (max-width: 420px) { .gt-round { padding: 4px 6px; font-size: .66rem; letter-spacing: 0; } }

  .turn-timer { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: rgba(130, 180, 255, .1); overflow: hidden; }
  .turn-timer i { display: block; height: 100%; background: var(--ok); transform-origin: left center; transform: scaleX(0); }
  .turn-timer i[data-level="warn"] { background: var(--warn); }
  .turn-timer i[data-level="hot"] { background: var(--danger); }

  /* Adversaires : avatar à liseré de couleur + argent ; toucher = filtre sur le plateau */
  .hud { display: flex; gap: 6px; padding: 2px 2px 3px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .hud::-webkit-scrollbar { display: none; }
  /* « Mes biens » reste collé à gauche quand la rangée défile (6 joueurs et plus) : jamais à moitié coupé */
  .hud-mine {
    position: sticky; left: 0; z-index: 3;
    flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; min-height: 44px; cursor: pointer;
    font: 700 .74rem/1.05 var(--font-display); color: var(--accent); white-space: nowrap;
    background: linear-gradient(rgb(var(--accent-rgb) / .07), rgb(var(--accent-rgb) / .07)), #050816;
    border: 1px dashed rgb(var(--accent-rgb) / .55); border-radius: 12px; box-shadow: 6px 0 8px -4px rgba(5, 8, 22, .95);
  }
  .hud-mine.is-on { color: var(--on-neon); background: var(--accent); border-style: solid; }
  .hud-mine:active { transform: scale(.95); transition-duration: 0s; }
  .hud-chip {
    --pc: var(--accent);
    position: relative; flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 3px 9px 3px 3px;
    border-radius: 12px; background: rgba(130, 180, 255, .06); border: 1px solid var(--line);
    box-shadow: inset 0 -2px 0 var(--pc);
  }
  .hud-hit { position: absolute; inset: -1px; z-index: 2; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hud-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hud-chip:active { transform: scale(.95); transition-duration: 0s; }
  .hud-av { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #31438F, #151E4A 75%); box-shadow: 0 0 0 2px var(--pc); }
  .hud-av > svg { width: 100%; height: 100%; border-radius: 50%; }
  .hud-av > .hud-jail, .hud-av > .hud-off { position: absolute; z-index: 1; font-style: normal; line-height: 1; pointer-events: none; font-size: 12px; }
  .hud-jail { top: -5px; left: -5px; }
  .hud-off { top: -5px; right: -6px; }
  .hud-av > [hidden] { display: none; }
  /* Pastille du joueur (la même que sur ses cases) et motif de son liseré */
  /* Pendue sous l'avatar (au centre) : à droite, elle recouvrait le nombre de biens */
  .hud-tag {
    position: absolute; z-index: 1; left: 50%; bottom: -6px; translate: -50% 0; min-width: 18px; padding: 1px 3px; text-align: center; pointer-events: none;
    font: 800 9px/1.1 var(--font-display); font-style: normal; letter-spacing: -.02em; color: #0A0F24; background: var(--pc); border-radius: 99px;
    box-shadow: 0 0 0 1.5px rgba(3, 6, 18, .9);
  }
  .hud-tag:empty { display: none; }
  .hud-chip:is([data-os="4"], [data-os="5"], [data-os="6"], [data-os="7"]) .hud-tag { border-radius: 2px; }
  .hud-chip:is([data-os="1"], [data-os="2"], [data-os="3"], [data-os="5"], [data-os="6"], [data-os="7"]) .hud-av { box-shadow: none; outline: 2px solid var(--pc); }
  .hud-chip:is([data-os="1"], [data-os="5"]) .hud-av { outline-style: dashed; }
  .hud-chip:is([data-os="2"], [data-os="6"]) .hud-av { outline-style: dotted; }
  .hud-chip:is([data-os="3"], [data-os="7"]) .hud-av { outline: 4px double var(--pc); }
  .hud-ring { display: none; }
  .hud-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.05; }
  .hud-name { display: none; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 600; color: var(--muted); }
  .hud-bot { font-style: normal; font-size: .85em; }
  .hud-cash { font: 700 .86rem/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
  .hud-props { font-size: .62rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .hud-chip.is-turn { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
  .hud-chip.is-acting { border-color: color-mix(in srgb, var(--pc) 70%, transparent); }
  .hud-chip.is-filter { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 26%, transparent); box-shadow: inset 0 -3px 0 var(--pc), 0 0 0 1px var(--pc); }
  .hud-chip.is-out { opacity: .4; }
  .hud-chip.is-jail .hud-av { opacity: .8; }
  .hud-chip.is-off .hud-name { opacity: .7; }
  .is-bump { animation: react .45s var(--spring); }
  @media (min-width: 640px) { .hud-name { display: block; } }

  /* ======================= Mise en page ======================= */
  #screen-game .game-main {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 1360px; margin: 0 auto; padding: 6px 4px 18px;
    grid-template-areas: "board" "me" "actions" "react";
  }
  #screen-game .board-wrap { grid-area: board; display: grid; place-items: center; min-width: 0; }
  #screen-game .pr-me { grid-area: me; }
  #screen-game .action-panel { grid-area: actions; }
  #screen-game .pr-reacts { grid-area: react; }
  #screen-game .pr-side-sheet { grid-area: side; display: contents; }
  #screen-game .feed { display: none; }
  @media (min-width: 1024px) {
    #screen-game .game-main {
      grid-template-columns: minmax(0, 1fr) 380px; column-gap: 22px; row-gap: 10px; padding: 14px 20px 22px; align-items: start;
      grid-template-areas: "board me" "board side" "actions side" "react feed";
      grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    #screen-game .pr-side-sheet { display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
    #screen-game .feed { display: grid; grid-area: feed; max-height: 140px; }
    #screen-game .action-panel { width: min(100%, 640px); justify-self: center; }
    #screen-game .pr-reacts { justify-self: center; }
  }
  /* Ordinateur (paysage) : TOUT tient dans l'écran, sans défilement (1280×720 … 1920×1080).
     Barre du haut sur une ligne (adversaires au milieu) ; 3 colonnes : journal + réactions · plateau carré
     (le plus grand possible en hauteur) · MOI + fiche + zone d'action. */
  @media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
    #screen-game:not([hidden]) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
    #screen-game .game-top { flex: none; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; }
    #screen-game .gt-row { display: contents; }
    #screen-game .gt-status { flex: 0 1 240px; }
    #screen-game .hud { order: 1; flex: 1 1 0; min-width: 0; justify-content: safe center; }
    #screen-game .gt-round, #screen-game .gt-round ~ .icon-btn { order: 2; }
    #screen-game .game-main {
      flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1880px; padding: 12px 16px 14px; column-gap: 18px; row-gap: 10px; align-items: stretch;
      grid-template-columns: minmax(190px, 1fr) minmax(0, calc(100dvh - 80px)) clamp(320px, 26vw, 420px);
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas: "feed board me" "feed board side" "react board actions";
    }
    /* Plateau : largeur de sa colonne, bornée par la hauteur disponible (100dvh − barre 54 px − marges 26 px).
       Pas de conteneur de taille ici : chaque changement de la grille re-mesurerait tout le plateau (≈ 100 ms). */
    #screen-game .board-wrap { min-height: 0; }
    #screen-game .board { width: min(100%, calc((100dvh - 80px) * var(--pr-ar, 1))); min-width: 0; }
    #screen-game .feed { align-content: start; max-height: none; min-height: 0; }
    #screen-game .pr-reacts { align-self: end; justify-self: stretch; flex-wrap: wrap; }
    #screen-game .action-panel { width: 100%; align-self: end; }
    #screen-game .pr-side-sheet { min-height: 0; }
  }

  /* ======================= Plateau ======================= */
  .board {
    --tile: var(--pr-unit, 28px);
    --band: var(--pr-band, 8px);
    --pb-bg: var(--sk-bg, #070B22);
    --pb-tile: var(--sk-surface, #0C1333);
    --pb-ink: var(--sk-ink, #EAF4FF);
    --pb-accent: var(--sk-accent, #22F2FF);
    --pb-accent-2: var(--sk-accent-2, #FF2BD1);
    --pb-glow: var(--sk-glow, #9D6BFF);
    container-type: inline-size; position: relative; width: min(100%, calc(100dvh - 330px), 820px); min-width: 280px; aspect-ratio: 1;
    border-radius: 16px; border: 1px solid color-mix(in srgb, var(--pb-accent) 45%, transparent);
    background:
      radial-gradient(70% 70% at 50% 50%, color-mix(in srgb, var(--pb-glow) 18%, transparent), transparent 70%),
      linear-gradient(160deg, color-mix(in srgb, var(--pb-bg), #fff 5%), var(--pb-bg));
    box-shadow: 0 0 0 3px rgba(5, 8, 20, .85), 0 0 40px -14px color-mix(in srgb, var(--pb-accent) 50%, transparent), 0 24px 48px -24px rgba(0, 0, 0, .9);
  }
  @media (max-width: 1023.98px) { .board { width: min(100%, 640px); } }
  @media (min-width: 1024px) { .board { width: min(100%, calc(100dvh - 262px), 820px); } }
  .board.is-hot { border-color: var(--danger); animation: heartbeat .8s ease-in-out infinite; }
  .board.is-shaking { animation: shake .4s ease-in-out; }
  .board-grid, .pawns { contain: strict; }
  .board-grid {
    position: absolute; inset: 0; display: grid;
    grid-template-columns: var(--pr-cols, repeat(11, minmax(0, 1fr))); grid-template-rows: var(--pr-rows, repeat(11, minmax(0, 1fr)));
    gap: max(1px, calc(var(--tile) * .05)); padding: calc(var(--tile) * .07);
  }

  /* ---------- Cases (contenu en unités de LA case : container-type size) ---------- */
  .tile {
    --gc: var(--accent); --oc: transparent;
    container-type: size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-width: 0; overflow: hidden; padding: 2px; color: var(--pb-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), var(--pb-tile);
    border: 1px solid rgba(130, 200, 255, .22); border-radius: calc(var(--tile) * .14);
    transition: opacity .25s ease;
  }
  .tile:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 1px; z-index: 4; }
  .tile:active { transform: scale(.93); transition-duration: 0s; z-index: 2; }
  .tile.type-prop { background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 10%, transparent), transparent 70%), var(--pb-tile); }
  .t-ico { font-size: 38cqmin; line-height: 1; }
  /* Côtés gauche / droit (cases larges et basses) : icône et valeur côte à côte */
  .tile:is(.side-l, .side-r):not(.type-jail) { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 3px; }
  .tile:is(.side-l, .side-r) .t-name { width: 100%; order: 3; }
  .t-name {
    display: none; max-width: 100%; overflow: hidden; text-align: center; color: color-mix(in srgb, var(--pb-ink) 80%, transparent);
    font: 600 clamp(7px, 15cqmin, 11px)/1.05 var(--font-ui); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
  }
  .t-val { font: 700 max(8px, 27cqmin)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; color: var(--pb-accent); font-variant-numeric: tabular-nums; }
  .t-val.is-rent { color: #fff; }
  .t-val.is-rent::before { content: "⤷"; margin-right: 1px; font-size: .8em; opacity: .75; }
  .type-tax .t-val { color: #FF9DB5; }
  .type-start .t-val { color: var(--ok); }
  .t-pot { font: 700 max(7px, 17cqmin)/1 var(--font-display); color: var(--warn); white-space: nowrap; }
  @container (min-width: 50px) and (min-height: 50px) {
    .t-name { display: -webkit-box; }
    .t-ico { font-size: 28cqmin; }
    .t-val { font-size: max(9px, 19cqmin); }
  }

  /* Bande de quartier (côté intérieur), maisons, hôtel */
  .t-band { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1px; background: var(--gc); }
  .side-b .t-band, .side-c .t-band { left: 0; right: 0; top: 0; height: var(--band); }
  .side-t .t-band { left: 0; right: 0; bottom: 0; height: var(--band); }
  .side-l .t-band { top: 0; bottom: 0; right: 0; width: var(--band); flex-direction: column; }
  .side-r .t-band { top: 0; bottom: 0; left: 0; width: var(--band); flex-direction: column; }
  .side-b.has-band, .side-b.type-station, .side-b.type-utility { padding-top: calc(var(--band) + 1px); }
  .side-t.has-band, .side-t.type-station, .side-t.type-utility { padding-bottom: calc(var(--band) + 1px); }
  .side-l.has-band, .side-l.type-station, .side-l.type-utility { padding-right: calc(var(--band) + 1px); }
  .side-r.has-band, .side-r.type-station, .side-r.type-utility { padding-left: calc(var(--band) + 1px); }
  .t-lvl { display: flex; gap: max(1px, calc(var(--band) * .14)); align-items: center; justify-content: center; }
  .side-l .t-lvl, .side-r .t-lvl { flex-direction: column; }
  .t-lvl .th { width: calc(var(--band) * .55); height: calc(var(--band) * .55); background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
  .t-lvl .t-hotel { display: block; width: calc(var(--band) * 1.5); height: calc(var(--band) * .65); background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 2px var(--danger); }
  .side-l .t-lvl .t-hotel, .side-r .t-lvl .t-hotel { width: calc(var(--band) * .65); height: calc(var(--band) * 1.5); }
  /* Quartier complet : bande plus épaisse + 👑 (artère dominée : ½👑) */
  .tile.is-full { --band: calc(var(--pr-band, 8px) * 1.35); }
  .tile.is-full .t-band::after, .tile.is-major .t-band::after {
    content: "👑"; position: absolute; font-size: calc(var(--band) * .95); line-height: 1; right: 1px; top: 50%; translate: 0 -50%;
  }
  .tile.is-major .t-band::after { content: "½👑"; font-size: calc(var(--band) * .8); opacity: .9; }
  .side-l .t-band::after, .side-r .t-band::after { right: auto !important; top: auto !important; bottom: 1px; left: 50%; translate: -50% 0 !important; }
  /* Quartier bâti : les maisons disent déjà « complet » ; la couronne les recouvrait sur les petites cases */
  .tile.is-full:not([data-lvl="0"]) .t-band::after { content: none; }

  /* Gares ●●○○ et compagnies ●○ : échelle du propriétaire dans la bande */
  .t-scale { background: rgba(232, 241, 255, .14); gap: max(1px, calc(var(--band) * .18)); }
  .t-scale .sd { width: calc(var(--band) * .5); height: calc(var(--band) * .5); border-radius: 50%; border: 1px solid rgba(232, 241, 255, .6); }
  .tile[data-n="1"] .sd:nth-child(-n+1), .tile[data-n="2"] .sd:nth-child(-n+2),
  .tile[data-n="3"] .sd:nth-child(-n+3), .tile[data-n="4"] .sd:nth-child(-n+4) { background: var(--oc); border-color: #fff; }
  .type-station .t-ico, .type-utility .t-ico { font-size: 42cqmin; }

  /* Case possédée : liseré + teinte de la couleur du propriétaire, pastille ; à moi : ★ et liseré épais */
  .tile.is-owned {
    border: 2.5px solid var(--oc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--oc) 22%, transparent), color-mix(in srgb, var(--oc) 10%, transparent)), var(--pb-tile);
  }
  .tile.is-mine { border-width: 3.5px; box-shadow: 0 0 calc(var(--tile) * .18) -3px var(--oc); }
  /* Pastille : 2 lettres distinctes par joueur (★ pour moi) */
  .t-own {
    position: absolute; z-index: 2; display: none; place-items: center; min-width: max(14px, 38cqmin); height: max(11px, 27cqmin); padding: 0 1px;
    font: 800 max(7px, 17cqmin)/1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; color: #0A0F24; background: var(--oc);
    border-radius: 99px; box-shadow: 0 0 0 1px rgba(3, 6, 18, .85);
  }
  .tile.is-mine .t-own { min-width: max(11px, 27cqmin); }
  .tile.is-owned .t-own { display: grid; }
  /* Étoile « à moi » dessinée (forme fixe, jamais animée) : le glyphe ★, absent des polices du site, faisait charger
     une police système de plus au 1er affichage (≈ 25 ms sur mobile ralenti) */
  .pr-star, .tile.is-mine .t-own::before {
    content: ""; display: inline-block; flex: none; width: .9em; height: .9em; background: currentColor;
    clip-path: polygon(50% 0, 61.8% 35.4%, 100% 36.3%, 69.1% 59.5%, 79.4% 95.5%, 50% 75%, 20.6% 95.5%, 30.9% 59.5%, 0 36.3%, 38.2% 35.4%);
  }
  /* Second signe, sans la couleur : motif du liseré (plein, tirets, points, double) et forme de la pastille
     (ronde : sièges 1-4, carrée : sièges 5-8) — data-os = siège du propriétaire (js/game-ui.js, seatOf) */
  .tile.is-owned:is([data-os="1"], [data-os="5"]) { border-style: dashed; }
  .tile.is-owned:is([data-os="2"], [data-os="6"]) { border-style: dotted; }
  .tile.is-owned:is([data-os="3"], [data-os="7"]) { border-style: double; border-width: 3.5px; }
  .tile:is([data-os="4"], [data-os="5"], [data-os="6"], [data-os="7"]) .t-own { border-radius: 2px; }
  .side-b .t-own, .side-c .t-own { right: 1px; bottom: 1px; }
  .side-t .t-own { right: 1px; top: 1px; }
  .side-l .t-own { left: 1px; top: 1px; }
  .side-r .t-own { right: 1px; top: 1px; }
  /* Petites cases (mobile : ≈ 20 × 21 px utiles une fois possédées) : la pastille posée dans un coin masquait
     l'icône ou le loyer. Elle prend la place de l'icône (devenue illisible, ≈ 6 px) : pastille du propriétaire
     au-dessus, loyer en dessous, rien ne se chevauche. Cases plus grandes (ordinateur) : pastille dans le coin. */
  @container (max-width: 39.98px) or (max-height: 39.98px) {
    .tile.is-owned:not(.corner) { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 1px; }
    .tile.is-owned .t-ico { display: none; }
    .tile.is-owned .t-own { position: static; flex: none; order: -1; min-width: max(13px, 50cqmin); height: max(11px, 40cqmin); font-size: max(7px, 26cqmin); }
    .tile.is-owned.is-mine .t-own { min-width: max(11px, 40cqmin); }
    .tile.is-owned .t-val { max-width: 100%; }
  }

  /* Hypothèque : grisé + hachures + 🔒 */
  .t-mort {
    position: absolute; inset: 0; z-index: 2; display: none; place-items: center; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(135deg, rgba(3, 6, 18, .7) 0 3px, rgba(130, 140, 170, .28) 3px 6px);
  }
  .t-mort b { font-size: max(9px, 30cqmin); line-height: 1; }
  .tile.is-mortgaged .t-mort { display: grid; }
  .tile.is-mortgaged .t-own { z-index: 3; } /* le propriétaire reste lisible par-dessus les hachures */
  .tile.is-mortgaged .t-ico, .tile.is-mortgaged .t-name { opacity: .45; }
  .tile.is-mortgaged .t-val { color: var(--muted); }
  .tile.is-mortgaged .t-val::before { content: none; }
  .tile.is-storm .t-val.is-rent { color: #FFB199; }

  /* Filtre « biens d'un joueur » : opacité seulement */
  .board.is-filtering .tile:not(.is-hl) { opacity: .35; }

  /* Cases spéciales */
  .tile.corner { background: radial-gradient(circle at 50% 55%, rgb(var(--tc, var(--accent-3-rgb)) / .26), transparent 76%), color-mix(in srgb, var(--pb-tile), #fff 5%); }
  .tile.corner .t-ico { font-size: 46cqmin; }
  .type-start { --tc: var(--ok-rgb); }
  .type-free { --tc: var(--warn-rgb); }
  .type-gotojail { --tc: var(--blue-rgb); }
  .type-jail { --tc: var(--orange-rgb); }
  .type-card { --tc: var(--accent-2-rgb); }
  .type-tax { --tc: var(--danger-rgb); }
  .type-current { --tc: 46 242 194; }
  .tile:is(.type-card, .type-tax, .type-current) { background: radial-gradient(circle at 50% 55%, rgb(var(--tc) / .2), transparent 78%), var(--pb-tile); border-color: rgb(var(--tc) / .5); }
  .type-station, .type-utility { background: linear-gradient(180deg, rgba(232, 241, 255, .09), transparent 70%), var(--pb-tile); }
  .tile.is-dock .t-ico { text-shadow: 0 0 6px var(--pb-accent); }
  .tile.is-junction { background: linear-gradient(transparent 44%, rgb(var(--ok-rgb) / .35) 44% 56%, transparent 56%), linear-gradient(90deg, transparent 44%, rgb(var(--ok-rgb) / .35) 44% 56%, transparent 56%), var(--pb-tile); }
  .t-cur b { font: 800 max(8px, 24cqmin)/1 var(--font-display); color: #2EF2C2; }
  .board:not([data-tide="down"]) .t-cur .down, .board[data-tide="down"] .t-cur .up { display: none; }
  .tile.type-jail { padding: 0; }
  .t-cell {
    position: absolute; top: 0; right: 0; width: 64%; height: 64%; display: grid; place-items: center;
    background: repeating-linear-gradient(90deg, transparent 0 17%, rgb(var(--orange-rgb) / .5) 17% 21%), rgb(var(--orange-rgb) / .12);
    border-left: 1px solid rgb(var(--orange-rgb) / .7); border-bottom: 1px solid rgb(var(--orange-rgb) / .7); border-bottom-left-radius: 10cqmin;
  }
  .tile.corner .t-cell .t-ico { font-size: 34cqmin; }
  .t-visit { position: absolute; left: 2px; bottom: 2px; font: 700 max(6px, 12cqmin)/1 var(--font-display); text-transform: uppercase; color: var(--muted); }

  /* Lueurs : dessinées une fois sur un pseudo-élément, seule l'opacité est animée */
  .tile:is(.is-landed, .is-stamp)::before,
  .tile:is(.can-build, .is-offer, .is-glow)::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; }
  .tile:is(.is-landed, .is-stamp)::before { background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); animation: tile-flash .5s ease-out; }
  .tile:is(.can-build, .is-offer, .is-glow)::after { box-shadow: inset 0 0 0 2px var(--fx), inset 0 0 calc(var(--tile) * .3) var(--fx); }
  .tile.can-build { --fx: var(--warn); }
  .tile.can-build::after { animation: glow-pulse 1.1s ease-in-out infinite alternate; }
  .tile.is-offer, .tile.is-glow { --fx: var(--gc); z-index: 3; }
  .tile.is-offer::after { animation: glow-pulse 1s ease-in-out infinite alternate; }
  .tile.is-glow::after { animation: glow-pulse .45s ease-in-out 4 alternate; }
  .tile.is-landed { animation: tile-land .5s var(--spring); }
  .tile.is-stamp { animation: pr-stamp .55s var(--spring); }

  /* ---------- Calque des règles propres (statique) ---------- */
  .board-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; contain: strict; }
  .fx-links { position: absolute; inset: 0; overflow: visible; }
  .fx-links path { fill: none; stroke: var(--pb-accent); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; opacity: .45; }
  .fx-storm { position: absolute; border-radius: 10px; opacity: 0; transition: opacity .6s ease; background: rgba(255, 92, 40, .2); box-shadow: inset 0 0 0 2px rgba(255, 120, 60, .75); }
  .fx-storm.is-on { opacity: 1; }
  .fx-storm.is-next { opacity: 1; background: none; box-shadow: none; outline: 2px dashed rgba(255, 140, 80, .7); outline-offset: -3px; }

  /* ---------- Centre ---------- */
  .board-center {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1cqw;
    contain: strict; padding: 2cqw; overflow: hidden; border-radius: 2cqw; border: 1px solid color-mix(in srgb, var(--pb-accent) 20%, transparent);
    background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--pb-glow) 22%, transparent), transparent 64%), color-mix(in srgb, var(--pb-bg), #fff 4%);
  }
  .bc-top { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; min-height: 4cqw; }
  .bc-chip { padding: .7cqw 2cqw; font: 700 max(9px, 2.5cqw)/1.15 var(--font-display); white-space: nowrap; color: var(--text); background: rgba(3, 6, 18, .7); border: 1px solid color-mix(in srgb, var(--pb-accent) 45%, transparent); border-radius: 99px; }
  .bc-pot { color: var(--warn); border-color: rgb(var(--warn-rgb) / .6); }
  .bc-tide b { font-weight: 700; color: #2EF2C2; }
  .board:not([data-tide="down"]) .bc-tide .down, .board[data-tide="down"] .bc-tide .up { display: none; }
  .bc-storm { color: #FFB199; border-color: rgba(255, 120, 60, .7); }
  .bc-mark {
    position: absolute; top: 50%; left: 50%; translate: -50% -50%; rotate: -14deg; display: flex; flex-direction: column; align-items: center; line-height: .95;
    pointer-events: none; user-select: none; white-space: nowrap; font: 900 7cqw/1 var(--font-hud); letter-spacing: .06em; color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--pb-accent) 18%, transparent);
  }
  .bc-mark small { font: 700 2.4cqw/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--pb-accent) 32%, transparent); -webkit-text-stroke: 0; }
  .ticker {
    position: relative; max-width: 100%; max-height: 12cqw; overflow: hidden; padding: 1.2cqw 2.4cqw; text-align: center;
    font: 600 max(11px, 3.1cqw)/1.25 var(--font-ui); color: var(--text); background: rgba(3, 6, 18, .78);
    border: 1px solid var(--line-2); border-left: 3px solid var(--pb-accent); border-radius: 1.6cqw;
  }
  .ticker:empty { visibility: hidden; }
  .ticker.is-new { animation: ticker-in .4s var(--spring); }
  .bc-loop { display: grid; place-items: center; pointer-events: none; }
  .bc-loop span { font: 900 5cqw/1 var(--font-hud); letter-spacing: .14em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--pb-accent) 22%, transparent); }
  .bc-deco { display: grid; place-content: center; justify-items: center; gap: .8cqw; text-align: center; border-radius: 2cqw; border: 1px dashed color-mix(in srgb, var(--pb-accent) 25%, transparent); }
  .bc-deco-ico { font-size: 7cqw; line-height: 1; }
  .bc-deco small { font: 700 max(9px, 2.2cqw)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .bc-gps { font: 700 max(10px, 2.6cqw)/1.15 var(--font-display); color: var(--ok); }

  /* ---------- Dés ---------- */
  .dice-zone { position: relative; display: flex; gap: 3.6cqw; min-height: 9.5cqw; perspective: 70cqw; } /* hauteur réservée : dés posés à part */
  .die { position: relative; width: 9.5cqw; height: 9.5cqw; }
  .cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.2, .8, .25, 1.04); }
  .face {
    position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 15%;
    background: linear-gradient(145deg, #1D2A5C, #0A1030); border: .35cqw solid color-mix(in srgb, var(--pb-accent) 85%, transparent); border-radius: 22%; backface-visibility: hidden;
  }
  .f1 { transform: translateZ(4.75cqw); }
  .f6 { transform: rotateY(180deg) translateZ(4.75cqw); }
  .f2 { transform: rotateY(90deg) translateZ(4.75cqw); }
  .f5 { transform: rotateY(-90deg) translateZ(4.75cqw); }
  .f3 { transform: rotateX(90deg) translateZ(4.75cqw); }
  .f4 { transform: rotateX(-90deg) translateZ(4.75cqw); }
  .pip { width: 70%; height: 70%; margin: auto; border-radius: 50%; background: var(--pb-accent); visibility: hidden; }
  .pip.on { visibility: visible; }
  .f1 .pip { background: var(--pb-accent-2); }
  .die.is-rolling { animation: dice-hop .95s ease-out; }

  /* ---------- Pions ---------- */
  .pawns { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
  .pawn { position: absolute; left: 0; top: 0; z-index: 3; width: calc(var(--tile) * .62); height: calc(var(--tile) * .62); transition: transform .14s cubic-bezier(.3, .7, .4, 1); will-change: transform; }
  .pawn-in {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #3A4FA6, #141C46 75%);
    border: max(1.5px, calc(var(--tile) * .05)) solid var(--pc); box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    transition: scale .35s var(--spring), opacity .35s ease;
  }
  .pawn-in > svg { width: 90%; height: 90%; }
  .pawn.is-turn { z-index: 5; }
  .pawn.is-turn .pawn-in { border-color: #fff; box-shadow: 0 0 0 max(2px, calc(var(--tile) * .06)) var(--pc), 0 1px 3px rgba(0, 0, 0, .8); }
  .pawn.hop .pawn-in { animation: pawn-hop .16s ease-out; }
  .pawn.land .pawn-in { animation: squash .5s var(--spring); }
  .pawn.is-warp .pawn-in { scale: .1; opacity: 0; }
  .pawn:is([data-os="1"], [data-os="5"]) .pawn-in { border-style: dashed; }
  .pawn:is([data-os="2"], [data-os="6"]) .pawn-in { border-style: dotted; }
  .pawn:is([data-os="3"], [data-os="7"]) .pawn-in { border-style: double; border-width: max(3px, calc(var(--tile) * .07)); }
  .pawn.is-out { display: none; }
  .pawn.has-skin .pawn-in { background: none; border: 0; border-radius: 0; box-shadow: none; }
  .pawn.has-skin .pawn-in > .pawn-svg, .pr-board .pawn.has-skin .pawn-in > svg { width: 125%; height: 125%; filter: drop-shadow(0 0 2px var(--pc)) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
  .pawn-gps {
    position: absolute; left: 50%; bottom: 100%; translate: -50% -2px; padding: 1px 5px; white-space: nowrap;
    font: 700 9px/1.2 var(--font-display); color: var(--on-neon); background: var(--ok); border-radius: 99px;
  }
  .pawn-gps[hidden] { display: none; }
  .pawn.is-top .pawn-gps { bottom: auto; top: 100%; translate: -50% 2px; }

  /* ---------- Fenêtre au centre (titre, carte, enchère) ---------- */
  .center-pop { position: relative; z-index: 6; display: grid; place-items: center; padding: 2cqw; background: rgb(var(--bg-rgb) / .9); border-radius: 2cqw; animation: fade-in .2s both; }
  .center-pop[hidden] { display: none; }
  /* Préchauffage (js/game-ui.js, warmHTML) : copie cachée d'une fenêtre, mise en page puis retirée, sans animation */
  .pr-warm { position: absolute; inset: 0; z-index: -1; visibility: hidden; pointer-events: none; contain: layout paint; }
  .pr-warm, .pr-warm * { animation: none !important; transition: none !important; }
  .center-pop.is-full { padding: 6cqw; }
  .pop-card {
    width: 100%; max-width: 62cqw; max-height: 100%; overflow-y: auto; padding: 2.6cqw; text-align: center; color: var(--text);
    /* Jetons : carte lisible en clair (plateau classique) comme en sombre (plateaux payants, toujours sombres) */
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gc, var(--accent)) 55%, transparent);
    border-radius: 2.2cqw; animation: toast-in .35s var(--spring) both;
  }
  .pop-band {
    margin: -2.6cqw -2.6cqw 2cqw; padding: 2cqw; font: 700 max(12px, 3.6cqw)/1.1 var(--font-display); color: #fff;
    background: color-mix(in srgb, var(--gc, var(--accent-3)) 35%, #000); border-bottom: 2px solid var(--gc, var(--accent-3)); border-radius: 2cqw 2cqw 0 0;
  }
  .pop-kicker { margin-bottom: 1.2cqw; font: 600 max(9px, 2.2cqw)/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pr-pop-offer .pr-deed { font-size: max(10px, 2.5cqw); }
  .surprise { animation: card-flip .5s var(--spring) both; }
  .su-text { margin: 1.4cqw 0; font: 700 max(13px, 4cqw)/1.18 var(--font-display); }
  .su-effect { display: inline-block; padding: .7cqw 2.2cqw; font: 700 max(11px, 2.8cqw)/1.2 var(--font-display); border-radius: 99px; color: var(--warn-text); background: rgb(var(--warn-rgb) / .1); border: 1px solid rgb(var(--warn-rgb) / .55); }
  .pr-au-tile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3em 1.2cqw; font-size: max(12px, 3cqw); }
  .pr-au-tile i { font-style: normal; }
  .pr-au-tile small { color: var(--muted); font-size: .85em; }
  .au-bid { margin: 1cqw 0; font: 800 max(22px, 7cqw)/1 var(--font-hud); color: var(--warn-text); }
  .au-bid.is-bump { animation: react .4s var(--spring); }
  .pr-au-lead { font-weight: 600; font-size: max(11px, 2.8cqw); }
  .pr-au-close { margin-top: 1cqw; font: 700 max(10px, 2.4cqw)/1.2 var(--font-display); color: var(--warn-text); }
  .pr-au-close[hidden] { display: none; }
  .au-bar { height: 1.4cqw; min-height: 5px; margin: 1.6cqw 0 0; overflow: hidden; border-radius: 99px; background: rgb(var(--bg-rgb) / .8); border: 1px solid var(--line-2); }
  .au-bar i { display: block; height: 100%; background: var(--danger); transform-origin: left center; }

  .turn-banner {
    position: absolute; z-index: 7; top: 50%; left: 50%; translate: -50% -50%; width: max-content; max-width: 92%; pointer-events: none; text-align: center;
    font: 700 6.4cqw/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #EFFFFF;
    text-shadow: 0 0 2cqw var(--accent), 0 .4cqw 1cqw rgba(0, 0, 0, .9); animation: count-pop 1.2s var(--spring) both;
  }
  .turn-banner.is-me { text-shadow: 0 0 2cqw var(--ok), 0 .4cqw 1cqw rgba(0, 0, 0, .9); }
  .turn-banner.is-bad { color: #FFE9EF; text-shadow: 0 0 2cqw var(--danger), 0 .4cqw 1cqw rgba(0, 0, 0, .9); }

  /* ======================= Zone « MOI » ======================= */
  .pr-me {
    display: grid; gap: 6px; padding: 8px 10px; min-height: 60px; border-radius: 16px; contain: layout paint;
    background: linear-gradient(180deg, rgb(var(--accent-rgb) / .08), rgba(3, 6, 18, .6)), var(--glass-strong); border: 1px solid rgb(var(--accent-rgb) / .35);
  }
  .pr-me:empty { display: none; }
  .pr-me.is-out { opacity: .55; }
  .me-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
  .me-av { align-self: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #31438F, #151E4A 75%); box-shadow: 0 0 0 2px var(--pc, var(--accent)); }
  .me-av > svg { width: 100%; height: 100%; }
  .me-cash {
    position: relative; padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
    font: 800 clamp(1.9rem, 9vw, 2.5rem)/1 var(--font-hud); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgb(var(--accent-rgb) / .45);
  }
  .me-cash:active { transform: scale(.97); transition-duration: 0s; }
  .me-unit { font: 700 1.1rem/1 var(--font-display); color: var(--accent); }
  .me-worth { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .me-gps { flex: none; margin-left: auto; padding: 3px 8px; font: 700 .7rem/1 var(--font-display); color: var(--ok); border: 1px solid rgb(var(--ok-rgb) / .5); border-radius: 99px; background: rgb(var(--ok-rgb) / .08); cursor: pointer; }
  .me-gps:active { transform: scale(.95); transition-duration: 0s; }
  .me-gps[hidden] { display: none; }
  /* Sur plusieurs lignes : gares, compagnies et laissez-passer restent visibles (avant : coupés hors écran) */
  .me-sets { display: flex; flex-wrap: wrap; gap: 8px 5px; padding: 2px 0; }
  .me-set {
    --gc: var(--accent);
    position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 4px 6px; cursor: pointer;
    background: rgba(3, 6, 18, .55); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); border-radius: 8px; color: var(--text);
  }
  .me-set:active { transform: scale(.94); transition-duration: 0s; }
  .me-set.has-mine { border-color: color-mix(in srgb, var(--gc) 75%, transparent); }
  .me-set.is-full { background: color-mix(in srgb, var(--gc) 22%, rgba(3, 6, 18, .6)); border-color: var(--gc); }
  .me-set .mp { width: 7px; height: 16px; border-radius: 2px; border: 1.5px solid color-mix(in srgb, var(--gc) 45%, transparent); }
  .me-set .mp.is-me { background: var(--gc); border-color: var(--gc); }
  .me-set .mp.is-other { border-color: var(--oc); background: repeating-linear-gradient(135deg, transparent 0 2px, color-mix(in srgb, var(--oc) 45%, transparent) 2px 4px); }
  .me-crown { position: absolute; top: -7px; right: -5px; font-size: 12px; line-height: 1; }
  .me-set small { margin-left: 2px; font: 700 .66rem/1 var(--font-display); color: var(--ok); }
  .me-set small.is-hotel { color: #FF9DB5; }
  .me-set.is-scale { --gc: #E8F1FF; gap: 3px; font-size: .8rem; }
  .me-set .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(232, 241, 255, .5); }
  .me-set .dot.is-me { background: var(--accent); border-color: var(--accent); }
  .me-set .dot.is-other { border-color: var(--oc); }
  .me-set.is-card { cursor: default; font: 700 .78rem/1 var(--font-display); }
  @media (min-width: 1024px) { .me-cash { font-size: 2.6rem; } }

  /* ---------- Effets argent ---------- */
  .money-float {
    position: fixed; z-index: 72; left: 0; top: 0; pointer-events: none; font: 700 19px/1 var(--font-display);
    -webkit-text-stroke: 3px rgba(3, 6, 18, .9); paint-order: stroke fill; animation: float-up 1.4s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .money-float.is-big { font-size: 26px; }
  .money-float.plus { color: var(--ok); }
  .money-float.minus { color: #FF7C9C; }
  .fly { position: fixed; z-index: 73; left: 0; top: 0; font-size: 22px; pointer-events: none; transition: transform .65s cubic-bezier(.45, -0.35, .55, 1.35), opacity .2s ease .5s; }

  .feed {
    gap: 6px; overflow-y: auto; padding: 10px 12px; font-size: .82rem; line-height: 1.35; color: var(--muted);
    background: var(--glass-strong); border: 1px solid var(--line); border-radius: var(--r-lg); contain: content;
  }
  .feed li { position: relative; padding-left: 12px; }
  .feed li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 5px; height: 5px; rotate: 45deg; background: var(--line-2); }
  .feed li:first-child { color: var(--text); font-weight: 600; }

  .rank-list { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
  .rank-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(130, 180, 255, .07); border: 1px solid var(--line); font-weight: 600; }
  .rank-list .rk-av { width: 30px; height: 30px; flex: none; }
  .rank-list .rk-av > svg { width: 100%; height: 100%; }
  .rank-list .rk-v { margin-left: auto; font-family: var(--font-display); font-weight: 700; }

  /* ======================= Salon : réglage « num » (compteur − / +) ======================= */
  .set-num { display: grid; gap: 6px; }
  .num-ctl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
  .num-btn {
    min-height: 46px; font: 700 1.4rem/1 var(--font-display); color: var(--text); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
  }
  .num-btn:active { transform: scale(.93); background: rgb(var(--accent-rgb) / .2); transition-duration: 0s; }
  .num-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
  .num-val {
    display: flex; align-items: baseline; justify-content: center; gap: .3em; min-width: 0; padding: 0 8px; cursor: text;
    font: 800 1.35rem/1 var(--font-hud); color: var(--accent-text); font-variant-numeric: tabular-nums;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; align-items: center;
  }
  .num-val small { font: 700 .78rem/1 var(--font-display); color: var(--muted); }
  .num-in { width: 100%; min-width: 0; text-align: center; font: 800 1.3rem/1 var(--font-hud); color: var(--accent-text); background: var(--bg); border: 1px solid var(--accent); border-radius: 12px; outline: none; -moz-appearance: textfield; }
  .num-in::-webkit-outer-spin-button, .num-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .num-quick { display: flex; flex-wrap: wrap; gap: 5px; }
  .num-note { font-size: .72rem; line-height: 1.3; color: var(--muted); }
  .num-note.is-long { color: var(--warn-text); }
  .num-chip { padding: 5px 10px; font: 600 .76rem/1 var(--font-display); color: var(--muted); cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; }
  .num-chip[aria-pressed="true"] { color: var(--on-neon); background: var(--accent); border-color: var(--accent); }
  .num-chip:active { transform: scale(.94); transition-duration: 0s; }
  /* Salon ouvert à tous : « Sans limite » grisé (chrono obligatoire, js/lobby.js zeroOff) */
  .num-chip.is-off { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
  .num-chip.is-off:active { transform: none; }
  /* Préréglage mis en avant à côté du compteur (num.fast, ex. « ⚡ Rapide · 2 pions · ≈ 25 min ») : appui = cette valeur, ré-appui = défaut */
  .num-row { display: flex; gap: 6px; align-items: stretch; }
  .num-row > .num-ctl { flex: 1 1 auto; min-width: 0; }
  .num-fast {
    flex: none; display: grid; align-content: center; justify-items: center; gap: 3px; min-width: 104px; min-height: 46px; padding: 5px 12px;
    font: 700 .95rem/1 var(--font-display); color: var(--accent-text); cursor: pointer; touch-action: manipulation; text-align: center;
    background: rgb(var(--accent-rgb) / .14); border: 1.5px solid var(--accent); border-radius: 12px;
  }
  .num-fast small { font: 600 .7rem/1.15 var(--font-ui); color: var(--muted); white-space: nowrap; }
  .num-fast[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 3px 0 rgb(0 0 0 / .25); }
  .num-fast[aria-pressed="true"] small { color: var(--on-accent); }
  .num-fast:active { transform: scale(.95); transition-duration: 0s; }
  .game-quick { margin-top: 8px; }
  .num-fast.is-wide { width: 100%; min-height: 54px; gap: 4px; font-size: 1.05rem; }
  .num-fast.is-wide small { font-size: .76rem; white-space: normal; }
  .num-fast[aria-disabled="true"] { cursor: default; }
  .settings.is-locked .num-ctl, .settings.is-locked .num-quick, .settings.is-locked .num-fast, .settings.is-locked .map-row { opacity: .6; }

  /* ======================= Salon : réglage « map » (choix du plateau) ======================= */
  .settings > * { min-width: 0; } /* la rangée de plateaux défile au lieu d'élargir la grille */
  .map-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .map-card {
    --g: var(--accent);
    position: relative; flex: none; width: 152px; display: grid; gap: 4px; padding: 8px; text-align: left; cursor: pointer; scroll-snap-align: start;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    transition: border-color .2s, transform .15s var(--spring);
  }
  .map-card:active { transform: scale(.96); transition-duration: 0s; }
  .map-card[aria-checked="true"] { border-color: var(--g); background: color-mix(in srgb, var(--g) 14%, var(--surface-2)); box-shadow: 0 0 0 1px var(--g); }
  .map-card[aria-checked="true"]::after { content: "✓"; position: absolute; top: 6px; right: 8px; font-weight: 800; color: var(--g); }
  .map-mini { width: 100%; aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--g) 8%, #050816); }
  .map-mini svg { display: block; width: 100%; height: 100%; }
  .map-name { font: 700 .86rem/1.15 var(--font-display); }
  /* max-height = 2 lignes : la carte étirée par la grille laissait voir la moitié d'une 3e ligne (QA dames 13/11) */
  .map-tag { font-size: .68rem; line-height: 1.25; max-height: 2.5em; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .map-meta { font-size: .64rem; font-weight: 600; color: var(--faint); }
  .map-card.is-locked .map-mini { opacity: .45; }
  .map-lock { position: absolute; top: 12px; left: 12px; padding: 3px 7px; font: 700 .66rem/1 var(--font-display); color: var(--warn); background: rgba(3, 6, 18, .85); border: 1px solid rgb(var(--warn-rgb) / .6); border-radius: 99px; }
  .map-shop { justify-self: start; padding: 4px 8px; font: 700 .68rem/1 var(--font-display); color: var(--warn-text); background: rgb(var(--warn-rgb) / .1); border: 1px solid rgb(var(--warn-rgb) / .55); border-radius: 8px; }
  .map-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); }
  .map-hint button { padding: 4px 9px; font: 700 .7rem/1 var(--font-display); color: var(--accent-text); background: rgb(var(--accent-rgb) / .08); border: 1px solid rgb(var(--accent-rgb) / .5); border-radius: 8px; cursor: pointer; }
}

@keyframes heartbeat { 0%, 100% { scale: 1; } 15% { scale: 1.01; } 30% { scale: 1; } }
@keyframes shake { 20% { translate: -3px 0; } 40% { translate: 3px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }
@keyframes tile-land { 40% { transform: scale(1.14); } 70% { transform: scale(.96); } }
@keyframes tile-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes glow-pulse { from { opacity: .15; } to { opacity: 1; } }
@keyframes pr-stamp { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 70% { transform: scale(.95); } 100% { transform: none; } }
@keyframes ticker-in { 0% { transform: scale(.94); opacity: .3; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes dice-hop { 0% { transform: translateY(0); } 20% { transform: translateY(-6cqw) rotate(-12deg); } 45% { transform: translateY(0) rotate(5deg); } 60% { transform: translateY(-2cqw); } 75%, 100% { transform: translateY(0); } }
@keyframes pawn-hop { 50% { transform: translateY(calc(var(--tile) * -.24)) scale(1.1); } }
@keyframes card-flip { from { transform: rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* Appareil modeste (html.perf-lite) : on coupe le décor, pas le jeu — hors couche pour l'emporter */
.perf-lite .board { box-shadow: 0 0 0 3px rgba(5, 8, 20, .85); }
.perf-lite .board.is-hot { animation: none; }
.perf-lite .tile.is-mine { box-shadow: none; }
.perf-lite .tile:is(.can-build, .is-offer)::after { animation: none; opacity: .85; }
.perf-lite .me-cash { text-shadow: none; }
.perf-lite .pr-board .pawn.has-skin .pawn-in > svg { filter: drop-shadow(0 0 2px var(--pc)); }

@media (prefers-reduced-motion: reduce) {
  .board.is-hot, .board.is-shaking { animation: none !important; }
  .tile:is(.can-build, .is-offer, .is-glow)::after { animation: none !important; opacity: .85; }
  .tile:is(.is-landed, .is-stamp)::before { animation: none !important; }
  .pawn, .pawn-in { transition: none !important; }
  .turn-banner { animation: none !important; }
}