/* One visual identity across match, entry, help, rooms, tutorials and results. */
:root{--navy:#142b3e;--navy-deep:#0c1e2c;--lime:#d3ff3c;--cream:#fff5dc;--paper:#f3efdf;--muted:#62747d;color-scheme:light}
body{background:#c3b09a;color:var(--navy);font-family:Arial,Helvetica,sans-serif}canvas{image-rendering:auto}button,input,a{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8fa922;outline-offset:3px}button:hover{filter:brightness(1.07)}
html,body{width:100%;height:100%;overflow:hidden}html body #view,html.standalone body #view{position:fixed;inset:0!important;width:100%;height:100vh!important;height:100dvh!important}header{top:calc(14px + env(safe-area-inset-top));left:18px;right:18px;height:38px;z-index:4}#score{height:38px;width:120px;min-width:120px;background:var(--navy);color:var(--cream);border:1px solid #ffffff30;border-radius:8px}#score .score-row{height:19px;font-size:10px;grid-template-columns:minmax(0,1fr) 25px;padding:0 5px 0 7px}#score .score-row strong{height:19px;font-size:14px;color:var(--cream)}#score .score-row.serving{border-left-color:var(--lime)}#score .score-row.serving>span{color:var(--cream)}header .tools #gamesettings{width:38px;height:38px;min-height:38px;background:var(--navy);border-color:#778a91;color:var(--cream);box-shadow:0 2px 0 #091b28}#matchtimer{position:absolute;z-index:4;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--navy);color:var(--cream);padding:7px 11px;border:1px solid #ffffff30;border-radius:7px;pointer-events:none;font:700 17px Arial,sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums}#gamebrand{position:absolute;z-index:2;top:calc(68px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;font:italic 900 clamp(16px,2.7vw,28px)/1 Arial,sans-serif;letter-spacing:-.8px;color:var(--cream);text-shadow:1px 2px 0 #142b3e;pointer-events:none;border-bottom:3px solid var(--lime);padding:0 3px 5px}#gamebrand b{color:var(--lime)}#gamebrand i{font-size:17px;margin-left:5px}
.controls{top:auto!important;bottom:calc(30px + env(safe-area-inset-bottom))!important;padding:0 max(18px,calc((100vw - 960px)/2));align-items:end;z-index:3}#stick{width:108px;height:108px;border:2px solid #dce2da66;background:#142b3e66;box-shadow:inset 0 0 0 10px #142b3e25,0 2px 0 #142b3e22;backdrop-filter:none}#stick:before{color:#fff5dc66}#knob{width:48px;height:48px;background:#fff5dcd9;border:2px solid #fff9e9aa;box-shadow:0 3px 0 #102b3d66,inset 0 2px 0 #fff9e980}.shots{width:160px;height:145px}.shot,.shot.drop,.shot.smash{width:63px;height:63px;background:#142b3e88;color:var(--cream);border:1.5px solid #ced9d078;box-shadow:0 2px 0 #10233330;font:700 10px Arial,sans-serif;letter-spacing:.2px;line-height:1.1}.shot:before{display:block;font:24px Arial,sans-serif;margin-bottom:3px;color:var(--cream)}#high{left:46px;top:0}#high:before{content:'↗'}#drop:before{content:'↘'}#smash:before{content:'ϟ'}#drop{left:0;bottom:0}#smashring{width:68px;height:68px;padding:3px;background:conic-gradient(from -90deg,var(--lime) var(--charge),#d5dfd044 0);box-shadow:none}#smashring .shot.smash{width:62px;height:62px;background:#142b3e99;border-color:#ced9d078}.shot:disabled{opacity:.52}.shot.aiming{outline:2px solid var(--lime);outline-offset:3px}.shot small{font:8px Arial,sans-serif;color:#d4dcd8;margin-top:3px}.shot.confirm{filter:brightness(1.3)}#play{top:calc(130px + env(safe-area-inset-top));bottom:auto;background:#142b3ee8;color:var(--cream);border-radius:8px;padding:9px 12px;max-width:65vw;z-index:3}#hint{font:700 12px Arial,sans-serif;color:var(--cream)}#sub{color:#d5dfda}#live-connection{top:calc(57px + env(safe-area-inset-top));right:18px;left:auto;background:#142b3eeb;color:var(--cream);font-size:8px;z-index:4}
dialog{background:var(--paper);color:var(--navy);border-color:#a9b9bd;border-radius:14px}dialog::backdrop{background:#0b2038aa;backdrop-filter:blur(5px)}dialog h2,.pointcard h2,.release h3,.roadmapgroup h3{font-family:Arial,sans-serif;font-weight:800;color:var(--navy);letter-spacing:-.5px}dialog button,button{background:#e5e9e1;color:var(--navy);border-color:#bac6c6}dialog p,dialog li,.guide-content,.key-intro,.key-fixed,.roadmapgroup p,.roadmapgroup li{color:#536773}.logeyebrow,.roadmapstatus{color:#647984}.logheader,.guide-head{border-color:#c3cdca}#guidestart,.roomprimary,#tutorialplay,#menuresume,#confirmendmatch{background:var(--navy)!important;color:var(--lime)!important;border-color:var(--navy)!important;font-weight:bold}#gamemenu #menuresume{background:var(--navy);color:var(--lime)}.game-menu-actions #endmatch{color:#9a493b}.game-menu-actions #sound{color:var(--navy)}#help .guide-tabs button[aria-selected=true]{background:var(--navy);color:var(--lime);border-color:var(--navy)}.guide-tabs{border-color:#c3cdca}.guide-grid>div,.guide-rule,.roadmapnote,.key-fixed{border-color:#bdc9c6}.roadmapnote{background:#e0e6dc}.release{border-color:#c3cdca}.release img{border-radius:8px}#keyrows button{color:var(--navy);background:#e1e8dd}.room-status{color:var(--navy)}input,select{background:#fff9eb;color:var(--navy);border-color:#9eafb4}#pointoverlay{background:#10283c55}.pointcard{background:var(--navy);border-color:#6d8490;color:var(--cream);border-radius:15px;box-shadow:0 20px 70px #071d3255}.pointcard h2,#pointscore{color:var(--cream);font-family:Arial,sans-serif;font-weight:800}#pointkicker{color:var(--lime)}#pointnext,.continue{color:#c3d1d2}.continue{border-top-color:#4b6574}#pointscore{font-size:48px}#resultactions button{background:var(--lime);color:var(--navy);border-color:var(--lime);font-weight:bold}#resultactions #resulthome{background:transparent;color:var(--cream);border-color:#70858c}#trainingcoach{top:calc(114px + env(safe-area-inset-top));bottom:auto;left:50%;transform:translateX(-50%);max-width:min(420px,88vw);background:#142b3ef0;color:var(--cream);border:1px solid #8ca09d;border-radius:10px}#trainingcoach h2,#trainingcoach p{color:var(--cream)}#trainingcoach b{color:var(--lime)}#trainingcoach button{background:#29465a;color:var(--cream);border-color:#6d8590}.home-wordmark{font-style:italic;font-weight:900;letter-spacing:-.4px;color:var(--cream)}.home-wordmark em{color:var(--lime);font-style:inherit}#homescreen{background:var(--navy);border-color:#667e8b;color:var(--cream)}#homescreen h1{color:var(--cream)}#homescreen h1 em,.home-eyebrow{color:var(--lime)}.home-actions button{background:var(--lime)!important;border-color:var(--lime)!important;color:var(--navy)!important}.home-actions #homefriend{background:#294458!important;border-color:#5b7481!important;color:var(--cream)!important}.home-bottom{border-color:#435c6d}.home-bottom button{color:var(--cream)!important}.home-bottom a{color:var(--lime)}.home-meta,.home-intro,.beta-tag{color:#b5c8cd}.court-board{background:#997d60;border-color:#b8a68b;box-shadow:0 12px 0 #7b6b57,0 20px 25px #10233344}.court-lines{border-color:var(--cream)}.court-player{background:#db8252}.court-player.two{background:#418db5}.home-court{background:linear-gradient(#b9c3c3,#d8c2a0 52%,#97836a)}.court-caption{color:var(--cream)}
@media(max-width:600px){header{top:calc(12px + env(safe-area-inset-top));left:14px;right:14px;height:34px}#score{height:34px;width:108px;min-width:108px}#score .score-row{height:17px;font-size:10px}#score .score-row strong{height:17px;font-size:13px}header .tools #gamesettings{width:36px;height:36px;min-height:36px}#matchtimer{top:calc(14px + env(safe-area-inset-top));font-size:15px;padding:6px 9px}#gamebrand{top:calc(67px + env(safe-area-inset-top));font-size:18px}.controls{bottom:calc(32px + env(safe-area-inset-bottom))!important;padding:0 17px}#stick{width:96px;height:96px}#knob{width:45px;height:45px}.shot small{display:none}#gamemenu{max-height:90dvh;box-sizing:border-box;overflow:auto}#trainingcoach{top:calc(109px + env(safe-area-inset-top));padding:12px 15px}#trainingcoach h2{font-size:16px;margin:7px 0}#trainingcoach p{font-size:11px;line-height:1.5}.guide-grid h3{color:var(--navy)}}
@media(max-height:520px){header{top:10px}#matchtimer{top:12px}#gamebrand{top:54px;font-size:17px}.controls{bottom:14px!important;padding:0 20px}#stick{width:85px;height:85px}.shots{height:128px;width:145px}.shot,.shot.drop{width:57px;height:57px}#high{left:40px}#smashring{width:62px;height:62px}#smashring .shot.smash{width:56px;height:56px}#trainingcoach{top:90px;width:240px;left:20px;transform:none}#play{top:90px}.shot small{display:none}}
#gamebrand svg{width:23px;height:23px;vertical-align:middle;margin-left:3px}#smashring .shot.smash{background:#142b3eb3!important;box-shadow:none!important}#stick #knob{color:var(--cream)}
/* A hollow stamina arc, so charge never fills the translucent button. */
#smashring{position:absolute;background:none!important;isolation:isolate}#smashring:before{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from -90deg,var(--lime) var(--charge),#d5dfd055 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}#smashring .shot.smash{background:#142b3e88!important}.shots{height:125px}#high{left:49px}
@media(max-width:600px){.controls{bottom:calc(14px + env(safe-area-inset-bottom))!important}.shots{height:118px}}
/* Usage dashboard is part of the same app, with readable light-page text. */
main>p,main small{color:#536773}main .kicker{color:#486018}main .card,main .note{background:var(--navy);border-color:#667d8c;color:var(--cream)}main .card b{color:var(--lime)}main .card span{color:#c3d1d2}main th{color:#355064}main td,main th{border-color:#b5c1c3}main .note{border-left-color:var(--lime)}

/* Explicit vectors avoid platform-dependent emoji rendering on iOS. */
.shot:before,#high:before,#drop:before,#smash:before{content:none!important}.shot{display:flex;flex-direction:column;align-items:center;justify-content:center}.shot .shotglyph{display:block;width:24px;height:24px;margin-bottom:3px;flex:none;pointer-events:none}#stick:before{content:none}#stick:after{content:'';position:absolute;width:7px;height:7px;left:calc(50% - 4px);top:10px;border-top:2px solid #fff5dc66;border-left:2px solid #fff5dc66;transform:rotate(45deg);pointer-events:none}#knob{left:50%;top:50%;margin-left:-24px;margin-top:-24px}#play{position:fixed}
@media(max-width:600px){#knob{margin-left:-22.5px;margin-top:-22.5px}}
/* Layout controls apply in both orientations and in installed mode. */
html body .controls{bottom:calc(var(--control-bottom,18px) + env(safe-area-inset-bottom))!important}html body .controls>div:first-child{transform:scale(var(--control-scale,1));transform-origin:left bottom}html body .controls .shots{transform:scale(var(--control-scale,1));transform-origin:right bottom}#layoutpanel{position:fixed;z-index:60;right:max(12px,env(safe-area-inset-right));top:calc(62px + env(safe-area-inset-top));width:260px;max-height:calc(100dvh - 85px - env(safe-area-inset-top));overflow:auto;padding:14px;background:#142b3ef5;color:#fff5dc;border:1px solid #809196;border-radius:12px;box-shadow:0 8px 30px #0c1e2c50;font:12px Arial,sans-serif;touch-action:pan-y}#layoutpanel[hidden],#tunereopen[hidden]{display:none}#layoutpanel .tunehead{display:flex;justify-content:space-between;align-items:center;gap:10px}#layoutpanel button{font:11px Arial,sans-serif;border-radius:7px;background:#29475a;color:#fff5dc;border-color:#71868f;padding:8px 10px}#layoutpanel #tuneclose{padding:5px 8px}#tunemode{color:#d3ff3c;font-size:9px;line-height:1.6;margin:7px 0 10px}#tunerows label{display:grid;grid-template-columns:1fr auto;gap:5px;margin:11px 0;color:#fff5dc}#tunerows output{color:#d3ff3c;font-variant-numeric:tabular-nums}#tunerows input{grid-column:1/-1;width:100%;margin:0;accent-color:#d3ff3c;touch-action:none;min-height:24px}.tuneactions{display:flex;gap:6px;flex-wrap:wrap}#layoutpanel #tunetest{background:#d3ff3c;color:#142b3e;font-weight:bold}#tunestatus{font-size:10px;line-height:1.5;color:#bdcfd0;margin-bottom:0}#tunefallback{width:100%;height:100px;font-size:10px;user-select:text;-webkit-user-select:text}#tunereopen{position:fixed;z-index:30;top:calc(58px + env(safe-area-inset-top));right:14px;border-radius:8px;padding:8px 12px;background:#142b3eeb;color:#d3ff3c;border:1px solid #7b9295;font-size:11px}@media(max-height:520px){#layoutpanel{top:12px;max-height:calc(100dvh - 24px);width:250px}#tunerows label{margin:6px 0}#tunerows input{min-height:19px}#tunereopen{top:58px}html body .controls{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}}