:root{color-scheme:dark;--panel: rgba(3, 12, 20, .68);--panel-strong: rgba(4, 14, 23, .84);--ink: #f7fbff;--muted: #b9d2de;--line: rgba(186, 242, 255, .24);--cyan: #67e8ff;--green: #9dff6e;--gold: #ffd36a;--danger: #ff7793}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{min-height:100%;overflow:hidden;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#061725}button{font:inherit}.game-shell{position:relative;width:100vw;height:100vh;margin:0;overflow:hidden}.hud{position:absolute;left:16px;top:14px;z-index:3;width:min(760px,calc(100vw - 176px));display:grid;grid-template-columns:minmax(190px,.5fr) minmax(384px,1fr);gap:8px;align-items:stretch;pointer-events:none}.hud-brand{min-height:44px;display:grid;align-items:center;border:1px solid rgba(186,242,255,.2);border-radius:8px;background:linear-gradient(90deg,rgba(103,232,255,.13),rgba(157,255,110,.05) 55%,transparent),#030c1494;padding:8px 12px;box-shadow:inset 0 1px #ffffff14,0 10px 30px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{margin:0;color:var(--ink);font-size:.92rem;line-height:1.1;letter-spacing:0;text-shadow:0 2px 14px rgba(0,0,0,.7)}.stats{display:grid;grid-template-columns:repeat(4,minmax(88px,1fr));gap:6px;min-height:44px;border:1px solid rgba(186,242,255,.18);border-radius:8px;background:#030c1470;padding:5px;box-shadow:inset 0 1px #ffffff0f,0 10px 30px #0000002e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stats div{min-height:34px;display:grid;align-content:center;justify-items:center;gap:2px;border-right:1px solid rgba(186,242,255,.14)}.stats div:last-child{border-right:0}.stats span{color:var(--muted);font-size:.68rem;font-weight:800;text-transform:uppercase}.stats strong{max-width:100%;padding:0 8px;color:var(--ink);font-size:1rem;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats div:nth-child(1) strong{color:var(--gold)}.stats div:nth-child(2) strong{color:var(--danger)}.stats div:nth-child(3) strong{color:var(--cyan)}.mission-status{position:relative;grid-column:1 / -1;min-height:54px;display:grid;grid-template-columns:minmax(150px,.42fr) minmax(220px,1fr) minmax(74px,auto) minmax(96px,auto) minmax(92px,auto);gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,rgba(157,255,110,.08),transparent),var(--panel);padding:9px 11px;box-shadow:inset 0 1px #ffffff14,0 10px 30px #00000038;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mission-status span,.mission-status b,.mission-status em{color:var(--muted);font-size:.78rem;font-style:normal;font-weight:900;line-height:1.2;text-transform:uppercase}.mission-status b{min-width:70px;color:var(--gold);opacity:0;text-align:right}.mission-status b.visible{opacity:1}.mission-status strong{color:var(--ink);font-size:1rem;line-height:1.24;font-weight:800}.mission-status em{justify-self:end;color:var(--green);text-align:right}.mission-log-toggle{justify-self:end;min-width:88px;min-height:34px;border:1px solid rgba(186,242,255,.32);border-radius:8px;background:#040e17db;color:var(--ink);font-size:.72rem;font-weight:900;text-transform:uppercase;cursor:pointer;pointer-events:auto}.mission-log-toggle.is-open{border-color:#9dff6eb8;color:var(--green)}.mission-log{position:absolute;right:0;top:calc(100% + 8px);z-index:6;width:min(430px,calc(100vw - 32px));max-height:min(470px,calc(100vh - 170px));display:grid;gap:8px;border:1px solid rgba(186,242,255,.32);border-radius:8px;background:linear-gradient(180deg,rgba(103,232,255,.08),transparent),#040e17eb;padding:9px;box-shadow:0 18px 42px #0000005c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.mission-log.hidden{display:none}.mission-log__header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase}.mission-log__header button{min-width:24px;min-height:24px;border:1px solid rgba(186,242,255,.3);border-radius:999px;background:var(--panel);color:var(--ink);font-size:.92rem;line-height:1;cursor:pointer}.mission-log__list{max-height:min(390px,calc(100vh - 220px));overflow-y:auto;display:grid;gap:7px}.mission-log__entry{display:grid;gap:4px;border:1px solid rgba(186,242,255,.18);border-radius:8px;background:#030c14d1;padding:8px}.mission-log__entry.is-locked{opacity:.64}.mission-log__entry.is-active{border-color:#67e8ff94}.mission-log__entry.is-available,.mission-log__entry.is-readytoturnin{border-color:#ffd36a94}.mission-log__entry.is-turnedin{border-color:#9dff6e7a}.mission-log__entry-header{display:flex;align-items:start;justify-content:space-between;gap:10px}.mission-log__entry-header strong{color:var(--ink);font-size:.82rem;line-height:1.18}.mission-log__entry-header span{flex:0 0 auto;border:1px solid rgba(186,242,255,.24);border-radius:999px;color:var(--gold);font-size:.58rem;font-weight:900;line-height:1;padding:4px 6px;text-transform:uppercase}.mission-log__entry p{margin:0;color:var(--muted);font-size:.72rem;font-weight:700;line-height:1.24;text-transform:none}.mission-log__entry .mission-log__entry-meta{color:var(--cyan);font-size:.62rem;font-weight:900;text-transform:uppercase}.stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(circle at 52% 22%,rgba(117,238,255,.2),transparent 34%),linear-gradient(180deg,#08334f,#06243a 42%,#07151f)}#gameCanvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.reticle{position:absolute;left:50%;top:51%;width:24px;height:24px;transform:translate(-50%,-50%);border:1px solid rgba(179,246,255,.56);border-radius:50%;pointer-events:none;opacity:.76;filter:drop-shadow(0 0 7px rgba(103,232,255,.5));transition:border-color .12s ease,opacity .12s ease,filter .12s ease}.reticle:before,.reticle:after{content:"";position:absolute;background:#b3f6ff9e}.reticle:before{left:50%;top:-9px;width:1px;height:40px}.reticle:after{left:-9px;top:50%;width:40px;height:1px}.reticle.locked{border-color:#9dff6edb;opacity:.95;filter:drop-shadow(0 0 9px rgba(157,255,110,.58))}.camera-toggle{position:absolute;right:16px;top:14px;z-index:4;min-width:126px;min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);color:var(--ink);font-size:.84rem;font-weight:900;cursor:pointer;box-shadow:0 10px 26px #00000042;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.camera-toggle[aria-pressed=true]{border-color:#9dff6ec2;background:linear-gradient(180deg,var(--green),#68db74);color:#06140f}.navigation-map{--navigation-map-width: 132px;position:absolute;right:16px;top:64px;z-index:4;width:var(--navigation-map-width);display:grid;justify-items:center;gap:7px;pointer-events:none}.navigation-map__ring{position:relative;width:112px;aspect-ratio:1;cursor:pointer;border:1px solid rgba(186,242,255,.42);border-radius:50%;background:radial-gradient(circle at center,rgba(103,232,255,.13) 0 2px,transparent 3px),radial-gradient(circle at center,transparent 0 42%,rgba(186,242,255,.16) 43% 44%,transparent 45%),radial-gradient(circle at center,#0418279e,#020c14db);box-shadow:inset 0 0 22px #67e8ff29,0 12px 30px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;pointer-events:auto}.navigation-map__ring:before,.navigation-map__ring:after{content:"";position:absolute;left:50%;top:50%;background:#baf2ff2e;transform:translate(-50%,-50%)}.navigation-map__ring:before{width:1px;height:100%}.navigation-map__ring:after{width:100%;height:1px}.navigation-map__north{position:absolute;left:50%;top:5px;z-index:1;color:var(--muted);font-size:.58rem;font-weight:900;transform:translate(-50%)}.navigation-map__player-dot{--player-yaw: 0rad;position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:15px solid var(--cyan);filter:drop-shadow(0 0 8px rgba(103,232,255,.74));transform:translate(-50%,-58%) rotate(var(--player-yaw))}.navigation-map__mission-dot{--mission-x: 0%;--mission-y: 0%;position:absolute;left:calc(50% + var(--mission-x));top:calc(50% + var(--mission-y));z-index:3;width:13px;height:13px;border:2px solid rgba(4,14,23,.88);border-radius:50%;background:var(--gold);box-shadow:0 0 12px #ffd36abd;transform:translate(-50%,-50%)}.navigation-map__label{width:100%;min-height:42px;display:grid;align-content:center;justify-items:center;gap:1px;border:1px solid rgba(186,242,255,.24);border-radius:8px;background:var(--panel-strong);box-shadow:0 10px 26px #0000003d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navigation-map__label span{color:var(--muted);font-size:.66rem;font-weight:900;text-transform:uppercase}.navigation-map__label strong{max-width:100%;padding:0 8px;color:var(--ink);font-size:.78rem;line-height:1.12;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.navigation-map__label em{color:var(--gold);font-size:.68rem;font-style:normal;font-weight:900;line-height:1;text-transform:uppercase}.navigation-map__expanded{position:relative;justify-self:end;width:220px;max-width:calc(100vw - 32px);border:1px solid rgba(186,242,255,.3);border-radius:10px;background:linear-gradient(180deg,rgba(103,232,255,.08),transparent),var(--panel-strong);box-shadow:0 12px 26px #0000004d;padding:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;gap:7px;pointer-events:auto;transform:translate(calc(var(--navigation-map-width) - 100%))}.navigation-map__expanded.hidden{display:none}.navigation-map.is-expanded .navigation-map__expanded{display:grid}.navigation-map__expanded-header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.56rem;font-weight:900;text-transform:uppercase}.navigation-map__expanded-header button{min-width:22px;min-height:22px;border:1px solid rgba(186,242,255,.3);border-radius:999px;background:var(--panel);color:var(--ink);font-size:.88rem;line-height:1}.navigation-map__zone-list{max-height:152px;overflow-y:auto;display:grid;gap:5px}.navigation-map__zone-entry,.navigation-map__clear-waypoint{border:1px solid rgba(186,242,255,.28);border-radius:8px;background:#030c14e6;color:var(--ink);font-size:.6rem;line-height:1.1;text-align:left;padding:6px 8px;width:100%;cursor:pointer;pointer-events:auto}.navigation-map__zone-entry{font-weight:700}.navigation-map__zone-entry.is-active{border-color:#9dff6eb3;background:#9dff6e26;color:var(--green)}.navigation-map__zone-empty{margin:6px 0 0;font-size:.58rem;color:var(--muted)}.navigation-map__clear-waypoint{width:100%;border-color:#ffa7ba6b;color:var(--danger);font-weight:900;text-transform:uppercase}.mission-pointer{--pointer-x: 50vw;--pointer-y: 50vh;--pointer-angle: 0rad;position:absolute;left:var(--pointer-x);top:var(--pointer-y);z-index:4;display:grid;justify-items:center;gap:3px;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .14s ease;filter:drop-shadow(0 3px 10px rgba(0,0,0,.52))}.mission-pointer.visible{opacity:.96}.mission-pointer:before{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:22px solid var(--gold);filter:drop-shadow(0 0 8px rgba(255,211,106,.66));transform:rotate(var(--pointer-angle));transform-origin:50% 62%}.mission-pointer.in-view:before{border-bottom-color:var(--green);filter:drop-shadow(0 0 8px rgba(157,255,110,.62))}.mission-pointer.near:before{border-bottom-color:var(--cyan);filter:drop-shadow(0 0 8px rgba(103,232,255,.68))}.mission-pointer span,.mission-pointer strong{max-width:112px;border:1px solid rgba(186,242,255,.24);background:#040e17d1;color:var(--ink);text-align:center;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mission-pointer span{padding:3px 7px 2px;border-radius:8px 8px 3px 3px;font-size:.72rem;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission-pointer strong{min-width:48px;padding:2px 7px 3px;border-radius:3px 3px 8px 8px;color:var(--gold);font-size:.72rem;line-height:1}.mission-pointer.near strong{color:var(--cyan)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:grid;place-items:center;padding:20px;background:#020a128a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay.hidden{display:none}.panel{width:min(520px,100%);border:1px solid rgba(186,242,255,.28);border-radius:8px;background:linear-gradient(180deg,rgba(103,232,255,.08),transparent),var(--panel-strong);padding:22px;text-align:center;box-shadow:0 24px 70px #00000073}.panel h2{margin:0 0 8px;font-size:1.55rem;letter-spacing:0}.panel p{margin:0 auto 16px;max-width:44ch;color:var(--muted);line-height:1.45}.panel button{min-width:120px;min-height:42px;border:0;border-radius:8px;color:#07140d;font-weight:900;background:linear-gradient(180deg,var(--green),#6ee27b);cursor:pointer}.panel button:hover{filter:brightness(1.06)}.panel button:disabled{cursor:wait;filter:saturate(.5);opacity:.72}.controls{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:.78rem;pointer-events:none}.controls span{border:1px solid rgba(186,242,255,.18);border-radius:8px;background:var(--panel);padding:6px 9px;box-shadow:0 8px 22px #00000038;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@media (max-width: 920px){.hud{width:calc(100vw - 166px);grid-template-columns:1fr;align-items:start}.hud-brand{min-height:38px;padding:7px 10px}.stats{grid-template-columns:repeat(4,minmax(72px,1fr))}.mission-status{grid-template-columns:1fr;gap:4px}.mission-status em{justify-self:start;text-align:left}.mission-status b{text-align:left}.mission-log-toggle,.mission-status em{justify-self:start}.mission-log{left:0;right:auto}.controls{font-size:.72rem}}@media (max-width: 620px){.hud{left:10px;right:10px;top:60px;width:auto}h1{display:none}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.stats div{min-height:33px;padding:4px 2px}.stats span{font-size:.56rem}.stats strong{padding:0 3px;font-size:.76rem}.mission-status{min-height:48px;padding:7px 9px}.mission-status span,.mission-status b,.mission-status em{font-size:.68rem}.mission-status strong{font-size:.86rem}.mission-log{width:calc(100vw - 20px);max-height:calc(100vh - 250px)}.mission-log__list{max-height:calc(100vh - 300px)}.camera-toggle{right:10px;top:10px;min-width:112px;min-height:36px;font-size:.76rem}.navigation-map{--navigation-map-width: 104px;right:10px;top:52px}.navigation-map__ring{width:88px}.navigation-map__expanded{width:190px;max-width:calc(100vw - 20px)}.navigation-map__zone-list{max-height:128px}.navigation-map__label{min-height:37px}.navigation-map__label strong{font-size:.68rem}.navigation-map__label em{font-size:.62rem}.mission-pointer span{max-width:92px;font-size:.62rem}.mission-pointer strong{font-size:.62rem}.controls{display:none}.panel{padding:18px}.panel h2{font-size:1.32rem}}
