:root{--bg:#1a0f0a;--fg:#fff4e8;--panel:#2a1810;--accent:#ff8a3d;--accent2:#ffe066}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
#pn-root{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#pn-canvas{display:block;outline:none}
#pn-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:1.2rem;opacity:.8}
#pn-hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:14px;font-weight:700;font-size:1.05rem;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#pn-bar{position:absolute;top:max(6px,env(safe-area-inset-top));right:8px;display:flex;gap:6px;z-index:2}  /* above #pn-overlay: mute/resume stay reachable on menus and pause */
#pn-bar button{min-width:44px;min-height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:var(--fg);font-size:1rem;cursor:pointer}
#pn-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);padding:16px}
#pn-overlay[hidden]{display:none}
.pn-box{max-width:420px;width:100%;background:var(--panel);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:22px 20px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.pn-box h1{margin:0 0 10px;font-size:1.7rem;color:var(--accent)}
.pn-box p{margin:6px 0;line-height:1.45}
.pn-box button{display:block;width:100%;min-height:48px;margin-top:12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--fg);font-size:1.05rem;font-weight:600;cursor:pointer}
.pn-box button.pn-primary{background:var(--accent);color:var(--bg);border-color:transparent}
button:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.pn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}