:root{
  --bg:#08090A; --panel:#14171B; --panel2:#1B1F25; --line:#2A3039; --line2:#3A424D;
  --ink:#EEF1F3; --dim:#98A2AD; --faint:#5B6672;
  --brass:#E7B324; --brass-ink:#141310; --brass-soft:#3A2F12;
  --good:#57C05F; --warn:#E7B324; --bad:#E0453B;
  --cz:#E7B324; --hot:#E0453B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --r:3px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%; touch-action:manipulation}
body{background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden}
h1,h2,h3,.disp{font-family:"Saira Condensed",Impact,sans-serif; font-weight:600; letter-spacing:.02em; margin:0}
a{color:var(--brass)}
button,select,input{font:inherit}

.shell{display:grid; grid-template-rows:auto 1fr; height:100vh; height:100dvh}
.top{display:flex; align-items:center; gap:12px; padding:10px 14px;
  padding-top:calc(10px + var(--safe-t)); border-bottom:1px solid var(--line);
  background:rgba(20,23,27,.94); backdrop-filter:blur(8px); z-index:5}
.mark{width:36px; height:36px; display:grid; place-items:center; background:var(--brass);
  color:var(--brass-ink); font-family:"Saira Condensed",sans-serif; font-weight:700; font-size:18px;
  border-radius:2px; text-decoration:none; flex:0 0 auto}
.top .brand{text-decoration:none; color:inherit; min-width:0}
.top .brand h1{font-size:17px; text-transform:uppercase; letter-spacing:.07em; line-height:1}
.top .brand p{margin:2px 0 0; font-size:11px; color:var(--dim)}
.nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.nav a{text-decoration:none; color:var(--dim); font-family:"Saira Condensed",sans-serif; font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-radius:2px;
  min-height:40px; display:inline-flex; align-items:center}

.stage{position:relative; min-height:0; touch-action:none}
.stage canvas{display:block; width:100%; height:100%; touch-action:none}

.hud{position:absolute; inset:auto 14px calc(14px + var(--safe-b)) 14px; z-index:4;
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; pointer-events:none}
.hud > *{pointer-events:auto}
.hud-top{position:absolute; top:10px; left:10px; right:10px; z-index:4;
  display:flex; gap:6px; flex-wrap:wrap; pointer-events:none}
.hud-top > *{pointer-events:auto}

.panel{background:rgba(20,23,27,.92); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; box-shadow:var(--shadow); max-width:min(420px,100%)}
.panel h2{font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.panel p,.hint{margin:0; font-size:13px; color:var(--dim)}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn{appearance:none; border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; padding:10px 12px; border-radius:2px; cursor:pointer; min-height:42px}
.btn:hover{border-color:var(--brass); color:var(--brass)}
.btn.primary{background:var(--brass); color:var(--brass-ink); border-color:var(--brass)}
.btn.primary:hover{filter:brightness(1.06); color:var(--brass-ink)}
.select{appearance:none; border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  padding:10px 12px; border-radius:2px; font-size:14px; min-height:42px; max-width:100%}
.stat{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; color:var(--ink)}
.stat b{color:var(--brass); font-weight:500}
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--dim)}
.swatch{display:inline-flex; align-items:center; gap:6px}
.swatch i{width:10px; height:10px; border-radius:50%; display:inline-block}
.toast{position:absolute; top:calc(12px + var(--safe-t)); left:50%; transform:translateX(-50%);
  z-index:8; background:var(--panel); border:1px solid var(--brass); color:var(--ink);
  padding:10px 14px; border-radius:2px; font-size:13px; opacity:0; transition:opacity .2s;
  pointer-events:none; max-width:90vw; text-align:center}
.toast.show{opacity:1}

.sheet-toggle{display:none}

@media (max-width:720px){
  .top{gap:8px}
  .top .brand p{display:none}
  .nav{width:100%; margin-left:0; justify-content:stretch}
  .nav a{flex:1 1 0; justify-content:center; padding:8px 4px; font-size:11px; letter-spacing:.04em}

  .hud{inset:auto 0 0 0; padding:0; flex-direction:column; align-items:stretch}
  .hud .panel{
    max-width:none; width:100%; border-radius:12px 12px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding:10px 14px calc(14px + var(--safe-b));
    max-height:min(52vh, 440px); overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hud.collapsed .panel-body{display:none}
  .sheet-toggle{display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
    appearance:none; border:0; background:transparent; color:var(--dim); padding:4px 0 10px;
    font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:12px; text-transform:uppercase;
    letter-spacing:.1em; cursor:pointer; min-height:36px}
  .sheet-toggle::before{content:""; width:36px; height:4px; border-radius:2px; background:var(--line2)}

  .hud-top{top:auto; bottom:auto; left:8px; right:8px;
    top:8px; max-height:none; overflow:visible}
  .hud-top .select{flex:1 1 140px}
  .hud-top .btn{flex:1 1 auto; padding:8px 8px; font-size:11px; min-height:40px}

  .row .btn, .row a.btn{flex:1 1 40%; justify-content:center; text-align:center; text-decoration:none;
    display:inline-flex; align-items:center}
}