:root{
  --bg:#0b0d12;
  --panel:#141924;
  --panel-2:#1c2231;
  --line:#2a3245;
  --text:#e8ecf5;
  --muted:#9aa5bd;
  --accent:#ff8a3d;
  --accent-2:#ffc247;
  --ok:#4ade80;
  --bad:#f87171;
}
*{box-sizing:border-box}
/* regras com display: explícito vencem o [hidden] do navegador — reforça aqui */
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
canvas{display:block}

#overlay{
  position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:10;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,138,61,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(97,124,255,.18), transparent 60%),
    var(--bg);
  overflow:auto;
}
#panel{
  width:min(560px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.55)
}
h1{margin:0 0 6px;font-size:30px;letter-spacing:-.5px}
.sub{margin:0 0 20px;color:var(--muted);font-size:14px}

.status{font-size:13px;padding:10px 14px;border-radius:12px;margin-bottom:18px;border:1px solid var(--line);background:var(--panel-2)}
.status.ok{color:var(--ok);border-color:rgba(74,222,128,.35)}
.status.bad{color:var(--bad);border-color:rgba(248,113,113,.35)}
.status.checking{color:var(--muted)}

.kitpick{margin-bottom:18px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
select{
  width:100%;padding:12px 14px;border-radius:12px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);font-size:15px;appearance:none;cursor:pointer
}
select:focus{outline:2px solid var(--accent);outline-offset:1px}
.kitdesc{margin:10px 2px 0;color:var(--muted);font-size:13px;min-height:34px;line-height:1.45}

button{
  width:100%;padding:16px;font-size:17px;font-weight:650;border-radius:14px;cursor:pointer;
  border:1px solid transparent;transition:transform .08s ease,filter .15s ease
}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#20140a;margin-bottom:10px}
.primary:not(:disabled):hover{filter:brightness(1.07)}
.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.ghost:hover{color:var(--text);border-color:var(--accent)}

.help{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
summary{cursor:pointer;font-size:14px;color:var(--muted)}
summary:hover{color:var(--text)}
.help ul{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7}
.help b{color:var(--text);font-weight:600}
.keys{color:var(--muted);font-size:13px;line-height:2}
kbd{
  background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text)
}
.foot{margin:18px 0 0;font-size:12px;color:var(--muted);text-align:center}

#hud{position:fixed;left:0;right:0;bottom:0;padding:14px 18px;z-index:5;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.65))}
#hudKit{font-size:15px;font-weight:600}
#hudHint{font-size:12px;color:var(--muted)}

#fatal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:32px;
  background:rgba(11,13,18,.96);color:var(--bad);font-size:15px;text-align:center;line-height:1.6}