/* ---- Assaut d'Azeroth : habillage sombre, inspiré des interfaces WC3 ---- */
:root{
  --bg:#0d1014;
  --panel:#171d24;
  --panel-2:#1f2732;
  --line:#2c3744;
  --gold:#e8c46a;
  --gold-dim:#8c7434;
  --text:#d8dee6;
  --muted:#8494a6;
  --green:#63c26b;
  --red:#d9584c;
  --blue:#5aa9e6;
  --violet:#a986e0;
  --shadow:0 6px 22px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(circle at 50% -10%,#1b2430,#0d1014 60%);
  color:var(--text);font:14px/1.45 "Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* height:100dvh suit la barre d'adresse mobile ; les marges de sécurité
   évitent que l'interface passe sous l'encoche en mode plein écran iOS. */
#app{
  display:flex;flex-direction:column;height:100vh;height:100dvh;
  max-width:1240px;margin:0 auto;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
          calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
}

/* ---------- barre supérieure ---------- */
#topbar{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;box-shadow:var(--shadow);
}
#topbar h1{
  font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 0 14px rgba(232,196,106,.25);white-space:nowrap;
}
#topbar .stats{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:600}
.ico{flex:0 0 20px;width:20px;height:20px;min-width:0;overflow:hidden;display:grid;place-items:center;border-radius:5px;font-size:12px;background:#0f141a;border:1px solid var(--line)}
.ico.gold{color:var(--gold)} .ico.life{color:var(--red)} .ico.wave{color:var(--blue)}
.ico.score{color:var(--violet)} .ico.skull{color:#e0855a}
#topbar .controls{display:flex;gap:6px}
.ctl{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;min-width:38px}
.ctl:hover{border-color:var(--gold-dim);background:#27313d}
.ctl.off{opacity:.45}

/* ---------- scène ---------- */
#stage{display:flex;gap:10px;flex:1;min-height:0}
#canvas-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center}
canvas#game{
  width:100%;height:auto;max-height:100%;aspect-ratio:880/600;display:block;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  background:#1d2a1c;cursor:crosshair;touch-action:none;
}

/* ---------- panneau latéral ---------- */
#sidebar{
  width:300px;flex:0 0 300px;display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;overflow-x:hidden;padding-right:2px;
}
#sidebar::-webkit-scrollbar{width:8px}
#sidebar::-webkit-scrollbar-thumb{background:#2b3541;border-radius:4px}
#sidebar section{
  flex:0 0 auto;                 /* sans cela le flex écrase les sections et le texte déborde */
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:var(--shadow);
}
/* la boîte de vague reste accessible même quand la colonne défile */
#wave-box{position:sticky;top:0;z-index:3}
#sidebar h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}

.wave-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#wave-label{font-weight:700;color:var(--gold)}
#wave-timer{font-variant-numeric:tabular-nums;color:var(--muted)}
.preview{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;margin-bottom:8px}
.pv{display:flex;align-items:center;gap:4px;background:#0f141a;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12px}
.pv .dot{width:9px;height:9px;border-radius:50%}
.pv.air{border-color:#4a6f96}
.pv.boss{border-color:var(--red);color:#f0b6ae}

.wide-btn{
  width:100%;background:linear-gradient(180deg,#2b3746,#202a35);border:1px solid var(--line);
  border-radius:8px;padding:8px;font-weight:600;
}
.wide-btn:hover{border-color:var(--gold-dim)}
.wide-btn:disabled{opacity:.4;cursor:not-allowed}
.wide-btn.danger:hover{border-color:var(--red);color:#f0b6ae}

/* boutique */
.shop-item{
  display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  padding:7px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:#131920;
}
.shop-item:hover{border-color:var(--gold-dim);background:#19212b}
.shop-item.sel{border-color:var(--gold);box-shadow:0 0 0 1px rgba(232,196,106,.35) inset}
.shop-item.poor{opacity:.5}
.shop-item .glyph{flex:0 0 34px;width:34px;height:34px;min-width:0;overflow:hidden;border-radius:7px;display:grid;place-items:center;font-size:17px;border:1px solid var(--line)}
.shop-item .nm{font-weight:600;font-size:13px}
.shop-item .sub{font-size:11px;color:var(--muted)}
.shop-item .price{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.kbd{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:10px;color:var(--muted);margin-left:4px}

/* inspection */
#inspect{min-height:64px}
.insp-title{font-weight:700;margin-bottom:4px}
.insp-row{display:flex;justify-content:space-between;font-size:12px;padding:1px 0}
.insp-row span:first-child{color:var(--muted)}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;border:1px solid var(--line);margin:2px 3px 0 0;color:var(--muted)}
.tag.good{color:var(--green);border-color:#2f5c36}
.tag.bad{color:var(--red);border-color:#5c2f2f}
.insp-desc{color:var(--muted);font-size:12px;margin-top:4px}
.insp-tags{margin-top:6px}

.tp-actions{display:flex;gap:6px;margin-top:8px}
.targeting{margin-top:8px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#tp-targeting{display:flex;gap:4px;flex-wrap:wrap}
.tgt{background:#0f141a;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11px}
.tgt.on{border-color:var(--gold);color:var(--gold)}

#log-box{flex:0 0 auto}
#log{font-size:12px;color:var(--muted);display:flex;flex-direction:column-reverse;gap:2px;max-height:96px;overflow:hidden}
#log .l-gold{color:var(--gold)} #log .l-bad{color:var(--red)} #log .l-good{color:var(--green)}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,11,15,.82);backdrop-filter:blur(3px);border-radius:10px;z-index:5;
}
.panel{
  background:linear-gradient(180deg,#1c242e,#141a21);border:1px solid var(--line);
  border-radius:14px;padding:24px 28px;max-width:520px;text-align:center;box-shadow:var(--shadow);
}
.panel.wide{max-width:860px;text-align:left}
.panel h2{color:var(--gold);font-size:24px;letter-spacing:.05em;margin-bottom:8px}
.panel p{color:var(--muted);margin:6px 0}
.diff-select{display:flex;gap:8px;justify-content:center;margin:16px 0 8px;flex-wrap:wrap}
.diff{
  background:#131920;border:1px solid var(--line);border-radius:9px;padding:9px 12px;min-width:120px;text-align:center;
}
.diff:hover{border-color:var(--gold-dim)}
.diff.on{border-color:var(--gold);background:#1d2531}
.diff b{display:block;color:var(--text)}
.diff small{color:var(--muted);font-size:11px}
.scores{color:var(--muted);font-size:12px;min-height:18px;margin-top:6px}

/* ---------- classement en ligne ---------- */
.board-body{min-height:180px;max-height:46vh;overflow-y:auto;margin-top:10px}
table.board{width:100%;border-collapse:collapse;font-size:13px}
table.board th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
table.board td{padding:5px 6px;border-bottom:1px solid #202832;text-align:left}
table.board td.num{text-align:right;font-variant-numeric:tabular-nums}
table.board tr.me td{background:rgba(232,196,106,.10)}
table.board .rk{color:var(--muted);width:2.2em}
table.board tr:nth-child(1) .rk{color:var(--gold);font-weight:700}
.board-empty{color:var(--muted);padding:24px 0;text-align:center}
.board-err{color:var(--red);padding:18px 0;text-align:center;font-size:13px}
.submit-row{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.submit-row input{
  background:#0f141a;border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:9px 12px;font:inherit;min-width:180px;
}
.submit-row input:focus{outline:none;border-color:var(--gold-dim)}
.submit-msg{font-size:12.5px;color:var(--muted);margin-top:8px;min-height:18px}
.submit-msg.ok{color:var(--green)} .submit-msg.ko{color:var(--red)}
.ov-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
button.big{
  background:linear-gradient(180deg,#3a4a2c,#2a3620);border:1px solid #4d6338;color:#dff0c8;
  border-radius:9px;padding:11px 26px;font-weight:700;letter-spacing:.04em;
}
button.big:hover{border-color:var(--green)}
button.ghost{background:transparent;border:1px solid var(--line);border-radius:9px;padding:11px 20px}
button.ghost:hover{border-color:var(--gold-dim)}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.help-grid h3{font-size:13px;color:var(--gold);margin:10px 0 4px;text-transform:none;letter-spacing:0}
.help-grid p{font-size:12.5px}
.keys{margin:0;padding-left:16px;font-size:12.5px;color:var(--muted)}
.dmg-table{border-collapse:collapse;font-size:11px;width:100%;margin-top:6px}
.dmg-table th,.dmg-table td{border:1px solid var(--line);padding:2px 4px;text-align:center}
.dmg-table th{color:var(--muted);font-weight:600}
.dmg-table td.hi{color:var(--green)} .dmg-table td.lo{color:var(--red)}

@media (max-width:1080px){
  #stage{flex-direction:column}
  #sidebar{width:100%;flex:0 0 auto;max-height:38vh;flex-direction:row;flex-wrap:wrap}
  #sidebar section{flex:1 1 240px}
  #wave-box{position:static}
  .help-grid{grid-template-columns:1fr}
}