:root{--ui-font:"Segoe UI", system-ui, -apple-system, sans-serif;--display-font:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;--accent:#7fd8ff;--accent2:#c05cff;--gold:#ffb02e;--danger:#ff5d7a;--panel:#0a0818d1;--panel-border:#8c78ff59}*{box-sizing:border-box}html,body{color:#eae6ff;height:100%;font-family:var(--ui-font);background:#05030f;margin:0;overflow:hidden}#app canvas{display:block}#ui{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.hud,.hud *{pointer-events:none}.hidden{display:none!important}button{font-family:var(--ui-font);cursor:pointer}.hud{transition:opacity .4s;position:absolute;inset:0}.hud-topleft{position:absolute;top:20px;left:22px}.hud-name{font-family:var(--display-font);letter-spacing:1px;text-shadow:0 2px 8px #000c;font-size:22px}.hud-level{color:var(--accent);margin-top:2px;font-size:13px}.xpbar{background:#ffffff1f;border-radius:3px;width:200px;height:6px;margin-top:6px;overflow:hidden}.xpbar>div{background:linear-gradient(90deg, var(--accent), var(--accent2));width:0%;height:100%;transition:width .4s}.hud-vitals{width:260px;position:absolute;bottom:26px;left:22px}.bar{background:#ffffff1a;border:1px solid #ffffff1f;border-radius:7px;height:14px;margin-top:6px;position:relative;overflow:hidden}.bar>div{height:100%;transition:width .12s}.bar.health>div{background:linear-gradient(90deg,#ff5d7a,#ff8fa3)}.bar.shield>div{background:linear-gradient(90deg,#4aa8ff,#9ad4ff)}.bar.cell>div{background:linear-gradient(90deg,#c05cff,#ff9cf2)}.bar label{letter-spacing:1.5px;text-transform:uppercase;color:#ffffffd9;text-shadow:0 1px 2px #000;font-size:10px;position:absolute;top:-1px;left:8px}.bar.cell.empty>div{background:#5a3d7a}.hud-heat{width:160px;position:absolute;bottom:26px;right:22px}.hud-heat .bar>div{background:linear-gradient(90deg,#ffb02e,#ff4d2e)}.hud-heat.overheated .bar{box-shadow:0 0 12px #ff4d2e}.hud-heat .status{letter-spacing:2px;text-align:right;color:#ff8a5c;height:14px;font-size:11px}.hotbar{gap:6px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.slot{background:#0a0818a6;border:2px solid #ffffff2e;border-radius:8px;width:52px;height:52px;transition:transform .1s,border-color .1s;position:relative}.slot.selected{border-color:var(--accent);transform:translateY(-6px)scale(1.08);box-shadow:0 0 14px #7fd8ff80}.slot .key{color:#ffffff8c;font-size:10px;position:absolute;top:2px;left:5px}.slot .icon{color:#fff;text-shadow:0 1px 2px #000;border-radius:6px;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex;position:absolute;inset:10px 8px 8px}.slot .count{font-size:11px;font-weight:700;position:absolute;bottom:2px;right:4px}.held-name{letter-spacing:1px;color:#fff;text-shadow:0 2px 6px #000;white-space:nowrap;font-size:13px;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.crosshair{width:18px;height:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:#ffffffe6;position:absolute;box-shadow:0 0 4px #000}.crosshair:before{width:2px;height:100%;top:0;left:50%;transform:translate(-50%)}.crosshair:after{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}.crosshair.hit{animation:.15s ease-out hitpop}@keyframes hitpop{0%{transform:translate(-50%,-50%)scale(1.6)}to{transform:translate(-50%,-50%)scale(1)}}.prompt{border:1px solid var(--panel-border);letter-spacing:.5px;white-space:nowrap;background:#0a0818bf;border-radius:8px;padding:8px 16px;font-size:14px;position:absolute;top:58%;left:50%;transform:translate(-50%)}.prompt b{color:var(--accent);border:1px solid var(--accent);border-radius:4px;margin-right:8px;padding:0 6px;font-size:12px}.compass{border-bottom:1px solid #ffffff2e;width:420px;height:26px;position:absolute;top:12px;left:50%;overflow:hidden;transform:translate(-50%);-webkit-mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000);mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000)}.compass .tick{letter-spacing:1px;color:#ffffffb3;text-shadow:0 1px 3px #000;font-size:12px;font-weight:700;position:absolute;top:0;transform:translate(-50%)}.compass .tick.minor{background:#ffffff59;width:1px;height:8px;top:14px}.compass .tick.target{color:var(--gold);text-shadow:0 0 8px var(--gold), 0 1px 3px #000;font-size:14px}.compass .center{background:#fff;width:2px;height:10px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.objective{text-align:center;position:absolute;top:44px;left:50%;transform:translate(-50%)}.objective .title{letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-size:11px}.objective .text{text-shadow:0 2px 6px #000;margin-top:2px;font-size:16px}.marker{text-align:center;color:var(--gold);text-shadow:0 1px 3px #000;white-space:nowrap;font-size:12px;position:absolute;transform:translate(-50%,-50%)}.marker .diamond{background:var(--gold);width:18px;height:18px;box-shadow:0 0 14px var(--gold);margin:0 auto 4px;animation:1.6s ease-in-out infinite markerpulse;transform:rotate(45deg)}.marker .mlabel{letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:700}.marker .mdist{color:#fff;font-size:12px}.marker.offscreen .diamond{border-radius:50%;animation:none}.marker.offscreen:after{content:"";border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid var(--gold);width:0;height:0;transform:rotate(var(--arrow,0deg));transform-origin:50% -10px;margin:2px auto 0;display:block}@keyframes markerpulse{50%{transform:rotate(45deg)scale(1.25)}}.toasts{flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;top:20px;right:22px}.toast{background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--accent);border-radius:6px;max-width:340px;padding:8px 14px;font-size:14px;animation:.3s ease-out toastin}.toast.gold{border-left-color:var(--gold)}.toast.fade{opacity:0;transition:opacity .5s}@keyframes toastin{0%{opacity:0;transform:translate(30px)}}.hint{font-family:var(--display-font);letter-spacing:1px;text-align:center;text-shadow:0 2px 10px #000;background:#0a08188c;border-radius:10px;padding:10px 22px;font-size:20px;animation:.4s ease-out toastin;position:absolute;top:68%;left:50%;transform:translate(-50%)}.hint kbd{border:1px solid var(--accent);color:var(--accent);font-family:var(--ui-font);border-radius:5px;margin:0 2px;padding:0 8px;font-size:15px;display:inline-block}.hint.fade{opacity:0;transition:opacity .6s}.xp-pop{font-family:var(--display-font);color:var(--accent);text-shadow:0 0 12px #7fd8ffcc,0 2px 6px #000;font-size:22px;font-weight:700;animation:1.4s ease-out forwards xppop;position:absolute;top:42%;left:50%;transform:translate(-50%)}@keyframes xppop{0%{opacity:0;transform:translate(-50%,10px)scale(.6)}15%{opacity:1;transform:translate(-50%)scale(1.15)}to{opacity:0;transform:translate(-50%,-60px)scale(1)}}.flash{opacity:0;background:radial-gradient(#ff284600 40%,#ff28468c 100%);transition:opacity .35s;position:absolute;inset:0}.flash.on{opacity:1;transition:opacity 50ms}.lowhp{opacity:0;background:radial-gradient(#ff002800 55%,#ff002859 100%);animation:1.2s infinite pulse;position:absolute;inset:0}@keyframes pulse{50%{opacity:1}}.label{text-align:center;text-shadow:0 1px 3px #000;white-space:nowrap;font-size:12px;position:absolute;transform:translate(-50%,-100%)}.label .lbar{background:#0009;border-radius:3px;width:60px;height:5px;margin:3px auto 0;overflow:hidden}.label .lbar>div{background:var(--danger);height:100%}.label.friendly{color:var(--accent)}.label.enemy{color:#ffb4a0}.dialogue{background:var(--panel);border:1px solid var(--panel-border);pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;width:min(720px,90vw);padding:18px 24px;animation:.25s ease-out toastin;position:absolute;bottom:110px;left:50%;transform:translate(-50%)}.dialogue .speaker{font-family:var(--display-font);color:var(--accent);letter-spacing:3px;text-transform:uppercase;font-size:14px}.dialogue .text{min-height:54px;margin:8px 0 12px;font-size:18px;line-height:1.5}.dialogue .choices{flex-direction:column;gap:6px;display:flex}.dialogue .choice{color:#fff;text-align:left;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;padding:8px 12px;font-size:15px;transition:background .1s}.dialogue .choice:hover,.dialogue .choice.focus{border-color:var(--accent);background:#7fd8ff26}.dialogue .choice b{color:var(--accent);margin-right:10px}.dialogue .cont{color:#ffffff80;text-align:right;font-size:12px}.panel{pointer-events:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#03020ab3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.panel .card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;min-width:420px;max-width:92vw;max-height:90vh;padding:26px 30px;overflow:auto;box-shadow:0 20px 60px #0009}.panel h1{font-family:var(--display-font);letter-spacing:3px;text-transform:uppercase;background:linear-gradient(90deg, #fff, var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:32px}.panel h2{letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:18px 0 8px;font-size:12px}.panel p{color:#fffc;margin:4px 0}.btn{background:linear-gradient(90deg, var(--accent), var(--accent2));color:#0a0818;letter-spacing:1px;border:none;border-radius:10px;margin-top:12px;padding:12px 26px;font-size:16px;font-weight:700}.btn:hover{filter:brightness(1.15)}.btn.secondary{color:#fff;background:#ffffff1a}.row{align-items:center;gap:12px;display:flex}.grid{grid-template-columns:repeat(10,50px);gap:6px;display:grid}.grid .slot{cursor:pointer;width:50px;height:50px}.grid .slot.picked{border-color:var(--gold);box-shadow:0 0 10px var(--gold)}.tooltip{color:#fffc;min-height:60px;margin-top:12px;font-size:13px}.tooltip .name{font-size:15px;font-weight:700}.perks{gap:12px;margin-top:10px;display:flex}.perk{color:#fff;text-align:left;background:#ffffff0d;border:1px solid #ffffff26;border-radius:12px;flex:1;padding:16px;transition:transform .1s,border-color .1s}.perk:hover{border-color:var(--gold);transform:translateY(-4px)}.perk .pname{font-family:var(--display-font);color:var(--gold);font-size:18px}.perk .pdesc{color:#ffffffbf;margin-top:6px;font-size:13px}.quest{border-left:3px solid var(--gold);background:#ffffff0a;margin:6px 0;padding:6px 10px}.quest .qtitle{font-weight:700}.quest .obj{color:#ffffffb3;font-size:13px}.quest .obj.done{color:#4ee08a;text-decoration:line-through}.stat{border-bottom:1px solid #ffffff14;justify-content:space-between;padding:4px 0;display:flex}.stat span:last-child{color:var(--accent);font-weight:700}input[type=range]{width:100%;accent-color:var(--accent2)}.controls{columns:2;color:#ffffffbf;font-size:13px}.controls div{padding:2px 0}.controls kbd{color:var(--accent)}.death{text-align:center}.death h1{color:var(--danger);-webkit-text-fill-color:var(--danger);background:0 0}.creation{pointer-events:auto;background:radial-gradient(at 70% 40%,#241640 0%,#05030f 70%);grid-template-columns:380px 1fr;display:grid;position:absolute;inset:0}.creation .form{border-right:1px solid var(--panel-border);background:#05030fb3;padding:28px;overflow:auto}.creation .title{font-family:var(--display-font);letter-spacing:6px;text-transform:uppercase;background:linear-gradient(90deg, #fff, var(--accent), var(--accent2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:34px;line-height:1}.creation .subtitle{color:#ffffff8c;letter-spacing:3px;text-transform:uppercase;margin:6px 0 22px;font-size:13px}.creation label{letter-spacing:2px;text-transform:uppercase;color:#fff9;margin:14px 0 4px;font-size:11px;display:block}.creation input[type=text]{border:1px solid var(--panel-border);color:#fff;width:100%;font-size:18px;font-family:var(--display-font);letter-spacing:1px;background:#ffffff0f;border-radius:8px;padding:10px 12px}.seg{gap:4px;display:flex}.seg button{color:#fff;text-transform:capitalize;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:6px;flex:1;padding:7px 0;font-size:13px}.seg button.on{border-color:var(--accent);color:var(--accent);background:#7fd8ff33}.creation .preview{position:relative}.creation .preview canvas{width:100%;height:100%;display:block}.creation .actions{gap:10px;margin-top:26px;display:flex}.creation .hintline{color:#ffffff73;margin-top:16px;font-size:12px;line-height:1.6}.creation .error{color:var(--danger);height:14px;margin-top:6px;font-size:12px}.creation .preview .caption{text-align:center;color:#ffffff80;letter-spacing:3px;text-transform:uppercase;font-size:12px;position:absolute;bottom:24px;left:0;right:0}.loading{font-family:var(--display-font);letter-spacing:6px;color:var(--accent);background:#05030f;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;inset:0}