:root{--bg: #0a0c10;--panel: rgba(12, 14, 20, .88);--border: rgba(200, 180, 140, .28);--gold: #d4b88a;--gold-bright: #f0d9a8;--text: #e8e4dc;--muted: #9a9488;--accent: #8b6b3e;--danger: #a85a4a;--ok: #6a9a6a;--font: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);user-select:none}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}.hidden{display:none!important}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:auto}.screen.dim{background:#0000008c;backdrop-filter:blur(4px)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:2rem 2.4rem;max-width:min(440px,92vw);width:100%;box-shadow:0 20px 60px #0000008c,inset 0 1px #ffffff0a;text-align:center}.logo{font-weight:300;letter-spacing:.35em;font-size:1.7rem;color:var(--gold-bright);margin-bottom:.4rem}.logo.gold{font-size:2.4rem;text-shadow:0 0 40px rgba(212,184,138,.45)}.subtitle{color:var(--gold);letter-spacing:.12em;margin-bottom:1.2rem;font-size:.95rem}.flavor{color:var(--muted);font-size:.88rem;line-height:1.7;margin-bottom:1.5rem;text-align:left}.muted{color:var(--muted);font-size:.85rem}.btn{display:block;width:100%;margin:.45rem 0;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--border);background:#ffffff0a;color:var(--text);font-size:.95rem;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.btn:hover{background:#d4b88a1f;border-color:var(--gold)}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(180deg,#6a5332,#4a3a22);border-color:var(--gold);color:var(--gold-bright)}.btn.ghost{background:transparent}.progress-track{height:6px;background:#ffffff14;border-radius:4px;overflow:hidden;margin:1.2rem 0 .6rem}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--gold-bright));transition:width .2s ease}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}#crosshair{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border:1.5px solid rgba(232,228,220,.7);border-radius:50%;box-shadow:0 0 6px #00000080}#crosshair.active{border-color:var(--gold-bright);background:#d4b88a40}.prompt{position:absolute;left:50%;bottom:22%;transform:translate(-50%);background:#0000008c;border:1px solid var(--border);padding:.45rem .9rem;border-radius:6px;font-size:.9rem;color:var(--gold-bright);letter-spacing:.04em}.toast{position:absolute;left:50%;top:14%;transform:translate(-50%);background:#0a0c10d9;border:1px solid var(--border);padding:.6rem 1.1rem;border-radius:8px;font-size:.92rem;max-width:80vw;text-align:center;animation:fadeIn .25s ease}.item-popup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.item-popup-inner{display:flex;gap:1rem;align-items:center;background:#080a0eeb;border:1px solid var(--gold);padding:1.2rem 1.6rem;border-radius:10px;min-width:260px;box-shadow:0 0 40px #d4b88a33;animation:popIn .35s ease}.item-icon{font-size:1.6rem;color:var(--gold-bright)}.item-name{font-size:1.05rem;color:var(--gold-bright);margin-bottom:.25rem}.item-desc{font-size:.85rem;color:var(--muted)}.hint-box{position:absolute;left:50%;bottom:8%;transform:translate(-50%);max-width:min(520px,90vw);background:#141e28bf;border:1px solid rgba(120,160,200,.35);padding:.55rem .9rem;border-radius:8px;font-size:.85rem;color:#c8d8e8;display:flex;gap:.6rem;align-items:flex-start}.hint-label{color:#8ab4d8;font-weight:600;letter-spacing:.08em;flex-shrink:0}.objective{position:absolute;top:1.2rem;left:1.2rem;background:#00000073;border-left:3px solid var(--gold);padding:.55rem .9rem;border-radius:0 6px 6px 0;max-width:min(360px,70vw)}.obj-label{display:block;font-size:.7rem;letter-spacing:.12em;color:var(--gold);margin-bottom:.2rem}#objective-text{font-size:.88rem}.inv-bar{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.4rem;pointer-events:auto}.inv-slot{width:52px;height:52px;border:1px solid var(--border);border-radius:8px;background:#00000080;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--gold-bright);text-align:center;padding:4px;cursor:pointer;transition:border-color .15s,background .15s;line-height:1.15}.inv-slot:hover,.inv-slot.selected{border-color:var(--gold-bright);background:#d4b88a26}.inv-slot.empty{opacity:.35;cursor:default}.examine{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#000000b8;backdrop-filter:blur(6px);pointer-events:auto}.examine-frame{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.6rem 1.8rem;max-width:min(480px,92vw);width:100%;box-shadow:0 20px 60px #00000080}.examine-frame h3{color:var(--gold-bright);margin-bottom:.8rem;font-weight:500}.examine-frame p{color:var(--text);line-height:1.7;margin-bottom:1rem;white-space:pre-wrap}#examine-extra{margin-bottom:1rem}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.6rem}.numpad button,.wire-btn,.valve-btn,.clock-btn,.mirror-btn{padding:.65rem;border-radius:6px;border:1px solid var(--border);background:#ffffff0d;color:var(--text);cursor:pointer;font-size:1rem}.numpad button:hover,.wire-btn:hover,.valve-btn:hover,.clock-btn:hover,.mirror-btn:hover{border-color:var(--gold)}.display-code{font-family:ui-monospace,monospace;font-size:1.4rem;letter-spacing:.3em;text-align:center;padding:.5rem;margin-bottom:.6rem;background:#00000059;border-radius:6px;color:var(--gold-bright)}.row-btns{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.5rem}.wire-btn.on{background:#6a9a6a4d;border-color:var(--ok)}.valve-btn.done{background:#6a9a6a40;border-color:var(--ok)}.mobile-controls{position:absolute;inset:0;pointer-events:none}.joy-zone{position:absolute;left:1.2rem;bottom:1.5rem;width:120px;height:120px;border-radius:50%;background:#ffffff14;border:1px solid rgba(255,255,255,.15);pointer-events:auto;touch-action:none}.joy-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#d4b88a73;border:1px solid var(--gold)}.mobile-btns{position:absolute;right:1rem;bottom:1.5rem;display:flex;flex-direction:column;gap:.45rem;pointer-events:auto}.mbtn{min-width:72px;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--border);background:#00000080;color:var(--text);font-size:.8rem;pointer-events:auto}.mbtn.primary{background:#6a5332bf;border-color:var(--gold);color:var(--gold-bright)}.slider-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.7rem 0;color:var(--muted);font-size:.9rem}.slider-row input[type=range]{flex:1;accent-color:var(--gold)}.hint-line{margin-top:1rem;font-size:.78rem}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.objective{top:.6rem;left:.6rem;max-width:60vw}.inv-bar{right:.5rem;top:auto;bottom:10rem;transform:none}.inv-slot{width:44px;height:44px;font-size:.58rem}#crosshair{opacity:.5}}