/* Table de jeu : plateau (l'Anneau), cartes de survivants, panneaux de phase, révélation, fin. */
.table { flex: 1; display: flex; flex-direction: column; min-height: 0; --c0: #c8742e; --c1: #6fa6a0; --c2: #9bb05a; --c3: #d8c29a; --c4: #b98563; --c5: #cfd8d4; }
.table .barre { gap: 8px; }
.barre .jour { font-family: var(--font-titre); font-weight: 900; font-size: 22px; letter-spacing: .1em; color: var(--sable); white-space: nowrap; }
.barre .jour small { font-size: 13px; opacity: .8; letter-spacing: .06em; }
.barre .phase-nom { font-size: 12px; letter-spacing: .14em; color: var(--ciel); }
.barre .bloc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.minuteur { height: 6px; background: rgba(231,220,195,.18); border-radius: 3px; overflow: hidden; }
.minuteur > i { display: block; height: 100%; width: 100%; background: var(--ciel); transform-origin: left; transition: background .3s; }
.minuteur.urgent > i { background: var(--rouille); }

/* bandeau Camp : épreuve du soir en une ligne */
.bandeau-camp { display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: rgba(26,22,18,.7); font-size: 13px; line-height: 1.15; min-height: 44px; }
.bandeau-camp .art { width: 56px; height: 34px; border-radius: 4px; flex: none; border: 1px solid rgba(216,194,154,.4); }
.bandeau-camp .txt { flex: 1; min-width: 0; }
.bandeau-camp .txt .discret { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table.eng .plateau { --w: min(100vw, 37vh, 440px); }
.bandeau-camp b { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; display: block; }
.bandeau-camp .tempete { color: #f1a07f; }
.moral { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.moral i { width: 7px; height: 12px; background: var(--ocre); border-radius: 2px; display: inline-block; }
.moral i.vide { background: rgba(231,220,195,.2); }
.moral.bas i:not(.vide) { background: #e2603f; animation: coeur 1.1s infinite; }

/* bulles « Nouveau » */
.zone-bulle { position: relative; height: 0; z-index: 15; }
.bulle { position: absolute; left: 0; right: 0; margin: 6px 12px 0; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--ciel); color: var(--goudron); display: flex; gap: 10px; align-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.35); animation: monter-bulle .3s both; font-size: 14px; line-height: 1.25; font-weight: 700; }
.bulle .etiq { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .1em; background: var(--goudron); color: var(--ciel); border-radius: 4px; padding: 2px 6px; font-size: 11px; flex: none; }
.bulle .txt { flex: 1; min-width: 0; }
.bulle .btn { min-height: 44px; padding: 6px 12px; font-size: 13px; flex: none; }
@keyframes monter-bulle { from { opacity: 0; transform: translateY(-6px); } }

/* Plateau */
.plateau-zone { display: flex; justify-content: center; padding: 6px 0 2px; }
.plateau { --w: min(100vw, 41vh, 440px); --p: calc(var(--w) / 100); position: relative; width: var(--w); height: var(--w); flex: none; }
.plateau .table-fond { position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle, rgba(58,42,32,.9) 0 34%, rgba(43,31,24,.8) 35% 100%); border: 2px dashed rgba(216,194,154,.22); box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.plateau .table-fond::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1px dashed rgba(216,194,154,.16); }
.plateau .el { position: absolute; transform: translate(-50%, -50%); }

.siege { width: calc(var(--p) * 24); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--os); font-size: max(10px, calc(var(--p) * 2.9)); line-height: 1.1; cursor: default; }
.siege .avatar { width: calc(var(--p) * 11.5); height: calc(var(--p) * 11.5); border: 3px solid var(--couleur, var(--sable)); box-shadow: 0 2px 6px rgba(0,0,0,.6); position: relative; }
.siege.moi .avatar { box-shadow: 0 0 0 3px rgba(26,22,18,.9), 0 0 0 5px var(--ocre); }
.siege .nom { font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000, 0 0 6px #000; letter-spacing: .02em; }
.siege .stocks { display: flex; gap: 6px; justify-content: center; font-size: max(10px, calc(var(--p) * 2.8)); text-shadow: 0 1px 2px #000; }
.siege .badge { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; background: var(--goudron); color: var(--os); border: 1.5px solid var(--os); }
.siege .badge.ok { background: var(--ok); color: var(--goudron); border-color: var(--goudron); }
.siege .badge.attend { animation: clignote 1.1s infinite; }
.siege .blesse { position: absolute; left: -5px; bottom: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--rouille); color: #fff; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--os); }
.siege.cible { cursor: pointer; }
.siege.cible .avatar { animation: pulse-cible 1.2s infinite; }
.siege.choisi .avatar { outline: 4px solid var(--ocre); outline-offset: 2px; }
.siege.loin { opacity: .6; }
.siege .parle { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: none; }

.cache { width: calc(var(--p) * 18.5); border-radius: 6px; overflow: visible; cursor: default; border: 0; padding: 0; background: none; text-align: left; font: inherit; color: var(--goudron); }
.cache .corps { display: block; border-radius: 6px; overflow: hidden; background: var(--os); box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5); border: 2px solid #e7dcc3; }
.cache .vignette { height: calc(var(--p) * 8.6); display: block; width: 100%; border-radius: 0; }
.cache .vignette .nom-type { position: absolute; left: 4px; bottom: 2px; font-family: var(--font-titre); font-weight: 900; letter-spacing: .07em; text-transform: uppercase; font-size: max(9px, calc(var(--p) * 2.3)); color: #fff; text-shadow: 0 1px 2px #000, 0 0 5px #000; z-index: 1; }
.cache .butin { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 1px 4px; font-size: max(11px, calc(var(--p) * 3)); background: var(--os); }
.cache .butin .res { gap: 1px; }
.cache .garde { color: var(--rouille); }
.cache.cible { cursor: pointer; }
.cache.cible .corps { animation: pulse-cible 1.2s infinite; }
.cache.choisi .corps { outline: 4px solid var(--ocre); outline-offset: 1px; }
.cache.focus .corps { outline: 4px solid #fff; outline-offset: 1px; animation: secousse .4s; }
.cache.riv-moi .corps { border-color: var(--ciel); }
.cache .mon-total { position: absolute; right: -6px; top: -9px; background: var(--ocre); color: var(--goudron); font: 900 12px var(--font-mono); border-radius: 9px; padding: 1px 6px; border: 1.5px solid var(--goudron); }
.cache .mod { position: absolute; left: -5px; top: -8px; font: 900 11px var(--font-mono); border-radius: 8px; padding: 0 5px; border: 1.5px solid var(--goudron); background: var(--ciel); color: var(--goudron); }
.cache .mod.neg { background: #e2a08a; }
.cache .verdict { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font: 900 calc(var(--p) * 3.4)/1 var(--font-titre); text-transform: uppercase; letter-spacing: .08em; padding: 3px 7px; border: 3px solid; border-radius: 4px; background: rgba(231,220,195,.92); white-space: nowrap; animation: tampon .35s both; z-index: 3; }
.cache .verdict.gagne { color: #2f5a14; border-color: #2f5a14; }
.cache .verdict.rien { color: var(--rouille); border-color: var(--rouille); }
.jetons { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: flex; gap: 2px; margin-top: 2px; justify-content: center; flex-wrap: wrap; width: calc(var(--p) * 24); z-index: 2; }
.jeton { width: calc(var(--p) * 6.4); height: calc(var(--p) * 6.4); border-radius: 50%; border: 2.5px solid var(--couleur, var(--sable)); position: relative; flex: none; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.jeton .f { position: absolute; right: -4px; bottom: -4px; font: 900 10px var(--font-mono); background: var(--goudron); color: var(--os); border-radius: 7px; padding: 0 3px; line-height: 13px; border: 1px solid var(--os); }
.jeton.dos { background: repeating-linear-gradient(45deg, #5d4638 0 3px, #4a372c 3px 6px); }
.jeton.dos > .art { display: none; }
.jeton.retourne { animation: retourne .5s both; }
.jeton.neutralise { filter: grayscale(1) brightness(.6); }
.jeton.neutralise::after { content: ""; position: absolute; inset: 40% -10%; height: 3px; background: var(--rouille); transform: rotate(-35deg); }
.jetons.haut { top: auto; bottom: 100%; margin: 0 0 2px; }

.camp { width: calc(var(--p) * 29); height: calc(var(--p) * 29); border-radius: 50%; cursor: default; padding: 0; border: 0; color: var(--os); font: inherit; }
.camp .disque { position: absolute; inset: 0; border-radius: 50%; background: var(--grain), radial-gradient(circle at 35% 30%, #a38874, #5d4638 70%, #3a2a20); background-blend-mode: soft-light, normal; border: 4px solid #7a4a32; box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; overflow: hidden; }
.camp .disque::before { content: ""; position: absolute; inset: 0; background: var(--img-camp, none) center / cover; opacity: .0; }
.camp .rivets { position: absolute; inset: 5px; border-radius: 50%; background:
  radial-gradient(circle at 50% 3%, #d8c29a 0 2.5px, transparent 3px), radial-gradient(circle at 97% 50%, #d8c29a 0 2.5px, transparent 3px),
  radial-gradient(circle at 50% 97%, #d8c29a 0 2.5px, transparent 3px), radial-gradient(circle at 3% 50%, #d8c29a 0 2.5px, transparent 3px); }
.camp .seuil-lbl { font: 800 calc(var(--p) * 2.5)/1 var(--font-titre); letter-spacing: .14em; text-transform: uppercase; opacity: .85; position: relative; }
.camp .seuil { font: 900 calc(var(--p) * 9.5)/1 var(--font-titre); color: var(--sable); text-shadow: 0 2px 0 #1a1612; position: relative; }
.camp .seuil small { font-size: .4em; color: #f1a07f; margin-left: 1px; }
.camp .lignes { display: flex; gap: 6px; font-size: max(10px, calc(var(--p) * 2.8)); align-items: center; position: relative; }
.camp.cible { cursor: pointer; }
.camp.cible .disque { animation: pulse-cible 1.2s infinite; }
.camp.choisi .disque { outline: 4px solid var(--ocre); outline-offset: 2px; }
.camp.focus .disque { outline: 4px solid #fff; outline-offset: 2px; animation: secousse .4s; }
.camp.bas .disque { animation: battement 1.1s infinite; border-color: #b4412a; }
.camp .jetons { top: 100%; margin-top: -4px; }
.alerte-p { display: inline-flex; gap: 2px; color: #f1a07f; }
.alerte-p .ico { width: 13px; height: 13px; }
.alerte-p .vide { opacity: .25; }

/* panneaux de phase */
.panneau-phase { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 12px calc(12px + var(--safe-b)); min-height: 0; }
.entete-panneau { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 14px; }
.entete-panneau h3 { color: var(--sable); }
.consigne { font-size: 14px; line-height: 1.3; }
.consigne b { color: var(--sable); }
.rangee-pret { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.etat-joueur { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px; border-radius: 99px; background: rgba(231,220,195,.12); border: 1.5px solid var(--couleur, transparent); }
.etat-joueur.ok { background: rgba(143,162,79,.35); }
.etat-joueur .ico { width: 13px; height: 13px; }

/* main de survivants */
.main { display: flex; gap: 8px; overflow-x: auto; padding: 24px 2px 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; scroll-snap-type: x proximity; scroll-padding-left: 12px; -webkit-overflow-scrolling: touch; min-height: 170px; align-items: flex-end; }
.carte-surv { flex: none; width: 92px; height: 138px; position: relative; scroll-snap-align: start; touch-action: pan-x; cursor: grab; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s, filter .2s; padding: 5px; display: flex; flex-direction: column; gap: 4px; color: var(--goudron); }
.carte-surv.glisse { transition: none; z-index: 10; cursor: grabbing; box-shadow: 0 12px 24px rgba(0,0,0,.6); }
.carte-surv.lance { transform: translateY(-190px) scale(.8) !important; opacity: 0; }
.carte-surv .portrait { flex: 1; border-radius: 4px; min-height: 0; background-position: 72% 25%, center; }
.carte-surv .nom { font-weight: 800; font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-surv .spec { font: 700 10px var(--font-titre); text-transform: uppercase; letter-spacing: .08em; color: var(--mesa); line-height: 1; }
.carte-surv .force { position: absolute; left: -6px; top: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--goudron); color: var(--sable); border: 2.5px solid var(--sable); font: 900 20px/29px var(--font-mono); text-align: center; z-index: 2; }
.carte-surv .force.plus { background: #2f5a14; color: #fff; border-color: #cfe58f; }
.carte-surv .force.moins { background: #7d2b18; color: #fff; border-color: #f0b5a0; }
.carte-surv .etiq { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; border-radius: 4px; font: 800 11px/1.1 var(--font-titre); text-transform: uppercase; letter-spacing: .06em; text-align: center; background: var(--ocre); color: var(--goudron); display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; cursor: pointer; min-height: 24px; }
.carte-surv .etiq.veille { background: var(--ciel); }
.carte-surv .etiq.camp { background: var(--sable); }
.carte-surv .etiq.emb { background: var(--rouille); color: var(--os); }
.carte-surv.engage { filter: saturate(.8); }
.carte-surv.repos { opacity: .55; filter: grayscale(.9); touch-action: pan-x; cursor: default; }
.carte-surv .fleche-aide { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); color: var(--ocre); animation: monte 1.2s infinite; }
.bandeau-cible { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(231,220,195,.1); border: 2px dashed rgba(216,194,154,.4); font-size: 14px; min-height: 52px; }
.bandeau-cible.ok { border-style: solid; border-color: var(--ocre); background: rgba(200,116,46,.18); }
.bandeau-cible .gros { font: 900 22px var(--font-mono); color: var(--sable); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { appearance: none; border: 2px solid var(--mesa); border-radius: 99px; background: rgba(231,220,195,.08); color: var(--os); min-height: 44px; padding: 6px 14px; font: 800 14px var(--font-titre); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.pill.sel { background: var(--os); color: var(--goudron); border-color: var(--ocre); box-shadow: 0 0 0 2px var(--ocre); }
.verrou-zone { display: flex; flex-direction: column; gap: 6px; }
.verrou-zone .aide { font-size: 12px; text-align: center; opacity: .8; }
.attente { text-align: center; padding: 14px; }
.attente .gros { font-size: 20px; }

/* conseil */
.murmure { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.murmure .jauge { display: flex; gap: 5px; }
.murmure .jauge i { width: 22px; height: 30px; border-radius: 4px; background: rgba(231,220,195,.18); display: block; }
.murmure .jauge i.on { background: #e2603f; }
.murmure .jauge i.on:nth-child(1) { background: #d9a14a; }
.murmure .jauge i.on:nth-child(2) { background: #de7e3a; }
.murmure .txt { flex: 1; font-size: 13px; line-height: 1.2; }
.carte-accord { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--goudron); }
.carte-accord .t { font-weight: 800; }
.carte-accord .lignes-btn { display: flex; gap: 8px; }
.carte-accord .lignes-btn .btn { flex: 1; min-height: 48px; font-size: 15px; }
.tampon-sceau { display: inline-flex; align-items: center; gap: 5px; font: 900 12px var(--font-titre); letter-spacing: .1em; text-transform: uppercase; color: #2f5a14; border: 2px solid #2f5a14; padding: 1px 7px; border-radius: 4px; transform: rotate(-3deg); }

/* feuille du sceau */
.sceau-grand { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 6px 0; }
.sceau-grand .gros-ico { width: 96px; height: 96px; color: var(--ocre); }
.sceau-grand .gros-ico.pulse { animation: coeur 1.2s infinite; }
.btn-tenir { width: 100%; min-height: 64px; font-size: 20px; touch-action: none; }

/* révélation */
.scene { min-height: 150px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 14px; text-align: center; position: relative; overflow: hidden; }
.scene .legende { font-size: 18px; line-height: 1.25; min-height: 70px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.scene .legende b { color: var(--sable); }
.scene .progres-rev { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.scene .progres-rev i { width: 8px; height: 8px; border-radius: 50%; background: rgba(231,220,195,.25); display: block; }
.scene .progres-rev i.fait { background: var(--ocre); }
.emotion { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); font: 900 44px/1 var(--font-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--sable); text-shadow: 0 3px 0 #1a1612, 0 0 20px rgba(0,0,0,.7); animation: emotion 1.8s both; pointer-events: none; z-index: 6; white-space: nowrap; }
.emotion.mauvais { color: #f08a68; }
.bilan { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bilan .gain { font: 900 76px/1 var(--font-titre); color: var(--sable); text-shadow: 0 4px 0 var(--rouille); animation: monte-gain 1s cubic-bezier(.2,.9,.3,1.2) both; }
.bilan .gain.nul { color: var(--sel); text-shadow: 0 3px 0 #3a2a20; font-size: 44px; }
.bilan .detail { font-size: 22px; font-weight: 800; animation: fondu .5s .7s both; }
.bilan .sous { font-size: 14px; opacity: .85; animation: fondu .5s 1s both; }
.poussiere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.poussiere i { position: absolute; bottom: -10px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(216,194,154,.55), transparent 70%); animation: poussiere 1.6s ease-out both; }

/* comptoir */
.comptoir { display: flex; gap: 8px; }
.carte-marche { flex: 1; min-width: 0; position: relative; padding: 5px; display: flex; flex-direction: column; gap: 4px; color: var(--goudron); cursor: pointer; border: 0; text-align: left; min-height: 188px; }
.carte-marche .portrait { height: 84px; border-radius: 4px; background-position: 72% 25%, center; }
.carte-marche .nom { font-weight: 800; font-size: 14px; line-height: 1; }
.carte-marche .spec { font-size: 11px; line-height: 1.15; }
.carte-marche .prix { position: absolute; right: -6px; top: -8px; background: var(--vert-sec); color: var(--goudron); border: 2px solid var(--goudron); border-radius: 12px; font: 900 15px var(--font-mono); padding: 1px 8px; display: flex; align-items: center; gap: 3px; z-index: 2; }
.carte-marche .force { position: absolute; left: -6px; top: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--goudron); color: var(--sable); border: 2.5px solid var(--sable); font: 900 17px/25px var(--font-mono); text-align: center; z-index: 2; }
.carte-marche.sel { outline: 4px solid var(--ocre); }
.carte-marche.trop-cher { opacity: .5; }
.carte-marche .choisi-tag { position: absolute; bottom: 5px; left: 5px; right: 5px; text-align: center; background: var(--ocre); border-radius: 4px; font: 800 11px var(--font-titre); text-transform: uppercase; letter-spacing: .08em; padding: 3px; }
.soif-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(231,220,195,.1); font-size: 15px; font-weight: 700; }
.soif-ligne.mal { background: rgba(156,59,34,.45); }

/* fin */
.fin { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px calc(20px + var(--safe-b)); position: relative; }
.fin .verdict { text-align: center; padding: 18px 10px 6px; }
.fin .verdict h1 { font-size: 40px; color: var(--sable); text-shadow: 0 3px 0 var(--rouille); }
.fin .verdict.chute h1 { color: #f08a68; text-shadow: 0 3px 0 #3a1408; }
.fin .verdict p { margin: 8px 0 0; font-size: 16px; }
.tableau-scores { display: flex; flex-direction: column; gap: 8px; }
.score-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--goudron); animation: monter-bulle .4s both; }
.score-ligne .rang { font: 900 24px var(--font-titre); width: 28px; text-align: center; }
.score-ligne .avatar { width: 46px; height: 46px; flex: none; border: 2px solid var(--couleur, var(--mesa)); }
.score-ligne .qui { flex: 1; min-width: 0; }
.score-ligne .qui .nom { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-ligne .qui .det { font-size: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.score-ligne .total { font: 900 28px var(--font-mono); }
.score-ligne.gagnant { outline: 4px solid var(--ocre); }
.score-ligne.gagnant .rang::after { content: ""; }
.soir { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(58,40,28,.4), rgba(10,8,6,.96)); }
.soir .art { width: min(86vw, 380px); aspect-ratio: 16/9; border-radius: 10px; border: 3px solid var(--sable); box-shadow: 0 10px 30px rgba(0,0,0,.7); animation: approche 5s ease-out both; }
.soir h2 { font-size: 30px; color: var(--sable); }
.soir .gros { font: 900 56px/1 var(--font-titre); }
.soir.chute { animation: secousse .6s; }
.soir .btn { position: absolute; bottom: calc(24px + var(--safe-b)); }

/* reconnexion */
.reco { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(10,8,6,.7); padding: 24px; animation: fondu .3s both; }
.reco .kraft { padding: 20px; text-align: center; max-width: 340px; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* SIM */
.sim-flot { position: fixed; left: 6px; bottom: calc(6px + var(--safe-b)); z-index: 60; display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-start; }
.sim-flot .btn.bascule { min-height: 36px; width: 52px; padding: 4px; font-size: 11px; opacity: .8; }
.sim-flot .btn { min-height: 44px; font-size: 12px; padding: 6px 10px; }

@keyframes pulse-cible { 0%, 100% { filter: drop-shadow(0 0 0 rgba(200,116,46,0)); } 50% { filter: drop-shadow(0 0 7px rgba(200,116,46,.95)); } }
@keyframes clignote { 50% { opacity: .35; } }
@keyframes coeur { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes battement { 0%, 100% { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 0 0 rgba(226,96,63,.0); } 15% { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 0 10px rgba(226,96,63,.5); } 30% { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 0 0 rgba(226,96,63,0); } 45% { box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 0 7px rgba(226,96,63,.4); } }
@keyframes monte { 0%, 100% { transform: translate(-50%, 0); opacity: .4; } 50% { transform: translate(-50%, -8px); opacity: 1; } }
@keyframes secousse { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 2px); } }
@keyframes tampon { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.2); opacity: 0; } 60% { transform: translate(-50%, -50%) rotate(-8deg) scale(.92); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
@keyframes retourne { 0% { transform: rotateY(90deg) scale(1.3); } 100% { transform: none; } }
@keyframes emotion { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }
@keyframes monte-gain { 0% { opacity: 0; transform: translateY(40px) scale(.5); } 100% { opacity: 1; transform: none; } }
@keyframes poussiere { 0% { transform: translate(var(--dx, 0), 0) scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx, 0), -120px) scale(1.8); opacity: 0; } }
@keyframes approche { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.04); } }
@media (max-height: 700px) { .carte-surv { height: 124px; width: 84px; } .main { min-height: 150px; } }

.cache .jetons { top: 2px; left: auto; right: 2px; transform: none; width: auto; margin: 0; flex-wrap: nowrap; }
.cache .jetons .jeton + .jeton { margin-left: -11px; }
.camp .jetons { top: 80%; left: 50%; }
.plateau.sans-anim .verdict, .plateau.sans-anim .jeton { animation: none !important; }
.jeton > .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.jeton { background: var(--goudron); }

.table.cre .plateau { --w: min(100vw, 31vh, 440px); }

.marque-obj { position: absolute; left: -7px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: var(--sable); color: var(--goudron); border: 2px solid var(--goudron); display: flex; align-items: center; justify-content: center; z-index: 4; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.marque-obj .ico { width: 15px; height: 15px; }
.carte-objet { flex: none; width: 112px; min-height: 124px; padding: 8px 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; color: var(--goudron); touch-action: pan-x; cursor: grab; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.carte-objet.glisse { transition: none; z-index: 10; cursor: grabbing; box-shadow: 0 12px 24px rgba(0,0,0,.6); }
.carte-objet.lance { transform: translateY(-190px) scale(.8) !important; opacity: 0; }
.carte-objet.sel { outline: 4px solid var(--ocre); }
.carte-objet .gros-ico { width: 38px; height: 38px; color: var(--rouille); }
.carte-objet .gros-ico .ico { width: 38px; height: 38px; }
.carte-objet .nom { font: 800 14px var(--font-titre); text-transform: uppercase; letter-spacing: .06em; line-height: 1.05; }
.carte-objet .regle { font-size: 10.5px; line-height: 1.15; }
.rangee-objets { display: flex; gap: 8px; overflow-x: auto; padding: 22px 2px 6px; margin: 0 -2px; }
.fleches-carte { display: flex; gap: 8px; }
.fleches-carte .btn { flex: 1; min-height: 48px; font-size: 14px; }

/* film : « Le jeu en 30 secondes » */
.film { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 30%, #3a281c, #120e0b 75%); padding-top: calc(10px + var(--safe-t)); padding-bottom: var(--safe-b); overflow: hidden; }
.film > * { width: min(100%, 480px); }
.film-haut { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.film-segments { flex: 1; display: flex; gap: 4px; }
.film-segments i { flex: 1; height: 5px; border-radius: 3px; background: rgba(231,220,195,.25); display: block; position: relative; overflow: hidden; }
.film-segments i.fait { background: var(--ocre); }
.film-segments i.en-cours::after { content: ""; position: absolute; inset: 0; background: var(--ocre); transform-origin: left; animation: segment 3.4s linear both; }
.film-plateau { display: flex; justify-content: center; padding-top: 8px; }
.film .plateau { --w: min(100vw, 46vh, 440px); }
.film-bas { min-height: 120px; padding: 6px 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.film-texte { padding: 4px 18px 18px; font-size: 20px; line-height: 1.3; text-align: center; font-weight: 700; color: var(--os); text-shadow: 0 2px 6px #000; min-height: 90px; }
.film-legende { font-size: 17px; text-align: center; background: rgba(26,22,18,.85); border: 1px solid rgba(216,194,154,.3); border-radius: 10px; padding: 10px 14px; line-height: 1.3; animation: monter-bulle .3s both; }
.film-legende b { color: var(--sable); }
.film-fin { margin: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.film-fin h2 { font-size: 40px; color: var(--sable); text-shadow: 0 3px 0 var(--rouille); }
.tel-zone { perspective: 600px; display: flex; justify-content: center; padding: 4px 0; }
.tel { width: 74px; height: 128px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.8,.3,1); }
.tel.retourne { transform: rotateX(180deg) translateY(10px); }
.tel .face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border: 3px solid #0b0907; }
.tel .avant { background: linear-gradient(160deg, #c8742e, #5a2e14); color: var(--goudron); font-size: 13px; }
.tel .arriere { transform: rotateX(180deg); background: linear-gradient(160deg, #2a221b, #14100d); color: var(--sable); }
.tel .arriere .ico { width: 34px; height: 34px; }
@keyframes segment { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jeton-plus { font: 900 11px var(--font-mono); background: var(--os); color: var(--goudron); border-radius: 10px; padding: 0 5px; align-self: center; margin-left: 2px; border: 1.5px solid var(--goudron); }
.pill { min-height: 44px; padding: 4px 12px; font-size: 13px; }
.pills { gap: 6px; }
.table.eng .plateau { --w: min(100vw, 35vh, 440px); }

/* la Nuit : écran noir, disque de lumière */
.nuit { position: fixed; inset: 0; z-index: 36; overflow: hidden; touch-action: none; background: #04060b; color: var(--sel); -webkit-user-select: none; user-select: none; }
.nuit::before { content: ""; position: absolute; inset: 0; background: url("/assets/art/fond.jpg") 70% 50% / cover, linear-gradient(#0a0f1a, #05070d); filter: brightness(.55) saturate(.7) hue-rotate(185deg); }
.nuit-monde { position: absolute; inset: 0; }
.nuit-noir { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nuit-cachette { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--ocre); }
.nuit-cachette .lueur { position: absolute; width: calc(var(--r) * 1.3); height: calc(var(--r) * 1.3); border-radius: 50%; background: radial-gradient(circle, rgba(200,116,46,.55), rgba(200,116,46,0) 68%); animation: scintille 2.4s infinite; }
.nuit-cachette .ico { position: relative; width: 20px; height: 20px; opacity: .8; }
.nuit-zone { position: absolute; transform: translate(-50%, -50%); width: 124px; height: 66px; border-radius: 10px; border: 2px solid var(--sable); background: rgba(122,74,50,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff4d6; box-shadow: 0 0 14px rgba(255,200,120,.35); font: 800 14px var(--font-titre); letter-spacing: .1em; text-transform: uppercase; }
.nuit-zone .ico { width: 24px; height: 24px; }
.nuit-zone.choisi { border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(200,116,46,.5); }
.nuit-voisin { position: absolute; transform: translate(-50%, -50%); width: 90px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 800; font-size: 13px; text-align: center; text-shadow: 0 1px 3px #000; }
.nuit-voisin .art { width: 56px; height: 56px; border: 3px solid var(--sable); }
.nuit-voisin.eclaire .art { border-color: var(--ocre); box-shadow: 0 0 0 4px rgba(200,116,46,.55), 0 0 22px rgba(255,190,110,.6); }
.nuit-feu { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: #e9893a; opacity: .5; z-index: 2; animation: scintille 1.3s infinite; border-radius: 50%; }
.nuit-feu .ico { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(233,137,58,.9)); }
.nuit-feu i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.nuit-feu.tient { opacity: 1; }
.nuit-feu.tient i { border-color: var(--ocre); animation: veiller 1s linear both; }
.nuit-feu.choisi { opacity: .95; }
.nuit-info { position: absolute; left: 12px; right: 12px; bottom: 15%; text-align: center; font-size: 15px; font-weight: 700; color: var(--sel); text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .3s; z-index: 2; pointer-events: none; }
.nuit-info.on { opacity: .85; }
.nuit-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: calc(8px + var(--safe-t)) 12px 6px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: linear-gradient(rgba(4,6,11,.85), transparent); touch-action: manipulation; }
.nuit-titre { font: 800 16px var(--font-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--ciel); display: flex; align-items: center; gap: 8px; }
.nuit-minuteur { grid-column: 1; }
.nuit-verrous { grid-column: 1; display: flex; gap: 5px; }
.nuit-verrous i { width: 10px; height: 10px; border-radius: 50%; background: rgba(231,220,195,.2); display: block; }
.nuit-verrous i.on { background: var(--ok); }
.nuit-hud .btn-icone { grid-column: 2; grid-row: 1 / span 3; }
.nuit-verrou { position: absolute; left: 50%; bottom: calc(3% + var(--safe-b)); transform: translateX(-50%); width: 230px; z-index: 3; opacity: .85; touch-action: none; }
.nuit-tip { position: absolute; left: 12px; right: 12px; top: 92px; z-index: 4; padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--ciel); color: var(--goudron); display: flex; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.25; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.nuit-tip .etiq { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .1em; background: var(--goudron); color: var(--ciel); border-radius: 4px; padding: 2px 6px; font-size: 11px; flex: none; }
.nuit-tip .txt { flex: 1; }
.nuit-tip .btn { flex: none; }
.bulle.nuit-res { flex-direction: column; align-items: stretch; background: #1d2638; color: var(--sel); border: 2px solid var(--ciel); gap: 6px; font-weight: 600; }
.bulle.nuit-res .etiq { align-self: flex-start; background: var(--ciel); color: var(--goudron); }
.bulle.nuit-res ul { margin: 0; padding-left: 18px; }
.bulle.nuit-res .btn { align-self: flex-end; }
@keyframes scintille { 0%, 100% { opacity: .35; } 40% { opacity: .75; } 70% { opacity: .5; } }
@keyframes veiller { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }