:root {
  --bg: #0b0e16; --panel: #161a26; --panel2: #1e2333; --line: #2c3248; --text: #eef1f8; --dim: #a3abc0;
  --accent: #9db3df; --gold: #ffd166; --good: #6dffae; --bad: #ff6b6b; --blue: #7cc4ff; --era-bg: #121521;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; }
kbd { font: 700 12px system-ui; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }
.ico { flex: none; vertical-align: -0.22em; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 18px; }

/* ---------- puces (chiffre + symbole) ---------- */
.ch { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9px; background: rgba(255,255,255,0.08); font-size: 14px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.06); }
.ch b { font-weight: 800; }
.ch i { font-style: normal; font-weight: 800; background: rgba(255,255,255,0.14); border-radius: 6px; padding: 0 5px; margin-left: 2px; font-size: 12px; }
.ch.red { color: #ffb0a8; background: rgba(255,90,90,0.12); border-color: rgba(255,90,90,0.25); }
.ch.mod { color: #ffcf8a; background: rgba(255,150,60,0.14); border-color: rgba(255,170,80,0.4); }
.inf-mods { color: #ffcf8a; }
.ch.gold, .ch.goalc { color: var(--gold); background: rgba(255,209,102,0.12); border-color: rgba(255,209,102,0.28); }
.ch.green { color: var(--good); background: rgba(109,255,174,0.1); border-color: rgba(109,255,174,0.25); }
.ch.blue { color: var(--blue); background: rgba(124,196,255,0.1); border-color: rgba(124,196,255,0.25); }
.ch.off { opacity: .4; }
.ch.kind { color: #ffc7a0; background: rgba(255,140,80,0.14); border-color: rgba(255,140,80,0.3); }
.ch.rule .ico { color: #b9a3ff; } .ch.pact .ico { color: #ff7ab8; }
.ch.goal.ok { color: var(--good); background: rgba(109,255,174,0.14); }
.ch.goal.fail { opacity: .45; text-decoration: line-through; }
.ch.goal.pending { color: var(--gold); background: rgba(255,209,102,0.12); }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 11px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent)); color: #0b0e1c; font-weight: 800; cursor: pointer;
  transition: transform .1s, filter .15s, opacity .15s, box-shadow .15s; box-shadow: 0 3px 0 rgba(0,0,0,0.35); }
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.big { padding: 15px 30px; font-size: 19px; }
.btn.small { padding: 7px 13px; font-size: 14px; border-radius: 10px; }
.btn.ghost { background: rgba(255,255,255,0.07); color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost.on { background: color-mix(in srgb, var(--bad) 28%, transparent); border-color: var(--bad); }
.btn.ghost.on2 { background: rgba(255,90,90,0.16); border-color: rgba(255,120,120,0.6); }
.btn.gold { background: linear-gradient(180deg, #ffe7a8, var(--gold)); color: #2a1d00; }
.btn.danger { background: linear-gradient(180deg, #ff8a8a, #e04848); color: #fff; }
.btn.icon-btn { padding: 8px 10px; }
.btn small { font-weight: 600; opacity: .8; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.btn.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- écrans ---------- */
.screen { display: none; position: fixed; inset: 0; }
.screen.on { display: block; }
.page { height: 100%; overflow-y: auto; padding: 16px clamp(16px, 3vw, 40px) 40px; max-width: 1360px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-family: Cinzel, serif; letter-spacing: 1px; font-size: 26px; }
.ph-left b { font-size: 26px; font-family: Cinzel, serif; } .ph-left small { display: block; color: var(--accent); font-size: 15px; }
.ph-mid { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ph-right { display: flex; gap: 8px; align-items: center; }
#ch-gold { color: var(--gold); font-weight: 900; font-size: 26px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- titre ---------- */
#scr-title { display: none; place-items: center; }
#scr-title.on { display: grid; }
.title-bg { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(60% 50% at 30% 60%, rgba(255,138,61,0.2), transparent 70%),
  radial-gradient(50% 50% at 70% 40%, rgba(90,208,255,0.2), transparent 70%),
  repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.025) 0 10deg, transparent 10deg 20deg), #0a0d15; animation: drift 30s linear infinite; }
@keyframes drift { to { filter: hue-rotate(40deg); } }
.title-box { position: relative; text-align: center; padding: 24px; max-width: 680px; }
.logo { font-family: Cinzel, serif; font-weight: 900; font-size: clamp(60px, 13vw, 120px); letter-spacing: 8px; margin: 10px 0 6px;
  background: linear-gradient(180deg, #fff, #c9d6ff 60%, #8c9bd6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(120,150,255,0.35)); }
.tagline { color: var(--dim); font-size: 19px; margin: 0 0 30px; }
.title-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.title-btns .btn { min-width: 300px; }
.title-row { display: flex; gap: 12px; }
.title-row .btn { min-width: 144px !important; }
.btn.daily { background: linear-gradient(180deg, #7a5cff, #5536d6); border-color: #9d86ff; }
.life { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.life > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.life b { font-size: 20px; } .life small { grid-column: 1 / -1; color: var(--dim); font-size: 13px; }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.feat { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.feat.ok { background: rgba(255,209,102,0.1); border-color: rgba(255,209,102,0.35); }
.feat .fi { color: #666b80; } .feat.ok .fi { color: var(--gold); }
.feat b { display: block; } .feat small { color: #9aa0b8; display: block; }
.feat .fbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 4px; overflow: hidden; }
.feat .fbar i { display: block; height: 100%; background: var(--gold); }
.daily-box { text-align: center; } .daily-box .dh { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.daily-score { font-size: 54px; font-weight: 900; color: var(--gold); line-height: 1.1; }
.logo-tokens { display: flex; justify-content: center; }
.logo-tokens span { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, white), var(--c) 55%, color-mix(in srgb, var(--c) 50%, black)); border: 3px solid rgba(255,255,255,0.85); animation: bob 2.4s ease-in-out infinite; box-shadow: 0 0 30px var(--c); }
.logo-tokens span + span { margin-left: -10px; animation-delay: -1.2s; }
.logo-tokens span.pt { background-size: 118% 118%; background-position: center; border: none; width: 70px; height: 70px; box-shadow: 0 0 34px color-mix(in srgb, var(--c) 70%, transparent); }
.title-bg .tf { position: absolute; bottom: -60px; width: 34px; height: 34px; background: var(--c); opacity: 0.12; transform: scale(var(--s)); animation: tfloat var(--d) linear infinite; animation-delay: var(--dl); filter: blur(1px); }
@keyframes tfloat { from { transform: translateY(0) scale(var(--s)) rotate(0deg); } to { transform: translateY(-115vh) scale(var(--s)) rotate(240deg); } }
.title-bg .sh-circle, .title-bg .sh-blob, .title-bg .sh-ghost { border-radius: 50%; }
.title-bg .sh-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.title-bg .sh-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.title-bg .sh-hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.title-bg .sh-square, .title-bg .sh-shell, .title-bg .sh-totem, .title-bg .sh-spear { border-radius: 8px; }
.title-lang { display: flex; justify-content: center; margin-top: 14px; }
.title-rec { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; min-height: 10px; }
.logo { background: linear-gradient(180deg, #ffffff 0%, #d9e2ff 45%, #9fb2ec 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(120,150,255,0.35)); }
@keyframes bob { 50% { transform: translateY(-8px); } }
.back { display: inline-block; margin-top: 26px; color: var(--dim); text-decoration: none; font-size: 16px; }
.back:hover { color: var(--text); }

/* ---------- difficulté ---------- */
.lvl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lvl-b { padding: 8px 10px !important; }
.lvl-n { display: inline-flex; align-items: center; gap: 4px; color: #ffb0a8; font-weight: 900; }
.lvl-in { width: 64px; background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 900 22px system-ui; text-align: center; padding: 4px; }
.lvl-fx { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---------- choix des héros ---------- */
.pick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0 24px; }
.pick-card { position: relative; text-align: center; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 18px; padding: 20px 16px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pick-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.pick-card.sel { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 12px 34px rgba(0,0,0,0.45); }
.pick-card.sel::after { content: attr(data-n); position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #111; font-weight: 900; font-size: 18px; display: grid; place-items: center; }
.pick-card > b { font-size: 26px; font-family: Cinzel, serif; }
.pick-card p { margin: 0; color: var(--dim); font-size: 15px; }
.pick-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pick-chips .ico { color: var(--c); }
.pick-token { width: 92px; height: 92px; margin: 0 auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.pick-demo { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 20px; align-items: center; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid color-mix(in srgb, var(--c, #888) 35%, var(--line)); border-radius: 18px; padding: 14px 18px; margin-bottom: 22px; }
.pick-demo canvas { width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; display: block; background: #0c0f18; }
.pick-demo h3 { margin: 0 0 6px; font-family: Cinzel, serif; font-size: 24px; } .pick-demo h3 small { font: 600 15px system-ui; color: var(--dim); }
.pick-demo p { margin: 0 0 8px; color: var(--dim); } .pick-demo ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; }
@media (max-width: 760px) { .pick-demo { grid-template-columns: 1fr; } }
.pick-foot { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.pick-lvl { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; flex-wrap: wrap; }
.pick-lvl .lbl { font-weight: 800; font-size: 17px; }

/* ---------- choix des salles ---------- */
.notes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.note { background: var(--panel); border-left: 5px solid var(--accent); padding: 9px 14px; border-radius: 9px; animation: slidein .35s ease-out both; font-size: 16px; }
.note.good { border-color: var(--good); } .note.bad { border-color: var(--bad); } .note.gold { border-color: var(--gold); color: var(--gold); font-weight: 800; } .note.dim { color: var(--dim); border-color: var(--line); }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.choice-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 22px; align-items: start; }
.doors-head { display: flex; align-items: center; justify-content: space-between; font: 700 20px Cinzel, serif; margin: 2px 0 14px; }
.bchance { font: 800 16px system-ui; color: var(--gold); display: inline-flex; gap: 4px; align-items: center; }
.hsum { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--r); padding: 12px; margin-bottom: 12px; }
.hsum-main { flex: 1; min-width: 0; }
.hsum-top { display: flex; align-items: center; gap: 10px; } .hsum-top > b { font-size: 19px; flex: 1; }
.tok-img { width: 42px; height: 42px; flex: none; border-radius: 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.cb-bottom .hp-head .tok-img { width: 30px; height: 30px; }
.pick-token img { width: 100%; height: 100%; display: block; }
.pick-card:hover .pick-token img, .pick-card.sel .pick-token img { animation: bobtok 1.2s ease-in-out infinite; }
@keyframes bobtok { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.tok { width: 42px; height: 42px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, white), var(--c) 55%, color-mix(in srgb, var(--c) 50%, black)); border: 2px solid rgba(255,255,255,0.85); display: grid; place-items: center; font: 900 18px Cinzel, serif; color: rgba(0,0,0,0.55); }
.hsum-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.sk { position: relative; display: grid; place-items: center; height: 48px; background: rgba(255,255,255,0.05); border-radius: 10px; color: var(--c); }
.sk .dur { position: absolute; bottom: 2px; right: 3px; }
.sk-m { position: absolute; top: 2px; right: 4px; font: 800 12px system-ui; color: var(--gold); }
.sk.empty { color: var(--dim); border: 1px dashed var(--line); background: none; opacity: .6; }
.dur { display: inline-flex; align-items: center; gap: 2px; min-width: 20px; justify-content: center; font-size: 12px; font-weight: 900; background: rgba(0,0,0,0.5); color: var(--text); border-radius: 6px; padding: 0 4px; }
.dur.perm { color: var(--gold); }
.pct { min-width: 120px; }
.pct-num { font-weight: 900; font-size: 22px; text-align: right; }
.pct.mid .pct-num { color: #ffb347; } .pct.low .pct-num { color: var(--bad); }
.bar { position: relative; height: 10px; background: rgba(0,0,0,0.5); border-radius: 6px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--c, var(--accent)), color-mix(in srgb, var(--c, var(--accent)) 55%, white)); border-radius: 6px; transition: width .35s; }
.pct.low .bar i { background: var(--bad); }
.bar em { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--bad); box-shadow: 0 0 5px var(--bad); }
.effects { display: flex; flex-wrap: wrap; gap: 6px; }
.empty { color: var(--dim); font-size: 15px; padding: 6px 2px; display: flex; gap: 6px; align-items: center; }
.num { font-family: system-ui, 'Segoe UI', sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; }
.minimap { width: 100%; max-width: 190px; height: auto; display: block; margin: 2px auto 0; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.door { position: relative; text-align: center; cursor: pointer; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 22px 22px var(--r) var(--r); padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; transition: transform .15s, border-color .15s, box-shadow .15s; animation: slidein .4s ease-out both; }
.door:nth-child(2) { animation-delay: .06s; } .door:nth-child(3) { animation-delay: .12s; } .door:nth-child(4) { animation-delay: .18s; }
.door:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 16px 34px rgba(0,0,0,0.45); }
.door.d2 { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.door.boss { --c: #ffd166; border-color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 20%, var(--panel2)), var(--panel)); }
.door-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 6px; }
.door-top .mult { color: var(--gold); font-weight: 900; font-size: 18px; }
.door-num { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font: 900 13px system-ui; color: var(--text); background: var(--line); border-radius: 7px; padding: 1px 9px; }
.door-arch { width: 100%; height: 74px; display: grid; place-items: center; border-radius: 60px 60px 12px 12px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 28%, transparent), rgba(0,0,0,0.38) 70%); color: var(--accent); }
.door.boss .door-arch { color: var(--c); background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 38%, transparent), rgba(0,0,0,0.38) 70%); }
.door-arch.rw-pact { color: #ff7ab8; } .door-arch.rw-rule { color: #b9a3ff; } .door-arch.rw-rest { color: var(--good); } .door-arch.rw-upgrade { color: var(--gold); }
.door-kind { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--dim); }
.door h3 { margin: 0; font-size: 21px; font-family: system-ui; }
.door-line { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.dl { font-size: 15px; color: var(--dim); } .dl.good { color: var(--good); } .dl.bad { color: #ffb0a8; }
.door-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.foes, .hz { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.foes { margin-top: auto; padding-top: 4px; }
.foe { display: inline-flex; gap: 4px; align-items: center; background: rgba(0,0,0,0.32); border-radius: 8px; padding: 3px 8px; font-size: 15px; }
.foe i { width: 12px; height: 12px; background: var(--c); display: inline-block; border-radius: 50%; }
.foe i.sh-square, .foe i.sh-totem { border-radius: 2px; } .foe i.sh-triangle, .foe i.sh-spear { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; } .foe i.sh-diamond { transform: rotate(45deg); border-radius: 1px; }
.hz .ch { font-size: 13px; padding: 2px 7px; }

/* ---------- combat ---------- */
#scr-combat.on { display: grid; background: var(--era-bg);
  grid-template-columns: minmax(210px, 290px) minmax(0, 1fr) minmax(210px, 290px); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "h0 boss h1" "h0 board h1" "ctrl ctrl ctrl"; }
.cb-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(0,0,0,0.35); border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.cb-left, .cb-right { display: flex; align-items: center; gap: 8px; }
#cb-depth { display: flex; align-items: center; gap: 8px; }
#cb-depth > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font: 800 15px system-ui, sans-serif; }
#cb-depth .cbd-room b { font: 900 17px system-ui, 'Segoe UI', sans-serif; color: var(--accent, #9db3df); letter-spacing: 0.5px; }
#cb-depth .cbd-turn { color: var(--dim); }
.cb-mid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.boss-bar { grid-area: boss; display: none; align-items: center; gap: 12px; margin: 8px 10px 0; padding: 8px 14px; background: linear-gradient(90deg, rgba(60,40,0,0.6), rgba(20,14,0,0.6)); border: 1px solid rgba(255,209,102,0.45); border-radius: 12px; }
.boss-bar.on { display: flex; }
.boss-bar > b { color: var(--gold); font-size: 18px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.bb-ph { color: #ffb36b; font-weight: 800; white-space: nowrap; font-size: 15px; }
.bb-bar { position: relative; flex: 1; height: 16px; background: rgba(0,0,0,0.55); border-radius: 8px; overflow: hidden; }
.bb-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffb347, #ffd166); transition: width .35s; }
.bb-bar em { position: absolute; top: 0; bottom: 0; width: 3px; background: #ff4040; box-shadow: 0 0 6px #ff4040; }
.bb-hp { font: 900 18px system-ui; color: var(--gold); min-width: 40px; text-align: right; }
.cb-board { grid-area: board; position: relative; min-height: 0; min-width: 0; }
.cb-board canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.cb-warn { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: none; background: rgba(40,8,12,0.94); border: 2px solid var(--bad); color: #ffd6d6; padding: 6px 16px; border-radius: 11px; font-size: 16px; font-weight: 800; pointer-events: none; white-space: nowrap; z-index: 2; }
.cb-warn.on { display: flex; gap: 6px; align-items: center; }
.cb-warn.good { border-color: var(--good); color: var(--good); background: rgba(8,30,18,0.94); }
#hp-0 { grid-area: h0; } #hp-1 { grid-area: h1; }
.hero-panel { min-width: 0; min-height: 0; padding: 10px; overflow-y: auto; }
.cb-ctrl { grid-area: ctrl; display: flex; gap: 10px; align-items: stretch; padding: 8px 12px 10px; background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.06); }
.cb-ctrl #btn-end { min-width: 220px; }
.hp-in { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer; transition: border-color .15s, opacity .15s, box-shadow .15s; }
.hp-in.sel { border-color: var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.hp-in.done { opacity: .6; }
.hp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hp-head .nm { flex: 1; min-width: 0; font-size: 19px; }
.sts { display: flex; gap: 4px; }
.sts .ch { padding: 2px 6px; font-size: 13px; }
.hp-in .pct { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.hp-in .pct-num { font-size: 28px; min-width: 64px; text-align: left; }
.fut { font-size: 15px; margin: -2px 0 10px; padding: 4px 10px; border-radius: 9px; background: rgba(255,255,255,0.05); display: flex; gap: 6px; align-items: center; }
.fut.bad { color: #ffb0a0; background: rgba(255,80,80,0.1); } .fut.bad b { color: var(--bad); font-size: 17px; } .fut.ok { color: var(--good); }
.fut small { color: var(--dim); }
.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 7px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); cursor: pointer; min-width: 0; transition: transform .1s, border-color .15s, background .15s; }
.skb .ico { color: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 40%, transparent)); }
.skb .nm { font-size: 13px; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.skb .k { position: absolute; top: 3px; left: 7px; font-size: 12px; color: var(--dim); font-weight: 800; }
.skb .meta { display: flex; gap: 5px; align-items: center; font-size: 13px; min-height: 18px; }
.skb .meta b { color: #ffb0a0; font-size: 17px; font-weight: 900; }
.skb .mods { color: var(--gold); font-weight: 900; }
.skb:hover:not(:disabled) { border-color: var(--c); transform: translateY(-1px); }
.skb.active { background: color-mix(in srgb, var(--c) 30%, var(--panel2)); border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c), 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.skb.off { opacity: .42; }
.skb.empty { border-style: dashed; background: none; color: var(--dim); cursor: default; min-height: 72px; justify-content: center; }
.skb.empty .ico { color: var(--dim); filter: none; }
.skb .cd { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,18,0.7); border-radius: 12px; font: 900 28px system-ui; color: #fff; }
.info { background: rgba(0,0,0,0.32); border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; font-size: 15px; flex: 1; min-width: 0; height: 74px; overflow-y: auto; }
.info p { margin: 4px 0 0; color: var(--dim); font-size: 15px; }
.inf-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 800; font-size: 17px; }
.inf-h .ico { color: var(--accent); }
.inf-z { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.inf-z .tip { color: var(--dim); font-size: 14px; }
.inf-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--dim); font-size: 15px; height: 100%; }
.inf-keys span { display: inline-flex; gap: 4px; align-items: center; }

/* ---------- fenêtres ---------- */
.modal { position: fixed; inset: 0; display: none; place-items: center; background: rgba(5,6,12,0.8); z-index: 50; padding: 16px; }
.modal.on { display: grid; }
.modal-box { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; width: min(480px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,0.6); animation: pop .2s ease-out; }
.modal-box.wide { width: min(780px, 100%); }
@keyframes pop { from { transform: scale(.95); opacity: 0; } }
.modal-box h2 { margin: 0 0 14px; font-family: Cinzel, serif; display: flex; align-items: center; gap: 10px; font-size: 24px; }
.modal-box h3 { font-family: Cinzel, serif; font-size: 18px; margin: 18px 0 8px; display: flex; gap: 8px; align-items: center; } .modal-box h3 small { font-family: system-ui; color: var(--dim); font-weight: 500; font-size: 14px; }
.modal-body p { color: var(--dim); }
.modal-body .intro { color: var(--text); font-size: 17px; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; gap: 12px; align-items: center; text-align: left; background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor: pointer; transition: border-color .15s, transform .1s; font-size: 16px; }
.opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); }
.opt small { color: var(--dim); }
.opt .ch { margin-left: 4px; font-size: 13px; }
.opt .num { flex: none; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.1); display: grid; place-items: center; font-size: 14px; font-weight: 900; }
.opt-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(255,255,255,0.06); display: grid; place-items: center; color: var(--accent); }
.at-gold { font-size: 30px; color: var(--gold); display: flex; align-items: center; gap: 10px; font-weight: 900; }
.at-list { display: flex; flex-direction: column; gap: 6px; }
.at-row { display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,0.25); border-radius: 12px; padding: 9px 12px; }
.at-row > span:nth-child(2) { flex: 1; min-width: 0; } .at-row small { color: var(--dim); }
.pips { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.menu-opts { display: flex; flex-direction: column; gap: 8px; }
.slider { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.slider span { min-width: 80px; font-weight: 700; } .slider input { flex: 1; accent-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.stats div { background: rgba(0,0,0,0.25); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--accent); }
.stats b { font-size: 22px; color: var(--text); }
.help .hl { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 16px; }
.help .hl .ico { color: var(--accent); }
.help b { color: var(--accent); }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; font-size: 15px; color: var(--dim); margin-top: 12px; }
.credits { color: var(--dim); line-height: 1.8; } .credits b { color: var(--text); }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cx-tab { display: inline-flex; gap: 5px; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: 14px; font-weight: 700; }
.cx-tab.on { background: var(--accent); color: #0d1020; border-color: transparent; }
.cx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cx { background: rgba(0,0,0,0.25); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.cx-h { display: flex; gap: 6px; align-items: center; font-size: 17px; } .cx-h .ico { color: var(--accent); }
.cx-c { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .cx-c .ch { font-size: 13px; }
.cx p { margin: 6px 0 0; color: var(--dim) !important; }
.cx.unk { opacity: .55; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 60; pointer-events: none; width: min(560px, calc(100% - 32px)); }
.toast { background: rgba(20,24,36,0.96); border: 1px solid var(--line); border-left: 5px solid var(--accent); padding: 11px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); animation: slidein .25s ease-out; transition: opacity .35s, transform .35s; text-align: center; font-size: 17px; font-weight: 700; }
body[data-screen="scr-combat"] .toasts { top: auto; bottom: calc(26vh + 8px); }
.toast.bad { border-left-color: var(--bad); } .toast.out { opacity: 0; transform: translateY(-8px); }

/* ---------- petits écrans ---------- */
@media (max-width: 960px) {
  .choice-grid { grid-template-columns: 1fr; }
  .choice-main { order: -1; }
  #scr-combat.on { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(170px, 210px); }
  .hero-panel { padding: 6px; }
  .hp-in { padding: 8px; }
  .hp-in .pct-num { font-size: 22px; min-width: 52px; }
  .skb { padding: 7px 2px 5px; } .skb .nm { font-size: 11px; }
  .cb-ctrl #btn-end { min-width: 150px; } .cb-ctrl .btn.big { padding: 11px 16px; font-size: 16px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .cb-right .btn { font-size: 0; gap: 0; } .cb-right .btn .ico { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  #scr-combat.on { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "top top" "boss boss" "board board" "h0 h1" "ctrl ctrl"; }
  .hero-panel { padding: 4px 6px; overflow: visible; }
  .skills { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .skb .meta, .skb .nm { display: none; } .skb { padding: 9px 2px; } .skb.empty { min-height: 44px; }
  .hp-head .sts, .fut small { display: none; }
  .hp-in .pct { margin-bottom: 4px; }
  .fut { margin-bottom: 6px; font-size: 13px; }
  .cb-ctrl { flex-wrap: wrap; padding: 6px 8px 8px; } .info { order: -1; flex-basis: 100%; height: 58px; }
  .cb-ctrl #btn-end { flex: 1; }
  .cb-top { padding: 6px 8px; } .cb-mid { order: 3; width: 100%; } .cb-mid .ch { font-size: 12px; padding: 2px 6px; }
  .cb-warn { white-space: normal; width: 90%; justify-content: center; text-align: center; font-size: 14px; }
  .boss-bar { margin: 6px 6px 0; padding: 6px 10px; } .bb-ph { display: none; }
  .title-btns .btn { min-width: 0; width: 100%; }
  .door h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.lvl.locked { gap: 8px; } .lvl-v { font: 900 24px system-ui; color: #ffb0a8; }
body, button, .screen { -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; }

/* infobulle flottante */
.tip { position: fixed; z-index: 70; display: none; max-width: 340px; background: rgba(14,17,27,0.97); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); pointer-events: none; }
.tip.on { display: block; }
.tip p { margin: 5px 0 0; color: var(--dim); }
.info { height: auto; min-height: 44px; display: flex; align-items: center; }
/* dégâts / maximum */
.dmg { font-weight: 900; color: #ffb0a0; } .dmg small { color: var(--dim); font-weight: 700; font-size: .8em; }
.dmg.over { color: #ff8a3a; }
.skb .meta .dmg { font-size: 16px; }
/* statistiques des héros */
.hsum { flex-direction: column; gap: 8px; }
.hsum-top { display: flex; align-items: center; gap: 10px; }
.hs-name { flex: 1; } .hs-name b { font-size: 19px; display: block; } .hs-name small { color: var(--c); }
.hs-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.hs-rows { display: flex; flex-direction: column; gap: 5px; }
.hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; background: rgba(0,0,0,0.22); border-radius: 10px; padding: 6px 8px; font-size: 14px; }
.hrow b { margin-right: 2px; } .hr-ico { color: var(--c); display: inline-flex; }
.hrow.empty { color: var(--dim); opacity: .6; border: 1px dashed var(--line); background: none; }
.hrow .ch { font-size: 12px; padding: 2px 6px; }
.choice-grid { grid-template-columns: minmax(300px, 400px) 1fr; }
.toast.gold { border-left-color: var(--gold); color: var(--gold); } .toast.dim { color: var(--dim); } .toast.good { border-left-color: var(--good); }
/* Codex animé */
.modal-box.huge { width: min(1040px, 100%); }
.cx2 { display: grid; grid-template-columns: 230px 1fr; gap: 14px; min-height: 380px; }
.cx-items { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.cx-item { display: flex; align-items: center; gap: 8px; text-align: left; background: rgba(0,0,0,0.22); border: 1px solid transparent; border-radius: 10px; padding: 7px 10px; cursor: pointer; font-size: 15px; font-weight: 700; }
.cx-item:hover { border-color: var(--line); } .cx-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cx-item .ico { color: var(--accent); }
.cx-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 8px currentColor; }
.cx-detail { background: rgba(0,0,0,0.25); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cx-detail h3 { margin: 4px 0 0; font-size: 22px; display: flex; gap: 8px; align-items: center; }
.cx-detail p { color: var(--text) !important; font-size: 16px; margin: 0; line-height: 1.45; }
.cx-canvas { width: 100%; height: 250px; display: block; border-radius: 12px; background: #0a0d15; }
.cx-big { height: 140px; display: grid; place-items: center; color: var(--accent); background: rgba(0,0,0,0.25); border-radius: 12px; }
@media (max-width: 760px) { .cx2 { grid-template-columns: 1fr; } .cx-items { flex-direction: row; flex-wrap: wrap; max-height: 150px; } .cx-canvas { height: 200px; } }

/* ---------- 3 héros : plateau large, héros en bas ---------- */
#scr-combat.on { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "boss" "board" "bottom"; }
.cb-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 210px; gap: 8px; padding: 8px 10px 10px; background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.06); }
#hp-0, #hp-1, #hp-2 { grid-area: auto; }
.cb-bottom .hero-panel { padding: 0; overflow: visible; min-height: 0; }
.cb-bottom .hp-in { padding: 8px 10px; height: 100%; }
.cb-bottom .hp-head { margin-bottom: 4px; }
.cb-bottom .hp-in .pct { margin-bottom: 4px; } .cb-bottom .hp-in .pct-num { font-size: 22px; min-width: 56px; }
.cb-bottom .fut { margin: 0 0 6px; font-size: 13px; padding: 2px 8px; }
.cb-bottom .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.cb-bottom .skb { padding: 8px 2px 5px; } .cb-bottom .skb .nm { font-size: 11px; } .cb-bottom .skb .meta .dmg { font-size: 14px; }
.cb-bottom .skb.empty { min-height: 58px; }
.cb-bottom .cb-ctrl { grid-area: auto; display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; }
.cb-bottom .cb-ctrl #btn-end { min-width: 0; width: 100%; flex: 1; font-size: 18px; }
.cb-bottom .cb-ctrl #btn-undo { width: 100%; }
.cb-bottom .cb-ctrl .info { display: none; }
.boss-bar { margin: 6px 10px 0; }
.logo-tokens span + span + span { animation-delay: -0.6s; }
.tip-t { font-size: 15px; line-height: 1.4; }
@media (max-width: 1100px) {
  .cb-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-bottom .cb-ctrl { grid-column: 1 / -1; flex-direction: row; } .cb-bottom .cb-ctrl #btn-end { flex: 2; } .cb-bottom .cb-ctrl #btn-undo { width: auto; flex: 1; }
  .cb-bottom .skb .nm { display: none; }
}
@media (max-width: 640px) {
  #scr-combat.on { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "boss" "board" "bottom"; }
  .cb-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px 4px 6px; }
  .cb-bottom .hp-in { padding: 5px; } .cb-bottom .hp-head .nm { font-size: 13px; } .cb-bottom .hp-head .tok, .cb-bottom .hp-head .tok-img { display: none; }
  .cb-bottom .hp-in .pct { grid-template-columns: 1fr; } .cb-bottom .hp-in .pct-num { font-size: 16px; min-width: 0; }
  .cb-bottom .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .cb-bottom .skb .meta { display: none; } .cb-bottom .skb.empty { min-height: 36px; }
  .cb-bottom .fut { font-size: 11px; }
}

/* =========================================================
   TÉLÉPHONES ET TABLETTES
   ========================================================= */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, .btn, .door, .skb, .pick-card { touch-action: manipulation; }
@media (pointer: coarse) { .btn { min-height: 42px; } .icon-btn { min-width: 42px; } }

/* écran des portes sur écran étroit : une seule colonne, les portes d'abord */
@media (max-width: 860px) {
  .choice-grid { grid-template-columns: 1fr; gap: 14px; }
  .choice-main { order: 1; } .choice-side { order: 2; }
  .choice-side #ch-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
  .doors { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
  .page-head { gap: 8px; } .ph-mid { gap: 8px; }
}
@media (max-width: 520px) {
  .page { padding: 10px 10px 30px; }
  .page-head h2, #ch-depth { font-size: 20px; }
  .doors { grid-template-columns: 1fr; }
  .door h3 { font-size: 18px; } .minimap { max-width: 150px; }
  .title-btns .btn { min-width: 0; width: 100%; } .title-row { width: 100%; } .title-row .btn { flex: 1; min-width: 0 !important; }
  .tagline { font-size: 16px; }
}

/* combat sur téléphone ou tablette tenu à l'horizontale (peu de hauteur) :
   héros à gauche, plateau au centre, boutons à droite */
@media (max-height: 600px) and (orientation: landscape) {
  #scr-combat.on {
    grid-template-columns: minmax(170px, 23vw) minmax(0, 1fr) minmax(92px, 12vw);
    grid-template-rows: auto auto repeat(3, minmax(0, 1fr));
    grid-template-areas: "top top top" "boss boss boss" "h0 board ctrl" "h1 board ctrl" "h2 board ctrl";
  }
  .cb-bottom { display: contents; }
  #hp-0 { grid-area: h0; } #hp-1 { grid-area: h1; } #hp-2 { grid-area: h2; }
  .cb-bottom .hero-panel { padding: 3px 4px; overflow: hidden; }
  .cb-bottom .hp-in { padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .cb-bottom .hp-head { margin: 0; } .cb-bottom .hp-head .tok-img { display: none; } .cb-bottom .hp-head .nm { font-size: 13px; }
  .cb-bottom .hp-head .sts .ch { font-size: 11px; padding: 1px 4px; }
  .cb-bottom .hp-in .pct { margin: 0; } .cb-bottom .hp-in .pct-num { font-size: 15px; min-width: 40px; }
  .cb-bottom .fut { display: none; }
  .cb-bottom .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .cb-bottom .skb { padding: 4px 1px 3px; border-radius: 8px; } .cb-bottom .skb .nm { display: none; } .cb-bottom .skb .meta .dmg { font-size: 11px; }
  .cb-bottom .skb .k { display: none; } .cb-bottom .skb.empty { min-height: 30px; } .cb-bottom .skb .ico { width: 18px; height: 18px; }
  .cb-bottom .cb-ctrl { grid-area: ctrl; flex-direction: column; padding: 6px; gap: 6px; }
  .cb-bottom .cb-ctrl #btn-end { flex: 1; font-size: 15px; padding: 6px; } .cb-bottom .cb-ctrl #btn-end kbd { display: none; }
  .cb-bottom .cb-ctrl #btn-undo { width: 100%; flex: none; font-size: 13px; padding: 6px 4px; }
  .cb-top { padding: 3px 8px; gap: 6px; flex-wrap: nowrap; } .cb-top .btn { padding: 4px 8px; min-height: 34px; font-size: 13px; }
  .cb-mid { order: 0; width: auto; overflow: hidden; } .cb-mid .ch { font-size: 12px; padding: 2px 6px; }
  #btn-preview span, #btn-danger span, #btn-flee span { display: none; }
  #cb-depth > span { padding: 2px 8px; font-size: 13px; } #cb-depth .cbd-room b { font-size: 14px; }
  .boss-bar { margin: 2px 8px 0; padding: 3px 10px; font-size: 13px; }
  body[data-screen="scr-combat"] .toasts { bottom: 10px; top: auto; width: min(420px, 60vw); }
  .toast { font-size: 14px; padding: 7px 12px; }
}

/* téléphone tenu à la verticale pendant un combat : on conseille de le tourner */
.lang-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lang-row > span { display: inline-flex; gap: 6px; align-items: center; color: var(--dim); font-weight: 700; margin-right: 4px; }
.pad-focus { outline: 3px solid #ffd166 !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,209,102,0.25) !important; }
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  body[data-screen="scr-combat"]:not(.keep-portrait) .rotate-hint { display: flex; }
}
.rotate-hint { position: fixed; inset: 0; z-index: 80; background: rgba(6,8,14,0.94); flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; }
.rotate-hint .ph { width: 70px; height: 110px; border: 4px solid var(--text); border-radius: 14px; animation: rotph 2.2s ease-in-out infinite; }
@keyframes rotph { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.rotate-hint p { font-size: 20px; font-weight: 800; margin: 0; }

/* aucun texte sélectionnable (les champs de saisie restent utilisables) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }