/* Layout : poste de commandement — barre de ressources en haut, carte au centre, panneau de production à droite (dessous sur mobile) */
:root{
  --night:#120f0c;
  --panel:#1e1915;
  --panel2:#28211b;
  --line:#3d3228;
  --ink:#f2e6d3;
  --muted:#a8977f;
  --amber:#ffb21f;
  --azur:#3b9cff;
  --rust:#e8612c;
  --ok:#5fd68f;
  --bad:#ff5a4a;
  --display:"Big Shoulders Stencil Display","Arial Narrow",Impact,sans-serif;
  --ui:"Saira Semi Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--night);color:var(--ink);font-family:var(--ui);overflow:hidden;-webkit-user-select:none;user-select:none}
button{font-family:var(--ui);color:var(--ink)}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.app{height:100%;display:flex;flex-direction:column;gap:8px;padding-inline:16px;padding-block:8px;box-sizing:border-box}
.top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
.brand{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.04em;color:var(--amber);line-height:1}
.res{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.res small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.res b{font-size:19px;font-weight:700}
.res.warn b{color:var(--bad)}
.spacer{flex:1}
.tb{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 12px;font-weight:600;font-size:14px;cursor:pointer}
.tb:hover{background:var(--panel2)}
.main{flex:1;min-height:0;display:flex;gap:10px}
.stage{position:relative;flex:1;min-width:0;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#090806}
#cv{display:block;width:100%;height:100%;touch-action:none}
.side{width:244px;flex:none;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.mmwrap{display:flex;flex-direction:column;gap:10px}
#mm{width:100%;aspect-ratio:1;max-width:100%;image-rendering:pixelated;border-radius:6px;box-shadow:0 0 0 1px var(--line);cursor:pointer;touch-action:none;background:#090806}
.info{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:64px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.info h3{margin:0;font-size:15px;font-weight:700}
.info p{margin:0;color:var(--muted);line-height:1.35}
.hpbar{height:5px;background:#000;border-radius:3px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--ok)}
.mini{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:600;cursor:pointer}
.builds{display:flex;flex-direction:column;gap:6px;min-width:0}
.builds h2{margin:4px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pb{position:relative;overflow:hidden;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 8px 8px;cursor:pointer;display:flex;flex-direction:column;gap:1px;min-width:0}
.pb:hover{background:var(--panel2)}
.pb .pn{font-weight:700;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb .pc{font-size:12px;color:var(--amber);font-variant-numeric:tabular-nums}
.pb .ps{font-size:11px;color:var(--muted);min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb .pf{position:absolute;left:0;bottom:0;height:3px;background:var(--amber);width:0}
.pb.locked{opacity:.42}
.pb.busy{opacity:.6}
.pb.ready{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.pb.ready .ps{color:var(--amber)}
.toasts{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:max-content;max-width:calc(100% - 32px)}
.toast{background:rgba(18,15,12,.88);border:1px solid var(--line);border-radius:6px;padding:4px 12px;font-size:13px;font-weight:600;animation:tin .2s ease-out}
.toast.bad{border-color:var(--bad);color:#ffc9c2}
.toast.good{border-color:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}
.placebar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:rgba(18,15,12,.9);border:1px solid var(--amber);border-radius:8px;padding:6px 8px 6px 12px;font-size:13px;font-weight:600;max-width:calc(100% - 32px)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,8,6,.84);overflow-y:auto}
.card{max-width:480px;width:100%;display:flex;flex-direction:column;gap:14px;margin:auto}
.card h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,9vw,64px);line-height:.9;margin:0;color:var(--amber);letter-spacing:.02em;text-wrap:balance}
.card p{margin:0;color:var(--muted);line-height:1.5;font-size:15px}
.card p b{color:var(--ink)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:14px;align-items:baseline}
.keys span:nth-child(odd){color:var(--ink);font-weight:600;white-space:nowrap}
.keys span:nth-child(even){color:var(--muted)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 14px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.go{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.05em;background:var(--amber);color:#2a1700;border:0;border-radius:8px;padding:10px 24px;cursor:pointer;align-self:flex-start}
.stats{display:grid;max-width:320px;grid-template-columns:1fr auto;gap:4px 16px;font-size:15px;font-variant-numeric:tabular-nums}
.stats span:nth-child(odd){color:var(--muted)}
.lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .brand{font-size:20px}
  .main{flex-direction:column}
  .side{width:auto;flex:0 0 auto;max-height:44%;display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px}
  .info{font-size:12px;padding:6px 8px}
  .info h3{font-size:13px}
  .builds{overflow-y:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .pb .pn{font-size:13px}
}

/* Ajouts de la version en ligne */
.azur{color:var(--azur)} .rust{color:var(--rust)}
.tb[aria-pressed="false"]{color:var(--muted)}
.back{color:var(--muted);font-size:14px;text-decoration:none;align-self:flex-start}
.back:hover{color:var(--amber)}
.seg button[hidden]{display:none}
.slots{display:flex;flex-direction:column;gap:8px}
.slot{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.slot p{font-size:13px;margin:2px 0 0}
.hof{overflow-x:auto}
.hof table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.hof th,.hof td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line)}
.hof th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hof tr.me td{color:var(--amber)}
#eRank{color:var(--ink)}