:root{color:#2f2418;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff4cf;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{overscroll-behavior:none;min-height:100svh;overflow:hidden}button,a{font-family:inherit}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #0e6f78}.app-shell{--ink:#2f2418;--ink-soft:#5a422a;--line:#4f351d;--paper:#fff6d8;--paper-soft:#fff6d8e6;--sun:#ffd24f;--aqua:#74d5dd;--mint:#bfe9b6;--ease-out-quart:cubic-bezier(.25, 1, .5, 1);min-height:100svh;color:var(--ink);background:linear-gradient(135deg,#fff1c7 0%,#d8f4ff 50%,#e4f2c8 100%);place-items:center;padding:18px;display:grid}.game-stage{aspect-ratio:16/9;border:3px solid var(--line);touch-action:none;width:min(100%,1180px);animation:stage-in .42s var(--ease-out-quart) both;background:#dff5ff;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 26px 70px #4635192e,inset 0 0 0 1px #ffffff3d}.game-host{z-index:1;position:absolute;inset:0}.game-host canvas{display:block}.lobby-layer,.result-layer{z-index:8;position:absolute;inset:0}.lobby-layer{background:#fff2ce;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);display:grid}.lobby-art{background:#f7dc9f;min-width:0;overflow:hidden}.lobby-art img{object-fit:cover;width:100%;height:100%;display:block}.lobby-panel{z-index:1;background:linear-gradient(#fffae6f5,#ffefbef5);border-left:3px solid #4f351d52;grid-template-rows:auto auto minmax(0,1fr) auto;gap:18px;padding:clamp(28px,4vw,48px);display:grid;position:relative}.kicker{letter-spacing:0;color:#0c6f78;text-transform:uppercase;margin:0 0 8px;font-size:15px;font-weight:800}h1,h2,p{margin:0}h1{letter-spacing:0;color:#3b2815;text-shadow:0 2px #ffffff61;font-size:clamp(44px,6vw,78px);line-height:.96}.lobby-subtitle{color:var(--ink-soft);margin-top:14px;font-size:clamp(17px,2.1vw,23px);font-weight:650;line-height:1.45}.lobby-tabs{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.lobby-tabs button,.primary-action,.control-button,.sound-toggle,.result-restart{border:2px solid var(--line);font:inherit;color:#312011;background:var(--paper-soft);box-shadow:0 5px 0 var(--line);cursor:pointer;touch-action:none;transition:transform .14s var(--ease-out-quart), box-shadow .14s var(--ease-out-quart), filter .18s var(--ease-out-quart);border-radius:8px;font-weight:850}.lobby-tabs button{min-height:44px;padding:8px 10px 10px;font-size:15px}.lobby-tabs button.is-active{background:var(--aqua)}.primary-action:hover,.lobby-tabs button:hover,.control-button:hover,.sound-toggle:hover,.result-restart:hover{filter:saturate(1.05)brightness(1.02);transform:translateY(-1px)}.primary-action:active,.lobby-tabs button:active,.control-button:active,.sound-toggle:active,.result-restart:active{box-shadow:0 2px 0 var(--line);transform:translateY(3px)}.lobby-content{align-content:start;min-height:0;display:grid}.lobby-stats{gap:10px;display:grid}.lobby-stats span,.about-card p,.shortcut-row{color:var(--ink-soft);background:#fffdf4c7;border:2px solid #4f351d3d;border-radius:8px}.lobby-stats span{padding:13px 14px;font-size:18px;font-weight:850}.shortcut-card{gap:9px;display:grid}.shortcut-row{grid-template-columns:68px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;font-size:15px;font-weight:850;display:grid}.shortcut-row kbd,.shortcut-strip span{color:var(--ink);font:inherit;background:#ffffffd1;border:1px solid #4f351d47;border-bottom-width:3px;border-radius:6px}.shortcut-row kbd{text-align:center;min-width:0;padding:5px 8px}.shortcut-row small{color:#0c6f78;font-size:13px;font-weight:900}.about-card{gap:10px;display:grid}.about-card p{padding:14px;font-size:17px;font-weight:700;line-height:1.5}.primary-action{background:var(--sun);min-height:56px;padding:13px 24px 15px;font-size:21px}.primary-action--lobby{align-self:end;width:100%}.sound-toggle{z-index:12;box-shadow:0 4px 0 var(--line);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffae5e6;padding:7px 10px 8px;font-size:14px;position:absolute;top:18px;right:22px}.sound-toggle--playing{top:auto;bottom:88px}.shortcut-strip{z-index:7;pointer-events:none;max-width:min(440px,100% - 44px);animation:fade-in .36s var(--ease-out-quart) .28s both;flex-wrap:wrap;justify-content:flex-end;gap:7px;display:flex;position:absolute;top:18px;right:22px}.shortcut-strip span{background:#fffae5b8;padding:5px 8px 6px;font-size:13px;line-height:1;box-shadow:0 8px 18px #4f351d14}.touch-controls{z-index:7;pointer-events:none;justify-content:space-between;align-items:end;padding:0 22px;display:flex;position:absolute;inset:auto 0 18px}.move-pad,.action-pad{pointer-events:auto;gap:10px;display:flex}.control-button{-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff4d0e0;width:62px;height:58px;font-size:24px}.action-pad .control-button{background:#68d7e1e6;font-size:19px}.result-layer{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#251b104d;place-items:center;padding:26px;display:grid}.result-card-stage{width:min(940px,100%);animation:result-in .32s var(--ease-out-quart) both;justify-items:center;gap:14px;display:grid}.result-image{aspect-ratio:16/9;object-fit:contain;border:3px solid var(--line);background:#fff6d8;border-radius:8px;width:100%;display:block;box-shadow:0 18px 54px #2a1b0a52}.result-loading{aspect-ratio:16/9;border:3px solid var(--line);background:var(--paper);width:min(780px,100%);color:var(--ink);border-radius:8px;place-items:center;font-size:22px;font-weight:850;display:grid}.result-restart{background:var(--aqua);padding:10px 18px 12px;font-size:18px}@media (width<=880px){.lobby-layer{grid-template-rows:minmax(220px,46%) minmax(0,1fr);grid-template-columns:1fr}.lobby-panel{border-top:3px solid #4f351d52;border-left:0}}@media (orientation:portrait) and (width<=720px){.app-shell{place-items:stretch stretch;min-height:100svh;padding:0;overflow:hidden}.game-stage{aspect-ratio:auto;width:100%;height:100svh;box-shadow:none;border:0;border-radius:0}.lobby-layer{background:#fff1c7;grid-template-rows:minmax(235px,38svh) minmax(0,1fr);overflow:auto}.lobby-panel{min-height:0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));gap:12px}.kicker{font-size:12px}h1{font-size:clamp(36px,12vw,48px)}.lobby-subtitle{margin-top:8px;font-size:15px}.lobby-tabs{gap:7px}.lobby-tabs button{min-height:42px;padding:7px 8px 9px;font-size:14px}.lobby-content{overflow:auto}.lobby-stats{grid-template-columns:1fr;gap:8px}.lobby-stats span,.about-card p{padding:10px 11px;font-size:15px}.shortcut-card{gap:7px}.shortcut-row{grid-template-columns:56px minmax(0,1fr);gap:8px;padding:7px 8px;font-size:14px}.shortcut-row small{display:none}.primary-action{min-height:52px;padding:11px 18px 13px;font-size:19px}.sound-toggle{padding:5px 8px 6px;font-size:12px;top:12px;right:12px}.game-stage--playing{background:linear-gradient(#dff5ff 0%,#fff1c7 58%,#d8f4ff 100%)}.game-stage--playing:before{content:"";z-index:0;opacity:.42;background:linear-gradient(#fff6d8ad,#d8f4ffd1),url(/assets/ui/lobby-hero.webp) 50%/cover no-repeat;position:absolute;inset:0}.game-stage--playing .game-host{inset:calc(8px + env(safe-area-inset-top)) 8px auto;border:3px solid var(--line);background:#dff5ff;border-radius:8px;height:calc(56.25vw - 9px);overflow:hidden;box-shadow:0 12px 30px #46351929}.shortcut-strip{display:none}.touch-controls{inset:auto 0 calc(22px + env(safe-area-inset-bottom));padding:0 18px}.sound-toggle--playing{top:auto;right:18px;bottom:calc(104px + env(safe-area-inset-bottom))}.control-button{width:68px;height:64px;font-size:28px}.action-pad .control-button{font-size:20px}.move-pad,.action-pad{gap:9px}.result-layer{padding:14px}.result-card-stage{gap:12px}.result-restart{width:min(220px,100%);min-height:48px}}@media (orientation:landscape) and (height<=620px){.app-shell{place-items:stretch stretch;padding:0;overflow:hidden}.game-stage{aspect-ratio:auto;width:100%;height:100svh;box-shadow:none;border:0;border-radius:0}.lobby-panel{gap:12px;padding:20px 22px}h1{font-size:clamp(34px,7vw,58px)}.lobby-subtitle,.about-card p{font-size:15px}.primary-action{min-height:48px;font-size:18px}.touch-controls{padding:0 16px;bottom:10px}.sound-toggle--playing{bottom:78px}.control-button{width:54px;height:50px;font-size:22px}.action-pad .control-button{font-size:17px}}@keyframes stage-in{0%{opacity:0;transform:translateY(10px)scale(.992)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes result-in{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}