/* =========================================================================
   POTOS — PROPRIO 2099 : zone du pouce, offres d'échange, feuille (Gérer / Fiche / Échanger)
   Chargé APRÈS css/game.css. Refonte v2 (docs/proprio-v2.md §7.4-7.6).
   • Zone du pouce : UN gros bouton contextuel + rangée fixe Gérer · Échanger · ⏩ Auto.
   • Offres reçues : toasts en haut de l'écran (2 au plus), barre de chrono en scaleX ;
     jamais par-dessus le bouton principal.
   • Feuille : du bas sur mobile (plein écran pour l'échange), panneau latéral sur grand écran.
   Fluidité : transform / opacity seulement ; pas de « classe d'état + balise nue ».
   ========================================================================= */
@layer theme, base, components, utilities;

@layer components {
  /* ======================= Zone du pouce ======================= */
  #screen-game .action-panel {
    display: grid; gap: 8px; padding: 10px; border-radius: 18px; contain: layout paint;
    background: var(--glass-strong); border: 1px solid var(--line-2);
  }
  .ap-main { display: grid; gap: 7px; min-height: 58px; align-content: center; }
  .ap-sub:empty { display: none; }
  .pr-main { width: 100%; min-height: 58px; font-size: clamp(1.1rem, 5vw, 1.35rem); text-transform: uppercase; letter-spacing: .05em; }
  .pr-main small { font: 700 .7em/1 var(--font-hud); opacity: .75; }
  .pr-main .pr-price { font-family: var(--font-hud); }
  .pr-alt { display: flex; align-items: center; gap: 8px; }
  .pr-alt > .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: .6em; font-size: .95rem; white-space: nowrap; }
  .pr-alt.is-over > .btn { min-height: 54px; }
  .pr-after { flex: none; font-size: .76rem; font-weight: 600; color: var(--muted); }
  .pr-waitline { display: grid; place-items: center; min-height: 58px; padding: 6px 10px; text-align: center; font: 600 .98rem/1.25 var(--font-display); color: var(--muted); background: rgba(130, 180, 255, .05); border: 1px dashed var(--line-2); border-radius: 14px; }
  .pr-waitline b { color: var(--text); border-bottom: 2px solid var(--pc, var(--accent)); }
  .pr-waitline.is-anim { color: var(--text); }
  .ap-note { padding: 10px 12px; font-weight: 600; font-size: .92rem; text-align: center; color: var(--muted); background: rgba(130, 180, 255, .07); border: 1px solid var(--line); border-radius: 12px; }
  .ap-hint { font-size: .74rem; font-weight: 600; text-align: center; color: var(--faint); }
  .pr-warn { padding: 8px 10px; font-weight: 600; font-size: .86rem; text-align: center; color: #FFD3DE; background: rgb(var(--danger-rgb) / .1); border: 1px solid rgb(var(--danger-rgb) / .45); border-radius: 10px; }
  .pr-neg { color: var(--danger-text); }

  /* Fin de tour : compte à rebours = barre (transform: scaleX) + nombre */
  .pr-endbtn { position: relative; overflow: hidden; }
  .pr-endn { margin-left: .4em; font: 800 1em/1 var(--font-hud); }
  .pr-endn:empty { display: none; }
  .pr-endbtn { flex-wrap: wrap; row-gap: 2px; }
  .pr-endwhy { flex: 1 0 100%; font: 600 .62em/1.15 var(--font-ui); text-transform: none; letter-spacing: 0; opacity: .85; }
  .pr-endcd { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(3, 16, 28, .55); transform-origin: left center; transform: scaleX(1); }

  /* Rangée fixe : Gérer · Échanger · Auto */
  /* Colonnes égales selon le nombre de boutons (échanges désactivés : Gérer · Auto, sans trou à droite) */
  .pr-subrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .pr-sub {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 6px 8px; cursor: pointer;
    font: 700 .84rem/1.1 var(--font-display); color: var(--text); white-space: nowrap;
    background: rgba(130, 180, 255, .08); border: 1px solid var(--line-2); border-radius: 12px;
  }
  .pr-sub:active { transform: scale(.95); transition-duration: 0s; }
  .pr-sub[aria-disabled="true"] { opacity: .5; }
  .pr-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font: 800 .68rem/1 var(--font-display); color: #fff; background: var(--danger); border-radius: 99px; }
  .pr-auto .pr-dot { width: 22px; height: 12px; border-radius: 99px; background: rgba(130, 180, 255, .2); border: 1px solid var(--line-2); position: relative; }
  .pr-auto .pr-dot::after { content: ""; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: #B9C8E8; transition: transform .2s var(--spring); }
  .pr-auto.is-on { color: var(--on-neon); background: var(--ok); border-color: var(--ok); }
  .pr-auto.is-on .pr-dot { background: rgba(3, 16, 28, .35); border-color: rgba(3, 16, 28, .5); }
  .pr-auto.is-on .pr-dot::after { transform: translateX(10px); background: #fff; }

  /* Enchère */
  .pr-au-now { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 7px 10px 9px; border-radius: 12px; background: rgb(var(--bg-rgb) / .5); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); }
  .pr-au-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-au-name i { font-style: normal; }
  .pr-au-now b { grid-row: span 2; font: 800 1.5rem/1 var(--font-hud); color: var(--warn-text); }
  .pr-au-now small { font-size: .78rem; color: var(--muted); }
  .pr-bidbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--danger); transform-origin: left center; }
  .pr-bids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pr-bid { flex-direction: column; gap: 2px; min-height: 56px; padding: .4em .2em; font-size: 1.1rem; }
  .pr-bid small { font: 600 .68rem/1 var(--font-ui); opacity: .85; }

  /* Dette */
  .pr-debt { display: grid; gap: 4px; padding: 9px 12px; font-size: .88rem; border-radius: 12px; background: rgb(var(--danger-rgb) / .09); border: 1px solid rgb(var(--danger-rgb) / .5); }
  .pr-meter { height: 8px; margin-top: 2px; overflow: hidden; border-radius: 99px; background: rgb(var(--bg-rgb) / .8); border: 1px solid var(--line-2); }
  .pr-meter i { display: block; height: 100%; transform: scaleX(var(--k, 0)); transform-origin: left center; background: linear-gradient(90deg, var(--danger), var(--warn)); transition: transform .4s ease; }
  .btn.pr-danger { color: var(--danger-text); border-color: rgb(var(--danger-rgb) / .55); }

  /* Réactions (petites sur mobile) */
  .pr-reacts { display: flex; justify-content: center; gap: 6px; }
  .pr-react { width: 44px; height: 44px; font-size: 21px; }
  @media (min-width: 640px) { .pr-react { font-size: 22px; } }

  /* ======================= Offres d'échange (toasts) ======================= */
  .pr-offers {
    position: fixed; z-index: 45; top: 98px; left: 50%; translate: -50% 0; width: min(calc(100% - 16px), 460px);
    display: grid; gap: 6px; pointer-events: none;
  }
  .pr-offers:empty { display: none; }
  .pr-offers > * { pointer-events: auto; }
  /* Grand écran : dans la colonne de droite, SOUS la zone « MOI » (--pr-me-b, posé par js/game-ui.js) : l'offre ne
     cache plus mon argent au moment de décider */
  @media (min-width: 1024px) { .pr-offers { top: calc(var(--pr-me-b, 166px) + 10px); left: auto; right: 20px; translate: none; width: 380px; } }
  @media (min-width: 1024px) and (min-aspect-ratio: 5/4) { .pr-offers { right: 16px; width: clamp(320px, 26vw, 420px); } }
  /* Grand écran, échange en cours de composition : les pastilles de « MOI » se replient (l'argent reste affiché)
     pour laisser la hauteur à la mini-carte et aux boîtes « Je donne / Je demande » (1280 × 720 : +90 px) */
  @media (min-width: 1024px) { #screen-game:has(.pr-sheet.is-tall) .me-sets { display: none; } }
  .pr-otoast {
    --pc: var(--accent);
    position: relative; overflow: hidden; display: grid; gap: 6px; padding: 8px 10px 11px; border-radius: 14px;
    background: var(--glass-strong); border: 1px solid var(--pc); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9);
    animation: toast-in .35s var(--spring) both;
  }
  .pr-otoast.is-new { animation: toast-in .35s var(--spring) both; }
  .pr-otop { display: flex; align-items: center; gap: 8px; padding: 0; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
  .pr-oav { 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); }
  .pr-oav > svg { width: 100%; height: 100%; }
  .pr-otx { flex: 1; min-width: 0; font-size: .86rem; }
  .pr-otx small { display: block; font-size: .7rem; color: var(--muted); }
  .pr-osides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pr-osides > div { display: flex; flex-wrap: wrap; gap: 3px; align-content: start; min-width: 0; padding: 5px; border-radius: 9px; background: rgb(var(--bg-rgb) / .5); }
  .pr-osides small { width: 100%; font: 700 .6rem/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .pr-osides > div:first-child small { color: var(--ok-text); }
  .pr-oacts { display: grid; grid-template-columns: 1.4fr .6fr 1fr; gap: 6px; }
  .pr-oacts .btn { min-width: 0; min-height: 44px; padding-inline: .4em; white-space: nowrap; }
  .pr-onote { font-size: .72rem; color: var(--muted); }
  .pr-obar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pc); transform-origin: left center; }
  .pr-ochip {
    --pc: var(--accent);
    position: relative; overflow: hidden; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 8px; font-size: .78rem; font-weight: 600;
    color: var(--text); background: var(--glass-strong); border: 1px solid var(--line-2); border-radius: 99px;
  }
  .pr-ochip.is-out { border-color: var(--pc); }
  .pr-ochip.is-others { color: var(--muted); font-size: .72rem; padding: 4px 10px; }
  .pr-ochip.is-more { cursor: pointer; color: var(--accent-text); }
  .pr-ochip button { position: relative; padding: 3px 8px; font: 700 .72rem/1 var(--font-display); color: var(--text); background: rgba(130, 180, 255, .1); border: 1px solid var(--line-2); border-radius: 99px; cursor: pointer; }
  .pr-ochip .pr-obar { height: 2px; }

  /* ======================= Titre de propriété ======================= */
  .pr-deed {
    position: relative; overflow: hidden; text-align: left; color: var(--text);
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent); border-radius: .8em;
  }
  .pr-deed-band { display: grid; gap: .15em; padding: .6em .8em; text-align: center; color: #fff; background: color-mix(in srgb, var(--gc) 55%, #000); border-bottom: 2px solid var(--gc); }
  .pr-deed-kicker { font: 700 .72em/1.1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
  .pr-deed-band b { font: 700 1.15em/1.15 var(--font-display); }
  .pr-deed-band i { font-style: normal; }
  .pr-rents { width: 100%; border-collapse: collapse; font-size: .95em; }
  .pr-rents td { padding: .3em .8em; border-bottom: 1px solid var(--line); }
  .pr-rents td:last-child { text-align: right; font: 700 1em/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
  .pr-rents tr.is-cur td { color: var(--accent-text); background: rgb(var(--accent-rgb) / .14); }
  .pr-rents tr.is-cur td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  .pr-deed-foot { padding: .5em .8em .4em; font-size: .82em; line-height: 1.45; color: var(--muted); }
  .pr-deed-foot b { color: var(--text); font-family: var(--font-display); }
  .pr-deed-note { padding: 0 .8em .6em; font-size: .78em; line-height: 1.35; color: var(--warn-text); }
  .pr-deed-stamp { position: absolute; top: 46%; left: 50%; translate: -50% -50%; rotate: -18deg; padding: .2em .6em; pointer-events: none; font: 800 1.3em/1 var(--font-hud); letter-spacing: .1em; text-transform: uppercase; color: var(--danger-text); border: 2px solid rgb(var(--danger-rgb) / .9); border-radius: .3em; background: rgb(var(--danger-rgb) / .28); }
  .pr-deed.is-mortgaged .pr-rents { opacity: .45; }

  /* ======================= Feuille ======================= */
  .pr-sheet { display: flex; flex-direction: column; min-height: 0; min-width: 0; color: var(--text); }
  .pr-sheet-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .pr-sheet-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .98rem/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
  .pr-sheet-title i { font-style: normal; }
  .pr-sheet-head .icon-btn { width: 44px; height: 44px; font-size: 17px; }
  .pr-sheet-body { display: grid; grid-auto-rows: max-content; gap: 10px; align-content: start; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
  .pr-sheet .pr-deed { font-size: 14px; }
  @media (max-width: 1023.98px) {
    .pr-sheet {
      position: fixed; z-index: 64; left: 0; right: 0; bottom: 0; max-height: 86dvh; width: 100%; contain: layout paint;
      /* Jetons (plus de bleu nuit en dur) : la feuille est DANS #screen-game, elle suit son mode (clair sur le plateau
         classique en mode clair, sombre sur un plateau payant qui garde son décor). */
      background: var(--surface); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0;
      transform: translateY(105%); visibility: hidden; padding-bottom: env(safe-area-inset-bottom);
      transition: transform .3s cubic-bezier(.5, 0, .75, 0), visibility 0s linear .3s;
    }
    .pr-sheet.is-open { transform: none; visibility: visible; transition: transform .42s var(--spring), visibility 0s; }
    /* Fermée et rangée (js/game-ui.js, 0,4 s après la fermeture) : son contenu n'est plus ni mis en page ni peint */
    .pr-sheet.is-parked { content-visibility: hidden; }
    .pr-sheet.is-tall { max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .pr-sheet-head { padding: 18px 12px 10px; cursor: grab; touch-action: none; }
    .pr-sheet-head::before { content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 44px; height: 4px; border-radius: 4px; background: rgb(var(--accent-rgb) / .55); }
    .pr-sheet-back { display: none !important; }
    .pr-backdrop { position: fixed; inset: 0; z-index: 63; background: rgba(2, 4, 12, .7); animation: fade-in .2s both; }
    .pr-backdrop[hidden] { display: none; }
  }
  @media (min-width: 1024px) {
    .pr-sheet { flex: 1 1 auto; min-height: 220px; max-height: calc(100dvh - 300px); overflow: hidden; background: var(--glass-strong); border: 1px solid var(--line); border-radius: var(--r-xl); contain: layout paint; }
    @media (min-aspect-ratio: 5/4) { .pr-sheet { min-height: 0; max-height: none; } }
    .pr-sheet.is-home .pr-sheet-x { display: none; }
    .pr-backdrop { display: none !important; }
  }

  .pr-stats { display: flex; flex-wrap: wrap; gap: 6px; }
  .pr-stats > span { display: inline-flex; align-items: baseline; gap: .3em; padding: 5px 9px; font-size: .8rem; white-space: nowrap; background: rgba(130, 180, 255, .07); border: 1px solid var(--line); border-radius: 99px; }
  .pr-stats b { font-family: var(--font-display); }
  .pr-stats small { font-size: .68rem; color: var(--muted); }
  .pr-label { font: 600 .68rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pr-note-s { padding: 8px 10px; font-size: .8rem; line-height: 1.4; color: var(--muted); background: rgba(130, 180, 255, .05); border: 1px dashed var(--line-2); border-radius: 10px; }
  .pr-note-s .btn { margin-left: 4px; }
  .pr-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; text-align: center; font-size: .88rem; color: var(--muted); }
  .pr-empty span { font-size: 38px; }
  .pr-sheet-cta { margin-top: 2px; }
  .pr-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; }
  .pr-row3 .btn { min-width: 0; padding-inline: .5em; font-size: .9rem; white-space: nowrap; }

  /* Groupes (quartiers, gares, compagnies) */
  .pr-group { display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: rgb(var(--bg-rgb) / .35); border: 1px solid color-mix(in srgb, var(--gc) 35%, var(--line)); }
  .pr-group.is-full { border-color: color-mix(in srgb, var(--gc) 80%, transparent); }
  .pr-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 4px; }
  .pr-ghead b { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 .82rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
  .pr-ghead b::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--gc); }
  .pr-ghead span { flex: none; font-size: .72rem; font-weight: 600; color: var(--muted); }
  .pr-group.is-full .pr-ghead span { color: var(--ok-text); }
  .pr-lot { display: grid; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(130, 180, 255, .06); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--gc); }
  .pr-lot.is-mortgaged { background: repeating-linear-gradient(135deg, rgb(var(--bg-rgb) / .4) 0 6px, rgba(130, 140, 170, .1) 6px 12px); }
  .pr-lot.is-ghost { opacity: .6; background: none; border-style: dashed; border-color: var(--oc, var(--line)); }
  .pr-lot-main { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 2px 4px; text-align: left; color: inherit; background: none; border: 0; border-radius: 8px; cursor: pointer; }
  .pr-lot-ico { flex: none; width: 30px; font-size: 22px; font-style: normal; text-align: center; line-height: 1; }
  .pr-lot-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .pr-lot-txt b { font: 700 .9rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-lot-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .74rem; color: var(--muted); }
  .pr-lot-txt small b { font: 700 .78rem/1 var(--font-display); color: var(--text); }
  .pr-hyp { color: var(--danger-text); font-weight: 600; }
  .pr-glyphs { display: inline-flex; align-items: center; gap: 2px; }
  .pr-house, .pr-hotel { display: inline-block; font-style: normal; }
  .pr-house { width: 8px; height: 8px; border-radius: 2px; background: var(--ok); border: 1px solid #EFFFD6; }
  .pr-hotel { padding: 1px 4px; font: 800 .6rem/1 var(--font-hud); color: #fff; background: var(--danger); border-radius: 3px; }
  .pr-acts { display: flex; flex-wrap: wrap; gap: 5px; }
  .pr-acts.is-wide .pr-act { flex: 1 1 40%; }
  .pr-act {
    --ac: var(--accent);
    display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; cursor: pointer;
    font: 600 .82rem/1.1 var(--font-display); white-space: nowrap; color: var(--text);
    background: color-mix(in srgb, var(--ac) 12%, rgb(var(--bg-rgb) / .6)); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); border-radius: 10px;
  }
  .pr-act b { font-family: var(--font-display); color: var(--ac); }
  .pr-act:active { transform: scale(.95); transition-duration: 0s; }
  .pr-act[aria-busy="true"] { opacity: .6; cursor: progress; }
  .pr-act.is-build { --ac: var(--ok); }
  .pr-act.is-sell { --ac: var(--warn); }
  .pr-act.is-mort { --ac: var(--accent-2); }
  .pr-act.is-lift { --ac: var(--accent); }

  .pr-info { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 10%, rgb(var(--bg-rgb) / .6)); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); }
  .pr-info-ico { flex: none; font-size: 34px; }
  .pr-info p { font-size: .9rem; line-height: 1.4; }
  .pr-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 10%, rgb(var(--bg-rgb) / .5)); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); }
  .pr-owner > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.15; }
  .pr-owner small { font-size: .68rem; color: var(--muted); }
  .pr-owner-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #31438F, #151E4A 75%); box-shadow: 0 0 0 2px var(--pc); }
  .pr-owner-av > svg { width: 100%; height: 100%; }
  .pr-owner-st { margin-left: auto; font-size: .78rem; color: var(--muted); }
  .pr-owner-st b { color: var(--text); font-family: var(--font-display); }
  .pr-here { font-size: .8rem; color: var(--muted); }

  .pr-phead { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--pc) 10%, rgb(var(--bg-rgb) / .5)); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); }
  .pr-phead-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #31438F, #151E4A 75%); box-shadow: 0 0 0 2px var(--pc); }
  .pr-phead-av > svg { width: 100%; height: 100%; }
  .pr-phead-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .pr-phead-tx b { font: 700 .95rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-phead-tx small { font-size: .74rem; color: var(--muted); }
  .pr-plist { display: grid; gap: 6px; }
  .pr-prow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer; color: inherit; border-radius: 12px; background: rgba(130, 180, 255, .06); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--pc); }
  .pr-prow.is-out { opacity: .5; }
  .pr-prow-w { margin-left: auto; font: 700 .95rem/1 var(--font-display); color: var(--warn-text); }

  /* ======================= Échange ======================= */
  .pr-tsides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pr-tside { min-width: 0; padding: 8px; border-radius: 12px; background: rgb(var(--bg-rgb) / .45); border: 1px solid var(--line); }
  .pr-tside.is-recv { border-color: rgb(var(--ok-rgb) / .5); background: rgb(var(--ok-rgb) / .06); }
  .pr-tside-h { margin-bottom: 6px; font: 700 .66rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pr-tside.is-recv .pr-tside-h { color: var(--ok-text); }
  .pr-assets { display: flex; flex-wrap: wrap; gap: 4px; }
  .pr-tchip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 3px 7px 3px 4px; font-size: .74rem; font-weight: 600; line-height: 1.2; border-radius: 8px;
    background: color-mix(in srgb, var(--gc, var(--accent)) 14%, rgb(var(--bg-rgb) / .6)); border: 1px solid color-mix(in srgb, var(--gc, var(--accent)) 60%, transparent); box-shadow: inset 3px 0 0 var(--gc, var(--accent));
  }
  .pr-tchip > i { font-style: normal; flex: none; }
  .pr-tchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pr-tchip.is-cash { --gc: var(--warn); }
  .pr-tchip.is-card { --gc: var(--accent-3); }
  .pr-hyp-tag { flex: none; padding: 1px 3px; font: 800 .55rem/1 var(--font-hud); font-style: normal; color: #FFE1E8; background: rgb(var(--danger-rgb) / .8); border-radius: 3px; }
  .pr-nothing { font-size: .78rem; font-style: italic; color: var(--faint); }
  .pr-tnote { margin-top: 4px; font-size: .74rem; color: var(--danger-text); }
  .pr-tnote.is-block { margin: 6px 0; padding: 6px 8px; font-weight: 600; line-height: 1.3; color: var(--warn-text); border: 1px solid rgb(var(--warn-rgb) / .5); border-radius: 10px; background: rgb(var(--warn-rgb) / .08); }
  .pr-olist { display: grid; gap: 5px; }
  .pr-oline { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; font-size: .8rem; color: var(--text); background: rgb(var(--bg-rgb) / .5); border: 1px solid var(--pc); border-radius: 12px; cursor: pointer; }
  .pr-oline .pr-phead-av { width: 28px; height: 28px; }

  .pr-partners { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .pr-partners::-webkit-scrollbar { display: none; }
  .pr-partner { display: flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 5px 12px 5px 5px; cursor: pointer; color: var(--text); background: rgba(130, 180, 255, .07); border: 1px solid var(--line-2); border-radius: 99px; }
  .pr-partner .pr-phead-av { width: 30px; height: 30px; }
  .pr-partner > span:last-child { display: flex; flex-direction: column; align-items: flex-start; font: 700 .84rem/1.15 var(--font-display); white-space: nowrap; }
  .pr-partner small { font: 500 .7rem/1.1 var(--font-ui); color: var(--muted); }
  .pr-partner.is-on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 20%, transparent); }
  .pr-partner[aria-disabled="true"]:not(.is-on) { opacity: .4; }

  /* Mini-carte : toucher un terrain pour le donner / le demander */
  .pr-tmap { display: grid; gap: 6px; justify-items: center; }
  .pr-minimap { display: grid; gap: 2px; width: min(100%, 320px); padding: 4px; background: rgb(var(--bg-rgb) / .55); border: 1px solid var(--line); border-radius: 12px; }
  .mm-cell {
    --oc: transparent; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; cursor: default; font-size: 11px; line-height: 1;
    background: color-mix(in srgb, var(--gc) 16%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gc) 30%, transparent); border-radius: 4px;
  }
  .mm-cell > i { font-style: normal; }
  .mm-cell.is-off { opacity: .28; }
  .mm-cell.is-give, .mm-cell.is-get { position: relative; cursor: pointer; border: 2px solid var(--oc); }
  .mm-cell.is-give::after { content: "★"; position: absolute; top: -1px; right: 0; font-size: 8px; line-height: 1; color: #fff; }
  .mm-cell.is-locked { opacity: .45; background: repeating-linear-gradient(135deg, rgb(var(--bg-rgb) / .7) 0 3px, rgba(130, 140, 170, .3) 3px 6px); border: 2px dashed var(--oc); }
  .mm-cell.is-on { background: var(--oc); box-shadow: 0 0 0 2px #fff; }
  .mm-cell:active { transform: scale(.9); transition-duration: 0s; }
  .pr-tlegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .7rem; font-weight: 600; color: var(--muted); }
  .pr-tlegend .is-get { color: var(--pc); }
  /* Colonnes bornées (minmax 0) + conteneur : un long nom de terrain ou le compteur ne débordent plus de la boîte */
  .pr-tboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pr-tbox { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: start; min-width: 0; padding: 8px; border-radius: 14px; background: rgb(var(--bg-rgb) / .4); border: 1px solid var(--line); }
  .pr-tbox.is-give { border-color: rgb(var(--accent-2-rgb) / .45); }
  .pr-tbox.is-get { border-color: rgb(var(--ok-rgb) / .45); }
  .pr-tbox-h { font: 700 .7rem/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
  .pr-tbox.is-get .pr-tbox-h { color: var(--ok-text); }
  .pr-tchip-x { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; min-height: 32px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
  .pr-tchip-x > .pr-tchip { flex: 0 1 auto; }
  .pr-tchip-x > b { flex: none; font-size: .7rem; color: var(--muted); }
  .pr-picks { display: flex; flex-wrap: wrap; gap: 5px; }
  .pr-pick { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 4px 9px 4px 6px; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--text); border-radius: 9px; background: rgb(var(--bg-rgb) / .55); border: 1px solid rgb(var(--accent-3-rgb) / .5); }
  .pr-pick > i { font-style: normal; }
  .pr-pick.is-on { background: rgb(var(--accent-3-rgb) / .3); border-color: var(--accent-3); }
  .pr-cash { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .pr-cash-ico { flex: none; font-size: 15px; }
  .pr-step { position: relative; flex: none; width: 36px; height: 36px; cursor: pointer; font: 700 1.1rem/1 var(--font-display); color: var(--text); background: rgba(130, 180, 255, .08); border: 1px solid var(--line-2); border-radius: 9px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
  .pr-step:active { transform: scale(.92); transition-duration: 0s; }
  /* zones de toucher invisibles ≥ 44 px (dessin inchangé) */
  .pr-step::after, .pr-ochip button::after { content: ""; position: absolute; inset: -4px; }
  .pr-ochip button::after { inset: -10px -4px; }
  .pr-step[aria-disabled="true"] { opacity: .35; }
  .pr-cash-in { flex: 1; width: 0; min-width: 40px; height: 36px; padding: 0 4px; text-align: center; font: 700 .95rem/1 var(--font-display); color: var(--warn-text); background: rgb(var(--bg-rgb) / .7); border: 1px solid var(--line-2); border-radius: 9px; outline: none; -moz-appearance: textfield; }
  .pr-cash-in::-webkit-outer-spin-button, .pr-cash-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .pr-cash-in:focus { border-color: var(--accent); }
  .pr-cash-max { flex: none; font-size: .64rem; color: var(--faint); }
  @media (max-width: 420px) { .pr-cash-max { display: none; } }
  @container (max-width: 199.98px) { .pr-cash-max { display: none; } }
  @container (max-width: 169.98px) { .pr-cash-ico { display: none; } .pr-cash { gap: 3px; } }
  .pr-trade-foot { position: sticky; bottom: -12px; display: grid; gap: 6px; padding: 8px 0 4px; background: var(--surface); }
  /* Grand écran : « Envoyer » reste visible en bas du panneau (la mini-carte fait défiler le reste) */
  @media (min-width: 1024px) { .pr-trade-foot { bottom: -12px; background: linear-gradient(transparent, var(--glass-strong) 10px); } }
  .pr-trade-sum { font-size: .86rem; text-align: center; }
  .pr-trade-sum b { font-family: var(--font-display); color: var(--accent-text); }
  .pr-send { min-height: 52px; }
}

/* Appareil modeste : rien d'animé en décor ici ; on retire les ombres portées des toasts */
.perf-lite .pr-otoast { box-shadow: none; }

/* Bandeau du centre : 2 lignes au plus, coupées par « … » (Carrefour : centre étroit, le texte était tranché au milieu d'une ligne) */
#ticker.ticker { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Premier affichage : contenu des cases en fondu (opacité seule, js/game-ui.js fillTiles), attente sans bouton */
@keyframes pr-tile-in { from { opacity: 0; } to { opacity: 1; } }
.tile.is-in > * { animation: pr-tile-in .32s ease-out both; }
.pr-waitline.is-build { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .tile.is-in > * { animation: none !important; }
  .pr-sheet, .pr-sheet.is-open { transition: none !important; }
  .pr-otoast { animation: none !important; }
}

/* =========================================================================
   QA (novembre 2026) — Téléphones : TOUT tient dans l'écran, sans défilement (360×812, 375×812, 375×667, 812×375).
   Avant : plateau à la largeur de l'écran quelle que soit la hauteur → 375×667 : 154 px à faire défiler (boutons
   d'action hors écran) ; 812×375 : plateau de 640 px de haut dans un écran de 375. Le plateau est borné par la
   HAUTEUR restante (constante par taille d'écran : il ne change jamais de taille pendant la partie, aucune
   re-mesure) ; une décision qui ajoute une rangée (Passer, Payer, enchères, dette) prend la place des réactions.
   ========================================================================= */
@layer components {
  @media (max-width: 1023.98px) and (orientation: portrait) {
    #screen-game:not([hidden]) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
    #screen-game .game-top { flex: none; }
    /* --pr-rest : barre du haut (100) + zone « MOI » (130) + zone d'action (132) + réactions (44) + marges */
    #screen-game .game-main { --pr-rest: 460px; flex: 1 1 auto; min-height: 0; width: 100%; align-content: start; padding-bottom: 8px; }
    #screen-game .board { width: min(100%, 640px, calc(100dvh - var(--pr-rest))); min-width: 0; }
    #screen-game:has(#action-panel:is([data-role="buy"], [data-role="jail"], [data-role="auction"], [data-role="debt"])) .pr-reacts { display: none; }
    /* Dette : « Vendre / hypothéquer » et « Faillite » remplacent Gérer · Échanger · Auto (Échanger : bouton de la fiche) */
    #action-panel[data-role="debt"] > .ap-sub { display: none; }
  }
  /* Petit téléphone (375×667…) : pas de réactions, « MOI » plus compact, et pendant une décision sa rangée
     remplace Gérer · Échanger · Auto (Gérer reste au toucher de mon argent, Échanger dans les fiches) */
  @media (max-width: 1023.98px) and (orientation: portrait) and (max-height: 760px) {
    #screen-game .game-main { --pr-rest: 382px; gap: 6px; }
    #screen-game .pr-reacts { display: none; }
    #screen-game .pr-me { gap: 4px; padding: 6px 8px; }
    #screen-game .me-cash { font-size: 1.8rem; }
    #screen-game .me-sets { gap: 6px 4px; }
    #action-panel:is([data-role="buy"], [data-role="jail"], [data-role="auction"]) > .ap-sub { display: none; }
  }
  /* Téléphone à l'horizontale : barre du haut sur une ligne, plateau à gauche (hauteur pleine), « MOI » et actions à droite */
  @media (max-width: 1023.98px) and (orientation: landscape) {
    #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: 8px; height: 54px; padding: 0 8px; }
    #screen-game .gt-row { display: contents; }
    #screen-game .gt-status { flex: 0 1 190px; }
    #screen-game .hud { order: 1; flex: 1 1 0; min-width: 0; }
    #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: none; padding: 6px 8px; column-gap: 10px; row-gap: 6px; align-items: start;
      grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
      grid-template-areas: "board me" "board actions" "board react";
    }
    #screen-game .board { width: min(calc(100dvh - 68px), 60vw); min-width: 0; }
    #screen-game .pr-reacts { justify-content: flex-start; flex-wrap: wrap; }
    #screen-game:has(#action-panel:is([data-role="buy"], [data-role="jail"], [data-role="auction"], [data-role="debt"])) .pr-reacts { display: none; }
    #action-panel[data-role="debt"] > .ap-sub { display: none; }
  }
  @media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) { #screen-game .pr-reacts { display: none; } }
  /* Nom du joueur actif long (« Ornithorynque Supersonique ») : sur 2 lignes, plus petit, jamais coupé */
  .gt-who.is-long .gt-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8em; line-height: 1.02; overflow-wrap: anywhere; }
  .gt-who.is-long .gt-l2 { font-size: .7em; }
}

/* ======================= Audit « reconnaissable » : les repères du vrai jeu =======================
   • Coins et cases à cartes : le MOT du jeu (Départ, Prison / Simple visite, Parc gratuit, Allez en prison,
     Chance, Caisse commune) écrit sur la case, lisible même sur téléphone.
   • Maisons VERTES et hôtels ROUGES sur la bande du quartier (comme sur le plateau en carton).
   • Bouton « ? » (Règles en 30 secondes) dans la barre du haut.
   Statique : aucune animation ajoutée. */
@layer components {
  .t-kind {
    display: block; max-width: 100%; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; hyphens: none;
    font: 800 max(6px, 13cqmin)/1.02 var(--font-display); letter-spacing: .01em; color: var(--pb-ink);
  }
  .tile.corner .t-ico { font-size: 36cqmin; }
  .tile.corner { gap: 2cqmin; }
  .type-start .t-kind { color: var(--ok); }
  .type-gotojail .t-kind { color: #8FB8FF; }
  .type-free .t-kind { color: var(--warn); }
  /* Prison : barreaux en haut à droite (avec « PRISON »), « SIMPLE VISITE » le long du bas */
  .tile.type-jail .t-cell { flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 1cqmin; }
  .tile.corner .t-cell .t-ico { font-size: 26cqmin; }
  .type-jail .t-cell .t-kind { font-size: max(6px, 11cqmin); color: #FFB37A; }
  .t-visit { right: 38%; line-height: 1.05; font-size: max(6px, 11cqmin); color: color-mix(in srgb, var(--pb-ink) 70%, transparent); }
  /* Case Chance : le point d'interrogation, en grand */
  .type-card .t-ico { font-size: 44cqmin; }

  /* Maisons vertes, hôtel rouge (bande du quartier) */
  .t-lvl .th { background: #2BD957; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
  .t-lvl .t-hotel { background: #FF3030; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }

  /* Bouton « ? » de la barre du haut (posé par js/game.js) */
  .gt-row .pr-help-btn { font: 800 1.15rem/1 var(--font-display); }
  .pr-rules { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; text-align: left; }
  .pr-rules li { display: grid; grid-template-columns: 1.6em 1fr; gap: 6px; align-items: start; font-size: .95rem; line-height: 1.3; }
  .pr-rules li > i { font-style: normal; text-align: center; }
  .pr-rules-note { text-align: left; margin-top: 10px; font-size: .82rem; color: var(--muted); line-height: 1.35; }
  .pr-rents .pr-house { width: 10px; height: 10px; }
  .pr-rents .pr-glyphs { min-width: 52px; }
  .pr-info-kind { display: block; font: 800 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gc); margin-bottom: 4px; }
}

/* =========================================================================
   THÈME « SOIRÉE JEUX » (docs/theme-soiree-jeux.md §5) — plateau classique = vrais objets
   Actif quand #screen-game porte data-theme-clair (posé par GameUI sur le plateau classique) : les cases de papier
   à bandeau de couleur (.sj-case.is-bandeau), le centre en feutre vert, de vrais dés ivoire, encre sombre. Lisible
   en sombre ET en clair. Les plateaux payants gardent leur décor (thème « Espace »). Jetons uniquement.
   ========================================================================= */
#screen-game[data-theme-clair] .board[data-look="reel"] {
  --pb-bg: var(--tapis); --pb-tile: var(--papier); --pb-ink: var(--encre); --pb-accent: var(--accent); --pb-accent-2: var(--accent-2); --pb-glow: var(--tapis-clair);
  border: 0; border-radius: var(--r-md);
  background: var(--bois);
  box-shadow: 0 0 0 1px var(--bois-2), var(--ombre-3);
}
#screen-game[data-theme-clair] .board[data-look="reel"] .tile { color: var(--encre); background: var(--papier); border: 1px solid color-mix(in srgb, var(--encre) 55%, var(--papier)); border-radius: var(--r-xs); }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.type-prop { background: var(--papier); }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.corner { background: color-mix(in srgb, var(--papier) 88%, var(--encre)); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-name { color: var(--encre); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-kind, #screen-game[data-theme-clair] .board[data-look="reel"] .t-visit { color: var(--encre); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-val { color: var(--encre); text-shadow: none; }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-dock .t-ico { text-shadow: none; }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-mine { box-shadow: none; }
/* Centre : le feutre vert de la table, le nom du jeu imprimé comme sur une boîte */
#screen-game[data-theme-clair] .board[data-look="reel"] .board-center { border: 1px solid color-mix(in srgb, var(--encre) 55%, var(--tapis)); background: radial-gradient(120% 120% at 50% 35%, var(--tapis-clair), var(--tapis) 60%, var(--tapis-2)); }
#screen-game[data-theme-clair] .board[data-look="reel"] .bc-mark { color: rgb(255 255 255 / .16); -webkit-text-stroke: 0; font-family: var(--font-display); }
#screen-game[data-theme-clair] .board[data-look="reel"] .bc-mark small { display: none; }
#screen-game[data-theme-clair] .board[data-look="reel"] .bc-chip { color: var(--encre); background: var(--papier); border-color: var(--encre); }
#screen-game[data-theme-clair] .board[data-look="reel"] .ticker { color: var(--encre); background: var(--papier); border-color: color-mix(in srgb, var(--encre) 30%, var(--papier)); border-left-color: var(--accent); box-shadow: var(--ombre-objet); }
/* Dés : de vrais dés ivoire à points noirs */
#screen-game[data-theme-clair] .board[data-look="reel"] .face { background: var(--ivoire); border: .3cqw solid color-mix(in srgb, var(--encre) 30%, var(--ivoire)); box-shadow: inset 0 -.6cqw 1.2cqw rgba(0, 0, 0, .16); }
#screen-game[data-theme-clair] .board[data-look="reel"] .pip, #screen-game[data-theme-clair] .board[data-look="reel"] .f1 .pip { background: var(--encre); }
/* Le reste de l'écran : panneaux de la charte */
#screen-game[data-theme-clair] .hud-av { background: var(--surface-3); }
#screen-game[data-theme-clair] .hud-mine.is-on { color: var(--on-accent); }
.pr-help-btn { flex: none; }
@media (max-width: 480px) { .prg-30 { display: none; } } /* (« pr-30 » ressemblait à une classe Tailwind) */
@media (max-width: 360px) { .pr-regles-l { display: none; } }
/* Barre du haut, adversaires, zone « MOI » : panneaux de la charte (sombre comme clair) */
#screen-game[data-theme-clair] .game-top { background: var(--bg); border-bottom-color: var(--line); }
#screen-game[data-theme-clair] .hud-mine { color: var(--accent-text); background: var(--surface); border-color: var(--accent); box-shadow: 6px 0 8px -4px var(--bg); }
#screen-game[data-theme-clair] .hud-mine.is-on { color: var(--on-accent); background: var(--accent); }
#screen-game[data-theme-clair] .hud-chip { background: var(--surface); border-color: var(--line); }
#screen-game[data-theme-clair] .hud-chip.is-turn { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); }
#screen-game[data-theme-clair] .pr-me { background: var(--surface); border-color: var(--line-2); box-shadow: var(--ombre-2); }
#screen-game[data-theme-clair] .me-av { background: var(--surface-3); }
#screen-game[data-theme-clair] .me-cash { color: var(--text); text-shadow: none; }
#screen-game[data-theme-clair] .me-unit { color: var(--accent-text); }
#screen-game[data-theme-clair] .me-gps { color: var(--ok-text); }
#screen-game[data-theme-clair] .me-set { color: var(--text); background: var(--surface-2); border-color: color-mix(in srgb, var(--gc) 55%, var(--line)); }
#screen-game[data-theme-clair] .me-set .mp { border-color: color-mix(in srgb, var(--gc) 70%, var(--line-hi)); }
#screen-game[data-theme-clair] .me-set small { color: var(--ok-text); }
#screen-game[data-theme-clair] .me-set small.is-hotel { color: var(--danger-text); }
#screen-game[data-theme-clair] .me-set .dot { border-color: var(--line-hi); }
#screen-game[data-theme-clair] .pr-meter { background: var(--surface-3); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-scale .sd { border-color: color-mix(in srgb, var(--encre) 60%, var(--papier)); }

/* Statut du tour dans la barre du haut (« Léa · ⏱ 7 · joue… ») : quand la place manque (téléphone de 375 px, « ? Règles »
   et 3 boutons), il était écrit lettre par lettre dans une colonne de 10 px. Trop étroit → masqué (le panneau d'action
   en bas dit déjà qui joue) ; assez large → affiché comme avant. Requête de conteneur : aucun calcul en JavaScript. */
#screen-game .gt-status { container-type: inline-size; }
@container (max-width: 88px) { #screen-game .gt-status > .gt-who { visibility: hidden; } }

/* =========================================================================
   LOUPE DU PLATEAU (Lot 9 — js/game-ui.js « Loupe du plateau », docs/proprio-v2.md §13)
   Le plateau garde sa taille de mise en page ; il est déplacé / agrandi par transform dans sa scène (.board-wrap).
   • Zoomé : la scène découpe (overflow: clip, jamais un conteneur qui défile) et garde tous les gestes.
   • .is-loupe : noms des cases affichés, police ≥ 11 px À L'ÉCRAN (--cam-s = zoom courant, posé à la fin d'un geste).
   • Boutons : coin haut droit du feutre à la vue d'ensemble ; en bas à droite de la scène une fois zoomé / en plein écran.
   • Plein écran (téléphone) : le plateau prend la place de « MOI » et des réactions ; le gros bouton reste.
   Animé : transform seulement (will-change le temps d'un geste). Jetons de la charte uniquement.
   ========================================================================= */
#screen-game .board-wrap { position: relative; touch-action: pan-x pan-y; }
/* Page qui ne défile pas (téléphone, ordinateur en paysage) : le plateau garde tous les gestes (ni zoom de la page ni
   « tirer pour actualiser » par-dessus la partie) */
@media (max-width: 1023.98px), (min-width: 1024px) and (min-aspect-ratio: 5/4) { #screen-game .board-wrap { touch-action: none; } }
#screen-game .board-wrap:is(.is-zoom, .is-full) { touch-action: none; overflow: hidden; overflow: clip; }
#screen-game .board { user-select: none; -webkit-user-select: none; }
#screen-game .board.is-cam-moving { will-change: transform; }
/* Case touchée (ancien délai du double toucher, retiré au lot 14a : la fiche s'ouvre tout de suite) */
#screen-game .tile.is-tap { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 4; }

/* Noms des cases lisibles en zoom (au moins 11 px à l'écran) */
#board.is-loupe .t-name { display: -webkit-box; font-size: max(calc(11px / var(--cam-s, 2)), 13cqmin); line-height: 1.05; }
/* Petites cases (téléphone) : le nom prend la place de l'icône ; aucune icône redessinée à une taille neuve (un emoji à une
   taille jamais vue passe par la police de secours du système : 20 à 160 ms à froid, docs/fluidite.md §10) */
@container (max-width: 39.98px) or (max-height: 39.98px) { #board.is-loupe .tile:not(.corner):not(.type-card) .t-ico { display: none; } }
#board.is-loupe .t-val { font-size: max(calc(12px / var(--cam-s, 2)), 19cqmin); }

/* Bannière (« À toi ! ») posée sur la scène, hors loupe : tailles calculées sur la largeur du plateau */
#screen-game .board-wrap > .turn-banner {
  font-size: calc(var(--pr-bw, 360px) * .064); max-width: calc(var(--pr-bw, 360px) * .92);
  text-shadow: 0 0 calc(var(--pr-bw, 360px) * .02) var(--accent), 0 calc(var(--pr-bw, 360px) * .004) calc(var(--pr-bw, 360px) * .01) rgba(0, 0, 0, .9);
}
#screen-game .board-wrap > .turn-banner.is-me { text-shadow: 0 0 calc(var(--pr-bw, 360px) * .02) var(--ok), 0 calc(var(--pr-bw, 360px) * .004) calc(var(--pr-bw, 360px) * .01) rgba(0, 0, 0, .9); }
#screen-game .board-wrap > .turn-banner.is-bad { text-shadow: 0 0 calc(var(--pr-bw, 360px) * .02) var(--danger), 0 calc(var(--pr-bw, 360px) * .004) calc(var(--pr-bw, 360px) * .01) rgba(0, 0, 0, .9); }

/* Boutons de la loupe */
.pr-camui {
  position: absolute; z-index: 8; display: flex; align-items: center; gap: 6px; pointer-events: none;
  top: calc(50% - var(--pr-bh, 300px) / 2 + var(--pr-unit, 28px) * 1.62);
  right: calc(50% - var(--pr-bw, 300px) / 2 + var(--pr-unit, 28px) * 1.62);
}
.pr-cam-b {
  position: relative; display: none; place-items: center; width: 36px; height: 36px; padding: 0; pointer-events: auto; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--ombre-2);
  touch-action: manipulation;
}
.pr-cam-b::after { content: ""; position: absolute; inset: -5px; } /* zone de toucher ≥ 44 px, dessin inchangé */
.pr-cam-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-cam-b:active { transform: scale(.92); transition-duration: 0s; }
.pr-cam-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-cam-b.is-in { display: grid; }
@media (max-width: 1023.98px) { .pr-cam-b.is-full { display: grid; } }
.pr-cam-b.is-fit { gap: 6px; width: auto; padding: 0 12px 0 9px; font: 700 .9rem/1 var(--font-display); color: var(--on-accent); background: var(--accent); border-color: transparent; }
#screen-game .board-wrap:is(.is-zoom, .is-full) > .pr-camui { top: auto; right: 8px; bottom: 8px; }
#screen-game .board-wrap.is-zoom .pr-cam-b:is(.is-out, .is-fit) { display: inline-flex; align-items: center; justify-content: center; }
#screen-game .board-wrap.is-zoom:not(.is-full) .pr-cam-b.is-full { display: none; }
/* Fenêtre du centre ouverte : les boutons posés sur le feutre s'effacent (zoomé / plein écran : ils sont dans le coin) */
#screen-game .board-wrap.has-pop:not(.is-zoom):not(.is-full) > .pr-camui, #screen-game .board-wrap.is-auto:not(.is-full) > .pr-camui { display: none; }
/* Plateau en 8 (Carrefour) : pas de feutre en haut à droite → boutons dans le coin de la scène */
#screen-game .board-wrap:has(> .board[data-map="carrefour"]) > .pr-camui { top: 6px; right: 6px; }

/* Plein écran du plateau (téléphone) */
@media (max-width: 1023.98px) {
  #screen-game.pr-plein .pr-me, #screen-game.pr-plein .pr-reacts { display: none !important; }
  #screen-game.pr-plein .board-wrap { container-type: size; align-self: stretch; justify-self: stretch; min-height: 0; height: 100%; }
  #screen-game.pr-plein .board { width: min(100cqw, calc(100cqh * var(--pr-ar, 1))); max-width: none; min-width: 0; }
}
@media (max-width: 1023.98px) and (orientation: portrait) {
  #screen-game.pr-plein .game-main { grid-template-areas: "board" "actions"; grid-template-rows: minmax(0, 1fr) auto; padding-inline: 0; }
  #screen-game.pr-plein .action-panel { margin-inline: 4px; }
}
@media (max-width: 1023.98px) and (orientation: landscape) {
  /* À l'horizontale, la hauteur est ce qui manque : la barre du haut s'efface aussi (le panneau d'action dit qui joue) */
  #screen-game.pr-plein .game-top { display: none; }
  #screen-game.pr-plein .game-main { grid-template-columns: minmax(0, 1fr) minmax(250px, 38%); grid-template-rows: minmax(0, 1fr); grid-template-areas: "board actions"; align-items: stretch; padding-block: 6px; }
  #screen-game.pr-plein .action-panel { align-self: end; }
  /* Boutons en colonne, dans la bande libre à droite du plateau (pas sur la case Départ) */
  #screen-game .board-wrap.is-full > .pr-camui { flex-direction: column; align-items: flex-end; top: 6px; bottom: auto; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pr-cam-b:active { transform: none; } }

/* =========================================================================
   FINITIONS DU PLATEAU CLASSIQUE (Lot 9) — « vrai plateau en carton » (docs/theme-soiree-jeux.md §5)
   Statique (rien d'animé ajouté), jetons « objets réels » uniquement, plateaux payants inchangés.
   • Cases : papier imprimé (léger dégradé), bande de quartier cernée d'un filet d'encre comme sur la boîte.
   • Case possédée : le liseré et la teinte du propriétaire reviennent (la règle « papier » les effaçait).
   • Maisons vertes et hôtel rouge en forme de petites maisons (masque), cernés d'encre.
   • Centre : les deux paquets Chance / Caisse commune posés en biais sur le feutre.
   • Pions : jetons ivoire cerclés de la couleur du joueur, avec un reflet et une ombre posée.
   • Dés : ombre sur le feutre.
   ========================================================================= */
#screen-game[data-theme-clair] .board[data-look="reel"] {
  --pr-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpath d='M5 0 10 4.3V9H0V4.3Z'/%3E%3C/svg%3E");
  --pr-hotel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M2.5 0h11L16 3.4V9H0V3.4Z'/%3E%3C/svg%3E");
}
#screen-game[data-theme-clair] .board[data-look="reel"] .tile:not(.corner) { background: linear-gradient(180deg, var(--papier), color-mix(in srgb, var(--papier) 78%, var(--papier-2))); }
#screen-game[data-theme-clair] .board[data-look="reel"] .side-b .t-band { box-shadow: 0 1px 0 color-mix(in srgb, var(--encre) 70%, transparent); }
#screen-game[data-theme-clair] .board[data-look="reel"] .side-t .t-band { box-shadow: 0 -1px 0 color-mix(in srgb, var(--encre) 70%, transparent); }
#screen-game[data-theme-clair] .board[data-look="reel"] .side-l .t-band { box-shadow: -1px 0 0 color-mix(in srgb, var(--encre) 70%, transparent); }
#screen-game[data-theme-clair] .board[data-look="reel"] .side-r .t-band { box-shadow: 1px 0 0 color-mix(in srgb, var(--encre) 70%, transparent); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-scale { background: color-mix(in srgb, var(--encre) 8%, var(--papier)); }
/* Qui possède quoi : liseré (motif du siège) + teinte du propriétaire, sur le papier */
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-owned {
  border: 2.5px solid var(--oc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc) 26%, var(--papier)), color-mix(in srgb, var(--oc) 12%, var(--papier)));
}
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-owned:is([data-os="1"], [data-os="5"]) { border-style: dashed; }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-owned:is([data-os="2"], [data-os="6"]) { border-style: dotted; }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-owned:is([data-os="3"], [data-os="7"]) { border-style: double; border-width: 3.5px; }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-mine { border-width: 3.5px; }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-own { color: var(--encre); box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 80%, transparent); }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-mortgaged .t-mort { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--encre) 30%, transparent) 0 3px, color-mix(in srgb, var(--papier) 40%, transparent) 3px 6px); }
#screen-game[data-theme-clair] .board[data-look="reel"] .tile.is-mortgaged .t-val { color: color-mix(in srgb, var(--encre) 70%, var(--papier)); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-val.is-rent { color: var(--encre); }
/* Maisons et hôtel : petites maisons cernées d'encre (masque SVG, deux calques : le filet, puis la couleur) */
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl .th,
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl .t-hotel {
  position: relative; border-radius: 0; box-shadow: none; background: var(--encre);
  -webkit-mask: var(--pr-house) center / 100% 100% no-repeat; mask: var(--pr-house) center / 100% 100% no-repeat;
}
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl .th { width: calc(var(--pr-band, 8px) * .62); height: calc(var(--pr-band, 8px) * .6); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl .t-hotel { width: calc(var(--pr-band, 8px) * 1.3); height: calc(var(--pr-band, 8px) * .66); -webkit-mask-image: var(--pr-hotel); mask-image: var(--pr-hotel); }
#screen-game[data-theme-clair] .board[data-look="reel"] .side-l .t-lvl .t-hotel, #screen-game[data-theme-clair] .board[data-look="reel"] .side-r .t-lvl .t-hotel { width: calc(var(--pr-band, 8px) * .86); height: calc(var(--pr-band, 8px) * .6); }
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl :is(.th, .t-hotel)::before {
  content: ""; position: absolute; inset: max(1px, calc(var(--band) * .09)); background: var(--vert);
  -webkit-mask: inherit; mask: inherit;
}
#screen-game[data-theme-clair] .board[data-look="reel"] .t-lvl .t-hotel::before { background: var(--rouge); }
/* Centre : les paquets Chance (orange) et Caisse commune (bleu), posés en biais sous les dés */
.bc-decks { display: none; }
#screen-game .board[data-look="reel"] .bc-decks { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bc-deck {
  position: absolute; display: grid; place-items: center; width: 30%; aspect-ratio: 1.55; rotate: -38deg;
  background: var(--dc); border: .5cqw solid var(--papier); border-radius: 1.4cqw;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 30%, transparent), .55cqw .7cqw 0 -.05cqw color-mix(in srgb, var(--dc) 55%, var(--encre)), .55cqw .7cqw 0 .25cqw color-mix(in srgb, var(--papier) 70%, var(--encre)), var(--ombre-objet);
}
.bc-deck.is-a { --dc: var(--orange); left: 8%; top: 11%; }
.bc-deck.is-b { --dc: var(--bleu); right: 6%; bottom: 20%; }
.bc-deck i { display: grid; place-items: center; font: 700 9.5cqw/1 var(--font-display); font-style: normal; color: var(--papier); }
.bc-deck svg { width: 10cqw; height: 7.3cqw; fill: var(--papier); }
.bc-deck svg .k { fill: color-mix(in srgb, var(--dc) 75%, var(--encre)); }
.bc-deck b { display: none; position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font: 700 2cqw/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--papier); }
@container (min-width: 560px) { .bc-deck b { display: block; } .bc-deck i { translate: 0 -10%; } }
#board.is-loupe .bc-deck b { display: block; }
#board.is-loupe .bc-deck i { translate: 0 -10%; }
/* Pions : jetons ivoire cerclés de la couleur du joueur (reflet et ombre statiques) */
#screen-game[data-theme-clair] .board[data-look="reel"] .pawn:not(.has-skin) .pawn-in {
  background: radial-gradient(circle at 36% 30%, var(--papier) 0 30%, var(--ivoire) 58%, color-mix(in srgb, var(--ivoire) 78%, var(--encre)) 100%);
  border-width: max(2px, calc(var(--tile) * .075));
  box-shadow: 0 calc(var(--tile) * .05) calc(var(--tile) * .09) rgba(0, 0, 0, .45), inset 0 calc(var(--tile) * -.03) 0 color-mix(in srgb, var(--encre) 18%, transparent);
}
#screen-game[data-theme-clair] .board[data-look="reel"] .pawn.is-turn:not(.has-skin) .pawn-in { border-color: var(--papier); box-shadow: 0 0 0 max(2px, calc(var(--tile) * .07)) var(--pc), 0 calc(var(--tile) * .07) calc(var(--tile) * .12) rgba(0, 0, 0, .5); }
/* Dés : ombre posée sur le feutre (le dé roule au-dessus, l'ombre ne tourne pas) */
#screen-game[data-theme-clair] .board[data-look="reel"] .die::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -16%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
}
.perf-lite #screen-game[data-theme-clair] .board[data-look="reel"] .pawn:not(.has-skin) .pawn-in { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }