@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel-latin.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
/* Tout tient dans la fenêtre (ordinateur, tablette, téléphone) : aucun écran n'a besoin de défilement. */
:root {
  --vh: 1dvh; --vw: 1vw; /* 1 % de la fenêtre, réglés par ui.js quand l'interface est zoomée */
  --bg: #0c140e;
  --glass: rgba(14, 20, 16, .8);
  --glass2: rgba(22, 30, 24, .94);
  --line: rgba(190, 210, 170, .18);
  --line2: rgba(242, 193, 78, .38);
  --txt: #f2f3e8;
  --muted: #b9c3ae;
  --gold: #f2c14e;
  --vio: #b48cff;
  --danger: #ff6a6a;
  --ok: #7ee39a;
  --mana: #7fd3ff;
  --sq: 64px;
  --cols: 8; --rows: 8;
  --chip: 40px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--txt);
  font: 18px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* aucun texte sélectionnable dans le jeu */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img, svg { -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: var(--curp); touch-action: manipulation; }
h1, h2, h3, h4 { margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
input:not([type]), input[type=text], select { font: inherit; color: var(--txt); background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; outline: none; }
select option { background: #18221a; }
input:not([type]):focus { border-color: var(--gold); }
kbd { display: inline-block; font: 600 14px/1 system-ui, sans-serif; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: var(--muted); vertical-align: middle; }
@media (hover: none) { kbd { display: none !important; } } /* écrans tactiles : pas de touches */

/* forêt en fond de tous les écrans */
#bgForest { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bgForest canvas { position: absolute; left: 0; top: 0; }
#bgForest::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(8, 12, 9, .25), rgba(5, 8, 6, .72)); }
.screen { display: none; position: relative; z-index: 1; height: calc(100 * var(--vh)); overflow: auto; }
.screen.on { display: block; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }

/* ----- boutons ----- */
.menu-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.big { padding: 11px 28px; border-radius: 12px; border: 0; font-weight: 800; font-size: 18px; color: #1a1206; white-space: nowrap;
  background: linear-gradient(180deg, #ffe08a, var(--gold) 60%, #c8891d); box-shadow: 0 6px 20px rgba(242, 193, 78, .3), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .12s, filter .12s; }
.big:hover { filter: brightness(1.08); transform: translateY(-1px); }
.big:disabled { opacity: .4; cursor: var(--cur); transform: none; }
.big kbd { background: rgba(0, 0, 0, .15); color: #3a2a0a; border-color: rgba(0, 0, 0, .2); }
.ghost { padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); transition: border-color .15s, background .15s; }
.ghost:hover { border-color: var(--gold); background: rgba(242, 193, 78, .08); }
.ghost:disabled { opacity: .35; cursor: var(--cur); }
.ghost.sm { padding: 7px 12px; border-radius: 10px; font-size: 16.5px; }
.ghost.icon { padding: 6px 10px; }
.ghost.off { opacity: .45; }
.danger { border-color: rgba(255, 106, 106, .45) !important; color: #ffb3b3; }

/* ----- titres ----- */
h1 { font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: clamp(40px, min(calc(9 * var(--vw)), calc(9 * var(--vh))), 74px); letter-spacing: .05em; text-align: center; line-height: 1.05;
  background: linear-gradient(180deg, #fff6d6, var(--gold) 55%, #b9822a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); animation: titleGlow 5s ease-in-out infinite; }
@keyframes titleGlow { 50% { filter: drop-shadow(0 4px 22px rgba(242, 193, 78, .35)); } }
.title { font-family: Cinzel, Georgia, serif; font-size: clamp(22px, calc(3.2 * var(--vh)), 30px); text-align: center; color: var(--gold); margin-bottom: 6px; }
.tag { text-align: center; color: var(--muted); margin: 4px 0 6px; }

/* ----- menu : titre et parties au centre, défi du jour dessous ----- */
#menu.on, #newrun.on, #run.on, #pre.on, #duel.on, #ext.on, #story.on, #puzzle.on, #season.on { display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 14px 16px; gap: 14px; }
.menu-main { width: 100%; max-width: 760px; padding: 20px 24px; }
.hello { text-align: center; margin: 0 0 12px; color: var(--muted); }
.hello b { color: var(--gold); }
#slots { display: grid; gap: 8px; }
.slot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.slot .num { font-family: Cinzel, Georgia, serif; font-size: 26px; color: var(--gold); width: 26px; text-align: center; }
.slot .inf { flex: 1; min-width: 0; }
.slot .inf b { font-size: 18px; }
.slot .inf small { display: block; color: var(--muted); font-size: 15.5px; }
.slot.empty { border-style: dashed; }
.slot.empty .inf b { color: var(--muted); font-weight: 600; }
.slot .big { padding: 9px 20px; font-size: 17px; }
.daily { width: 100%; max-width: 760px; padding: 14px 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; }
.daily h2 { font-family: Cinzel, Georgia, serif; font-size: 21px; color: var(--gold); }
.daily small { display: block; color: var(--muted); font-size: 15.5px; }
.daily .dgoal { display: block; font-size: 18px; margin: 2px 0; }
.daily .dmid { text-align: center; }
.daily .pts { font-size: 40px; font-weight: 900; color: var(--gold); line-height: 1; }
.daily .dright { text-align: center; max-width: 230px; }
.daily .dright small { margin-top: 6px; }

/* ----- nouvelle partie ----- */
.panel-mid { width: 100%; max-width: 820px; padding: 20px 24px; }
.panel-mid.wide { max-width: 1120px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.lvl { padding: 18px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); text-align: center; transition: transform .15s, border-color .15s; }
.lvl:hover { transform: translateY(-3px); border-color: var(--gold); }
.lvl .ic { font-size: 38px; display: block; margin-bottom: 6px; }
.lvl b { display: block; font-size: 19px; }
.lvl small { color: var(--muted); font-size: 15.5px; }

/* ----- écran de partie ----- */
.runtop { text-align: center; }
.runhead { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.runhead b { color: var(--txt); font-size: 22px; }
.runhead .w b { color: var(--ok); } .runhead .l b { color: var(--danger); }
.runbody { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; margin-top: 10px; }
.runcol h4 { margin: 8px 0 5px; font-size: 15.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.runcol .row { display: flex; flex-wrap: wrap; gap: 5px; }
.meter { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6ad08a, var(--gold)); border-radius: 6px; }
.trk { display: grid; grid-template-columns: 1fr 110px 44px; align-items: center; gap: 8px; font-size: 15.5px; margin: 4px 0; }
.trk small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.trk.done { display: block; color: var(--ok); }
.exps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.exp { display: flex; align-items: center; gap: 6px; font-size: 15.5px; color: var(--muted); min-width: 0; }
.exp .tk { width: 28px; height: 28px; flex: none; filter: grayscale(.9) brightness(.7); }
.exp.done { color: var(--ok); }
.exp.done .tk { filter: none; }
.exp > span { line-height: 1.15; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
.choices.three { grid-template-columns: 1fr 1fr 1fr; }
.choice.asc { border-color: rgba(127, 211, 255, .6); background: linear-gradient(180deg, rgba(127, 211, 255, .18), rgba(255, 255, 255, .02)); }
.fards { margin: 0; padding-left: 18px; font-size: 16px; color: #ffc0c0; }
.newc { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.newc .big small { font-weight: 600; opacity: .75; }
.choices.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.choice { position: relative; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(242, 193, 78, .16), rgba(255, 255, 255, .02)); text-align: center; transition: transform .15s, box-shadow .15s; }
.choice:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(242, 193, 78, .2); }
.choice.hard { border-color: rgba(255, 106, 106, .5); background: linear-gradient(180deg, rgba(255, 106, 106, .18), rgba(255, 255, 255, .02)); }
.choice.boss { border-color: rgba(255, 90, 60, .7); background: linear-gradient(180deg, rgba(160, 30, 20, .4), rgba(255, 255, 255, .02)); }
.choice .ic { font-size: 30px; display: block; }
.choice .bossic { display: block; width: 74px; height: 74px; margin: 0 auto; }
.choice b { display: block; font-size: 19px; margin: 2px 0; }
.choice small { display: block; color: var(--muted); font-size: 15.5px; margin-top: 3px; }
.choice small.gold { color: var(--gold); }
.choice kbd { position: absolute; top: 10px; right: 10px; }

/* ----- avant l'affrontement ----- */
.seg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.seg button { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.seg button.sel { background: rgba(242, 193, 78, .2); border-color: var(--gold); }
.evcard { border: 1px solid var(--gold); border-radius: 14px; padding: 12px 16px; margin: 10px 0; background: rgba(242, 193, 78, .08); }
.evcard b { font-family: Cinzel, Georgia, serif; font-size: 20px; color: var(--gold); display: block; margin-bottom: 4px; }
.evcard.hardc { border-color: rgba(255, 106, 106, .6); background: rgba(255, 106, 106, .08); }
.evcard.bossc { display: flex; gap: 14px; align-items: center; text-align: left; }
.evcard.bossc .tk { width: 90px; height: 90px; flex: none; }
.opt { margin: 10px 0; }
.opt h3 { font-size: 15.5px; color: var(--muted); margin-bottom: 8px; font-weight: 600; text-align: center; }

/* ----- déblocages ----- */
.evos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.evo { position: relative; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line2); text-align: center;
  background: linear-gradient(180deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); transition: transform .18s, box-shadow .18s; animation: evoIn .45s backwards; }
.evo:nth-child(2) { animation-delay: .08s; } .evo:nth-child(3) { animation-delay: .16s; } .evo:nth-child(4) { animation-delay: .24s; }
@keyframes evoIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.evo:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(242, 193, 78, .25); }
.evo .tk { width: 80px; height: 80px; margin: 0 auto 6px; }
.evo b { display: block; font-size: 18px; margin-bottom: 2px; }
.evo .kind { font-size: 14.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.evo p { font-size: 15.5px; color: var(--muted); margin: 4px 0 0; }

/* =====================================================================
   Affrontement
   ===================================================================== */
#game.on { display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: rgba(8, 12, 9, .8); backdrop-filter: blur(6px); flex: none; min-width: 0; }
.grow { flex: 1; }
.badge { font-size: 15.5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--gold); color: var(--gold); cursor: var(--cur); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.badge.map, .badge.run { border-color: var(--line); color: var(--muted); }
.badge.goal { border-color: #ff9a5a; color: #ffb88a; }
.dockb { display: none; }
.dockb.glow { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 193, 78, .45); }
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(260px, 340px); gap: 10px; padding: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.left { justify-content: space-between; }
.mid { align-items: center; gap: 6px; }
#boardBox { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.card { padding: 10px 12px; border-radius: 14px; min-height: 0; }
.card h3 { font-size: 15.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.sheetx { display: none; }
#poolCard { flex: 0 1 auto; overflow: hidden; display: flex; flex-direction: column; }
#poolCard.flash { animation: cardFlash .7s; }
@keyframes cardFlash { 40% { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(242, 193, 78, .6); } }
#infoCard { flex: none; font-size: 16px; }
#infoCard:empty { display: none; }
.logcard { flex: 1 1 80px; display: flex; flex-direction: column; overflow: hidden; }

/* panneaux joueurs */
.pp { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; position: relative; transition: box-shadow .25s; backdrop-filter: blur(6px); min-height: 0; overflow: hidden; }
.pp.active { box-shadow: 0 0 0 2px var(--pc), 0 0 26px -6px var(--pc); }
.pp.p0 { --pc: var(--gold); }
.pp.p1 { --pc: var(--vio); }
.pp .who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; min-width: 0; }
.pp .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pp .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc); flex: none; }
.pp .thinking { font-size: 15.5px; color: var(--muted); font-weight: 500; animation: pulse 1s infinite; white-space: nowrap; }
.pp .crys { margin-left: auto; color: var(--mana); font-weight: 900; font-size: 19px; white-space: nowrap; }
.pips { display: flex; align-items: center; gap: 4px; font-size: 15.5px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.pips > span:not(.pip) { margin-left: 4px; }
.pips > span:first-child { margin-left: 0; }
.pip { width: 15px; height: 17px; clip-path: polygon(50% 0, 100% 18%, 92% 65%, 50% 100%, 8% 65%, 0 18%); background: rgba(255, 255, 255, .2); }
.pip.lost { background: var(--danger); }
.pip.god { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--pc); }
.pip.god.dead { background: var(--danger); }
.pp .fx { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.pp .fx span { font-size: 15.5px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 106, 106, .16); color: #ffc0c0; }
.pp .fx span.good { background: rgba(126, 227, 154, .14); color: #b8f5cc; }
.pp .fx span.info { background: rgba(127, 211, 255, .12); color: #c4ebff; }
.pp .resv { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; min-height: var(--chip); align-items: center; }
.pp .resv .muted { font-size: 15.5px; }

/* jetons et puces */
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); font-size: 16.5px; transition: border-color .12s, transform .12s; }
.chip.ic { padding: 2px; }
.chip.click { cursor: var(--curp); }
.chip.click:hover { border-color: var(--gold); transform: translateY(-1px); }
.chip.sel { border-color: var(--gold); background: rgba(242, 193, 78, .2); box-shadow: 0 0 10px rgba(242, 193, 78, .5); }
.chip.off { opacity: .4; cursor: var(--cur); }
.chip.locked { opacity: .55; padding: 6px 10px; font-size: 15.5px; }
.chip .tk { width: var(--chip); height: var(--chip); }
.runcol .chip .tk { width: 36px; height: 36px; }
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip .cnt { position: absolute; right: -4px; bottom: -4px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; background: #11160f; border: 1px solid var(--line2); font-size: 14.5px; font-weight: 800; line-height: 17px; text-align: center; }
.tk { display: block; width: 100%; height: 100%; overflow: visible; }
#pool { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#pool .grp { font-size: 14.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
#pool .row { display: flex; flex-wrap: wrap; gap: 6px; }
.facedown { display: flex; align-items: center; gap: 10px; }

/* les créatures sont vivantes : elles respirent et clignent des yeux */
.crit { transform-box: fill-box; transform-origin: 50% 85%; animation: breathe 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.crit .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.3s infinite; animation-delay: var(--d, 0s); }
@keyframes breathe { 50% { transform: translateY(-1.6px) scale(1.025, 1.04); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
.chip .crit, .chip .crit .eye, .exp .crit, .exp .crit .eye, .diag .crit, .diag .crit .eye, .opts .crit, .opts .crit .eye { animation: none; }
.sq.selp .crit { animation-duration: 1.2s; }
body.anim-off .crit, body.anim-off .crit .eye { animation: none; }

/* ----- terrain et plateau ----- */
.turnline { text-align: center; font-weight: 800; min-height: 24px; font-size: 18px; text-shadow: 0 2px 6px #000; flex: none; }
.turnline .p0 { color: var(--gold); }
.turnline .p1 { color: var(--vio); }
#terrain { position: relative; border-radius: 22px; overflow: hidden; flex: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
#terrain .decor-back { z-index: 0; }
#terrain .decor-anim { z-index: 1; pointer-events: none; }
#terrain canvas { position: absolute; left: 0; top: 0; }
#board { position: absolute; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols), var(--sq)); grid-template-rows: repeat(var(--rows), var(--sq)); touch-action: manipulation; }
#fx { position: absolute; z-index: 5; pointer-events: none; }
#terrain.shake { animation: shake .5s; }
@keyframes shake { 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 4px); } 80% { transform: translate(-2px, 1px); } }

.sq { position: relative; display: flex; align-items: center; justify-content: center; cursor: var(--curp); margin: 1.5px; border-radius: 5px; }
.sq.l { background: linear-gradient(145deg, var(--l1, #eadcb8), var(--l2, #cdb98e) 70%, var(--l3, #bba67a)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(80, 60, 30, .22), 0 2px 3px rgba(0, 0, 0, .35); }
.sq.d { background: linear-gradient(145deg, var(--d1, #85705a), var(--d2, #67533f) 70%, var(--d3, #574535)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .35); }
.sq.l::before, .sq.d::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35;
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .12) 0 6%, transparent 7%), radial-gradient(circle at 70% 65%, rgba(0, 0, 0, .1) 0 5%, transparent 6%), radial-gradient(circle at 55% 20%, rgba(255, 255, 255, .15) 0 4%, transparent 5%); }
.sq.void { background: none; box-shadow: none; cursor: var(--cur); }
.sq.void::before { display: none; }
.sq.pit { background: radial-gradient(circle at 50% 45%, #050304 0 45%, #1c140e 75%, #3a2c1e 100%); box-shadow: inset 0 0 12px #000; cursor: var(--cur); }
.sq.pit::before { display: none; }
.sq .crd { position: absolute; font-size: calc(var(--sq) * .17); font-weight: 800; opacity: .55; pointer-events: none; line-height: 1; }
.sq .crd.f { right: 3px; bottom: 2px; }
.sq .crd.r { left: 3px; top: 2px; }
.sq.l .crd { color: #5a4433; } .sq.d .crd { color: #e8d8b8; }
/* zones de placement : bien visibles (bord coloré + lueur à l'intérieur), même sur une carte inconnue */
.sq.zone0 { outline: 2px solid rgba(242, 193, 78, .85); outline-offset: -3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 calc(var(--sq) * .32) rgba(242, 193, 78, .75), 0 2px 3px rgba(0, 0, 0, .35); }
.sq.zone1 { outline: 2px solid rgba(190, 150, 255, .85); outline-offset: -3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 calc(var(--sq) * .32) rgba(180, 140, 255, .75), 0 2px 3px rgba(0, 0, 0, .35); }
.sq.home0.showhome::after, .sq.home1.showhome::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: pulse 1.2s ease-in-out infinite; }
.sq.home0.showhome::after { background: rgba(242, 193, 78, .24); }
.sq.home1.showhome::after { background: rgba(180, 140, 255, .24); }
@keyframes pulse { 50% { opacity: .45; } }
.sq .pc { width: 90%; height: 90%; position: relative; z-index: 2; transition: transform .15s; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.sq .pc.S { width: 76%; height: 76%; }
.sq .pc.B { width: 112%; height: 112%; z-index: 3; filter: drop-shadow(0 0 8px rgba(255, 60, 30, .7)) drop-shadow(0 5px 4px rgba(0, 0, 0, .6)); }
.sq .hp { position: absolute; z-index: 4; left: 50%; top: -8px; transform: translateX(-50%); font-size: calc(var(--sq) * .2); line-height: 1; color: #ff4a5a; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; pointer-events: none; }
.sq .hp span { color: #6a4040; }
@media (hover: hover) { .sq:hover .pc { transform: translateY(-3px) scale(1.04); } }
.sq.selp .pc { animation: lift 1s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .8)) drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
@keyframes lift { 50% { transform: translateY(-5px) scale(1.07); } }
.sq.wall { background: linear-gradient(145deg, #3c4a2a, #26301b); }
.sq.wall .bramble { width: 92%; height: 92%; }
.sq.last { box-shadow: inset 0 0 0 3px rgba(127, 211, 255, .7), 0 2px 3px rgba(0, 0, 0, .35); }
.sq.decl { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); }
.sq.blessed::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, transparent 52%, rgba(255, 240, 160, .6) 60%, transparent 70%); animation: halo 1.8s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.08); opacity: .7; } }
.sq .mk { position: absolute; z-index: 3; pointer-events: none; }
.sq.tgt-move .mk { width: 30%; height: 30%; border-radius: 50%; background: rgba(60, 220, 130, .85); box-shadow: 0 0 10px rgba(60, 220, 130, .8); animation: pulse 1.1s infinite; }
.sq.tgt-cap .mk { inset: 5%; border-radius: 50%; border: 4px solid rgba(255, 70, 90, .95); box-shadow: 0 0 12px rgba(255, 70, 90, .7); animation: pulse 1.1s infinite; }
.sq.tgt-ally .mk { inset: 7%; border-radius: 30%; border: 3px dashed rgba(127, 211, 255, .95); }
.sq.tgt-place .mk { width: 36%; height: 36%; border-radius: 30%; background: rgba(242, 193, 78, .85); box-shadow: 0 0 10px rgba(242, 193, 78, .7); }
.sq.tgt-place.free .mk { background: rgba(126, 227, 154, .9); }
.sq.path { box-shadow: inset 0 0 0 3px rgba(242, 193, 78, .95); }
.sq.zone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 70, 90, .38); pointer-events: none; z-index: 4; }
.sq .specic { position: absolute; width: 34%; height: 34%; right: 4%; bottom: 4%; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(127, 211, 255, .6)); }
.sq.spec2 .specic { width: 56%; height: 56%; right: -6%; bottom: -8%; opacity: .9; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.sq.spec1 { box-shadow: inset 0 0 14px rgba(127, 211, 255, .55); }
.sq.hill::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; border: 2px dashed rgba(255, 220, 120, .8); pointer-events: none; z-index: 1; }

/* effets (calque #fx) */
.fxe { position: absolute; pointer-events: none; }
.ghost-pc { animation: die .75s ease-in forwards; filter: drop-shadow(0 0 10px #ff4040); }
@keyframes die { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(.2) rotate(40deg); opacity: 0; } }
.spark { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff6c0, #ff8a3d 60%, transparent 70%); animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.ring { border-radius: 50%; border: 3px solid var(--rc, #fff); animation: ring .6s ease-out forwards; }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.dust { border-radius: 50%; background: radial-gradient(circle, rgba(220, 200, 160, .55), transparent 65%); animation: dust .55s ease-out forwards; }
@keyframes dust { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.bolt { animation: bolt .6s ease-out forwards; filter: drop-shadow(0 0 8px #bfe6ff) drop-shadow(0 0 16px #6ab8ff); }
@keyframes bolt { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: 1; } 100% { opacity: 0; } }
.flash { border-radius: 6px; background: rgba(200, 230, 255, .55); animation: flash .5s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
.crack { border-radius: 6px; background: rgba(90, 50, 20, .55); box-shadow: inset 0 0 14px rgba(0, 0, 0, .8); animation: flash .9s ease-out forwards; }
.swirl { border-radius: 50%; border: 3px dashed #b48cff; animation: swirl .7s ease-out forwards; }
@keyframes swirl { from { transform: rotate(0) scale(.3); opacity: 1; } to { transform: rotate(270deg) scale(1.3); opacity: 0; } }
.floattxt { font-weight: 900; font-size: 19px; text-shadow: 0 2px 4px #000; animation: floatup 1.1s ease-out forwards; white-space: nowrap; }
@keyframes floatup { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -40px); opacity: 0; } }
.arrow { height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff2c0); transform-origin: 0 50%; box-shadow: 0 0 8px #ffe08a; animation: flash .45s ease-in forwards; }
.flame { border-radius: 40%; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 220, 120, .9), rgba(255, 110, 30, .85) 60%, rgba(200, 30, 10, 0)); filter: blur(1px) drop-shadow(0 0 10px #ff6a20); animation: flash .8s ease-in forwards; }

.hint { text-align: center; color: var(--muted); min-height: 22px; max-width: 760px; margin: 0 auto; text-shadow: 0 1px 3px #000; flex: none; font-size: 17px; }
.hint b { color: var(--txt); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 40px; max-width: 800px; margin: 0 auto; flex: none; }
.opts button { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass2); display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.opts button:hover { border-color: var(--gold); }
.opts button.main { background: linear-gradient(180deg, rgba(242, 193, 78, .38), rgba(242, 193, 78, .14)); border-color: var(--gold); }
.opts button.warn { border-color: var(--danger); }
.opts .tk { width: 26px; height: 26px; }
.opts kbd { margin-left: 2px; }

/* infos */
#infoCard .ihead { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
#infoCard .ihead .tk { width: 60px; height: 60px; flex: none; }
#infoCard .iname { font-weight: 800; font-size: 1.125em; }
#infoCard .icat { font-size: .97em; color: var(--muted); }
#infoCard .icost { color: var(--mana); font-weight: 700; }
#infoCard .idesc { font-size: 1.03em; }
.specline { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: .97em; color: var(--muted); }
.specline .specic { width: 28px; height: 28px; flex: none; }
#log { margin: 0; padding: 0; list-style: none; overflow: hidden; font-size: 15.5px; color: var(--muted); flex: 1; min-height: 0; }
#log li { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
#log li:first-child { color: var(--txt); }
#log li.p0 b { color: var(--gold); }
#log li.p1 b { color: var(--vio); }
#log li.sys { color: #c4ebff; }

/* fenêtres */
.modal { position: fixed; inset: 0; background: rgba(3, 5, 4, .66); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 50; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.mbox { background: rgba(16, 23, 18, .97); padding: 20px 22px; max-width: 520px; width: 100%; max-height: calc(calc(100 * var(--vh)) - 24px); overflow: auto; position: relative; text-align: center; animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.mbox.wide { max-width: 980px; }
.mbox .x { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 30px; color: var(--muted); line-height: 1; }
#endTitle { font-family: Cinzel, Georgia, serif; font-size: 36px; }
#endWhy { font-size: 18px; }
#endScore { color: var(--gold); font-weight: 700; }
#endScore:empty { display: none; }
.interp { font-size: 16.5px; color: var(--muted); border-left: 3px solid var(--vio); padding-left: 10px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--glass2); border: 1px solid var(--gold); padding: 10px 18px; border-radius: 12px; z-index: 60; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(calc(100 * var(--vw)) - 32px); text-align: center; font-size: 17px; }

/* ----- codex : des pages au lieu du défilement ----- */
.codex { text-align: left; height: calc(calc(100 * var(--vh)) - 24px); max-height: 860px; display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 4px 0 10px; flex: none; }
.tabs button { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); font-size: 16.5px; }
.tabs button.sel { background: rgba(242, 193, 78, .22); border-color: var(--gold); color: var(--gold); }
#codexBody, .pbody { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.cpage { display: flex; gap: 10px; align-items: flex-start; }
.ccol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pager { flex: none; display: flex; gap: 14px; justify-content: center; align-items: center; padding-top: 8px; color: var(--muted); }
.pager { min-height: 38px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.cgrid.text { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.cb[hidden] { display: none; }
.ccard { display: flex; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.ccard > .tk { width: 62px; height: 62px; flex: none; }
.ccard .cic { font-size: 30px; flex: none; width: 40px; text-align: center; }
.ccard .cic .specic { width: 40px; height: 40px; }
.ccard .txt { flex: 1; min-width: 0; }
.ccard b { font-size: 18px; }
.ccard .cost { color: var(--mana); font-weight: 700; font-size: 15.5px; }
.ccard p { margin: 3px 0 0; font-size: 15.5px; color: var(--muted); }
.ccard .tag2 { display: inline-block; font-size: 14.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); margin-left: 4px; }
.ccard .tag2.on { border-color: var(--ok); color: var(--ok); }
.ccard .tag2.gold { border-color: var(--gold); color: var(--gold); }
.tblock { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 16.5px; }
.tblock h3 { color: var(--gold); font-size: 18px; margin-bottom: 4px; }
.tblock p { margin: 4px 0; }
.tblock ul { margin: 4px 0; padding-left: 20px; }
.tblock li { margin: 3px 0; }
.tblock li.ok { color: var(--ok); }
.diag { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; width: 98px; flex: none; align-self: center; }
.diag i { aspect-ratio: 1; border-radius: 2px; background: #6c5a46; position: relative; }
.diag i.l { background: #cbb98e; }
.diag i.reach { background: #3cc47a; } .diag i.reach2 { background: #2b8a58; }
.diag i.hit { background: #e04a5a; } .diag i.zone { background: #ff8a5a; }
.diag i.ally { background: #7fb8e0; }
.diag i .tk { position: absolute; inset: -20%; width: 140%; height: 140%; }
.diag i b { position: absolute; inset: 25%; border-radius: 50%; }
.diag i b.en { background: var(--vio); } .diag i b.al { background: var(--gold); }
.mapprev { display: grid; gap: 1px; flex: none; align-self: center; }
.mapprev i { aspect-ratio: 1; border-radius: 1px; background: #a89470; }
.mapprev i.v { background: transparent; }
.mapprev i.z0 { background: var(--gold); } .mapprev i.z1 { background: var(--vio); }
.mapprev i.s1 { background: #7fd3ff; } .mapprev i.s2 { background: #4f9440; }
.themeprev { position: relative; width: 100%; height: 110px; border-radius: 10px; overflow: hidden; margin-top: 6px; }
.themeprev canvas { position: absolute; left: 0; top: 0; }
.keys { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.keys td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.keys td:first-child { width: 150px; }

/* ----- paramètres ----- */
.settings { text-align: left; max-width: 620px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.setrow:last-child { border-bottom: 0; }
.setrow .lab b { display: block; }
.setrow .lab small { color: var(--muted); }
.setrow input[type=range] { width: 140px; accent-color: var(--gold); vertical-align: middle; }
.setrow .seg { justify-content: flex-end; }
.setrow .seg button { padding: 5px 10px; font-size: 15.5px; }

/* ----- tutoriel ----- */
.tuto { max-width: 600px; text-align: center; }
.tutostep { color: var(--muted); font-size: 15.5px; }
.tutotxt { text-align: left; margin: 8px 0; font-size: 18px; }
.tutotxt input { width: 100%; }
.tutoic { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.tutoic .tk { width: 70px; height: 70px; }

/* réglages d'affichage */
body.anim-off #fx { display: none; }
body.anim-fast .fxe { animation-duration: .35s !important; }
body.no-coords .crd { display: none; }

/* =====================================================================
   Écrans moyens : 2 colonnes (joueurs | carte), la réserve à droite reste
   ===================================================================== */
@media (min-width: 900px) and (max-width: 1250px) and (min-aspect-ratio: 1/1) {
  .layout { grid-template-columns: minmax(180px, 215px) minmax(0, 1fr) minmax(205px, 250px); gap: 8px; padding: 8px; }
  body { font-size: 17px; }
  :root { --chip: 36px; }
  .badge.map { display: none; }
}

/* =====================================================================
   Tablette debout et téléphone : la carte prend toute la place,
   la réserve, les infos et le journal s'ouvrent en panneau (boutons du haut)
   ===================================================================== */
@media (max-width: 899px), (max-aspect-ratio: 1/1), (max-height: 560px) {
  body { font-size: 17px; }
  .bar { padding: 5px 6px; gap: 4px; }
  .bar .lbl { display: none; }
  .badge.map, .badge.run { display: none; }
  .badge { font-size: 15.5px; padding: 3px 8px; max-width: calc(30 * var(--vw)); }
  .dockb { display: inline-flex; align-items: center; gap: 4px; }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .left { display: contents; }
  #pp1 { grid-row: 1; } .mid { grid-row: 2; } #pp0 { grid-row: 3; }
  .pp { padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .pp .who { font-size: 17px; flex: 1 1 auto; }
  .pp .pips { margin-top: 0; }
  .pp .fx { margin-top: 0; }
  .pp .resv { margin-top: 0; width: 100%; min-height: 0; }
  .pp .resv .muted { display: none; }
  .hint { font-size: 16px; }
  .opts button { font-size: 16.5px; padding: 6px 10px; }
  .turnline { font-size: 17px; min-height: 20px; }
  .right { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: calc(62 * var(--vh)); padding: 12px; gap: 8px;
    background: #141c16; border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
    transform: translateY(105%); transition: transform .25s ease-out; }
  body[data-sheet="pool"] .right, body[data-sheet="info"] .right, body[data-sheet="log"] .right { transform: none; }
  .right > .card { display: none; background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0 4px; }
  body[data-sheet="pool"] #poolCard, body[data-sheet="info"] #infoCard, body[data-sheet="log"] .logcard { display: flex; flex-direction: column; flex: 1 1 auto; }
  body[data-sheet="info"] #infoCard { display: block; }
  .logcard { min-height: calc(30 * var(--vh)); }
  .sheetx { display: block; position: absolute; top: 4px; right: 10px; border: 0; background: none; font-size: 30px; color: var(--muted); z-index: 2; }
  :root { --chip: 40px; }
  .pp .chip .tk { width: 32px; height: 32px; }

  /* menus */
  #menu.on, #newrun.on, #run.on, #pre.on, #duel.on, #ext.on, #story.on, #puzzle.on, #season.on { padding: 8px 10px; gap: 10px; justify-content: center; }
  .menu-main, .panel-mid { padding: 14px 14px; }
  .daily { grid-template-columns: 1fr auto; gap: 8px 14px; padding: 12px 14px; }
  .daily .dright { grid-column: 1 / -1; max-width: none; display: flex; align-items: center; gap: 12px; justify-content: space-between; text-align: left; }
  .daily .dright small { margin: 0; }
  .runbody { grid-template-columns: 1fr; gap: 4px; }
  .codex { height: calc(calc(100 * var(--vh)) - 16px); }
  .cgrid, .cgrid.text { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
}
/* téléphone couché : les joueurs à gauche, la carte à droite, panneau sur le côté */
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  /* la carte prend toute la hauteur ; le tour, l'aide et les boutons passent dans la colonne de gauche */
  .bar { padding: 3px 6px; }
  .layout { grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "p1 bd" "tl bd" "hi bd" "op bd" ". bd" "p0 bd"; padding: 4px 6px; gap: 4px 8px; }
  .left, .mid { display: contents; }
  #pp1 { grid-area: p1; } #pp0 { grid-area: p0; }
  .turnline { grid-area: tl; font-size: 15.5px; }
  .hint { grid-area: hi; font-size: 15.5px; line-height: 1.25; }
  .opts { grid-area: op; min-height: 0; }
  .opts button { padding: 4px 9px; font-size: 15.5px; }
  #boardBox { grid-area: bd; }
  .pp { display: block; padding: 5px 8px; }
  .pp .who { font-size: 16.5px; }
  .pp .resv { margin-top: 4px; }
  .right { left: auto; top: 0; width: min(380px, calc(60 * var(--vw))); max-height: none; border-radius: 20px 0 0 20px; transform: translateX(105%); }
  h1 { font-size: 40px; }
  #menu.on { justify-content: flex-start; }
  .slot { padding: 6px 12px; }
  .daily { grid-template-columns: 1fr auto auto; }
  .daily .dright { grid-column: auto; display: block; text-align: center; }
  .choice .ic { display: none; }
}
@media (max-width: 600px) {
  .choices.three { grid-template-columns: 1fr 1fr; }
  .choices.three .asc { grid-column: 1 / -1; }
  #btnMusic, #btnSfx { display: none; }
  .bar .badge { max-width: calc(24 * var(--vw)); }
  .levels { grid-template-columns: 1fr; gap: 8px; }
  .lvl { padding: 10px; display: grid; grid-template-columns: 48px 1fr; text-align: left; align-items: center; }
  .lvl .ic { grid-row: span 2; margin: 0; font-size: 32px; }
  .slot { gap: 8px; padding: 8px 10px; }
  .slot .num { display: none; }
  .slot .inf b { font-size: 17px; }
  .slot .inf small { font-size: 15.5px; }
  .slot .big { padding: 8px 14px; font-size: 16.5px; }
  .runhead { gap: 10px; font-size: 15.5px; }
  .runhead b { font-size: 18px; }
  .exps { grid-template-columns: repeat(8, 1fr); }
  .exp > span { display: none; }
  .exp .tk { width: 34px; height: 34px; }
  .trk { grid-template-columns: minmax(0, 1fr) 60px 36px; font-size: 15.5px; margin: 2px 0; }
  .trk > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .runcol .chip.click { padding: 2px; }
  .runcol .chip.click > span { display: none; }
  .runcol .chip .tk { width: 34px; height: 34px; }
  .chip.locked { padding: 4px 8px; font-size: 15.5px; }
  .runcol h4 { margin: 6px 0 3px; font-size: 14.5px; }
  .runtop .title { font-size: 20px; }
  .choice .ic, .choice .bossic { display: none; }
  .choice kbd { display: none; }
  .choices { gap: 8px; }
  .choice { padding: 8px; }
  .choice b { font-size: 17px; }
  .choice small { font-size: 15px; }
  .choice .ic { font-size: 24px; }
  .evos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .evo { padding: 8px; }
  .evo .tk { width: 54px; height: 54px; }
  .evo p { font-size: 15px; }
  .tabs button { padding: 4px 8px; font-size: 15.5px; }
  .daily .pts { font-size: 32px; }
  .keys td:first-child { width: 110px; }
}
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .runcol h4 { margin: 4px 0 3px; }
  .trk { margin: 2px 0; }
  .choice { padding: 8px 12px; }
  .choice .ic { font-size: 24px; }
  .menu-main { padding: 14px 22px; }
  .hello { margin-bottom: 8px; }
}

/* ===================== boss : menaces, gel, intangible ===================== */
.sq.warn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: rgba(255, 40, 30, .32); box-shadow: inset 0 0 0 3px rgba(255, 70, 50, .95); animation: pulse .8s ease-in-out infinite; }
.sq.ice .pc::after { content: "❄"; position: absolute; right: -4%; top: -6%; font-size: calc(var(--sq) * .3); text-shadow: 0 0 6px #7fd3ff; }
.sq.ice .pc { filter: drop-shadow(0 0 8px #9fe0ff) saturate(.5) brightness(1.15); }
.sq .pc.ghost { opacity: .45; filter: drop-shadow(0 0 10px #8fd8ff); }

/* ===================== bilan de l'affrontement ===================== */
.bilanbox { max-width: 1100px; text-align: left; height: calc(calc(100 * var(--vh)) - 24px); max-height: 820px; display: flex; flex-direction: column; overflow: hidden; }
#bilan { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.bhead { text-align: center; }
.bhead h2 { font-family: Cinzel, Georgia, serif; font-size: clamp(28px, calc(4.5 * var(--vh)), 40px); }
.bhead .why { margin: 2px 0 6px; font-size: 18px; }
.bchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bchips span { font-size: 16px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.btabs { display: none; gap: 6px; justify-content: center; }
.btabs button { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.btabs button.sel { border-color: var(--gold); color: var(--gold); background: rgba(242, 193, 78, .15); }
.bgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; grid-template-areas: "a c d" "a b e"; }
.bgrid > :nth-child(1) { grid-area: a; } .bgrid > :nth-child(2) { grid-area: b; } .bgrid > :nth-child(3) { grid-area: c; } .bgrid > :nth-child(4) { grid-area: d; } .bgrid > :nth-child(5) { grid-area: e; }
.bcard { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .035); padding: 10px 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.bcard h3 { font-size: 15.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.25; }
.cmp th { font-size: 15.5px; text-align: center; padding: 2px 4px; }
.cmp th.p0, .bilanbox .p0, .moments .p0 { color: var(--gold); } .cmp th.p1, .bilanbox .p1, .moments .p1 { color: var(--vio); }
.cmp td { padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cmp td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.cmp td.best { color: var(--ok); }
.gains, .moments { margin: 0; padding-left: 18px; font-size: 16px; }
.gains li, .moments li { margin: 3px 0; }
.gains li.gold { color: var(--gold); }
.moments li.good::marker { color: var(--ok); } .moments li.bad::marker { color: var(--danger); }
.chart { width: 100%; flex: 1; min-height: 0; max-height: 200px; }
.chart .axis { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.chart .l0 { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.chart .l1 { fill: none; stroke: var(--vio); stroke-width: 3; stroke-linejoin: round; opacity: .9; }
.chart .dot0 { fill: #ff5a5a; stroke: #fff; stroke-width: 1; } .chart .dot1 { fill: #ff5a5a; stroke: #2a1a4a; stroke-width: 1; }
.legend2 { display: flex; gap: 12px; flex-wrap: wrap; font-size: 15.5px; color: var(--muted); }
.legend2 span::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend2 .k0::before { background: var(--gold); } .legend2 .k1::before { background: var(--vio); } .legend2 .kd::before { display: none; }
.bpcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.bpc { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.bpc.mvp { border-color: var(--gold); background: rgba(242, 193, 78, .1); }
.bpc .tk { width: 44px; height: 44px; flex: none; }
.bpc small { display: block; color: var(--muted); font-size: 15.5px; }
.tag2 { display: inline-block; font-size: 14.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.tag2.gold { border-color: var(--gold); color: var(--gold); }
@media (max-width: 899px), (max-height: 600px) {
  .btabs { display: flex; }
  .bgrid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: none; align-content: start; }
  .bgrid > * { grid-area: auto !important; }
  .bgrid[data-tab="resume"] > :not(.t-resume), .bgrid[data-tab="forces"] > :not(.t-forces), .bgrid[data-tab="persos"] > :not(.t-persos) { display: none; }
}

/* ===================== duel ===================== */
.dopts { display: grid; gap: 8px; margin: 10px 0; }
.dopt { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 10px; }
.dopt .seg { justify-content: flex-start; }
.dopt .seg button { padding: 6px 11px; font-size: 16px; }
.netbox { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.netbox input { width: 90px; text-transform: uppercase; text-align: center; font-weight: 800; letter-spacing: .15em; }
.netbox .or { color: var(--muted); }
.code { font-size: 30px; letter-spacing: .2em; color: var(--gold); }
@media (max-width: 600px) { .dopt { grid-template-columns: 1fr; gap: 3px; } .dopt .seg button { padding: 5px 8px; font-size: 15.5px; } }

/* ===================== statistiques ===================== */
.srow { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) 80px 40px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.srow .tk { width: 36px; height: 36px; }
.srow .rank { font-family: Cinzel, Georgia, serif; color: var(--gold); text-align: center; font-weight: 900; }
.srow .sname { min-width: 0; } .srow .sname b { display: block; font-size: 16.5px; } .srow .sname small { display: block; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar { height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sbar i { display: block; height: 100%; background: linear-gradient(90deg, #6ad08a, var(--gold)); }
.snum { text-align: right; font-variant-numeric: tabular-nums; }
.bigstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.bigstats b { display: block; font-size: 26px; color: var(--gold); }
.bigstats small { color: var(--muted); font-size: 15.5px; }
.stab td:not(:first-child), .stab th { text-align: center; }
.bossgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.bstat { text-align: center; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.bstat .tk { width: 48px; height: 48px; margin: 0 auto; }
.bstat small { display: block; font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstat.unseen .tk { filter: brightness(.2) grayscale(1); }

/* l'affrontement n° sur l'écran de partie */
.runhead span { display: inline-block; font-size: 18px; }
.runhead span::first-letter { text-transform: uppercase; }
@media (max-width: 600px) {
  #menu .tag { display: none; }
  #menu h1 { font-size: 40px; }
  #menu .menu-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
  #menu .menu-actions .ghost { padding: 7px 4px; font-size: 15px; }
  .daily { padding: 10px 12px; }
}
@media (max-width: 600px) {
  .daily h2 { font-size: 19px; white-space: nowrap; }
  .daily .dleft > small:first-of-type { display: none; } /* la description est sur l’écran du défi */
  .slot .inf small { font-size: 14px; }
}

/* pas de journal à l’écran : il prenait de la place pour rien */
.logcard, #btnSheetLog { display: none !important; }

/* ===================== bilan simple : tes erreurs d'un coup d'œil ===================== */
.bscore { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.bscore > div { text-align: center; min-width: 90px; }
.bscore b { display: block; font-size: 30px; line-height: 1.1; }
.bscore small { color: var(--muted); font-size: 15.5px; }
.bscore .k b { color: var(--ok); } .bscore .l b { color: var(--danger); }
.bcols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.bcard.bad { border-color: rgba(255, 106, 106, .4); background: rgba(255, 106, 106, .06); }
.bcard.goodc { border-color: rgba(126, 227, 154, .35); background: rgba(126, 227, 154, .05); }
.bcard h3 { font-size: 16px; }
.tips { margin: 0 0 8px; padding: 0; list-style: none; font-size: 17px; }
.tips li { margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: rgba(255, 200, 80, .1); }
.errs { margin: 0; padding: 0; list-style: none; font-size: 17px; }
.errs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.errs .ghost.sm { padding: 3px 10px; font-size: 17px; }
.small { font-size: 15.5px; margin: 4px 0; }
.okmsg { color: var(--ok); font-size: 18px; }
.goods .gd { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 4px 0; }
.goods .tk { width: 44px; height: 44px; flex: none; }
.bilanbox .p0 { color: var(--gold); } .bilanbox .p1 { color: var(--vio); }
@media (max-width: 899px), (max-height: 600px) {
  .bcols { grid-template-columns: 1fr; overflow: auto; align-content: start; }
  .bscore { gap: 10px; } .bscore b { font-size: 24px; } .bscore > div { min-width: 70px; }
}

/* ===================== extensions (DLC) ===================== */
.dlcs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.dlc { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: rgba(255, 255, 255, .03); opacity: .7; }
.dlc.on { opacity: 1; border-color: var(--line2); background: linear-gradient(180deg, rgba(127, 211, 255, .1), rgba(255, 255, 255, .02)); }
.dlc:last-child.on { background: linear-gradient(180deg, rgba(180, 140, 255, .14), rgba(255, 255, 255, .02)); }
.dlchead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dlchead h3 { font-family: Cinzel, Georgia, serif; font-size: 22px; color: var(--gold); }
.dlc ul { margin: 8px 0; padding-left: 20px; font-size: 16.5px; }
.dlc li { margin: 4px 0; }
.dlc .menu-actions { margin-top: 8px; }
.tag2.dlc { border-color: #7fd3ff; color: #bfeaff; }
/* histoire */
.chaps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.chap { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); text-align: left; font-size: 17px; min-height: 56px; }
.chap .cn { font-family: Cinzel, Georgia, serif; font-size: 24px; color: var(--gold); width: 26px; text-align: center; }
.chap.done { border-color: rgba(126, 227, 154, .5); } .chap.done b { color: var(--ok); }
.chap.next { border-color: var(--gold); background: rgba(242, 193, 78, .12); box-shadow: 0 0 16px rgba(242, 193, 78, .25); }
.chap.lock { opacity: .45; cursor: var(--cur); }
.chap .cb2 { margin-left: auto; width: 40px; height: 40px; }
.evcard.story { font-size: 18px; font-style: italic; }
.gold { color: var(--gold); }
/* saison */
.seasoncols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.seasoncols h3 { font-size: 15.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.board { margin: 0; padding-left: 24px; font-size: 17px; }
.board li { margin: 2px 0; } .board li.gold b { color: var(--gold); } .board small { color: var(--muted); margin-left: 6px; }
.sq .specic.cur { width: 70%; height: 70%; right: 15%; bottom: 15%; opacity: .75; filter: drop-shadow(0 0 6px #7fd3ff); }
.sq.spec3 { box-shadow: inset 0 0 14px rgba(80, 180, 255, .55); }
@media (max-width: 760px) { .dlcs, .chaps, .seasoncols { grid-template-columns: 1fr; } .chap { min-height: 44px; padding: 6px 10px; } }
@media (max-width: 600px) {
  #ext p.muted { display: none; }
  .dlcs { gap: 8px; margin-top: 4px; }
  .dlc { padding: 8px 10px; }
  .dlchead h3 { font-size: 19px; }
  .dlc ul { font-size: 14.5px; margin: 4px 0; padding-left: 18px; }
  .dlc li { margin: 2px 0; }
  .dlc .menu-actions { margin-top: 4px; }
}

/* flèche du dernier coup et signal « à toi » */
.lastarrow { pointer-events: none; opacity: .7; z-index: 1; animation: arrowIn .35s ease-out; }
@keyframes arrowIn { from { opacity: 0; } }
.turnline.yourturn { animation: yourTurn 1.1s ease-out; }
@keyframes yourTurn { 0% { transform: scale(1); } 25% { transform: scale(1.18); text-shadow: 0 0 18px var(--gold), 0 2px 6px #000; } 100% { transform: scale(1); } }

/* les cases prennent les couleurs du décor */
#terrain[data-theme="nuit"] { --l1: #7a7aa0; --l2: #62628a; --l3: #52527a; --d1: #3a3a58; --d2: #2c2c46; --d3: #22223a; }
#terrain[data-theme="abysses"] { --l1: #a6d2cc; --l2: #84b2ae; --l3: #709c9a; --d1: #44707a; --d2: #335c68; --d3: #2a4e5a; }
#terrain[data-theme="hiver"] { --l1: #f2f6fa; --l2: #d8e2ec; --l3: #c6d2de; --d1: #8c9caa; --d2: #748494; --d3: #647280; }
#terrain[data-theme="desert"] { --l1: #f4deaa; --l2: #dec28a; --l3: #ccaa72; --d1: #aa824c; --d2: #8c6c3c; --d3: #7c5c30; }
#terrain[data-theme="marais"] { --l1: #cacaa2; --l2: #b0b088; --l3: #9c9c76; --d1: #5c5c40; --d2: #4a4a30; --d3: #3e3e28; }
/* DLC « Les Ombres » : lumière du Phare, bouton du défi de la semaine */
.sq.aura::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 238, 150, .34), rgba(255, 220, 90, .12) 70%); box-shadow: inset 0 0 0 2px rgba(255, 226, 122, .55); border-radius: inherit; }
#dailyBox .dright #btnWeekly { margin-top: 6px; }
/* succès */
.ach { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ach .aic { font-size: 30px; line-height: 1; filter: grayscale(1) opacity(.55); }
.ach b { font-size: 17px; } .ach p { margin: 2px 0; font-size: 15px; color: var(--muted); } .ach small { font-size: 13px; color: var(--muted); }
.ach.done { border-color: rgba(242, 193, 78, .55); background: linear-gradient(135deg, rgba(242, 193, 78, .14), rgba(255, 255, 255, .03)); }
.ach.done .aic { filter: drop-shadow(0 0 6px rgba(255, 215, 90, .6)); } .ach.done small { color: var(--gold); }
/* revoir une partie */
.rpcard { display: flex; align-items: center; gap: 12px; } .rpcard .txt { flex: 1; min-width: 0; } .rpcard p { margin: 4px 0; }
/* tutoriel jouable */
.tutohint { display: block; margin-bottom: 6px; padding: 8px 12px; border-radius: 12px; font-size: 17px; line-height: 1.35; color: #fff4d0;
  background: linear-gradient(135deg, rgba(242, 193, 78, .28), rgba(242, 193, 78, .08)); border: 1px solid rgba(242, 193, 78, .65); animation: tutoGlow 2.2s ease-in-out infinite; }
.tutohint .ghost.sm { margin-left: 6px; vertical-align: middle; }
@keyframes tutoGlow { 0%, 100% { box-shadow: 0 0 0 rgba(242, 193, 78, 0); } 50% { box-shadow: 0 0 16px rgba(242, 193, 78, .45); } }
/* mode daltoniens : bleu au lieu de violet, motifs en plus des couleurs */
body.cb { --vio: #5ab0ff; }
body.cb .sq.tgt-move .mk { background: #ffffff; box-shadow: 0 0 0 3px #1565c0, 0 0 10px rgba(255, 255, 255, .8); }
body.cb .sq.tgt-cap .mk { border-color: #ff8c00; box-shadow: 0 0 12px rgba(255, 140, 0, .8); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 140, 0, .5) 6px 9px); }
body.cb .sq.tgt-ally .mk { border-color: #ffffff; }
body.cb .sq.tgt-place .mk { background: #ffd86a; outline: 2px solid #1a1206; }
body.cb .sq.tgt-place.free .mk { background: #ffffff; }
body.cb .sq.warn::after { background: repeating-linear-gradient(45deg, rgba(255, 140, 0, .5) 0 7px, rgba(0, 0, 0, .3) 7px 14px); }
/* manette */
.padfocus { outline: 3px solid #7fd3ff !important; outline-offset: 2px; box-shadow: 0 0 14px rgba(127, 211, 255, .7) !important; }
.sq.padq { box-shadow: inset 0 0 0 4px #7fd3ff, 0 0 16px rgba(127, 211, 255, .9) !important; z-index: 5; }
/* dessins : trait d'encre sous la créature, reflet peint sur le cadre */
.tk .ink { opacity: .9; }
.tk .ink * { fill: #1c140c !important; stroke: #1c140c !important; stroke-width: 5.5px !important; stroke-linejoin: round; }
.tk .ink .eye, .tk .ink [opacity] { opacity: 1; }
.tk .gloss { fill: #ffffff; opacity: .16; pointer-events: none; }
/* animations : coup tranchant, âme qui s'envole, mort plus marquée */
.slash svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255, 120, 80, .8)); }
.slash path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: slash .32s ease-out forwards; }
@keyframes slash { 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.soul { opacity: 0; animation: soul 1.2s ease-out forwards; }
.soul svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
@keyframes soul { 0% { opacity: 0; transform: translateY(10%) scale(.6); } 20% { opacity: .95; } 60% { transform: translate(8%, -90%) scale(1); } 100% { opacity: 0; transform: translate(-6%, -170%) scale(1.1); } }
.ghost-pc { animation: die .8s cubic-bezier(.4, 0, .9, .6) forwards; filter: drop-shadow(0 0 10px #ff4040); }
@keyframes die { 0% { transform: scale(1); opacity: 1; filter: brightness(1); } 12% { transform: scale(1.15) rotate(-5deg); filter: brightness(2.6) drop-shadow(0 0 10px #fff); }
  30% { transform: scale(1.08) rotate(8deg) translateY(-6%); } 100% { transform: scale(.35) rotate(60deg) translateY(30%); opacity: 0; filter: brightness(.6) grayscale(1); } }
body.anim-off .slash, body.anim-off .soul { display: none; }
/* renommée et couleurs de la partie */
.gems { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.gem { width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: radial-gradient(circle at 35% 30%, #fff, var(--g) 45%, rgba(0, 0, 0, .55)); font-size: 11px; line-height: 1; }
.gem[disabled] { background: rgba(255, 255, 255, .06); opacity: .6; cursor: var(--cur); }
.gem.sel { border-color: #fff; box-shadow: 0 0 10px var(--g); }
.army { font-weight: 700; font-size: .85em; white-space: nowrap; } .army.sh { color: #c8a8ff; } .army.li { color: #ffd86a; }
/* histoire */
.storyscene { position: relative; width: 100%; height: calc(24 * var(--vh)); min-height: 130px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(242, 193, 78, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); margin: 4px 0 6px; }
.storyscene canvas { position: absolute; left: 0; top: 0; }
.storyscene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0, 0, 0, .55)); }
.storyscene .cast { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 3%; }
.storyscene .cast span { width: min(16%, calc(11 * var(--vh))); aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); animation: castFloat 3.2s ease-in-out infinite; }
.storyscene .cast span:nth-child(2n) { animation-delay: -1.6s; }
.storyscene .cast.boss span { width: min(30%, calc(19 * var(--vh))); filter: drop-shadow(0 0 18px rgba(255, 60, 30, .6)) drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.storyscene .cast svg { width: 100%; height: 100%; }
@keyframes castFloat { 50% { transform: translateY(-6px); } }
.evcard.story .srule { display: block; margin-top: 8px; color: var(--gold); font-family: inherit; font-size: 17px; }
.sqteam { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-weight: 700; }
.sqteam svg { width: 34px; height: 34px; }
.chap .ct { display: flex; flex-direction: column; min-width: 0; }
.chap .ct small { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.25; }
.evcard .quote { display: block; margin: 4px 0; color: #ffe3b0; font-size: 16px; }
/* aide de la manette */
.padhint { position: fixed; right: 8px; bottom: 8px; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(10, 12, 10, .82); border: 1px solid var(--line); font-size: 14px; color: #f0e8d8; pointer-events: none; white-space: nowrap; }
.padhint span { display: flex; align-items: center; gap: 5px; }
.padhint kbd.pad { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #2a2a2a; border: 1px solid #888; font-size: 12px; font-weight: 800; }
.padhint kbd.pad.w { border-radius: 8px; padding: 0 5px; }
.exps[hidden] { display: none !important; }
.famerow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .famerow .trk { flex: 1; min-width: 90px; margin: 0; } .famerow .trk > span:first-child { display: none; } .famerow .gems { margin: 0; gap: 3px; } .famerow .gem { width: 20px; height: 20px; font-size: 9px; }
.famerow .trk { grid-template-columns: 1fr 58px; }
/* bilan détaillé */
.dcols { grid-template-columns: 1fr 1fr 1.1fr; }
.dtab { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtab th { color: var(--muted); font-weight: 600; font-size: 13.5px; text-align: center; padding: 2px 4px; }
.dtab td { text-align: center; padding: 2px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.dtab td:first-child { text-align: left; }
.dtab td.bad { color: var(--danger); font-weight: 700; }
.dtab .pn { display: flex; align-items: center; gap: 6px; } .dtab .pn .tk { width: 24px; height: 24px; flex: none; }
.dtab .p0 { color: var(--gold); } .dtab .p1 { color: var(--vio); }
.fcurve { width: 100%; height: 80px; display: block; }
@media (max-width: 760px) { .dcols { grid-template-columns: 1fr; overflow: auto; } }
/* règles de l'affrontement, toujours visibles */
#rulesCard { flex: none; max-height: calc(34 * var(--vh)); overflow: auto; }
#rulesCard:empty { display: none; }
#rulesCard h3 { font-size: 15px; margin-bottom: 4px; }
.rules { list-style: none; margin: 0; padding: 0; font-size: 14.5px; line-height: 1.35; }
.rules li { padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .06); } .rules li:first-child { border-top: 0; }
#evBadge, #goalBadge { cursor: var(--curp); }
/* revue de la partie (façon chess.com) */
.review { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
.accs { display: flex; gap: 10px; margin-bottom: 8px; }
.acc { flex: 1; text-align: center; border-radius: 12px; padding: 6px 4px; background: rgba(255, 255, 255, .05); }
.acc b { display: block; font-size: 30px; line-height: 1.1; } .acc small { display: block; color: var(--muted); font-size: 13.5px; }
.acc.p0 b { color: var(--gold); } .acc.p1 b { color: var(--vio); }
.rvtab { width: 100%; border-collapse: collapse; font-size: 15px; }
.rvtab td { padding: 2px 6px; border-top: 1px solid rgba(255, 255, 255, .06); } .rvtab td.ic { font-weight: 900; width: 28px; text-align: center; }
.rvtab td.p0, .rvtab td.p1 { text-align: center; width: 44px; font-weight: 700; } .rvtab td.p0 { color: var(--gold); } .rvtab td.p1 { color: var(--vio); }
.rvmini { color: var(--muted); font-size: 14px; margin: 6px 0; }
.rvgraph { width: 100%; height: 90px; display: block; border-radius: 8px; }
.errs.keys li span { line-height: 1.3; }
@media (max-width: 760px) { .review { grid-template-columns: 1fr; overflow: auto; } }
/* réserve des joueurs : plus grande, rangée par sorte */
.pp .resv .rvh { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 1px; }
.pp .resv .rgrp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.pp .resv .rgl { width: 100%; font-size: 12.5px; color: var(--muted); }
.pp .resv .chip.ic .tk { width: 44px; height: 44px; }
.pp .resv .chip.click { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(242, 193, 78, .5); }


/* choix de progression après une victoire */
.evos .tgrp { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.evos .tgl { grid-column: 1 / -1; font-size: 14.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); text-align: left; }
.evo.tch .tic { display: block; font-size: 38px; line-height: 1.1; margin: 2px 0 4px; }
.evo.tch .meter { position: relative; margin: 10px 6px 4px; }
.evo.tch .meter i.plus { position: absolute; top: 0; background: #fff; opacity: .55; border-radius: 0 6px 6px 0; animation: tchPulse 1.2s infinite alternate; }
@keyframes tchPulse { from { opacity: .25; } to { opacity: .75; } }
.evo.tch small { color: var(--muted); font-variant-numeric: tabular-nums; }
.evo.tch.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 10px 30px rgba(242, 193, 78, .3); }
.evo.tch.sel::after { content: '✓'; position: absolute; top: 8px; right: 12px; color: var(--gold); font-weight: 700; font-size: 20px; }
.trkhint { font-size: 14px; margin: -2px 0 6px; }

/* bilan : revoir un moment sur la carte */
.errs.keys li.km { cursor: var(--curp); border-radius: 8px; padding-left: 6px; transition: background .15s; }
.errs.keys li.km:hover { background: rgba(255, 255, 255, .07); }
.kmhint { font-size: 14px; margin: 0 0 4px; }
.kmall { margin-top: 8px; }
.sq.mbad { box-shadow: inset 0 0 0 4px #ff5f5f, 0 0 12px rgba(255, 95, 95, .6); }
.sq.mgood { box-shadow: inset 0 0 0 4px #5fe08e, 0 0 12px rgba(95, 224, 142, .6); }
.sq.mbad.mgood { box-shadow: inset 0 0 0 4px #5fe08e, inset 0 0 0 8px #ff5f5f; }
#momentBar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; width: min(640px, calc(calc(100 * var(--vw)) - 24px));
  padding: 12px 16px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; animation: evoIn .3s backwards; }
#momentBar .mbtop { font-size: 17px; }
#momentBar .mbl { display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; }
#momentBar .mbl i { flex: none; width: 22px; height: 6px; border-radius: 3px; margin-top: 8px; }
#momentBar .mbl.bad i { background: #ff5f5f; } #momentBar .mbl.good i { background: #5fe08e; }
#momentBar .mbl.good span { color: #b8f5cc; }
#momentBar .mbbtn { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 2px; }
#momentBar button[disabled] { opacity: .35; }
#momentBar .mbback { border-color: var(--gold); color: var(--gold); }
#momentBar .mbtk { flex: none; width: 30px; height: 30px; margin-top: -4px; }
#momentBar .mbtk .tk { width: 30px; height: 30px; }
body.viewing #opts { visibility: hidden; }

/* défis : persos tirés au hasard, handicaps au choix */
.armyrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0; }
.armyrow .achip { width: 38px; height: 38px; display: inline-block; }
.armyrow .achip .tk { width: 38px; height: 38px; }
#dailyBox .armyrow { justify-content: flex-start; }
#dailyBox .armyrow .achip, #dailyBox .armyrow .achip .tk { width: 30px; height: 30px; }
.hpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.hpick button { text-align: left; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: 15px; }
.hpick button b { color: var(--danger); margin-right: 4px; }
.hpick button.sel { border-color: var(--danger); background: rgba(255, 90, 90, .16); }
/* Codex : la Lumière puis les Ombres */
.tblock h3.cxhead { margin: 4px 0 0; }
/* Codex : bande Lumière / Ombres sur toute la largeur */
.cxhead { margin: 0 0 10px; padding: 6px 14px; border-radius: 10px; font-family: var(--title, inherit); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.cxhead.li { color: #ffd86a; background: linear-gradient(90deg, rgba(242, 193, 78, .28), rgba(242, 193, 78, .04)); border: 1px solid rgba(242, 193, 78, .55); }
.cxhead.sh { color: #d9c4ff; background: linear-gradient(90deg, rgba(150, 100, 255, .32), rgba(150, 100, 255, .04)); border: 1px solid rgba(180, 140, 255, .6); }
/* bilan : onglets en haut, erreurs cliquables */
.bltabs { margin: 2px auto 10px; }
.bltabs button { font-size: 16.5px; padding: 7px 18px; }
.errs2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.errs2 li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: rgba(255, 255, 255, .03); font-size: 16px; line-height: 1.3; }
.errs2 li.km { cursor: var(--curp); transition: background .15s, transform .15s; }
.errs2 li.km:hover { background: rgba(255, 255, 255, .09); transform: translateX(3px); }
.errs2 .kic { flex: none; font-weight: 800; font-size: 18px; color: var(--c); min-width: 26px; text-align: center; }
.errs2 .ktx { flex: 1; min-width: 0; }
.errs2 .kbest { color: #9ff0bd; }
.errs2 .kgo { flex: none; font-size: 14.5px; color: var(--gold); white-space: nowrap; }
.errs2 .ghost.sm { padding: 3px 9px; }
.seeall { display: block; margin: 12px auto 0; font-size: 16.5px; padding: 9px 22px; }

/* revue : la carte ne bouge plus quand la consigne passe de 2 lignes à 1 */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (min-height: 561px) {
  .hint { min-height: 72px; }
  /* paramètres sur 2 colonnes : tout tient sans faire défiler */
  .settings { max-width: 1040px; }
  #setBody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  #setBody .setrow.wide { grid-column: 1 / -1; }
}
/* menu principal : grand, le titre posé sur le décor, des panneaux de verre qui laissent voir le paysage,
   et un voile sombre autour du centre pour que tout se fonde dans le décor */
#menu::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .55)); }
.menu-wrap { width: min(920px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "side" "daily"; gap: 14px; margin: 0 auto; }
.menu-head { grid-area: head; text-align: center; }
.menu-head h1 { font-size: clamp(48px, min(calc(10 * var(--vw)), calc(11 * var(--vh))), 112px); letter-spacing: .08em; }
.menu-head .hello { margin: 2px 0 0; font-size: 18px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); color: #e8dcc0; }
.menu-wrap .glass { background: linear-gradient(180deg, rgba(18, 16, 12, .52), rgba(10, 10, 8, .68)); backdrop-filter: blur(10px) saturate(1.15);
  border-color: rgba(242, 193, 78, .22); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07); }
.menu-wrap .menu-main { grid-area: main; max-width: none; padding: 18px 20px; }
.menu-wrap .daily { grid-area: daily; max-width: none; }
.menu-side { grid-area: side; }
.menu-side { padding: 12px; }
.menu-side .menu-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.menu-side .menu-actions .ghost { width: 100%; padding: 11px 10px; font-size: 17px; border-radius: 12px; }
.menu-side .menu-actions button[hidden] { display: none; }
@media (min-width: 900px) and (min-height: 601px) { .menu-wrap .slot { padding: 14px 18px; } .menu-wrap .slot .inf b { font-size: 20px; } }
@media (max-width: 899px), (max-height: 600px) {
  .menu-wrap { gap: 10px; }
  .menu-side { padding: 10px; }
  .menu-side .menu-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .menu-side .menu-actions .ghost { padding: 8px 6px; font-size: 16px; }
  .menu-wrap .slot { flex-wrap: wrap; }
  .menu-wrap .slot .inf { min-width: 150px; }
}
.facinfo { max-width: 620px; margin: 8px auto 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 15.5px; text-align: center; }
.daily .dmid .tal { display: block; color: var(--muted); cursor: var(--cur); }
.trk span small { color: var(--muted); font-size: .85em; }
/* Codex : ce qui n'a pas encore été rencontré */
.ccard.locked { opacity: .55; border-style: dashed; }
.ccard.locked .cic { font-size: 30px; filter: grayscale(1); }
.cxhead small { font-weight: 400; opacity: .8; font-size: .8em; }
.turnno { color: var(--gold); }
/* tutoriel : les actions et deux schémas de déplacement */
.tutoacts { text-align: left; margin: 6px 0 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tutodiags { display: flex; gap: 18px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.tutodiags > div { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 220px; text-align: center; }
.tutodiags .diag { width: 120px; }
.tutodiags small { color: var(--muted); font-size: 14px; line-height: 1.25; }
/* le coup de l'adversaire, écrit sous la carte jusqu'à ce que tu joues */
.hint .botlast { display: block; margin-bottom: 3px; padding: 3px 10px; border-radius: 10px; background: rgba(180, 140, 255, .14); color: var(--txt); font-size: 15.5px; }
.hint .botlast .ghost.sm { padding: 1px 8px; font-size: 13.5px; margin-left: 6px; }

/* le curseur de souris du jeu (pas celui du bureau) : flèche dorée, plus claire avec un éclat sur ce qui se clique */
:root { --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3 L4 22 L9.5 17 L13.5 25 L17 23.4 L13 15.6 L20.5 15.6 Z' fill='%23f2c14e' stroke='%231a1206' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M6 7 L6 17' stroke='%23fff3c4' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") 4 3, auto; --curp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3 L4 22 L9.5 17 L13.5 25 L17 23.4 L13 15.6 L20.5 15.6 Z' fill='%23f2c14e' stroke='%231a1206' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M6 7 L6 17' stroke='%23fff3c4' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") 4 3, auto; /* le même curseur partout, comme dans les autres jeux */ }
html, body { cursor: var(--cur); }
button, a, select, label, summary, [data-pool], [data-res], [data-km], [data-tab], .sq, .chip, .evo, .choice { cursor: var(--curp); }
button:disabled { cursor: var(--cur); }
input, textarea { cursor: text; }
/* fiche d'un perso pendant la partie : sa description et son schéma de déplacement */
#infoCard .ibody { display: flex; gap: 10px; align-items: flex-start; }
#infoCard .ibody .idesc { flex: 1; min-width: 0; }
#infoCard .idiag { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; }
#infoCard .idiag .diag { width: 96px; }
#infoCard .idiag small { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.2; }
/* combat de boss : choisir son équipe */
.squad .sqrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.squad .sqchip { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); opacity: .6; }
.squad .sqchip .tk { width: 42px; height: 42px; }
.squad .sqchip small { font-size: 12px; line-height: 1.1; }
.squad .sqchip.sel { opacity: 1; border-color: var(--gold); background: rgba(242, 193, 78, .15); }
/* recrutement : le perso vole vers la réserve */
.flytk { position: fixed; z-index: 80; pointer-events: none; }
.flytk .tk { width: 100%; height: 100%; }
/* succès : niveaux 🥉 🥈 🥇 */
/* Codex : les 3 parties des règles (le jeu, les bots, la progression) */
.tabs .subtabs { flex-basis: 100%; display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
.tabs .subtabs button { font-size: 15px; padding: 4px 12px; background: rgba(0, 0, 0, .2); }
/* Énigmes (DLC) */
.pzs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; max-height: calc(52 * var(--vh)); overflow: auto; padding: 2px; }
.pz { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.pz b { font-family: Cinzel, Georgia, serif; font-size: 24px; color: var(--gold); }
.pz small { color: var(--muted); font-size: 13.5px; }
.pz.done { border-color: rgba(126, 227, 154, .5); } .pz.done b { color: var(--ok); }
.pz.next:not(.done) { border-color: var(--gold); background: rgba(242, 193, 78, .12); }
.pz.lock { opacity: .45; cursor: var(--cur); }
/* statistiques à niveaux (sans fin) */
/* persos maîtres (parties, Cercle 6 et plus) */
.sq.master .pc { filter: drop-shadow(0 0 7px rgba(255, 215, 90, .95)) drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.imast { margin: 6px 0 0; color: var(--gold); font-weight: 700; }
/* statistiques : un chiffre par ligne */
.stiles { display: flex; flex-direction: column; gap: 6px; }
.stile { display: grid; grid-template-columns: 34px 72px 1fr; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.stile span { font-size: 22px; line-height: 1; text-align: center; }
.stile b { font-family: Cinzel, Georgia, serif; font-size: 24px; color: var(--gold); line-height: 1.1; text-align: right; }
.stile small { font-size: 15px; color: var(--text, #e8e2cf); line-height: 1.25; }
/* avancement du Cercle (menu et écran de la partie) */
.cpct { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cpct .meter { flex: 1; max-width: 160px; }
.cpct small { white-space: nowrap; color: var(--gold); }
.chip .mst { position: absolute; top: -6px; left: -6px; font-size: 13px; line-height: 1; pointer-events: none; }
/* affrontement facile : un bonus pour toi */
.choice.easy { border-color: rgba(120, 220, 140, .5); background: linear-gradient(180deg, rgba(120, 220, 140, .16), rgba(255, 255, 255, .02)); }
.evcard.easyc { border-color: rgba(120, 220, 140, .6); background: rgba(120, 220, 140, .08); }
/* fin d'affrontement : confettis (victoire) ou voile sombre (défaite), sans gêner les clics */
.celeb { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.celeb.win i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: confFall 3s cubic-bezier(.25, .6, .4, 1) forwards; box-shadow: 0 0 6px rgba(255, 220, 120, .5); }
@keyframes confFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(105 * var(--vh))) rotate(var(--r)); } }
.celeb.lose { background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 4, 8, .65) 100%); animation: loseFade 3.2s ease forwards; }
@keyframes loseFade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
body.anim-off .celeb { display: none; }

/* écrans peu hauts (768 px) : l’écran de partie tient sans barre de défilement */
@media (max-height: 800px) {
  #run.on { padding-top: 6px; padding-bottom: 6px; gap: 8px; }
  #run #runBox { padding-top: 12px; padding-bottom: 12px; }
  #run #runBox > .choices, #run #runBox > .menu-actions { margin-top: 10px; }
}

/* combat sans défilement : la réserve ne rapetisse jamais, les joueurs non plus ; la fiche (à gauche) et les règles s'adaptent */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (min-height: 561px) {
  #poolCard { flex: none; }
  .left > .pp { flex: none; }
  .left > #infoCard { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .left > #infoCard .ibody { flex-direction: column; align-items: stretch; }
  .left > #infoCard .idiag { align-self: center; width: auto; }
  .left > #infoCard .idiag .diag { width: 150px; }
  #rulesCard { flex: 0 1 auto; max-height: none; overflow: hidden; }
}
#infoCard.nodiag .idiag { display: none; }
#rulesCard .rmore { margin-top: 6px; width: 100%; }
#rulesPop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); padding: 16px; cursor: var(--curp); }
#rulesPop[hidden] { display: none; }
#rulesPop > .card { width: min(900px, 100%); background: #141c16; border: 1px solid var(--line2); }
#rulesPop .rules { columns: 2 330px; column-gap: 24px; font-size: 16px; }
#rulesPop .rules li { break-inside: avoid; }
#rulesPop .muted { margin-top: 8px; text-align: center; font-size: 14px; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (min-height: 561px) {
  .left { position: relative; }
  .left > #infoCard.float { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; overflow: visible;
    background: #141c16; border: 1px solid var(--line2); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); pointer-events: none; }
}
.morebtn { margin-top: 4px; }
/* extensions : les 3 côte à côte sur grand écran (sans défilement) */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  #ext .panel-mid.wide { max-width: 1400px; }
  .dlcs { grid-template-columns: repeat(3, 1fr); }
  .dlc { display: flex; flex-direction: column; }
  .dlc ul { font-size: 15.5px; flex: 1; }
  .dlc .menu-actions { flex-wrap: wrap; }
}
/* retours en arrière restants dans ce combat */
#btnUndo[data-n]:not([data-n=""])::after { content: attr(data-n); margin-left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; background: rgba(242, 193, 78, .2); color: var(--gold); }
#btnUndo[data-n="0"]::after { background: rgba(255, 255, 255, .08); color: var(--muted); }
/* case spéciale occupée : son icône passe au-dessus du perso, en pastille dans le coin (on voit toujours sur quelle case il est) */
.sq:has(.pc) .specic, .sq:has(.pc) .specic.cur { z-index: 5; width: 38%; height: 38%; left: -6%; top: -6%; right: auto; bottom: auto; padding: 4%; box-sizing: border-box;
  border-radius: 50%; background: rgba(10, 14, 12, .92); box-shadow: 0 0 0 2px var(--specc, #9fe8ff), 0 2px 6px rgba(0, 0, 0, .6); opacity: 1; filter: none; }
.sq.spec1 { --specc: #7fd3ff; } .sq.spec2 { --specc: #62a84e; } .sq.spec3 { --specc: #9fe8ff; } .sq.spec4 { --specc: #9a6bff; } .sq.spec5 { --specc: #ffe27a; } .sq.spec6 { --specc: #5ad1ff; }
/* sorts des dieux en image (scènes animées) */
.diag.scene { position: relative; container-type: inline-size; }
.diag.scene .sp { position: absolute; width: calc(100% / 7); height: calc(100% / 7); z-index: 2; pointer-events: none; transition: left .6s ease-in-out, top .6s ease-in-out; }
.diag.scene .sp[hidden] { display: none; }
.diag.scene .sp .tk { position: absolute; inset: -14%; width: 128%; height: 128%; }
.diag.scene.snap .sp { transition: none; }
.diag.scene .sp.dead { animation: spDie 1s forwards; }
@keyframes spDie { 30% { transform: scale(1.2); filter: drop-shadow(0 0 5px #ff4a4a) brightness(1.5); } 100% { transform: scale(.3); opacity: 0; } }
.diag.scene i.zone { background: #ff8a5a; box-shadow: 0 0 6px #ffb08a; }
.diag.scene i.wall { background: #2f4a24; }
.diag.scene i.wall::before { content: "🌿"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9cqw; }
.diag.scene i[data-ic]:not([data-ic=""])::after { content: attr(data-ic); position: absolute; right: -30%; top: -35%; z-index: 3; font-size: 8cqw; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.diag.scene .stxt { position: absolute; left: 0; right: 0; bottom: 2%; z-index: 4; text-align: center; font-style: normal; font-weight: 900; font-size: 11cqw; color: #fff; text-shadow: 0 0 4px #000, 0 0 8px #000; pointer-events: none; }
.diag.scene .stxt:empty { display: none; }
.ccard .diag.scene { width: 124px; }

/* ===================== la Ruche : plateau d'hexagones (côtés plats, une colonne sur deux décalée d'une demi-case) ===================== */
#board.hex .sq { width: calc(var(--sq) * 4 / 3 - 2px); height: calc(var(--sq) - 2px); margin: 1px 0 0 calc(var(--sq) / -6 + 1px); border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); box-shadow: none; }
#board.hex .sq:nth-child(2n) { top: calc(var(--sq) / 2); }
#board.hex .sq.m { background: linear-gradient(145deg, color-mix(in srgb, var(--l1, #eadcb8) 55%, var(--d1, #85705a)), color-mix(in srgb, var(--l3, #bba67a) 50%, var(--d3, #574535))); }
#board.hex .sq.m::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .12) 0 6%, transparent 7%), radial-gradient(circle at 70% 65%, rgba(0, 0, 0, .1) 0 5%, transparent 6%); }
#board.hex .sq .pc { width: calc(var(--sq) * .84); height: calc(var(--sq) * .84); flex: none; }
#board.hex .sq .crd { display: none; }
#board.hex .sq.zone0, #board.hex .sq.zone1 { outline: none; }
#board.hex .sq.zone0::before { background: rgba(242, 193, 78, .55); opacity: 1; }
#board.hex .sq.zone1::before { background: rgba(180, 140, 255, .55); opacity: 1; }
#board.hex .sq .specic { right: 33%; bottom: 2%; }
#board.hex .sq:has(.pc) .specic, #board.hex .sq:has(.pc) .specic.cur { left: 28%; top: 0; width: 30%; height: 30%; }
.mapprev.hex i:nth-child(2n) { transform: translateY(50%); }
.mapprev.hex { padding-bottom: 5px; }

/* ===== combat (2026-11-02, 2) : le plateau d'abord. Colonnes plus fines, plus de consigne, règles dans le menu « 📜 Règles » ===== */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (min-height: 561px) {
  .layout { grid-template-columns: minmax(200px, 245px) minmax(0, 1fr) minmax(220px, 275px); gap: 8px; padding: 8px; }
  .right > #infoCard { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .right > #infoCard .ibody { flex-direction: column; align-items: stretch; }
  .right > #infoCard .idiag { align-self: center; width: auto; }
  .right > #infoCard .idiag .diag { width: 132px; }
}
.hint:empty { display: none; }
.hint { min-height: 0; }
#rulesCard:empty { display: none; }
#btnRules[hidden] { display: none; }
#btnRules:not(.seen) { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(242, 193, 78, .4), 0 0 12px rgba(242, 193, 78, .35); }
#btnRules b { color: var(--gold); font-weight: 800; }
/* persos nets : plus de « filter » sur les persos du plateau (avec l'agrandissement de l'interface, la carte graphique
   les dessinait en basse résolution, donc flous) ; l'ombre et les lueurs sont dessinées derrière le perso */
.sq .pc, .sq.selp .pc, .sq.master .pc, .sq.ice .pc, .sq .pc.ghost { filter: none; }
.sq .pc::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -5%; height: 16%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.sq.master .pc::before, .sq.selp .pc::before, .sq.ice .pc::before, .sq .pc.ghost::before { inset: -14%; height: auto; }
.sq.master .pc::before { background: radial-gradient(closest-side, rgba(255, 215, 90, .75), rgba(255, 215, 90, 0)); }
.sq.selp .pc::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); }
.sq.ice .pc::before { background: radial-gradient(closest-side, rgba(159, 224, 255, .85), rgba(159, 224, 255, 0)); }
.sq .pc.ghost::before { background: radial-gradient(closest-side, rgba(143, 216, 255, .7), rgba(143, 216, 255, 0)); }
@keyframes lift { 50% { transform: translateY(-5px); } }
@media (hover: hover) { .sq:hover .pc { transform: translateY(-3px); } }
/* schémas animés : le perso qui bouge passe au-dessus des autres cases (avant, il glissait dessous) */
.diag i:has(.tk) { z-index: 3; }
.diag.scene .sp { z-index: 4; }
.diag.scene .stxt { z-index: 6; }

/* ===================== les Triangles : pointe en haut / pointe en bas, colonnes à moitié superposées ===================== */
#board.tri { grid-template-columns: repeat(var(--cols), calc(var(--sq) * .58)); }
#board.tri .sq { width: calc(var(--sq) * 1.16 - 2px); height: calc(var(--sq) - 2px); margin: 1px 0 0 1px; border-radius: 0; box-shadow: none; }
#board.tri .sq.tup { clip-path: polygon(50% 2%, 98% 98%, 2% 98%); align-items: flex-end; padding-bottom: calc(var(--sq) * .06); }
#board.tri .sq.tdn { clip-path: polygon(2% 2%, 98% 2%, 50% 98%); align-items: flex-start; padding-top: calc(var(--sq) * .06); }
#board.tri .sq .pc { width: calc(var(--sq) * .56); height: calc(var(--sq) * .56); flex: none; }
#board.tri .sq .crd { display: none; }
#board.tri .sq.zone0, #board.tri .sq.zone1 { outline: none; }
#board.tri .sq.zone0::before { background: rgba(242, 193, 78, .55); opacity: 1; }
#board.tri .sq.zone1::before { background: rgba(180, 140, 255, .55); opacity: 1; }
#board.tri .sq .mk { position: absolute; }
#board.tri .sq.tup .mk { top: auto; bottom: 18%; } #board.tri .sq.tdn .mk { bottom: auto; top: 18%; }
#board.tri .sq .specic { right: 38%; bottom: 4%; width: 24%; height: 24%; }
#board.tri .sq.tdn .specic { bottom: auto; top: 4%; }
.mapprev.tri i:nth-child(2n) { clip-path: polygon(0 0, 100% 0, 50% 100%); } .mapprev.tri i:nth-child(2n+1) { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* le bot réfléchit : un sablier au lieu du texte (le nom n'est plus coupé) */
.pp .thinking { font-size: 0; }
.pp .thinking::after { content: "⏳"; font-size: 16px; }
/* énigmes (2026-11-02) : 60 cases, toutes visibles d'un coup (plus de barre de défilement) */
.pzs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; max-height: none; overflow: visible; }
.pz { padding: 5px 3px; gap: 0; border-radius: 10px; }
.pz b { font-size: 18px; line-height: 1.2; }
.pz small { font-size: 11px; white-space: nowrap; }

/* cases des hauts Cercles (2026-11-02) */
.sq.spec7 { --specc: #c0405e; } .sq.spec8 { --specc: #ffd36a; } .sq.spec9 { --specc: #d8d8e0; } .sq.spec10 { --specc: #ff6a2a; } .sq.spec11 { --specc: #d6e6f4; } .sq.spec12 { --specc: #c8a060; }
.sq.spec8 { box-shadow: inset 0 0 14px rgba(255, 211, 106, .55); }
.sq.spec10 { box-shadow: inset 0 0 16px rgba(255, 90, 30, .75); }
.sq.spec7 { box-shadow: inset 0 0 14px rgba(192, 64, 94, .55); }
.mapprev i.s7 { background: #c0405e; } .mapprev i.s8 { background: #ffd36a; } .mapprev i.s9 { background: #8a8a94; } .mapprev i.s10 { background: #ff6a2a; } .mapprev i.s11 { background: #d6e6f4; } .mapprev i.s12 { background: #c8a060; }
.rules .rulesp { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.35em; margin-right: .3em; position: relative; }
.rules .rulesp .specic { position: static; width: 100%; height: 100%; }
/* les cases des hauts Cercles se voient bien : grand dessin au centre quand la case est vide (pastille dans le coin sous un perso) */
#board .sq:is(.spec7, .spec8, .spec9, .spec10, .spec11, .spec12):not(:has(.pc)) .specic { width: 62%; height: 62%; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); opacity: .92; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
#board.tri .sq.tup:is(.spec7, .spec8, .spec9, .spec10, .spec11, .spec12):not(:has(.pc)) .specic { width: 40%; height: 40%; top: 62%; }
#board.tri .sq.tdn:is(.spec7, .spec8, .spec9, .spec10, .spec11, .spec12):not(:has(.pc)) .specic { width: 40%; height: 40%; top: 38%; }
#board .sq.spec10 { background-image: radial-gradient(circle at 50% 55%, rgba(255, 120, 30, .55), rgba(140, 30, 10, .35) 70%); }