:root{color:#efe3bd;background:#172820;font-family:SFMono-Regular,Cascadia Mono,Noto Sans TC,monospace;font-synthesis:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#172820}button{font:inherit}#app{position:relative;isolation:isolate}#world{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#537a4a;touch-action:none}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 36%,rgba(9,20,15,.2) 74%,rgba(7,14,11,.7) 116%);mix-blend-mode:multiply}.world-header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) 24px 0;pointer-events:none}.brand{display:flex;gap:10px;align-items:center;text-shadow:0 2px 0 #172820}.brand-mark{color:#e6b66d;font-size:18px;animation:pulse 2.4s steps(3) infinite}.brand strong,.brand small{display:block}.brand strong{font-size:14px;letter-spacing:.16em}.brand small{margin-top:3px;color:#efe3bd9e;font-size:8px;letter-spacing:.22em}.round-button{pointer-events:auto;width:40px;height:40px;border:0;border-radius:0;color:#efe3bd;background:#21382a;cursor:pointer;box-shadow:inset 0 0 0 2px #34533a,inset 0 0 0 4px #172820,3px 3px #0a140f8c;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}.round-button[aria-pressed=true]{color:#172820;background:#e6b66d;box-shadow:inset 0 0 0 3px #aa8c64,3px 3px #172820}.world-status{position:absolute;z-index:5;top:82px;right:24px;display:flex;align-items:center;gap:8px;color:#efe3bdb8;font-size:9px;letter-spacing:.16em;text-shadow:0 1px #172820}.world-status i{width:18px;height:2px;background:#80694f}.message{position:absolute;z-index:7;left:50%;bottom:64px;width:min(520px,calc(100% - 40px));transform:translate(-50%,12px);padding:17px 22px 18px;border:0;background:#172820;color:#efe3bd;box-shadow:inset 0 0 0 3px #34533a,inset 0 0 0 6px #21382a,8px 9px #080e0b73;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);opacity:0;visibility:hidden;transition:opacity .18s steps(3),transform .18s steps(3),visibility .18s}.message:before{content:"✦";position:absolute;right:13px;top:10px;color:#537a4a;font-size:9px}.message[aria-hidden=false]{opacity:1;visibility:visible;transform:translate(-50%)}.message span{color:#e6b66d;font-size:9px;letter-spacing:.22em}.message p{margin:7px 0 0;font-size:13px;line-height:1.8;letter-spacing:.04em}.hint{position:absolute;z-index:5;bottom:22px;left:50%;transform:translate(-50%);font-size:9px;color:#efe3bd9e;letter-spacing:.08em;transition:opacity .4s;text-shadow:0 1px #172820}kbd{border:0;padding:3px 6px;background:#21382a;color:#efe3bd;box-shadow:inset 0 0 0 1px #537a4a}.welcome{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:8vh 7vw;overflow:hidden;background:radial-gradient(circle at 50% 44%,#0f1d161f,#0f1d166b,#0a1510e0 108%);transition:opacity .8s steps(8),visibility .8s}.welcome:after{content:"";position:absolute;inset:auto 0 0;height:28%;pointer-events:none;background:linear-gradient(0deg,rgba(9,20,15,.72),transparent)}.welcome.is-gone{opacity:0;visibility:hidden;pointer-events:none}.gate-arch{position:absolute;z-index:0;left:50%;bottom:0;width:min(760px,88vw);height:min(620px,82vh);transform:translate(-50%)}.gate-arch:before{content:"";position:absolute;top:11%;left:7%;right:7%;height:24px;background:#21382a;box-shadow:inset 0 -7px #172820,0 8px #080f0b59}.gate-arch i{position:absolute;bottom:0;width:42px;height:72%;background:#21382a;box-shadow:inset -9px 0 #172820,inset 7px 0 #34533a}.gate-arch i:first-child{left:8%}.gate-arch i:nth-child(2){right:8%;transform:scaleX(-1)}.gate-arch span{position:absolute;left:50%;top:6%;transform:translate(-50%);color:#e6b66d;font-size:24px;text-shadow:0 4px #172820;animation:pulse 2.8s steps(4) infinite}.welcome-copy{position:relative;z-index:2;width:min(680px,92vw);margin-top:13vh;text-align:center}.eyebrow{color:#e6b66d;font-size:9px;letter-spacing:.27em;text-shadow:0 2px #172820}h1{margin:22px 0 13px;color:#f4eacb;font-size:clamp(48px,7vw,92px);line-height:1;letter-spacing:.08em;text-shadow:4px 4px 0 #21382a,7px 7px 0 rgba(8,14,11,.35)}.world-whisper{margin:0 0 30px;color:#efe3bdd1;font-size:clamp(12px,1.4vw,16px);line-height:1.9;letter-spacing:.08em;text-shadow:0 2px #172820}#enter{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-width:188px;padding:14px 20px;border:0;color:#efe3bd;background:#21382a;cursor:pointer;box-shadow:inset 0 0 0 3px #537a4a,inset 0 0 0 6px #172820,6px 6px #080e0b80;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);transition:transform .12s steps(2),color .12s}#enter:hover,#enter:focus-visible{color:#e6b66d;transform:translate(-2px,-2px)}#enter b{color:#e6b66d;font-size:13px}.welcome-copy>small{display:block;margin-top:20px;color:#efe3bd80;font-size:8px;letter-spacing:.12em}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.touch-controls,.interact-button{display:none}@keyframes pulse{50%{opacity:.35;transform:scale(.84)}}@media(max-width:720px),(pointer:coarse){.world-header{padding:max(14px,env(safe-area-inset-top)) 16px 0}.world-status{top:68px;right:16px}.welcome{align-items:end;padding:0 22px max(94px,calc(env(safe-area-inset-bottom) + 76px))}.gate-arch{width:100vw;height:76vh;bottom:0}.gate-arch:before{left:14%;right:14%;height:18px}.gate-arch i{width:30px}.gate-arch i:first-child{left:15%}.gate-arch i:nth-child(2){right:15%}.welcome-copy{margin:0}h1{font-size:clamp(42px,13vw,58px);letter-spacing:.03em}.world-whisper{font-size:12px;margin-bottom:24px}.eyebrow{font-size:7px;letter-spacing:.16em}.hint{display:none}.message{bottom:154px;padding:16px 18px 17px}.touch-controls{--stick-x: 0px;--stick-y: 0px;position:absolute;z-index:6;left:16px;bottom:max(16px,env(safe-area-inset-bottom));display:block;width:120px;height:120px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.joystick-base{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;background:#21382a;box-shadow:inset 0 0 0 3px #537a4a,inset 0 0 0 7px #172820,inset 0 -10px #080e0b33,4px 6px #080e0b7a}.joystick-base:before{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:50%;opacity:.58;background:linear-gradient(90deg,transparent calc(50% - 1px),#537a4a 50%,transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),#537a4a 50%,transparent calc(50% + 1px));box-shadow:inset 0 0 0 2px #94ad6252}.joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));background:#94ad62;will-change:transform;box-shadow:inset 0 0 0 3px #d7ddb0,inset 0 0 0 7px #34533a,inset 0 -7px #17282047,3px 4px #080e0b85;transition:background .1s steps(2),box-shadow .1s steps(2)}.joystick-knob i{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:#e6b66d;box-shadow:0 0 0 2px #172820}.touch-controls[data-active=true] .joystick-knob{background:#e6b66d;box-shadow:inset 0 0 0 3px #efe3bd,inset 0 0 0 7px #80694f,inset 0 -7px #17282033,2px 3px #080e0b80}.touch-controls[data-active=true] .joystick-knob i{background:#d7ddb0}.joystick-a11y{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.interact-button{display:block;position:absolute;z-index:6;right:24px;bottom:max(27px,env(safe-area-inset-bottom));width:64px;height:64px;border:0;border-radius:0;touch-action:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);color:#172820;background:#e6b66d;font-size:20px;box-shadow:inset 0 0 0 3px #aa8c64,inset 0 0 0 6px #172820,4px 5px #080e0b80}.interact-button:active{color:#172820;background:#efe3bd;transform:translate(2px,2px)}#app:has(.welcome:not(.is-gone)) .touch-controls,#app:has(.welcome:not(.is-gone)) .interact-button{opacity:0;visibility:hidden;pointer-events:none}}@media(pointer:coarse)and (max-height:500px){.touch-controls{width:100px;height:100px;left:12px;bottom:max(10px,env(safe-area-inset-bottom))}.joystick-knob{width:42px;height:42px}.message{bottom:112px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}