.mobile-menu,.mobile-gesture-pad{display:none}
body.mobile-ui{font-size:16px;min-width:320px}
.mobile-ui main{padding:0 12px;max-width:100%}
.mobile-ui .header{padding:10px 14px;gap:10px;min-height:60px}.mobile-ui .brand{gap:8px}.mobile-ui .brand>span{font-size:20px}.mobile-ui .brand small{display:none}.mobile-ui .brand img{width:34px;height:34px}.mobile-ui .header nav{display:none}.mobile-ui .header-actions{gap:8px}.mobile-ui .online-pill{font-size:12px;padding:8px 10px}.mobile-ui .header-actions .icon-button{width:44px;height:44px;font-size:24px}
.mobile-ui .intro{padding:12px 2px 14px}.mobile-ui .intro h1{font-size:25px;letter-spacing:-1px;line-height:1.3;margin:0}.mobile-ui .intro h1 svg,.mobile-ui .intro p,.mobile-ui .intro .eyebrow,.mobile-ui .intro-stamp{display:none}
.mobile-ui .play-layout{display:block}.mobile-ui .court-card{border-radius:16px;overflow:hidden}.mobile-ui .court-toolbar{display:none}.mobile-ui #touch-toggle,.mobile-ui #fullscreen-button,.mobile-ui .keyboard-guide,.mobile-ui #practice-hero,.mobile-ui .gesture-guide{display:none!important}
.mobile-ui .scoreboard{padding:13px 12px;gap:9px;margin:0;min-height:66px}.mobile-ui .score-player{gap:7px;min-width:0}.mobile-ui .score-player>div{min-width:0}.mobile-ui .score-player strong{font-size:16px;line-height:1.4;max-width:115px;font-weight:800}.mobile-ui .score-player small{font-size:12px;line-height:1.4;color:#596651;max-width:125px;margin-top:3px}.mobile-ui .score-player>b{font-size:30px;min-width:23px}.mobile-ui .score-vs{font-size:12px;color:#67735b}.mobile-ui .player-dot{width:26px;height:26px}.mobile-ui .player-dot:after{font-size:10px;left:6px;top:9px}.mobile-ui .player-dot:before{top:5px;height:4px}
.mobile-ui .court-bottom{margin:0;padding:0 12px 12px;display:flex;flex-direction:column;align-items:stretch;gap:10px;background:transparent;border:0;justify-content:flex-start}
.mobile-ui .court-bottom .difficulty-picker{margin:0;padding:8px 10px 10px;border-radius:12px;width:100%;order:0}.mobile-ui .difficulty-picker legend{font-size:14px;font-weight:800}.mobile-ui .difficulty-options{gap:8px}.mobile-ui .difficulty-options span{font-size:16px;min-height:44px;border-radius:9px}
.mobile-ui #practice-button{display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 16px;border:2px solid #294b38;border-radius:12px;background:#365f49;color:#fffdf3;box-shadow:0 3px 0 #b7c7ac;font-size:18px;font-weight:900;margin:0;width:100%;order:1}
.mobile-ui .mobile-modes-open{display:flex;justify-content:center;align-items:center;min-height:48px;width:100%;padding:12px;border-radius:12px;background:#f4eddb;border:1px solid #d7c99e;color:#4c543f;font-size:16px;font-weight:800;order:2}
.mobile-ui .canvas-wrap{margin:0;border:0;border-radius:0;aspect-ratio:1.6;height:auto;display:block;touch-action:pan-y}.mobile-ui .canvas-wrap canvas{width:100%;height:auto;max-width:100%;aspect-ratio:1.6;touch-action:pan-y}.mobile-ui .court-overlay{padding-top:10%;justify-content:flex-start}.mobile-ui .court-overlay h2{font-size:24px;letter-spacing:-1px;line-height:1.35;margin:10px 0}.mobile-ui .court-overlay p{font-size:14px;line-height:1.6;color:#4d6244}.mobile-ui .court-overlay .overlay-tag{font-size:12px;padding:5px 9px}.mobile-ui .court-corner{bottom:7px;left:8px;right:8px;gap:6px;justify-content:space-between;flex-wrap:nowrap}.mobile-ui .court-corner>span{font-size:11px;padding:4px 7px;color:#43543b}.mobile-ui #court-status,.mobile-ui #ping-label{display:none}.mobile-ui #rally-label{font-size:11px;margin-left:auto}
.mobile-ui .court-actions{display:none}.mobile-ui .court-ready{font-size:18px;min-height:52px;margin:12px;padding:12px}.mobile-ui .below-court{font-size:16px;padding:14px 16px;gap:8px;margin-top:12px}.mobile-ui .below-court>span+span{font-size:16px;line-height:1.65}
.mobile-ui #room-panel,.mobile-ui .detail-card{padding:18px;margin-top:16px}.mobile-ui .detail-heading h2{font-size:22px;line-height:1.4}.mobile-ui .eyebrow{font-size:13px}.mobile-ui .invite-bar{padding:14px 12px;gap:10px;flex-wrap:wrap}.mobile-ui .invite-bar small{font-size:13px}.mobile-ui .invite-bar strong{font-size:27px;letter-spacing:3px}.mobile-ui .invite-bar .button{min-height:48px;font-size:16px;padding:12px 14px}.mobile-ui .roster-player{font-size:15px;padding:12px 10px;gap:8px}.mobile-ui .roster-player .roster-status{font-size:13px;line-height:1.4}.mobile-ui .room-actions{gap:12px;flex-wrap:wrap}.mobile-ui .room-actions p{font-size:14px;line-height:1.6}.mobile-ui .room-actions .button{font-size:17px;min-height:50px;padding:12px 18px}.mobile-ui .king-heading,.mobile-ui .king-panel h3{font-size:16px}.mobile-ui .king-panel li,.mobile-ui .king-heading small,.mobile-ui .cheer-controls span{font-size:14px}.mobile-ui .cheer-controls button{min-width:44px;min-height:44px;font-size:24px}
.mobile-ui .cup-empty,.mobile-ui .little-rules{display:none}.mobile-ui .cup-section{margin-top:16px}.mobile-ui .cup-lobby strong,.mobile-ui .cup-player{font-size:15px}.mobile-ui .cup-lobby p{font-size:14px}.mobile-ui .cup-action-buttons .button,.mobile-ui .cup-action-buttons .text-button{font-size:16px;min-height:48px}.mobile-ui .bracket-round{min-width:200px}.mobile-ui .bracket-round h3{font-size:17px}.mobile-ui .bracket-match{font-size:15px}.mobile-ui .bracket-match small{font-size:13px}.mobile-ui footer{padding:18px 14px;font-size:14px}.mobile-ui .footer-brand,.mobile-ui footer .text-button{font-size:14px;min-height:44px}
/* Live match: court, score and two thumb-sized actions. */
body.mobile-ui.mobile-focused{overflow:hidden;overscroll-behavior:none}
.mobile-focused .header,.mobile-focused .intro,.mobile-focused .below-court,.mobile-focused #room-panel,.mobile-focused .cup-section,.mobile-focused .little-rules,.mobile-focused footer,.mobile-focused #connection-banner{display:none!important}
.mobile-focused #court-card{position:fixed;inset:0;z-index:50;width:100%;height:var(--mobile-app-height,100dvh);display:flex;flex-direction:column;gap:0;border:0;border-radius:0;margin:0;box-shadow:none;background:#fbf8ef;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
.mobile-focused .court-toolbar{display:contents}.mobile-focused .court-label,.mobile-focused #room-kind-label,.mobile-focused .court-bottom{display:none!important}
.mobile-focused .scoreboard{order:0;flex-shrink:0;padding:10px 12px;min-height:64px;background:#fffdf7;border-bottom:1px solid #d9e0cc}
.mobile-focused .canvas-wrap{order:1;flex:1;min-height:0;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:0;background:#e7eee0;touch-action:none;overflow:hidden}
.mobile-focused .canvas-wrap canvas{flex-shrink:0;display:block;width:100%;height:auto;max-height:none;touch-action:none;box-shadow:0 1px 0 #aebfa3}
.mobile-focused .court-corner{top:8px;bottom:auto;left:8px;right:8px;z-index:2}.mobile-focused .court-corner>span{background:#fffdf0e6;border-color:#ccd7bb}.mobile-focused #rally-label{font-size:12px}
.mobile-focused .court-overlay{top:0;bottom:auto;height:auto;aspect-ratio:1.6;justify-content:center;padding:16px 18px;z-index:3}.mobile-focused .court-overlay h2{font-size:24px;line-height:1.35;margin:6px 0;color:#3d5737}.mobile-focused .court-overlay p{font-size:15px;line-height:1.6;max-width:100%;color:#4d6244}.mobile-focused .court-overlay .overlay-tag{display:none}
.mobile-focused .mobile-gesture-pad{display:flex;pointer-events:none;flex:1;min-height:110px;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 14px;background:radial-gradient(ellipse at center,#fafbf1 0,#e7eee0 75%);border-top:1px solid #cbd6bf;color:#42583b;text-align:center;user-select:none;-webkit-user-select:none}
.gesture-symbols{display:flex;align-items:center;justify-content:center;gap:38px;opacity:.55;font-size:44px;font-weight:800;line-height:1}.mobile-gesture-pad strong{font-size:17px;line-height:1.5;letter-spacing:-.4px}.mobile-gesture-pad p{font-size:15px;line-height:1.5;color:#607253}.mobile-gesture-pad small{font-size:13px;line-height:1.5;color:#6b795e}
.mobile-focused .court-actions{display:grid;grid-template-columns:1fr 1fr;order:3;flex-shrink:0;gap:12px;width:100%;margin:0;padding:10px 12px;background:#fbf8ef;border-top:1px solid #d5dec8;box-sizing:border-box}
.mobile-focused .court-actions>button{min-width:0;min-height:52px;font-size:16px;font-weight:800;padding:12px 8px;border-radius:12px;white-space:normal;line-height:1.35;box-shadow:none}.mobile-focused #pause-game{order:0;background:#e2ebf8;border-color:#a3b8d4;color:#304d77}.mobile-focused #leave-game{order:1;background:#fff0e8;border-color:#d9a18b;color:#973f2d}.mobile-focused #pause-game[hidden]+#leave-game{grid-column:1/-1}
.mobile-focused .court-ready{order:2;flex-shrink:0;margin:10px 12px 0;padding:12px;min-height:52px;font-size:18px;background:#365f49;color:#fffdf3;border-color:#294b38;box-shadow:none}
.mobile-ui .dialog{width:calc(100% - 32px);max-width:420px;padding:26px 22px;max-height:calc(var(--mobile-app-height,100dvh) - 32px);font-size:16px;border-radius:18px}.mobile-ui .dialog h2{font-size:24px;line-height:1.4}.mobile-ui .dialog>p,.mobile-ui .dialog label,.mobile-ui .dialog .muted,.mobile-ui .help-grid p{font-size:15px;line-height:1.7}.mobile-ui .dialog input,.mobile-ui .dialog select{font-size:16px;min-height:48px}.mobile-ui .dialog .button{font-size:17px;min-height:52px;padding:12px 14px}.mobile-ui .confirm-actions{gap:12px;margin-top:24px}.mobile-ui .confirm-actions .button{font-size:17px;min-height:52px}
/* Existing mode/profile controls move into a single native sheet. */
.mobile-ui .mobile-menu[open]{display:flex;flex-direction:column;width:100%;max-width:600px;margin:auto auto 0;padding:0;border:0;border-radius:22px 22px 0 0;max-height:calc(var(--mobile-app-height,100dvh) - 16px);background:#fbf8ef;color:#35462f;overflow:hidden;box-shadow:0 -8px 40px #24351f30}
.mobile-menu::backdrop{background:#26352380}.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid #dce3d0;flex-shrink:0}.mobile-menu-heading h2{font-size:21px;line-height:1.4;margin:0}.mobile-menu-heading button{min-width:76px;min-height:44px;padding:10px 14px;border:1px solid #bacbb0;border-radius:10px;background:#e7efdf;color:#3e5c37;font-size:16px;font-weight:800}
#mobile-menu-content{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 8px;min-height:0}.mobile-menu .sidebar{display:flex;flex-direction:column;gap:12px}.mobile-menu .profile-card{order:0;padding:16px;border-radius:14px;display:block;background:#f0f2e5}.mobile-menu .profile-card .section-kicker{font-size:13px;color:#647459}.mobile-menu .profile-card>label{font-size:17px;line-height:1.4;margin-bottom:10px}.mobile-menu .nickname-row{padding:8px 8px 8px 12px;gap:8px}.mobile-menu .nickname-row input{font-size:16px;min-height:44px}.mobile-menu .nickname-row .icon-button{width:44px;height:44px;font-size:20px;flex-shrink:0}.mobile-menu .avatar-choices{gap:10px;margin-top:10px}.mobile-menu .avatar-choices button{font-size:15px;min-height:44px;padding:10px 12px;background:#fffdf5;border:1px solid #d3dbc5}.mobile-menu .avatar-choices button.selected{border:2px solid #72926a;background:#e1ecd9}.mobile-menu .mode-heading{order:1;margin:8px 2px 0}.mobile-menu .mode-heading h2{font-size:18px}.mobile-menu .mode-heading>span{font-size:13px;color:#6a785e}
.mobile-menu .mode-card{order:2;display:flex;flex-direction:row;align-items:center;min-height:92px;padding:16px;gap:14px;border-radius:14px;border-width:1px}.mobile-menu .mode-card>div{width:auto;flex:1}.mobile-menu .mode-icon{position:static;width:44px;height:44px;font-size:28px;border-radius:12px;flex-shrink:0}.mobile-menu .mode-kicker{font-size:13px;min-height:0;max-width:none;line-height:1.4;color:#56634d}.mobile-menu .mode-card h3{font-size:21px;margin:5px 0;letter-spacing:-.5px}.mobile-menu .mode-card p{font-size:14px;color:#58644e;line-height:1.5}.mobile-menu .mode-arrow{position:static;font-size:24px;margin-left:0}.mobile-menu .mode-computer{order:2}.mobile-menu .join-code-button{order:3;font-size:15px;padding:12px 4px;min-height:48px}.mobile-menu .join-code-button strong{font-size:15px}.mobile-menu .sidebar-note{display:none}
#mobile-help{flex-shrink:0;width:100%;min-height:52px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));font-size:16px;font-weight:700;color:#4e663f;border-top:1px solid #dce3d0;background:#eef2e6}
@media(orientation:landscape) and (max-height:600px){.mobile-focused .scoreboard{min-height:44px;padding:5px 14px}.mobile-focused .score-player strong{font-size:15px;max-width:210px}.mobile-focused .score-player small{display:none}.mobile-focused .score-player>b{font-size:27px}.mobile-focused .mobile-gesture-pad{display:none}.mobile-focused .canvas-wrap{justify-content:center}.mobile-focused .court-actions{padding:5px 12px;gap:12px}.mobile-focused .court-actions>button{min-height:44px;padding:8px 14px;font-size:16px}.mobile-focused .court-overlay{inset:0;aspect-ratio:auto;height:100%;padding:12px}.mobile-focused .court-ready{min-height:44px;padding:8px 12px;margin-top:6px}.mobile-ui .mobile-menu[open]{max-width:680px;max-height:calc(var(--mobile-app-height,100dvh) - 8px)}.mobile-menu-heading{padding:8px 16px}#mobile-help{min-height:44px;padding-top:10px;padding-bottom:10px}}
@media(orientation:landscape) and (max-height:600px){
 .mobile-ui.mobile-focused.mobile-side-actions .court-actions{position:absolute;top:44px;bottom:0;left:env(safe-area-inset-left);right:env(safe-area-inset-right);width:auto;display:block;padding:0;border:0;background:transparent;z-index:8;pointer-events:none}
 .mobile-ui.mobile-focused.mobile-side-actions .court-actions>button{position:absolute;bottom:14px;width:var(--mobile-side-button-width,90px);min-height:64px;max-height:150px;padding:10px 6px;font-size:15px;line-height:1.45;pointer-events:auto;word-break:normal;border-radius:12px;grid-column:auto}
 .mobile-ui.mobile-focused.mobile-side-actions #pause-game{left:8px}.mobile-ui.mobile-focused.mobile-side-actions #leave-game{right:8px}
 .mobile-ui.mobile-focused.mobile-side-actions .court-ready{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:min(330px,45vw);margin:0;z-index:8}
}
.mobile-ui button,.mobile-ui a,.mobile-ui .difficulty-options label{touch-action:manipulation}
.mobile-ui .mode-card:hover{transform:none}
.mobile-ui dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#26352380}
.mobile-ui .dialog>p,.mobile-ui .help-grid p{color:#4c5e42}
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-toolbar{display:flex;align-items:center;padding:10px 12px 0;gap:10px}
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-label{display:none}
.mobile-ui.mobile-has-room:not(.mobile-focused) #room-kind-label{font-size:13px;padding:6px 9px;color:#4a5f40}
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-actions{display:flex;margin-left:auto}
.mobile-ui.mobile-has-room:not(.mobile-focused) #leave-game{font-size:16px;min-height:44px;padding:10px 14px}
.mobile-focused.mobile-disconnected #connection-banner{display:block!important;position:fixed;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;z-index:80;margin:0;padding:12px 14px;font-size:15px;line-height:1.5;box-shadow:0 3px 15px #313d2526}

/* Waiting is an invitation screen; show one preparation action and keep the link in view. */
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-bottom .difficulty-picker,.mobile-ui.mobile-has-room:not(.mobile-focused) #practice-button{display:none}
.mobile-ui.mobile-waiting .canvas-wrap,.mobile-ui.mobile-waiting #court-ready,.mobile-ui.mobile-waiting .below-court{display:none!important}
.mobile-ui.mobile-waiting .court-bottom{padding-bottom:12px}
.mobile-ui.mobile-waiting #room-panel{margin-top:12px;padding:14px}
.mobile-ui.mobile-waiting .detail-heading h2{font-size:21px;margin:3px 0 10px}
.mobile-ui.mobile-waiting .room-roster{margin-top:12px}
.mobile-ui.mobile-waiting .room-actions{margin-top:12px}

.mobile-ui.mobile-waiting #room-roster{display:none}

@media(orientation:landscape) and (max-width:740px){.mobile-ui.mobile-focused.mobile-side-actions .court-actions>button{padding:10px 3px;font-size:14px;word-break:keep-all;overflow-wrap:normal}}

#touch-indicator{display:none;pointer-events:none}
.mobile-focused #touch-indicator.active{display:grid;place-items:center;position:fixed;left:0;top:0;width:50px;height:50px;border:2px solid #527c4cb3;border-radius:50%;background:#ffffec88;color:#355d31;box-shadow:0 0 0 7px #c8d6ad40;z-index:7;will-change:transform;font-size:27px;font-weight:900;line-height:1;pointer-events:none}
.mobile-focused #touch-indicator.jumped{background:#fff0b3bb;border-color:#b78428;color:#8a5d12;box-shadow:0 0 0 11px #f7d97950}
.mobile-focused #canvas-wrap,.mobile-focused #canvas-wrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Switch and match actions share one mobile top row. */
.mobile-input-bar{display:none}
.mobile-ui .mobile-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #dce3d0;background:#fbf8ef;flex-shrink:0}
.mobile-ui #keypad-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 13px;border:2px solid #809a6e;border-radius:12px;font-size:15px;font-weight:900;white-space:nowrap;background:#e3efda;color:#31542e;touch-action:manipulation}
.mobile-ui #keypad-toggle[aria-checked=false]{background:#fffaf0;border-color:#b1b99e;color:#59644c}
.mobile-ui .mobile-input-bar .court-actions{display:flex;position:static!important;inset:auto!important;width:auto!important;margin:0 0 0 auto;padding:0;border:0;gap:7px;background:none;pointer-events:auto}
.mobile-ui .mobile-input-bar .court-actions>button{position:static!important;width:auto!important;min-height:44px;max-height:none;padding:10px 12px;font-size:14px;line-height:1.3;white-space:nowrap;word-break:keep-all;pointer-events:auto}
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-toolbar{padding:10px 12px 0}
.mobile-ui.mobile-has-room:not(.mobile-focused) .court-toolbar #room-kind-label{margin-bottom:6px}
.mobile-focused .mobile-input-bar{order:1;min-height:56px;border-top:0;border-bottom:1px solid #d5dec8}
.mobile-focused .canvas-wrap{order:2}
.mobile-focused .court-ready{order:4}
.mobile-focused.show-buttons .mobile-gesture-pad{display:none!important}
.mobile-focused:not(.show-buttons) #touch-controls{display:none!important}
.mobile-focused.show-buttons .canvas-wrap{flex:0 1 auto;height:auto;aspect-ratio:1.6}
.mobile-focused.show-buttons #touch-controls{display:flex!important;position:relative;order:3;flex:1;min-height:134px;align-items:center;justify-content:space-between;gap:12px;padding:38px 16px 18px;margin:0;background:#f6f5e9;border-top:1px solid #cbd6bf;touch-action:none;box-sizing:border-box}
.mobile-focused.show-buttons #touch-controls .touch-hint{position:absolute;top:10px;left:0;right:0;text-align:center;width:auto;padding:0;margin:0;font-size:15px;color:#4d6441;font-weight:800;line-height:1.4}
.mobile-focused.show-buttons #touch-controls .touch-hint small{display:none}
.mobile-focused.show-buttons #touch-controls>div{display:flex;gap:10px;order:0}
.mobile-focused.show-buttons #touch-controls button{height:88px;min-width:72px;font-size:32px;border-radius:20px;border-width:2px 2px 5px;touch-action:none;color:#34552e}
.mobile-focused.show-buttons #touch-controls .jump-button{height:100px;min-width:104px;font-size:23px;color:#855022;order:2}
.mobile-ui:not(.mobile-focused) #touch-controls{display:none!important}
@media(orientation:landscape) and (max-height:600px){
 .mobile-focused .mobile-input-bar{min-height:52px;padding:4px 12px}
 .mobile-focused .canvas-wrap,.mobile-focused.show-buttons .canvas-wrap{flex:1;min-height:0;aspect-ratio:auto;height:auto}
 .mobile-focused.show-buttons #touch-controls{position:absolute;inset:96px 0 0;display:block!important;min-height:0;margin:0;padding:0;border:0;background:none;pointer-events:none;z-index:7}
 .mobile-focused.show-buttons #touch-controls .touch-hint{display:none}
 .mobile-focused.show-buttons #touch-controls>div{position:absolute;left:8px;bottom:max(12px,env(safe-area-inset-bottom));width:calc((100% - var(--mobile-court-width,65vw))/2 - 16px);display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:160px;pointer-events:auto}
 .mobile-focused.show-buttons #touch-controls button{min-width:44px;width:100%;height:68px;font-size:27px;border-radius:14px;padding:8px 2px;pointer-events:auto}
 .mobile-focused.show-buttons #touch-controls .jump-button{position:absolute;right:8px;bottom:max(12px,env(safe-area-inset-bottom));width:calc((100% - var(--mobile-court-width,65vw))/2 - 16px);max-width:128px;min-width:60px;height:84px;font-size:20px}
}
@media(orientation:landscape) and (max-width:700px){.mobile-focused.show-buttons #touch-controls>div{grid-template-columns:1fr;max-width:80px}.mobile-focused.show-buttons #touch-controls button{height:50px}.mobile-focused.show-buttons #touch-controls .jump-button{height:72px}}
@media(max-width:360px){.mobile-ui .mobile-input-bar{gap:5px;padding-left:8px;padding-right:8px}.mobile-ui #keypad-toggle{padding:10px 8px;font-size:14px}.mobile-ui .mobile-input-bar .court-actions>button{padding:10px 8px;font-size:13px}.mobile-focused.show-buttons #touch-controls{padding-left:12px;padding-right:12px;gap:8px}.mobile-focused.show-buttons #touch-controls>div{gap:7px}.mobile-focused.show-buttons #touch-controls button{min-width:62px}.mobile-focused.show-buttons #touch-controls .jump-button{min-width:96px}}

.mobile-ui #touch-controls,.mobile-ui #touch-controls *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media(orientation:landscape) and (max-height:600px){.mobile-focused.show-buttons #touch-controls{inset:calc(96px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}}

.mobile-ui .mobile-input-bar .court-actions{display:flex!important}
.mobile-ui.mobile-focused .mobile-input-bar .court-actions>button{min-height:44px;padding:10px 12px;font-size:14px;white-space:nowrap}
.mobile-ui .match-settings{width:100%;gap:10px;padding:8px 10px 10px;order:-1}.mobile-ui .match-settings legend{font-size:15px}.mobile-ui .match-settings legend small{font-size:11px;margin-left:4px}.mobile-ui .match-settings label{font-size:13px}.mobile-ui .match-settings select{min-height:44px;font-size:16px;padding:8px 6px}.mobile-ui .match-summary{padding:0 12px 8px;font-size:14px}.mobile-focused .match-summary{order:0;flex-shrink:0;min-height:26px;margin:0;padding:3px 12px;background:#fffdf7;font-size:13px;text-align:center}.mobile-focused .scoreboard{border-bottom:0}.mobile-ui .start-feedback{font-size:15px}.mobile-focused #match-settings,.mobile-ui.mobile-has-room #match-settings{display:none}
@media(orientation:landscape) and (max-height:600px){.mobile-focused.show-buttons #touch-controls{top:calc(122px + env(safe-area-inset-top))}}
/* One continuous thumb stick replaces the two separate direction buttons. */
.mobile-focused.show-buttons #touch-controls{min-height:202px;padding-top:40px}
.mobile-focused.show-buttons #touch-controls>#move-pad{display:block;position:relative;left:auto;bottom:auto;flex:0 0 auto;width:144px;height:144px;max-width:none;margin:0;border:2px solid #a8bd95;border-radius:50%;background:#e2ebd8;box-shadow:inset 0 2px 8px #78945a24;touch-action:none;pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#move-pad .stick-arrow{position:absolute;top:calc(50% - 28px);font-size:40px;line-height:1;color:#788e68;font-weight:700;pointer-events:none}
#move-pad .stick-arrow.left{left:9px}#move-pad .stick-arrow.right{right:9px}
#move-pad .stick-knob{position:absolute;left:50%;top:46%;display:grid;place-items:center;width:46%;height:46%;max-width:66px;max-height:66px;border:2px solid #77985f;border-bottom-width:5px;border-radius:50%;background:#fbfff0;color:#4b703a;font-size:24px;font-weight:900;transform:translate3d(calc(-50% + var(--stick-x,0px)),-50%,0);transition:transform .12s ease-out,background .1s;pointer-events:none;box-shadow:0 3px 5px #4b663c1a}
#move-pad .stick-caption{position:absolute;bottom:9px;left:0;right:0;font-size:13px;font-weight:800;text-align:center;color:#526e42;pointer-events:none}
#move-pad[data-active=true]{border-color:#77985f;cursor:grabbing}
#move-pad[data-active=true] .stick-knob{transition:background .1s;will-change:transform;background:#f3ffdc}
#move-pad[data-direction=left] .stick-arrow.left,#move-pad[data-direction=right] .stick-arrow.right{color:#315d26}
@media(orientation:landscape) and (max-height:600px){
 .mobile-focused.show-buttons #touch-controls{min-height:0;padding:0}
 .mobile-focused.show-buttons #touch-controls>#move-pad{position:absolute;left:8px;bottom:12px;width:clamp(68px,calc((100% - var(--mobile-court-width,65vw))/2 - 16px),136px);height:auto;aspect-ratio:1;display:block;max-width:136px}
 #move-pad .stick-arrow{font-size:32px;top:calc(50% - 24px)}#move-pad .stick-arrow.left{left:4px}#move-pad .stick-arrow.right{right:4px}#move-pad .stick-caption{font-size:11px;bottom:6px}
}
@media(max-width:360px) and (orientation:portrait){.mobile-focused.show-buttons #touch-controls>#move-pad{width:128px;height:128px}.mobile-focused.show-buttons #touch-controls{padding-left:14px;padding-right:14px}}
/* Landscape: one 48px HUD row, the complete court below, thumb controls over its corners. */
@media(orientation:landscape){
 body.mobile-ui.mobile-focused #court-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px minmax(0,1fr);align-items:stretch;gap:0}
 .mobile-ui.mobile-focused .scoreboard{grid-column:1;grid-row:1;order:0;min-width:0;min-height:48px;padding:4px 8px;margin:0;gap:6px;border:0;background:#fffdf7}
 .mobile-ui.mobile-focused .player-dot{display:none}
 .mobile-ui.mobile-focused .score-player{gap:6px;min-width:0}.mobile-ui.mobile-focused .score-player>div{min-width:0}
 .mobile-ui.mobile-focused .score-player strong{font-size:14px;max-width:clamp(44px,9vw,100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-ui.mobile-focused .score-player small{display:none}
 .mobile-ui.mobile-focused .score-player>b{font-size:26px;min-width:24px}.mobile-ui.mobile-focused .score-vs{font-size:11px}
 .mobile-ui.mobile-focused .mobile-input-bar{grid-column:2;grid-row:1;order:0;min-height:48px;padding:2px 6px;gap:6px;margin:0;border:0;background:#fffdf7}
 .mobile-ui.mobile-focused #keypad-toggle{min-height:44px;font-size:13px;padding:8px 9px;border-radius:10px}
 .mobile-ui.mobile-focused .mobile-input-bar .court-actions{gap:6px}
 .mobile-ui.mobile-focused .mobile-input-bar .court-actions>button{min-height:44px;padding:8px 9px;font-size:13px;border-radius:10px}
 .mobile-ui.mobile-focused .canvas-wrap,.mobile-ui.mobile-focused.show-buttons .canvas-wrap{grid-column:1/-1;grid-row:2;order:0;display:flex;align-items:center;justify-content:center;flex:none;min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:auto;overflow:hidden;margin:0;border:0}
 .mobile-ui.mobile-focused .mobile-gesture-pad{display:none!important}
 .mobile-ui.mobile-focused .match-summary{position:absolute;top:calc(54px + env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);z-index:5;min-height:0;max-width:60%;padding:3px 9px;border-radius:12px;font-size:12px;line-height:16px;background:#fffdf0cf;white-space:nowrap;pointer-events:none}
 .mobile-ui.mobile-focused.show-buttons #touch-controls{position:absolute;inset:calc(48px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:block!important;min-height:0;max-height:none;height:auto;margin:0;padding:0;border:0;background:none;pointer-events:none;z-index:7}
 .mobile-ui.mobile-focused.show-buttons #touch-controls>#move-pad{position:absolute;left:14px;bottom:14px;width:clamp(96px,16vw,120px);height:auto;aspect-ratio:1;max-width:120px;display:block;pointer-events:auto;background:#e2ebd8c9;border-color:#819e69aa;box-shadow:inset 0 2px 6px #78945a16}
 .mobile-ui.mobile-focused.show-buttons #touch-controls .jump-button{position:absolute;right:16px;bottom:18px;left:auto;top:auto;width:88px;min-width:88px;max-width:88px;height:88px;padding:8px;border-radius:50%;font-size:19px;line-height:1.3;pointer-events:auto;background:#efc6a5d9;border-color:#b98155b3}
 .mobile-ui.mobile-focused #court-ready{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(280px,40vw);margin:0;min-height:44px;z-index:8}
}
/* Full-bleed landscape: the canvas covers the viewport; HUD and controls float over play. */
@media(orientation:landscape){
 body.mobile-ui.mobile-focused #court-card{background:#dcebdc;isolation:isolate}
 .mobile-ui.mobile-focused .canvas-wrap,.mobile-ui.mobile-focused.show-buttons .canvas-wrap{position:absolute;inset:0;grid-area:auto;z-index:0;width:100%;height:100%;padding:0;margin:0;border:0;display:block;aspect-ratio:auto}
 .mobile-ui.mobile-focused .canvas-wrap canvas{display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;box-shadow:none}
 body.mobile-ui.mobile-focused #court-card:before{content:'';position:absolute;top:0;left:0;right:0;height:calc(66px + env(safe-area-inset-top));background:linear-gradient(#fffdf0b8,#fffdf04d 72%,transparent);z-index:6;pointer-events:none}
 .mobile-ui.mobile-focused .scoreboard,.mobile-ui.mobile-focused .mobile-input-bar{position:relative;z-index:8;background:transparent}
 .mobile-ui.mobile-focused .mobile-input-bar #keypad-toggle{background:#edf4dfb3;border-color:#76916199}
 .mobile-ui.mobile-focused .mobile-input-bar #pause-game{background:#dfebf7b3;border-color:#93aecb99}
 .mobile-ui.mobile-focused .mobile-input-bar #leave-game{background:#fff0e5b3;border-color:#d29e8199}
 .mobile-ui.mobile-focused #fullscreen-button{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;padding:4px;font-size:25px;line-height:1;border-radius:10px;background:#fff1c2ad;border:1px solid #b58d5799;box-shadow:none;color:#69522f}
 .mobile-ui.mobile-focused .court-corner{top:calc(54px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));z-index:5}
 .mobile-ui.mobile-focused .court-corner>span,.mobile-ui.mobile-focused .match-summary{background:#fffdf08c}
 .mobile-ui.mobile-focused.show-buttons #touch-controls{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .mobile-ui.mobile-focused.show-buttons #touch-controls>#move-pad{background:#dbe9ca52;border-color:#638b4b8c;box-shadow:none}
 .mobile-ui.mobile-focused #move-pad .stick-knob{background:#fbfff08c;border-color:#64874e99;box-shadow:0 2px 4px #38592d14}
 .mobile-ui.mobile-focused #move-pad[data-active=true] .stick-knob{background:#efffc9b3}
 .mobile-ui.mobile-focused.show-buttons #touch-controls .jump-button{background:#efba8b66;border-color:#aa714699;box-shadow:none}
 .mobile-ui.mobile-focused.show-buttons #touch-controls .jump-button.pressed{background:#efba8ba6}
}

.mobile-ui.mobile-focused.court-expanded #fullscreen-button{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px;font-size:25px;line-height:1;border-radius:10px;background:#fff1c2ad;border:1px solid #b58d5799;box-shadow:none;color:#69522f}

.mobile-ui.mobile-focused:not(.native-fullscreen-available) #fullscreen-button{display:none!important}
/* Keep the original 16:10 court tall; place thumbs in separate side rails. */
.control-layout-picker{display:none}
.mobile-ui .control-layout-picker{display:block;order:0}
.control-layout-picker p{margin:10px 0 0;font-size:14px;line-height:1.4;color:#49633f}
@media(orientation:landscape){
 .mobile-ui.mobile-focused.show-buttons.controls-docked #court-card{--phone-safe-top:env(safe-area-inset-top);--phone-safe-right:env(safe-area-inset-right);--phone-safe-bottom:env(safe-area-inset-bottom);--phone-safe-left:env(safe-area-inset-left);--control-rail:clamp(84px,12vw,104px);--rail-thumb:min(88px,calc(var(--control-rail) - 12px));padding:var(--phone-safe-top) var(--phone-safe-right) var(--phone-safe-bottom) var(--phone-safe-left);background:#f3f5e8}
 body.mobile-ui.mobile-focused.show-buttons.controls-docked #court-card:before{display:none}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .canvas-wrap{inset:calc(48px + var(--phone-safe-top)) calc(var(--control-rail) + var(--phone-safe-right)) var(--phone-safe-bottom) calc(var(--control-rail) + var(--phone-safe-left));width:auto;height:auto;display:flex;align-items:center;justify-content:center;background:#dce8d3}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .canvas-wrap canvas{flex:none;max-width:100%;max-height:100%;aspect-ratio:1.6}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .scoreboard,.mobile-ui.mobile-focused.show-buttons.controls-docked .mobile-input-bar{background:#f3f5e8}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .scoreboard{position:relative;grid-area:1/1;top:auto;left:auto;right:auto;bottom:auto;height:48px;min-height:48px;padding:4px 8px}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .mobile-input-bar{position:relative;grid-area:1/2;top:auto;left:auto;right:auto;bottom:auto;height:48px;min-height:48px;padding:2px 6px;justify-content:flex-end}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .mobile-input-bar .court-actions{margin-left:0}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .match-summary{top:calc(54px + var(--phone-safe-top));bottom:auto;max-width:60%;background:#fffdf0d9;padding:2px 8px}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #touch-controls{inset:calc(48px + var(--phone-safe-top)) var(--phone-safe-right) var(--phone-safe-bottom) var(--phone-safe-left);height:auto;min-height:0}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #touch-controls .touch-hint{display:none}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #touch-controls>#move-pad{left:6px;bottom:16px;width:var(--rail-thumb);height:var(--rail-thumb);max-width:none;background:#e1ebd5;border-color:#91ac7b}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #move-pad .stick-knob{background:#fbfff0;border-color:#77985f}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #touch-controls .jump-button{right:6px;bottom:16px;width:var(--rail-thumb);min-width:var(--rail-thumb);max-width:var(--rail-thumb);height:var(--rail-thumb);background:#efc6a5;border-color:#b98155}
 .mobile-ui.mobile-focused.show-buttons.controls-docked .court-corner{top:8px;bottom:auto}
 .mobile-ui.mobile-focused.show-buttons.controls-docked #court-ready{bottom:calc(12px + var(--phone-safe-bottom))}
}

/* Phones use all the play area between the separate thumb rails. */
@media(orientation:landscape) and (max-height:520px){
 .mobile-ui.mobile-focused.show-buttons.controls-docked .canvas-wrap canvas{aspect-ratio:auto}
}

/* A little breathing room around the portrait playing field. */
@media(orientation:portrait){
 .mobile-ui.mobile-focused .canvas-wrap{width:calc(100% - 48px);margin-left:auto;margin-right:auto}
 .mobile-ui.mobile-focused.show-buttons #touch-controls{flex:0 0 auto;min-height:0}
}