/* ================= Étape E11 : sous-classes, écran des compétences, notification =================
   Style pixel strict : panneaux .px, unité var(--u), Pixelify (texte) et Silk (titres). Pas d'arrondi, pas de flou. */
body:not([data-scene="game"]) :is(#skill-note) { display: none !important; }
#sc-sousclasse img, #sk-box img, #skill-note canvas, .sk-learned img { image-rendering: pixelated; }

/* ---------- choix de la sous-classe ---------- */
#sub-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--u) * 250), 96vw); padding: calc(var(--u) * 6) calc(var(--u) * 7); }
#sub-box .sub { color: var(--dim); font-size: calc(var(--u) * 4.2); margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
#sub-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 4); }
.subcard { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); background: var(--bg2); color: var(--paper); border: 0; cursor: pointer;
  font: calc(var(--u) * 3.6)/1.25 'Pixelify', monospace; text-align: center; box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); }
.subcard canvas { image-rendering: pixelated; box-shadow: 0 0 0 var(--u) var(--ink); }
.subcard b { font: calc(var(--u) * 3.9)/1.2 'Silk', monospace; color: var(--sun); font-weight: 400; }
.subcard span { color: var(--dim); }
.subcard:hover { background: var(--bg2); }
.subcard.sel { background: #3d3456; box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); }
#sub-detail { background: #1b1724; box-shadow: inset 0 0 0 var(--u) var(--ink); padding: calc(var(--u) * 3) calc(var(--u) * 4); margin-bottom: calc(var(--u) * 3); min-height: calc(var(--u) * 62); }
#sub-detail .sd-head { display: flex; align-items: baseline; gap: calc(var(--u) * 3); flex-wrap: wrap; }
#sub-detail .sd-head span { color: var(--dim); font-size: calc(var(--u) * 4); }
#sub-detail .sd-head b { color: var(--paper); font-weight: 400; }
.sd-story { margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); font-size: calc(var(--u) * 4.3); }
.sd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
#sub-detail h4, #sk-detail h4 { margin: 0 0 calc(var(--u) * 1.5); font: calc(var(--u) * 3.6)/1 'Silk', monospace; color: var(--dim); font-weight: 400; }
#sub-detail .faits { margin-bottom: calc(var(--u) * 2); }
#sub-detail .faits li { font-size: calc(var(--u) * 4); }
.sd-start { display: flex; gap: calc(var(--u) * 3); align-items: center; border-top: var(--u) solid var(--hi); padding-top: calc(var(--u) * 2); }
.sd-start img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); background: var(--bg2); box-shadow: 0 0 0 var(--u) var(--ink); padding: var(--u); }
.sd-start b { display: block; font: calc(var(--u) * 4.2)/1.3 'Silk', monospace; color: var(--sun); font-weight: 400; }
.sd-start span { color: var(--paper); font-size: calc(var(--u) * 4); }
#sc-sousclasse .hints { left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); position: absolute; font-size: calc(var(--u) * 4); white-space: nowrap; }

/* ---------- écran des compétences ---------- */
#sk-box { width: min(calc(var(--u) * 290), 98vw); max-width: none; max-height: calc(100vh - var(--u) * 8); overflow: auto; padding: calc(var(--u) * 5) calc(var(--u) * 6); }
.sk-head { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 4); align-items: center; margin-bottom: calc(var(--u) * 3); }
#sk-face { image-rendering: pixelated; box-shadow: 0 0 0 var(--u) var(--ink); }
.sk-id .sub { margin: calc(var(--u) * 1.5) 0 0; font-size: calc(var(--u) * 4); color: var(--dim); }
.sk-id .sub b { color: var(--sun); font-weight: 400; } .sk-id .sub em { color: var(--orange); font-style: normal; }
.sk-sub { display: flex; flex-direction: column; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 3.6); }
.sk-sub .good { color: var(--green); } .sk-sub .bad { color: #ffb4a8; }
.sk-keys { font-size: calc(var(--u) * 3.6); color: var(--dim); align-self: start; white-space: nowrap; }
.sk-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: calc(var(--u) * 3); }
.sk-col { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.sk-fam { font: calc(var(--u) * 3.6)/1.2 'Silk', monospace; color: var(--fc); text-transform: uppercase; padding-bottom: var(--u); box-shadow: 0 var(--u) 0 var(--fc); margin-bottom: var(--u); white-space: nowrap; }
.sk-tile { display: grid; grid-template-columns: calc(var(--u) * 12) 1fr; grid-template-rows: auto auto auto; column-gap: calc(var(--u) * 2); align-items: center; text-align: left;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: #1b1724; color: var(--dim); border: 0; cursor: pointer; font: calc(var(--u) * 3.6)/1.2 'Pixelify', monospace;
  box-shadow: inset 0 0 0 var(--u) var(--ink); }
.sk-tile img { grid-row: 1 / 4; width: calc(var(--u) * 12); height: calc(var(--u) * 12); opacity: .55; }
.sk-tile .nm { font: calc(var(--u) * 3.4)/1.15 'Silk', monospace; color: #8f86a6; }
.sk-tile.on { background: var(--bg2); color: var(--paper); }
.sk-tile.on img { opacity: 1; }
.sk-tile.on .nm { color: var(--paper); }
.sk-tile.max .nm { color: var(--sun); }
.sk-tile:hover { background: var(--bg2); }
.sk-tile.sel { box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); background: #3d3456; }
.pips { display: flex; gap: var(--u); margin: calc(var(--u) * .5) 0; }
.pips i { width: calc(var(--u) * 3); height: calc(var(--u) * 2); background: var(--ink); box-shadow: inset 0 0 0 calc(var(--u) * .5) #4a3f63; }
.pips i.on { background: var(--fc); box-shadow: none; }
.sk-tile .bar { display: block; height: var(--u); background: var(--ink); }
.sk-tile .bar i { display: block; height: 100%; background: var(--fc); opacity: .7; }
#sk-detail { display: grid; grid-template-columns: calc(var(--u) * 20) 1fr; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 4);
  background: #1b1724; box-shadow: inset 0 0 0 var(--u) var(--ink); min-height: calc(var(--u) * 34); }
#sk-detail > img { width: calc(var(--u) * 20); height: calc(var(--u) * 20); background: var(--bg2); box-shadow: 0 0 0 var(--u) var(--ink); padding: var(--u); }
.sk-dh { display: flex; gap: calc(var(--u) * 3); align-items: baseline; flex-wrap: wrap; }
.sk-dh b { font: calc(var(--u) * 5)/1.2 'Silk', monospace; color: var(--paper); font-weight: 400; }
.sk-dh span { font: calc(var(--u) * 3.4)/1 'Silk', monospace; }
.sk-dh .lv { color: var(--ink); background: var(--sun); padding: calc(var(--u) * .5) var(--u); }
.sk-dh .lock { color: var(--paper); background: #4a3f63; padding: calc(var(--u) * .5) var(--u); }
.sk-how { margin: calc(var(--u) * 1.5) 0; font-size: calc(var(--u) * 4); }
.sk-how em { font-style: normal; color: var(--dim); } .sk-how b { color: var(--sun); font-weight: 400; }
#sk-detail ol { list-style: none; margin: 0; padding: 0; font-size: calc(var(--u) * 4); }
#sk-detail li { color: #8f86a6; margin-bottom: var(--u); }
#sk-detail li kbd { min-width: calc(var(--u) * 7); background: #4a3f63; color: var(--paper); box-shadow: 0 var(--u) 0 #2a2436; }
#sk-detail li.got { color: var(--paper); } #sk-detail li.got kbd { background: var(--sun); color: var(--ink); box-shadow: 0 var(--u) 0 #8a6a00; }
#sk-detail li.next { color: var(--dim); }
#sk-detail li small { color: #6d6284; }

/* ---------- notification « compétence apprise » ---------- */
#skill-note { left: 50%; top: calc(var(--u) * 20); transform: translateX(-50%); display: none; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); align-items: center;
  max-width: calc(var(--u) * 150); z-index: 9; pointer-events: none;
  box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 0 var(--hi), inset 0 0 0 calc(var(--u) * 2) var(--sun); }
#skill-note.show { display: grid; animation: sknote .45s steps(3); }
@keyframes sknote { 0% { transform: translate(-50%, calc(var(--u) * -6)); filter: brightness(1.8); } 100% { transform: translateX(-50%); } }
#skill-note .ic { background: var(--bg2); box-shadow: 0 0 0 var(--u) var(--ink); padding: var(--u); line-height: 0; }
#skill-note .hd { font: calc(var(--u) * 3.4)/1.2 'Silk', monospace; color: var(--sun); }
#skill-note b { display: block; font: calc(var(--u) * 5)/1.25 'Silk', monospace; color: var(--paper); font-weight: 400; }
#skill-note b em { font-style: normal; color: var(--sun); }
#skill-note .fx { display: block; font-size: calc(var(--u) * 4); color: var(--dim); }

/* ---------- badge de sous-classe dans le HUD ---------- */
#sub-badge { font: calc(var(--u) * 3.3)/1.3 'Silk', monospace; color: var(--dim); margin: 0 0 calc(var(--u) * 1.5); display: flex; gap: calc(var(--u) * 1.5); align-items: center; }
#sub-badge i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); flex: none; box-shadow: 0 0 0 calc(var(--u) * .5) var(--ink); }
#sub-badge.ok { color: var(--green); } #sub-badge.bad { color: var(--orange); }

/* ---------- bilan : ce que tu as appris ---------- */
.sk-learned { display: grid; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 4); }
.sk-learned > div { display: grid; grid-template-columns: calc(var(--u) * 12) auto 1fr; gap: calc(var(--u) * 3); align-items: center; background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); }
.sk-learned img { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.sk-learned b { font: calc(var(--u) * 4)/1.2 'Silk', monospace; color: var(--sun); font-weight: 400; white-space: nowrap; }
.sk-learned span { font-size: calc(var(--u) * 4); color: var(--paper); }
#qdlg .dim { color: var(--dim); }