:root{font-family:Arial,Helvetica,sans-serif;color:#fff4d8;background:#06172b;font-synthesis:none;--amber:#ffc15d;--cream:#fff4d8;--muted:#a7bdce;--line:#36526b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit}button{cursor:pointer;min-height:46px;border:1px solid var(--line);color:var(--cream);background:#102d49;border-radius:4px;padding:9px 15px;touch-action:manipulation}button:hover{background:#204664}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:3px}button:active,button.held{background:var(--amber);color:#071b30;transform:translateY(1px)}button.primary{background:var(--amber);color:#071b30;border-color:var(--amber);font-weight:800}button.primary:hover{background:#ffcf85}button.plain{background:transparent}button[disabled]{opacity:.5;cursor:default}.app{height:100vh;height:100dvh;max-width:1250px;margin:auto;display:grid;grid-template-rows:54px 49px minmax(0,1fr) 30px 118px;padding:0 max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:0}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:8px}.wordmark{display:flex;flex-direction:column;gap:4px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--muted)}.wordmark strong{font-size:16px;letter-spacing:-.6px}.wordmark i{font-style:normal;color:var(--amber)}.score{display:flex;align-items:center;gap:9px}.score>span{font-size:32px;font-weight:800;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}.score>span:last-child{color:var(--cream)}.score small{font-size:8px;line-height:1.6;letter-spacing:1px}.topbar button{padding:5px 10px;font-size:14px}.matchbar{display:flex;align-items:center;justify-content:space-between;gap:6px}h1{font-size:16px;line-height:1.2;margin:3px 0 0;letter-spacing:-.3px}.matchbar .eyebrow{font-size:9px}.matchmeta{text-align:right;display:flex;flex-direction:column;gap:3px;font-size:10px;white-space:nowrap}.matchmeta span{color:var(--amber);font-weight:bold}.matchmeta strong{font-size:9px}.arena{min-height:0;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at center,#153958 0,#06172b 72%)}.courtframe{position:relative;height:100%;max-height:100%;aspect-ratio:1;max-width:100%;display:flex;align-items:center;justify-content:center}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}.ready{position:absolute;left:15%;right:15%;top:41%;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;pointer-events:none}.ready span{font-size:11px;letter-spacing:2px;font-weight:bold;padding:5px;background:#071c35e8}.ready button{pointer-events:auto;min-width:145px}.ready small{font-size:10px;color:var(--muted);background:#071c35eb;padding:4px}.ready[hidden]{display:none}.ribbon{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}.ribbon #feedback{overflow:hidden;text-overflow:ellipsis;color:var(--cream)}#kitStatus{font-size:9px;color:var(--amber)}.controls{display:grid;grid-template-rows:48px 62px;gap:6px;padding-top:6px}.dragstrip{border:1px dashed #587792;background:#0b2540;border-radius:4px;display:flex;gap:10px;align-items:center;justify-content:center;touch-action:none;user-select:none}.dragstrip.held{border-style:solid;border-color:var(--amber);background:#173e5d}.grip{font-size:27px;color:var(--amber)}.dragstrip>span:nth-child(2){font-size:10px;letter-spacing:1.5px}.dragstrip small{font-size:9px;color:var(--muted)}.buttonrow{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px}.buttonrow>button{font-size:25px;min-height:56px;padding:4px}.buttonrow>button:nth-child(2){font-size:12px;font-weight:800;letter-spacing:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.buttonrow small{font-size:9px;letter-spacing:0;font-weight:normal;color:var(--muted)}dialog{width:min(680px,calc(100vw - 22px));max-height:calc(100dvh - 24px);color:var(--cream);background:#0b2540;border:1px solid #64829b;border-radius:7px;padding:0;box-shadow:0 30px 120px #000a}dialog::backdrop{background:#020b17d9;backdrop-filter:blur(4px)}.panelbody{padding:25px;overflow:auto;max-height:calc(100dvh - 26px)}.panelbody h2{font-size:clamp(27px,6vw,45px);line-height:1.02;letter-spacing:-1.4px;margin:10px 0 16px}.panelbody p{font-size:14px;line-height:1.6;color:#c0d0dd;margin:12px 0}.panelbody h3{margin:21px 0 8px;font-size:16px}.panelbody a{color:var(--amber);text-underline-offset:3px}.panelbody .kicker{color:var(--amber);font-size:11px;letter-spacing:2px;font-weight:bold}.panelbody .actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}.actions button{flex-grow:1}.panelbody .credit{font-size:11px;border-top:1px solid var(--line);padding-top:14px;margin-top:24px}.panelbody select{background:#071c35;color:var(--cream);min-height:46px;width:100%;border:1px solid var(--line);padding:10px;border-radius:4px}.panelbody label{display:block;font-size:12px;letter-spacing:.5px;margin:15px 0 6px}.hero{width:100%;aspect-ratio:2.1;object-fit:cover;display:block;border-radius:3px;margin:0 0 18px}.hero[hidden]{display:none}.courtlist{display:grid;grid-template-columns:1fr 1fr;gap:7px}.courtlist button{text-align:left;padding:11px;line-height:1.4;font-size:12px}.courtlist small{display:block;color:var(--muted);font-size:10px}.courtlist .complete{border-color:#d19d4d}.chip{display:inline-block;border:1px solid var(--line);padding:4px 8px;font-size:11px;color:var(--amber);margin-right:5px}.lorecard{border-left:2px solid var(--amber);padding:1px 14px;margin:20px 0}.lorecard .era{font-size:10px;letter-spacing:1px;color:var(--amber)}.lorecard h3{margin-top:6px}.lorecard p{font-size:13px}.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.helpgrid div{border:1px solid var(--line);padding:12px}.helpgrid p{font-size:12px;margin:0}.helpgrid strong{display:block;font-size:13px;color:var(--amber);margin-bottom:6px}.milestone{border:1px solid var(--amber);background:#173750;padding:14px;margin:18px 0}.milestone strong{color:var(--amber)}.savewarning{color:#ffc15d!important;font-weight:bold}.practice-tools{display:flex;align-items:center;gap:8px}#pauseBtn span{display:none}@media(min-width:750px) and (min-height:600px){.app{grid-template-columns:1fr 300px;grid-template-rows:66px 60px minmax(0,1fr) 40px;padding:0 28px 20px;column-gap:24px}.topbar{grid-column:1/-1}.wordmark strong{font-size:23px}.wordmark .eyebrow{font-size:11px}.matchbar{grid-column:1/-1}h1{font-size:22px}.arena{grid-column:1;grid-row:3}.controls{grid-column:2;grid-row:3;align-self:center;grid-template-rows:220px 70px}.dragstrip{flex-direction:column;gap:15px}.dragstrip .grip{font-size:48px}.dragstrip>span:nth-child(2){font-size:12px}.dragstrip small{font-size:10px}.ribbon{grid-column:1/-1;grid-row:4;font-size:12px}#kitStatus{font-size:11px}#pauseBtn span{display:inline}.matchmeta{font-size:13px}.matchmeta strong{font-size:11px}}@media(max-height:450px) and (orientation:landscape){.app{grid-template-columns:minmax(0,1fr) 192px;grid-template-rows:46px 34px minmax(0,1fr) 24px;column-gap:10px;padding-bottom:max(5px,env(safe-area-inset-bottom))}.topbar{grid-column:1/-1}.wordmark strong{font-size:14px}.score>span{font-size:28px}.matchbar{grid-column:1/-1}.matchbar .eyebrow{display:none}h1{font-size:13px}.matchmeta{flex-direction:row;gap:10px}.arena{grid-row:3;grid-column:1}.controls{grid-row:3;grid-column:2;grid-template-rows:minmax(60px,1fr) 60px;align-self:stretch;padding:0 0 0;gap:8px}.dragstrip{flex-direction:column;gap:5px}.dragstrip small{font-size:9px;max-width:120px;text-align:center}.buttonrow{gap:5px;grid-template-columns:1fr 1.2fr 1fr}.buttonrow button{padding:3px;min-width:44px}.buttonrow>button:nth-child(2){font-size:9px;letter-spacing:0}.buttonrow small{font-size:8px}.ribbon{grid-column:1/-1;grid-row:4}.ready{top:33%;gap:4px}.ready button{min-width:110px;min-height:44px;padding:6px 16px}.ready small{display:none}.ready span{font-size:9px;letter-spacing:1px}.panelbody{padding:18px}.panelbody h2{font-size:27px}.hero{max-height:130px;object-position:center 40%}}@media(max-width:350px){.wordmark strong{font-size:14px}.eyebrow{font-size:8px}.score{gap:6px}.score>span{font-size:28px}.topbar button{font-size:12px;padding:4px 8px}.dragstrip small{display:none}h1{font-size:14px}.ribbon #kitStatus{max-width:92px;text-align:right;font-size:8px}.panelbody{padding:18px}.courtlist{grid-template-columns:1fr}.helpgrid{grid-template-columns:1fr}.panelbody h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.app>*{min-width:0}.courtframe{min-width:0;min-height:0}.topbar button{min-width:46px;flex-shrink:0}.wordmark{min-width:0}.score{flex-shrink:0}

.ready{left:10%;right:10%}.ready small{font-size:11px;line-height:1.4;max-width:240px}.ready span{font-size:10px;line-height:1.3}.topbar{min-width:0}.courtframe{width:100%;height:auto;max-height:100%;align-self:center}.arena{container-type:size}.courtframe{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
/* The venue has its own reserved illustration band; it never covers the ball. */
.app{grid-template-rows:54px 49px 48px minmax(0,1fr) 30px 118px}.venueband{position:relative;overflow:hidden;align-self:stretch;background:#143852;margin-bottom:4px;border:1px solid #385b73}.venueband canvas{height:100%;width:100%;object-fit:cover}.venueband>span{position:absolute;bottom:3px;left:5px;background:#071c35e8;padding:2px 5px;font-size:10px;line-height:1.15;color:#fff4d8;max-width:90%}.ready small{max-width:220px}.ready{top:37%}.ready button{min-height:44px}.ready span{padding:3px}.ready small{padding:3px}
@media(min-width:750px) and (min-height:600px){.app{grid-template-rows:66px 60px minmax(0,1fr) 40px}.venueband{grid-column:2;grid-row:3;height:150px;align-self:start;margin:0}.venueband canvas{object-fit:cover}.venueband>span{font-size:13px;bottom:8px;left:8px}.controls{align-self:end;grid-template-rows:170px 70px;max-height:calc(100% - 165px);width:100%}.ribbon{grid-row:4}.arena{grid-row:3}}
@media(max-height:450px) and (orientation:landscape){.app{grid-template-rows:46px 34px minmax(0,1fr) 24px}.venueband{grid-column:2;grid-row:3;height:56px;align-self:start;margin:0}.venueband>span{font-size:9px;bottom:2px}.controls{grid-column:2;grid-row:3;padding-top:64px;grid-template-rows:minmax(55px,1fr) 60px}.arena{grid-row:3}.ribbon{grid-row:4}.ready{top:33%}.ready span{max-width:160px}.ready small{display:none}}

.panelhome{position:absolute;right:8px;top:8px;z-index:4;min-width:68px;min-height:44px;font-size:12px;background:#071c35}.panelhome[hidden]{display:none}.panelbody>.kicker{display:block;max-width:calc(100% - 70px);min-height:28px}.panelbody>h2{padding-right:32px}

.venueband canvas{object-fit:contain;object-position:top center}@media(min-width:750px) and (min-height:600px){.venueband{height:110px}.venueband canvas{height:76px}.venueband>span{bottom:8px}}