:root{--void: #07060b;--ink: #0c0b12;--panel: rgba(10, 9, 16, .9);--panel-solid: #12101a;--line: rgba(196, 163, 90, .3);--line-strong: rgba(196, 163, 90, .62);--text: #e8e1d4;--muted: #9a9184;--dust: #8b7aa8;--brass: #c4a35a;--danger: #a56b5c;--ok: #6a8f7a;--font-display: "Noto Serif SC", "Songti SC", "Iowan Old Style", Palatino, serif;--font-mono: "IBM Plex Mono", ui-monospace, Menlo, "PingFang SC", monospace;--radius: 4px;--pad: 16px;--hud-max: 22rem}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;background:var(--void);color:var(--text);font-family:var(--font-mono);font-size:14px;line-height:1.55;overflow:hidden;overscroll-behavior:none}button,input{font:inherit;color:inherit}button{background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:.45rem .8rem;letter-spacing:.04em;cursor:pointer;color:var(--text)}button:hover,button:focus-visible{border-color:var(--line-strong);outline:none}button:focus-visible{box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--brass)}button[disabled]{opacity:.45;cursor:default}h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;margin:0}.kicker{margin:0 0 .2rem;color:var(--brass);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.hud{pointer-events:none;position:absolute;inset:0;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;z-index:2}.hud-top,.hud-bottom,.toolbar,.interact{pointer-events:auto}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.brand .progress{margin:0;color:var(--muted);font-size:.78rem}.toolbar{display:flex;gap:8px}.hud-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:8px}.hint{margin:0;padding:.35rem .75rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);max-width:min(28rem,92vw);text-align:center}.interact{background:var(--panel-solid);border-color:var(--line-strong)}.joystick{position:absolute;left:calc(20px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));z-index:3;touch-action:none}.joystick-base{width:116px;height:116px;border-radius:50%;border:1px solid var(--line);background:#0a091073;position:relative}.joystick-knob{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:#c4a35a38;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.drawer{position:absolute;top:0;right:0;bottom:0;width:min(22rem,100%);background:var(--panel);border-left:1px solid var(--line);z-index:8;padding:calc(16px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));overflow:auto;display:flex;flex-direction:column;gap:20px}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.drawer h2{font-size:1.35rem}.drawer h3{font-size:.85rem;color:var(--muted);font-family:var(--font-mono);font-weight:500;margin-bottom:8px}.collect-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.collect-list button,.collect-list .locked{width:100%;text-align:left;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.15rem;background:#12101ab3}.collect-list .name{color:var(--text)}.collect-list .meta{color:var(--muted);font-size:.75rem}.collect-list .locked{border:1px dashed rgba(154,145,132,.35);color:var(--muted)}.sheet{width:min(24rem,calc(100vw - 32px));border:1px solid var(--line);background:var(--panel-solid);color:var(--text);padding:0;border-radius:var(--radius)}.sheet::backdrop{background:#0504099e}.sheet form{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}.sheet h2{font-size:1.25rem}.sheet-body{margin:0;color:var(--muted)}.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.sheet-actions button[value=close]{margin-left:auto}.art-host{height:7.5rem;border:1px solid var(--line);background:#16131f;position:relative;overflow:hidden}.art-workshop .hall{position:absolute;left:28%;bottom:18%;width:44%;height:42%;background:#2a2436;border:1px solid var(--brass)}.art-workshop .roof{position:absolute;left:24%;bottom:58%;width:52%;height:18%;background:#8b7aa8;clip-path:polygon(50% 0,100% 100%,0 100%)}.art-workshop .stack{position:absolute;right:26%;bottom:60%;width:8%;height:22%;background:var(--brass)}.art-lighthouse .tower{position:absolute;left:46%;bottom:16%;width:8%;height:58%;background:#d8c7a2}.art-lighthouse .lamp{position:absolute;left:42%;bottom:72%;width:16%;height:14%;background:var(--brass);box-shadow:0 0 18px #c4a35a8c}.art-lighthouse .bar-up,.art-lighthouse .bar-down{position:absolute;bottom:16%;width:7%}.art-lighthouse .bar-up{left:24%;height:38%;background:var(--ok)}.art-lighthouse .bar-down{right:24%;height:24%;background:var(--danger)}.art-garden .stem{position:absolute;bottom:14%;width:3px;background:#4d6a58}.art-garden .stem:nth-child(1){left:28%;height:42%}.art-garden .stem:nth-child(2){left:50%;height:58%}.art-garden .stem:nth-child(3){left:70%;height:36%}.art-garden .orb{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--dust)}.art-garden .orb:nth-child(4){left:25%;top:28%}.art-garden .orb:nth-child(5){left:47%;top:16%}.art-garden .orb:nth-child(6){left:67%;top:34%}.art-badge{display:grid;place-items:center}.art-badge .seal{width:72px;height:72px;border:1px solid var(--brass);border-radius:50%;position:relative}.art-badge .seal:after{content:"";position:absolute;inset:12px;border:1px solid var(--dust);border-radius:50%}.art-badge.flame .seal{background:radial-gradient(circle at 50% 70%,#a56b5c 0,#16131f 70%)}.art-badge.robot .seal{background:radial-gradient(circle at 50% 40%,#4d6a78 0,#16131f 70%)}.art-badge.drop .seal{background:radial-gradient(circle at 50% 30%,#3d6a7a 0,#16131f 70%)}.art-badge.butterfly .seal{background:radial-gradient(circle at 30% 50%,#8b7aa8 0,#16131f 72%)}.art-badge.hedgehog .seal{background:radial-gradient(circle at 50% 50%,#6a5344 0,#16131f 70%)}.art-badge.balloon .seal{background:radial-gradient(circle at 50% 20%,#a56b7c 0,#16131f 70%)}.art-badge.fox .seal{background:radial-gradient(circle at 60% 50%,#8a4f32 0,#16131f 70%)}.art-badge.snail .seal{background:radial-gradient(circle at 50% 60%,#6a8f7a 0,#16131f 70%)}.gate{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 10%,rgba(139,122,168,.18),transparent 46%),#07060b6b}.gate-card{width:min(32rem,100%);background:var(--panel);border:1px solid var(--line);padding:28px 24px 22px}.gate h1{font-size:clamp(1.6rem,4vw,2.15rem);line-height:1.3;margin-bottom:12px}.lede{margin:0 0 16px;color:var(--muted);max-width:36em}.howto{margin:0 0 20px;padding-left:1.1rem;color:var(--text)}.howto li+li{margin-top:.35rem}#btn-enter{background:#1a1624;border-color:var(--line-strong);padding:.7rem 1.1rem}.world-label,.npc-label,.player-label{pointer-events:none;white-space:nowrap;padding:.15rem .45rem;border:1px solid var(--line);background:#0a0910c7;color:var(--text);font-family:var(--font-display);font-size:12px;letter-spacing:.06em;transition:opacity .2s linear}.npc-label{font-family:var(--font-mono);font-size:11px;color:var(--muted)}.player-label{color:var(--brass);font-size:11px;font-family:var(--font-mono)}@media(max-width:640px){.hud-top{align-items:stretch}.toolbar button{padding:.5rem .65rem}.gate-card{padding:22px 16px 18px}.sheet-actions button[value=close]{margin-left:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}