.shot-choice{margin:8px 0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.shot-choice[hidden]{display:none!important}.shot-choice button{min-height:40px}.shot-choice button[aria-pressed=true]{border-color:#77cda7;background:#24483e;color:#d7ffe9}
.shot-charge{position:absolute;z-index:6;pointer-events:none;width:min(244px,calc(100% - 16px));padding:10px 12px;background:#172638f2;border:1px solid #89c7b4;border-radius:10px;box-shadow:0 4px 18px #07101d66;color:#e3eef7}.shot-charge[hidden]{display:none!important}.shot-charge strong,.shot-charge small{display:block}.shot-charge strong{font-size:12px;line-height:1.35}.shot-charge small{font-size:10px;line-height:1.45;color:#b5c8d9;margin-top:6px}.shot-track{position:relative;height:14px;margin-top:9px;background:#3e4d60;border-radius:5px}.shot-zone{position:absolute;top:0;bottom:0;background:#6fc79c;border-radius:2px}.shot-needle{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:#fff1c9;transform:translateX(-50%)}.shot-charge[data-ready=true]{border-color:#a2e6b9}.main-btn[data-shot=true]{background:#b0d6ad;color:#153226;border:1px solid #cce7bb;box-shadow:0 4px 0 #405943}.main-btn[data-shot=true][aria-pressed=true]{background:#deebae;transform:translateY(2px);box-shadow:0 2px 0 #405943}
.shot-charge{border-radius:12px;background:#142539f5;border-color:#8098ad}
.shot-track{height:18px;margin-top:10px;background:linear-gradient(90deg,#40566c,#283d53);box-shadow:inset 0 1px 3px #06132166}
.shot-zone{background:#68b692}
.shot-perfect{position:absolute;top:-1px;bottom:-1px;background:#edf4bb;border:1px solid #fffde4;border-radius:3px;box-shadow:0 0 7px #dceba64d}
.shot-needle{width:4px;top:-4px;bottom:-4px;background:#fff;box-shadow:0 0 0 1px #15354a}
.shot-charge[data-perfect=true]{border-color:#eef5bd}
.shot-charge[data-grade]:not([data-grade=""]){border-width:2px;padding:9px 11px}
.shot-charge[data-grade=short],.shot-charge[data-grade=long],.shot-charge[data-grade=timeout]{border-color:#d9ac85}
.shot-charge[data-grade=short] .shot-needle,.shot-charge[data-grade=long] .shot-needle{background:#f1ba88}
.shot-charge[data-grade=perfect] strong{color:#f0f6c4}
@media(max-width:340px),(max-height:600px){.shot-charge{width:min(216px,calc(100% - 12px));padding:7px 9px}.shot-charge[data-grade]:not([data-grade=""]){padding:6px 8px}.shot-charge strong{font-size:11px}.shot-charge small{font-size:10px}.shot-choice{margin:4px 0;gap:5px}.shot-choice button{min-height:34px;font-size:11px;padding:6px 9px}}

/* Finishing uses one action; pass setup returns with the next possession. */
body[data-shot-stage]:not([data-shot-stage=""]) .side .commands,
body[data-shot-stage]:not([data-shot-stage=""]) footer #reset,
body[data-shot-stage]:not([data-shot-stage=""]) footer #advanced-command{display:none!important}
body[data-shot-stage]:not([data-shot-stage=""]) footer #execute{flex:1}

body[data-shot-stage]:not([data-shot-stage=""]) .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body[data-shot-stage]:not([data-shot-stage=""]) .side{display:none!important}

/* The opening instructions use the screen, rather than the shorter court. */
.cover{position:fixed;inset:12px 8px;z-index:30;padding:12px;border-radius:12px}
.cover .card{max-height:100%;overflow:auto}
@media(max-height:600px) and (min-width:650px){
 .cover{padding:8px}
 .cover .card{grid-template-areas:'overview steps' 'description description' 'modes modes' 'shots shots' 'start start'}
 .cover .shot-choice{grid-area:shots;margin:0}
 .cover .shot-choice button{min-height:32px;padding:5px 10px;font-size:11px}
}