/* =====================================================================
   Proto Monopoly Claude — feuille de style du moteur
   Les couleurs et polices viennent du thème (theme.json → colors, fonts).
   Les valeurs ci-dessous ne servent que si le thème n'en donne pas.
   ===================================================================== */
:root {
  --bg: #121512; --panel: #1b201c; --panel2: #232a24; --line: #2f3830;
  --text: #ecebe4; --muted: #9aa197; --accent: #c9a646; --danger: #c8553d;
  --board: #17201a; --inner: #141b16;
  --tile: #f2ede1; --tile-text: #1e1b16; --tile-muted: #6e675b; --special: #e6dcc4; --event: #ece3cf;
  --font-display: "Cormorant Garamond"; --font-body: "Manrope";
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 calc(0.12 * var(--u)) calc(0.35 * var(--u)) color-mix(in srgb, var(--board) 70%, #000);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100dvh; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 var(--font-body), "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "tnum" 0;
}
.hidden { display: none !important; }
h1 { margin: 0 0 6px; font: 600 34px/1.05 var(--font-display), Georgia, serif; letter-spacing: -0.01em; text-wrap: balance; }
.sub { color: var(--muted); margin: 0 0 10px; text-wrap: pretty; }
.err { color: var(--danger); min-height: 1.3em; margin: 8px 0 0; }

/* ---------- boutons et champs ---------- */
button {
  font: inherit; font-weight: 600; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; min-height: 40px; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
button:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
button:active { transform: translateY(1px) scale(.98); }
button:focus-visible, .tile:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button.primary { background: var(--accent); color: var(--accent-ink, color-mix(in srgb, var(--accent) 15%, #000)); border-color: transparent; }
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
button.danger { background: var(--danger); border-color: transparent; color: #fff; }
button:disabled { opacity: .4; cursor: default; transform: none; }
button.small { padding: 4px 12px; min-height: 30px; font-size: 13px; }
button.linkish { background: none; border: none; min-height: 0; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; padding: 6px 0; font-size: 13px; font-weight: 500; }
button.linkish:hover { color: var(--text); }
label { display: block; margin: 14px 0; color: var(--muted); font-size: 13px; font-weight: 500; }
input, select {
  font: inherit; width: 100%; margin-top: 6px; padding: 10px 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}

/* ---------- accueil et salle d'attente ---------- */
.card {
  max-width: 440px; margin: 9dvh auto 0; padding: 28px 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 50px -24px color-mix(in srgb, var(--bg) 60%, #000);
}
.card button.primary { width: 100%; margin-top: 10px; padding: 12px; }
#addBotBtn { width: 100%; margin-top: 14px; }
#lobbyPlayers .lp { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#lobbyPlayers .lp .nm { flex: 1; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, #000 30%, transparent); }


/* =====================================================================
   Partie : la scène de la maquette validée (1600 × 1000 px), agrandie ou réduite pour tenir dans la fenêtre.
   Le décor (salon, billard) vient du thème (decor.html) ; les cases sont recopiées de la maquette.
   ===================================================================== */
#game { position: fixed; inset: 0; overflow: hidden; background: #0c0704; }
/* couleur d'accentuation de l'interface : le vert du tapis de billard */
:root { --felt-green: #0e6a3b; --green: #2fa866; --green-hi: #6fdc9f; --green-ring: rgba(95,211,148,.45); --green-grad: linear-gradient(180deg, #23955a 0%, #0e6a3b 100%); }
#stage {
  position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; overflow: hidden; transform-origin: 0 0;
  background: #140c07; font-family: 'Manrope', sans-serif; color: #f8f1e0; line-height: normal;
}

/* cases : le style de chaque case est posé par client.js, exactement comme la maquette */
.tile { cursor: pointer; outline: none; }
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.tile:hover::after { background: rgba(255,255,255,.14); }
.tile:focus-visible::after, .tile.selected::after { box-shadow: 0 0 0 2px var(--green), 0 0 10px 2px rgba(47,168,102,.75); }
.tile.cand::after { box-shadow: 0 0 0 2px var(--green-hi), 0 0 14px 4px rgba(95,211,148,.9); animation: candGlow 1.1s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes candGlow { from { opacity: .55; } to { opacity: 1; } }
.tile.mortgaged > .tb { opacity: .35; filter: grayscale(1); }
.tile .chips { position: absolute; left: 2px; top: 2px; display: flex; gap: 2px; pointer-events: none; }
.tile .chip { font: 800 7px/1 'Manrope', sans-serif; padding: 2px 3px; border-radius: 99px; color: #f8f1e0; background: #5b2d82; }
.tile .chip.fest { background: #c9a24a; color: #2a1a0e; }
.tile .chip.hyp { background: #3d4450; }

/* ---------- panneaux de la maquette : Équipe Or, Équipe Platine, résumé du tour ---------- */
.teamp {
  position: absolute; bottom: 26px; width: 330px; padding: 6px; box-sizing: border-box; border-radius: 26px;
  background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(226,181,74,.35), 0 24px 50px rgba(0,0,0,.35);
  --team: #e2b54a; --team-bg: rgba(226,181,74,.16); --team-row: rgba(226,181,74,.14);
}
.teamp.silver { --team: #cfd6dd; --team-bg: rgba(207,214,221,.14); --team-row: rgba(207,214,221,.12); box-shadow: 0 0 0 1px rgba(207,214,221,.35), 0 24px 50px rgba(0,0,0,.35); }
/* tous les joueurs dans une seule colonne, à gauche du plateau */
#players { left: 28px; width: 312px; }
.teamp .in { padding: 14px 16px; border-radius: 20px; background: #1d120b; box-shadow: inset 0 1px 1px rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.teamp .thead, .teamp .hhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.teamp .pill { padding: 3px 10px; border-radius: 999px; background: var(--team-bg); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--team); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teamp .ttotal { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 20px; color: #f8f1e0; font-variant-numeric: lining-nums tabular-nums; }
.prow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.prow svg { flex: none; }
.prow.cur { background: var(--team-row); box-shadow: inset 3px 0 0 var(--green-hi), 0 0 0 1px var(--green-ring); }
.prow .pn { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: #e9dfc8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow.cur .pn { font-weight: 800; color: #f8f1e0; }
.prow .pn small { margin-left: 6px; font-size: 11px; font-weight: 700; color: #b9a48c; }
.prow .pc { font-weight: 700; font-size: 14px; color: #e9dfc8; font-variant-numeric: tabular-nums; }
.prow.out { opacity: .45; }
.prow.out .pn { text-decoration: line-through; }

/* résumé du tour et actions du moment, à droite des deux boutons fixes */
#hud.hudp { left: 1086px; width: 486px; box-shadow: 0 0 0 1px var(--green-ring), 0 24px 50px rgba(0,0,0,.35); --team: var(--green-hi); --team-bg: rgba(47,168,102,.2); }
#hud .in { gap: 6px; padding: 12px 16px; }
#diceText { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: #b9a48c; font-variant-numeric: tabular-nums; white-space: nowrap; }
#diceText.pending { visibility: hidden; }
#diceText .dtotal { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 20px; color: #f8f1e0; }
#diceText .ddouble { margin-left: 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f8f1e0; background: var(--green); padding: 2px 7px; border-radius: 99px; align-self: center; }
#hudInfo:empty { display: none; }
#hudInfo { font-size: 13px; color: #e9dfc8; }
.htags { display: flex; flex-wrap: wrap; gap: 6px; }
.htag { padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(47,168,102,.2); color: var(--green-hi); }
.htag.party { background: rgba(91,45,130,.5); color: #f3d58a; }
#actions:empty { display: none; }
#actions p { margin: 0 0 6px; font-size: 13px; line-height: 1.35; color: #e9dfc8; text-wrap: pretty; }
#actions .arow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button.ghost {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #2a1a0e; color: #f8f1e0;
  box-shadow: 0 0 0 1px var(--green-ring); font: 700 13px/1 'Manrope', sans-serif;
}
button.ghost:hover { background: #12482c; }
button.ghost.danger { background: #7a1f2b; box-shadow: 0 0 0 1px rgba(255,180,170,.4); }
#actions select { width: auto; max-width: 220px; margin: 0; padding: 6px 10px; font-size: 13px; background: #140c07; border-color: var(--green-ring); color: #f8f1e0; }

/* carte « Carnet mondain » tirée : même papier que la pile du plateau, en grand */
#cardPop {
  position: absolute; left: 600px; top: 330px; width: 400px; padding: 22px 26px 18px; box-sizing: border-box; z-index: 1;
  border-radius: 12px; background: #f8f1e0; color: #2a1a0e; box-shadow: inset 0 0 0 4px #c9a24a, -8px 8px 0 #e9dfc8, -14px 14px 0 #d8cdb4, 0 30px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  animation: cardIn .35s cubic-bezier(.23,1,.32,1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
#cardPop .cq { width: 34px; height: 34px; border-radius: 50%; background: #141414; display: flex; align-items: center; justify-content: center; }
#cardPop .cq span { width: 20px; height: 20px; border-radius: 50%; background: #f8f1e0; font: 800 15px/20px 'Playfair Display', serif; color: #141414; }
#cardPop .ck { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: #3a2508; }
#cardPop .ct { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px; line-height: 1.1; text-wrap: balance; }
#cardPop .cx { font-size: 15px; line-height: 1.4; text-wrap: pretty; }
#cardPop .cb { margin-top: 4px; font-size: 11px; font-weight: 700; color: #7a6550; }

/* ---------- boutons des panneaux et tiroir (hors de la scène) ---------- */
#tools { position: fixed; top: 10px; right: 10px; z-index: 12; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#tools button {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(29,18,11,.88); color: #e9dfc8;
  box-shadow: 0 0 0 1px var(--green-ring), 0 8px 18px rgba(0,0,0,.35); font: 700 13px/1 'Manrope', sans-serif; backdrop-filter: blur(6px);
}
#tools button:hover { color: #f8f1e0; box-shadow: 0 0 0 1px var(--green-hi), 0 8px 18px rgba(0,0,0,.35); }
#tools button[aria-pressed="true"] { background: var(--green-grad); color: #f8f1e0; box-shadow: 0 0 0 1px var(--green-hi), 0 8px 18px rgba(0,0,0,.35); }
#tools #cheatTab { box-shadow: 0 0 0 1px rgba(255,79,163,.6), 0 8px 18px rgba(0,0,0,.35); }
#tools #unzoomBtn { background: var(--green-grad); color: #f8f1e0; }
#drawer {
  position: fixed; top: 52px; right: 10px; width: min(330px, calc(100vw - 20px)); max-height: min(560px, calc(100dvh - 52px - 23dvh)); z-index: 11; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px; box-sizing: border-box; border-radius: 22px; background: rgba(29,18,11,.96); color: #e9dfc8;
  box-shadow: 0 0 0 1px var(--green-ring), inset 0 1px 1px rgba(255,255,255,.12), 0 24px 50px rgba(0,0,0,.5);
  --text: #f8f1e0; --muted: #b9a48c; --line: rgba(95,211,148,.2); --panel2: #12301f; --accent: #2fa866;
}
#drawer .pane { display: none; }
#drawer .pane.on { display: block; }
#drawer h3 { margin: 0 0 8px; font: 800 20px/1.15 'Playfair Display', serif; color: #f8f1e0; }

/* pions, bâtiments et dés : calque à plat posé juste après le plateau incliné (voir scene.js).
   --s = échelle du plateau (×1,33 sur la maquette), --u = unité des dés */
#pieces { position: absolute; inset: 0; pointer-events: none; z-index: 0; --s: 1; --u: 7px; }
.pawn { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pawn.gone { opacity: 0; }
.pawn-fig { position: absolute; left: calc(-14px * var(--s)); top: calc(-46px * var(--s)); width: calc(28px * var(--s)); height: calc(49px * var(--s));
  transform-origin: 50% 94%; pointer-events: none; }
.pawn-fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* repère doré au-dessus du pion du joueur dont c'est le tour */
.pawn-mark { position: absolute; left: 50%; top: calc(-12px * var(--s)); width: calc(10px * var(--s)); height: calc(8px * var(--s)); translate: -50% 0;
  background: var(--green-hi); clip-path: polygon(50% 100%, 0 0, 100% 0); opacity: 0; }
.pawn.current .pawn-mark { opacity: 1; animation: markBob 1.4s ease-in-out infinite; }
@keyframes markBob { 50% { translate: -50% calc(-4px * var(--s)); } }
@media (prefers-reduced-motion: reduce) { .pawn.current .pawn-mark, .tile.cand::after { animation: none; } }

/* bâtiments : dessins isométriques (buildings.js) */
.bld { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bld > div { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.bld .bimg { position: absolute; display: block; max-width: none; pointer-events: none; }
.bld .escorts { position: absolute; left: calc(-38px * var(--k, 1)); top: calc(-100px * var(--k, 1)); width: calc(76px * var(--k, 1)); height: calc(28px * var(--k, 1));
  filter: drop-shadow(0 0 6px #ff4fa3e6); animation: escGlow 1.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
.bld .escorts svg { width: 100%; height: 100%; display: block; }
@keyframes escGlow { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bld .escorts { animation: none; } }

/* dés rouges à points blancs, comme la maquette ; chaque dé est un petit cube 3D incliné comme le plateau */
.bdie { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 100000; }
.dview { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.bcube { position: absolute; left: calc(-2.4 * var(--u)); top: calc(-2.4 * var(--u)); width: calc(4.8 * var(--u)); height: calc(4.8 * var(--u)); transform-style: preserve-3d; }
.bface {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(0.6 * var(--u));
  background: #c81d38; border-radius: calc(0.7 * var(--u)); backface-visibility: hidden;
  box-shadow: inset 0 0 0 calc(0.12 * var(--u)) #8e0f24, inset 0 0 calc(0.9 * var(--u)) #6d0a1a66;
}
.bface.f1 { background: #d8223f; }
.bface.f2, .bface.f5 { background: #c41b36; }
.bface.f3, .bface.f4 { background: #b0152f; }
.bface.f6 { background: #a5132c; }
.bface i { width: calc(0.95 * var(--u)); height: calc(0.95 * var(--u)); border-radius: 50%; place-self: center; }
.bface i.on { background: radial-gradient(circle at 40% 35%, #ffffff 0%, #d9d2c4 100%); box-shadow: 0 calc(0.06 * var(--u)) 0 #0004 inset; }
.bface.f1 { transform: translateZ(calc(2.4 * var(--u))); }
.bface.f6 { transform: rotateY(180deg) translateZ(calc(2.4 * var(--u))); }
.bface.f3 { transform: rotateY(90deg) translateZ(calc(2.4 * var(--u))); }
.bface.f4 { transform: rotateY(-90deg) translateZ(calc(2.4 * var(--u))); }
.bface.f2 { transform: rotateX(90deg) translateZ(calc(2.4 * var(--u))); }
.bface.f5 { transform: rotateX(-90deg) translateZ(calc(2.4 * var(--u))); }
.dshadow { position: absolute; left: calc(-3 * var(--u)); top: calc(-1.4 * var(--u)); width: calc(6 * var(--u)); height: calc(2.8 * var(--u));
  border-radius: 50%; background: radial-gradient(closest-side, #0009, #0000); z-index: 99999; transform-origin: 50% 50%; }

/* =====================================================================
   Panneau latéral
   ===================================================================== */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; }
.panel:empty { display: none; }
#detail .row { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; padding: 2px 0; }
.prop { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.prop .pn { flex: 1; }
.prop.mort .pn { opacity: .5; text-decoration: line-through; }
.prop button { padding: 3px 10px; min-height: 28px; font-size: 12px; }
#log { overflow-y: auto; font-size: 13px; color: var(--muted); }
#log div { padding: 2px 0; }
#log div:last-child { color: var(--text); }

#toast {
  position: fixed; left: 50%; top: 14px; translate: -50% -12px; background: var(--danger); color: #fff;
  padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; max-width: 90vw; z-index: 10;
  transition: opacity .25s var(--ease), translate .25s var(--ease);
}
#toast.show { opacity: 1; translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

#legend .legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-size: 13px; color: var(--muted); }
#legend .lg { display: flex; align-items: center; gap: 8px; }



/* étiquette au survol d'une case : nom, prix, propriétaire, en grand et à plat */
#tip {
  position: fixed; z-index: 20; pointer-events: none; min-width: 180px; max-width: 260px;
  padding: 10px 14px 12px; border-radius: 12px; background: var(--tile); color: var(--tile-text);
  box-shadow: 0 12px 30px -10px #000c, inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0; translate: 0 4px; transition: opacity .15s var(--ease), translate .15s var(--ease);
}
#tip.show { opacity: 1; translate: 0 0; }
#tip .tip-band { height: 6px; border-radius: 3px; margin: -2px 0 8px; }
#tip .tip-name { font: 600 21px/1.1 var(--font-display), Georgia, serif; }
#tip .tip-sub { font-size: 13px; color: var(--tile-muted); margin-top: 2px; }
#tip .tip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: 6px; }
#tip .tip-row b { font-variant-numeric: tabular-nums; }
@media (hover: none) { #tip { display: none; } }


/* ---------- son : petit panneau discret en haut à gauche ---------- */
#sound {
  position: fixed; left: 12px; top: 10px; z-index: 15; display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; border-radius: 99px; background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(6px); opacity: .5; transition: opacity .2s var(--ease);
}
#sound:hover, #sound:focus-within { opacity: 1; }
#sound button {
  width: 30px; height: 30px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: none; border: 0; color: var(--accent); cursor: pointer;
}
#sound button:hover { background: var(--panel2); }
#sound button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#sound svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#sound button[aria-pressed="false"] { color: var(--muted); }
#sound button[aria-pressed="false"] svg { opacity: .55; }
#sound button[aria-pressed="false"]::after { content: ""; position: absolute; width: 20px; height: 1.8px; background: currentColor; rotate: -45deg; border-radius: 2px; }
#sound button { position: relative; }
#sound input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 74px; height: 4px; min-height: 0; padding: 0; border: 0; box-shadow: none; margin: 0 4px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--line) var(--p, 50%));
}
#sound input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 0; }
#sound input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 0; }
@media (max-width: 900px) { #sound input[type="range"] { width: 56px; } }
/* morceau en cours : titre et artiste, puis le bouton « suivant » */
#sndNow, #sndNext { display: none; }
#sound.playing #sndNow { display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 220px; padding: 0 4px 0 8px;
  border-left: 1px solid var(--line); margin-left: 4px; line-height: 1.15; }
#sound.playing #sndNext { display: grid; }
#sndNow b { font: 700 12px/1.15 'Manrope', sans-serif; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sndNow small { font: 600 10px/1.2 'Manrope', sans-serif; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sndNext svg { width: 15px; height: 15px; }
#sound.playing { opacity: .8; }

/* ---------- salle d'attente : options ---------- */
.opts { margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.opts label { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--text); font-size: 14px; }
.opts label input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.opts label select { width: auto; margin: 0 0 0 auto; padding: 6px 10px; }
.opts .hint { color: var(--muted); font-size: 12px; margin: 2px 0 0 28px; }
.lp .team { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.team-A { background: #e2b54a; color: #2a1a0e; }
.team-B { background: #cfd6dd; color: #1d2430; }

/* ---------- joueurs regroupés par équipe ---------- */
.teamhead { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.teamhead .team { padding: 1px 8px; border-radius: 99px; letter-spacing: .04em; }
#detail table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
#detail td { padding: 2px 0; color: var(--muted); }
#detail td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
#detail tr.now td { color: var(--accent); font-weight: 700; }
#detail p { color: var(--muted); font-size: 13px; margin: 6px 0 0; text-wrap: pretty; }

/* ---------- mode démo / triche ---------- */
#cheat h3 { margin: 0 0 4px; font: 600 19px/1.15 var(--font-display), Georgia, serif; }
#cheat .sub { font-size: 12px; margin-bottom: 8px; }
#cheat .crow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); }
#cheat .crow > b { flex: 0 0 100%; font-size: 12px; color: var(--muted); font-weight: 600; }
#cheat input, #cheat select { width: auto; flex: 1 1 90px; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13px; border-radius: 8px; }
#cheat input[type="checkbox"] { flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
#cheat label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 13px; }
#cheat button { padding: 5px 12px; min-height: 30px; font-size: 13px; }

/* tiroir : retour, groupes avec leurs propriétés, étiquette de survol avec le logo */
#drawer button.back { min-height: 28px; padding: 0 12px; margin: 0 0 8px; font-size: 12px; background: #12301f; border: 0; box-shadow: 0 0 0 1px var(--green-ring); color: #f8f1e0; }
#legend .groups { display: flex; flex-direction: column; gap: 10px; }
#legend .ghead { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #f8f1e0; margin-bottom: 2px; }
#legend .grow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; width: 100%; min-height: 0; padding: 4px 6px 4px 20px;
  border: 0; border-radius: 8px; background: none; color: #e9dfc8; font: 600 13px/1.25 'Manrope', sans-serif; text-align: left; }
#legend .grow:hover { background: rgba(47,168,102,.14); }
#legend .grow .go { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #b9a48c; }
#legend .grow .go .dot { width: 8px; height: 8px; }
#legend .grow .gp { font-variant-numeric: tabular-nums; color: #f8f1e0; min-width: 40px; text-align: right; }
#mine .pn:hover { color: var(--green-hi); text-decoration: underline; text-underline-offset: 3px; }
#tip .tip-mark { display: flex; align-items: center; min-height: 44px; margin-bottom: 2px; }
#tip .tip-mark img { display: block; max-width: 180px; max-height: 56px; object-fit: contain; }

/* argent qui circule : jetons de casino qui volent d'un pion à l'autre et montant au-dessus du pion */
.mchip { position: absolute; left: calc(-7px * var(--s)); top: calc(-7px * var(--s)); width: calc(14px * var(--s)); height: calc(14px * var(--s));
  border-radius: 50%; z-index: 100001; pointer-events: none;
  background: radial-gradient(circle, #2fa866 0 38%, #f8f1e0 39% 46%, transparent 47%),
    repeating-conic-gradient(#0e6a3b 0 22.5deg, #f8f1e0 22.5deg 45deg);
  box-shadow: 0 0 0 1px #c9a24a, 0 3px 6px rgba(0,0,0,.45); }
.mamount { position: absolute; left: 0; bottom: 0; pointer-events: none; white-space: nowrap;
  font: 800 calc(17px * var(--s))/1 'Playfair Display', serif; font-variant-numeric: tabular-nums;
  padding: calc(3px * var(--s)) calc(8px * var(--s)); border-radius: 99px; background: rgba(20,12,7,.82);
  box-shadow: 0 0 0 1px currentColor, 0 6px 14px rgba(0,0,0,.45); }
.mamount.up { color: #6fdc9f; }
.mamount.down { color: #ff7a6e; }

/* ---------- échanges entre joueurs ---------- */
#tools #tradeTab.ping { box-shadow: 0 0 0 2px var(--green-hi), 0 8px 18px rgba(0,0,0,.35); }
#trade .muted, #trade p { color: #b9a48c; font-size: 12px; margin: 0 0 8px; text-wrap: pretty; }
#trade .tpend { padding: 10px; margin-bottom: 12px; border-radius: 14px; background: #12301f; box-shadow: 0 0 0 1px var(--green-ring); }
#trade .tpend p { color: #f8f1e0; font-size: 13px; }
#trade .arow, #tradePop .arow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#trade .twho { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: #e9dfc8; }
#trade select { flex: 1; margin: 0; padding: 6px 10px; font-size: 13px; background: #140c07; color: #f8f1e0; border: 1px solid rgba(226,181,74,.35); border-radius: 8px; }
#trade .tcols2 { display: flex; flex-direction: column; gap: 10px; }
#trade .tlist { display: flex; flex-direction: column; gap: 2px; }
#trade .tlist > b { font-size: 12px; color: #f8f1e0; margin-bottom: 2px; }
#trade .tpick { display: grid; grid-template-columns: auto auto 1fr auto; gap: 7px; align-items: center; padding: 4px 6px; margin: 0; border-radius: 8px; font-size: 13px; color: #e9dfc8; cursor: pointer; }
#trade .tpick:hover { background: rgba(47,168,102,.14); }
#trade .tpick input { width: 15px; height: 15px; margin: 0; accent-color: #2fa866; }
#trade .tpick .tp { font-size: 11px; color: #b9a48c; font-variant-numeric: tabular-nums; }
#trade .tmoney { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0 6px; font-size: 12px; color: #b9a48c; }
#trade .tmoney input { width: 90px; margin: 0; padding: 5px 8px; font-size: 13px; background: #140c07; color: #f8f1e0; border: 1px solid rgba(226,181,74,.35); border-radius: 8px; }
#trade .tnone { font-size: 12px; color: #8a7a68; padding: 2px 6px; }
#trade .tform.off .tlist, #trade .tform.off .twho { opacity: .5; pointer-events: none; }
#trade .tgo { margin-top: 10px; width: 100%; }
#trade .tgo:disabled { opacity: .45; cursor: not-allowed; }
button.ghost.tok { background: #2fa866; color: #f8f1e0; box-shadow: 0 0 0 1px #6fdc9f; }
button.ghost.tok:hover { background: #38b873; }
#detail .tradeask { margin-top: 12px; width: 100%; }
.tcols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.tcols .tswap { align-self: center; font-size: 20px; color: #6fdc9f; }
.tcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcol > b { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b9a48c; }
.tcol .tline { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 3px 6px; border: 0; border-radius: 6px; background: rgba(255,255,255,.05);
  color: #f8f1e0; font: 700 13px/1.25 'Manrope', sans-serif; text-align: left; cursor: pointer; }
.tcol .tline:hover { background: rgba(47,168,102,.2); }
.tcol .tline small { margin-left: auto; font-size: 10px; color: #b9a48c; }
.tcol .tcash { font: 800 16px/1.2 'Playfair Display', serif; color: #6fdc9f; padding: 2px 6px; }
.tcol .tnone { font-size: 12px; color: #8a7a68; padding: 2px 6px; }
.tcol .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#tradePop {
  position: absolute; left: 560px; top: 300px; width: 480px; padding: 20px 22px 18px; box-sizing: border-box; z-index: 2;
  border-radius: 22px; background: rgba(20,12,7,.97); color: #f8f1e0;
  box-shadow: 0 0 0 2px #2fa866, inset 0 1px 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 10px; animation: cardIn .35s cubic-bezier(.23,1,.32,1);
}
#tradePop .ck { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: #6fdc9f; }
#tradePop .ct { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px; line-height: 1.1; }
#tradePop .arow { justify-content: flex-end; }
#tradePop button.ghost { min-height: 36px; padding: 0 18px; font-size: 14px; }
#tradePop.result.ok { box-shadow: 0 0 0 2px #6fdc9f, inset 0 1px 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6); }
#tradePop.result.no { box-shadow: 0 0 0 2px #ff7a6e, inset 0 1px 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6); }
#tradePop.result.no .ck { color: #ff9a90; }
#tradePop .ticon { margin-right: 2px; }

/* ---------- téléphone ----------
   Pas de zoom ni de défilement du navigateur sur la partie : le jeu zoome et déplace lui-même la scène
   (voir fit() dans client.js), sans quoi le plateau 3D se dessine mal pendant le geste. */
#game { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#game #drawer, #game #drawer * { touch-action: pan-y; -webkit-user-select: text; user-select: text; }
#rotate {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; box-sizing: border-box; text-align: center; background: rgba(12,7,4,.94); color: #f8f1e0; touch-action: manipulation;
}
#rotate p { margin: 0; max-width: 300px; font: 700 18px/1.3 'Manrope', sans-serif; }
#rotate .sub { font-size: 14px; font-weight: 500; color: #b9a48c; margin-bottom: 8px; }
#rotate button.primary { background: var(--green-grad); color: #f8f1e0; }
.rot-phone { width: 46px; height: 78px; border-radius: 9px; border: 3px solid #e2b54a; margin-bottom: 8px; animation: rotPhone 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes rotPhone { 0%, 25% { rotate: 0deg; } 55%, 100% { rotate: -90deg; } }
@media (prefers-reduced-motion: reduce) { .rot-phone { animation: none; rotate: -90deg; } }
/* écran bas (téléphone en paysage) : boutons et tiroir plus compacts */
@media (max-height: 500px) {
  #tools { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); gap: 4px; }
  #tools button { min-height: 28px; padding: 0 10px; font-size: 12px; }
  #drawer { top: 42px; right: max(6px, env(safe-area-inset-right)); max-height: calc(100dvh - 50px); padding: 12px 14px; border-radius: 16px; }
  #sound { top: 6px; left: max(6px, env(safe-area-inset-left)); }
}
/* écran étroit (téléphone tenu droit) : les boutons passent en bas pour ne pas cacher le son */
@media (max-width: 600px) {
  #tools { top: auto; bottom: calc(var(--barh, 60px) + 6px); left: 8px; right: 8px; justify-content: center; }
  #tools button { min-height: 30px; padding: 0 11px; font-size: 12px; }
  #drawer { top: auto; bottom: calc(var(--barh, 60px) + 76px); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 150px - var(--barh, 60px)); }
}

/* =====================================================================
   0.18.0 — liste des joueurs d'un seul côté, animations façon Business Tour
   ===================================================================== */
/* liste des joueurs : groupes par équipe (titre + total), sinon une seule liste dans l'ordre du tour */
#players .in { gap: 4px; padding: 12px 14px; }
.pgroup { display: flex; flex-direction: column; gap: 2px; }
.pgroup + .pgroup { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(226,181,74,.18); }
.pgroup.tB { --team: #cfd6dd; --team-bg: rgba(207,214,221,.14); --team-row: rgba(207,214,221,.12); }
.pgroup .thead { margin-bottom: 2px; }
.pgroup .tname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pgroup .tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--team); flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
.prow .pturn { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0c2a1a; background: var(--green-hi); padding: 2px 6px; border-radius: 99px; }
/* téléphone : la liste devient une bande en haut de l'écran (hors de la scène, pour rester lisible) */
#players.band { position: fixed; left: 0; right: 0; top: 0; bottom: auto; width: auto; z-index: 12;
  padding: max(3px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 3px max(6px, env(safe-area-inset-left));
  border-radius: 0; background: rgba(20,12,7,.94); box-shadow: 0 1px 0 rgba(226,181,74,.35), 0 8px 18px rgba(0,0,0,.35); touch-action: pan-x; }
#players.band .in { flex-direction: row; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
#players.band .in::-webkit-scrollbar { display: none; }
#players.band .pgroup { flex-direction: row; align-items: center; gap: 3px; flex: none; margin: 0; padding: 2px 4px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--team-bg); }
#players.band .thead { margin: 0; gap: 4px; }
#players.band .pill { font-size: 9px; padding: 2px 6px; letter-spacing: .08em; }
#players.band .tdot { width: 8px; height: 8px; }
#players.band .ttotal { font-size: 13px; }
#players.band .prow { gap: 4px; padding: 2px 7px; border-radius: 10px; }
#players.band .prow svg { width: 13px; height: 17px; }
#players.band .prow .pn { font-size: 12px; max-width: 84px; }
#players.band .prow .pn small, #players.band .prow .pturn { display: none; }
#players.band .prow .pc { font-size: 12px; }
@media (max-height: 500px) {
  body.hasBand #tools { top: calc(40px + env(safe-area-inset-top)); }
  body.hasBand #sound { top: calc(40px + env(safe-area-inset-top)); }
  body.hasBand #drawer { top: calc(76px + env(safe-area-inset-top)); max-height: calc(100dvh - 84px - var(--barh, 56px)); }
}
@media (max-width: 600px) { body.hasBand #sound { top: 42px; } }

/* ombre du pion : elle reste au sol pendant les sauts */
.pshadow { position: absolute; left: calc(-14px * var(--s)); top: calc(-5px * var(--s)); width: calc(28px * var(--s)); height: calc(9px * var(--s));
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0)); z-index: 5; pointer-events: none; }
.pshadow.gone { opacity: 0; }

/* effets posés sur le plateau : une enveloppe placée au bon endroit (transform), un contenu animé */
.fxw { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
/* total des dés */
.dpop { z-index: 100003; }
.dpop-in { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.dpop-in b { font: 800 calc(64px * var(--s))/1 'Playfair Display', serif; color: #f8f1e0; -webkit-text-stroke: calc(1.5px * var(--s)) #2a1a0e;
  text-shadow: 0 calc(4px * var(--s)) 0 #2a1a0e, 0 calc(10px * var(--s)) calc(18px * var(--s)) rgba(0,0,0,.55); font-variant-numeric: lining-nums; }
.dpop-in span { margin-top: calc(4px * var(--s)); padding: calc(3px * var(--s)) calc(12px * var(--s)); border-radius: 99px; background: var(--green-grad);
  font: 800 calc(18px * var(--s))/1.1 'Manrope', sans-serif; letter-spacing: .12em; color: #f8f1e0; box-shadow: 0 0 0 calc(2px * var(--s)) #e2b54a, 0 6px 14px rgba(0,0,0,.45); }
.dpop-in.dbl b { color: #f3d58a; }
/* liasse de billets */
.mbill { position: absolute; left: calc(-12px * var(--s)); top: calc(-7px * var(--s)); width: calc(24px * var(--s)); height: calc(13px * var(--s)); border-radius: calc(2px * var(--s));
  background: radial-gradient(circle at 50% 50%, #e9f6e3 0 18%, transparent 20%), linear-gradient(135deg, #7fd29b, #2f8a52);
  box-shadow: inset 0 0 0 calc(1.5px * var(--s)) #d6f0d2, 0 0 0 1px #1d5a35, calc(2px * var(--s)) calc(2px * var(--s)) 0 #2a7a4a, calc(3px * var(--s)) calc(4px * var(--s)) calc(6px * var(--s)) rgba(0,0,0,.45); }
.mamount { font-size: calc(21px * var(--s)); }
/* pastille d'achat */
.oflag { position: absolute; left: calc(-9px * var(--s)); top: calc(-18px * var(--s)); width: calc(18px * var(--s)); height: calc(18px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%), var(--c, #e2b54a); transform-origin: 50% 100%;
  box-shadow: 0 0 0 calc(2px * var(--s)) #f8f1e0, 0 0 0 calc(3px * var(--s)) #c9a24a, 0 calc(6px * var(--s)) calc(10px * var(--s)) rgba(0,0,0,.45); }
/* poussière de chantier */
.dust { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.dust i { position: absolute; left: calc(-7px * var(--s)); top: calc(-7px * var(--s)); width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233,223,200,.9), rgba(233,223,200,0)); }
/* confettis et badge de soirée */
.conf { position: absolute; left: calc(-3px * var(--s)); top: calc(-5px * var(--s)); width: calc(6px * var(--s)); height: calc(10px * var(--s)); border-radius: 1px; }
.cbadge { position: absolute; left: 0; top: 0; white-space: nowrap; padding: calc(4px * var(--s)) calc(12px * var(--s)); border-radius: 99px; background: #5b2d82; color: #f3d58a;
  font: 800 calc(26px * var(--s))/1 'Playfair Display', serif; box-shadow: 0 0 0 calc(2px * var(--s)) #f3d58a, 0 8px 18px rgba(0,0,0,.5); }
/* case qui change de propriétaire : un voile de sa couleur qui s'efface (achat) ou qui clignote (faillite) */
.tile .tflash { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }

/* effets à l'écran (hors de la scène) : pluie de pièces sur la carte du joueur au passage du départ */
#fxl { position: fixed; inset: 0; pointer-events: none; z-index: 14; overflow: hidden; }
#fxl .fcoin { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0 15%, #f0c64e 35%, #b8862a 100%); box-shadow: inset 0 0 0 2px #8a6420, 0 2px 4px rgba(0,0,0,.4); }
#fxl .fplus { position: absolute; white-space: nowrap; padding: 3px 10px; border-radius: 99px; background: rgba(20,12,7,.85);
  font: 800 18px/1 'Playfair Display', serif; color: #6fdc9f; box-shadow: 0 0 0 1px #6fdc9f, 0 6px 14px rgba(0,0,0,.45); }

/* =====================================================================
   0.19.0 — boutons fixes et soirées à Ibiza
   ===================================================================== */
/* Zone d'action hors de la scène : ni le zoom ni le déplacement du plateau ne la bougent.
   --k suit l'échelle de la scène sur ordinateur (voir fit() dans client.js) : la barre reste dans le bas du décor, sous le plateau. */
#actbar { position: fixed; left: 50%; bottom: calc(14px * var(--k, 1)); translate: -50% 0; z-index: 12; --k: 1; }
#actbar .slots { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--k)); width: calc(440px * var(--k)); }
button.slot {
  display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--k)); min-width: 0; height: calc(60px * var(--k)); min-height: 0;
  padding: 0 calc(10px * var(--k)); border: 0; border-radius: 999px; color: #f8f1e0; white-space: nowrap;
  font: 800 calc(18px * var(--k))/1 'Playfair Display', serif; font-variant-numeric: lining-nums; cursor: pointer;
  background: radial-gradient(circle at 35% 20%, #2fae6b 0%, #148349 50%, #0b5a32 100%);
  box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 4px #0b5a32, inset 0 0 0 5px rgba(201,162,74,.55), inset 0 6px 10px rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.5);
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
button.slot svg { flex: none; width: calc(21px * var(--k)); height: calc(21px * var(--k)); }
button.slot .sl { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
button.slot:hover:not(:disabled) { transform: translateY(-2px); }
button.slot:active:not(:disabled) { transform: translateY(0) scale(.97); }
button.slot:focus-visible { outline: 2px solid #6fdc9f; outline-offset: 3px; }
/* grisé : toujours là, toujours lisible, mais clairement inactif */
button.slot:disabled { opacity: 1; cursor: not-allowed; color: #a2937d; background: #2b2018;
  box-shadow: inset 0 0 0 1px rgba(201,162,74,.3), 0 8px 16px rgba(0,0,0,.4); }
button.slot:disabled .sl { text-shadow: none; }
button.slot.busy svg { animation: chipSpin 1.1s linear infinite; }
@keyframes chipSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.slot.busy svg { animation: none; } }
#actions p.ph { display: none; }

/* téléphone : barre pleine largeur, au-dessus de la barre système ; à gauche le message, à droite les autres actions */
body.hasBand #hud { display: none; }
body.hasBand #actbar {
  left: 0; right: 0; bottom: 0; translate: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(20,12,7,.94); box-shadow: 0 -1px 0 rgba(226,181,74,.35), 0 -8px 18px rgba(0,0,0,.35); touch-action: manipulation;
}
body.hasBand #actbar .slots { grid-column: 2; grid-row: 1; width: 304px; gap: 8px; }
body.hasBand button.slot { height: 44px; font-size: 15px; }
body.hasBand button.slot svg { width: 18px; height: 18px; }
#actbar #actions { display: contents; }
#actbar #actions p { grid-column: 1; grid-row: 1; margin: 0; font-size: 11px; line-height: 1.25; color: #e9dfc8; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#actbar #actions p.ph { display: -webkit-box; }
#actbar #actions .arow { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
#actbar #actions .arow button.ghost { min-height: 36px; padding: 0 10px; font-size: 12px; }
#actbar #actions .arow select { flex: 1 1 90px; min-width: 0; max-width: 130px; padding: 4px 6px; font-size: 12px; }
/* téléphone en paysage : les boutons des panneaux passent en colonne dans la marge de droite, à côté du plateau */
@media (max-height: 500px) {
  body.hasBand #tools { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 3px; }
  body.hasBand #tools button { min-height: 26px; padding: 0 9px; font-size: 11px; }
  body.hasBand #drawer { right: calc(84px + env(safe-area-inset-right)); top: calc(40px + env(safe-area-inset-top)); max-height: calc(100dvh - 48px - var(--barh, 56px)); }
}
@media (max-width: 600px) {
  body.hasBand #actbar { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  body.hasBand #actbar .slots { grid-column: 1; grid-row: 3; width: 100%; }
  #actbar #actions p { grid-column: 1; grid-row: 1; text-align: center; -webkit-line-clamp: 2; }
  #actbar #actions .arow { grid-column: 1; grid-row: 2; justify-content: center; }
}

/* soirée à Ibiza : halo sur la case, sol et faisceaux colorés, grosse pastille debout au-dessus de la case */
.tile.partying::before {
  content: ""; position: absolute; inset: -3px; border-radius: 7px; pointer-events: none; transform: translateZ(1px);
  box-shadow: 0 0 0 3px #ff4fa3, 0 0 0 5px #f3d58a, 0 0 22px 9px rgba(255,79,163,.9);
  animation: ptyHalo .9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes ptyHalo { from { opacity: .6; } to { opacity: 1; } }
.pty, .pty-top { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.pty { z-index: 9; }
.pty-top { z-index: 99990; }
.pty-glow { position: absolute; left: calc(-60px * var(--s)); top: calc(-32px * var(--s)); width: calc(120px * var(--s)); height: calc(64px * var(--s)); border-radius: 50%;
  opacity: .25; animation: ptyGlow 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.pty-glow.g1 { background: radial-gradient(closest-side, rgba(255,79,163,.85), rgba(255,79,163,0)); }
.pty-glow.g2 { background: radial-gradient(closest-side, rgba(79,200,255,.85), rgba(79,200,255,0)); animation-delay: -.6s; }
.pty-glow.g3 { background: radial-gradient(closest-side, rgba(243,213,138,.9), rgba(243,213,138,0)); animation-delay: -1.2s; }
@keyframes ptyGlow { 0%, 100% { opacity: .1; scale: .85; } 33% { opacity: .6; scale: 1.1; } 66% { opacity: .1; scale: .85; } }
.pty-beam { position: absolute; left: calc(-17px * var(--s)); bottom: calc(-2px * var(--s)); width: calc(34px * var(--s)); height: calc(170px * var(--s));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform-origin: 50% 0; opacity: .6; animation: ptyBeam 2.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
.pty-beam.b1 { background: linear-gradient(0deg, rgba(255,79,163,.6), rgba(255,79,163,0)); rotate: -16deg; }
.pty-beam.b2 { background: linear-gradient(0deg, rgba(79,200,255,.55), rgba(79,200,255,0)); animation-delay: -.8s; animation-duration: 1.9s; }
.pty-beam.b3 { background: linear-gradient(0deg, rgba(243,213,138,.6), rgba(243,213,138,0)); rotate: 16deg; animation-delay: -1.5s; animation-duration: 2.8s; }
@keyframes ptyBeam { from { transform: rotate(-9deg); opacity: .25; } to { transform: rotate(9deg); opacity: .6; } }
.pty-badge { position: absolute; left: 0; bottom: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); animation: ptyBob 1.1s cubic-bezier(.45,0,.55,1) infinite alternate; }
.pty-badge b { padding: calc(4px * var(--s)) calc(13px * var(--s)); border-radius: 99px; background: linear-gradient(180deg, #7a3bb0, #4a2070); color: #fff3c9;
  font: 800 calc(32px * var(--s))/1 'Playfair Display', serif; font-variant-numeric: lining-nums; white-space: nowrap;
  box-shadow: 0 0 0 calc(2.5px * var(--s)) #f3d58a, 0 0 calc(16px * var(--s)) calc(3px * var(--s)) rgba(255,79,163,.8), 0 calc(6px * var(--s)) calc(12px * var(--s)) rgba(0,0,0,.5); }
@keyframes ptyBob { from { translate: -50% 0; scale: 1; } to { translate: -50% calc(-5px * var(--s)); scale: 1.08; } }
/* petite boule à facettes, avec des éclats qui scintillent */
.pty-ball { position: relative; width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-radius: 50%;
  background: repeating-conic-gradient(#f4f7fa 0 22.5deg, #8d97a5 22.5deg 45deg); box-shadow: inset calc(-3px * var(--s)) calc(-3px * var(--s)) calc(5px * var(--s)) rgba(0,0,0,.45), 0 0 calc(8px * var(--s)) rgba(255,255,255,.6); }
.pty-ball i { position: absolute; width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(6px * var(--s)) calc(2px * var(--s)) #ff4fa3; opacity: 0; animation: ptyTwinkle 1.2s linear infinite; }
.pty-ball i:nth-child(1) { left: calc(-9px * var(--s)); top: calc(2px * var(--s)); }
.pty-ball i:nth-child(2) { right: calc(-9px * var(--s)); top: calc(-2px * var(--s)); animation-delay: -.3s; box-shadow: 0 0 calc(6px * var(--s)) calc(2px * var(--s)) #4fc8ff; }
.pty-ball i:nth-child(3) { left: calc(-5px * var(--s)); bottom: calc(-3px * var(--s)); animation-delay: -.6s; box-shadow: 0 0 calc(6px * var(--s)) calc(2px * var(--s)) #f3d58a; }
.pty-ball i:nth-child(4) { right: calc(-6px * var(--s)); bottom: calc(1px * var(--s)); animation-delay: -.9s; }
@keyframes ptyTwinkle { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tile.partying::before, .pty-glow, .pty-beam, .pty-badge, .pty-ball i { animation: none; }
  .pty-glow { opacity: .4; }
  .pty-beam { opacity: .4; }
  .pty-ball i { opacity: 1; }
}
/* annonce au centre du plateau */
.pann { position: absolute; left: 0; top: 0; width: max-content; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--s));
  padding: calc(14px * var(--s)) calc(30px * var(--s)); border-radius: calc(20px * var(--s)); text-align: center; color: #f8f1e0;
  background: linear-gradient(180deg, rgba(74,32,112,.97), rgba(36,16,56,.97));
  box-shadow: 0 0 0 calc(2.5px * var(--s)) #f3d58a, 0 0 calc(30px * var(--s)) calc(6px * var(--s)) rgba(255,79,163,.65), 0 calc(16px * var(--s)) calc(34px * var(--s)) rgba(0,0,0,.55); }
.pann b { font: 800 calc(42px * var(--s))/1.05 'Playfair Display', serif; color: #fff3c9; }
.pann span { font: 700 calc(26px * var(--s))/1.15 'Manrope', sans-serif; font-variant-numeric: lining-nums; }
/* fiche de la case : le multiplicateur de la soirée */
#detail .dparty { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 8px; padding: 6px 12px; border-radius: 12px;
  background: linear-gradient(90deg, #5b2d82, #7a3bb0); color: #f3d58a; font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px #f3d58a; }
#detail .dparty b { font: 800 19px/1 'Playfair Display', serif; color: #fff3c9; font-variant-numeric: lining-nums; }