:root{--bg:#211812;--bg-2:#2a1f14;--panel:#33261a;--panel-2:#3e2f20;--ivory:#f2e8d5;--ivory-dim:#cbbfa8;--gold:#c9a24b;--gold-bright:#e8c56d;--brass:#a87f2e;--wood:#8a6134;--wood-dark:#6b4826;--wood-light:#b0824c;--danger:#b04a3a;--ok:#7fa85a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{overscroll-behavior:none;height:100%;margin:0}body{background:var(--bg);color:var(--ivory);-webkit-user-select:none;user-select:none;font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif}.screen{max-width:480px;min-height:100dvh;padding:14px 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;margin:0 auto;display:flex}.btn{background:var(--panel-2);color:var(--ivory);cursor:pointer;border:1px solid #54422c;border-radius:10px;padding:10px 14px;font-size:15px;transition:transform 80ms,background .15s}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(180deg, var(--gold-bright), var(--brass));color:#2a1f14;border-color:var(--gold);font-weight:700}.btn.ghost{background:0 0}.btn.big{padding:14px 32px;font-size:18px}.btn.danger{background:var(--danger);border-color:var(--danger)}.btn.correct{background:var(--ok)}.btn.wrong{background:var(--danger)}.btn:disabled{opacity:.45}.page-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.page-header h1{color:var(--gold-bright);margin:0;font-size:19px}.page-header-actions{gap:8px;display:flex}.title-screen{text-align:center;justify-content:center;align-items:center;gap:18px}.title-emblem{filter:drop-shadow(0 4px 12px #c9a24b80);font-size:64px}.title-logo{letter-spacing:6px;color:var(--gold-bright);text-shadow:0 2px #6b5320;margin:0;font-size:40px}.title-sub{color:var(--ivory-dim)}.title-note{color:var(--ivory-dim);font-size:12px}.home-progress{color:var(--ivory-dim);margin:0}.chapter-card{background:var(--panel);border:1px solid #4a3a26;border-radius:14px;padding:6px}.chapter-card.locked{opacity:.6}.chapter-main{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:10px;display:block}.chapter-main h2{color:var(--gold-bright);margin:0 0 4px;font-size:18px}.chapter-main p{color:var(--ivory-dim);margin:0 0 8px;font-size:13px}.chapter-keys{flex-direction:column;gap:4px;margin-bottom:8px;display:flex}.chapter-key{color:var(--ivory-dim);font-size:13px}.chapter-key.got{color:var(--gold-bright)}.chapter-cta{color:var(--gold);font-size:13px}.exhibit-link{width:calc(100% - 20px);margin:0 10px 10px;display:block}.stage-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.stage-cell{background:var(--panel);color:var(--ivory);cursor:pointer;border:1px solid #4a3a26;border-radius:12px;flex-direction:column;align-items:flex-start;gap:6px;min-height:110px;padding:14px 12px;display:flex}.stage-cell.done{border-color:var(--gold)}.stage-cell-no{color:var(--gold-bright);font-size:22px;font-weight:700}.stage-cell-title{text-align:left;font-size:13px}.stage-cell-diff{color:var(--gold);font-size:12px}.stage-cell-mark{color:var(--ok);font-size:12px}.game-screen{gap:8px}.game-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.game-title{text-align:center}.game-stage-no{color:var(--gold);letter-spacing:2px;font-size:11px}.game-stage-name{font-size:15px;font-weight:700}.game-difficulty{color:var(--gold);text-align:right;min-width:52px;font-size:12px}.game-area{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.game-keyname{color:var(--ivory-dim);font-size:13px}.game-footer{flex-direction:column;gap:8px;display:flex}.game-mission{background:var(--panel);color:var(--ivory-dim);border-radius:10px;min-height:40px;padding:10px 12px;font-size:13px}.game-actions{align-items:center;gap:8px;display:flex}.game-moves{color:var(--ivory-dim);margin-left:auto;font-size:13px}.puzzle-note{color:var(--ivory-dim);text-align:center;margin:8px 0 0;font-size:12px}.pinlock{flex-direction:column;align-items:center;width:100%;display:flex}.pinlock-stage{perspective:1100px;background-color:#17100a;background-image:radial-gradient(70% 55% at 50% 8%,#ffd69633,#0000 70%),radial-gradient(90% 40% at 50% 100%,#0000008c,#0000 70%),repeating-linear-gradient(0deg,#ffffff05 0 2px,#0000 2px 46px),repeating-linear-gradient(90deg,#0000001f 0 1px,#0000 1px 92px),linear-gradient(#2b1d12,#1a110a 70%,#120b06);background-position:50%;background-size:cover;border-radius:14px;width:100%;max-width:420px;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #000000b3,0 10px 26px #00000073}.pinlock-svg{width:100%;height:auto;display:block;position:relative;overflow:visible}.pinlock-pin{cursor:grab}.pinlock-pin.active{cursor:grabbing}.pinlock-pin.locked .pinlock-cap{filter:saturate(.4)brightness(.75)}.pinlock-cap-g.hint{animation:2.2s ease-in-out infinite pl-cap-hint}@keyframes pl-cap-hint{0%,to{filter:none}50%{filter:drop-shadow(0 0 5px #ffd778d9)}}.pinlock-aligned{animation:.5s ease-out pl-aligned}@keyframes pl-aligned{0%{stroke-width:5px;opacity:.4}}.pinlock-bolt{cursor:grab}.pinlock-knob-glow{opacity:0;transition:opacity .3s}.pinlock-bolt.free .pinlock-knob-glow{animation:1.4s ease-in-out infinite pl-knob}@keyframes pl-knob{0%,to{opacity:.25}50%{opacity:.95}}.pinlock-clamp .jaw{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}.pinlock-num,.pinlock-clamp-text{fill:#3a2606;font-family:Georgia,Times New Roman,serif;font-size:10px;font-weight:700}.pinlock-clamp-text{fill:#f6e3b8;font-size:9px}.pinlock-plate-text{fill:#3a2606;letter-spacing:1px;font-size:8px;font-weight:700}.pinlock-gauge-q{fill:#e8c56d;font-family:Georgia,serif;font-size:13px;font-weight:700}.pinlock-burst .slit{transform-box:fill-box;transform-origin:100%;animation:.9s ease-out forwards pl-slit}@keyframes pl-slit{0%{opacity:0;transform:scaleX(0)}35%{opacity:1}to{opacity:.85;transform:scaleX(1)}}.pinlock-burst .dust{animation:.8s ease-out forwards pl-dust}@keyframes pl-dust{0%{opacity:1;transform:translate(0)}to{transform:translate(var(--dx), var(--dy));opacity:0}}.pinlock-door{transform-origin:6%;transition:transform .95s cubic-bezier(.55,0,.25,1),filter .95s}.phase-door .pinlock-door{filter:brightness(.7);transform:rotateY(-42deg)translateZ(-10px)}.pinlock-light{opacity:0;background:radial-gradient(45% 40% at 62% 62%,#fff4cff2,#0000 70%),radial-gradient(80% 70% at 62% 62%,#f3c86273,#0000 75%);transition:opacity .9s .15s;position:absolute;inset:0}.phase-door .pinlock-light{opacity:1}@media (prefers-reduced-motion:reduce){.pinlock-door,.pinlock-light{transition-duration:10ms}.pinlock-cap-g.hint{animation:none}}.secretbox-face{background:repeating-conic-gradient(from 45deg, #7a5527 0 25%, #8f6a35 0 50%) 0 0 / 40px 40px;border:6px solid #4c3319;border-radius:12px;width:300px;height:300px;margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 4px 10px #00000073,0 10px 24px #00000080}.secretbox-panel{background:repeating-linear-gradient(0deg, #0000000f 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--wood-light), var(--wood) 70%, var(--wood-dark));cursor:grab;z-index:2;border:2px solid #3d2812;border-radius:6px;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;box-shadow:0 3px 8px #00000073}.secretbox-panel.lid{background:repeating-linear-gradient(90deg, #0000000d 0 2px, transparent 2px 18px), linear-gradient(180deg, #c1915a, var(--wood));z-index:3;border-width:3px}.secretbox-label{color:#2f1f0e;text-shadow:0 1px #ffffff40;font-size:12px;font-weight:700}.secretbox-arrow{color:#2f1f0e;font-weight:700}.secretbox-face.solved .secretbox-panel.lid{animation:1s forwards lid-open}@keyframes lid-open{to{opacity:.4;transform:translateY(-320px)!important}}.secretbox-light{z-index:1;background:radial-gradient(circle at 50% 40%,#ffe296d9,#0000 65%);animation:.8s light-in;position:absolute;inset:0}@keyframes light-in{0%{opacity:0}}.gears-svg{width:min(92vw,380px);height:auto;margin:0 auto;display:block}.gears-board{fill:#241a10;stroke:#4a3a26;stroke-width:2px}.gears-axle{fill:#12100c;stroke:var(--gold);stroke-width:2px;transition:r .15s}.gears-axle.hover{fill:#e8c56d59}.gears-target{stroke:var(--gold-bright);stroke-width:3px;stroke-dasharray:5 4}.gears-tray{fill:#1c140d;stroke:#4a3a26;stroke-width:2px}.gears-traylabel{fill:var(--ivory-dim);font-size:11px}.gear-body{fill:#b98e3f;stroke:#6e5220;stroke-width:1.5px;filter:drop-shadow(0 2px 3px #00000080)}.gear-body.locked{fill:#6a6158;stroke:#453f38}.gear-body.tray{cursor:grab}.gear-hub{fill:#2a1f14;stroke:#d9b25f;stroke-width:2px}.gear-spoke{stroke:#6e5220;stroke-width:3px}.gear-pointer{stroke:#e85d4a;stroke-width:4px;stroke-linecap:round}.gear-crankarm{stroke:#3a2c1a;stroke-width:5px;stroke-linecap:round}.gear-crankknob{fill:var(--gold-bright);stroke:#6e5220;stroke-width:2px;animation:2.4s ease-in-out infinite handle-hint}.gear-locktext{fill:#e8dfd0;font-size:10px;font-weight:700}.gear-teethtext{fill:var(--ivory);pointer-events:none;font-size:12px;font-weight:700}.gears-status{color:var(--ivory-dim);justify-content:center;gap:16px;font-size:13px;display:flex}.gears-limit{color:var(--danger);text-align:center;font-size:13px}.unlock-overlay{z-index:50;background:#0f0a05e0;flex-direction:column;justify-content:center;align-items:center;gap:14px;animation:.4s light-in;display:flex;position:fixed;inset:0}.unlock-flash{background:radial-gradient(circle,#ffe296b3,#0000 70%);border-radius:50%;width:240px;height:240px;animation:2.2s infinite flash;position:absolute}@keyframes flash{0%,to{opacity:.6;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.unlock-text{letter-spacing:8px;color:var(--gold-bright);text-shadow:0 0 24px #e8c56de6;font-size:42px;font-weight:800;animation:.5s cubic-bezier(.2,1.6,.4,1) unlock-pop}@keyframes unlock-pop{0%{opacity:0;transform:scale(.4)}}.unlock-sub{color:var(--ivory-dim);font-size:13px}.result-screen{justify-content:center}.result-card{background:var(--panel);border:1px solid var(--gold);text-align:center;border-radius:16px;flex-direction:column;gap:14px;padding:24px 18px;display:flex}.result-unlocked{letter-spacing:6px;color:var(--gold-bright);font-size:30px;font-weight:800}.result-card h2{margin:0;font-size:18px}.result-keyname{color:var(--ivory-dim);margin:0;font-size:13px}.result-stats{justify-content:center;gap:32px;display:flex}.result-stats div{flex-direction:column;gap:2px;display:flex}.result-stats span{color:var(--ivory-dim);font-size:12px}.result-stats strong{color:var(--gold-bright);font-size:22px}.result-stats em{color:var(--ivory-dim);font-size:11px;font-style:normal}.result-actions{flex-direction:column;gap:8px;display:flex}.codex-list{flex-direction:column;gap:10px;display:flex}.codex-item{background:var(--panel);color:var(--ivory);cursor:pointer;border:1px solid #4a3a26;border-radius:12px;align-items:center;gap:12px;padding:14px;display:flex}.codex-item.unknown{opacity:.55}.codex-icon{font-size:24px}.codex-name{font-weight:700}.codex-ch{color:var(--ivory-dim);margin-left:auto;font-size:12px}.codex-detail dl{background:var(--panel);border-radius:12px;grid-template-columns:110px 1fr;gap:8px 12px;margin:0;padding:16px;display:grid}.codex-detail dt{color:var(--gold);font-size:13px}.codex-detail dd{color:var(--ivory);margin:0;font-size:13px;line-height:1.6}.settings-list{flex-direction:column;gap:12px;display:flex}.settings-row{background:var(--panel);border-radius:12px;justify-content:space-between;align-items:center;padding:14px;display:flex}.settings-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold)}.settings-note{color:var(--ivory-dim);font-size:12px}.exhibit-title{text-align:center;color:var(--gold-bright);margin:0}.exhibit-tabs{justify-content:center;gap:8px;display:flex}.exhibit-lock{background:linear-gradient(180deg, var(--wood-light), var(--wood-dark));border:4px solid #4c3319;border-radius:10px;width:280px;height:220px;margin:16px auto;position:relative}.exhibit-bolt{color:#4a443c;background:linear-gradient(#d9d3c5,#9d968a);border-radius:5px;justify-content:flex-end;align-items:center;height:26px;padding-right:8px;font-size:12px;font-weight:700;display:flex;position:absolute;top:60px;left:16px;right:16px}.exhibit-pin{background:linear-gradient(90deg, var(--wood-dark), var(--wood-light), var(--wood-dark));border:2px solid #3d2812;border-radius:4px;width:22px;height:56px;position:absolute;top:30px}.exhibit-key{background:linear-gradient(180deg, var(--gold), var(--brass));color:#2a1f14;border-radius:4px;justify-content:center;align-items:center;width:180px;height:20px;font-size:11px;font-weight:700;display:flex;position:absolute;bottom:18px;left:40px}.exhibit-partname.body{color:#2f1f0e;font-size:12px;font-weight:700;position:absolute;top:8px;right:8px}.exhibit-lock.animate .exhibit-key{animation:3s ease-in-out infinite ex-key}.exhibit-lock.animate .exhibit-pin{animation:3s ease-in-out infinite ex-pin}.exhibit-lock.animate .exhibit-bolt{animation:3s ease-in-out infinite ex-bolt}@keyframes ex-key{0%,30%{transform:translateY(0)}45%,75%{transform:translateY(-24px)}90%,to{transform:translateY(0)}}@keyframes ex-pin{0%,32%{transform:translateY(0)}45%,75%{transform:translateY(-22px)}92%,to{transform:translateY(0)}}@keyframes ex-bolt{0%,55%{transform:translate(0)}75%{transform:translate(60px)}92%,to{transform:translate(0)}}.exhibit-parts{flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0;display:flex}.exhibit-desc{background:var(--panel);color:var(--ivory);border-radius:10px;padding:12px;font-size:13px;line-height:1.7}.exhibit-quiz{flex-direction:column;gap:14px;display:flex}.quiz-block p{margin:0 0 6px;font-size:14px}.quiz-choices{flex-direction:column;gap:6px;display:flex}.quiz-score{text-align:center;color:var(--gold-bright);font-size:16px}.shake{animation:.32s shake}@keyframes shake{0%,to{translate:0}25%{translate:-4px}50%{translate:4px}75%{translate:-3px}}