:root{--num:Arial,"Helvetica Neue",Helvetica,sans-serif;--u:min(1vh,.7vw);--bg:#0c0f14;--panel:#151a22;--line:rgba(255,255,255,.1);--text:#ece9e1;--muted:#9a9eab;--gold:#f5c542;--bad:#ef4444;--good:#4ade80;--serif:Georgia,"Palatino Linotype","Book Antiqua",serif;--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}
.c-america{--c:#3a78d6;--c2:#12294d;--ct:#fff}.c-russia{--c:#c23b3b;--c2:#4a1111;--ct:#fff}.c-germany{--c:#8b95a1;--c2:#2a2f36;--ct:#10151b}.c-japan{--c:#e0708f;--c2:#55192f;--ct:#2a0a14}.c-france{--c:#6c63d6;--c2:#1f1b4a;--ct:#fff}   /* France : bleu-violet (1.13.0), l'or d'avant se confondait avec l'interface par défaut */.c-neutral{--c:#8a8578;--c2:#2d2b26}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;height:100%;background:radial-gradient(120% 90% at 50% 0,#1b2230,#0c0f14 70%);color:var(--text);font:calc(var(--u)*1.5)/1.3 var(--sans);overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}svg{display:block}
#app{height:100%}
/* ---------- menu */
.menu{background:radial-gradient(ellipse 62% 70% at 50% 46%,rgba(6,8,12,.82),rgba(6,8,12,.55) 62%,rgba(6,8,12,.35)),linear-gradient(rgba(6,8,12,.35),rgba(6,8,12,.45)),var(--home,none) center/cover no-repeat;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.2);padding:calc(var(--u)*3)}
.logo{font:700 calc(var(--u)*7.5)/1 var(--serif);letter-spacing:.22em;margin:0;color:#f6ecd2;text-shadow:0 0 calc(var(--u)*3) rgba(212,168,47,.55)}.tag{margin:0;color:var(--muted);font:italic calc(var(--u)*2) var(--serif)}
.sub{margin:0;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:calc(var(--u)*1.3)}
.clans{display:flex;gap:calc(var(--u)*1.6)}
.clan{width:calc(var(--u)*17);padding:calc(var(--u)*1.6) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.4);border:2px solid var(--line);background:linear-gradient(160deg,var(--c2),#12161d);text-align:center;transition:transform .15s,border-color .15s}
.clan:hover{transform:translateY(calc(var(--u)*-.5))}.clan[aria-pressed=true]{border-color:var(--c);box-shadow:0 0 calc(var(--u)*2.5) var(--c)}.clan .ic{width:calc(var(--u)*7);height:calc(var(--u)*7);margin:0 auto calc(var(--u)*.8);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--c),var(--c2));border:2px solid rgba(255,255,255,.25)}
.clan .ic.fl{width:calc(var(--u)*10.5);height:calc(var(--u)*7);border-radius:calc(var(--u)*.5);background:none;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 10px #000a;overflow:hidden;display:block}.clan .ic.fl .flag{width:100%;height:100%}
.clan h3{margin:0;font:700 calc(var(--u)*2) var(--serif)}.clan .t{color:var(--muted);font-size:calc(var(--u)*1.2)}.clan p{margin:calc(var(--u)*.6) 0 0;font-size:calc(var(--u)*1.25);color:#d5d3cb;min-height:3.6em}.clan .rec{margin-top:calc(var(--u)*.6);font-size:calc(var(--u)*1.15);color:var(--gold)}
.levels{display:flex;gap:calc(var(--u)*.8)}.lvl{padding:calc(var(--u)*.9) calc(var(--u)*2);border-radius:99px;border:1px solid var(--line);background:var(--panel)}.lvl[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.btn{padding:calc(var(--u)*1.1) calc(var(--u)*3);border-radius:calc(var(--u)*.9);border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,#3b3626,#25221a);font:700 calc(var(--u)*1.8) var(--serif);letter-spacing:.06em}.btn:hover{border-color:var(--gold)}.btn.big{padding:calc(var(--u)*1.4) calc(var(--u)*6);font-size:calc(var(--u)*2.3);background:linear-gradient(180deg,#d4a82f,#8a5a12);color:#1d1403}
.btn:focus-visible,.clan:focus-visible,.lvl:focus-visible,.hero:focus-visible,.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fatal{max-width:70ch;margin:10vh auto;padding:2em;border:1px solid var(--bad);border-radius:12px;background:#220e12;white-space:pre-wrap}
/* ---------- plateau */
.game{height:100%;display:grid;grid-template-rows:calc(var(--u)*15) 1fr 1fr calc(var(--u)*15) calc(var(--u)*21);grid-template-columns:1fr calc(var(--u)*13);position:relative}
/* Voile LOCAL derrière les zones de texte (barres de héros, colonne de droite) : le fond animé peut être clair au centre, le texte reste lisible (≥ 4,5:1, mesuré). */
.herobar{background:linear-gradient(rgba(6,8,12,.66),rgba(6,8,12,.66))}
.game>.rail{background-image:linear-gradient(rgba(6,8,12,.78),rgba(6,8,12,.78))!important}
.game{isolation:isolate;background:linear-gradient(rgba(7,9,13,.5),rgba(7,9,13,.66)),var(--scene,none) center/cover no-repeat}   /* voile sombre PAR-DESSUS le décor : la lisibilité ne dépend pas de l'image */
.game>.zone{grid-column:1}.rail{grid-column:2;grid-row:1/6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1);border-left:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(0,0,0,.28))}
/* Barre du chef : 3 colonnes (pouvoir | chef | ressources). Le chef est au centre EXACT du plateau, pour les deux joueurs ; l'adversaire a en plus son paquet de cartes à gauche du pouvoir. */
.herobar{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:calc(var(--u)*2.6);padding:calc(var(--u)*1) calc(var(--u)*2) 0}
.hb{display:flex;align-items:center;gap:calc(var(--u)*2);height:calc(var(--u)*10.6);min-width:0}.hb-l{justify-content:flex-end}.hb-r{justify-content:flex-start}.ophand{display:flex;margin-right:calc(var(--u)*1)}
.hero{position:relative;width:calc(var(--u)*9.5);height:calc(var(--u)*10.6);border-radius:calc(var(--u)*1.2);border:2px solid var(--c);background:radial-gradient(circle at 35% 25%,var(--c),var(--c2));display:grid;place-items:center;flex:none}
.hero .nm{position:absolute;bottom:calc(var(--u)*-3.1);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 calc(var(--u)*1.1) var(--serif);color:#ece9e1;text-shadow:0 1px 3px #000}
.badge{position:absolute;min-width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);padding:0 .3em;border-radius:50%;display:grid;place-items:center;font:800 calc(var(--u)*2)/1 var(--num);font-variant-numeric:lining-nums tabular-nums;padding-top:.06em;border:2px solid rgba(0,0,0,.55);box-shadow:0 1px 4px #000}
.hp{background:radial-gradient(circle at 35% 30%,#d8484a,#8c1212);right:calc(var(--u)*-1.2);bottom:calc(var(--u)*-1.2)}.hp.hurt{color:#ffd0d0}.atk{background:radial-gradient(circle at 35% 30%,#ffe08a,#c08a10);left:calc(var(--u)*-1.2);bottom:calc(var(--u)*-1.2);color:#2b1c00}.arm{background:radial-gradient(circle at 35% 30%,#d6dbe8,#6c7488);left:calc(var(--u)*-1.2);top:calc(var(--u)*-1.2);color:#10131c}
.hp.buffed{color:#b6ffb6}
.stat{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.3);color:var(--muted);font-size:calc(var(--u)*1.2)}
.gems{display:flex;gap:calc(var(--u)*.3)}.gem{width:calc(var(--u)*1.5);height:calc(var(--u)*1.9);border-radius:40% 40% 50% 50%;border:1px solid rgba(255,255,255,.3);background:#2a2a3a}.gem.on{background:linear-gradient(180deg,#9be1ff,#2a7fd6);box-shadow:0 0 6px #4aa8ff}.gem.spent{background:#14283f;border-color:#2a4a6e}
.weapon .wd{font-weight:inherit}.weapon{display:flex;align-items:center;gap:calc(var(--u)*.4);padding:calc(var(--u)*.4) calc(var(--u)*.9);border-radius:99px;border:1px solid var(--line);background:#1b1726;font-size:calc(var(--u)*1.3)}
.power{width:calc(var(--u)*8.2);height:calc(var(--u)*8.2);border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle at 35% 30%,var(--c),var(--c2));display:grid;place-items:center;position:relative;flex:none}
.power .cost{position:absolute;top:calc(var(--u)*-.8);left:50%;transform:translateX(-50%);min-width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);display:grid;place-items:center;border-radius:50%;background:#2a7fd6;border:2px solid #0d2a4d;font:800 calc(var(--u)*1.6)/1 var(--num);font-variant-numeric:lining-nums tabular-nums;padding-top:.07em;box-sizing:border-box}.power .pn{position:absolute;bottom:calc(var(--u)*-1.5);font:600 calc(var(--u)*1.05) var(--serif);white-space:nowrap;text-shadow:0 1px 3px #000}.power:disabled{filter:grayscale(.85) brightness(.6);cursor:default}
/* 1.15.0 : un emblème doré par pouvoir (15 images), qui remplit le médaillon ; la bordure dorée du bouton reste le cadre */
.power{overflow:visible}.power .pimg{position:absolute;inset:0;border-radius:50%;background:#000 center/cover no-repeat;pointer-events:none}.power .cost{z-index:2}.power .pn{z-index:2}
.board{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1);padding:0 calc(var(--u)*2);border-top:1px solid var(--line);position:relative}.board.mine{background:linear-gradient(180deg,rgba(212,168,47,.05),transparent)}.board.drop{outline:2px dashed var(--gold);outline-offset:-6px}
/* unités sur le terrain : les badges dépassent de 1,2 unité de chaque côté ; l'écart entre cartes doit donc être > 2,4 unités, sinon le badge de PV d'une carte recouvre le badge d'ATK de la suivante */
.board{gap:calc(var(--u)*2.8)}
.board .min .badge{bottom:calc(var(--u)*-1.3)}   /* un peu plus bas : la 2e ligne du nom ne touche plus le haut des badges (le décalage est vertical, donc sans effet sur les voisines) */   /* le nom reste entre les deux badges du bas */
.board .empty{color:rgba(255,255,255,.1);font:italic calc(var(--u)*2) var(--serif);pointer-events:none}
.min{position:relative;width:calc(var(--u)*10.6);height:calc(var(--u)*14.4);border-radius:calc(var(--u)*1.1);border:2px solid var(--c);background:linear-gradient(170deg,var(--c2),#12161d);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(var(--u)*.8);flex:none;transition:transform .12s}
.min .art{width:calc(100% - var(--u)*1.4);height:calc(var(--u)*6.2);border-radius:calc(var(--u)*.7);display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--c),var(--c2));border:1px solid rgba(255,255,255,.25)}
/* ===== CARTES DU TAPIS : même langage que les cartes en main — image rectangulaire, cadre selon la RARETÉ (bronze, argent, améthyste, or), trame selon la NATION, bandeau de nom ===== */
.min.r-common,.min.r-rare,.min.r-epic,.min.r-legendary{border:max(2.5px,calc(var(--u)*.34)) solid transparent;background:var(--pat,none) padding-box,linear-gradient(175deg,var(--c2),#151a22 72%) padding-box,var(--frame) border-box;box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.55)}
.min.r-common{--frame:linear-gradient(145deg,#b39a74,#6b5a43 50%,#a08865)}
.min.r-rare{--frame:linear-gradient(145deg,#e6f5ff,#5db4ff 50%,#3b86d1)}
.min.r-epic{--frame:linear-gradient(145deg,#f3d9ff,#c97dff 50%,#8a3fd0);box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 0 calc(var(--u)*1) rgba(192,107,255,.5),0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.55)}
.min.r-legendary{--frame:linear-gradient(145deg,#fff6cf,#ffd24a 40%,#d19a1f 65%,#ffe07a);box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 0 calc(var(--u)*1.8) rgba(245,197,66,.7),0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.55)}
.min.c-america{--pat:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.6px) 0 0/calc(var(--u)*1.7) calc(var(--u)*1.7)}
.min.c-russia{--pat:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px calc(var(--u)*1.5))}
.min.c-germany{--pat:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.6) calc(var(--u)*1.6),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.6) calc(var(--u)*1.6)}
.min.c-japan{--pat:radial-gradient(circle at 50% 100%,transparent 52%,rgba(255,255,255,.09) 54% 60%,transparent 62%) 0 0/calc(var(--u)*2.4) calc(var(--u)*1.2)}
.min.c-france{--pat:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(var(--u)*1.6)),repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(var(--u)*1.6))}
.min .nm{background:linear-gradient(90deg,transparent,rgba(0,0,0,.45) 18%,rgba(0,0,0,.45) 82%,transparent);padding:0 calc(var(--u)*.3);border-radius:calc(var(--u)*.3)}
.board .min .nm{margin-top:calc(var(--u)*.2)}
.min .nm{margin-top:calc(var(--u)*.4);max-width:94%;font:600 max(9px,calc(var(--u)*1.05)) var(--serif);text-align:center;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.min.taunt{border-width:4px;border-color:#d8dce8;box-shadow:0 0 0 2px #444a5a,0 0 calc(var(--u)*1.2) rgba(216,220,232,.35)}.min.ward{box-shadow:0 0 calc(var(--u)*2) #ffe08a,inset 0 0 calc(var(--u)*1.5) rgba(255,224,138,.5)}
.min.taunt.r-common,.min.taunt.r-rare,.min.taunt.r-epic,.min.taunt.r-legendary{border-width:calc(var(--u)*.5);border-color:transparent;box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 0 0 3px #444a5a,0 0 calc(var(--u)*1.2) rgba(216,220,232,.45)}   /* Fortified : cadre plus épais, plaqué de métal clair */
.min.ward.r-common,.min.ward.r-rare,.min.ward.r-epic,.min.ward.r-legendary{box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 0 calc(var(--u)*2) #ffe08a,inset 0 0 calc(var(--u)*1.5) rgba(255,224,138,.5)}.min.silenced{filter:saturate(.3)}
.min.ready,.hero.ready{box-shadow:0 0 0 3px var(--good),0 0 calc(var(--u)*1.6) rgba(74,222,128,.7);cursor:grab}
.min.ready.r-common,.min.ready.r-rare,.min.ready.r-epic,.min.ready.r-legendary{box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--c),0 0 0 3px var(--good),0 0 calc(var(--u)*1.6) rgba(74,222,128,.7)}
.min.sel.r-common,.min.sel.r-rare,.min.sel.r-epic,.min.sel.r-legendary{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--u)*2) var(--gold)!important}.min.sel,.hero.sel,.card.sel{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--u)*2) var(--gold)!important}
.tgt{box-shadow:0 0 0 3px var(--bad),0 0 calc(var(--u)*2) rgba(239,68,68,.8)!important;cursor:crosshair}
.kws{position:absolute;top:calc(var(--u)*-1);right:calc(var(--u)*-.8);display:flex;flex-direction:column;gap:2px}.kw{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);border-radius:50%;background:#0c0a14;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.min.enter{animation:enter .35s ease-out}@keyframes enter{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.min .zzz{position:absolute;top:calc(var(--u)*-1.6);left:50%;transform:translateX(-50%);font:italic 700 calc(var(--u)*1.3) var(--serif);color:var(--muted)}
/* ---------- main et cartes */
.hand{display:flex;justify-content:center;align-items:flex-end;padding-bottom:calc(var(--u)*1.9);position:relative}
.card{position:relative;width:calc(var(--u)*14);height:calc(var(--u)*19.4);border-radius:calc(var(--u)*1.2);border:2px solid var(--c);background:linear-gradient(175deg,var(--c2),#151a22 70%);flex:none;transition:transform .15s,margin .15s;transform-origin:50% 120%;touch-action:none}
.hand .card{margin:0 calc(var(--u)*.2)}.hand.crowded .card{margin:0 calc(var(--u)*-1.9)}
/* En main, les badges d'attaque et de vie sont À L'INTÉRIEUR de la carte : la carte voisine ne les recouvre plus et ils ne sortent pas de la fenêtre. */
.hand .card .atk{left:calc(var(--u)*.4);bottom:calc(var(--u)*.4)}.hand .card .hp{right:calc(var(--u)*.4);bottom:calc(var(--u)*.4)}
.hand.crowded .card .atk{left:calc(var(--u)*2.2)}.hand.crowded .card .hp{right:calc(var(--u)*2.2)}
.hand .card:hover{transform:translateY(calc(var(--u)*-3)) scale(1.06)!important;z-index:20}
.card .cost{position:absolute;top:calc(var(--u)*-.2);left:calc(50% - var(--u)*1.6);width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3f86d6,#134a92);border:2px solid #0d2a4d;font:800 calc(var(--u)*2)/1 var(--num);font-variant-numeric:lining-nums tabular-nums;padding-top:.11em;box-shadow:0 1px 4px #000;z-index:2}
.card .art{height:30%;margin:calc(var(--u)*3.1) calc(var(--u)*1) 0;border-radius:calc(var(--u)*.8);display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--c),var(--c2));border:1px solid rgba(255,255,255,.25)}
.card .nm{margin:calc(var(--u)*.5) calc(var(--u)*.6) 0;text-align:center;font:700 max(9.5px,calc(var(--u)*1.2))/1.1 var(--serif);min-height:2.2em;display:grid;place-items:center}
.card .tx{margin:calc(var(--u)*.2) calc(var(--u)*.8);font-size:max(9px,calc(var(--u)*1.02));line-height:1.2;color:#e1dfd6;text-align:center;white-space:pre-line}
/* En main, les badges d'attaque et de vie occupent les deux coins du bas : sur une carte à badges, la ligne du bas ne garde que le type, centré ENTRE les badges (la rareté se lit au cadre et dans l'aperçu). */
.hand .card.badged .ty{left:calc(var(--u)*4.1);right:calc(var(--u)*4.1);white-space:nowrap;overflow:hidden;letter-spacing:.02em}.hand .card.badged .ty .rr{display:none}
.hand.crowded .card.badged .ty{display:none}   /* main de 8 cartes ou plus : les badges se décalent vers l'intérieur (les cartes se chevauchent), il ne reste plus de place pour un texte entre eux ; le type se lit dans l'aperçu au survol */
.card .ty{position:absolute;bottom:calc(var(--u)*.6);left:0;right:0;text-align:center;font-size:max(7.5px,calc(var(--u)*.9));letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card .atk,.card .hp{bottom:calc(var(--u)*-1.2)}.card .atk{left:calc(var(--u)*-1.2)}.card .hp{right:calc(var(--u)*-1.2)}
/* ===== CADRES : la RARETÉ donne la matière du cadre (bronze, argent, améthyste, or), la NATION donne la couleur du liseré intérieur et la trame du fond. Tout est dessiné en CSS (dégradés), aucune image. ===== */
.card{border:max(3px,calc(var(--u)*.42)) solid transparent;background:var(--pat,none) padding-box,linear-gradient(175deg,var(--c2),#151a22 70%) padding-box,var(--frame) border-box;box-shadow:inset 0 0 0 calc(var(--u)*.22) var(--c)}
.card.r-common{--frame:linear-gradient(145deg,#b39a74,#6b5a43 50%,#a08865)}
.card.r-rare{--frame:linear-gradient(145deg,#e6f5ff,#5db4ff 50%,#3b86d1)}
.card.r-epic{--frame:linear-gradient(145deg,#f3d9ff,#c97dff 50%,#8a3fd0);box-shadow:inset 0 0 0 calc(var(--u)*.22) var(--c),inset 0 0 0 calc(var(--u)*.5) rgba(230,190,255,.55),0 0 calc(var(--u)*.9) rgba(192,107,255,.45)}
.card.r-legendary{--frame:linear-gradient(145deg,#fff6cf,#ffd24a 40%,#d19a1f 65%,#ffe07a);box-shadow:inset 0 0 0 calc(var(--u)*.22) var(--c),0 0 calc(var(--u)*1.6) rgba(245,197,66,.65);
  background:linear-gradient(var(--gold),var(--gold)) 3px 3px/calc(var(--u)*2.2) 2px no-repeat padding-box,linear-gradient(var(--gold),var(--gold)) 3px 3px/2px calc(var(--u)*2.2) no-repeat padding-box,linear-gradient(var(--gold),var(--gold)) calc(100% - 3px) 3px/calc(var(--u)*2.2) 2px no-repeat padding-box,linear-gradient(var(--gold),var(--gold)) calc(100% - 3px) 3px/2px calc(var(--u)*2.2) no-repeat padding-box,var(--pat,none) padding-box,linear-gradient(175deg,var(--c2),#151a22 70%) padding-box,var(--frame) border-box}
.card.c-america{--pat:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.6px) 0 0/calc(var(--u)*1.7) calc(var(--u)*1.7)}
.card.c-russia{--pat:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px calc(var(--u)*1.5))}
.card.c-germany{--pat:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.6) calc(var(--u)*1.6),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.6) calc(var(--u)*1.6)}
.card.c-japan{--pat:radial-gradient(circle at 50% 100%,transparent 52%,rgba(255,255,255,.09) 54% 60%,transparent 62%) 0 0/calc(var(--u)*2.4) calc(var(--u)*1.2)}
.card.c-france{--pat:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(var(--u)*1.6)),repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(var(--u)*1.6))}
.hand .card:not(.can){filter:brightness(.62) saturate(.7)}.hand .card.can{box-shadow:0 0 0 2px var(--good),0 0 calc(var(--u)*1.4) rgba(74,222,128,.55)}
.back{width:calc(var(--u)*3.4);height:calc(var(--u)*4.8);border-radius:calc(var(--u)*.5);background:repeating-linear-gradient(45deg,#252a33,#252a33 4px,#313845 4px,#313845 8px);border:1px solid #5a6578;margin-left:calc(var(--u)*-1.6)}
/* ---------- rail */
.endturn{width:calc(var(--u)*10);padding:calc(var(--u)*1.3) 0;border-radius:calc(var(--u)*1);border:2px solid #4a3a1a;background:linear-gradient(180deg,#e7b83c,#9b6c10);color:#2b1c00;font:700 calc(var(--u)*1.7) var(--serif)}.endturn:disabled{background:#2c2a34;border-color:#3b3946;color:#777;cursor:default}.endturn.ready{animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 calc(var(--u)*2.5) var(--gold)}}
.turninfo{text-align:center;color:var(--muted);font-size:calc(var(--u)*1.2)}.turninfo b{display:block;color:var(--text);font:700 calc(var(--u)*1.5) var(--serif)}
.snd{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);margin-top:calc(var(--u)*.8)}.snd .sb{display:flex;gap:calc(var(--u)*.6)}.snd input{width:calc(var(--u)*8.4);accent-color:var(--gold)}.small.ic.off{opacity:.45;position:relative}.small.ic.off::after{content:'';position:absolute;left:18%;right:18%;top:50%;border-top:2px solid var(--bad);transform:rotate(-40deg)}
.gear{width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);min-width:34px;min-height:34px}.menu>.gear{position:fixed;right:calc(var(--u)*2);bottom:calc(var(--u)*1.6)}.rail>.gear{margin-top:calc(var(--u)*.8)}
.modal{position:fixed;inset:0;z-index:92;background:rgba(4,5,8,.72);display:grid;place-items:center}
.settings{background:#14110d;border:1px solid var(--gold);border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*2) calc(var(--u)*2.6);width:min(calc(var(--u)*44),92vw);box-shadow:0 14px 50px #000d;font-size:max(13px,calc(var(--u)*1.5));text-align:left}
/* 1.17.1 : le panneau ne dépasse jamais l'écran (sur téléphone en paysage il faisait 521 px pour 360 : « Close » était hors de l'écran) et défile ; plus large en paysage bas */
.settings{max-height:calc(100dvh - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.settings .row{position:sticky;bottom:calc(var(--u)*-2);background:#14110d;padding-bottom:calc(var(--u)*.2)}
@media (max-height:560px){.settings{width:min(560px,94vw);padding:12px 18px}.settings h4{margin-top:10px}}
.settings .levels{flex-wrap:wrap;margin:calc(var(--u)*.4) 0}.settings .lvhelp{margin:calc(var(--u)*.4) 0 0;color:var(--muted);font-size:.85em}
.settings h3{margin:0 0 calc(var(--u)*1);font:700 max(18px,calc(var(--u)*2.2)) var(--serif);color:var(--gold)}.settings h4{margin:calc(var(--u)*1.4) 0 calc(var(--u)*.4);font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.srow{display:flex;gap:calc(var(--u)*1.2);align-items:flex-start;padding:calc(var(--u)*.6) 0;cursor:pointer}.srow input[type=checkbox]{accent-color:var(--gold);width:max(18px,calc(var(--u)*2.2));height:max(18px,calc(var(--u)*2.2));margin:0;flex:none}
.srow b{font-weight:600;display:block}.srow em{display:block;font-style:normal;color:var(--muted);font-size:.85em;margin-top:2px}.srow.vol{align-items:center;justify-content:space-between}.srow.vol input{flex:1;accent-color:var(--gold)}
.settings .row{display:flex;justify-content:flex-end;margin-top:calc(var(--u)*1.6)}.settings .primary{border-color:var(--gold);color:var(--gold);min-height:34px;min-width:84px}
.small.ic{display:grid;place-items:center;padding:calc(var(--u)*.5)}.menu>.snd{flex-direction:row;align-items:center;gap:calc(var(--u)*.8);position:fixed;right:calc(var(--u)*2);bottom:calc(var(--u)*1.6);margin:0}
.small{background:none;border:1px solid var(--line);border-radius:8px;padding:calc(var(--u)*.6) calc(var(--u)*1);color:var(--muted);font-size:calc(var(--u)*1.1)}.small:hover{color:var(--text);border-color:var(--bad)}
/* ---------- calques */
.preview{position:fixed;left:calc(var(--u)*2);top:50%;transform:translateY(-50%);z-index:50;pointer-events:none}.preview .card{width:calc(var(--u)*24);height:calc(var(--u)*33);font-size:calc(var(--u)*1.7)}.preview .card .tx{font-size:calc(var(--u)*1.55)}.preview .card .nm{font-size:calc(var(--u)*2)}.preview .card .ty{font-size:calc(var(--u)*1.2)}.preview .card .cost,.preview .card .badge{transform:scale(1.25)}.preview .card .art{margin-top:calc(var(--u)*3)}
.reveal{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;animation:rev .3s ease-out}.reveal .card{width:calc(var(--u)*22);height:calc(var(--u)*30)}.reveal .card .tx{font-size:calc(var(--u)*1.4)}.reveal .card .nm{font-size:calc(var(--u)*1.8)}
@keyframes rev{from{transform:translate(-50%,-30%) scale(.6);opacity:0}}
.arrow{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}.arrow line{stroke:var(--gold);stroke-width:7;stroke-dasharray:2 11;stroke-linecap:round;filter:drop-shadow(0 0 4px #000)}
.ghost{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-60%) scale(.9) rotate(-3deg);opacity:.94}
.ver{margin:0;font-size:calc(var(--u)*1.15);letter-spacing:.08em;color:var(--muted)}.ver-menu{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*1.2);pointer-events:none;white-space:nowrap;text-shadow:0 1px 3px #000}.ver-set{text-align:center;margin-top:calc(var(--u)*1)}
.float{position:fixed;z-index:75;pointer-events:none;font:700 calc(var(--u)*3.6) var(--serif);color:#fff;text-shadow:0 0 6px #000,0 2px 0 #000;animation:flt 1s ease-out forwards}.float.dmg{color:#ff5a5a}.float.heal{color:#6dff9a}
.float.buff,.float.debuff{font-size:calc(var(--u)*2.7);letter-spacing:.02em;white-space:nowrap;animation:fltHold 3.4s ease-out forwards}.float.buff{color:#9dffb5;text-shadow:0 0 10px #1c9a4a,0 0 4px #000,0 2px 0 #000}.float.debuff{color:#ff8f8f;text-shadow:0 0 10px #a01818,0 0 4px #000,0 2px 0 #000}
@keyframes fltHold{0%{opacity:0;transform:translate(-50%,calc(var(--u)*1.5)) scale(.6)}7%{opacity:1;transform:translate(-50%,0) scale(1.18)}13%{transform:translate(-50%,calc(var(--u)*-.4)) scale(1)}72%{opacity:1;transform:translate(-50%,calc(var(--u)*-2.4))}100%{opacity:0;transform:translate(-50%,calc(var(--u)*-5))}}
@keyframes flt{from{transform:translate(-50%,0)}to{transform:translate(-50%,calc(var(--u)*-6));opacity:0}}
.toast{position:fixed;left:50%;bottom:calc(var(--u)*24);transform:translateX(-50%);padding:calc(var(--u)*1) calc(var(--u)*2.2);border-radius:99px;background:#2a0f16;border:1px solid var(--bad);z-index:98;font-size:calc(var(--u)*1.5);pointer-events:none}
.banner{position:fixed;left:0;right:0;top:42%;text-align:center;z-index:65;pointer-events:none;font:700 calc(var(--u)*6) var(--serif);letter-spacing:.1em;color:#fff;text-shadow:0 0 calc(var(--u)*3) var(--c,#d4a82f),0 3px 0 #000;background:linear-gradient(90deg,transparent,rgba(0,0,0,.65),transparent);padding:calc(var(--u)*1.2) 0;animation:ban 1.2s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:scale(.8)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
.over{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.4);background:rgba(6,8,12,.84)}.over h2{margin:0;font:700 calc(var(--u)*9) var(--serif);letter-spacing:.14em}.over.victory h2{color:var(--gold);text-shadow:0 0 calc(var(--u)*4) rgba(245,197,66,.6)}.over.defeat h2{color:#d44}.over p{margin:0;color:var(--muted);font-size:calc(var(--u)*1.8)}.over .row{display:flex;gap:calc(var(--u)*1.6)}
#confirm .primary{border-color:var(--gold);color:var(--gold)}.cfopt{display:flex;align-items:center;gap:calc(var(--u)*.7);color:var(--muted);font-size:calc(var(--u)*1.2);margin-top:calc(var(--u)*.4)}.cfopt input{accent-color:var(--gold);width:calc(var(--u)*2);height:calc(var(--u)*2);margin:0}
.pw{display:inline-flex;flex:none}
.tip{position:fixed;z-index:95;pointer-events:none;max-width:calc(var(--u)*30);min-width:calc(var(--u)*20);padding:calc(var(--u)*1.1) calc(var(--u)*1.5);border-radius:calc(var(--u)*1);background:#14110d;border:1px solid var(--gold);box-shadow:0 8px 30px #000c;font-size:max(12px,calc(var(--u)*1.4));line-height:1.35;color:var(--text)}
.tip b{display:block;font:700 max(14px,calc(var(--u)*1.7)) var(--serif);color:var(--gold)}.tip i{display:block;color:var(--muted);font-size:.9em;margin-bottom:calc(var(--u)*.6)}.tip p{margin:calc(var(--u)*.4) 0 0}
#confirm{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:88;background:#14110d;border:1px solid var(--gold);border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*1.6) calc(var(--u)*2.4);box-shadow:0 10px 40px #000c;min-width:calc(var(--u)*30);text-align:center;font-size:max(13px,calc(var(--u)*1.6))}
#confirm h3{margin:0 0 calc(var(--u)*1);font:700 max(15px,calc(var(--u)*1.8)) var(--serif);color:var(--gold)}#confirm button{min-height:34px;min-width:84px;font-size:max(13px,calc(var(--u)*1.4))}
#confirm .cf{display:flex;justify-content:space-between;gap:calc(var(--u)*2);margin:calc(var(--u)*.4) 0}#confirm .cf b{font-weight:700}
#confirm .dead{color:#ff6a5a}#confirm .live{color:#8fd48f}
#confirm .row{display:flex;gap:calc(var(--u)*1);margin-top:calc(var(--u)*1.4);justify-content:center}
.hero.armed::after{content:'';position:absolute;inset:-5px;border-radius:inherit;border:2px solid rgba(255,214,102,.95);box-shadow:0 0 calc(var(--u)*1.6) rgba(255,200,70,.8),inset 0 0 calc(var(--u)*1.2) rgba(255,200,70,.35);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.hero.armed::after{animation:armed 2.2s ease-in-out infinite}}
@keyframes armed{50%{border-color:rgba(255,238,160,1);box-shadow:0 0 calc(var(--u)*3) rgba(255,215,90,1),inset 0 0 calc(var(--u)*1.8) rgba(255,210,80,.55)}}
.hero.broken{filter:grayscale(1) brightness(.35);transition:filter 1.4s}
#epicb{position:fixed;left:50%;top:13%;transform:translateX(-50%);z-index:70;pointer-events:none;text-align:center;white-space:nowrap;padding:calc(var(--u)*1) calc(var(--u)*8);background:linear-gradient(90deg,transparent,rgba(8,6,16,.92) 16%,rgba(8,6,16,.92) 84%,transparent);animation:epicb 1.8s ease-out forwards}
#epicb span{display:block;font-size:calc(var(--u)*1.3);letter-spacing:.42em;color:var(--ec)}
#epicb b{display:block;font:700 calc(var(--u)*3.2) var(--serif);color:#fff;text-shadow:0 0 calc(var(--u)*2) var(--ec)}
#epicb.epic{--ec:#c58bff}#epicb.legendary{--ec:#ffd23f}
@keyframes epicb{0%{opacity:0;transform:translateX(-50%) scaleX(.55)}12%{opacity:1;transform:translateX(-50%) scaleX(1)}80%{opacity:1}100%{opacity:0}}
.over .portrait{width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;background-size:cover;background-position:center;border:3px solid var(--gold);box-shadow:0 0 calc(var(--u)*5) rgba(245,197,66,.5)}
.over.defeat .portrait{border-color:#d44;box-shadow:0 0 calc(var(--u)*5) rgba(220,60,60,.45);filter:grayscale(.55)}
@media (prefers-reduced-motion:no-preference){.over{animation:overf .8s ease-out}.over h2{animation:overh 1.1s cubic-bezier(.2,.8,.2,1)}.over .portrait{animation:overp 1.4s ease-out}}
@keyframes overf{from{opacity:0}}@keyframes overh{from{opacity:0;letter-spacing:.6em;transform:scale(1.4)}to{opacity:1;letter-spacing:.14em;transform:scale(1)}}@keyframes overp{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1}}
body.defeated #app{filter:grayscale(.85) brightness(.7);transition:filter 1.2s}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.kwlist{margin-top:calc(var(--u)*1);width:calc(var(--u)*24);display:flex;flex-direction:column;gap:calc(var(--u)*.4)}.kwd{padding:calc(var(--u)*.6) calc(var(--u)*1);border-radius:8px;background:rgba(0,0,0,.7);border:1px solid var(--line);font-size:calc(var(--u)*1.3)}.kwd b{color:var(--gold)}

@media (max-height:800px){.hand .card .ty{display:none}.hand .card .art{height:19%}.hand .card .tx{margin-top:calc(var(--u)*.1);line-height:1.12}.hand .card .nm{min-height:2em}}

/* ---------- chefs (menu) et monogrammes */
.leaders{display:flex;gap:calc(var(--u)*1.4)}
.leader{display:flex;align-items:center;gap:calc(var(--u)*1.2);width:calc(var(--u)*30);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);border-radius:calc(var(--u)*1.2);border:2px solid var(--line);background:linear-gradient(160deg,var(--c2),#12161d);text-align:left}
.leader:hover{transform:translateY(calc(var(--u)*-.4))}.leader[aria-pressed=true]{border-color:var(--c);box-shadow:0 0 calc(var(--u)*2.2) var(--c)}.leader:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.leader .mono{flex:none;width:calc(var(--u)*5.6);height:calc(var(--u)*5.6);border-radius:50%;display:grid;place-items:center;font:700 calc(var(--u)*2.1) var(--serif);background:radial-gradient(circle at 35% 30%,var(--c),var(--c2));border:2px solid rgba(255,255,255,.3)}
.art.img,.mono.img,.hero.img{background-size:cover;background-position:center 18%;background-repeat:no-repeat}
.hero.img{background-color:var(--c2);border-color:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}.leader .mono.img{border-color:var(--c)}
.card .art.img{border-color:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.min .art.img{border-color:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.leader .ln{display:flex;flex-direction:column;gap:calc(var(--u)*.2);min-width:0}.leader b{font:700 calc(var(--u)*1.7) var(--serif)}.leader span{color:var(--muted);font-size:calc(var(--u)*1.1)}.leader em{font-style:normal;color:#d5d3cb;font-size:calc(var(--u)*1.1);line-height:1.25}.leader .rec{font-style:normal;color:var(--gold);font-size:calc(var(--u)*1.1);min-height:1.2em}
.hero .mono{position:absolute;top:calc(var(--u)*1);font:700 calc(var(--u)*2.6) var(--serif);color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.04em}

/* ===== échange de départ ===== */
.mull{position:fixed;inset:0;z-index:70;background:rgba(5,7,11,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1);text-align:center;padding:calc(var(--u)*2)}
.mull h2{margin:0;font:700 max(24px,calc(var(--u)*3.4)) var(--serif);color:var(--gold)}.mull .mh{margin:0;max-width:calc(var(--u)*70);color:var(--muted);font-size:max(13px,calc(var(--u)*1.5))}
.mcards{display:flex;gap:calc(var(--u)*2.2);margin:calc(var(--u)*1.6) 0;flex-wrap:wrap;justify-content:center}
.mcard{position:relative;cursor:pointer;border-radius:calc(var(--u)*1.4);transition:transform .15s,opacity .15s;outline-offset:6px}.mcard:hover{transform:translateY(calc(var(--u)*-.8))}.mcard:focus-visible{outline:3px solid var(--gold)}
.mcard .card.big{width:calc(var(--u)*17);height:calc(var(--u)*23.6);font-size:calc(var(--u)*1.35);margin:0;transform:none!important;filter:none!important}.mcard .card.big .tx{font-size:calc(var(--u)*1.2)}.mcard .card.big .nm{font-size:calc(var(--u)*1.5)}
.mcard.swap .card{opacity:.4;filter:grayscale(.8)!important;outline:3px dashed var(--bad,#e5534b);outline-offset:3px}.mcard.fixed{cursor:default}.mcard.fixed:hover{transform:none}
.mtag{position:absolute;left:50%;bottom:calc(var(--u)*-2.6);transform:translateX(-50%);padding:calc(var(--u)*.25) calc(var(--u)*1);border-radius:99px;font-size:max(11px,calc(var(--u)*1.1));letter-spacing:.14em;background:#1d2a1f;color:var(--good);border:1px solid var(--good);white-space:nowrap}
.mcard.swap .mtag{background:#3a1717;color:#ff8a80;border-color:#e5534b}.mcard.fixed .mtag{background:#222;color:var(--muted);border-color:#555}
.mrow{margin-top:calc(var(--u)*2.4)}
/* ===== bibliothèque ===== */
.small.lib{display:inline-flex;gap:calc(var(--u)*.6);align-items:center;padding:calc(var(--u)*.6) calc(var(--u)*1.2);min-height:34px}.settings .lib.wide{width:100%;text-align:left;justify-content:flex-start}
.lib-bg{z-index:93}.library{display:flex;flex-direction:column;width:min(calc(var(--u)*118),96vw);height:min(calc(var(--u)*72),94vh);background:#14110d;border:1px solid var(--gold);border-radius:calc(var(--u)*1.2);box-shadow:0 14px 50px #000d;font-size:max(13px,calc(var(--u)*1.45));text-align:left;overflow:hidden}
.lhead{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*1.2) calc(var(--u)*2)}.lhead h3{margin:0;font:700 max(18px,calc(var(--u)*2.4)) var(--serif);color:var(--gold)}.lhead .primary{border-color:var(--gold);color:var(--gold);min-height:34px;min-width:84px}
.ltabs{display:flex;gap:calc(var(--u)*.6);padding:0 calc(var(--u)*2) calc(var(--u)*1);flex-wrap:wrap}.ltab{display:inline-flex;align-items:center;gap:calc(var(--u)*.7);padding:calc(var(--u)*.6) calc(var(--u)*1.2);border-radius:99px;border:1px solid #4a4538;background:#1c1912;color:var(--text);cursor:pointer;min-height:34px;font:inherit}.ltab[aria-pressed=true]{border-color:var(--c);background:var(--c2);box-shadow:0 0 0 1px var(--c)}.ltab .fl{display:inline-block;width:calc(var(--u)*2.4);height:calc(var(--u)*1.6);min-width:22px;min-height:15px;overflow:hidden;border-radius:2px}.ltab .fl .flag{width:100%;height:100%;display:block}
.lbody{flex:1;overflow:auto;padding:0 calc(var(--u)*2) calc(var(--u)*2);user-select:text;-webkit-user-select:text}.lbody h4{margin:calc(var(--u)*1.6) 0 calc(var(--u)*.8);font-size:.85em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.lbody h4 .cnt{color:var(--muted);letter-spacing:.04em;text-transform:none;margin-left:.6em}
.lleaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*30),1fr));gap:calc(var(--u)*1.2)}.lleader{border:1px solid var(--c);background:linear-gradient(170deg,var(--c2),#12161d);border-radius:calc(var(--u)*1);padding:calc(var(--u)*1.1)}
.lh{display:flex;gap:calc(var(--u)*1);align-items:center}.lh .mono{width:calc(var(--u)*5.2);height:calc(var(--u)*5.2);min-width:44px;min-height:44px;flex:none;border-radius:50%;background:var(--c2) center/cover;border:2px solid var(--c)}.lh b{display:block;font:700 1.15em var(--serif)}.lh i{color:var(--muted);font-size:.88em}
.lp{margin-top:calc(var(--u)*.8);padding-top:calc(var(--u)*.7);border-top:1px solid rgba(255,255,255,.15)}.lp>b{color:var(--gold)}.lp .lc{margin-left:.6em;padding:1px .6em;border-radius:99px;background:#134a92;font-size:.8em}.lp p{margin:calc(var(--u)*.4) 0 0;line-height:1.35;color:#e1dfd6}
.ls{margin-top:calc(var(--u)*.8);display:flex;flex-wrap:wrap;gap:.4em;align-items:center}.ls em{font-style:normal;color:var(--muted);font-size:.85em;margin-right:.3em}.sg{padding:2px .7em;border-radius:99px;border:1px solid var(--gold);background:#2a2210;cursor:help;font-size:.9em}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*14.6),1fr));gap:calc(var(--u)*1.4) calc(var(--u)*1.2);justify-items:center}.lgrid .card.lcard{margin:0;transform:none!important;filter:none!important;cursor:help}.lgrid .card.lcard:hover{transform:translateY(-3px)!important}

.deckb .dkbn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.deckb.warn{border-color:var(--bad);color:#ffb4b4}
.library.dked{width:min(calc(var(--u)*128),98vw);height:min(calc(var(--u)*76),97vh)}.dked .lhead{padding-top:calc(var(--u)*.8);padding-bottom:calc(var(--u)*.6)}
.dkhelp{margin:0;padding:0 calc(var(--u)*2) calc(var(--u)*.8);color:var(--muted);font-size:.9em}
.dkchips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6);padding:0 calc(var(--u)*2) calc(var(--u)*1)}
.dkchip{padding:calc(var(--u)*.5) calc(var(--u)*1.2);border-radius:99px;border:1px solid #4a4538;background:#1c1912;color:var(--text);cursor:pointer;min-height:32px;font:inherit;max-width:calc(var(--u)*26);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkchip.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#2a2415}.dkchip.act b{color:var(--good)}.dkchip.add{border-style:dashed;color:var(--gold)}
.dkbody{flex:1;display:grid;grid-template-columns:minmax(0,1fr) max(290px,calc(var(--u)*36));gap:calc(var(--u)*1.6);min-height:0;padding:0 calc(var(--u)*2) calc(var(--u)*2)}
.dkleft{display:flex;flex-direction:column;min-height:0;min-width:0}
.dkfilters{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.4);margin-bottom:calc(var(--u)*.6)}
.dkf{padding:calc(var(--u)*.3) calc(var(--u)*.9);min-width:30px;min-height:28px;border-radius:6px;border:1px solid #4a4538;background:#1c1912;color:var(--text);cursor:pointer;font:inherit}.dkf[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.dkpool{flex:1;min-height:0;overflow:auto;align-content:start;padding:calc(var(--u)*.6) calc(var(--u)*.6) 0}
.dkcell{position:relative}.dkn{position:absolute;right:-2px;top:-6px;z-index:5;background:var(--gold);color:#1d1403;font:700 .9em var(--num);border-radius:99px;padding:0 .5em;min-width:1.8em;text-align:center;pointer-events:none;box-shadow:0 1px 4px #000a}
/* 1.17.3 : carte de récompense GAGNÉE en campagne (bibliothèque + éditeur) : liseré doré lumineux + pastille « Won » posée sur le bord haut de la carte, lisible sur tous les formats */
.lgrid .card.won{box-shadow:0 0 0 2px var(--gold),0 0 calc(var(--u)*1.6) rgba(245,197,66,.55),inset 0 0 0 calc(var(--u)*.22) var(--c)}
.card .wonb{position:absolute;z-index:9;left:50%;top:0;transform:translate(-50%,-55%);padding:.15em .8em;border-radius:99px;background:var(--gold);color:#1d1403;font:800 max(10px,calc(var(--u)*1.15))/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 6px #000b;pointer-events:none}
.lgrid .card.dkc{cursor:pointer}.lgrid .card.dkc.maxed{opacity:.5;filter:grayscale(.5)!important}.dkc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dkright{display:flex;flex-direction:column;min-height:0;min-width:0;background:#1a1610;border:1px solid #4a4538;border-radius:calc(var(--u)*1);padding:calc(var(--u)*1);gap:calc(var(--u)*.8)}
.dkhead{display:flex;gap:calc(var(--u)*.8);align-items:center}.dkhead input{flex:1;min-width:0;background:#0f0d09;border:1px solid #4a4538;border-radius:6px;color:var(--text);padding:calc(var(--u)*.6);font:inherit;min-height:32px}.dkhead input:disabled{opacity:.7}
.dkcount{font:700 1.2em var(--num);color:var(--bad);white-space:nowrap}.dkcount.full{color:var(--good)}
.dkstat{font-size:.88em}.dkstat.ok{color:var(--good)}.dkstat.bad{color:#ffb4b4}.dkstat p{margin:0 0 .2em}
.dkcurve{display:flex;gap:3px;align-items:flex-end;height:calc(var(--u)*5);min-height:38px;padding-bottom:1.2em;flex:none}
.dkcurve .cb{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;background:#0f0d09;border-radius:3px}.dkcurve .cb i{display:block;width:100%;background:linear-gradient(180deg,#d4a82f,#8a5a12);border-radius:3px 3px 0 0;min-height:1px}.dkcurve .cb em{position:absolute;left:0;right:0;bottom:-1.3em;text-align:center;font:normal .75em var(--num);color:var(--muted)}
.dklist{flex:1 1 0;min-height:calc(var(--u)*12);overflow:auto;display:flex;flex-direction:column;gap:3px}
.dkrow{display:flex;gap:.7em;align-items:center;text-align:left;width:100%;padding:calc(var(--u)*.5) calc(var(--u)*.8);border-radius:6px;border:1px solid #3a3528;border-left:4px solid var(--rc,#777);background:#201c14;color:var(--text);cursor:pointer;font:inherit;min-height:30px}
.dkrow:hover,.dkrow:focus-visible{border-color:var(--gold)}.dkrow .rc{min-width:1.8em;height:1.8em;display:grid;place-items:center;border-radius:99px;background:#2b4d86;font:700 .9em var(--num)}.dkrow .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dkrow .rk{font:700 .9em var(--num);color:var(--gold)}
.dkrow.r-rare{--rc:#4a90e2}.dkrow.r-epic{--rc:#a855f7}.dkrow.r-legendary{--rc:#f5a623}
.dkuse{min-height:34px;display:flex;align-items:center}.dkuse .primary{border-color:var(--gold);color:var(--gold);min-height:34px}.dkuse .primary:disabled{opacity:.45;border-color:var(--line);color:var(--muted)}.dkusing{color:var(--good);font-size:.9em}
.dkacts{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.5)}.dkacts .small,.dkpanel .small{min-height:32px}.danger{border-color:var(--bad);color:#ffb4b4}
.dkright{overflow:auto}.dkpanel{border-top:1px solid #4a4538;padding-top:calc(var(--u)*.8);flex:none}.dkpanel p{margin:0 0 .4em;font-size:.88em;color:var(--muted)}.dkpanel .dkerr{color:#ffb4b4}.dkpanel textarea{width:100%;box-sizing:border-box;resize:none;height:calc(var(--u)*5.5);min-height:50px;background:#0f0d09;border:1px solid #4a4538;border-radius:6px;color:var(--text);font:.85em ui-monospace,Menlo,monospace;padding:calc(var(--u)*.6)}.dkrow2{display:flex;gap:calc(var(--u)*.6);margin-top:.5em}
.dkempty{color:var(--muted);margin:calc(var(--u)*1) 0}
.kwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*30),1fr));gap:calc(var(--u)*.6) calc(var(--u)*1.4)}.kwgrid .kwd{padding:calc(var(--u)*.5) 0;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.35}.kwgrid .kwd b{color:var(--gold)}

.preview{z-index:97}   /* au-dessus de la bibliothèque (93) et des réglages : sinon l'aperçu au survol serait invisible dans la bibliothèque */

.pwreveal{min-width:calc(var(--u)*26);max-width:calc(var(--u)*34);padding:calc(var(--u)*1.6) calc(var(--u)*2.2);border-radius:calc(var(--u)*1.2);background:linear-gradient(170deg,var(--c2),#12161d);border:max(3px,calc(var(--u)*.4)) solid var(--c);box-shadow:0 0 calc(var(--u)*3) rgba(0,0,0,.8);text-align:center;font-size:max(14px,calc(var(--u)*1.7))}
.pwreveal .pk{display:block;font-size:.65em;letter-spacing:.16em;color:var(--muted)}.pwreveal b{display:block;margin:calc(var(--u)*.6) 0 calc(var(--u)*.3);font:700 1.5em var(--serif);color:var(--gold)}.pwreveal .pc{display:inline-block;padding:1px .8em;border-radius:99px;background:#134a92;font-size:.75em}.pwreveal p{margin:calc(var(--u)*.8) 0 0;line-height:1.35;color:#e1dfd6}

/* ---------------------------------------------------------------- boutons du menu (Deck, Library, Settings) : même langage que le logo et le bouton Begin — cadre doré, serif, reflet */
.dock{position:fixed;left:calc(var(--u)*2);bottom:calc(var(--u)*1.6);display:flex;gap:calc(var(--u)*1);align-items:center;z-index:5}
.small.fb{position:static;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*.8);min-height:max(36px,calc(var(--u)*4.2));padding:0 calc(var(--u)*1.7);border-radius:calc(var(--u)*.9);color:#f1e3b8;
  font:700 max(13px,calc(var(--u)*1.35))/1 var(--serif);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,226,150,.13),rgba(255,226,150,0) 46%),linear-gradient(180deg,#2c2517,#16120a);
  border:1px solid rgba(212,168,47,.62);box-shadow:inset 0 1px 0 rgba(255,236,176,.22),inset 0 0 0 1px rgba(0,0,0,.55),0 3px 12px rgba(0,0,0,.6);
  text-shadow:0 1px 2px #000;transition:transform .14s,border-color .14s,box-shadow .14s,color .14s}
.small.fb svg{color:var(--gold);filter:drop-shadow(0 0 4px rgba(245,197,66,.45));flex:none;transition:transform .35s}
.small.fb:hover{color:#fff6dc;border-color:var(--gold);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,236,176,.32),inset 0 0 0 1px rgba(0,0,0,.55),0 5px 16px rgba(0,0,0,.65),0 0 calc(var(--u)*2) rgba(245,197,66,.32)}
.small.fb:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.6)}
.small.fb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.small.fb.gear:hover svg{transform:rotate(75deg)}
.small.fb.gear{width:max(36px,calc(var(--u)*4.2));height:max(36px,calc(var(--u)*4.2));min-width:36px;padding:0;position:fixed;right:calc(var(--u)*2);bottom:calc(var(--u)*1.6)}
.small.fb.deckb{max-width:calc(var(--u)*30)}.small.fb.deckb .dkbn{text-transform:none;letter-spacing:.04em;font-weight:700}
.small.fb.warn{border-color:var(--bad);color:#ffb4b4}
@media (prefers-reduced-motion:reduce){.small.fb,.small.fb svg{transition:none}.small.fb:hover{transform:none}.small.fb.gear:hover svg{transform:none}}

/* ---------------------------------------------------------------- écran de démarrage (visible dès le premier affichage, avant même le code du jeu) */
.boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(40,34,20,.9),rgba(8,10,14,.98) 70%),#0c0f14;transition:opacity .35s}
.boot.out{opacity:0;pointer-events:none}.boot[hidden]{display:none}
.boot .bar{width:min(calc(var(--u)*50),70vw);height:calc(var(--u)*1.1);min-height:8px;border-radius:99px;background:#15120b;border:1px solid rgba(212,168,47,.55);box-shadow:inset 0 2px 6px #000,0 0 calc(var(--u)*2) rgba(212,168,47,.15);overflow:hidden}
.boot .bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,#f0cd62,#b98a1f 55%,#8a5a12);box-shadow:0 0 calc(var(--u)*1.2) rgba(245,197,66,.6);transition:width .2s ease-out;border-radius:99px}
.boot .bmsg{margin:0;min-height:1.3em;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:max(12px,calc(var(--u)*1.3))}
.boot .btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.boot,.boot .bar i{transition:none}}

/* ======================================================================================================================================
   TACTILE / TÉLÉPHONE (1.8.0). TOUT ce bloc est gardé par « pointer:coarse » (le doigt est le pointeur principal) : avec une souris — app Mac,
   navigateur d'ordinateur — il ne s'applique pas, et le rendu reste exactement celui d'avant. Aucune détection de modèle ni de navigateur.
   ====================================================================================================================================== */
#rotate{display:none}
@media (pointer:coarse){
  html,body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100dvh;overscroll-behavior:none}
  img,svg{-webkit-touch-callout:none;-webkit-user-drag:none}
  #app{height:100dvh}
  :root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
  .game{padding:var(--st) var(--sr) calc(var(--sb)*.5) var(--sl)}   /* le décor remplit TOUT l'écran ; seul le contenu évite l'encoche et la barre d'accueil */
  .menu{padding-left:max(calc(var(--u)*3),var(--sl));padding-right:max(calc(var(--u)*3),var(--sr));padding-bottom:max(calc(var(--u)*3),calc(var(--sb)*.5))}
  .lib-bg{padding:var(--st) var(--sr) calc(var(--sb)*.5) var(--sl)}
  /* cibles de 44 px au moins (recommandation Apple/Google) */
  #end,#concede,.gear,.btn,.rail .small,.dock .small,.menu .small,.settings .small,.dkf,.ltab,.dkchip,.cf .small,.dkrow{min-height:44px}
  .leader{min-height:46px}
  .lvl{min-height:44px;min-width:44px;font-size:max(12px,calc(var(--u)*1.7))}
  button#settingsBtn.gear,#end,#concede{min-width:44px;width:max(44px,calc(var(--u)*4.2))}button#settingsBtn.gear{height:44px}.gear svg{margin:auto}
  .power::before,.hero::before{content:'';position:absolute;inset:-8px;border-radius:inherit}
}
@media (pointer:coarse) and (max-height:560px){
  :root{--ph:1}
  .game{grid-template-rows:calc(var(--u)*12.5) 1fr 1fr calc(var(--u)*12.5) calc(var(--u)*26);grid-template-columns:1fr max(96px,calc(var(--u)*17))}
  .power{width:max(44px,calc(var(--u)*10));height:max(44px,calc(var(--u)*10))}.hero{width:calc(var(--u)*9);height:calc(var(--u)*10.4)}
  .rail{gap:6px;padding:4px}.rail .turninfo{line-height:1.15}.rail .turninfo b{white-space:nowrap}
  #end{white-space:nowrap;font-size:14px;min-height:48px;width:100%;padding:0 4px}#concede{white-space:nowrap;font-size:12px;min-height:44px;width:100%;padding:0 4px}.rail .turninfo{font-size:max(10px,calc(var(--u)*1.7))}.rail .small,.endturn{font-size:max(11px,calc(var(--u)*2));padding-left:calc(var(--u)*.6);padding-right:calc(var(--u)*.6)}
  /* la main : cartes « compactes » (art, nom, coût, valeurs). Le texte complet s'affiche en grand par APPUI LONG (aperçu) */
  .hand{padding-bottom:calc(var(--u)*.8)}
  .hand .card{width:calc(var(--u)*16.5);height:calc(var(--u)*23.5)}
  .hand .card .tx,.hand .card .ty{display:none}
  .hand .card .art{height:28%}.hand .card .nm{padding-bottom:0}.hand .card .badge{bottom:calc(var(--u)*.2)}.hand .card:not(.badged) .nm{max-height:none}
  .hand .card .nm{font-size:max(10px,calc(var(--u)*1.9));letter-spacing:-.01em}.hand .card.badged .nm{margin-left:calc(var(--u)*.4);margin-right:calc(var(--u)*.4)}
  .hand .card .nm{font-size:max(10px,calc(var(--u)*2.1));min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.08;margin-bottom:0;overflow-wrap:break-word;max-height:2.2em}
  .board .min .tx{display:none}.min{width:max(calc(var(--u)*10.6),52px)}.min .nm{font-size:max(10px,calc(var(--u)*1.7));line-height:1.1;max-width:98%;overflow-wrap:anywhere}
  /* textes secondaires : jamais sous ~10 px réels (police min = 4–5 px avant) */
  .hero .nm{font-size:max(10px,calc(var(--u)*2));bottom:calc(var(--u)*-3.6)}.power .pn{font-size:max(10px,calc(var(--u)*1.9));bottom:calc(var(--u)*-2.6);max-width:22vw;overflow:hidden;text-overflow:ellipsis}.herobar .hb-l .power{margin-right:calc(var(--u)*3);transform:translateX(-18px)}.power .pn{left:50%;transform:translateX(-50%)}.hero .nm{max-width:26vw;overflow:hidden;text-overflow:ellipsis}.power .cost{min-width:max(16px,calc(var(--u)*3.4));height:max(16px,calc(var(--u)*3.4));font-size:max(11px,calc(var(--u)*2.1))}
  .stat{font-size:max(10px,calc(var(--u)*2));gap:0}.stat *{font-size:inherit}
  .rail .turninfo b{font-size:max(11px,calc(var(--u)*2.1))}
  .badge{min-width:max(18px,calc(var(--u)*3.8));height:max(18px,calc(var(--u)*3.8));font-size:max(12px,calc(var(--u)*2.3))}
  .card .cost{width:max(18px,calc(var(--u)*3.6));height:max(18px,calc(var(--u)*3.6));left:calc(50% - max(9px,var(--u)*1.8));font-size:max(12px,calc(var(--u)*2.3))}
  .hand{padding-bottom:calc(var(--u)*1.6)}   /* l'éventail incline les cartes d'extrémité : leur coin déborde sinon de 1–2 px */
  /* l'aperçu (appui long / toucher) : grand, lisible, hauteur ≈ 75 % de l'écran */
  .preview{--u:2.3vh;left:max(env(safe-area-inset-left),2vh)}
}
@media (pointer:coarse) and (orientation:portrait) and (max-width:700px){
  #rotate{display:flex;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:#0c0f14;color:#ece9e1;font:600 20px/1.3 Georgia,serif;padding:24px}
  #rotate span{font:400 15px/1.3 -apple-system,Arial,sans-serif;color:#9a9eab}
}
@media (pointer:coarse) and (max-height:560px){.preview{display:flex;align-items:center;gap:calc(var(--u)*1.5)}.preview .kwlist{margin-top:0;width:calc(var(--u)*22)}}
/* ---------- TÉLÉPHONE : bibliothèque et éditeur de decks = plein écran, défilables au doigt, une seule barre d'en-tête */
.dkfrow{display:contents}
@media (pointer:coarse) and (max-height:560px){
  .library,.library.dked{--u:2.1vh;width:100%;height:100%;border-radius:0;border-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:10px;align-items:center;font-size:13px}
  .lib-bg{place-items:stretch}
  .lhead{display:contents}
  .lhead h3{grid-column:1;grid-row:1;margin:0;padding:0 0 0 12px;font-size:17px;white-space:nowrap}
  .lhead .primary{grid-column:3;grid-row:1;margin:4px 10px 4px 0;font-size:14px;min-width:72px}
  .ltabs,.dkchips{grid-column:2;grid-row:1;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;margin:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .ltabs::-webkit-scrollbar,.dkchips::-webkit-scrollbar,.dkfrow::-webkit-scrollbar{display:none}
  .ltab,.dkchip{flex:none;font-size:13px}
  .dkhelp{display:none}
  .lbody{grid-column:1/-1;grid-row:2;align-self:stretch;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:0 12px 14px}
  /* CAUSE du « non défilable » : .card{touch-action:none} (pour le glisser-déposer de la main) bloquait aussi le défilement quand le doigt se posait sur une carte */
  .library .card,.library .dkcell,.library .sg{touch-action:pan-y}
  .library .card{--u:2.1vh}
  .lgrid{grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*14.6),1fr))}
  .library .card .tx{font-size:max(10px,calc(var(--u)*1.15))}.library .card .nm{font-size:max(11px,calc(var(--u)*1.3))}
  .lleaders{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  /* éditeur de decks : filtres sur UNE ligne défilante, liste du deck en colonne qui défile en entier */
  .dkbody{grid-column:1/-1;grid-row:2;align-self:stretch;min-height:0;grid-template-columns:minmax(0,1fr) 250px;gap:10px;padding:0 10px 8px}
  .dkleft{min-height:0}
  .dkfrow{display:flex;gap:10px;overflow-x:auto;flex:none;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .dkfilters{flex-wrap:nowrap;flex:none;margin:0}.dkf{flex:none}
  .dkpool{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .dkright{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column}
  .dkright>*{flex:none}
  /* panneau du deck : la LISTE d'abord (c'est ce qu'on consulte), puis les actions ; le tout défile d'un seul bloc */
  .dkright{gap:6px;padding:8px}
  .dkhead{order:1}.dkstat{order:2;font-size:12px}.dkstat p{display:inline;margin:0 8px 0 0}.dkcurve{order:3;height:30px;min-height:30px;padding-bottom:14px}.dklist{order:4;overflow:visible;flex:none}
  .dkuse{order:5}.dkacts{order:6;flex-wrap:wrap}.dkacts .small{flex:1 1 auto;white-space:nowrap;min-height:44px}.dkpanel{order:7}
  .dkrow{min-height:44px}
}

/* ===== 1.9.0 · finition visuelle ===== */
/* 1. Transitions : un fondu à l'arrivée d'un écran, une montée douce pour les fenêtres. Rejouées jamais lors d'un simple re-rendu. « reduce animations » les coupe (règle plus haut). */
@keyframes scrIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(calc(var(--u)*1.2)) scale(.985)}to{opacity:1;transform:none}}
.scr-in{animation:scrIn .32s ease-out both}
.modal.pop-in,.lib-bg.pop-in,.mull.pop-in{animation:fadeIn .2s ease-out both}
.modal.pop-in>*,.lib-bg.pop-in>*,.mull.pop-in>*{animation:popIn .24s cubic-bezier(.2,.8,.25,1) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
html.noanim .scr-in,html.noanim .pop-in,html.noanim .pop-in>*{animation:none}

/* 2. Dos de carte : une identité par nation (couleur du chef + motif propre, comme les cartes) */
.back{--bc:#5a6578;--bd:#252a33;background:var(--bp,none),repeating-linear-gradient(45deg,var(--bd),var(--bd) 4px,color-mix(in srgb,var(--bc) 32%,var(--bd)) 4px,color-mix(in srgb,var(--bc) 32%,var(--bd)) 8px);border:1px solid var(--bc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 calc(var(--u)*.7) color-mix(in srgb,var(--bc) 55%,transparent);position:relative}
.back::after{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--bc);opacity:.85;box-shadow:0 0 0 1px rgba(0,0,0,.5);clip-path:var(--bm,circle(50%))}
.back.c-america{--bc:#4b86e0;--bd:#10264a;--bp:radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1.6px) 0 0/6px 6px;--bm:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.back.c-russia{--bc:#cf4444;--bd:#431010;--bp:repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px);--bm:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.back.c-germany{--bc:#9aa5b1;--bd:#23282f;--bp:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.12) 46% 54%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,255,255,.12) 46% 54%,transparent 54%);--bm:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.back.c-japan{--bc:#e0708f;--bd:#4a1528;--bp:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0 1px,transparent 1px 7px);--bm:circle(50%)}
.back.c-france{--bc:#d9ae33;--bd:#3f3006;--bp:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px);--bm:polygon(50% 0,64% 30%,100% 38%,70% 60%,80% 100%,50% 78%,20% 100%,30% 60%,0 38%,36% 30%)}
.back.pile{display:inline-block;vertical-align:middle;margin:0 calc(var(--u)*.5) 0 0;width:calc(var(--u)*2.2);height:calc(var(--u)*3.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),calc(var(--u)*.25) calc(var(--u)*.25) 0 -1px var(--bd),calc(var(--u)*.5) calc(var(--u)*.5) 0 -1px #000}

/* 3. Cadre et ambiance par nation : filet de couleur autour du plateau, voile teinté, liseré à motif en haut et en bas */
.game.nat-america{--nc:#4b86e0;--nc2:#10264a}.game.nat-russia{--nc:#cf4444;--nc2:#431010}.game.nat-germany{--nc:#9aa5b1;--nc2:#23282f}.game.nat-japan{--nc:#e0708f;--nc2:#4a1528}.game.nat-france{--nc:#d9ae33;--nc2:#3f3006}
.game[class*="nat-"]{background:linear-gradient(color-mix(in srgb,var(--nc2) 32%,rgba(7,9,13,.5)),color-mix(in srgb,var(--nc2) 24%,rgba(7,9,13,.66))),var(--scene,none) center/cover no-repeat}
.game[class*="nat-"]::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border:calc(var(--u)*.35) solid color-mix(in srgb,var(--nc) 70%,transparent);box-shadow:inset 0 0 calc(var(--u)*9) color-mix(in srgb,var(--nc) 28%,transparent),inset 0 0 0 1px rgba(0,0,0,.6)}
.game[class*="nat-"]::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--u)*.9);pointer-events:none;z-index:1;opacity:.75;background:var(--fp);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.game.nat-america{--fp:repeating-linear-gradient(90deg,var(--nc) 0 calc(var(--u)*.5),transparent calc(var(--u)*.5) calc(var(--u)*2.2))}
.game.nat-russia{--fp:repeating-linear-gradient(135deg,var(--nc) 0 calc(var(--u)*.35),transparent calc(var(--u)*.35) calc(var(--u)*1.3))}
.game.nat-germany{--fp:linear-gradient(var(--nc) 0 18%,transparent 18% 40%,var(--nc) 40% 58%,transparent 58%)}
.game.nat-japan{--fp:radial-gradient(circle at 50% 50%,var(--nc) 0 calc(var(--u)*.3),transparent calc(var(--u)*.35)) 0 0/calc(var(--u)*2.6) 100%}
.game.nat-france{--fp:repeating-linear-gradient(45deg,var(--nc) 0 calc(var(--u)*.3),transparent calc(var(--u)*.3) calc(var(--u)*1.2)),repeating-linear-gradient(-45deg,var(--nc) 0 calc(var(--u)*.3),transparent calc(var(--u)*.3) calc(var(--u)*1.2))}

/* 4. Retour au toucher (tactile seulement : jamais sur Mac) */
@keyframes ripple{from{transform:translate(-50%,-50%) scale(.25);opacity:.75}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.ripple{position:fixed;z-index:400;width:56px;height:56px;margin:0;border-radius:50%;pointer-events:none;border:2px solid rgba(245,197,66,.95);background:radial-gradient(circle,rgba(245,197,66,.38),rgba(245,197,66,0) 70%);animation:ripple .5s ease-out forwards;transform:translate(-50%,-50%)}
@media (pointer:coarse){
  button,.clan,.leader,.lvl,.ltab,.dkchip{transition:transform .09s ease-out,filter .09s,box-shadow .15s}
  button.pressed:not(:disabled),.clan.pressed,.leader.pressed,.lvl.pressed,.ltab.pressed,.dkchip.pressed,.mcard.pressed{transform:scale(.95);filter:brightness(1.25)}
  .hand .card.pressed{transform:translateY(calc(var(--u)*-2.6)) scale(1.04)!important;filter:brightness(1.12)}
  .min.pressed,.hero.pressed,.power.pressed{filter:brightness(1.22)}
  #end.pressed:not(:disabled){transform:scale(.94);box-shadow:inset 0 3px 10px rgba(0,0,0,.55),0 0 18px rgba(245,197,66,.55)}
}

/* ===== 1.10.0 · moments forts ===== */
/* Pose d'un serviteur : tombe du dessus, rebondit une fois, ombre qui se resserre. Légendaire : chute plus haute, rebond plus net. */
.min.enter{animation:drop .5s cubic-bezier(.3,.6,.35,1) both}
.min.enter.enter-legend{animation:dropL .72s cubic-bezier(.3,.6,.35,1) both}
@keyframes drop{0%{transform:translateY(calc(var(--u)*-9)) scale(1.18);opacity:0;filter:drop-shadow(0 calc(var(--u)*5) calc(var(--u)*2.5) rgba(0,0,0,.55))}45%{opacity:1}62%{transform:translateY(0) scale(.97);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}80%{transform:translateY(calc(var(--u)*-.9)) scale(1.01)}100%{transform:none;opacity:1}}
@keyframes dropL{0%{transform:translateY(calc(var(--u)*-15)) scale(1.35);opacity:0;filter:brightness(1.7) drop-shadow(0 calc(var(--u)*8) calc(var(--u)*3) rgba(0,0,0,.6))}35%{opacity:1}55%{transform:translateY(0) scale(.94);filter:brightness(1.35)}72%{transform:translateY(calc(var(--u)*-2)) scale(1.03)}88%{transform:translateY(0) scale(.99)}100%{transform:none;opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.min.enter,.min.enter.enter-legend{animation:none}}
html.noanim .min.enter,html.noanim .min.enter.enter-legend{animation:none}

/* Pioche : le dos de carte vole de la pile à la main */
.back.flyer{box-shadow:0 calc(var(--u)*1) calc(var(--u)*1.6) rgba(0,0,0,.6)}

/* Écran de fin : couleur de la nation gagnante, rayons lents derrière le portrait, statistiques qui montent, boutons qui apparaissent après */
.over{--nc:var(--gold);background:radial-gradient(ellipse 60% 55% at 50% 40%,color-mix(in srgb,var(--nc) 22%,transparent),transparent 70%),rgba(6,8,12,.86)}
.over.nat-america{--nc:#4b86e0}.over.nat-russia{--nc:#cf4444}.over.nat-germany{--nc:#9aa5b1}.over.nat-japan{--nc:#e0708f}.over.nat-france{--nc:#d9ae33}
.over.victory h2{color:color-mix(in srgb,var(--nc) 60%,#fff 40%);text-shadow:0 0 calc(var(--u)*4) color-mix(in srgb,var(--nc) 70%,transparent)}
.over .portrait{position:relative;border:calc(var(--u)*.35) solid var(--nc);box-shadow:0 0 calc(var(--u)*5) color-mix(in srgb,var(--nc) 55%,transparent)}
.over.victory .portrait::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--nc) 26%,transparent) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:rays 40s linear infinite}
.over.defeat .portrait{filter:grayscale(.85) brightness(.75);border-color:color-mix(in srgb,var(--nc) 55%,#555)}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.ostats{display:flex;gap:calc(var(--u)*3.2);justify-content:center;margin:calc(var(--u)*.4) 0}
.ost{display:flex;flex-direction:column;align-items:center;min-width:calc(var(--u)*11);gap:calc(var(--u)*.4)}
.ost b{font:700 calc(var(--u)*4.4)/1 var(--serif);color:var(--nc);font-variant-numeric:tabular-nums;text-shadow:0 0 calc(var(--u)*1.6) color-mix(in srgb,var(--nc) 45%,transparent)}
.ost span{font-size:calc(var(--u)*1.35);color:var(--muted);text-align:center;letter-spacing:.04em}
@media (prefers-reduced-motion:no-preference){
  html:not(.noanim) .ost{animation:ostIn .5s ease-out both}html:not(.noanim) .ost:nth-child(1){animation-delay:.7s}html:not(.noanim) .ost:nth-child(2){animation-delay:.86s}html:not(.noanim) .ost:nth-child(3){animation-delay:1.02s}html:not(.noanim) .ost:nth-child(4){animation-delay:1.18s}
  html:not(.noanim) .over .row{animation:ostIn .5s ease-out 1.5s both}
}
@keyframes ostIn{from{opacity:0;transform:translateY(calc(var(--u)*1.6))}}
@media (prefers-reduced-motion:reduce){.over.victory .portrait::before{animation:none}}
html.noanim .over.victory .portrait::before{animation:none}

/* Menu vivant : lueur de bougie qui respire + poussière dorée qui monte lentement. 100 % CSS (aucune particule JS), coupé par « reduce animations ». */
.menu{position:relative;isolation:isolate}
.menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 38% 46% at 18% 78%,rgba(255,176,70,.2),transparent 70%),radial-gradient(ellipse 34% 44% at 84% 74%,rgba(255,190,90,.16),transparent 70%)}
.menu::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.38;background:radial-gradient(circle,rgba(245,197,66,.9) 0 1.2px,transparent 1.8px) 0 0/140px 170px,radial-gradient(circle,rgba(255,230,160,.8) 0 1px,transparent 1.6px) 60px 90px/210px 230px;-webkit-mask:linear-gradient(transparent 0,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent 0,#000 30%,#000 70%,transparent)}
@media (prefers-reduced-motion:no-preference){
  html:not(.noanim) .menu::before{animation:flicker 5.5s ease-in-out infinite}
  html:not(.noanim) .menu::after{animation:dust 38s linear infinite}
}
@keyframes flicker{0%,100%{opacity:1}22%{opacity:.78}41%{opacity:.95}63%{opacity:.7}82%{opacity:.92}}
@keyframes dust{from{background-position:0 0,60px 90px}to{background-position:-30px -340px,90px -460px}}

/* ===== 1.11.0 · pièges ===== */
.card.trapcard{border-style:dashed}.card.trapcard .ty .tt{letter-spacing:.14em}
.card.trapcard::after{content:"TRAP";position:absolute;top:calc(var(--u)*.6);right:calc(var(--u)*.8);font-size:calc(var(--u)*1.1);letter-spacing:.2em;color:#e8c872;text-shadow:0 1px 2px #000;pointer-events:none}
@media (prefers-reduced-motion:reduce){.trapseal{animation:none}#trapfire .tf{animation:none}}
/* 1.11.0 · pièges au doigt : l'icône reste petite, la zone tactile atteint 44 px (zone invisible élargie) */
@media (pointer:coarse){.trapseal{position:relative}.trapseal::before{content:"";position:absolute;inset:-11px}.traps{gap:calc(var(--u)*1.2)}}

/* ===== 1.11.3 · pièges : de vraies cartes face cachée sur le tapis ===== */
.board .traps{position:absolute;left:calc(var(--u)*2.4);top:50%;transform:translateY(-50%);display:flex;align-items:center;margin:0;z-index:2;pointer-events:none}
.board .trapseal{pointer-events:auto;position:relative;flex:none;display:block;width:max(26px,calc(var(--u)*6.6));height:max(36px,calc(var(--u)*9.1));min-width:0;min-height:0;margin-left:calc(var(--u)*-2.8);padding:0;border-radius:calc(var(--u)*.6);border:max(1.5px,calc(var(--u)*.3)) dashed var(--gold);box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5);animation:none;cursor:default}
.board .trapseal:first-child{margin-left:0}
.board .trapseal:nth-child(1){transform:rotate(-5deg)}.board .trapseal:nth-child(3){transform:rotate(5deg)}
.board .trapseal b{position:absolute;inset:0;display:grid;place-items:center;font:800 max(12px,calc(var(--u)*3.2))/1 var(--serif);color:#ffe9a0;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.85);z-index:2;pointer-events:none}
.board .trapseal.known:hover,.board .trapseal.known:focus-visible{box-shadow:0 0 calc(var(--u)*1.4) var(--gold),0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.7)}
.trapseal.set{animation:trapSet .6s cubic-bezier(.2,.8,.2,1)}
@keyframes trapSet{0%{opacity:0;translate:0 -2.2em;scale:1.5}60%{opacity:1;translate:0 .15em;scale:.96}100%{translate:0 0;scale:1}}
#trapfire{position:fixed;inset:0;display:grid;place-items:center;z-index:60;pointer-events:none;perspective:1400px}
#trapfire .tf{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.1);pointer-events:auto;cursor:pointer}
#trapfire .lbl{font-size:calc(var(--u)*2);letter-spacing:.3em;color:#ffd470;text-shadow:0 2px 10px #000,0 0 18px rgba(255,180,40,.6)}
#trapfire .why{font-size:calc(var(--u)*1.5);letter-spacing:.05em;color:#f1eee4;background:rgba(8,9,12,.72);border:1px solid rgba(255,212,112,.5);border-radius:99px;padding:calc(var(--u)*.4) calc(var(--u)*1.6);text-shadow:0 1px 2px #000}
.tfc{position:relative;width:calc(var(--u)*22);height:calc(var(--u)*30);transform-style:preserve-3d;transform:rotateY(180deg)}
.tfc .tfface{position:absolute;inset:0;width:100%;height:100%;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tfc .tfface.back{transform:rotateY(180deg);display:block;border-radius:calc(var(--u)*1.2);border:max(2px,calc(var(--u)*.4)) dashed var(--gold)}
.tfc .tfface.back b{position:absolute;inset:0;display:grid;place-items:center;font:800 calc(var(--u)*9)/1 var(--serif);color:#ffe9a0;text-shadow:0 2px 8px #000;z-index:2}
.tfc .card .tx{font-size:calc(var(--u)*1.4)}.tfc .card .nm{font-size:calc(var(--u)*1.8)}
@media (pointer:coarse){#trapfire{--u:2.2vh}}
@media (prefers-reduced-motion:reduce){.trapseal.set{animation:none}.tfc{transform:none}.tfc .tfface.back{display:none}}
/* ===== 1.11.3 · chiffres des serviteurs : vert = au-dessus de la carte, rouge = en dessous (disque sombre pour que le chiffre reste lisible) ===== */
.min .badge.up,.min .badge.down,.hero .badge.down{background:radial-gradient(circle at 35% 30%,#2b313b,#0b0e13);-webkit-text-stroke:.1em #000;paint-order:stroke fill;border-width:2px}
.min .badge.up{color:#63ff8d;border-color:#2fbf5a;box-shadow:0 0 calc(var(--u)*.9) rgba(80,255,130,.7),0 1px 4px #000}
.min .badge.down,.hero .badge.down{color:#ff6262;border-color:#d63a3a;box-shadow:0 0 calc(var(--u)*.9) rgba(255,70,70,.7),0 1px 4px #000}
/* 1.11.3 · petits écrans tactiles : cartes-pièges plus resserrées, pour ne jamais recouvrir un serviteur même avec 7 serviteurs sur le tapis */
@media (pointer:coarse){.board .traps{left:calc(var(--u)*.8)}.board .trapseal{margin-left:calc(var(--u)*-4.6)}.board .trapseal:first-child{margin-left:0}}
/* ===== 1.11.4 · pièges plus visibles : cartes plus grandes (+40 %), écartées de la bordure décorée, lueur rouge qui respire ===== */
.board .traps{left:calc(var(--u)*5)}
.board .trapseal{width:max(36px,calc(var(--u)*9.2));height:max(50px,calc(var(--u)*12.7));margin-left:calc(var(--u)*-3.9)}
.board .trapseal:first-child{margin-left:0}
/* lueur rouge : portée par la carte elle-même (le ::after du dos est l'emblème de la nation, il ne doit pas être touché) */
.board .trapseal{box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5),0 0 calc(var(--u)*1.4) calc(var(--u)*.3) rgba(235,40,40,.55)}
@media (prefers-reduced-motion:no-preference){.board .trapseal{animation:trapGlow 3s ease-in-out infinite}.board .trapseal:nth-child(2){animation-delay:-1s}.board .trapseal:nth-child(3){animation-delay:-2s}.board .trapseal.set{animation:trapSet .6s cubic-bezier(.2,.8,.2,1),trapGlow 3s ease-in-out infinite;animation-delay:0s,-1.5s}.board .trapseal.known:hover,.board .trapseal.known:focus-visible{animation:none}}
@keyframes trapGlow{0%,100%{box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5),0 0 calc(var(--u)*.8) calc(var(--u)*.1) rgba(235,40,40,.3)}50%{box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5),0 0 calc(var(--u)*2.6) calc(var(--u)*.9) rgba(255,50,50,.95)}}
@media (pointer:coarse){.board .traps{left:calc(var(--u)*1.7)}.board .trapseal{margin-left:calc(var(--u)*-7.6)}.board .trapseal:first-child{margin-left:0}}
/* ===== 1.11.4 · « z z » des serviteurs endormis : trois z qui montent et s'estompent lentement ===== */
.min .zzz{width:0;height:0;font-size:0}
.min .zzz i{position:absolute;left:0;bottom:0;font:italic 700 calc(var(--u)*1.3) var(--serif);color:#c9d3ea;text-shadow:0 1px 2px #000;opacity:.9;font-style:italic}
.min .zzz i:nth-child(1){transform:translate(calc(var(--u)*-1.6),calc(var(--u)*-.2))}.min .zzz i:nth-child(2){transform:translate(calc(var(--u)*-.2),calc(var(--u)*-1))}.min .zzz i:nth-child(3){transform:translate(calc(var(--u)*1.2),calc(var(--u)*-1.9));font-size:calc(var(--u)*1.7)}
@media (prefers-reduced-motion:no-preference){.min .zzz i{opacity:0;animation:zzRise 3.6s ease-in-out infinite}.min .zzz i:nth-child(2){animation-delay:1.2s}.min .zzz i:nth-child(3){animation-delay:2.4s}}
@keyframes zzRise{0%{opacity:0;transform:translate(calc(var(--u)*-1),0) scale(.7)}20%{opacity:.95}70%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--u)*1.4),calc(var(--u)*-3.2)) scale(1.25)}}

/* ---- IDENTITÉ DES NATIONS (1.13.0) : barre du chef, cristaux de ressource et bouton « End turn » à la couleur de la nation de chaque joueur ---- */
.herobar.nb{background:linear-gradient(90deg,color-mix(in srgb,var(--c2) 75%,transparent),rgba(6,8,12,.66) 70%);box-shadow:inset max(3px,calc(var(--u)*.4)) 0 0 var(--c)}
.nb .gem.on{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c));box-shadow:0 0 6px var(--c)}
.nb .gem.spent{background:var(--c2);border-color:color-mix(in srgb,var(--c) 45%,#000)}
.rail.nb{--bt:86%;--bb:62%}.rail.nb.c-germany,.rail.nb.c-japan{--bt:100%;--bb:88%}   /* texte foncé : le bas du dégradé reste clair (contraste) */
.rail.nb .endturn:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--c) var(--bt),#000),color-mix(in srgb,var(--c) var(--bb),#000));border-color:var(--c2);color:var(--ct);text-shadow:none}
.rail.nb .endturn.ready{animation:pulseN 1.4s infinite}@keyframes pulseN{50%{box-shadow:0 0 calc(var(--u)*2.5) var(--c)}}
/* écran de choix : le dos de la nation dépasse derrière le drapeau, puis ses mots-clés */
@media (prefers-reduced-motion:reduce){.rail.nb .endturn.ready{animation:none}}

/* ======================================================================================================
   1.14.0 — TÉLÉPHONE EN PAYSAGE : disposition « à la Hearthstone » (écrans tactiles de moins de 560 px de haut ; le Mac et le navigateur sur ordinateur ne changent pas).
   Le plateau prend toute la hauteur ; le chef adverse est un portrait centré en haut, le joueur en bas à gauche ; la main dépasse du bas de l'écran et se resserre selon le nombre de cartes ;
   plus de nom sur les chefs, pouvoirs et serviteurs (appui long = aperçu) ; la colonne de droite n'a plus de fond : pastille du tour, « End turn » ovale, « Surrender » dessous.
   Doublement des classes (.game.game) : cards.css est chargé après ce fichier et ses règles de cartes ont la même spécificité.
   ====================================================================================================== */
@media (pointer:coarse) and (max-height:560px){
  .game.game{--rw:max(78px,calc(var(--u)*19));--cx:calc(var(--sl) + (100% - var(--sl) - var(--sr) - var(--rw))/2);overflow:hidden;
    grid-template-columns:1fr var(--rw);grid-template-rows:calc((100% - var(--u)*40.4)/2 + var(--u)*12.8) 1fr}
  /* colonne de droite : pas de barre noire */
  .game.game>.rail.rail{grid-column:2;grid-row:1/3;background:none!important;background-image:none!important;border:0;box-shadow:none;padding:2px;gap:7px;justify-content:center}
  .rail .turninfo{background:rgba(8,10,14,.74);border:1px solid color-mix(in srgb,var(--c) 55%,#000);border-radius:999px;padding:3px 6px;white-space:nowrap;text-align:center;font-size:10px;line-height:1.2;color:#d8d4c8}
  .rail .turninfo b{display:block;font-size:11px;color:#f1ecdf}
  .rail.nb #end{border-radius:999px;width:100%;min-height:46px;letter-spacing:0;overflow:visible;font-size:11px;padding:0 2px;border:2px solid color-mix(in srgb,var(--c) 40%,#f0d68a);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6)}
  .rail.nb #end:disabled{border-color:#3b3946;box-shadow:none}
  .rail #concede{width:100%;border-radius:999px;background:rgba(8,10,14,.6);border:1px solid rgba(255,255,255,.22);font-size:11px;padding:0 2px}
  /* plateaux : les chefs ne sont plus dans la grille, leurs rangées sont réservées en haut et en bas */
  .game.game>.zone.board{grid-column:1}.game.game>.zone.board.opp{grid-row:1;padding-top:calc(var(--u)*12.8)}.game.game>.zone.board.mine{grid-row:2;padding-bottom:calc(var(--u)*27.6)}
  .game.game>.zone.board:has(.traps){padding-left:calc(var(--u)*20.5)}.game.game>.zone.board.opp .traps{top:calc(50% + var(--u)*6.4)}.game.game>.zone.board.mine .traps{top:calc(50% - var(--u)*13.8)}
  .game.game .board .min.cf.cf{width:min(calc(var(--u)*19.4),calc((100vw - var(--sl) - var(--sr) - var(--rw) - var(--u)*4 - 30px)/7))}
  .game.game .board:has(.traps) .min.cf.cf{width:min(calc(var(--u)*19.4),calc((100vw - var(--sl) - var(--sr) - var(--rw) - var(--u)*24.5 - 30px)/7))}
  .game.game .board .min.cf.cf .nm{display:none}
  /* chefs : petits portraits sans nom */
  .game.game>.zone.herobar,.herobar .hb-l{display:contents}
  .herobar .hero .nm,.herobar .power .pn{display:none}
  .herobar .hero{position:absolute;width:var(--hw);height:var(--hh);margin:0;transform:none;z-index:3}
  .herobar .power{margin:0!important;transform:none!important;width:max(44px,calc(var(--u)*11));height:max(44px,calc(var(--u)*11))}.herobar .pw{position:absolute;display:block;z-index:3}
  .herobar .hb-r{display:flex;flex-direction:column;align-items:flex-start;gap:1px;position:absolute;height:auto;z-index:3}.herobar .hb-r .stat{align-items:flex-start;gap:0;font-size:10px;line-height:1.15}.herobar .gem{width:5px;height:8px}.herobar .gems{gap:1.5px}
  .herobar .weapon .wn{display:none}.herobar .weapon{padding:2px 6px;font-size:10px}
  .herobar[data-side="op"] .hero{top:calc(var(--u)*.8);left:calc(var(--cx) - var(--hw)/2)}
  .herobar[data-side="op"] .pw{top:calc(var(--u)*.8);left:calc(var(--cx) - var(--hw)/2 - var(--u)*1.2 - max(44px,calc(var(--u)*11)))}
  .herobar[data-side="op"] .hb-r{top:calc(var(--u)*.8);left:calc(var(--cx) + var(--hw)/2 + var(--u)*1.4)}
  .herobar[data-side="op"] .ophand{position:absolute;left:calc(var(--sl) + var(--u)*1.5);top:calc(var(--u)*.8);margin:0}
  .ophand .back{width:calc(var(--u)*4.6)!important;height:calc(var(--u)*6.4)!important;margin-left:calc(var(--u)*-2.8)!important}.ophand .back:first-child{margin-left:0!important}
  .herobar[data-side="me"] .hero{bottom:calc(var(--u)*11.5 + var(--sb)*.5);left:calc(var(--sl) + var(--u)*1.5)}
  .herobar[data-side="me"] .pw{bottom:calc(var(--u)*11.5 + var(--sb)*.5);left:calc(var(--sl) + var(--u)*2.7 + var(--hw))}
  .herobar[data-side="me"] .hb-r{bottom:calc(var(--u)*1.2 + var(--sb)*.5);left:calc(var(--sl) + var(--u)*1.5)}
  /* main : plus grande, dépasse du bas ; --n1 = nombre de cartes − 1 (posé par app.js). Les cartes sont inclinées autour de leur bas : leur haut déborde de --ov de chaque côté, on réserve cette place pour ne jamais recouvrir le pouvoir ni la colonne de droite.
     --cw (largeur d'une carte) = 22 u au plus, et au moins 4,5 largeurs de carte doivent tenir dans la zone ; le recouvrement se calcule ensuite pour que toute la main tienne. */
  .game.game{--hw:max(44px,calc(var(--u)*10));--hh:max(48px,calc(var(--u)*11.4));--hl:calc(var(--u)*2.7 + var(--hw) + max(44px,calc(var(--u)*11)) + 6px);--ov:calc(var(--u)*6.6);--cw:min(calc(var(--u)*22),calc((100vw - var(--sl) - var(--sr) - var(--rw) - var(--hl) - var(--ov)*2)/4.5));--ch:calc(var(--cw)*1.3857)}
  .game.game>.zone.hand{grid-column:1;grid-row:2;align-self:end;margin:0 0 calc(var(--ch)*-.12) var(--hl);height:var(--ch);padding:0 var(--ov);display:flex;justify-content:flex-start;align-items:flex-start;position:relative;z-index:4;min-width:0}
  .game.game .hand .card.cf.cf{width:var(--cw);height:var(--ch);flex:none;margin:0 min(calc(var(--u)*-1.4),calc((100% - var(--cw)*(var(--n1) + 1))/(2*var(--n1))))}
  .game.game .hand .card.cf.cf:first-child{margin-left:auto}.game.game .hand .card.cf.cf:last-child{margin-right:auto}
  /* nom : fenêtre de 88 % de la carte (les règles de chaque nation la limitaient à ≈ 76 % : « Withdrawal » mesure 74 px pour 65 px), sur 3 lignes au plus, bas FIXÉ à 60 % de la hauteur (les pastilles, remontées de 15,6 %, occupent 62–84 %, mesuré ; 2 % de jeu pour les cartes inclinées) : la fenêtre grandit vers le HAUT avec le nombre de lignes, jamais sur les pastilles */
  .game.game .hand .card.cf.cf.cf.cf .nm{left:6%;width:88%;top:auto;bottom:40%;height:auto;max-height:36%;align-items:flex-end;justify-content:center;padding:1px 0}.game.game .hand .card.cf.cf.cf.cf .nm span{-webkit-line-clamp:3;line-height:1.05;min-width:0;max-width:100%;text-align:center}
  /* texte de règle : il tombe sous le bord de l'écran (la main dépasse) ; on ne montre pas une ligne coupée, l'appui long affiche la carte entière */
  .game.game .hand .card.cf.cf .tx{display:none}
  /* attaque et vie : remontées pour rester visibles (le bas de la carte sort de l'écran) */
  .game.game .hand .card.cf.cf .bd-attaque,.game.game .hand .card.cf.cf .badge.atk,.game.game .hand .card.cf.cf .bd-vie,.game.game .hand .card.cf.cf .badge.hp{bottom:15.6%}
}


/* 1.16.0 — accueil de la 1.12.4. Le détail (pouvoir du chef, devise et description de la nation) s'affiche à l'appui long / au survol (data-tip).
   .bot regroupe difficulté + Begin : transparent sur ordinateur et tablette (rien ne bouge), sur une ligne sur téléphone. */
.menu .bot{display:contents}
@media (pointer:coarse) and (max-height:560px){
  .menu{gap:6px;padding:6px 12px}
  .menu .logo{font-size:clamp(24px,8vh,34px)}.menu .tag{font-size:11px}.menu .sub{display:none}
  .clans{gap:8px}.clan{width:clamp(96px,14.5vw,132px);min-height:44px;padding:6px 6px 5px;border-radius:10px}
  .clan .ic.fl{width:38px;height:25px;margin:0 auto 3px}.clan h3{font-size:12px;line-height:1.1}.clan .t,.clan p{display:none}.clan .rec{margin-top:2px;font-size:10px;line-height:1.2}
  .leaders{gap:8px}.leader{width:clamp(168px,26vw,214px);min-height:46px;padding:5px 8px;gap:8px;border-radius:10px}
  .leader .mono{width:36px;height:36px;font-size:13px}.leader b{font-size:12px;line-height:1.15}.leader span{font-size:10px;line-height:1.15}.leader em{display:none}.leader .rec{font-size:10px;min-height:0}
  .menu .bot{display:flex;align-items:center;justify-content:center;gap:12px}.lvl{min-height:44px;padding:6px 14px;font-size:12px}.levels{gap:6px}.menu #begin{min-height:44px;padding:8px 26px;font-size:14px}
  .menu .ver-menu{font-size:10px}
}

/* ==================================================================
   1.17.0 · CAMPAGNE « World Conquest » : écran de carte, briefing, récompense. Aucun impact sur l'accueil ni sur la partie rapide.
   ================================================================== */
.menu .dock .campb{border-color:var(--gold);color:var(--gold)}
.camp{position:fixed;inset:0;display:flex;flex-direction:column;background:#0a0c10;color:var(--text);font-family:var(--sans)}
.ctop{display:flex;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*1.2) calc(max(44px,var(--u)*4.2) + var(--u)*4) calc(var(--u)*1.2) calc(var(--u)*2);flex:0 0 auto}
.ctop h1{margin:0;font:700 calc(var(--u)*3.4)/1 var(--serif);letter-spacing:.2em;color:var(--gold);flex:1;text-align:center}
.cstat{display:flex;gap:calc(var(--u)*2);font-size:max(12px,calc(var(--u)*1.5));color:var(--muted);white-space:nowrap}.cstat b{color:var(--gold);font-size:1.2em}
.cstage{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:0 calc(var(--u)*2);container-type:size}
.cmap{position:relative;width:min(100cqw,calc(100cqh * var(--mr,2.24)));height:min(100cqh,calc(100cqw / var(--mr,2.24)));background:#12151b var(--map) var(--mx,50%) var(--my,50%)/var(--mw,100%) var(--mh,100%) no-repeat;border:1px solid rgba(245,197,66,.45);border-radius:calc(var(--u)*1);box-shadow:inset 0 0 0 1px #0008,0 10px 40px #000a;overflow:hidden}
.cmap::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.45));pointer-events:none}
.clines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.clines line{stroke:rgba(245,197,66,.4);stroke-width:.45;stroke-dasharray:1.6 1.2;vector-effect:non-scaling-stroke;stroke-width:2}.clines line.on{stroke:var(--gold);stroke-dasharray:none;stroke-width:3}
.cnode{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;color:var(--text)}
.cnode .cd{display:grid;place-items:center;width:max(44px,calc(var(--u)*5.6));height:max(44px,calc(var(--u)*5.6));border-radius:50%;background:#14110d;border:2px solid var(--gold);box-shadow:0 0 0 3px #000a,0 4px 14px #000c;overflow:hidden}
.cnode .cn{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;background:#0a0c10e6;border:1px solid rgba(255,255,255,.2);font:600 max(11px,calc(var(--u)*1.35)) var(--sans);white-space:nowrap}
.cnode .cn .fl{width:18px;height:12px;display:inline-block;overflow:hidden;border-radius:2px;border:1px solid rgba(255,255,255,.4)}.cnode .fl .flag{width:100%;height:100%;display:block}
.cnode.home .cd .fl{width:100%;height:100%;border-radius:0;display:block}
.cnode.open .cd{background:#3a2a08;color:var(--gold);animation:cpulse 2s ease-in-out infinite}.cnode.open{cursor:pointer}.cnode.held .cd{background:#12301c;border-color:#4ade80;color:#4ade80}.cnode.lock{opacity:.62}.cnode.lock .cd{border-color:#777;color:#999}
.cnode:hover .cd,.cnode:focus-visible .cd{border-color:#fff}.cnode:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
@keyframes cpulse{0%,100%{box-shadow:0 0 0 3px #000a,0 0 6px 1px rgba(245,197,66,.35)}50%{box-shadow:0 0 0 3px #000a,0 0 16px 4px rgba(245,197,66,.6)}}
.cbot{flex:0 0 auto;display:flex;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*1) calc(var(--u)*2) calc(var(--u)*1.4);flex-wrap:wrap;justify-content:space-between}
.cls{display:flex;gap:calc(var(--u)*1)}.cl{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border-radius:99px;background:#14110d;border:1px solid rgba(255,255,255,.2);min-height:44px}.cl[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 10px rgba(245,197,66,.4)}
.cl .mono{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;display:block}.cl .cln{font-size:max(12px,calc(var(--u)*1.4))}
.cwon{margin:0;color:var(--gold);font:700 calc(var(--u)*2.4) var(--serif)}
.cacts{display:flex;gap:calc(var(--u)*1);align-items:center;flex-wrap:wrap}.cacts .small{min-height:44px}
.camp .gear{position:static;order:3}.camp>.gear{position:fixed;right:calc(var(--u)*2);top:calc(var(--u)*1.2);bottom:auto}
.cnode .ns{display:none}
@media (pointer:coarse) and (max-height:460px){.cnode .cn{font-size:10px;padding:1px 6px;gap:0;letter-spacing:0}.cnode .cn .fl{display:none}.cnode .nl{display:none}.cnode .ns{display:inline}.cnode.home .ns{display:none}.cnode.home .nl{display:inline}}   /* 1.17.1 : très petits écrans : étiquettes sans drapeau (le drapeau reste dans le disque / le briefing), pour que les noms ne se chevauchent pas */
.cbrief-bg{z-index:92}
.cbrief{display:flex;gap:calc(var(--u)*3);width:min(calc(var(--u)*100),94vw);max-height:92vh;overflow:auto;padding:calc(var(--u)*2.4);background:#14110d;border:1px solid var(--gold);border-radius:calc(var(--u)*1.2);box-shadow:0 14px 50px #000d;text-align:left}
.cb-l{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 calc(var(--u)*17);text-align:center}.cb-l .portrait{width:calc(var(--u)*13);height:calc(var(--u)*13);min-width:84px;min-height:84px;border-radius:50%;background-size:cover;background-position:center;border:3px solid var(--gold)}.cb-l b{font:700 max(14px,calc(var(--u)*1.8)) var(--serif)}.cb-l i{font-size:max(11px,calc(var(--u)*1.3));color:var(--muted)}
.cb-lv{margin-top:4px;padding:2px 12px;border-radius:99px;background:#3a1717;color:#ff8a80;border:1px solid #e5534b;font:700 max(11px,calc(var(--u)*1.3)) var(--sans);letter-spacing:.1em;text-transform:uppercase}
.cb-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*1)}.cb-r h3{margin:0;font:700 max(20px,calc(var(--u)*3)) var(--serif);color:var(--gold)}
.cb-r p{margin:0;font-size:max(13px,calc(var(--u)*1.6));line-height:1.4}.cb-story{font-style:italic;color:#d8d4c8}.cb-rule b,.cb-rw b{display:block;color:var(--gold);font-size:max(11px,calc(var(--u)*1.2));letter-spacing:.12em;text-transform:uppercase}
.cb-rw .sg{display:inline-block;margin:2px 6px 2px 0;padding:2px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:#0006;cursor:help}.cb-rw .sg.r-legendary{border-color:var(--gold);color:var(--gold)}
.cb-r .row{display:flex;gap:calc(var(--u)*1.4);align-items:center;margin-top:auto;flex-wrap:wrap}.cb-r .row .small{min-height:44px}
.creward{z-index:94}.cpick .mtag{background:#14301c;color:#4ade80;border-color:#4ade80}.cpick:hover .mtag,.cpick:focus-visible .mtag{background:#4ade80;color:#06210f}
@media (pointer:coarse) and (max-height:560px){
  .ctop{padding:6px 66px 6px 10px;gap:10px}.ctop h1{font-size:clamp(15px,4.4vh,22px);letter-spacing:.14em}.cstat{gap:10px}
  .cstage{padding:0 8px}.cbot{padding:4px 10px 6px;gap:8px}.cn{font-size:11px}
  .cbrief{flex-direction:row;gap:12px;padding:12px}.cb-l{flex-basis:96px}.cb-l .portrait{width:64px;height:64px;min-width:64px;min-height:64px}
  .cb-r p{font-size:12px}.cb-r h3{font-size:18px}.creward .mcard .card.big{width:calc(var(--u)*14);height:calc(var(--u)*19.4)}
  .camp .small,.cbrief .small{font-size:max(12px,calc(var(--u)*1.7));min-height:44px;padding-left:12px;padding-right:12px}.camp .btn,.cbrief .btn{font-size:max(14px,calc(var(--u)*2));min-height:44px;padding:0 18px}.camp .ver-camp{font-size:10px}.cstat{font-size:11px}.cstat b{font-size:13px}
}
.camp .small,.cbrief .small{font-size:max(12px,calc(var(--u)*1.5));min-height:36px;padding-left:12px;padding-right:12px}.camp .btn,.cbrief .btn{font-size:max(14px,calc(var(--u)*1.8))}.camp .ver-camp{font-size:max(10px,calc(var(--u)*1.15))}
.ver-camp{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*.4);pointer-events:none;white-space:nowrap;z-index:1}

/* 1.17.3 : carte visée par un piège : anneau rouge qui pulse, bien visible pendant que la carte du piège est affichée */
.trap-target{outline:max(3px,calc(var(--u)*.35)) solid #ff5a4a;outline-offset:max(3px,calc(var(--u)*.3));border-radius:calc(var(--u)*1);box-shadow:0 0 calc(var(--u)*2) calc(var(--u)*.6) rgba(255,90,74,.85);animation:ttpulse .7s ease-in-out infinite alternate;position:relative;z-index:5}
@keyframes ttpulse{from{box-shadow:0 0 calc(var(--u)*1) calc(var(--u)*.2) rgba(255,90,74,.55)}to{box-shadow:0 0 calc(var(--u)*2.4) calc(var(--u)*.9) rgba(255,90,74,.95)}}
@media (prefers-reduced-motion:reduce){.trap-target{animation:none}}

/* ================================================================ 1.20.1 · ÉCRAN EN LIGNE et FENÊTRES DE COMPTE — refonte responsive
   Principe : une seule échelle, --o, qui suit la LARGEUR et la HAUTEUR de l'écran et reste bornée (jamais sous 12 px de texte, jamais plus de 22 px).
   Un ordinateur garde la taille d'avant ; un téléphone en paysage (667×375 à 932×430) et en portrait utilise la même mise en page sur 1 à 3 colonnes. */
.onl,.acc-modal,.acc-bg{--o:clamp(11px,min(1.5vh,1.05vw),17px)}
.onl{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;overflow:hidden}
.onl-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;gap:calc(var(--o)*1.1);padding:calc(max(var(--st,0px),0px) + var(--o)*2) max(calc(var(--o)*2),var(--sr,0px)) calc(var(--o)*1) max(calc(var(--o)*2),var(--sl,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.onl-body>*{flex:none;max-width:100%}
.onl-t{margin:0;font:700 clamp(18px,calc(var(--o)*2.6),34px)/1.1 var(--serif);letter-spacing:.2em;color:#f6ecd2;text-shadow:0 0 calc(var(--o)*1.6) rgba(212,168,47,.5);text-align:center}
.onl-st{margin:0;font-size:clamp(13px,calc(var(--o)*1.05),16px);color:var(--muted);text-align:center}.onl-st.ok{color:#9fe0a8}.onl-st.bad{color:#ffb4b4}
.onl-me{display:flex;flex-wrap:wrap;gap:calc(var(--o)*.6) calc(var(--o)*1.6);align-items:center;justify-content:center;font-size:clamp(13px,calc(var(--o)*1.05),16px);text-align:center}
.onl-name{display:flex;gap:calc(var(--o)*.7);align-items:center;color:var(--muted)}
.onl-who{display:inline-flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);line-height:1.2}.onl-who b{color:var(--gold);font:700 clamp(16px,calc(var(--o)*1.35),22px) var(--serif)}
.onl-deck{display:inline-flex;align-items:center;gap:calc(var(--o)*.6);color:var(--muted);flex-wrap:wrap;justify-content:center;padding:calc(var(--o)*.35) calc(var(--o)*.9);border:1px solid var(--line);border-radius:99px;background:rgba(8,10,14,.6)}
.onl-deck b{color:var(--text);font-weight:700}.onl-deck .dsep{opacity:.5}
.onl-deck .fl{width:calc(var(--o)*2.1);min-width:20px;height:calc(var(--o)*1.4);min-height:14px;display:inline-block;border:1px solid rgba(255,255,255,.35);border-radius:2px;overflow:hidden}.onl-deck .fl .flag{width:100%;height:100%}
.onl-in{font:600 16px var(--sans);padding:0 calc(var(--o)*1);border-radius:calc(var(--o)*.6);border:1px solid var(--line);background:rgba(8,10,14,.85);color:var(--text);min-height:44px;width:clamp(150px,calc(var(--o)*14),240px);box-sizing:border-box}
.onl-in:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.onl-in.code{width:clamp(110px,calc(var(--o)*9),150px);text-transform:uppercase;letter-spacing:.18em;text-align:center}.onl-in.wide{width:100%}
.onl-err{margin:0;color:#ffb4b4;font-size:clamp(13px,calc(var(--o)*1.05),16px);text-align:center;max-width:min(60ch,100%)}
.onl .btn{padding:0 calc(var(--o)*1.8);min-height:44px;border-radius:calc(var(--o)*.7);font:700 clamp(14px,calc(var(--o)*1.15),19px) var(--serif);letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.onl-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--o)*1.1);width:min(calc(var(--o)*66),100%)}
.onl-opt{display:flex;flex-direction:column;align-items:center;gap:calc(var(--o)*.6);padding:calc(var(--o)*1.1);border-radius:calc(var(--o)*1);border:1px solid var(--line);background:linear-gradient(160deg,rgba(24,28,36,.92),rgba(12,14,19,.92));text-align:center;min-width:0}
.onl-opt h2{margin:0;font:700 clamp(15px,calc(var(--o)*1.3),21px) var(--serif);color:var(--gold)}
.onl-opt p{margin:0;color:var(--muted);font-size:clamp(12px,calc(var(--o)*.95),14px);line-height:1.35;flex:1}
.onl-btns{display:flex;flex-wrap:wrap;gap:calc(var(--o)*.6);align-items:center;justify-content:center;width:100%}
.onl-btns .btn{flex:1 1 auto;min-width:calc(var(--o)*5)}
.onl-room{display:flex;flex-direction:column;align-items:center;gap:calc(var(--o)*.7);text-align:center;width:min(calc(var(--o)*40),100%)}.onl-room h2{margin:0;font:700 clamp(16px,calc(var(--o)*1.5),24px) var(--serif);color:var(--gold)}.onl-room p{margin:0;color:var(--muted);font-size:clamp(12px,calc(var(--o)*1),15px)}
.onl-code{font:700 clamp(28px,calc(var(--o)*4),56px)/1 var(--serif);letter-spacing:.25em;padding:calc(var(--o)*.5) calc(var(--o)*1.8) calc(var(--o)*.5) calc(var(--o)*2.1);border:2px solid var(--gold);border-radius:calc(var(--o)*1);background:rgba(8,10,14,.85);color:#fff6dc;user-select:all}
.acc-note{margin:0;text-align:center;color:#d5d3cb;font-size:clamp(13px,calc(var(--o)*1),15px);padding:calc(var(--o)*.5) calc(var(--o)*1.1);border:1px solid var(--line);border-radius:calc(var(--o)*.7);background:rgba(10,12,16,.82);max-width:min(64ch,100%)}
.acc-note.warn{border-color:var(--gold);color:#fff6dc}.acc-note .small{margin-left:calc(var(--o)*.6)}
/* barre du bas : retour à gauche, le reste à droite ; elle ne cache jamais le contenu (elle fait partie de la colonne) */
.onl-foot{position:static;flex:0 0 auto;display:flex;flex-wrap:wrap;gap:calc(var(--o)*.6);align-items:center;padding:calc(var(--o)*.7) max(calc(var(--o)*2),var(--sr,0px)) max(calc(var(--o)*.9),calc(var(--sb,0px)*.6)) max(calc(var(--o)*2),var(--sl,0px));border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(0deg,rgba(6,8,12,.7),rgba(6,8,12,.2));max-width:none;left:auto;bottom:auto;z-index:6}
.onl-foot .grow{flex:1 1 0}
.onl .small.fb{min-height:44px;font-size:clamp(12px,calc(var(--o)*.95),15px);padding:0 calc(var(--o)*1.2)}

/* ---- fenêtres de compte */
.acc-bg{position:fixed;inset:0;z-index:90;background:rgba(5,7,11,.84);display:flex;align-items:center;justify-content:center;padding:max(var(--st,0px),calc(var(--o)*1)) max(var(--sr,0px),calc(var(--o)*1)) max(calc(var(--sb,0px)*.6),calc(var(--o)*1)) max(var(--sl,0px),calc(var(--o)*1))}
.acc-modal{position:relative;width:min(calc(var(--o)*34),100%);max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--o)*1.5) calc(var(--o)*1.8);border-radius:calc(var(--o)*1.1);border:1px solid rgba(212,168,47,.6);background:linear-gradient(180deg,#1b1810,#0e0c08);box-shadow:0 18px 60px rgba(0,0,0,.8);color:var(--text);text-align:left;box-sizing:border-box}
.acc-modal.wide{width:min(calc(var(--o)*62),100%)}
.acc-modal h2{margin:0 calc(var(--o)*3.4) calc(var(--o)*1) 0;font:700 clamp(18px,calc(var(--o)*1.9),28px)/1.15 var(--serif);color:var(--gold);letter-spacing:.05em}
.acc-modal h3{margin:0 0 calc(var(--o)*.5);font:700 clamp(14px,calc(var(--o)*1.2),18px) var(--serif);color:#f1e3b8}
.acc-x{position:absolute;right:calc(var(--o)*.7);top:calc(var(--o)*.7);width:44px;height:44px;min-width:44px;padding:0;display:grid;place-items:center;font-size:24px;line-height:1}
.acc-modal form{display:flex;flex-direction:column;gap:calc(var(--o)*.8)}
.acc-f{display:flex;flex-direction:column;gap:calc(var(--o)*.35);font-size:clamp(13px,calc(var(--o)*1),15px);color:var(--muted)}.acc-f small{color:#8d8a80;font-size:clamp(12px,calc(var(--o)*.9),13px);line-height:1.3}
.acc-act{display:flex;gap:calc(var(--o)*.7);flex-wrap:wrap;align-items:center}.acc-act .btn{flex:1 1 auto;min-width:calc(var(--o)*8)}
.acc-help{margin:0 0 calc(var(--o)*.7);color:var(--muted);font-size:clamp(13px,calc(var(--o)*1),15px);line-height:1.4}.acc-info{margin:0;color:#9fe0a8;font-size:clamp(13px,calc(var(--o)*1),15px)}
.acc-links{display:flex;gap:calc(var(--o)*1) calc(var(--o)*1.4);flex-wrap:wrap;justify-content:space-between;margin:calc(var(--o)*.9) 0 0;font-size:clamp(13px,calc(var(--o)*1),15px);color:var(--muted)}
.acc-modal .link{background:none;border:0;padding:0 2px;min-height:44px;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit}
.acc-modal .small{min-height:44px;font-size:clamp(13px,calc(var(--o)*.95),15px);padding:0 calc(var(--o)*1.1)}
.acc-modal button:focus-visible,.acc-modal input:focus-visible,.acc-modal .link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn.bad,.small.bad{border-color:#b55;color:#ffb4b4}
.acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:calc(var(--o)*1.6);align-items:start}
.acc-big{font:700 clamp(20px,calc(var(--o)*2.2),32px)/1.1 var(--serif);color:#fff6dc;overflow-wrap:anywhere}
.acc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:calc(var(--o)*.4) calc(var(--o)*1.6);margin:calc(var(--o)*.7) 0;color:var(--muted);font-size:clamp(12px,calc(var(--o)*.9),13px);justify-content:start}
.acc-stats span{display:flex;flex-direction:column;gap:2px;min-width:0}.acc-stats b{color:var(--gold);font:700 clamp(16px,calc(var(--o)*1.4),22px) var(--serif);white-space:nowrap}.acc-stats small{font-size:11px;opacity:.8}
.acc-ver{margin:0 0 calc(var(--o)*.7);font-size:clamp(13px,calc(var(--o)*1),15px)}.acc-ver.ok{color:#9fe0a8}.acc-ver.bad{color:#ffd68a}.acc-ver .small{margin-left:calc(var(--o)*.6)}
.acc-tools{margin-top:calc(var(--o)*.4)}.acc-tools .small{flex:1 1 auto}
.acc-sub{margin-top:calc(var(--o)*.9);padding-top:calc(var(--o)*.9);border-top:1px solid var(--line)}.acc-sub.danger{border-top-color:#b55}
.hist{list-style:none;margin:0;padding:0;max-height:calc(var(--o)*22);overflow-y:auto;overscroll-behavior:contain}
.hist li{display:grid;grid-template-columns:minmax(3.4em,auto) minmax(0,1fr) minmax(0,1.2fr) auto;gap:calc(var(--o)*.7);padding:calc(var(--o)*.45) 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:clamp(13px,calc(var(--o)*.95),14px);align-items:baseline}
.hist .hd{color:var(--muted)}.hist li.win .hr{color:#9fe0a8}.hist li.loss .hr{color:#ffb4b4}.hist .hp{font-variant-numeric:tabular-nums;color:var(--muted);min-width:2.6em;text-align:right}.hist .ho{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lad-wrap{max-height:calc(var(--o)*26);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:calc(var(--o)*.6)}
.lad{width:100%;border-collapse:collapse;font-size:clamp(13px,calc(var(--o)*.95),15px)}.lad th{position:sticky;top:0;background:#14110a;color:var(--muted);font-weight:600;text-align:left;padding:calc(var(--o)*.5) calc(var(--o)*.7);border-bottom:1px solid var(--line)}
.lad td{padding:calc(var(--o)*.5) calc(var(--o)*.7);border-bottom:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums}.lad tr.me td{color:var(--gold);background:rgba(212,168,47,.08)}.lad td:nth-child(2){overflow-wrap:anywhere}
.acc-me{margin:0 0 calc(var(--o)*.7);color:var(--muted);font-size:clamp(13px,calc(var(--o)*1),15px)}.acc-me b{color:var(--gold)}

/* ---- pendant la partie */
.rail .ovs{max-width:100%;text-align:center;color:var(--muted);font-size:max(11px,calc(var(--u)*1.1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .clock{font:700 max(15px,calc(var(--u)*2.1)) var(--serif);font-variant-numeric:tabular-nums;color:var(--muted)}.rail .clock.mine{color:var(--gold)}
.rail .orank{font-size:max(11px,calc(var(--u)*1.05));letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.onote{position:absolute;left:50%;top:calc(var(--u)*1.2);transform:translateX(-50%);z-index:60;padding:calc(var(--u)*.7) calc(var(--u)*1.6);border-radius:calc(var(--u)*.8);background:rgba(10,12,16,.94);border:1px solid var(--gold);color:#fff6dc;font-size:max(13px,calc(var(--u)*1.5));text-align:center;max-width:min(calc(var(--u)*60),92vw);pointer-events:none}
.over .oreason{margin:0;color:var(--muted);font-size:max(13px,calc(var(--u)*1.4))}.over .orated{margin:0;font:700 max(16px,calc(var(--u)*2.2)) var(--serif);color:var(--muted)}.over .orated.up{color:#9fe0a8}.over .orated.down{color:#ffb4b4}
#mclock{font:700 max(16px,calc(var(--u)*2.4)) var(--serif);font-variant-numeric:tabular-nums;color:var(--gold)}

/* plancher de lisibilité : la règle de base « .small » suit la hauteur de l'écran et tombait à 4 px sur un téléphone ; ici, jamais sous 13 px */
.onl .small,.acc-modal .small,.acc-bg .small{font-size:clamp(13px,calc(var(--o)*.95),15px);padding:0 calc(var(--o)*1.1);min-height:44px;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--o)*.6)}
.acc-ver .small,.acc-note .small{min-height:44px;margin-left:calc(var(--o)*.6)}
.acc-ver{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--o)*.4)}
.acc-note{display:flex;flex-wrap:wrap;gap:calc(var(--o)*.6);align-items:center;justify-content:center}
/* la barre du bas fait partie de la colonne : le menu principal d'origine positionne « .dock » en fixe, on l'annule ICI seulement */
.menu.onl>.dock{position:static;left:auto;bottom:auto;right:auto;transform:none}
.menu.onl{height:100%}
/* ---- adaptations : écrans étroits ou bas */
/* Largeur étroite ET écran haut (fenêtre de navigateur étroite) : les cartes s'empilent. Un téléphone en PAYSAGE (peu de hauteur) les garde côte à côte : c'est la largeur qui est disponible. */
@media (max-width:620px) and (min-height:521px){
  .onl-opts{grid-template-columns:minmax(0,1fr);width:min(calc(var(--o)*34),100%)}
  .onl-opt{text-align:center}
}
@media (max-width:700px){.acc-grid{grid-template-columns:minmax(0,1fr)}}
/* paysage bas : trois cartes compactes — titre, un seul bouton ou deux côte à côte */
@media (max-height:520px) and (min-width:520px){
  .onl-opts{grid-template-columns:repeat(3,minmax(0,1fr));width:min(calc(var(--o)*70),100%);gap:calc(var(--o)*.7)}
  .onl-opt{gap:calc(var(--o)*.5);justify-content:flex-start}
  .onl-btns{flex-wrap:nowrap}.onl-btns .btn{min-width:0;padding:0 calc(var(--o)*.8);flex:1 1 0;font-size:clamp(13px,calc(var(--o)*1),16px)}
  .onl-opt .onl-in.code{flex:1 1 0;min-width:0;width:auto}
}
@media (max-height:520px){
  .onl-body{gap:calc(var(--o)*.7);padding-top:calc(max(var(--st,0px),0px) + var(--o)*1.1)}
  .onl-opt p{display:none}.onl-opt{padding:calc(var(--o)*.8)}.onl-opt h2{font-size:15px}.onl-t{font-size:20px;letter-spacing:.16em}
  .onl-st{display:none}.onl-st.bad,.onl-st:has(+ .onl-me){display:block}
  .acc-modal{padding:calc(var(--o)*1.1) calc(var(--o)*1.4)}.acc-f small,.acc-help{font-size:12px}.acc-modal form{gap:calc(var(--o)*.5)}.acc-modal h2{margin-bottom:calc(var(--o)*.5)}
  .hist{max-height:calc(var(--o)*12)}.lad-wrap{max-height:calc(var(--o)*14)}
}
@media (max-height:520px) and (min-width:700px){.acc-modal:not(.wide) form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--o)*.5) calc(var(--o)*1)}.acc-modal:not(.wide) form .onl-err,.acc-modal:not(.wide) form .acc-info,.acc-modal:not(.wide) form .acc-act{grid-column:1/-1}}
@media (pointer:coarse) and (orientation:portrait){.onl-body{padding-top:calc(max(var(--st,0px),0px) + var(--o)*1.4)}.onl-t{font-size:22px}}

/* ---- 1.20.1 · écrans de partie sur téléphone : lisibilité. Tout est gardé par « pointer:coarse » : l'app Mac et le web sur ordinateur gardent EXACTEMENT leur rendu. */
@media (pointer:coarse) and (max-height:560px){
  .over{gap:max(8px,calc(var(--u)*1.2));padding:var(--st,0px) max(var(--sr,0px),12px) var(--sb,0px) max(var(--sl,0px),12px);box-sizing:border-box}
  .over h2{font-size:clamp(28px,calc(var(--u)*6.2),52px)}
  .over p{font-size:max(13px,calc(var(--u)*1.7))}.over .oreason{font-size:max(13px,calc(var(--u)*1.6))}
  .ostats{gap:max(14px,calc(var(--u)*2.6))}.ost{min-width:max(64px,calc(var(--u)*9))}.ost b{font-size:max(22px,calc(var(--u)*3.6))}.ost span{font-size:max(12px,calc(var(--u)*1.5))}
  .over .row{gap:10px;flex-wrap:wrap;justify-content:center}.over .btn{font-size:max(14px,calc(var(--u)*1.9));min-height:44px;padding:0 max(16px,calc(var(--u)*3))}
  .over .portrait{max-height:34vh}
  #mull h2{font-size:max(18px,calc(var(--u)*3))}#mull .mh{font-size:max(12px,calc(var(--u)*1.6))}#mull .btn{font-size:max(14px,calc(var(--u)*2));min-height:44px}.mtag{font-size:max(10px,calc(var(--u)*1.5))}
  .rail .ovs{font-size:11px;max-width:100%}.rail .clock{font-size:max(14px,calc(var(--u)*2))}.rail .orank{font-size:10px}
  .rail .turninfo{max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
  .onote{top:calc(var(--st,0px) + 6px);font-size:max(12px,calc(var(--u)*1.7));max-width:min(70vw,calc(var(--u)*50))}
}