/* =====================================================================
   OSWEL'S TRAP — style.css  (version 4)
   Ambiance : atelier de forge la nuit. Suie, laiton, métal chauffé.
   Un seul thème sombre, volontairement : c'est un écran d'arcade.
   ===================================================================== */
/* Mise en page : jeu plein écran, menus en plaques de métal par-dessus la scène 3D */
:root {
  --soot: #120d0b;
  --plate: #221a16;
  --plate-2: #2e241e;
  --edge: #5a4a3e;
  --steel: #ede4d6;
  --muted: #a8998a;
  --molten: #ffb347;
  --molten-deep: #ff7a1a;
  --p1: #3d8bff;
  --p2: #ff8a2b;
  --ok: #3cff9a;
  --danger: #ff5533;
  --paper: #efe4d0;
  --ink: #2a1d15;
  --font-display: 'Bungee', 'Impact', 'Arial Black', sans-serif;
  --font-body: 'Chakra Petch', 'Segoe UI', 'Roboto', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* L'écran du jeu ne bouge JAMAIS : pas de défilement de la page, pas de rebond, pas de zoom.
   Seuls les panneaux de menu défilent, à l'intérieur d'eux-mêmes. */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--soot); color: var(--steel); font-family: var(--font-body); font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ic { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.25em; }

/* ---------- Écrans ---------- */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 30% 40%, rgba(18,13,11,0.4), rgba(18,13,11,0.88)); overflow: hidden; touch-action: none; overscroll-behavior: none; }
/* le panneau du menu : il tient dans l'écran et défile à l'intérieur s'il est trop long */
.screen > .panel, .screen > .title-wrap, .screen > article, .scrolly { max-height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--molten-deep) transparent; }
.screen > .panel::-webkit-scrollbar, .screen > .title-wrap::-webkit-scrollbar, .screen > article::-webkit-scrollbar { width: 6px; }
.screen > .panel::-webkit-scrollbar-thumb, .screen > .title-wrap::-webkit-scrollbar-thumb, .screen > article::-webkit-scrollbar-thumb { background: var(--molten-deep); border-radius: 3px; }
.screen > .panel { flex: 0 1 auto; }
#screen-title { justify-content: flex-start; background: linear-gradient(90deg, rgba(18,13,11,0.94) 0%, rgba(18,13,11,0.62) 45%, rgba(18,13,11,0) 75%); }
.title-wrap { max-width: 520px; padding-left: clamp(0px, 4vw, 64px); display: grid; gap: 12px; margin-block: auto; }
.kicker { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--molten); font-weight: 700; }
.logo { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 0.88; font-size: clamp(3rem, 11vw, 6.4rem); display: grid; }
.logo span:first-child { color: var(--steel); text-shadow: 0 4px 0 #000; }
.logo span:last-child { background: linear-gradient(180deg, #fff3c4 0%, var(--molten) 40%, var(--molten-deep) 75%, #8a2a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,122,26,0.45)); }
.tag { margin: 0; color: var(--muted); font-size: 1.05rem; }
.foot { margin: 6px 0 0; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; }
.who { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(34,26,22,0.85); border: 1px solid var(--edge); border-radius: 999px; color: var(--steel); font: 600 0.92rem var(--font-body); cursor: pointer; }
.who .coins { color: #ffcc33; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3); flex: 0 0 auto; }
.dot.big { width: 28px; height: 28px; }

.menu { display: grid; gap: 8px; max-width: 380px; }
.menu.row { display: flex; flex-wrap: wrap; max-width: none; }
.btn, .mode, .opt, .lvl, .pcard, .world, .item, .qopt, .tab, .swatch { font: inherit; color: inherit; cursor: pointer; border: 0; text-align: left; }
.btn { position: relative; padding: 12px 18px; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.02em; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; transition: transform 0.08s, border-color 0.12s, background 0.12s; }
.btn.primary { background: linear-gradient(180deg, #3a2a1f, #2a1d15); border-color: var(--molten-deep); color: #fff3e2; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.danger { border-color: var(--danger); color: #ffd6cc; }
.btn.small { padding: 8px 10px; font-size: 0.85rem; }
.btn.focus, .btn:focus-visible { border-color: var(--molten); background: var(--plate-2); transform: translateX(6px); outline: none; box-shadow: -6px 0 0 var(--molten); }
.btn.ghost.focus { color: var(--steel); }

.panel { width: min(640px, 100%); background: linear-gradient(180deg, rgba(34,26,22,0.97), rgba(26,20,17,0.97)); border: 2px solid var(--edge); border-radius: 6px; padding: clamp(18px, 4vw, 32px); display: grid; gap: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); position: relative; margin: auto; }
.panel::before, .panel::after { content: ''; position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #8a7a6b; box-shadow: 0 1px 0 #000; }
.panel::before { left: 10px; } .panel::after { right: 10px; }
.panel.wide { width: min(980px, 100%); }
.panel.narrow { width: min(500px, 100%); }
.panel.center { text-align: center; } .panel.center .menu { margin: 0 auto; }
.panel h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 4.5vw, 2.3rem); text-wrap: balance; }
.panel h3 { margin: 4px 0 0; font-size: 0.95rem; color: var(--molten); letter-spacing: 0.08em; text-transform: uppercase; }
.panel h4 { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--muted); margin: 0; } .small { font-size: 0.85rem; }
.err { color: var(--danger); margin: -6px 0 0; min-height: 1em; font-size: 0.9rem; }

/* Champ de saisie */
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.field input { font: 700 1.2rem var(--font-body); color: var(--steel); background: #15100d; border: 2px solid var(--edge); border-radius: 4px; padding: 12px 14px; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.field input:focus, .field input.focus { outline: none; border-color: var(--molten); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; background: var(--plate); border: 2px solid var(--edge); border-radius: 999px; font-size: 0.9rem; font-weight: 600; }
.swatch span { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.swatch.on { border-color: var(--c); background: var(--plate-2); }
.swatch.focus { outline: 2px solid var(--molten); outline-offset: 2px; }

/* Profils */
.plist { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.prow { display: flex; gap: 6px; align-items: stretch; }
.pcard { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; }
.pinfo { display: grid; gap: 2px; min-width: 0; }
.pinfo b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinfo small { color: var(--muted); }
.pcard em { margin-left: auto; color: var(--ok); font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pcard.focus { border-color: var(--molten); background: var(--plate-2); }
.prow.active .pcard { border-color: #2f6b4a; }
.confirm { padding: 12px; border: 2px solid var(--danger); border-radius: 4px; background: rgba(255,85,51,0.08); display: grid; gap: 10px; }
.confirm p { margin: 0; } .confirm .row { display: flex; gap: 8px; }

.modes { display: grid; gap: 10px; }
.mode { display: grid; gap: 4px; padding: 14px 16px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; }
.mode b { font-size: 1.15rem; } .mode span { color: var(--muted); font-size: 0.92rem; }
.mode.focus { border-color: var(--molten); background: var(--plate-2); box-shadow: -6px 0 0 var(--molten); }

/* Mondes : grandes cartes avec image */
#world-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.world { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: var(--plate); border: 2px solid var(--edge); border-radius: 6px; overflow: hidden; padding: 0; }
.wimg { display: block; aspect-ratio: 4 / 5; max-width: 100%; background-size: cover; background-position: center; }
.wtxt { display: grid; gap: 3px; padding: 10px; }
.wn { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--molten); font-weight: 700; }
.wtxt b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.wtxt small { color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.wtxt em { font-style: normal; font-size: 0.78rem; color: var(--ok); }
.world.locked .wimg { filter: grayscale(0.8) brightness(0.55); }
.world.locked em { color: var(--muted); }
.world.focus { border-color: var(--molten); transform: translateY(-4px); box-shadow: 0 6px 0 var(--molten); }

/* Niveaux */
#level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lvl { min-width: 0; display: grid; gap: 4px; align-content: start; padding: 10px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; min-height: 104px; }
.lvl .n { font-family: var(--font-display); font-size: 1.05rem; color: var(--molten); }
.lvl .t { font-weight: 700; font-size: 0.92rem; line-height: 1.15; }
.lvl .s { color: var(--muted); font-size: 0.78rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lvl.done { border-color: #2f6b4a; } .lvl.done .n::after { content: ' ✓'; color: var(--ok); }
.lvl.boss { background: linear-gradient(180deg, #3a1d10, #24130b); border-color: #7a3a14; }
.lvl:disabled { opacity: 0.38; cursor: not-allowed; }
.lvl.focus { border-color: var(--molten); transform: translateY(-3px); box-shadow: 0 4px 0 var(--molten); }

/* Options, touches */
.opts { display: grid; gap: 6px; }
.opt { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; }
.opt b { color: var(--molten); font-size: 0.9rem; text-align: right; }
.opt.focus { border-color: var(--molten); background: var(--plate-2); }
.kbd { display: inline-block; min-width: 1.6em; padding: 2px 8px; border-radius: 4px; background: #ffd28a; color: #1a120c; font-weight: 700; text-align: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }
.opt b.kbd { font-size: 0.9rem; color: #1a120c; }
.pads { margin: 0; padding: 10px 12px; border-left: 3px solid var(--p1); background: rgba(61,139,255,0.08); font-size: 0.88rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { padding: 8px 12px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; font-weight: 700; font-size: 0.88rem; }
.tab.on { background: var(--plate-2); border-color: var(--molten-deep); color: #fff3e2; }
.tab.focus { border-color: var(--molten); }
#bind-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(8,6,5,0.8); padding: 16px; }
#bind-msg { margin: 0; font-size: 1.1rem; }

.ctrl-wrap { overflow-x: auto; }
.ctrl { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.92rem; }
.ctrl th, .ctrl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--edge); }
.ctrl th { color: var(--molten); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ctrl td:first-child { font-weight: 700; }

/* Fin de niveau */
.done blockquote { margin: 0; padding: 16px 18px; border-left: 4px solid var(--molten); background: rgba(255,179,71,0.07); font-size: clamp(1.1rem, 3vw, 1.3rem); line-height: 1.4; font-weight: 600; text-wrap: balance; }
.done blockquote[data-tone="troll"] { border-color: #b78cff; background: rgba(183,140,255,0.08); }
.done blockquote[data-tone="drôle"] { border-color: var(--p2); }
.done blockquote[data-tone="épique"] { border-color: var(--danger); }
.stats { color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.rewards { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rewards li { padding: 6px 10px; background: rgba(255,204,51,0.08); border-left: 3px solid #ffcc33; }
.c1 { color: var(--p1); } .c2 { color: var(--p2); }

/* Leçon : fiche d'atelier sur papier quadrillé */
.lesson-card { width: min(640px, 100%); margin: auto; padding: clamp(22px, 5vw, 40px); background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); display: grid; gap: 14px; background-image: linear-gradient(rgba(60,120,180,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(60,120,180,0.12) 1px, transparent 1px); background-size: 24px 24px; border-top: 10px solid #2b6fb5; }
.lesson-card .kicker { color: #2b6fb5; }
.lesson-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 4vw, 2rem); }
#lesson-text { margin: 0; font-size: 1.12rem; line-height: 1.6; max-width: 60ch; font-weight: 600; }
.note { margin: 0; font-size: 0.9rem; color: #5a4636; }
.lesson-card .btn.primary { color: #fff3e2; }
.lesson-card .btn.ghost { color: #5a4636; }
.lesson-card .btn.focus { box-shadow: -6px 0 0 #2b6fb5; border-color: #2b6fb5; }

/* Quiz */
.quiz { width: min(720px, 100%); }
.qbar { height: 8px; background: #2a1a10; border-radius: 4px; overflow: hidden; }
#quiz-bar { height: 100%; background: linear-gradient(90deg, var(--molten-deep), var(--molten)); transition: width 0.4s; }
#quiz-q { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.15rem, 3vw, 1.45rem); line-height: 1.3; }
#quiz-opts { display: grid; gap: 8px; }
.qopt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; font-size: 1rem; font-weight: 600; }
.ql { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #3a2a1f; color: var(--molten); font-weight: 700; }
.qopt.focus { border-color: var(--molten); background: var(--plate-2); }
.qopt.right { border-color: var(--ok); background: rgba(60,255,154,0.1); }
.qopt.wrong { border-color: var(--danger); background: rgba(255,85,51,0.1); }
.qopt:disabled { cursor: default; }
#quiz-feedback { display: grid; gap: 8px; padding: 12px; border-radius: 4px; background: rgba(255,255,255,0.04); }
#quiz-verdict { margin: 0; font-weight: 700; font-size: 1.1rem; }
#quiz-verdict.good { color: var(--ok); } #quiz-verdict.bad { color: var(--danger); }
#quiz-explain { margin: 0; color: var(--steel); }
.bigscore { font-family: var(--font-display); font-size: clamp(3rem, 12vw, 5rem); color: var(--molten); line-height: 1; }
.gain { margin: 0; color: #ffcc33; font-weight: 700; min-height: 1em; }

/* Chapitre */
.chapter { width: min(680px, 100%); margin: auto; padding: clamp(22px, 5vw, 48px); background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); display: grid; gap: 14px; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,50,30,0.08) 31px 32px); }
.chapter .kicker { color: #a2470f; }
.chapter h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 4vw, 2rem); }
#chap-body p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
#chap-body .last { font-weight: 700; font-size: 1.18rem; color: #a2470f; border-top: 2px solid rgba(80,50,30,0.25); padding-top: 14px; }
.chapter .btn.primary { justify-self: start; color: #fff3e2; }

/* Carnet */
#carnet-list { display: grid; gap: 12px; max-height: 58vh; overflow-y: auto; padding-right: 4px; }
.frags, .lessons { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.frags li, .lessons li { padding: 10px 12px; background: var(--plate); border-left: 3px solid var(--molten); }
.lessons li { border-color: #2b6fb5; }
.frags li.locked { border-color: var(--edge); opacity: 0.5; }
.frags .k, .lessons .k { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; display: block; }
.frags p, .lessons p { margin: 4px 0 0; }
.frags p { font-weight: 600; }
.lessons b { display: block; margin-top: 2px; }

/* Boutique */
.shop-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.purse { font: 700 1.4rem var(--font-body); color: #ffcc33; font-variant-numeric: tabular-nums; }
.shop-body { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; }
.preview { min-width: 0; height: 260px; border-radius: 6px; background: radial-gradient(circle at 50% 70%, rgba(255,140,60,0.25), rgba(0,0,0,0) 60%), #15100d; border: 2px solid var(--edge); overflow: hidden; }
.preview canvas { width: 100%; height: 100%; display: block; }
.shop-lists { min-width: 0; display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.item { min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; background: var(--plate); border: 2px solid var(--edge); border-radius: 4px; }
.item .dot, .item .acc-ic { grid-row: span 2; }
.acc-ic { width: 28px; height: 28px; color: var(--muted); } .acc-ic svg { width: 100%; height: 100%; }
.iname { font-weight: 700; font-size: 0.88rem; line-height: 1.15; }
.iprice { font-size: 0.8rem; color: #ffcc33; font-variant-numeric: tabular-nums; }
.item.eq { border-color: var(--ok); } .item.eq .iprice { color: var(--ok); }
.item.poor .iprice { color: var(--muted); }
.item.focus { border-color: var(--molten); background: var(--plate-2); }

/* ---------- HUD ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top, 0px)) 72px 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
#hud-title { font-family: var(--font-display); font-size: clamp(0.9rem, 2.2vw, 1.2rem); text-shadow: 0 2px 0 #000; }
.hud-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 0.85rem; align-items: center; }
.chip { padding: 2px 8px; background: rgba(18,13,11,0.78); border: 1px solid var(--edge); border-radius: 3px; }
.chip b { color: var(--danger); }
.coinchip { color: #ffcc33; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }
#hud-extra { color: var(--molten); text-shadow: 0 1px 0 #000; }
#hud-goal { margin-top: 4px; font-size: 0.85rem; color: var(--steel); text-shadow: 0 1px 2px #000; max-width: min(560px, 60vw); }
.goalline { margin: 0; padding: 8px 12px; border-left: 3px solid var(--molten); background: rgba(255,179,71,0.08); }
#goal-banner { position: fixed; z-index: 11; left: 50%; top: 32%; transform: translate(-50%, -50%); display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 22px; background: rgba(18,13,11,0.9); border: 2px solid var(--molten); border-radius: 6px; pointer-events: none; max-width: calc(100% - 32px); }
#goal-banner span { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--molten); font-weight: 700; }
#goal-banner b { font-size: clamp(1rem, 2.6vw, 1.3rem); }
#goal-banner.go { animation: goalIn 4s ease forwards; }
@keyframes goalIn { 0% { opacity: 0; transform: translate(-50%, -40%); } 8% { opacity: 1; transform: translate(-50%, -50%); } 85% { opacity: 1; } 100% { opacity: 0; } }
#hud-vs { font-family: var(--font-display); font-size: 1.05rem; padding: 4px 12px; background: rgba(18,13,11,0.8); border: 1px solid var(--edge); }
.pausebtn { position: fixed; z-index: 12; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right)); width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--edge); background: rgba(18,13,11,0.8); color: var(--steel); font: 700 1rem var(--font-body); cursor: pointer; }
#bossbar { position: fixed; z-index: 10; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 8px 12px; background: rgba(18,13,11,0.85); border: 2px solid #7a3a14; pointer-events: none; }
.bb-top { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.bb-top b { font-family: var(--font-display); font-weight: 400; color: var(--molten-deep); }
.bb-track { height: 8px; margin: 6px 0; background: #2a1a10; }
#boss-fill { height: 100%; background: linear-gradient(90deg, var(--molten-deep), var(--molten)); transition: width 0.6s; }
#boss-help { font-size: 0.82rem; color: var(--muted); }
/* 1.5 : l'aide repliée (une ligne) ; elle se déplie toute seule à chaque nouvelle consigne ou après des échecs */
#boss-help.replie::after { content: '  (aide complète : pause)'; opacity: .55; font-size: .72rem; }
.bossline { font-size: .85rem; opacity: .85; max-width: 60ch; margin-inline: auto; }
.bossline:empty { display: none; }
#flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,60,30,0) 40%, rgba(255,60,30,0.45)); opacity: 0; }
#flash.go { animation: flash 0.45s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.bubble { position: absolute; left: 0; top: 0; max-width: min(300px, 70vw); padding: 8px 12px; background: rgba(18,13,11,0.92); border: 2px solid var(--molten); border-radius: 6px; font-size: 0.9rem; line-height: 1.3; display: grid; gap: 2px; }
.bubble b { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

#dialog { position: fixed; z-index: 30; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(760px, calc(100% - 32px)); display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: rgba(26,20,17,0.97); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); cursor: pointer; }
#dlg-face { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; color: #120d0b; border: 3px solid rgba(0,0,0,0.35); }
.dlg-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
#dlg-name { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; }
#dlg-text { font-size: clamp(1rem, 2.6vw, 1.15rem); line-height: 1.4; min-height: 2.8em; }
#dlg-hint { justify-self: end; color: var(--muted); font-size: 0.8rem; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
#toast { position: fixed; z-index: 40; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); padding: 8px 14px; background: rgba(18,13,11,0.94); border: 1px solid var(--molten); border-radius: 4px; font-size: 0.9rem; max-width: calc(100% - 32px); }

/* ---------- Tactile ---------- */
#touch { position: fixed; inset: auto 0 0 0; z-index: 15; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left)); pointer-events: none; }
.tc { display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.tbtn { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(34,26,22,0.55); border: 2px solid rgba(233,225,214,0.35); color: var(--steel); font-size: 1.6rem; font-weight: 700; touch-action: none; backdrop-filter: blur(2px); }
.tbtn.big { width: 92px; height: 92px; font-size: 1rem; letter-spacing: 0.06em; border-color: rgba(255,179,71,0.7); }
.tbtn.small { width: 58px; height: 58px; font-size: 0.62rem; letter-spacing: 0.06em; }
.tbtn.j { border-color: rgba(255,179,71,0.7); }
.tbtn.on { background: rgba(255,179,71,0.45); border-color: var(--molten); transform: scale(0.94); }
.tc.p1 .tbtn { border-color: rgba(61,139,255,0.7); } .tc.p2 .tbtn { border-color: rgba(255,138,43,0.7); }
.tc.p1 .tbtn, .tc.p2 .tbtn { width: 60px; height: 60px; font-size: 1.3rem; }
.tc.p1 .tbtn.small, .tc.p2 .tbtn.small { width: 44px; height: 44px; font-size: 1rem; }

#rotate, #boot-error { position: fixed; inset: 0; z-index: 100; background: var(--soot); display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 24px; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid var(--molten); border-radius: 8px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

@media (max-width: 860px) {
  #world-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-body { grid-template-columns: 1fr; } .preview { height: 180px; }
}
@media (max-width: 560px) {
  #world-list, #level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 520px) {
  .logo { font-size: clamp(2.2rem, 9vh, 4rem); }
  .title-wrap { gap: 6px; } .btn { padding: 7px 14px; }
  .lvl { min-height: 80px; }
  #world-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } .wimg { aspect-ratio: 16 / 10; }
  #dialog { padding: 10px 12px; top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; width: min(640px, calc(100% - 140px)); } #dlg-face { width: 42px; height: 42px; }
  .tbtn { width: 64px; height: 64px; } .tbtn.big { width: 78px; height: 78px; }
  .preview { height: 150px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================
   Version 4 : médailles, classement, cinématique, en ligne, bugs
   ===================================================================== */
/* Médailles : un petit disque métallique */
.md { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 50%; vertical-align: -0.12em; margin-left: 0.35em; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35), 0 0 0 1.5px rgba(0,0,0,0.5); }
.md.or { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 45%, #a8780a); }
.md.argent { background: radial-gradient(circle at 35% 30%, #ffffff, #c8d0d8 45%, #7d8791); }
.md.bronze { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c87a3a 45%, #7a4318); }
.md.big { width: 2.4em; height: 2.4em; margin: 0; }
.nofall { color: var(--ok); margin-left: 0.3em; font-weight: 700; }
.nofall.big { font-size: 0.95rem; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.legend .md { margin-left: 0; }
.medalbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 10px 12px; background: rgba(0,0,0,0.25); border: 1px solid var(--edge); border-radius: 6px; }
.medalbox .md.big { grid-row: span 3; }
.medalbox b { font-size: 1.05rem; }
.medalbox small { color: var(--muted); grid-column: 2; }
.medalbox:not(:has(.md)) { display: block; }
.rival { margin: 0; color: var(--muted); }
.rival.win { color: var(--ok); font-weight: 700; }

/* Classement */
.board-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.board-nav h2 { text-align: center; font-size: clamp(1.1rem, 3.6vw, 1.7rem); }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 1.8em 1fr auto; align-items: center; gap: 2px 8px; padding: 8px 10px; background: rgba(0,0,0,0.25); border: 1px solid #3a2f27; border-radius: 4px; }
.board li.muted { display: block; }
.board li.old { opacity: 0.55; }
.board .rk { font-family: var(--font-display); color: var(--molten); }
.board b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .tm { font-variant-numeric: tabular-nums; font-weight: 700; }
.board small { grid-column: 2 / 4; color: var(--muted); }

/* Champs multilignes (code de sauvegarde, bug) */
textarea { width: 100%; font: 600 0.95rem var(--font-body); color: var(--steel); background: #15100d; border: 2px solid var(--edge); border-radius: 4px; padding: 10px 12px; resize: vertical; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
textarea:focus, textarea.focus { outline: none; border-color: var(--molten); }
#save-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; word-break: break-all; }
.codein { width: 8.5em; font: 700 1.1rem ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.15em; color: var(--steel); background: #15100d; border: 2px solid var(--edge); border-radius: 4px; padding: 10px; user-select: text; -webkit-user-select: text; }
.codein.focus, .codein:focus { outline: none; border-color: var(--molten); }
.bigcode { font: 700 1.3rem ui-monospace, Consolas, monospace; color: var(--molten); letter-spacing: 0.15em; }
.linkbtn { background: none; border: 0; padding: 4px; color: var(--molten); font: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn.focus { outline: 2px solid var(--molten); outline-offset: 2px; }
.center { text-align: center; }
.buginfo summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.buginfo pre { margin: 8px 0 0; padding: 10px; max-height: 160px; overflow: auto; background: #15100d; border: 1px solid var(--edge); border-radius: 4px; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.cworld { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid #3a2f27; }
.cworld:first-child { border-top: 0; padding-top: 0; }

/* Cinématique d'introduction : bandes noires + texte */
#cine { position: fixed; inset: 0; z-index: 40; pointer-events: auto; cursor: pointer; }
#cine .bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; }
#cine .bar.top { top: 0; } #cine .bar.bottom { bottom: 0; }
#cine-text { position: absolute; left: 50%; bottom: calc(12vh + 28px); transform: translateX(-50%); margin: 0; width: min(900px, 92vw); text-align: center; font-family: var(--font-display); font-size: clamp(1.2rem, 3.6vw, 2.2rem); line-height: 1.2; color: #fff6e6; text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,0.8); opacity: 0; }
#cine-text.on { animation: cineIn 3.6s ease forwards; }
@keyframes cineIn { 0% { opacity: 0; transform: translate(-50%, 12px); } 15% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }
.cine-skip { position: absolute; bottom: 3vh; right: 4vw; display: flex; gap: 14px; color: #bfb3a5; font-size: 0.85rem; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { #cine-text.on { animation: none; opacity: 1; } }
.credits-k { display: block; color: var(--molten); font-weight: 700; margin-bottom: 4px; }
#soon-sub { line-height: 1.6; }

/* =====================================================================
   SOIRÉE OSWEL — les mini-jeux en vue de dessus
   ===================================================================== */
.so-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .so-grid { grid-template-columns: 1fr; } }
.so-col { display: grid; gap: 8px; align-content: start; }
#so-games { display: flex; flex-wrap: wrap; gap: 6px; }
.so-g { padding: 4px 9px; border-radius: 999px; background: rgba(18,13,11,0.7); border: 1px solid var(--c); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }

/* Qui joue ? : 4 places */
#aj-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 720px) { #aj-slots { grid-template-columns: repeat(2, 1fr); } }
.jslot { display: grid; gap: 6px; justify-items: center; align-content: center; min-height: 150px; padding: 14px 10px; background: rgba(18,13,11,0.6); border: 2px dashed var(--edge); border-radius: 6px; color: var(--muted); text-align: center; }
.jslot b { font-size: 1.05rem; } .jslot small { font-size: 0.78rem; }
.jslot.on { border: 2px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(18,13,11,0.7)); color: var(--steel); animation: jpop 0.25s ease-out; }
.jslot.ready { box-shadow: 0 0 0 3px var(--ok) inset; }
.jslot.bot { border-style: solid; border-color: color-mix(in srgb, var(--c) 45%, var(--edge)); opacity: 0.8; }
.jnum { font-family: var(--font-display); font-size: 0.9rem; color: var(--molten); }
.jdot { width: 42px; height: 42px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,0.3), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.jslot.bot .jdot { width: 30px; height: 30px; }
@keyframes jpop { from { transform: scale(0.9); } to { transform: scale(1); } }
.join-help { font-size: 0.86rem; color: var(--steel); display: grid; gap: 2px; }
.join-help p { margin: 0; } .join-help b { color: var(--molten); }

/* Choisir les activités */
#aa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.acard { position: relative; display: grid; gap: 4px; padding: 12px 14px; font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--plate); border: 2px solid var(--edge); border-top: 5px solid var(--c); border-radius: 4px; }
.acard .ai { font-size: 2rem; line-height: 1; }
.acard b { font-size: 1.02rem; } .acard small { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.acard.on { background: color-mix(in srgb, var(--c) 18%, var(--plate)); border-color: var(--c); }
.acard.focus { border-color: var(--molten); transform: translateY(-2px); }
.acard em { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #120d0b; font-style: normal; font-weight: 800; display: grid; place-items: center; }

/* Fiche d'une activité */
/* 1.4 : la fiche claire d'un mini-jeu (MINI-JEU 0N · OBJECTIF · COMMENT JOUER · DANGER · VICTOIRE · DÉFAITE) */
.aintro { border-top: 6px solid var(--c); width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; display: grid; gap: 10px; text-align: center; }
.ai-num { font-family: var(--font-display); font-size: clamp(1.05rem, 3.2vw, 1.5rem); letter-spacing: 0.18em; color: #1a120c; background: var(--c); justify-self: center; padding: 4px 18px; border-radius: 4px; box-shadow: 0 4px 0 #000; animation: ainum 0.6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ainum { from { transform: scale(0.3) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-head { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; animation: aihead 0.5s 0.15s ease-out both; }
@keyframes aihead { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-head h2 { margin: 0; }
.ai-icon { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 4px 0 #000); }
.aintro h2 { text-shadow: 0 3px 0 #000; color: var(--c); }
.ai-tag { margin: 0; font-size: 1.02rem; font-weight: 600; }
.ai-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; text-align: left; }
.ai-grid > .ai-box { grid-column: span 2; }
.ai-box { background: rgba(18,13,11,0.62); border-radius: 6px; padding: 8px 12px; border-left: 5px solid #ffd28a; animation: aibox 0.45s ease-out both; }
.ai-box:nth-child(2) { animation-delay: 0.08s; } .ai-box:nth-child(3) { animation-delay: 0.16s; } .ai-box:nth-child(4) { animation-delay: 0.24s; } .ai-box:nth-child(5) { animation-delay: 0.32s; }
@keyframes aibox { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-box > b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.06em; margin-bottom: 3px; }
.ai-box p { margin: 0; font-size: 0.95rem; }
.ai-box ul { margin: 0; padding-left: 18px; font-size: 0.93rem; display: grid; gap: 2px; }
.ai-box.goal { grid-column: 1 / -1; border-left-color: var(--c); background: rgba(18,13,11,0.78); }
.ai-box.goal p { font-size: 1.12rem; font-weight: 700; }
.ai-box.how { grid-column: 1 / -1; border-left-color: #5ad1ff; }
.ai-box.danger { border-left-color: #ff5533; }
.ai-box.win { border-left-color: #3cff9a; }
.ai-box.lose { border-left-color: #b78cff; }
/* le bouton « Jouer ! » reste toujours visible en bas de la fiche (la fiche défile au-dessus) */
.aintro > nav.menu { position: sticky; bottom: 0; padding: 10px 0 2px; background: linear-gradient(rgba(16,12,14,0.6), rgba(16,12,14,0.97) 30%); z-index: 2; }
@media (max-height: 760px) {
  .aintro { gap: 6px; padding-top: 10px; }
  .ai-num { font-size: 1rem; padding: 2px 14px; }
  .ai-icon { font-size: 2.5rem; }
  .ai-head h2 { font-size: 1.5rem; }
  .ai-tag { font-size: 0.9rem; }
  .ai-box { padding: 5px 10px; }
  .ai-box p, .ai-box ul { font-size: 0.86rem; }
  .ai-box.goal p { font-size: 1rem; }
  .ai-keys { font-size: 0.8rem; gap: 4px 8px; }
}
.ai-box .k, .ai-keys .k { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin: 0 2px; border-radius: 5px; background: #ffd28a; color: #1a120c; font-weight: 800; font-size: 0.85rem; }
.ai-keys .dev { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(18,13,11,0.55); }
@media (max-width: 620px) { .ai-grid { grid-template-columns: 1fr; } .ai-grid > .ai-box { grid-column: 1 / -1; } .ai-icon { font-size: 2.6rem; } }
/* l'entraînement de 4 secondes, en bas de l'écran (ne bloque rien) */
#atuto { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 16; pointer-events: none; width: min(560px, calc(100vw - 24px)); background: rgba(14,10,8,0.86); border: 2px solid #ffd28a; border-radius: 10px; padding: 8px 14px; color: #fff3c4; box-shadow: 0 6px 0 #000; animation: atin 0.35s ease-out both; }
@keyframes atin { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#atuto .at-h { display: flex; align-items: baseline; gap: 10px; }
#atuto .at-h b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.08em; color: #ffd28a; }
#atuto .at-h small { color: var(--muted); flex: 1; }
#atuto .at-h em { font-family: var(--font-display); font-style: normal; font-size: 1.6rem; color: #fff; }
#atuto ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 3px; }
#atuto li { font-size: 0.98rem; padding-left: 26px; position: relative; }
#atuto li::before { content: '○'; position: absolute; left: 4px; color: var(--muted); }
#atuto li.ok::before { content: '✓'; color: var(--ok); font-weight: 900; }
#atuto li.ok { color: #c8ffd9; }
#atuto li .k { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin: 0 2px; border-radius: 4px; background: #ffd28a; color: #1a120c; font-weight: 800; font-size: 0.8rem; }
#at-ps { display: flex; flex-wrap: wrap; gap: 6px; }
#at-ps span { padding: 1px 9px; border-radius: 999px; border: 2px solid var(--c); font-size: 0.8rem; font-weight: 700; }
#at-ps span.ok { background: var(--c); color: #111; }
.ai-rules { margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; max-width: 460px; }
.ai-rules li { padding: 7px 12px; background: rgba(18,13,11,0.55); border-left: 4px solid var(--molten); border-radius: 3px; font-size: 0.93rem; }
.ai-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 0.9rem; }
.ai-keys .k { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; margin-right: 4px; border-radius: 5px; background: #ffd28a; color: #1a120c; }
.ai-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.aip { padding: 3px 10px; border-radius: 999px; border: 2px solid var(--c); background: rgba(18,13,11,0.8); font-weight: 600; font-size: 0.86rem; }
.aip small { color: var(--muted); font-weight: 600; }

/* Pendant le jeu : bandeau du haut */
#ahud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: grid; gap: 4px; justify-items: center; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 0; pointer-events: none; }
.ah-top { display: flex; align-items: center; gap: 10px; padding: 3px 14px; background: rgba(18,13,11,0.85); border: 1px solid var(--edge); border-radius: 999px; }
#ah-icon { font-size: 1.2rem; }
#ah-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(0.85rem, 2vw, 1.05rem); }
#ah-round { color: var(--molten); font-weight: 700; font-size: 0.85rem; }
#ah-timer { font-family: var(--font-display); font-size: 1.25rem; min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
#ah-timer.hot { color: var(--danger); animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
#ah-note { color: #fff3c4; font-size: 0.85rem; font-weight: 700; text-shadow: 0 2px 0 #000; }
#ah-note:empty { display: none; }
#ah-rows { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#ah-panel { display: grid; gap: 3px; justify-items: center; max-width: min(900px, calc(100% - 24px)); padding: 4px 12px; background: rgba(18,13,11,0.82); border: 1px solid #5a4a3a; border-radius: 6px; font-size: 0.82rem; color: #fff3c4; text-align: center; }
#ah-panel:empty { display: none; }
#ah-panel span { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
#ah-panel i { font-style: normal; }
#ah-panel i.off { opacity: 0.35; text-decoration: line-through; }
#ah-panel i em { font-style: normal; font-weight: 800; color: #120d0b; background: var(--c); border-radius: 4px; padding: 0 5px; margin-right: 2px; }
#arole { position: fixed; inset: 0; z-index: 16; display: grid; place-items: center; padding: 16px; background: rgba(8,6,5,0.97); color: #fff3c4; text-align: center; }
#arole[hidden] { display: none; }
#arole .ar-card { max-width: 640px; display: grid; gap: 12px; justify-items: center; }
#arole .ar-k { color: var(--muted); font-size: 1rem; letter-spacing: 0.04em; }
#arole .ar-big { font-family: var(--font-display, inherit); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.1; }
#arole .ar-card.tr .ar-big { color: #b78cff; }
#arole .ar-card.in .ar-big { color: #3cff9a; }
#arole ul { text-align: left; display: grid; gap: 6px; margin: 0; padding-left: 20px; }
#arole b.k { display: inline-block; padding: 0 8px; border-radius: 4px; background: #ffd28a; color: #1a120c; }
.ah-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; background: rgba(18,13,11,0.85); border: 2px solid var(--c); border-radius: 999px; font-size: 0.85rem; white-space: nowrap; }
.ah-p .d { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.ah-p i { font-style: normal; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ah-p .s { font-weight: 700; color: #fff3c4; font-variant-numeric: tabular-nums; }
.ah-p .s em { font-style: normal; color: var(--c); margin-right: 6px; }
.ah-p.off { opacity: 0.45; text-decoration: line-through; }
.ah-p.ghost { opacity: 0.7; border-style: dashed; }
.ah-p.fin { background: color-mix(in srgb, var(--c) 28%, rgba(18,13,11,0.9)); }
#acount { position: fixed; inset: 0; z-index: 15; display: grid; place-content: center; justify-items: center; pointer-events: none; color: #fff3c4; text-shadow: 0 8px 0 #000, 0 0 40px rgba(255,122,26,0.7); }
#acount small { font-family: var(--font-display); font-size: clamp(1rem, 3vw, 1.6rem); color: var(--molten); }
#acount b { font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 18vw, 10rem); line-height: 1; }
#acount b.go { color: var(--ok); }
#acount.pop b { animation: cpop 0.7s ease-out; }
@keyframes cpop { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.9; } }
#abanner { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 14; display: grid; justify-items: center; gap: 4px; padding: 12px 26px; background: rgba(18,13,11,0.88); border: 3px solid var(--c); border-radius: 8px; pointer-events: none; text-align: center; max-width: calc(100% - 32px); }
#abanner b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 4vw, 2.4rem); color: var(--c); }
#abanner small { font-size: 0.95rem; color: var(--steel); }
#abanner.pop { animation: bpop 0.35s ease-out; }
@keyframes bpop { from { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* Commandes tactiles */
#atouch { position: fixed; inset: 0; z-index: 9; touch-action: none; }
.at-stick { position: absolute; left: 40px; bottom: 40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.25); display: grid; place-items: center; }
.at-knob { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,210,138,0.75); }
.at-btns { position: absolute; right: 26px; bottom: 30px; display: flex; gap: 14px; align-items: flex-end; }
.at-a, .at-b { width: 82px; height: 82px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.4); background: rgba(255,138,43,0.55); color: #fff; font: 800 1.6rem var(--font-body); }
.at-b { width: 66px; height: 66px; background: rgba(61,139,255,0.55); margin-bottom: 40px; }
.at-a.on, .at-b.on { filter: brightness(1.5); transform: scale(0.94); }
.at-pause { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--edge); background: rgba(18,13,11,0.8); color: var(--steel); font-weight: 800; }

/* Résultats */
.ares .ar-win { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.6rem); color: var(--ok); }
#ar-rows { display: grid; gap: 6px; }
.ares-row { display: grid; grid-template-columns: 2.6em 1fr repeat(4, 4.6em); align-items: center; gap: 8px; padding: 8px 12px; background: rgba(18,13,11,0.6); border: 1px solid var(--edge); border-left: 6px solid var(--c); border-radius: 4px; }
.ares-row .m { font-size: 1.5rem; text-align: center; }
.ares-row .n { display: grid; gap: 1px; min-width: 0; }
.ares-row .n b { color: var(--c); font-size: 1.05rem; }
.ares-row .n i { font-style: normal; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; margin-left: 6px; }
.ares-row .n small { color: var(--muted); font-size: 0.8rem; }
.ares-row .n small.bn { color: var(--molten); }
.ares-row .c { display: grid; justify-items: center; }
.ares-row .c b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ares-row .c small { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ares-row .coin b { color: #ffcc33; }
@media (max-width: 640px) { .ares-row { grid-template-columns: 2.2em 1fr repeat(2, 3.8em); } .ares-row .c:nth-of-type(3), .ares-row .c:nth-of-type(4) { display: none; } }
.ar-total { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; }
#ar-total span { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--c); }

/* Champion de la soirée */
.achamp { width: min(720px, 100%); position: relative; }
.achamp h2 { font-size: clamp(2rem, 7vw, 3.6rem); text-shadow: 0 4px 0 #000; }
#ac-pod { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 200px; }
.pod { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; gap: 2px; width: 140px; height: 100%; }
.pod span { font-size: 1.8rem; } .pod b { color: var(--c); } .pod small { color: var(--muted); }
.pod i { align-self: end; width: 100%; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, #120d0b)); border-radius: 4px 4px 0 0; animation: rise 0.8s ease-out both; transform-origin: bottom; }
.pod.p0 { order: 2; } .pod.p0 i { height: 110px; } .pod.p1 { order: 1; } .pod.p1 i { height: 76px; } .pod.p2 { order: 3; } .pod.p2 i { height: 50px; }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#ac-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; text-align: left; }
#ac-rows li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(18,13,11,0.6); border-left: 5px solid var(--c); border-radius: 3px; }
#ac-rows li span { color: var(--muted); width: 2.2em; } #ac-rows li b { flex: 1; } #ac-rows li i { font-style: normal; font-size: 0.7rem; color: var(--muted); }
#ac-rows li em { font-style: normal; font-weight: 800; color: var(--ok); } #ac-rows li small { color: #ffcc33; }
#ac-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#ac-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }

/* =====================================================================
   Animation de lancement
   ===================================================================== */
#splash { position: fixed; inset: 0; z-index: 9999; background: var(--soot); cursor: pointer; }
#splash canvas { display: block; width: 100%; height: 100%; }

/* Boutique : gadgets des mondes */
#shop-gad { display: grid; gap: 6px; }
.ssec { display: grid; gap: 8px; }
#shop-tabs { position: sticky; top: 0; z-index: 2; background: #1d1714; padding-bottom: 4px; }
#shop-tabs small { color: var(--muted); font-weight: 600; }
.gadw { margin: 8px 0 2px; } .gadw.locked { color: #7d6f63; }
.acc-ic.emo { font-size: 22px; line-height: 28px; text-align: center; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.item.locked { opacity: 0.55; } .item.locked .iprice { color: var(--muted); }
.item.locked .acc-ic.emo { filter: grayscale(1); }
p.small { font-size: 0.85rem; margin: 0; }

/* BLACKOUT de Win Black : la pièce plonge dans le noir (au-dessus de la scène, sous le HUD) */
#blackout { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.92) 60%, #000 100%); }

/* Carnet : fiches des personnages */
.fiches { display: grid; gap: 10px; }
.fiche { --fc: #ffb347; display: grid; gap: 6px; padding: 14px 16px; background: linear-gradient(160deg, rgba(20,22,28,0.95), rgba(12,12,16,0.95)); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); border-left: 4px solid var(--fc); border-radius: 8px; box-shadow: 0 0 24px color-mix(in srgb, var(--fc) 14%, transparent); }
.fiche header { display: flex; gap: 12px; align-items: center; }
.fiche-face { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #0b0b0d; color: var(--fc); border: 2px solid var(--fc); font-family: var(--font-display); font-size: 1.3rem; box-shadow: 0 0 14px color-mix(in srgb, var(--fc) 50%, transparent); }
.fiche header b { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: var(--fc); font-size: 1.15rem; display: block; }
.fiche header small { color: var(--muted); }
.fiche h5 { margin: 6px 0 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc); }
.fiche p { margin: 0; line-height: 1.4; }
.fiche-power { padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--fc) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--fc) 55%, transparent); }
.fiche-power b { color: var(--fc); letter-spacing: 0.04em; }
.fiche blockquote { margin: 4px 0 0; padding: 6px 12px; border-left: 3px solid var(--fc); font-style: italic; color: #f3ead9; }
.fiche-foot { color: var(--muted); font-size: 0.78rem; }
.fiche-lock { margin: 0; padding: 8px 12px; border: 1px dashed var(--edge); border-radius: 6px; color: var(--muted); }

/* =====================================================================
   THÈME 2.0 — « Forge néon » : verre fumé, liserés lumineux, coins coupés.
   (ce bloc remplace l'habillage des anciennes plaques de métal)
   ===================================================================== */
:root {
  --cyan: #5fd4ff;
  --glass: rgba(20, 17, 22, 0.78);
  --glass-hi: rgba(36, 30, 38, 0.86);
  --line: rgba(255, 179, 71, 0.28);
  --line-hi: rgba(255, 179, 71, 0.75);
  --glow: 0 0 0 1px rgba(255,179,71,0.5), 0 0 18px rgba(255,138,43,0.35);
  --glow-c: 0 0 0 1px rgba(95,212,255,0.55), 0 0 18px rgba(95,212,255,0.3);
}
/* panneaux : verre fumé avec coins lumineux */
.panel { background: linear-gradient(160deg, rgba(30,25,32,0.9), rgba(13,11,15,0.93)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); }
@media (pointer: fine) { .panel { background: linear-gradient(160deg, rgba(30,25,32,0.82), rgba(13,11,15,0.86)); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); } }
.panel::before, .panel::after { width: 22px; height: 22px; border-radius: 0; background: none; box-shadow: none; top: 8px; border: 2px solid var(--molten); opacity: 0.8; }
.panel::before { left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.panel::after { right: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; border-color: var(--cyan); }
.panel h2 { letter-spacing: 0.01em; text-shadow: 0 2px 0 #000, 0 0 24px rgba(255,138,43,0.25); }
.kicker { color: var(--cyan); }

/* boutons : coins coupés, liseré, lueur au survol / sélection manette */
.btn { border-radius: 0; border-width: 1px; border-color: var(--line); background: linear-gradient(180deg, rgba(44,36,44,0.95), rgba(26,21,27,0.95)); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn.primary { background: linear-gradient(180deg, #4a2a16, #2a170c); border-color: var(--molten-deep); }
.btn.ghost { background: transparent; clip-path: none; }
.btn.focus, .btn:focus-visible { transform: translateX(4px); box-shadow: inset 4px 0 0 var(--molten), var(--glow); background: linear-gradient(180deg, rgba(70,48,40,0.95), rgba(36,26,26,0.95)); }
.mode, .opt, .item, .tab, .pcard, .lvl, .world { border-width: 1px; border-color: var(--line); border-radius: 10px; background: var(--glass); transition: transform 0.12s, box-shadow 0.15s, border-color 0.12s, background 0.12s; }
.mode.focus, .opt.focus, .item.focus, .tab.focus, .pcard.focus { border-color: var(--line-hi); box-shadow: var(--glow); background: var(--glass-hi); }
.lvl.focus, .world.focus { box-shadow: 0 6px 0 var(--molten), var(--glow); }
.tab.on { border-color: var(--cyan); color: #e9fbff; box-shadow: inset 0 -2px 0 var(--cyan); }
.chip, .who { border-radius: 999px; }

/* transitions d'écran : le panneau arrive (0,35 s) et un balayage lumineux passe (0,5 s) */
.screen:not([hidden]) > .panel, .screen:not([hidden]) > .title-wrap, .screen:not([hidden]) > article { animation: scrIn 0.36s cubic-bezier(0.2, 0.9, 0.25, 1.1) both; }
.screen:not([hidden])::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; background: linear-gradient(180deg, rgba(95,212,255,0) 0%, rgba(95,212,255,0.09) 70%, rgba(95,212,255,0.28) 100%); animation: scan 0.5s ease-out both; }
@keyframes scrIn { 0% { opacity: 0; transform: translateY(16px) scale(0.975); filter: brightness(1.8); } 60% { opacity: 1; filter: brightness(1.1); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes scan { 0% { transform: translateY(-100%); opacity: 1; } 100% { transform: translateY(340%); opacity: 0; } }

/* ---------- Menu principal ---------- */
#screen-title { gap: 2vw; }
.mainmenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.mm { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; min-height: 58px; font: inherit; color: var(--steel); cursor: pointer; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform 0.12s, box-shadow 0.15s, border-color 0.12s, background 0.15s; }
.mm .mmi { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,138,43,0.12); color: var(--molten); }
.mm .mmi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm.big .mmi svg path:first-child { fill: currentColor; stroke: none; }
.mm.mp .mmi svg path:first-child { fill: none; stroke: currentColor; }
.mm b { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; letter-spacing: 0.04em; }
.mm small { color: var(--muted); font-size: 0.78rem; line-height: 1.2; }
.mm.big { grid-column: span 2; min-height: 70px; background: linear-gradient(100deg, rgba(90,44,14,0.85), rgba(30,22,26,0.85)); border-color: rgba(255,138,43,0.5); }
.mm.big b { font-size: 1.3rem; }
.mm.big .mmi { width: 44px; height: 44px; background: var(--molten-deep); color: #1a0e06; }
.mm.mp { background: linear-gradient(100deg, rgba(14,52,72,0.85), rgba(30,22,34,0.85)); border-color: rgba(95,212,255,0.5); }
.mm.mp .mmi { background: var(--cyan); color: #06141a; }
.mm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.12) 45%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.mm.focus, .mm:focus-visible { outline: none; transform: translateY(-2px); border-color: var(--line-hi); box-shadow: var(--glow); background: var(--glass-hi); }
.mm.big.focus { background: linear-gradient(100deg, rgba(130,62,18,0.95), rgba(46,30,30,0.95)); }
.mm.mp.focus { box-shadow: var(--glow-c); border-color: var(--cyan); background: linear-gradient(100deg, rgba(18,74,100,0.95), rgba(36,26,40,0.95)); }
.mm.focus::after { animation: shine 0.7s ease-out; }
@keyframes shine { to { transform: translateX(120%); } }
.menu.sub { gap: 4px; }
.title-hero { flex: 1 1 auto; align-self: stretch; min-width: 0; max-width: 46vw; position: relative; }
.title-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.title-hero::after { content: 'Glisse pour tourner · molette pour zoomer'; position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; pointer-events: none; }
@media (max-width: 900px), (max-height: 460px) { .title-hero { display: none; } }
@media (max-width: 420px) { .mainmenu { gap: 6px; } .mm { padding: 8px 10px; min-height: 52px; } .mm small { display: none; } .mm .mmi { width: 30px; height: 30px; } }
@media (max-height: 520px) { .mm { min-height: 44px; padding: 6px 10px; } .mm.big { min-height: 50px; } .mm small { font-size: 0.7rem; } }

/* ---------- Personnalisation / boutique ---------- */
.shop-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 18px; }
.shop-stage { min-width: 0; display: grid; gap: 8px; align-content: start; }
.preview { height: min(46vh, 400px); border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 78%, rgba(255,138,43,0.22), rgba(0,0,0,0) 55%), radial-gradient(circle at 50% 30%, rgba(95,212,255,0.12), rgba(0,0,0,0) 60%), #0d0b10; position: relative; }
.preview canvas { cursor: grab; touch-action: none; }
.preview canvas:active { cursor: grabbing; }
.stage-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.stage-hint { margin: 0; font-size: 0.74rem; color: var(--muted); }
.shop-desc { display: grid; gap: 3px; padding: 10px 12px; min-height: 92px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.shop-desc p { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.shop-desc small { color: var(--muted); }
.sd-name { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.sd-rar { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.shop-lists { max-height: min(60vh, 560px); }
.item { position: relative; padding-top: 16px; }
.item .rar { position: absolute; top: 4px; right: 8px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc, var(--muted)); }
.item::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--rc, transparent); opacity: 0.85; }
.item.r-epique, .item.r-legendaire, .item.r-mythique { background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 14%, var(--glass)), var(--glass)); }
.item.r-mythique { border-color: color-mix(in srgb, var(--rc) 55%, transparent); animation: myth 2.4s ease-in-out infinite; }
@keyframes myth { 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); } }
.item.own .iprice { color: var(--ok); }
.item.eq { border-color: var(--ok); box-shadow: inset 0 0 0 1px rgba(60,255,154,0.35); }
.item.locked { opacity: 0.55; }
.items.chars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charcard { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 12px; border-left: 4px solid var(--rc); }
.charcard::before { display: none; }
.cc-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--rc); }
.cc-uni { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 860px) { .shop-body { grid-template-columns: 1fr; } .preview { height: min(34vh, 260px); } .shop-lists { max-height: none; } }
@media (max-height: 520px) { .preview { height: 46vh; } .shop-desc { min-height: 0; } }

/* ---------- HUD en jeu : pastilles de verre ---------- */
.chip { background: rgba(14,12,16,0.7); border-color: rgba(255,179,71,0.3); padding: 3px 10px; backdrop-filter: blur(4px); }
#hud-title { letter-spacing: 0.03em; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,138,43,0.4); }
.goalline { border-left-color: var(--cyan); background: rgba(95,212,255,0.07); border-radius: 0 8px 8px 0; }
.pausebtn { border: 1px solid var(--line); background: rgba(14,12,16,0.72); box-shadow: 0 0 12px rgba(0,0,0,0.4); }
.ah-top { background: rgba(14,12,16,0.78); border-color: rgba(255,179,71,0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.ah-p { background: rgba(14,12,16,0.78); }
#dialog { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, rgba(30,25,32,0.95), rgba(13,11,15,0.96)); }
.bubble { border-width: 1px; border-radius: 10px; background: rgba(14,12,16,0.92); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
#goal-banner { border-width: 1px; border-radius: 12px; background: rgba(14,12,16,0.9); box-shadow: var(--glow); }
#abanner { border-width: 2px; border-radius: 14px; background: rgba(14,12,16,0.88); }
.shop-lists { align-content: start; }
.mm b { font-size: clamp(0.8rem, 3.4vw, 1.02rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mm.big b { font-size: clamp(1rem, 4.4vw, 1.3rem); }
.title-hero::after { bottom: auto; top: 3%; }
/* téléphone en paysage / petite hauteur : menu compact sur 3 colonnes */
@media (max-height: 520px) {
  #screen-title .kicker, #screen-title .tag { display: none; }
  .title-wrap { max-width: 760px; }
  .mainmenu { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 740px; }
  .mm.big { grid-column: span 1; }
  .mm small { display: none; }
  .mm .mmi, .mm.big .mmi { width: 30px; height: 30px; }
  .mm.big b { font-size: 1rem; }
}
/* podium 3D (résultats et champion) */
.podium3d { height: clamp(150px, 30vh, 260px); border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, rgba(255,138,43,0.18), rgba(0,0,0,0) 60%), radial-gradient(ellipse at 50% 20%, rgba(95,212,255,0.1), rgba(0,0,0,0) 60%); border: 1px solid var(--line); }
.podium3d canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.podium3d.big { height: clamp(180px, 38vh, 340px); }
.podium3d.big ~ #ac-pod { display: none; }
@media (max-height: 520px) { .podium3d { height: 34vh; } .podium3d.big { height: 40vh; } }
/* ---------- Galerie des personnages ---------- */
.gal-body { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 18px; }
.gal-stage { min-width: 0; display: grid; gap: 8px; align-content: start; }
.gal-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); min-height: 110px; }
.gal-card p { margin: 0; line-height: 1.4; font-size: 0.92rem; }
.gal-card blockquote { margin: 2px 0 0; padding: 4px 10px; border-left: 3px solid var(--cyan); font-style: italic; font-size: 0.88rem; }
.gal-power b { color: var(--cyan); }
.gal-where { color: var(--muted); font-size: 0.78rem; }
.gal-list { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; max-height: min(58vh, 540px); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.gcard { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); border-left: 3px solid var(--gc); transition: transform 0.12s, box-shadow 0.15s, background 0.12s; }
.gcard .gi { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); color: #0d0b10; background: var(--gc); }
.gcard b { font-size: 0.92rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard small { color: var(--muted); font-size: 0.72rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gcard.focus, .gcard.on { border-color: var(--gc); box-shadow: 0 0 0 1px var(--gc), 0 0 16px color-mix(in srgb, var(--gc) 35%, transparent); background: var(--glass-hi); }
@media (max-width: 860px) { .gal-body { grid-template-columns: 1fr; } .gal-list { max-height: none; } #gal-preview { height: min(30vh, 240px); } }
@media (max-height: 520px) { #gal-preview { height: 42vh; } .gal-card { min-height: 0; } }
.gal-k { color: var(--molten); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }

/* ---------- Version 1.3 : grands niveaux ---------- */
/* flèche au bord de l'écran pour un joueur hors champ */
.offarrow { position: fixed; z-index: 30; pointer-events: none; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: 'Bungee', 'Arial Black', sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.offarrow i { font-style: normal; font-size: 26px; line-height: 1; display: block; }
.offarrow b { font-size: 11px; letter-spacing: .04em; background: rgba(10,8,6,.72); padding: 1px 6px; border-radius: 6px; }
.offarrow[hidden] { display: none; }
/* bandeau d'une nouvelle zone */
#zone-banner { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 25; pointer-events: none; text-align: center; opacity: 0; }
#zone-banner.go { animation: zoneIn 3.2s ease forwards; }
#zone-banner small { display: block; font-family: 'Bungee', 'Arial Black', sans-serif; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .18em; color: #5fd4ff; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
#zone-banner b { display: block; font-family: 'Bungee', 'Arial Black', sans-serif; font-size: clamp(22px, 3.6vw, 40px); color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.85), 0 0 24px rgba(95,212,255,.45); }
#zone-banner em { display: block; margin-top: 4px; font-style: normal; font-size: clamp(12px, 1.5vw, 15px); color: #e9f6ff; background: rgba(6,14,30,.7); border: 1px solid rgba(95,212,255,.45); border-radius: 10px; padding: 4px 12px; }
@keyframes zoneIn { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.96); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
/* Paramètres : groupes et petite ligne « Vitesse du gameplay » */
.optgrp { margin: 10px 2px 2px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--molten, #ff8a2b); font-weight: 700; }
.optgrp:first-child { margin-top: 0; }
.opt.optspeed { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; cursor: default; }
.opt.optspeed > span small { display: block; font-size: .72rem; opacity: .65; font-weight: 400; margin-top: 2px; }
.opt.optspeed .sp-ctl { display: flex; align-items: center; gap: 6px; }
.opt.optspeed .sp-ctl em { font-style: normal; font-size: .72rem; opacity: .7; }
.opt.optspeed .sp-dots { display: flex; align-items: center; gap: 4px; padding: 0 2px; position: relative; }
.opt.optspeed .sp-dots::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: rgba(255,255,255,.18); transform: translateY(-50%); }
.opt.optspeed .sp-dots i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.opt.optspeed .sp-dots i.lo { background: rgba(255,138,43,.55); }
.opt.optspeed .sp-dots i.on { width: 15px; height: 15px; background: var(--molten, #ff8a2b); box-shadow: 0 0 10px rgba(255,138,43,.7); }
.opt.optspeed .sp-b, .opt.optspeed .sp-r { font: inherit; font-size: .8rem; color: inherit; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 3px 9px; cursor: pointer; }
.opt.optspeed .sp-b:hover, .opt.optspeed .sp-r:hover, .opt.optspeed .sp-b.focus, .opt.optspeed .sp-r.focus { border-color: var(--molten, #ff8a2b); }
.opt.optspeed .sp-val { grid-column: 1; justify-self: start; font-size: .85rem; }
.opt.optspeed .sp-r { justify-self: end; }
@media (max-width: 560px) { .opt.optspeed { grid-template-columns: 1fr; } .opt.optspeed .sp-r { justify-self: start; } }

/* ---------- version 1.4 : sous-titres des voix ---------- */
#subs { position: fixed; z-index: 29; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(720px, calc(100% - 32px));
  padding: 8px 14px 9px; border-radius: 10px; background: rgba(8,7,10,0.78); color: #fff; font-size: clamp(0.92rem, 2.2vw, 1.08rem); line-height: 1.35;
  text-align: center; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.45); text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
#subs b { display: block; font-family: var(--font-display); font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd28a; margin-bottom: 1px; }
#subs.go { animation: subsIn 0.18s ease-out; }
@keyframes subsIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.arena-on #subs { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (pointer: coarse) { #subs { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } body.arena-on #subs { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- version 1.4 : portrait 3D dans la boîte de dialogue ---------- */
#dlg-face { position: relative; overflow: hidden; }
#dlg-face .dlg-3d { position: absolute; inset: 0; width: 100%; height: 100%; }
#dialog.p3d #dlg-face { width: 76px; height: 76px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.16), rgba(0,0,0,0.25)) !important; border-color: rgba(255,210,138,0.45); }
#dialog.p3d #dlg-letter { visibility: hidden; }
@media (max-height: 520px) { #dialog.p3d #dlg-face { width: 56px; height: 56px; } }

#chap-body p.reading { color: #fff3c4; text-shadow: 0 0 18px rgba(255,200,120,0.25); }
#chap-body p { transition: color 0.3s; }

/* 1.4 : la fin ouverte « À SUIVRE… » */
#soon-text b.asuivre { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: 0.12em; color: #ffd28a; text-shadow: 0 3px 0 #000; animation: asuivre 2.4s ease-in-out infinite; }
@keyframes asuivre { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ===== version 1.5 : bouton tactile du gadget (visible seulement quand un gadget est équipé) ===== */
.tbtn.gad { display: none; border-color: rgba(120,220,255,0.75); }
body.has-gadget .tbtn.gad { display: grid; }

/* ===== version 1.5 : écran « Réseau local » ===== */
.lan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.lan-col h3, .lan-list h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; color: var(--molten); }
.lan-col p { margin: 0 0 10px; line-height: 1.4; }
.lan-steps { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.lan-qr { display: grid; justify-items: center; gap: 6px; text-align: center; }
.lan-qrbox { width: min(230px, 60vw); aspect-ratio: 1; background: #fff; border-radius: 10px; padding: 6px; box-shadow: 0 0 0 3px rgba(95,212,255,0.45); }
.lan-qrbox svg { width: 100%; height: 100%; display: block; }
.lan-url { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; color: var(--cyan); word-break: break-all; }
.lan-url.small { font-size: 0.85rem; opacity: 0.85; }
.lan-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: rgba(255,255,255,0.03); }
.lan-row .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.lan-row small { color: var(--muted); }
.lan-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 1.1rem; color: var(--steel); background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.lan-input.focus, .lan-input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-c); }
.lan code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 720px) { .lan-grid { grid-template-columns: 1fr; } }

/* ===== version 1.5 : boutons tactiles qui n'encombrent pas l'écran =====
   « discret » (par défaut) : petits, transparents, collés aux bords ; « normal » = comme avant ; « grand ». */
#touch { transition: opacity 0.35s; }
#touch.repos { opacity: 0.38; }                                   /* au repos : presque invisibles */
#touch[data-size="discret"] { padding: 0 max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left)); }
#touch[data-size="discret"] .tc { gap: 7px; }
#touch[data-size="discret"] .tbtn { width: 54px; height: 54px; font-size: 1.15rem; background: rgba(20,15,12,0.2); border-width: 1.5px; border-color: rgba(233,225,214,0.24); backdrop-filter: none; }
#touch[data-size="discret"] .tbtn.big { width: 68px; height: 68px; font-size: 0.68rem; border-color: rgba(255,179,71,0.5); }
#touch[data-size="discret"] .tbtn.small { width: 42px; height: 42px; font-size: 0.48rem; }
#touch[data-size="discret"] .tc.p1 .tbtn, #touch[data-size="discret"] .tc.p2 .tbtn { width: 46px; height: 46px; font-size: 1rem; }
#touch[data-size="discret"] .tc.p1 .tbtn.small, #touch[data-size="discret"] .tc.p2 .tbtn.small { width: 36px; height: 36px; }
#touch[data-size="discret"] .tbtn.on { background: rgba(255,179,71,0.4); border-color: var(--molten); }
#touch[data-size="grand"] .tbtn { width: 86px; height: 86px; }
#touch[data-size="grand"] .tbtn.big { width: 104px; height: 104px; }
#touch[data-size="grand"] .tbtn.small { width: 66px; height: 66px; }
/* ACTION seulement quand il y a quelque chose à faire (porte, caisse, levier, personnage, dialogue) */
#touch .tbtn[data-k="talk"] { transition: opacity 0.2s, transform 0.2s; }
#touch.noact0 .tbtn[data-k="talk"][data-p="0"], #touch.noact1 .tbtn[data-k="talk"][data-p="1"] { opacity: 0; transform: scale(0.6); pointer-events: none; }
@media (max-height: 520px) {
  #touch[data-size="discret"] .tbtn { width: 50px; height: 50px; } #touch[data-size="discret"] .tbtn.big { width: 62px; height: 62px; }
  #touch[data-size="discret"] .tbtn.small { width: 40px; height: 40px; }
}

/* ===================== version 1.5 : étoiles, niveaux secrets, progression, journal, choix ===================== */
.stars { color: #ffd23f; letter-spacing: 1px; margin-left: 6px; font-family: inherit; font-size: 0.85em; text-shadow: 0 1px 0 #000; }
.stars i { color: rgba(255, 255, 255, 0.18); font-style: normal; }
.lvl.secret { background: linear-gradient(180deg, #2b1f45, #191127); border-color: #7a5ad1; }
.lvl.secret .n { color: #c9a7ff; }
.pbar { display: inline-block; vertical-align: middle; width: 120px; height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-left: 6px; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a2a, #ffd23f); }
.ptotal { padding: 10px 12px; margin: 6px 0 4px; border: 2px solid var(--edge); border-radius: 6px; background: var(--plate); }
.ptotal b { font-size: 1.3rem; color: #ffd23f; }
.pw { border-top: 1px solid var(--edge); padding: 8px 0; }
.pw.locked { opacity: 0.5; }
.pw h3 { margin: 4px 0; font-size: 1.05rem; }
.pstats { list-style: none; padding: 0; margin: 4px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 14px; }
.pstats li { font-size: 0.9rem; }
.ok { color: var(--ok, #3cff9a); }
.journal .quests { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.journal .quests li, #journal-body .quests li { padding: 7px 9px; border-left: 3px solid #ffd23f; background: rgba(255,255,255,0.04); border-radius: 3px; }
.quests li.qdone { border-left-color: #3cff9a; opacity: 0.85; }
.quests li p { margin: 3px 0; font-size: 0.88rem; }
.qprog { color: #ffd23f; font-weight: 700; font-size: 0.85rem; }
.ttl { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 10px; background: #3a2a10; color: #ffd23f; font-size: 0.82rem; }
.met { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.met small { color: var(--muted); }
.hints, .souv, .secretlv { margin: 4px 0 8px; padding-left: 18px; }
.hints li, .souv li, .secretlv li { font-size: 0.88rem; margin: 3px 0; }
.jboss { margin: 4px 0; } .jboss ol { margin: 4px 0; font-size: 0.86rem; }
.jbossnow { padding: 8px 10px; border: 2px solid #ff9a2a; border-radius: 5px; background: rgba(255,154,42,0.08); margin: 6px 0; }
.jbossnow p { margin: 4px 0 0; font-size: 0.9rem; }
#journal-body, #progres-body { max-height: 62vh; overflow-y: auto; }
.panel.choix .menu .btn { white-space: normal; }
.stars.big { font-size: 1.6rem; margin: 0; }

/* ===== version 1.5 : les POUVOIRS DE TONY (js/pouvoirs.js) ===== */
/* le pouvoir choisi dans le HUD : nom, état (prêt / recharge / actif), touche, barre de recharge */
#hud-tpow { display: inline-flex; gap: 10px; align-items: center; border-color: rgba(180,140,255,0.7); }
#hud-tpow[hidden] { display: none; }
#hud-tpow .tp { position: relative; display: inline-flex; gap: 6px; align-items: center; padding-bottom: 3px; }
#hud-tpow .tp b { color: #e2d6ff; font-weight: 700; }
#hud-tpow .tp i { font-style: normal; font-size: 0.85em; }
#hud-tpow .tp i.ok { color: #9dffcf; }
#hud-tpow .tp i.cd { color: #ffd28a; }
#hud-tpow .tp i.on { color: #bff6ff; }
#hud-tpow kbd { font: inherit; font-size: 0.78em; padding: 0 5px; border-radius: 4px; background: rgba(180,140,255,0.22); border: 1px solid rgba(180,140,255,0.55); color: #f1ebff; }
#hud-tpow .tp u { position: absolute; left: 0; bottom: 0; height: 2px; background: #b48cff; border-radius: 2px; }
/* le flash : sombre et violet pour Ctrl+Z, lignes cyan pour Debug */
#tony-fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; }
#tony-fx.ctrlz { animation: tonyZ 0.42s ease-out; background: radial-gradient(ellipse at center, rgba(20,6,40,0.15) 0%, rgba(30,8,60,0.55) 60%, rgba(8,2,18,0.85) 100%); }
#tony-fx.debug { animation: tonyD 5s linear; background: repeating-linear-gradient(0deg, rgba(95,232,255,0.06) 0 2px, transparent 2px 5px), radial-gradient(ellipse at center, transparent 55%, rgba(40,180,220,0.22) 100%); }
@keyframes tonyZ { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tonyD { 0% { opacity: 0; } 6% { opacity: 1; } 85% { opacity: 0.8; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tony-fx.debug { animation-duration: 5s; } }
/* fiche du Carnet / de la Galerie : la liste des pouvoirs */
ul.powers { margin: 6px 0 4px; padding-left: 18px; }
ul.powers li { margin: 3px 0; }
ul.powers li.off { opacity: 0.55; }
ul.powers li small { color: #b9a8e8; }
.cworld.tonypw h3 { color: #d8c8ff; }

/* ===== version 1.5 : le menu principal a une tuile de plus (PROGRESSION) : il reste entier sur un écran 720p ===== */
@media (min-height: 521px) {
  /* 7 petites tuiles : la dernière (Paramètres) prend toute la ligne, le menu reste équilibré */
  .mainmenu .mm:not(.big):last-child { grid-column: span 2; }
}
@media (min-height: 521px) and (max-height: 860px) {
  .logo { font-size: clamp(2.4rem, 9.4vh, 5rem); }
  .mainmenu { gap: 7px; }
  .mm { min-height: 48px; padding: 6px 11px; }
  .mm.big { min-height: 58px; }
  .mm .mmi { width: 32px; height: 32px; }
  .mm.big .mmi { width: 40px; height: 40px; }
}