*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#15111f;display:flex;align-items:center;justify-content:center}
canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:0 0 80px rgba(0,0,0,.65)}
/* overlays are positioned by JS (fitOverlays) so they stick to the canvas, not the window */
.vignette{position:fixed;left:0;top:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 45%,#100b242b 100%)}
.vignette[hidden]{display:none}
#loading{position:fixed;left:0;top:0;display:grid;place-items:center;color:#f7ddce;font:16px system-ui;background:#211c2d}
#loading[hidden]{display:none}
#hud{position:fixed;left:0;top:0;color:#ffebe2;font:600 13px system-ui;letter-spacing:3px;overflow-wrap:anywhere}
#hud[hidden]{display:none}
#hud small{display:block;margin:10px 0 0 17px;font-size:10px;letter-spacing:2px;opacity:.6}
#stats{margin-top:16px !important;font:500 11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace !important;letter-spacing:1px !important;opacity:.9 !important;white-space:pre-wrap !important;overflow-wrap:anywhere}
.dot{display:inline-block;width:6px;height:6px;background:#edac9b;border-radius:50%;margin-right:10px}
#showUI{position:fixed;right:14px;bottom:14px;z-index:20;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,235,226,.34);background:rgba(18,13,26,.88);backdrop-filter:blur(10px);color:#fff4ee;font:600 12px system-ui;cursor:pointer}
#showUI:hover{background:rgba(44,32,58,.94);border-color:rgba(255,235,226,.55)}
#showUI[hidden]{display:none}
#panel{position:fixed;left:0;bottom:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:13px 14px;border-radius:14px;background:rgba(18,13,26,.94);backdrop-filter:blur(10px);border:1px solid rgba(255,235,226,.28);color:#fff4ee;font:600 12px system-ui;z-index:9;scrollbar-width:thin}
#panel[hidden]{display:none}
#panel .grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#panel b{width:100%;font-size:10px;letter-spacing:2px;opacity:.7}
#panel button{border:1px solid rgba(255,235,226,.34);background:rgba(255,235,226,.12);color:#fff4ee;padding:5px 9px;border-radius:9px;font:600 12px system-ui;cursor:pointer;transition:.14s}
#panel button:hover{background:rgba(237,172,155,.34);border-color:rgba(237,172,155,.75)}
#panel button.on{background:#edac9b;color:#241a2c;border-color:#edac9b}
#panel label.sl{display:flex;align-items:center;gap:8px;flex:1 1 46%;min-width:158px;font-size:11px;font-weight:600;opacity:.95}
#panel label.sl input[type=range]{flex:1;min-width:50px;accent-color:#edac9b}
#panel output{font:600 11px ui-monospace,monospace;min-width:36px;text-align:right;opacity:.95;color:#ffd9c8}
/* narrow canvas: stack the panel to the full width so it never spills off-frame */
#panel.compact label.sl{flex:1 1 100%}