:root{color-scheme:dark;--ink:#071519;--glass:rgba(6,22,26,.74);--line:rgba(195,239,222,.2);--mint:#bdebd9;--gold:#f5c96b;--white:#f5fbf8}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#071519;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--white)}
#world{display:block;width:100%;height:100%;touch-action:none;background:linear-gradient(#568394,#b9c9b8)}
.hud{position:fixed;z-index:3;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(0,0,0,.22)}
.topbar{top:max(1rem,env(safe-area-inset-top));left:1rem;right:1rem;min-height:72px;border-radius:15px;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.eyebrow{display:block;color:var(--gold);font-size:.72rem;font-weight:800;letter-spacing:.14em}.topbar h1{margin:.15rem 0 0;font-family:Georgia,serif;font-weight:500;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:.01em}
.status{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--mint)}.status-dot{width:8px;height:8px;border-radius:50%;background:#69d2a9;box-shadow:0 0 16px #69d2a9}
.guide{left:1rem;bottom:max(1rem,env(safe-area-inset-bottom));width:min(430px,calc(100% - 2rem));border-radius:15px;padding:.85rem 1rem}.guide p{margin:0}.guide #area-name{font-family:Georgia,serif;color:var(--gold);font-size:1.05rem}.controls{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin:.65rem 0;font-size:.78rem;color:var(--mint)}kbd{padding:.15rem .34rem;border:1px solid rgba(255,255,255,.25);border-bottom-width:2px;border-radius:4px;background:rgba(255,255,255,.08);font:inherit;color:white}.notice{font-size:.74rem;line-height:1.4;color:rgba(235,248,241,.62)}
.loading{position:fixed;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;gap:.65rem;background:radial-gradient(circle at 50% 40%,#173f47,#071519 65%);transition:opacity .6s,visibility .6s}.loading.ready{opacity:0;visibility:hidden}.loading strong{font-family:Georgia,serif;font-size:1.4rem}.loading span:last-child{font-size:.85rem;color:var(--mint)}.sigil{width:54px;height:54px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(.82);opacity:.65}}
.crosshair{position:fixed;z-index:2;left:50%;top:50%;width:5px;height:5px;margin:-2px;border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.16);pointer-events:none}
.enter{position:fixed;z-index:4;left:50%;bottom:2rem;transform:translateX(-50%);border:1px solid rgba(255,255,255,.25);border-radius:999px;background:#173f47;color:white;padding:.8rem 1.2rem;font:700 .9rem inherit;cursor:pointer}.enter.hidden{display:none}
.touch-zone,.touch-actions{display:none}
@media(pointer:coarse){.desktop-controls,.crosshair,.enter{display:none}.guide{bottom:calc(7.2rem + env(safe-area-inset-bottom));width:calc(100% - 2rem)}.touch-zone{display:block;position:fixed;z-index:5;bottom:0;width:50%;height:42%;touch-action:none}.touch-left{left:0}.touch-right{right:0}.stick{position:absolute;left:52px;bottom:48px;width:76px;height:76px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(3,16,19,.22)}.stick:after{content:"";position:absolute;inset:22px;border-radius:50%;background:rgba(245,201,107,.7)}.touch-actions{display:flex;position:fixed;z-index:6;right:1rem;bottom:1rem;gap:.6rem}.touch-actions button{width:58px;height:58px;border:1px solid rgba(255,255,255,.26);border-radius:50%;background:rgba(6,22,26,.65);color:white;font:700 .76rem inherit}.topbar{min-height:62px}.status{font-size:.72rem}}
@media(max-width:600px){.notice{display:none}.guide{padding:.7rem .85rem}.topbar{left:.65rem;right:.65rem;top:.65rem}.status span:last-child{max-width:115px;text-align:right}.eyebrow{font-size:.62rem}}