:root{font-family:Pretendard,Noto Sans KR,Arial,sans-serif;color:#233a32;background:#f5f4ed;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;min-height:44px;min-width:44px;border-radius:10px}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bd6731;outline-offset:2px}.app-shell{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;color:#f1f0d9;background:#243d36}.topbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));z-index:3;display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:8px;pointer-events:none}.topbar button{pointer-events:auto}.brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:1px}.brand small{display:block;font-size:8px;letter-spacing:2px;font-weight:500;margin-top:4px}.brand-symbol{font-size:36px;color:#e5c49b;transform:rotate(-32deg)}.settings-button{background:#e8ebdf;color:#35553f;padding:0 12px;font-size:12px}.settings-button span{margin-left:8px;font-size:20px}.mobile-game,.play-layout,.court-panel{position:absolute;inset:0}.session-hud{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 54px);left:max(12px,env(safe-area-inset-left));z-index:2;display:flex;align-items:center;flex-wrap:wrap;max-width:calc(54% - 24px);gap:10px;pointer-events:none;border-radius:12px;padding:8px 12px;background:#17372ccf}.eyebrow{display:block;font-size:10px;color:#d0dbc4;margin-bottom:2px}.session-hud strong{font-size:28px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.goal{font-size:10px;color:#d0dbc4}.mode-pill{font-size:10px;border:1px solid #cbd4c1;border-radius:20px;padding:7px 10px}.court-panel{background:#243d36;overflow:hidden;isolation:isolate}.canvas-wrap{position:absolute;inset:0;z-index:-1}.court-bottom{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;gap:8px;color:#d0dbc4;font-size:9px;pointer-events:none}.court-bottom{bottom:max(14px,env(safe-area-inset-bottom))}.court-bottom i{display:inline-block;width:5px;height:5px;background:#eb8f67;border-radius:50%;margin:0 5px}.court-message{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:86%;max-width:320px;border:1px solid #93b09240;padding:18px 12px;border-radius:12px;color:#f1f0d9;background:#17372ce8;text-align:center;pointer-events:none}.court-message strong{font-size:15px}.court-message p{font-size:11px;line-height:1.6;margin:8px 0 0;color:#d1d9c4}.message-dot{display:block;width:5px;height:5px;background:#d7cb8f;border-radius:50%;margin:0 auto 10px}.control-dock{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 54px);right:max(12px,env(safe-area-inset-right));z-index:3;max-width:46%}.racket-drag{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.racket-grip{position:absolute;left:-22px;top:-22px;width:44px;height:44px;pointer-events:none}.racket-grip:before{content:"";position:absolute;inset:11px;border:1px dashed #fff4c980;border-radius:50%}.racket-drag[data-active=true] .racket-grip:before{border-color:#fff4c9}.racket-drag[aria-disabled=true] .racket-grip,.racket-drag[aria-disabled=true] .drag-hint{visibility:hidden}.drag-hint{position:absolute;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 24px);left:0;right:0;text-align:center;color:#e1e7d5;font-size:12px;pointer-events:none}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;width:100%;height:48px;padding:0 18px;background:#355c42;color:#fffde9;font-size:13px}.primary-button span{font-size:19px}.settings-sheet{margin:calc(max(8px,env(safe-area-inset-top)) + 54px) auto auto;width:min(100%,520px);max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - 62px);border:1px solid #d2dac8;border-radius:16px;padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));color:#233a32;background:#f9f9f0;overflow:auto}.settings-sheet::backdrop{background:#0d261bb0}.sheet-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}h1{font-size:21px;margin:0}.settings-sheet p{font-size:13px;line-height:1.8;color:#617258}.sensitivity{margin:20px 0}.sensitivity label{display:flex;justify-content:space-between;font-size:13px}.sensitivity input{width:100%;min-height:44px;margin:8px 0 0;accent-color:#557745}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-size:13px;margin-bottom:8px}.side-options{display:flex;gap:8px}.secondary-button{width:100%;padding:10px;background:#e8eddf;color:#3f6138;font-size:12px}.secondary-button[aria-pressed=true]{background:#355c42;color:#fffde9}.diagnostics{border-top:1px solid #d7dfcc;padding-top:8px}.diagnostics summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:12px}.diagnostics>button{margin-top:8px}.diagnostics dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px}.diagnostics dd{margin:0;text-align:right;overflow-wrap:anywhere}.canvas-fallback{padding:40px 20px;color:#f1f0d9;font-size:14px;text-align:center}@media(orientation:landscape){.session-hud{top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%)}.session-hud .eyebrow,.session-hud .goal{display:none}.court-message{padding:12px}}@media(max-width:360px){.session-hud{gap:6px;padding:8px}.mode-pill{padding:7px 6px}.control-dock .primary-button{padding:0 10px;font-size:12px}}.recovery-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.court-panel:not([data-graphics=ready]) .canvas-wrap{visibility:hidden}.scoreboard{display:flex;align-items:center;gap:.65rem;white-space:nowrap;font-size:12px}.scoreboard>span{display:inline-flex;align-items:baseline;gap:.35rem}.scoreboard .score-separator{opacity:.5}.match-hud{min-width:0}.match-progress,.point-notice{font-size:10px;line-height:1.5;margin-bottom:6px}.point-notice{color:#ffe2a4;margin:6px 0 0}.match-summary{pointer-events:auto;max-height:calc(100dvh - 160px);overflow:auto;top:calc(50% + 40px)}.set-history{width:100%;margin-top:12px;border-collapse:collapse;font-size:12px}.set-history th,.set-history td{padding:5px;border-bottom:1px solid #93b09240;text-align:center}.serve-hint{position:absolute;left:50%;bottom:max(4px,env(safe-area-inset-bottom));transform:translate(-50%);width:max-content;max-width:calc(100% - (2*max(12px,env(safe-area-inset-left),env(safe-area-inset-right))));padding:4px 10px;border-radius:8px;background:#183d32df;color:#f4f0dc;font-size:12px;line-height:16px;text-align:center;pointer-events:none}.audio-notice{position:absolute;z-index:5;top:max(115px,calc(env(safe-area-inset-top) + 115px));left:12px;max-width:calc(100% - 24px);min-height:44px;padding:8px 12px;border-radius:12px;background:#183d32;color:#fff2d3;border:1px solid #b7c9ad;font-size:12px}select{width:100%;min-height:44px;padding:8px;border-radius:8px;font:inherit;color:#172b3a;background:#fff}.match-records{margin-top:24px;border-top:1px solid #718278;padding-top:16px}.match-records h2{font-size:1rem}.match-records dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px}.match-records dd{margin:0;text-align:right}.match-recent summary{min-height:44px;padding:12px 0;cursor:pointer}.match-recent ol{padding-left:20px}.match-recent li{margin-bottom:16px}.match-recent li span{display:block;font-size:.8rem;margin-top:5px;overflow-wrap:anywhere}.joystick-controls{position:absolute;inset:0;pointer-events:none}.movement-stick,.strike-button{position:absolute;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.movement-stick{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 28px);left:max(24px,env(safe-area-inset-left));width:112px;height:112px;border:1px solid #bbd4cf70;border-radius:50%;background:#102c3dc9;display:grid;place-items:center}.stick-cross{width:76px;height:76px;opacity:.35;background:linear-gradient(#c1dcd7,#c1dcd7) center / 1px 100% no-repeat,linear-gradient(#c1dcd7,#c1dcd7) center / 100% 1px no-repeat}.stick-knob{position:absolute;width:44px;height:44px;border-radius:50%;background:#e4eadb;border:3px solid #779c91;box-shadow:0 4px 14px #0005}.stick-label{position:absolute;bottom:-24px;font-size:12px;color:#e1e7d5}.shot-buttons{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 32px);width:140px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.strike-button{position:relative;width:66px;height:52px;border-radius:14px;background:#dbbd88;color:#172a30;border:2px solid #f0d9af;font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}.strike-button span{font-size:10px;line-height:1}.strike-button[data-pressed=true]{background:#f7deaf;transform:scale(.95)}.strike-feedback{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 152px);max-width:140px;text-align:right;font-size:11px;line-height:1.3;color:#f0d9af;text-shadow:0 1px 4px #102c3d}.joystick-controls[aria-disabled=true] .movement-stick,.joystick-controls[aria-disabled=true] .strike-button{opacity:.4}.joystick-controls[aria-disabled=true] .racket-grip{visibility:hidden}@media(orientation:landscape)and (max-height:500px){.movement-stick{width:92px;height:92px;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 24px)}}.court-bottom>span:first-child{position:absolute;left:50%;transform:translate(-50%)}.court-bottom>span:last-child{margin-left:auto}.has-caption .court-bottom,.has-caption .stick-label{visibility:hidden}.has-caption .movement-stick{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 40px)}.has-caption .shot-buttons{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 44px)}.has-caption .strike-feedback{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 164px)}.has-caption .desktop-controls-hint{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 44px)}.court-panel:focus{outline:none}.desktop-controls-hint{display:none;position:absolute;bottom:32px;left:50%;transform:translate(-50%);margin:0;padding:6px 10px;border-radius:8px;background:#142536d9;color:#e1e7d5;font-size:12px;pointer-events:none;white-space:nowrap}@media(hover:hover)and (pointer:fine)and (min-width:800px){.desktop-controls-hint{display:block}}.match-indicators{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.spin-hint{font-size:10px;color:#f0d9af}.strike-button[data-shot=cut]{background:#b8d3c7;border-color:#d1e9df}.strike-button[data-shot=drive]{background:#ecc78c}.strike-button[data-shot=smash]{background:#e6a18c;border-color:#f4c6b5}.strike-button[data-pressed=true]{filter:brightness(1.15)}.strike-button[data-active=true]{box-shadow:0 0 0 2px #fff4d5}@media(hover:hover)and (pointer:fine)and (min-width:800px)and (max-width:1100px){.desktop-controls-hint{font-size:10px}}.spin-response{display:block;margin-top:3px;font-size:10px;line-height:1.35;max-width:180px;word-break:keep-all}