:root{color-scheme:dark;--fg: #e9eef4;--muted: #9bb0c4;--bg: #0b0f14;--panel: rgba(8,12,18,.86);--line: #1d2a38}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:16px/1.45 -apple-system,system-ui,sans-serif}#app{position:fixed;inset:0}canvas#view{display:block;width:100%;height:100%;touch-action:none}.muted{color:var(--muted)}#intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,30rem);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;backdrop-filter:blur(6px);z-index:20}#intro h1{font-size:1.25rem;margin:0 0 .5rem}#intro p{margin:0 0 .9rem}#intro .muted{font-size:.92rem}button{min-height:44px;min-width:44px;padding:10px 16px;border-radius:10px;border:1px solid #2a3a4c;background:#16263a;color:var(--fg);font:inherit;cursor:pointer;touch-action:manipulation}button:active{background:#1f3450}#places{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;right:8px;display:flex;gap:6px;overflow-x:auto;z-index:10;-webkit-overflow-scrolling:touch}#places button{white-space:nowrap;font-size:.9rem;padding:8px 12px;background:var(--panel)}#pad{position:absolute;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 44px);display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:6px;z-index:10}#pad[hidden]{display:none}#pad button{padding:0;height:56px;width:56px;font-size:20px;background:var(--panel)}#pad [data-dir=f]{grid-column:2;grid-row:1}#pad [data-dir=l]{grid-column:1;grid-row:2}#pad [data-dir=b]{grid-column:2;grid-row:3}#pad [data-dir=r]{grid-column:3;grid-row:2}#card{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);transform:translate(-50%);width:min(94vw,26rem);max-height:55vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px 12px;z-index:15}#card[hidden]{display:none}#card h2{font-size:1.1rem;margin:0 2.4rem .25rem 0}#card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:.6rem 0}#card dt{color:var(--muted)}#card dd{margin:0}#card p{margin:.4rem 0;font-size:.92rem}#card a{color:#7a97ff}#card-close{position:absolute;right:8px;top:8px;padding:0;width:44px;height:44px;font-size:22px;line-height:1;background:transparent;border:0}#hud{position:absolute;left:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);background:var(--panel);border-radius:8px;padding:6px 8px;font-size:12px;pointer-events:none;z-index:10;max-width:92vw}#hud[hidden]{display:none}#credits{position:absolute;left:0;right:0;bottom:0;padding:6px 10px calc(env(safe-area-inset-bottom,0px) + 6px);font-size:11px;color:var(--muted);background:linear-gradient(transparent,#0000008c);pointer-events:none;z-index:5}@media(prefers-reduced-motion:reduce){*{transition:none!important}}#tools{position:absolute;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 44px);z-index:10;display:flex;gap:6px}#tools button{background:var(--panel)}#note{position:absolute;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);margin:0;font-size:12px;text-align:center;pointer-events:none;z-index:6}#note[hidden]{display:none}