:root{color-scheme:dark;font-family:SFMono-Regular,Cascadia Mono,Roboto Mono,ui-monospace,monospace;--ink: #e2d8be;--muted: #aaa28f;--accent: #b9985e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#595346;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}body{position:fixed;inset:0;color:var(--ink)}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(42,37,31,.16),transparent 30%,transparent 76%,rgba(34,29,25,.2)),radial-gradient(ellipse at center,transparent 52%,rgba(39,32,27,.18) 120%)}.prototype-label{position:absolute;z-index:4;left:max(18px,calc(env(safe-area-inset-left) + 12px));top:max(15px,calc(env(safe-area-inset-top) + 8px));display:grid;gap:3px;text-shadow:0 1px 5px rgba(31,25,21,.65);pointer-events:none}.prototype-label strong{font-size:.75rem;letter-spacing:.22em}.prototype-label span{color:#e6dabeb8;font-size:.43rem;letter-spacing:.13em}.game-hud{position:absolute;inset:0;z-index:5;pointer-events:none}.joystick{position:absolute;left:max(26px,calc(env(safe-area-inset-left) + 18px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 13px));width:clamp(100px,14vw,126px);aspect-ratio:1;border:1px solid rgba(237,222,190,.32);border-radius:50%;background:radial-gradient(circle,#ebdcba09 0 37%,#251f1a47 39% 68%,#e6d6b314 69% 70%,#251f1a30 71%);box-shadow:0 4px 22px #221c1726;touch-action:none;pointer-events:auto}.joystick-ring{position:absolute;inset:14%;border:1px dashed rgba(236,221,190,.17);border-radius:50%}.joystick-knob{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;margin:-22%;border:1px solid rgba(239,225,194,.58);border-radius:50%;background:#362d26b8;box-shadow:0 4px 12px #1f19154d;will-change:transform}.joystick-knob i{position:absolute;inset:32%;border:1px solid var(--accent);transform:rotate(45deg)}.connection-status{position:absolute;right:max(18px,calc(env(safe-area-inset-right) + 12px));top:max(15px,calc(env(safe-area-inset-top) + 8px));display:flex;align-items:center;gap:.4rem;padding:.32rem .5rem;background:#2b241e59;color:#eee2c7bd;font-size:.47rem;letter-spacing:.1em}.connection-status i{width:6px;height:6px;background:#996c59;transform:rotate(45deg)}.connection-status[data-state=online] i{background:#a6b186}.connection-status[data-state=connecting] i,.connection-status[data-state=reconnecting] i{background:var(--accent);animation:blink .8s steps(2,end) infinite}.debug-overlay{position:absolute;z-index:30;left:max(12px,env(safe-area-inset-left));top:max(48px,calc(env(safe-area-inset-top) + 42px));padding:.5rem .62rem;white-space:pre;background:#261f1ac7;border:1px solid rgba(207,184,137,.34);color:#e3d3b2;font-size:10px;line-height:1.45;pointer-events:none}.rotate-device,.context-error,.fatal-error{display:none;position:absolute;inset:0;z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:.55rem;text-align:center;background:#4d463c}.rotate-device div{font-size:2rem;color:var(--accent)}.rotate-device strong,.context-error strong,.fatal-error strong{letter-spacing:.14em}.rotate-device span,.context-error span,.fatal-error span{color:var(--muted);font-size:.66rem}.context-lost .context-error{display:flex}.fatal-error:not([hidden]){display:flex}.fatal-error button{margin-top:.5rem;padding:.6rem 1rem;border:1px solid var(--accent);background:transparent;color:var(--ink)}@keyframes blink{50%{opacity:.38}}@media(orientation:portrait)and (max-width:700px){.rotate-device{display:flex}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important}}