/* ================= Scènes : menu, scénarios, personnage, pause, options, bilan =================
   Style pixel : panneaux .px, unité var(--u), polices Pixelify (texte) et Silk (titres).
   Pas de coins arrondis, pas de flou, pas de dégradés doux : trames et aplats seulement. */

/* le HUD du jeu n'apparaît que pendant la partie */
body:not([data-scene="game"]) :is(#status, #top, #log, #menu, #keyhint, #keys, #alarm, #encircle, #hidden-banner, #perf-panel) { display: none !important; }
body:not([data-scene="game"]) #o { cursor: default; }
#role-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 62); }
#role-name .hud-role { display: block; font: calc(var(--u) * 3.6)/1.3 'Silk', monospace; color: var(--paper); }

#scenes { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#scenes > * { pointer-events: auto; }
#scenes .panel, #scenes #bilan-box { position: relative; }
#scenes :is(#menu-list, #scen-detail, #perso-box, .hints, .foot, .live) { position: absolute; }
.sc { position: absolute; inset: 0; display: none; }
.sc.show { display: block; }
.sc-center { display: none; place-items: center; }
.sc-center.show { display: grid; }

/* trame sombre posée sur la carte vivante (damier d'une unité, bords nets) */
.shade { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-conic-gradient(rgba(20, 16, 24, .72) 0 25%, rgba(20, 16, 24, .38) 0 50%);
  background-size: calc(var(--u) * 2) calc(var(--u) * 2); }
.shade.flat { background: rgba(20, 16, 24, .5); }
.shade.left { right: auto; width: calc(var(--u) * 150);
  box-shadow: calc(var(--u) * 2) 0 0 rgba(20, 16, 24, .5), calc(var(--u) * 4) 0 0 rgba(20, 16, 24, .25); }

#sc-backdrop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; display: none; pointer-events: none; }
#sc-backdrop.show { display: block; }

h1.pxt, h2.pxt, h3.pxt { margin: 0; font-family: 'Silk', monospace; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
h2.pxt { font-size: calc(var(--u) * 9); line-height: 1; color: var(--paper); text-shadow: var(--u) var(--u) 0 var(--ink), calc(var(--u) * 2) calc(var(--u) * 2) 0 #96202a; }
h3.pxt { font-size: calc(var(--u) * 5); color: var(--sun); }
.dim { color: var(--dim); }
.sun { color: var(--sun); }

/* boutons de menu */
.mi { display: flex; align-items: center; gap: calc(var(--u) * 3); width: 100%; text-align: left; position: relative;
  font: calc(var(--u) * 5.4)/1 'Silk', monospace; padding: calc(var(--u) * 2.4) calc(var(--u) * 4) calc(var(--u) * 2.4) calc(var(--u) * 8);
  background: var(--bg2); color: var(--paper); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); margin: 0 0 calc(var(--u) * 2.5); }
.mi small { margin-left: auto; font: calc(var(--u) * 3.6)/1 'Pixelify', monospace; color: var(--dim); text-transform: none; }
.mi:hover { background: var(--bg2); }
.mi.sel, .mi.sel:hover { background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 #8a6a00; }
.mi.sel small { color: #5a4a10; }
.mi::before { content: ''; position: absolute; left: calc(var(--u) * 3); top: 50%; width: calc(var(--u) * 3); height: calc(var(--u) * 4); margin-top: calc(var(--u) * -2);
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; }
.mi.sel::before { opacity: 1; animation: nudge .6s steps(2) infinite; }
.mi.off { color: #6d6284; }
.mi.off.sel { background: #8f86a6; color: var(--ink); }
@keyframes nudge { 50% { transform: translateX(var(--u)); } }
.row-btns { display: flex; gap: calc(var(--u) * 3); justify-content: flex-end; margin-top: calc(var(--u) * 4); }
.row-btns .mi { width: auto; margin: 0; }
button.sel { background: var(--sun); }

/* barre d'aide en bas */
.hints { position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); font-size: calc(var(--u) * 4); white-space: nowrap; padding: calc(var(--u) * 1.5) calc(var(--u) * 4); }

/* ---------- menu principal ---------- */
#sc-menu .title { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 12); }
#sc-menu .title canvas { image-rendering: pixelated; display: block; }
#sc-menu .tagline { margin: calc(var(--u) * 1) 0 0 calc(var(--u) * 4); font: calc(var(--u) * 4.2)/1.3 'Silk', monospace; color: var(--paper); text-shadow: var(--u) var(--u) 0 var(--ink); }
#sc-menu .tagline b { color: var(--sun); font-weight: 400; }
#menu-list { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 82); width: calc(var(--u) * 110); padding: calc(var(--u) * 5); }
#sc-menu .foot { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 5); font-size: calc(var(--u) * 3.8); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); }
#sc-menu .live { position: absolute; right: calc(var(--u) * 5); bottom: calc(var(--u) * 5); font: calc(var(--u) * 3.6)/1 'Silk', monospace; padding: calc(var(--u) * 2) calc(var(--u) * 3); color: var(--paper); }
#sc-menu .live i { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: var(--red); margin-right: calc(var(--u) * 2); animation: blink 1s steps(2) infinite; vertical-align: middle; }

/* ---------- scénarios ---------- */
#sc-scen .head { position: absolute; left: 50%; top: calc(var(--u) * 8); transform: translateX(-50%); text-align: center; }
#scen-cards { position: absolute; left: 50%; top: calc(var(--u) * 26); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 4); }
.scard { width: calc(var(--cw) + var(--u) * 6); padding: calc(var(--u) * 3); background: var(--bg); color: var(--paper); text-align: left; cursor: pointer; position: relative;
  box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 var(--hi), 0 calc(var(--u) * 1.5) 0 var(--ink); font: inherit; border: 0; }
.scard:hover { background: var(--bg); }
.scard canvas { display: block; image-rendering: pixelated; box-shadow: 0 0 0 var(--u) var(--ink); }
.scard b { display: block; margin-top: calc(var(--u) * 3); font: calc(var(--u) * 4.2)/1.2 'Silk', monospace; color: var(--paper); min-height: calc(var(--u) * 10); }
.scard .tag { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 5); font: calc(var(--u) * 3.4)/1.3 'Silk', monospace; padding: var(--u) calc(var(--u) * 2); background: var(--green); color: var(--ink); box-shadow: inset 0 0 0 var(--u) var(--ink); }
.scard.lock .tag { background: var(--dim); }
.scard .lock-ico { position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 5); width: calc(var(--u) * 7); height: calc(var(--u) * 8); display: none; }
.scard.lock .lock-ico { display: block; }
.scard.sel { transform: translateY(calc(var(--u) * -3)); background: #3d3456; box-shadow: inset 0 0 0 var(--u) var(--sun), inset 0 calc(var(--u) * 2) 0 var(--hi), 0 calc(var(--u) * 1.5) 0 var(--ink); }
.scard.sel b { color: var(--sun); }
#scen-detail { position: absolute; left: 50%; transform: translateX(-50%); width: calc(var(--u) * 250); top: calc(var(--u) * 26 + var(--ch) + var(--u) * 30); display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 2) calc(var(--u) * 8); padding: calc(var(--u) * 5) calc(var(--u) * 6); }
#scen-detail h3 { grid-column: 1 / -1; }
#scen-detail .acc { font-size: calc(var(--u) * 4.8); }
#scen-detail .meta { font-size: calc(var(--u) * 4.2); color: var(--dim); line-height: 1.6; }
#scen-detail .meta b { color: var(--paper); font-weight: 400; }
#scen-detail .go { align-self: end; }

/* ---------- personnage ---------- */
#perso-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto calc(var(--u) * 150); gap: calc(var(--u) * 6); padding: calc(var(--u) * 6); }
#perso-box h2 { grid-column: 1 / -1; }
.perso-left { display: flex; flex-direction: column; gap: calc(var(--u) * 3); width: calc(var(--u) * 92); }
#perso-prev { image-rendering: pixelated; display: block; background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); align-self: center; }
.perso-role { font-size: calc(var(--u) * 4); color: var(--dim); }
.perso-role b { display: block; font: calc(var(--u) * 4.4)/1.3 'Silk', monospace; color: var(--sun); font-weight: 400; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--u); padding: var(--u); }
.swatches .lbl { width: 100%; font: calc(var(--u) * 3.6)/1.4 'Silk', monospace; color: var(--paper); }
.swatches .lbl em { font: calc(var(--u) * 3.4)/1 'Pixelify', monospace; color: var(--dim); font-style: normal; text-transform: none; }
.sw { width: calc(var(--u) * 7); height: calc(var(--u) * 7); padding: 0; border: 0; cursor: pointer; box-shadow: inset 0 0 0 var(--u) var(--ink); }
.sw.on { box-shadow: inset 0 0 0 var(--u) var(--ink), 0 0 0 var(--u) var(--sun); }
.swatches.sel { box-shadow: 0 0 0 var(--u) var(--sun); }
.swatches.fixed .sw { opacity: .35; cursor: default; }
.field { display: grid; grid-template-columns: calc(var(--u) * 26) 1fr; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2.5); }
.field label { font: calc(var(--u) * 3.8)/1 'Silk', monospace; color: var(--dim); }
.field.sel label { color: var(--sun); }
.field.top { align-items: start; }
.pxin { font: calc(var(--u) * 5)/1.3 'Pixelify', monospace; color: var(--ink); background: var(--paper); border: 0; outline: 0; padding: var(--u) calc(var(--u) * 2); width: 100%;
  box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 #e0d2b2; caret-color: var(--red); resize: none; }
textarea.pxin { font-size: calc(var(--u) * 4.2); line-height: 1.35; height: calc(var(--u) * 40); }
.field.sel .pxin { box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 #e0d2b2, 0 0 0 var(--u) var(--sun); }
.agebox { display: flex; gap: calc(var(--u) * 2); align-items: center; }
.agebox .pxin { width: calc(var(--u) * 18); text-align: center; }
.agebox button { padding: var(--u) calc(var(--u) * 2.5); }

/* ---------- panneaux centrés : pause, options, sauvegardes, crédits, bac à sable ---------- */
.panel { min-width: calc(var(--u) * 130); max-width: calc(var(--u) * 240); padding: calc(var(--u) * 7) calc(var(--u) * 8); }
.panel h2 { margin-bottom: calc(var(--u) * 2); }
.panel .sub { color: var(--dim); margin: 0 0 calc(var(--u) * 5); font-size: calc(var(--u) * 4.4); }
.opt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 2) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 1.5); background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); cursor: pointer; }
.opt-row > span { font: calc(var(--u) * 4.2)/1.2 'Silk', monospace; }
.opt-row > span em { display: block; font: calc(var(--u) * 3.6)/1.3 'Pixelify', monospace; color: var(--dim); font-style: normal; text-transform: none; }
.opt-row.sel { box-shadow: inset 0 0 0 var(--u) var(--sun); background: #3d3456; }
.opt-val { display: flex; align-items: center; gap: calc(var(--u) * 2); font: calc(var(--u) * 4.2)/1 'Silk', monospace; color: var(--sun); min-width: calc(var(--u) * 52); justify-content: space-between; }
.opt-val i { width: 0; height: 0; display: inline-block; border: calc(var(--u) * 1.5) solid transparent; }
.opt-val i.l { border-right-color: var(--paper); border-left-width: 0; }
.opt-val i.r { border-left-color: var(--paper); border-right-width: 0; }
.vol { display: inline-flex; gap: calc(var(--u) * .7); }
.vol s { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 4); background: var(--ink); text-decoration: none; }
.vol s.on { background: var(--sun); }
.slot { display: grid; grid-template-columns: calc(var(--u) * 28) 1fr; gap: calc(var(--u) * 4); align-items: center; }
.slot .n { font: calc(var(--u) * 4.2)/1 'Silk', monospace; }
.slot .info { font: calc(var(--u) * 4)/1.35 'Pixelify', monospace; text-transform: none; }
.slot .info b { color: inherit; font-weight: 700; }
.mi.slot { padding-left: calc(var(--u) * 8); }
.credits { max-width: calc(var(--u) * 200); font-size: calc(var(--u) * 4.4); line-height: 1.45; }
.credits p { margin: 0 0 calc(var(--u) * 3); }
.credits b { color: var(--sun); font-weight: 400; font-family: 'Silk', monospace; font-size: calc(var(--u) * 4); }
#bac-roles { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 48)); gap: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 4); }
.rcard { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4) calc(var(--u) * 3); background: var(--bg2); color: var(--paper); border: 0; cursor: pointer;
  font: calc(var(--u) * 3.8)/1.3 'Pixelify', monospace; box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); text-align: center; }
.rcard:hover { background: var(--bg2); }
.rcard b { font: calc(var(--u) * 4.2)/1.2 'Silk', monospace; color: var(--sun); font-weight: 400; }
.rcard span { color: var(--dim); }
.rcard canvas { image-rendering: pixelated; }
.rcard.sel { background: #3d3456; box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); }

/* ---------- bilan ---------- */
#bilan-box { width: calc(var(--u) * 230); max-height: calc(100vh - var(--u) * 16); overflow: auto; padding: calc(var(--u) * 7) calc(var(--u) * 9); }
#bilan-box h2.bad { color: var(--paper); text-shadow: var(--u) var(--u) 0 var(--ink), calc(var(--u) * 2) calc(var(--u) * 2) 0 #96202a; }
#bilan-box .who { color: var(--dim); margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); }
.stat { background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); padding: calc(var(--u) * 2) calc(var(--u) * 3); }
.stat span { display: block; font: calc(var(--u) * 3.4)/1.2 'Silk', monospace; color: var(--dim); }
.stat b { display: block; font: calc(var(--u) * 7)/1.2 'Silk', monospace; color: var(--sun); font-weight: 400; }
.stat b small { font-size: calc(var(--u) * 3.6); color: var(--dim); }
.stat b small.blk { display: block; line-height: 1.2; }
.faits { margin: 0 0 calc(var(--u) * 4); padding: 0; list-style: none; }
.faits li { position: relative; padding-left: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 1.5); font-size: calc(var(--u) * 4.4); }
.faits li::before { content: ''; position: absolute; left: var(--u); top: calc(var(--u) * 2); width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: var(--sun); }
.faits li.bad::before { background: var(--red); } .faits li.good::before { background: var(--green); }
.outcome { background: #2a2033; box-shadow: inset 0 0 0 var(--u) var(--ink), inset calc(var(--u) * 3) 0 0 0 var(--orange); padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 7); margin-bottom: calc(var(--u) * 4); }
.outcome b { font: calc(var(--u) * 4.6)/1.3 'Silk', monospace; color: var(--orange); font-weight: 400; }
.outcome ul { margin: calc(var(--u) * 2) 0 0; padding-left: calc(var(--u) * 5); }
.epilogue { color: var(--dim); font-style: normal; border-top: var(--u) solid var(--hi); padding-top: calc(var(--u) * 3); margin: 0; }

/* ---------- message bref ---------- */
#sc-toast { position: fixed; left: 50%; top: calc(var(--u) * 20); transform: translateX(-50%); display: none; z-index: 20; font: calc(var(--u) * 4.6)/1.3 'Silk', monospace; color: var(--ink); background: var(--sun); padding: calc(var(--u) * 2) calc(var(--u) * 5); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 #8a6a00; pointer-events: none; }
#sc-toast.show { display: block; animation: pulse .3s steps(3); }