/* The DOM remains the playable fallback until the WebGL scene is ready. */
body{background:radial-gradient(ellipse at 50% 0,#34362b,#141b18 55%,#090e0d);}
header{height:66px;max-width:1440px;padding:0 5vw;border-color:#c9a87820}
.brand{font-size:16px}.brand small{font-size:9px;letter-spacing:3px}.brand-icon{font-size:25px}
main{max-width:1320px;padding:20px 32px 0}.chapter{color:#9b9e8b;letter-spacing:4px;font-size:10px}.chapter span{color:#986b50;padding:0 10px}
.intro h1{font-size:48px;letter-spacing:8px;margin:8px 0 0}.intro h1 svg{display:none}.intro p{font-size:12px;letter-spacing:3px;margin:10px 0 20px;color:#a6ab98}
.desk{border:1px solid #9e866044;border-radius:12px;min-height:600px;background:#33281f;box-shadow:0 20px 70px #0009,inset 0 0 0 5px #0002}
#world{position:absolute;inset:0;z-index:0}#world canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.scene-hud{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;z-index:4;pointer-events:none;font-size:10px;letter-spacing:2px;color:#d4c7aa;text-shadow:0 2px 5px #000}
.scene-hud i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a6b584;box-shadow:0 0 12px #c3dc96;margin:0 7px 1px 0}
#sceneStatus{color:#c4b69b}.three-ready .stage{max-width:none;height:600px;pointer-events:none;transform-style:flat}
.three-ready .stage button,.three-ready .math-paper,.three-ready .result{pointer-events:auto}
.three-ready .envelope,.three-ready .foot,.three-ready .tape,.three-ready.desk::before,.three-ready.desk::after{display:none}
.three-ready .open-btn{left:50%;bottom:67px;top:auto;transform:translateX(-50%);font-size:14px;letter-spacing:3px;padding:15px 28px;border:1px solid #d5bb86;background:#eee1be;color:#322820;box-shadow:0 5px 0 #76634a,0 10px 30px #0007;border-radius:3px}
.three-ready .open-btn:hover{transform:translateX(-50%) translateY(-3px);box-shadow:0 8px 0 #76634a,0 14px 30px #0007}.three-ready .opened>.open-btn{display:none}
.three-ready .strip{top:auto!important;bottom:70px;width:125px;height:45px;background:#e9dfc5;box-shadow:0 7px 10px #0007;clip-path:none;border-radius:1px}.three-ready .strip.left{left:9%;transform:rotate(-6deg)}.three-ready .strip.right{right:9%;transform:rotate(5deg)}.three-ready .strip b{font-size:20px}.three-ready .strip small{display:none}.three-ready .strip.flipped{background:#faf0d2;translate:0 -8px}.three-ready .strip.flipped b{font-size:17px}
.three-ready .desk-bottom{position:absolute;bottom:18px;left:28px;right:28px;padding:0;pointer-events:none;font-size:9px;letter-spacing:2px;color:#c7b5949c}
.three-ready .choices{top:auto;bottom:123px;transform:translateX(-50%);padding:0;border:0;background:none;box-shadow:none;width:460px;animation:card-rise .55s both;pointer-events:none;color:#f3e8ce}
.three-ready .choices .hand-title{font-size:26px;letter-spacing:4px;text-shadow:0 3px 12px #000}.three-ready .choices p,.three-ready .choice-note,.three-ready .portrait,.three-ready .characters small{display:none}
.three-ready .characters{gap:28px;margin:12px 0 0}.three-ready .characters button{background:#e8dec5ee;border:1px solid #fff5d66b;border-radius:3px;padding:5px 0;box-shadow:0 4px 0 #6a5c46,0 9px 15px #0007;animation:none;overflow:visible}
.three-ready .characters b{font-family:Georgia,serif;font-size:24px;margin:0}.three-ready .characters button:hover,.three-ready .characters button:focus-visible{background:#fff0bf;transform:translateY(-4px);box-shadow:0 8px 0 #6a5c46,0 12px 20px #0007}
.three-ready .result,.three-ready .math-paper{top:50%;left:50%;transform:translate(-50%,-50%) rotate(-1deg);width:min(360px,87%);padding:24px;border:1px solid #f7edcf;box-shadow:0 0 0 5px #362d2140,0 24px 70px #000b;background-color:#eee2c4;animation:paper-reveal .4s both}
.three-ready .result p{font-size:12px;line-height:1.8}.three-ready .result-icon{height:85px}.three-ready .result .action{padding:12px 24px;border-radius:2px}.three-ready .math-paper h2{font-size:25px}.three-ready .math-option{min-height:48px}
footer{margin:0;padding:13px 0;border:0;color:#828876;font-size:10px}.restart{border-color:#a58a5c55;font-size:11px;color:#c9bda2;padding:8px 14px}
@keyframes paper-reveal{from{opacity:0;scale:.9;translate:0 20px}to{opacity:1;scale:1;translate:0 0}}
@media(max-width:650px){header{height:58px;padding:0 16px}.brand{gap:5px;font-size:14px}.text-btn{margin-left:8px;font-size:10px}.brand small{display:none}main{padding:18px 10px 0}.intro h1{font-size:37px;letter-spacing:4px}.intro p{margin:9px 0 16px;font-size:11px}.chapter{font-size:9px}.desk,.three-ready .stage{min-height:560px;height:560px}.scene-hud{top:18px;left:16px;right:16px;font-size:9px;letter-spacing:1px}.three-ready .open-btn{bottom:113px;padding:14px 20px;white-space:nowrap}.three-ready .strip{bottom:52px;width:106px;height:38px}.three-ready .strip.left{left:8%}.three-ready .strip.right{right:8%}.three-ready .strip b{font-size:18px}.three-ready .strip.flipped b{font-size:16px}.three-ready .choices{bottom:117px;width:85%}.three-ready .characters{gap:15px}.three-ready .choices .hand-title{font-size:23px}.three-ready .desk-bottom{left:16px;right:16px;bottom:16px;font-size:8px;letter-spacing:1px}.three-ready .result,.three-ready .math-paper{padding:22px 18px}.intro{margin:0}footer{padding:12px 4px}.three-ready .result h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.three-ready .characters button:hover{transform:none}}
.three-ready.desk::after{display:block;z-index:1;background:radial-gradient(ellipse at 49% 43%,transparent 24%,#160f0740 74%,#0c090780 100%);animation:none;opacity:1}
.three-ready .stage,.three-ready .desk-bottom{z-index:2}