:root{ --ink:#e8e4da; --muted:#b7b0a2; --panel:rgba(18,20,24,.88); --rule:rgba(255,255,255,.12); --accent:#d8b56a; }
*{ box-sizing:border-box }
html,body{ margin:0; height:100%; overflow:hidden; background:#000; color:var(--ink); font:15px/1.45 system-ui,"Segoe UI",sans-serif; }
canvas#view{ position:fixed; inset:0; display:block; }
.overlay{ position:fixed; z-index:5; pointer-events:none; }
.panel{ background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:8px 10px; backdrop-filter:blur(2px); }
#status{ left:12px; top:12px; max-width:24rem; font-size:13px; color:var(--muted); }
#caption{ left:12px; bottom:12px; max-width:26rem; font-size:12px; color:var(--muted); }
#dot{ position:fixed; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.5); }
.label{ position:fixed; transform:translate(-50%,-100%); pointer-events:none; font-size:12px; color:#fff; text-shadow:0 1px 2px #000; white-space:nowrap; }
.label .d{ color:#cfd6db; }
.label.faint{ opacity:.45; }
.signal{ position:fixed; transform:translate(-50%,-100%); pointer-events:none; font-size:13px; line-height:1; color:#fff; text-shadow:0 1px 3px #000; white-space:nowrap; transition:opacity .25s ease; }
/* The play page's own panels exist so the shared module never throws; watch mode never shows them. */
#arrive, #card, #placepanel, #bag, #stats, #hint { display:none; }