.g-mines .mn-wrap { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 16px; height: 100%; padding: 16px; box-sizing: border-box; }
/* dessins de la salle, dans la DA : la gemme est le Diamant de la Machine de Minuit (posé par mines.js ; ce dessin-ci n'est qu'un repli),
   la bombe une sphère bleu nuit cerclée d'or, l'éclat une étoile dorée à huit branches */
.g-mines .mn-wrap { --mn-gemme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='.2' y1='.26' x2='.8' y2='.84'%3E%3Cstop offset='0' stop-color='%23e9fdff'/%3E%3Cstop offset='.4' stop-color='%236ff0ff'/%3E%3Cstop offset='1' stop-color='%231b6f9a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='34 26 66 26 80 42 50 84 20 42' fill='url(%23d)' stroke='%23f7dd8f' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M20 42 H80 M42 42 L50 84 L58 42' fill='none' stroke='%230a2846' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  --mn-bombe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.5' stop-color='%23deb85c'/%3E%3Cstop offset='1' stop-color='%238c6a22'/%3E%3C/linearGradient%3E%3CradialGradient id='s' cx='.38' cy='.36' r='.7'%3E%3Cstop offset='0' stop-color='%233d4f96'/%3E%3Cstop offset='.45' stop-color='%231a2148'/%3E%3Cstop offset='1' stop-color='%2305060b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M54 27 C57 15 67 16 71 9' fill='none' stroke='%23c9a35a' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpolygon points='74.7 1.5 74.0 7.2 78.5 10.7 72.8 10.0 69.3 14.5 70.0 8.8 65.5 5.3 71.2 6.0' fill='%23fff6d8'/%3E%3Ccircle cx='72' cy='8' r='2.2' fill='%23ffb547'/%3E%3Crect x='41' y='22' width='15' height='9' rx='2' fill='url(%23o)'/%3E%3Ccircle cx='48.5' cy='59' r='30' fill='url(%23s)' stroke='url(%23o)' stroke-width='2.6'/%3E%3Cellipse cx='48.5' cy='59' rx='30' ry='8.5' fill='none' stroke='%23deb85c' stroke-opacity='.75' stroke-width='1.7'/%3E%3Cellipse cx='48.5' cy='59' rx='9' ry='30' fill='none' stroke='%23deb85c' stroke-opacity='.45' stroke-width='1.2'/%3E%3Cpath d='M30 40 L67 40 M24 78 L73 78' stroke='%23deb85c' stroke-opacity='.3' stroke-width='1'/%3E%3Cellipse cx='37' cy='46' rx='8' ry='4.5' fill='%23fff' fill-opacity='.22' transform='rotate(-32 37 46)'/%3E%3C/svg%3E");
  --mn-eclat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.5' stop-color='%23deb85c'/%3E%3Cstop offset='1' stop-color='%238c6a22'/%3E%3C/linearGradient%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='.32' stop-color='%23ffb547'/%3E%3Cstop offset='.68' stop-color='%23ff5a67' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ff5a67' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='49' fill='url(%23g)'/%3E%3Cpolygon points='50.0 3.0 55.7 36.1 83.2 16.8 63.9 44.3 97.0 50.0 63.9 55.7 83.2 83.2 55.7 63.9 50.0 97.0 44.3 63.9 16.8 83.2 36.1 55.7 3.0 50.0 36.1 44.3 16.8 16.8 44.3 36.1' fill='url(%23o)' stroke='%23fff3c4' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpolygon points='60.3 25.1 56.4 43.6 74.9 39.7 59.0 50.0 74.9 60.3 56.4 56.4 60.3 74.9 50.0 59.0 39.7 74.9 43.6 56.4 25.1 60.3 41.0 50.0 25.1 39.7 43.6 43.6 39.7 25.1 50.0 41.0' fill='%23fff6d8'/%3E%3Ccircle cx='50' cy='50' r='6' fill='%23fff'/%3E%3C/svg%3E"); }
.g-mines .mn-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.g-mines .mn-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.g-mines .mn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-mines .mn-stat { font-family: var(--font-num); font-size: 20px; color: var(--neon-cyan); }
.g-mines .mn-main { width: 100%; font-family: var(--font-num); }
.g-mines .mn-msg { font-size: 13px; color: var(--text-dim); min-height: 18px; }
.g-mines .mn-msg.win { color: var(--win); } .g-mines .mn-msg.lose { color: var(--lose); }
.g-mines .mn-keys { font-size: 12px; margin: 0; }
.g-mines .mn-board { --heat: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 40%, rgba(59,232,255,calc(.10 - var(--heat) * .06)), rgba(0,0,0,0) 60%), radial-gradient(ellipse at 50% 45%, rgba(222,184,92,calc(var(--heat) * .30)), rgba(0,0,0,0) 62%), var(--bg-1); box-shadow: var(--shadow-2), inset 0 0 calc(var(--heat) * 90px) rgba(222,184,92,calc(var(--heat) * .35)); transition: box-shadow .5s ease; }
.g-mines .mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(88%, calc(100vh - var(--topbar-h) - 150px)); aspect-ratio: 1; }
.g-mines .mn-tile { position: relative; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; border-radius: 12px; transition: transform .16s cubic-bezier(.23,1,.32,1); }
.g-mines .mn-tile:disabled { cursor: default; }
.g-mines .mn-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.3,1.2); }
.g-mines .mn-back, .g-mines .mn-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.g-mines .mn-back { background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid rgba(59,232,255,.22); box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); transition: box-shadow .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .g-mines.is-playing .mn-tile:not(:disabled):hover .mn-back { border-color: var(--neon-cyan); box-shadow: 0 0 18px rgba(59,232,255,.35), inset 0 -4px 0 rgba(0,0,0,.35); } }
.g-mines .mn-face { transform: rotateY(180deg); background: var(--bg-1); border: 1px solid var(--line); font-size: clamp(22px, 4vw, 44px); }
.g-mines .mn-tile.is-open .mn-in { transform: rotateY(180deg); }
.g-mines .mn-tile.is-gem .mn-face { background: radial-gradient(circle, rgba(59,232,255,.28), rgba(17,21,42,1) 70%); border-color: var(--neon-cyan); }
.g-mines .mn-face::after, .g-mines .mn-face::before { content: ''; position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; background: center / contain no-repeat; pointer-events: none; }
.g-mines .mn-tile.is-gem .mn-face::after { background-image: var(--mn-gemme); filter: drop-shadow(0 0 10px rgba(59,232,255,.7)); animation: mn-pop .28s cubic-bezier(.23,1,.32,1); }
.g-mines .mn-tile.is-bomb .mn-face { background: radial-gradient(circle, rgba(255,90,103,.35), rgba(17,21,42,1) 70%); border-color: var(--lose); }
.g-mines .mn-tile.is-bomb .mn-face::after { background-image: var(--mn-bombe); left: 14%; top: 14%; width: 72%; height: 72%; }
/* la mine touchée : la bombe se montre au retournement, puis, après un temps de silence (--mn-boum, posé par mines.js), l'éclat la souffle */
.g-mines .mn-tile.is-hit .mn-face { animation: mn-boom .6s ease-out var(--mn-boum, .21s) both; }
.g-mines .mn-tile.is-hit .mn-face::after { animation: mn-souffle .3s cubic-bezier(.23,1,.32,1) var(--mn-boum, .21s) both; }
.g-mines .mn-tile.is-hit .mn-face::before { background-image: var(--mn-eclat); left: 3%; top: 3%; width: 94%; height: 94%; animation: mn-eclat .5s cubic-bezier(.2,.9,.3,1.25) var(--mn-boum, .21s) both; }
/* appui : la tuile s'enfonce tout de suite (retour de geste, n'annonce rien) ; elle remonte plus lentement qu'elle ne descend */
.g-mines .mn-tile.is-press { transform: translateY(3px); transition-duration: .06s; }
.g-mines .mn-tile.is-press .mn-back { box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); filter: brightness(.88); }
.g-mines .mn-tile.is-dim .mn-face { opacity: .45; }
.g-mines .mn-grid.mn-shake { animation: mn-shake .5s ease-out; }
@keyframes mn-pop { 0% { transform: scale(.6); opacity: .35; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
@keyframes mn-eclat { 0% { opacity: 0; transform: scale(.55) rotate(-14deg); } 35% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes mn-souffle { to { opacity: 0; transform: scale(1.35); } }
@keyframes mn-boom { 0% { box-shadow: 0 0 0 0 rgba(255,181,71,.9); } 100% { box-shadow: 0 0 0 30px rgba(255,90,103,0); } }
@keyframes mn-shake { 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@media (max-width: 1100px) { .g-mines .mn-wrap { grid-template-columns: 250px minmax(0, 1fr); } }

/* ---- échelle des multiplicateurs, grand multiplicateur, tuile en attente (local et en ligne) ---- */
.g-mines .mn-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; z-index: 2; }
.g-mines .mn-big { margin-left: auto; font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 24px rgba(222,184,92,.55), 0 2px 0 rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.4); }
.g-mines .mn-big.is-on { opacity: 1; transform: none; }
.g-mines .mn-ladder { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: 94%; overflow: hidden; }
.g-mines .mn-rung { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(59,232,255,.18); background: rgba(5,6,11,.55); color: var(--text-dim); font-size: 13px; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.g-mines .mn-rung i { font-style: normal; font-size: 10px; opacity: .6; }
.g-mines .mn-rung.is-now { color: #05060b; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; box-shadow: 0 0 16px rgba(222,184,92,.45); }
.g-mines .mn-rung.is-next { color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(59,232,255,.25); }
.g-mines .mn-rung.is-more { border-style: dashed; }
.g-mines .mn-tile.is-pending .mn-back { border-color: var(--gold-hi); box-shadow: 0 0 22px rgba(222,184,92,.55), inset 0 -4px 0 rgba(0,0,0,.35); animation: mn-wait .7s ease-in-out infinite alternate; }
.g-mines .mn-tile.is-press.is-pending .mn-back { box-shadow: 0 0 22px rgba(222,184,92,.55), inset 0 -1px 0 rgba(0,0,0,.35); }
@keyframes mn-wait { from { filter: brightness(1); } to { filter: brightness(1.45); } }
/* ---- en ligne : qui est à la table, gros coups des potes ---- */
.g-mines .mn-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.g-mines .mn-who-l { letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.g-mines .mn-who-p { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); background: rgba(5,6,11,.6); color: var(--text); }
.g-mines .mn-who-p b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 30%, #05060b); font-weight: 400; }
.g-mines .mn-feed { position: absolute; right: 14px; top: 76px; width: clamp(150px, 15vw, 220px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; z-index: 3; }
.g-mines .mn-feed-i { padding: 8px 12px; border-radius: 12px; white-space: normal !important; line-height: 1.35; border: 1px solid var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, rgba(5,6,11,.92)), rgba(5,6,11,.92)); box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 35%, transparent); font-size: 13px; color: var(--text); white-space: nowrap; animation: mn-feed-in .45s cubic-bezier(.2,.9,.3,1.3); transition: opacity .5s, transform .5s; }
.g-mines .mn-feed-i b { color: var(--pc); }
.g-mines .mn-feed-i .mn-feed-pay { color: var(--win); }
.g-mines .mn-feed-i.is-out { opacity: 0; transform: translateY(8px); }
@keyframes mn-feed-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.g-mines .mn-wrap.is-offline .mn-board { filter: saturate(.4) brightness(.8); }

/* ---- en ligne : les parties des potes en direct (colonne de gauche) ---- */
.g-mines .mn-live { position: absolute; left: 14px; top: 52px; width: clamp(150px, 15vw, 210px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 2; }
.g-mines .mn-lc { position: relative; padding: 8px 10px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 14%, rgba(5,6,11,.9)), rgba(5,6,11,.88)); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 22%, transparent); overflow: hidden; }
.g-mines .mn-lc.is-pop { animation: mn-lc-pop .35s cubic-bezier(.2,.9,.3,1.4); }
.g-mines .mn-lc-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); font-weight: 600; }
.g-mines .mn-lc-h b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 30%, #05060b); font-weight: 400; }
.g-mines .mn-lc-m { margin-top: 3px; font-size: 20px; font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 14px rgba(222,184,92,.4); }
.g-mines .mn-lc-s { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
/* petites icônes dessinées (gemme, éclat) ; le texte de l'émoji reste dans la page pour les lecteurs d'écran */
.g-mines .mn-ic { display: inline-block; width: 14px; height: 14px; overflow: hidden; color: transparent; font-size: 0; line-height: 0; vertical-align: -2px; background: center / contain no-repeat; }
.g-mines .mn-ic.is-gemme { background-image: var(--mn-gemme); }
.g-mines .mn-ic.is-eclat { background-image: var(--mn-eclat); width: 18px; height: 18px; vertical-align: -3px; }
.g-mines .mn-lc-bar { height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.g-mines .mn-lc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--neon-cyan), var(--gold-hi)); transition: width .35s ease; }
.g-mines .mn-lc.is-cash { border-color: var(--win); box-shadow: 0 0 22px rgba(62,224,143,.35); }
.g-mines .mn-lc.is-cash .mn-lc-m { color: var(--win); text-shadow: 0 0 14px rgba(62,224,143,.45); }
.g-mines .mn-lc.is-boum { border-color: var(--lose); box-shadow: 0 0 26px rgba(255,90,103,.45); animation: mn-shake .5s ease-out; }
.g-mines .mn-lc.is-boum .mn-lc-m { color: var(--lose); text-shadow: 0 0 14px rgba(255,90,103,.5); }
.g-mines .mn-lc.is-rendu { opacity: .7; }
@keyframes mn-lc-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
/* ===== La salle vote : « Continue ! » (cyan, on creuse) contre « Encaisse ! » (or, on prend) ===== */
.g-mines .mn-lc .mn-vote { margin-top: 8px; pointer-events: auto; }
.g-mines .mn-vbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.g-mines .mn-vbtn { appearance: none; cursor: pointer; min-width: 0; padding: 7px 2px 6px; border-radius: 9px; border: 1px solid; background: rgba(5,6,11,.72); font: 700 10.5px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s, opacity .25s, color .2s; }
.g-mines .mn-vbtn.is-go { border-color: rgba(59,232,255,.55); color: #aef6ff; box-shadow: inset 0 0 12px rgba(59,232,255,.12); }
.g-mines .mn-vbtn.is-cash { border-color: rgba(222,184,92,.6); color: var(--gold-hi); box-shadow: inset 0 0 12px rgba(222,184,92,.14); }
.g-mines .mn-vbtn:hover:not(:disabled) { transform: translateY(-1px); }
.g-mines .mn-vbtn.is-go:hover:not(:disabled) { background: rgba(59,232,255,.16); box-shadow: 0 0 16px rgba(59,232,255,.38); }
.g-mines .mn-vbtn.is-cash:hover:not(:disabled) { background: rgba(222,184,92,.16); box-shadow: 0 0 16px rgba(222,184,92,.42); }
.g-mines .mn-vbtn:active:not(:disabled) { transform: scale(.95); }
.g-mines .mn-vbtn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.g-mines .mn-vbtn:disabled { cursor: default; opacity: .32; }
.g-mines .mn-vbtn.is-mine { opacity: 1; }
.g-mines .mn-vbtn.is-go.is-mine { background: linear-gradient(180deg, rgba(59,232,255,.38), rgba(59,232,255,.12)); color: #fff; box-shadow: 0 0 18px rgba(59,232,255,.5); }
.g-mines .mn-vbtn.is-cash.is-mine { background: linear-gradient(180deg, rgba(222,184,92,.42), rgba(222,184,92,.14)); color: #fff4cf; box-shadow: 0 0 18px rgba(222,184,92,.55); }
.g-mines .mn-vg { position: relative; height: 6px; margin-top: 8px; border-radius: 6px; background: linear-gradient(90deg, rgba(222,184,92,.5), var(--gold-hi)); box-shadow: 0 0 10px rgba(222,184,92,.3); transition: opacity .3s; }
.g-mines .mn-vg-go { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(59,232,255,.55), var(--neon-cyan)); box-shadow: 0 0 10px rgba(59,232,255,.5); transition: width .55s cubic-bezier(.2,.9,.3,1.25); }
.g-mines .mn-vg-spark { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px rgba(255,255,255,.7); transition: left .55s cubic-bezier(.2,.9,.3,1.25); }
.g-mines .mn-vg.is-empty { opacity: .25; box-shadow: none; }
.g-mines .mn-vg.is-empty .mn-vg-spark { display: none; }
.g-mines .mn-vg-l { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.g-mines .mn-vg-l .is-go { color: #8eeefb; }
.g-mines .mn-vg-l .is-cash { color: var(--gold-hi); }
/* chez le joueur : ce que la salle hurle, en bas à droite de la planche */
.g-mines .mn-room { position: absolute; right: 14px; bottom: 14px; width: clamp(176px, 15.5vw, 250px); padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(20,22,34,.94), rgba(5,6,11,.94)); box-shadow: var(--shadow-2); z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.3), visibility 0s .3s, border-color .3s, box-shadow .3s; }
.g-mines .mn-room.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.3), visibility 0s, border-color .3s, box-shadow .3s; }
.g-mines .mn-room-l { font: 600 10px/1.2 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--text-dim); }
.g-mines .mn-room-m { margin-top: 5px; font: 400 clamp(19px, 1.9vw, 26px)/1.05 var(--font-display); letter-spacing: .01em; color: var(--text); }
.g-mines .mn-room.is-cash { border-color: rgba(222,184,92,.75); box-shadow: 0 0 32px rgba(222,184,92,.35), var(--shadow-2); }
.g-mines .mn-room.is-cash .mn-room-m { color: var(--gold-hi); text-shadow: 0 0 18px rgba(222,184,92,.6); }
.g-mines .mn-room.is-go { border-color: rgba(59,232,255,.7); box-shadow: 0 0 32px rgba(59,232,255,.3), var(--shadow-2); }
.g-mines .mn-room.is-go .mn-room-m { color: #aef6ff; text-shadow: 0 0 18px rgba(59,232,255,.6); }
.g-mines .mn-room.is-shout { animation: mn-room-shout .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes mn-room-shout { 0% { transform: scale(1); } 25% { transform: scale(1.08) rotate(-1.2deg); } 50% { transform: scale(.98) rotate(.8deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-mines .mn-room.is-shout { animation: none; } .g-mines .mn-vg-go, .g-mines .mn-vg-spark { transition: none; } }
/* TÉLÉPHONE — N3 (vu par l'orchestrateur le 13/10 à 12:1x) : en portrait, les deux colonnes restaient (250 px de commandes) et la grille
   tombait dans une bande de 62 à 92 px : des tuiles de 3 à 8 px ; couché, des tuiles de 27 px et « Commencer » écrasé à 18 px sous le bas
   de l'écran. Dans le panneau, au téléphone : « Commencer » (puis « Encaisser ») suit le nom et le solde, avant la mise et les réglages ;
   les touches du clavier ne s'affichent pas au doigt. En PORTRAIT : une colonne — la planche EN HAUT, qui ne défile jamais (le grand
   multiplicateur au-dessus de la grille, des tuiles de 44 px et plus, l'échelle, puis les parties des potes en rangée), le panneau
   dessous, qui défile seul ; le nom et le solde sur une rangée ; la salle qui crie et les gros coups passent au-dessus de la grille.
   En PAYSAGE : les deux colonnes restent ; la grille prend la hauteur (tuiles de 40 px et plus), le panneau défile au lieu d'écraser
   ses boutons. Règles bornées au téléphone (portrait ≤ 480 px de large, paysage ≤ 560 px de haut) : le PC ne change pas
   (s5-tel-colonnes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-mines .mn-side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
  .g-mines .mn-side > * { grid-column: 1 / -1; min-width: 0; order: 2; }
  .g-mines .mn-side > .panel-title, .g-mines .mn-side > .mn-tag { order: 0; }
  .g-mines .mn-side > .panel-title { margin: 0; }
  .g-mines .mn-side > .mn-main { order: 1; }
  .g-mines .mn-keys { display: none; }
}
@media (orientation: portrait) and (max-width: 480px) {
  .g-mines .mn-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px 10px; }
  /* la réglette flottante garde sa voie au-dessus du jeu (rien ne passe dessous) */
  body:has(.so-dock.is-float) .g-mines .mn-wrap { margin-top: calc(var(--so-float-h, 58px) - 6px); height: calc(100% - var(--so-float-h, 58px) + 6px); }
  /* la planche à la hauteur de son contenu : la bande du haut (potes, grand multiplicateur), la grille, l'échelle */
  .g-mines .mn-board { order: -1; justify-content: flex-start; gap: 10px; padding: 46px 10px 8px; }
  /* N4 (b) : 362 et non 350 — à 360 × 640, « Commencer » finissait 1,8 px sous l'écran ; rien ne change à 740 px et plus (grille à 340 px) */
  .g-mines .mn-grid { flex: none; width: min(100%, 340px, calc(100vh - 362px)); gap: 8px; }
  .g-mines .mn-top { top: 8px; left: 10px; right: 10px; align-items: center; }
  .g-mines .mn-top .mn-who { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .g-mines .mn-ladder { flex: none; max-width: 100%; }
  .g-mines .mn-live { position: static; order: 3; flex: none; flex-direction: row; width: 100%; overflow-x: auto; pointer-events: auto; }
  /* la carte d'un pote en rangée : son nom et son multiplicateur sur une ligne, puis la partie et le vote (la barre, redite de la
     ligne « 1 💎 · 1 mine · mise 10 », s'efface) */
  .g-mines .mn-live > .mn-lc { flex: 0 0 min(100%, 260px); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 6px 10px; }
  .g-mines .mn-live > .mn-lc > * { grid-column: 1 / -1; }
  .g-mines .mn-live > .mn-lc > .mn-lc-h { grid-column: 1; grid-row: 1; min-width: 0; }
  .g-mines .mn-live > .mn-lc > .mn-lc-m { grid-column: 2; grid-row: 1; margin-top: 0; }
  .g-mines .mn-live > .mn-lc > .mn-lc-bar { display: none; }
  /* le vote : les deux boutons, puis les deux comptes de part et d'autre de la jauge (« 0 continue ━━ 0 encaisse ») */
  .g-mines .mn-live > .mn-lc .mn-vote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; margin-top: 6px; }
  .g-mines .mn-live > .mn-lc .mn-vbtns { grid-column: 1 / -1; }
  .g-mines .mn-live > .mn-lc .mn-vg { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .g-mines .mn-live > .mn-lc .mn-vg-l { display: contents; }
  .g-mines .mn-live > .mn-lc .mn-vg-l .is-go { grid-column: 1; grid-row: 2; margin-top: 8px; }
  .g-mines .mn-live > .mn-lc .mn-vg-l .is-cash { grid-column: 3; grid-row: 2; margin-top: 8px; }
  /* une partie de pote en direct : la grille cède la hauteur de sa carte (tuiles de 44 px et plus) ; « Commencer » reste sous le pouce */
  .g-mines .mn-board:has(.mn-live > .mn-lc) .mn-grid { width: min(100%, 340px, calc(100vh - 478px)); }
  .g-mines .mn-feed { top: 6px; right: 10px; left: 10px; width: auto; align-items: center; }
  .g-mines .mn-room { top: 4px; right: auto; bottom: auto; left: 10px; width: auto; max-width: calc(100% - 130px); padding: 6px 12px; }
  /* le nom et le solde au bout du titre, sur sa rangée (le filet du titre passe dessous) */
  .g-mines .mn-side { overflow-y: auto; overscroll-behavior: contain; }
  .g-mines .mn-side > .panel-title { grid-row: 1; min-height: 32px; }
  .g-mines .mn-side > .mn-tag { grid-row: 1; justify-self: end; align-self: center; max-width: 64%; overflow: hidden; }
  /* N4 (c) : un nom long (18 caractères) se coupe avec « … » ; l'avatar et le solde (7 chiffres) restent entiers */
  .g-mines .mn-side > .mn-tag > .ptag { max-width: 100%; }
  .g-mines .mn-side > .mn-tag .ptag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .g-mines .mn-side > .mn-tag :is(.ptag-emoji, .ptag-bal) { flex: none; }
}
/* N7 (Q3 de D6, 13/10 ; DECISIONS-TEL-2-1310.md:285-379) — TÉLÉPHONE en portrait de moins de 730 px de haut : la carte d'un pote coûtait
   116 px à la grille (tuiles de 26 px à 360 × 640, 31,4 à 375 × 667, sous les 44 px du pouce). PENDANT la partie de Lea (.is-replie, posé
   par mines.js), elle sort du flux, cachée à l'œil mais lue (aria-live ; technique de .signal-voix, css/base.css), sans bouton de vote
   dans la tabulation ; la grille garde sa taille sans carte (49,2 et 54,6 px) et ne saute plus quand un pote commence. L'état du pote se
   lit sur sa pastille « À la table », qui prend la matière de la carte : sa tête en chiffres d'or, jamais coupée ; seul le prénom se coupe
   avec « … » ; encaissé en vert, sauté en rouge. Aucune animation de mise en page. Au repos, à 730 px et plus, couché, au PC : rien. */
@media (orientation: portrait) and (max-width: 480px) and (max-height: 729px) {
  .g-mines .mn-board { --mn-repli: 1; }   /* lu par mines.js (repliPossible) : la requête ne vit qu'ici */
  .g-mines .mn-board.is-replie .mn-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .g-mines .mn-board.is-replie .mn-live .mn-vote { display: none; }
  .g-mines .mn-board.is-replie:has(.mn-live > .mn-lc) .mn-grid { width: min(100%, 340px, calc(100vh - 362px)); }
  /* la rangée laisse 6 px à la lueur des pastilles (elle rogne) ; la première pastille, en direct, ne cède que par son prénom ; les
     suivantes cèdent d'abord, rognées comme aujourd'hui */
  .g-mines .mn-board.is-replie .mn-who { padding: 6px; margin: -6px; }
  .g-mines .mn-board.is-replie .mn-who-l { flex: none; }
  .g-mines .mn-board.is-replie .mn-who-p { flex: 0 100 auto; min-width: 0; overflow: hidden; }
  .g-mines .mn-board.is-replie .mn-who-l + .mn-who-p { flex-shrink: 1; }
  .g-mines .mn-board.is-replie .mn-who-p > b, .g-mines .mn-board.is-replie .mn-who-x { flex: none; }
  .g-mines .mn-board.is-replie .mn-who-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-mines .mn-board.is-replie .mn-who-p.is-live { border-color: color-mix(in srgb, var(--pc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 14%, rgba(5,6,11,.9)), rgba(5,6,11,.88)); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 22%, transparent); }
  .g-mines .mn-board.is-replie .mn-who-x { font: 700 13px/1 var(--font-num); color: var(--gold-hi); white-space: nowrap; text-shadow: 0 0 10px rgba(222,184,92,.4); }
  .g-mines .mn-board.is-replie .mn-who-p.is-cash { border-color: var(--win); box-shadow: 0 0 10px rgba(62,224,143,.35); }
  .g-mines .mn-board.is-replie .mn-who-p.is-cash .mn-who-x { color: var(--win); text-shadow: 0 0 10px rgba(62,224,143,.45); }
  .g-mines .mn-board.is-replie .mn-who-p.is-boum { border-color: var(--lose); box-shadow: 0 0 10px rgba(255,90,103,.45); }
  .g-mines .mn-board.is-replie .mn-who-p.is-boum .mn-who-x { color: var(--lose); text-shadow: 0 0 10px rgba(255,90,103,.5); }
  .g-mines .mn-board.is-replie .mn-who-p.is-rendu { opacity: .7; }
}
@media (orientation: landscape) and (max-height: 560px) {
  /* la grille prend la hauteur de la planche (moins l'échelle) : 5 tuiles de 40 px et plus à 390 px de haut */
  .g-mines .mn-board { gap: 8px; }
  .g-mines .mn-grid { width: min(88%, calc(100vh - var(--topbar-h) - 82px)); gap: 8px; }
  /* les potes à la table, leurs parties en direct et leurs gros coups tiennent dans les marges de la grille (ils la recouvraient) */
  .g-mines .mn-top .mn-who { max-width: calc(50% - 140px); }
  .g-mines .mn-ladder { max-width: min(94%, calc(100vh - var(--topbar-h) - 82px)); }
  .g-mines .mn-live { top: 74px; width: 132px; }
  .g-mines .mn-live .mn-lc-bar { display: none; }
  .g-mines .mn-vbtns { grid-template-columns: minmax(0, 1fr); }
  .g-mines .mn-vg-l { flex-wrap: wrap; }
  .g-mines .mn-vg-l > span { white-space: nowrap; }
  .g-mines .mn-feed { width: 132px; }
}
/* TÉLÉPHONE — N10b (restes « après N4 » de N5 : la dernière petite cible des Mines ; règle de l'orchestrateur, 13/10 15:5x : au doigt, toute
   cible a 32 px au moins sur son petit côté). La règle commune de N5 (css/base.css) exclut ce jeu : il se règle ici. On agrandit la zone de
   toucher, on ne redessine pas (mêmes pastilles, même or, mêmes polices) : ½ ×2 MAX de la mise (.btn-sm, 30 px de haut) : 32 px ; la rangée
   de la mise garde ses 40 px (le champ de 32 px la fixe déjà). Bornée au téléphone comme le reste du fichier : le PC ne change pas
   (dev/tests-client/s5-tel-cibles-mines-roue.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-mines .btn-sm { min-height: 32px; }
}
/* TÉLÉPHONE — N13 (le reste de N10b, question 1) : les deux boutons de vote de la carte d'un pote (« Continue ! », « Encaisse ! », .mn-vbtn :
   25,5 px de haut) : 32 px de zone de toucher par un cadre transparent au-dessus et au-dessous (le pseudo-élément part du bord INTÉRIEUR, sous
   la bordure d'1 px : 4,5 px pour 3,5 px hors du bord). La carte, ses boutons dessinés et leur place ne changent pas (la hauteur de la
   carte est réglée au pixel par N7). Couché, les deux boutons sont l'un sous l'autre à 6 px : leurs cadres s'arrêtent au milieu de cet
   écart sans se recouvrir, à 15,7 px environ du centre de « Continue ! » et 15,8 de celui de « Encaisse ! » au doigt (mesuré par N13 sur une
   page d'essai : un vrai toucher arrive environ 0,5 px plus bas que le point visé, et le cadre du second bouton prend le point d'environ
   1 px plus haut que son calcul) ; chacun prend le reste de l'autre côté. Bornée au téléphone : le PC ne change pas. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-mines .mn-vbtn { position: relative; }
  .g-mines .mn-vbtn::after { content: ""; position: absolute; inset: -4.5px -1px; border-radius: 12px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .g-mines .mn-vbtn.is-go::after { inset: -4.75px -1px -5.5px; }
  .g-mines .mn-vbtn.is-cash::after { inset: -2.5px -1px -6.5px; }
}