:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e7f3f2;background:#041016;font-synthesis:none}
*{box-sizing:border-box}
html,body,#game-shell,#game{width:100%;height:100%;margin:0;overflow:hidden}
#game-shell{position:relative;background:radial-gradient(circle at 70% 30%,#123440,#030b10 68%);cursor:default}
#game{display:block}
#loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:18px;background:#031017;z-index:20;letter-spacing:.28em;font-size:11px;transition:opacity .6s}
.loadmark{width:74px;height:74px;border:1px solid #ff9d46;border-radius:50%;display:grid;place-items:center;color:#ffb269;font-size:18px;box-shadow:0 0 40px #ff7b2222}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#010609aa 100%);z-index:2}
#letterbox:before,#letterbox:after{content:"";position:absolute;left:0;right:0;height:6vh;background:#02080b;z-index:5;transition:height .7s}
#letterbox:before{top:0}#letterbox:after{bottom:0}
#letterbox.play:before,#letterbox.play:after{height:0}
#topbar{position:absolute;top:22px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:flex-start;z-index:8;pointer-events:none}
.brand{display:flex;flex-direction:column;letter-spacing:.18em;font-weight:700;font-size:13px;text-shadow:0 2px 8px #000}
.brand small{font-size:8px;opacity:.55;margin-top:5px}.controls{display:flex;gap:8px;pointer-events:auto}
button,select{color:#cae1df;background:#07151bbb;border:1px solid #66848a66;padding:8px 11px;letter-spacing:.12em;font-size:10px;border-radius:2px;backdrop-filter:blur(8px)}
button:hover,select:hover{border-color:#ff9b54;color:white}
#skip{position:absolute;z-index:9;right:30px;bottom:9vh}
#objective{position:absolute;left:50%;top:28px;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;color:#b9d0cf;text-shadow:0 2px 5px #000;z-index:8;opacity:0;transition:opacity .5s}
#hotspot{position:absolute;display:none;align-items:center;gap:9px;transform:translate(-50%,-100%);padding:9px 12px;background:#051116dd;border:1px solid #ff9b5488;border-radius:2px;letter-spacing:.1em;font-size:10px;pointer-events:none;z-index:10;white-space:nowrap}
.hotspot-dot{width:7px;height:7px;border:1px solid #ffad68;border-radius:50%;box-shadow:0 0 12px #ff761f}
#subtitle{position:absolute;bottom:10vh;left:50%;transform:translateX(-50%);display:none;max-width:min(700px,80vw);padding:12px 18px;background:#031016dd;border-left:2px solid #ff9d46;z-index:9;line-height:1.45;text-align:center;font-size:14px}
#subtitle b{display:block;color:#ffaf6b;font-size:9px;letter-spacing:.18em;margin-bottom:4px}
#reveal{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .2s}
#reveal:after{content:"";position:absolute;width:66px;height:66px;border:1px solid #ffad6b88;border-radius:50%;box-shadow:0 0 26px #ff802844;left:var(--rx);top:var(--ry);transform:translate(-50%,-50%)}
#debug{position:absolute;left:16px;bottom:16px;z-index:11;display:none;background:#001015d9;border:1px solid #3d6b70;padding:10px 12px;font:11px/1.5 ui-monospace,monospace;color:#8ee1cc;white-space:pre}
#completion{position:absolute;inset:0;z-index:15;display:grid;place-content:center;text-align:center;background:#02090cf5;opacity:0;pointer-events:none;transition:opacity 1.2s}
#completion.show{opacity:1;pointer-events:auto}
#completion small{color:#ff9f51;letter-spacing:.28em}#completion h1{font-weight:300;letter-spacing:.16em;font-size:clamp(34px,6vw,78px);margin:12px 0}#completion p{color:#91a8a8}#completion button{margin-top:22px}
@media(max-width:650px){#topbar{left:14px;right:14px;top:14px}.brand small{display:none}#objective{top:64px;width:90%;text-align:center}#subtitle{font-size:12px;width:90%}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}