/* Court-led refinement of the established Rally Club interface. */
.court-wrap{background:#abd3b9 url('assets/ui/court-preview-v1.svg') center/cover no-repeat}
.court-wrap[data-render-state=loading]>#court,.court-wrap[data-render-state=interrupted]>#court{visibility:hidden}
.court-render-note{position:absolute;top:124px;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:calc(100% - 32px);z-index:2;padding:9px 14px;background:var(--cream);border:1px solid var(--plum);border-radius:12px;color:var(--plum);font-size:14px;line-height:1.5;text-align:center;pointer-events:none}
.header-actions .coin-wallet{min-height:44px}#open-menu{min-width:44px}
.scoreboard strong{font-variant-numeric:tabular-nums}.score-label{font-size:12px}.court-top{font-size:12px}.court-top #open-emotes span{font-size:12px}
#overlay .overlay-box{transform:none;border-width:2px;border-radius:24px;scroll-padding-block:16px;box-shadow:0 5px 0 var(--plum)}
#overlay[data-phase=ready]{align-items:end;padding:12px 16px 38px;background:transparent}
#overlay[data-phase=ready] .overlay-box{width:min(400px,100%);padding:18px 20px;text-align:left}
#overlay[data-phase=ready] .ball-icon{display:none}#overlay[data-phase=ready] h2{font-size:38px;margin:0 0 7px}
#overlay[data-phase=ready] #overlay-text{font-size:14px;line-height:1.55;margin:0 0 12px}
#overlay .intro-modes,#overlay .intro-help{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
#overlay :is(.intro-modes,.intro-help):not(:has(>button:not([hidden]))){display:none}
#overlay .intro-modes button{border:2px solid var(--plum);border-radius:12px;background:#e5eedf;color:var(--plum);padding:10px 9px;font-size:14px;font-weight:700;line-height:1.35;min-height:48px}
#overlay .intro-help{border-top:1px solid #47385830;padding-top:8px;margin-top:14px}
#overlay .intro-help button{font-size:13px;line-height:1.4;min-height:44px;padding:8px 4px;margin:0;text-underline-offset:3px;font-weight:600}
#overlay .intro-modes button:hover{background:var(--mint)}#overlay .intro-help button:hover{color:#713d54;background:#4738580b;border-radius:8px}
#overlay[data-phase=ready] .overlay-box>#start{position:static;margin-top:12px;min-height:50px;font-size:27px}
#overlay[data-phase=ready] .match-versus{width:100%;margin:8px 0 12px;grid-template-columns:1fr auto 1fr;padding:10px 0;border-top:1px solid #47385826;border-bottom:1px solid #47385826}
#overlay[data-phase=ready] .match-contender{grid-template-columns:40px minmax(0,1fr);column-gap:8px;justify-items:start;text-align:left}
#overlay[data-phase=ready] .match-contender :is(img,.match-avatar){grid-row:1/3;width:40px;height:40px}#overlay[data-phase=ready] .match-contender b{font-size:13px;align-self:end}#overlay[data-phase=ready] .match-contender small{font-size:11px;line-height:1.4}#overlay[data-phase=ready] .match-venue{font-size:12px;margin:2px 0 0}
.controls{padding-top:15px}.control-readout{font-size:12px;line-height:1.5;gap:12px}.aim-title{font-size:12px;margin-bottom:3px}.shots b{font-size:22px}.aim-buttons button{min-width:44px;width:44px}.move-hint{font-size:12px;bottom:6px}.move-pad{height:72px}.move-track{top:24px}.move-thumb{height:38px}.swing{min-height:76px;box-shadow:0 4px 0 #a45566}.controls :is(button,[tabindex]):focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
@media(max-width:420px){#overlay[data-phase=ready]{padding:8px 10px 38px}#overlay[data-phase=ready] .overlay-box{padding:14px}#overlay[data-phase=ready] h2{font-size:33px}#overlay[data-phase=ready] #overlay-text{font-size:13px}#overlay .intro-modes,#overlay .intro-help{gap:8px}#overlay .intro-modes button{font-size:13px}#overlay .intro-help button{font-size:12px}#overlay[data-phase=ready] .match-contender{grid-template-columns:32px minmax(0,1fr);gap:4px}#overlay[data-phase=ready] .match-contender :is(img,.match-avatar){width:32px;height:32px}.control-readout{font-size:11px}.controls{padding:12px}.shots b{font-size:20px}.move-hint{font-size:11px}.aim-title{font-size:11px}}
@media(max-height:650px){#overlay[data-phase=ready]{padding-bottom:8px}#overlay[data-phase=ready] .overlay-box{padding:12px 14px}#overlay[data-phase=ready] h2{font-size:30px}#overlay[data-phase=ready] #overlay-text{margin-bottom:8px}.control-readout{font-size:11px}.move-pad{height:64px}.swing{min-height:66px}}
@media(max-height:520px) and (orientation:landscape){#overlay[data-phase=ready] .overlay-box{width:min(370px,100%)}#overlay[data-phase=ready] .match-versus{display:none}.controls{padding:10px}.shot-aim-row{gap:8px}.aim{gap:1px}.control-readout{flex-direction:column;gap:0;margin:5px 0}.thumb-row{margin-top:6px;gap:8px}.move-pad{height:60px}.swing{min-height:58px}#overlay[data-phase=ready] .intro-help{margin-top:8px;padding-top:4px}#overlay[data-phase=ready] .intro-modes{margin-top:8px}.court-render-note{top:118px;font-size:12px}}
@media(prefers-reduced-motion:reduce){#overlay .match-versus{animation:none}}
/* Readouts remain readable on compact phones too. */
.control-readout,.move-hint,.aim-title{font-size:12px}
/* Cards sit above court tools; compact landscape keeps the menu reachable above them. */
#overlay{z-index:4}
@media(max-height:520px) and (orientation:landscape){#overlay[data-phase=ready]{padding-top:118px}#overlay[data-phase=ready] .overlay-box{max-width:370px}.shots b{font-size:19px}.shot-symbol{font-size:16px}.shots button{gap:3px}}

/* Keep the established two-handed desktop layout below the court. */
.shot-key,.keyboard-shortcuts{display:none}
@media(min-width:700px) and (hover:hover) and (pointer:fine){.shot-key{display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid currentColor;border-radius:5px;font:600 12px/1 'DM Sans',sans-serif;opacity:.85}.keyboard-shortcuts{display:block;margin:12px 0 0;text-align:center;color:var(--cream);font-size:12px;line-height:1.5}.keyboard-shortcuts kbd{font:inherit;font-weight:700}}

#overlay-game-menu{min-height:44px;padding:8px 10px}.overlay[data-phase=ready] #overlay-game-menu{display:none}

@media(max-height:520px) and (orientation:landscape){.controls .shot-key{display:none}.keyboard-shortcuts{font-size:11px;line-height:1.35;margin-top:6px}}