:root{font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,Arial,sans-serif;color:#173148;background:#97d9ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none}button{font:inherit;touch-action:manipulation}.app-shell{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(#91d8ff,#b8ecff 52%,#8fd387 52%,#68b863)}.start-screen{display:grid;min-height:100%;place-items:center;padding:24px}.start-panel,.pause-panel{width:min(560px,100%);border:3px solid rgba(255,255,255,.8);border-radius:8px;background:#fffdf0f0;box-shadow:0 18px 60px #1a465d38;padding:30px;text-align:center}.eyebrow{margin:0 0 8px;color:#2f7b5f;font-weight:700}.client-badge{display:inline-flex;margin:-8px 0 18px;border-radius:8px;background:#d7f1ff;color:#24566d;font-weight:800;padding:7px 12px}h1{margin:0 0 22px;color:#1e5d8f;font-size:48px;line-height:1.08}.primary-button,.secondary-button{min-width:148px;border:0;border-radius:8px;cursor:pointer;font-weight:800;transition:transform .16s ease,box-shadow .16s ease}.primary-button{padding:14px 26px;color:#143247;background:#ffcf54;box-shadow:0 6px #d99525}.secondary-button{padding:12px 22px;color:#173148;background:#d7f1ff;box-shadow:0 5px #7bb8d1}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.primary-button:active,.secondary-button:active{transform:translateY(2px);box-shadow:none}.compact{min-width:128px;padding:11px 18px}.instructions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;text-align:left}.instructions p{margin:0;border-left:5px solid #64bd71;border-radius:6px;background:#fff;padding:10px 12px;font-weight:700}.game-mount,.game-canvas{display:block;width:100%;height:100%;touch-action:none}.help-overlay{position:absolute;z-index:20;top:16px;left:16px;display:flex;max-width:min(760px,calc(100% - 32px));align-items:center;gap:12px;border:2px solid rgba(255,255,255,.8);border-radius:8px;background:#ffffffd1;padding:10px 12px;box-shadow:0 8px 24px #12384c29;font-size:14px}.hud-title-row{display:flex;align-items:center;gap:8px}.help-overlay strong{color:#1e5d8f;white-space:nowrap}.help-overlay span{line-height:1.4}.help-overlay button{flex:0 0 auto;border:0;border-radius:8px;background:#ffeb9b;color:#573a10;cursor:pointer;font-weight:800;padding:8px 10px}.sound-settings{display:flex;align-items:center;gap:10px}.sound-toggle{min-width:74px;border:0;border-radius:8px;background:#d9f6da;color:#204f30;cursor:pointer;font-weight:900;padding:8px 10px}.sound-toggle.muted{background:#e8edf1;color:#52606a}.volume-control{display:flex;align-items:center;gap:7px;min-width:150px;font-weight:800}.volume-control input{width:92px;accent-color:#ffcf54}.crosshair{position:absolute;z-index:18;top:50%;left:50%;width:22px;height:22px;pointer-events:none;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{position:absolute;content:"";background:#ffffffeb;box-shadow:0 0 2px #0009}.crosshair:before{top:10px;left:0;width:22px;height:2px}.crosshair:after{top:0;left:10px;width:2px;height:22px}.hotbar{position:absolute;z-index:30;right:50%;bottom:18px;display:grid;grid-template-columns:repeat(6,98px);gap:8px;transform:translate(50%)}.hotbar-slot{position:relative;display:grid;min-height:76px;place-items:center;gap:4px;border:3px solid rgba(255,255,255,.8);border-radius:8px;background:#ffffffbd;color:#173148;cursor:pointer;font-size:12px;font-weight:800;box-shadow:0 6px 18px #12384c29}.hotbar-slot.active{border-color:#ffcf54;background:#fff8d5;transform:translateY(-5px)}.shortcut{position:absolute;top:5px;left:7px;color:#346071;font-size:12px}.block-swatch{width:32px;height:32px;border:2px solid rgba(33,61,75,.35);border-radius:6px;box-shadow:inset 0 0 0 3px #ffffff59}.block-name{width:100%;overflow:hidden;padding:0 5px;text-overflow:ellipsis;white-space:nowrap}.pause-backdrop{position:absolute;z-index:60;inset:0;display:grid;place-items:center;background:#12304157;padding:24px}.pause-panel h2{margin:0 0 10px;color:#1e5d8f;font-size:34px}.pause-panel p{margin:0 0 20px;font-weight:700}.pause-actions{display:flex;justify-content:center;gap:14px}.orientation-tip{margin:-8px 0 18px;border-radius:8px;background:#fff2b6;color:#704b00;padding:10px 12px;font-weight:800}.mobile-controls{position:absolute;inset:0;z-index:25;pointer-events:none;touch-action:none}.mobile-hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:28;border:2px solid rgba(255,255,255,.75);border-radius:8px;background:#ffffffc7;padding:8px;pointer-events:auto}.mobile-look-zone{position:absolute;top:0;right:0;bottom:0;width:58%;pointer-events:auto;touch-action:none}.mobile-pause-button{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));min-width:72px;min-height:52px;border:2px solid rgba(255,255,255,.85);border-radius:8px;background:#fff2b6f0;color:#573a10;cursor:pointer;font-weight:900;pointer-events:auto;box-shadow:0 6px 18px #12384c2e}.mobile-hint{position:absolute;top:max(76px,calc(env(safe-area-inset-top) + 68px));left:50%;width:min(420px,calc(100% - 32px));min-height:54px;border:2px solid rgba(255,255,255,.9);border-radius:8px;background:#ffffffeb;color:#173148;cursor:pointer;font-weight:900;line-height:1.35;padding:10px 14px;pointer-events:auto;transform:translate(-50%);box-shadow:0 10px 30px #12384c33}.mobile-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:138px;height:138px;border:3px solid rgba(255,255,255,.85);border-radius:50%;background:#ffffff3d;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 0 8px #2668821f,0 10px 28px #12384c33}.mobile-joystick:before{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:#fffc;content:"";transform:translate(-50%,-50%)}.mobile-joystick-knob{position:absolute;top:50%;left:50%;width:62px;height:62px;border:3px solid rgba(255,255,255,.9);border-radius:50%;background:#ffcf54;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));box-shadow:0 7px #d99525}.mobile-action-buttons{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,64px);gap:12px;pointer-events:auto}.mobile-action-button{min-width:64px;min-height:58px;border:3px solid rgba(255,255,255,.88);border-radius:8px;background:#ffffffe0;color:#173148;cursor:pointer;font-size:20px;font-weight:900;box-shadow:0 6px #255d7652;touch-action:none}.mobile-action-button.jump{grid-column:1 / 3;justify-self:center;min-width:76px;background:#ffcf54}.mobile-action-button.place{background:#bff4d0}.mobile-action-button:active,.mobile-pause-button:active,.mobile-hint:active{transform:translateY(3px);box-shadow:none}@media(max-width:760px){.instructions{grid-template-columns:1fr}h1{font-size:40px}.help-overlay{align-items:flex-start;flex-direction:column}.hotbar{right:10px;left:10px;grid-template-columns:repeat(3,minmax(0,1fr));transform:none}}@media(pointer:coarse){.start-screen{padding:16px}.start-panel{max-height:calc(100vh - 32px);overflow:auto;padding:22px}.primary-button{min-height:56px;min-width:168px;font-size:18px}.pause-panel{width:min(430px,100%)}.pause-actions{flex-wrap:wrap}.pause-actions .compact{min-height:54px}}.touch-mode .help-overlay{display:none}.touch-mode .hotbar{right:190px;bottom:max(18px,env(safe-area-inset-bottom));left:178px;display:flex;gap:8px;justify-content:center;overflow-x:auto;padding:8px;transform:none;scrollbar-width:none;pointer-events:auto}.touch-mode .hotbar::-webkit-scrollbar{display:none}.touch-mode .hotbar-slot{flex:0 0 72px;min-height:66px;border-width:2px;font-size:11px}.touch-mode .block-swatch{width:28px;height:28px}@media(pointer:coarse)and (orientation:portrait){.app-shell:after{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;z-index:24;border-radius:8px;background:#fff2b6e6;color:#704b00;content:"建议横屏游玩，体验更好。";font-size:13px;font-weight:900;padding:8px 12px;pointer-events:none;transform:translate(-50%);white-space:nowrap}.mobile-joystick{width:118px;height:118px}.mobile-action-buttons{grid-template-columns:repeat(2,58px)}.mobile-action-button{min-width:58px;min-height:54px}}.touch-mode.portrait-mode .app-shell:after,.touch-mode.portrait-mode:after{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;z-index:24;border-radius:8px;background:#fff2b6e6;color:#704b00;content:"建议横屏游玩，体验更好。";font-size:13px;font-weight:900;padding:8px 12px;pointer-events:none;transform:translate(-50%);white-space:nowrap}.touch-mode.portrait-mode .mobile-joystick{width:118px;height:118px}.touch-mode.portrait-mode .mobile-action-buttons{grid-template-columns:repeat(2,58px)}.touch-mode.portrait-mode .mobile-action-button{min-width:58px;min-height:54px}.touch-mode.portrait-mode .hotbar{right:12px;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 130px);left:12px}