/* CocoRae Coconut Open: shared by the embedded and standalone game. */
#tennis{--court-green:#043927;--court-gold:var(--brand-gold);--court-stone:#c8c0ad;background:radial-gradient(ellipse at 90% 0%,#174c3a 0,transparent 58%),#03281e;color:#faf7ec;border-block:1px solid #d9bd7555}
#tennis .tennis-heading{align-items:center;gap:24px;margin-bottom:28px}
#tennis .tennis-brand-mark{display:block;width:clamp(180px,22vw,270px);height:auto;margin:0 0 22px}
#tennis .tennis-heading .eyebrow{color:var(--court-gold);font-size:.875rem;letter-spacing:.13em}
#tennis .tennis-heading h2{font-size:clamp(2.1rem,4.5vw,4rem);line-height:1.08;margin:10px 0 18px}
#tennis .tennis-heading p:not(.eyebrow){max-width:610px;font-size:1.05rem;line-height:1.6;color:#e5e0ce}
#tennis .tennis-board{border:1px solid #d9bd7580;background:#03261d;box-shadow:0 18px 45px #00150e66;overflow:hidden}
#tennis .tennis-scorebar{background:linear-gradient(90deg,#c8c0ad,#e1dac8);color:#143d2e;border-bottom:3px solid var(--court-gold);padding:16px 22px;gap:16px}
#tennis .tennis-scorebar strong{font-size:clamp(.95rem,2vw,1.3rem);letter-spacing:.06em}
#tennis .tennis-scorebar button{color:#143d2e;border-color:#5e6349;background:#ffffff40}
#tennis .tennis-stage{background:#043927;border-bottom:1px solid #d9bd7570}
#tennis .tennis-overlay{border-color:var(--court-gold);background:#043927e8;color:#fff6d9;box-shadow:0 8px 30px #00160d66}
#tennis .tennis-rally{background:#043927de;color:#fff6d9;border:1px solid #d9bd7555}
#tennis .tennis-yarn{margin:0;padding:18px 24px;background:#0d3d2c;border-bottom:1px solid #d9bd7533;color:var(--brand-gold);font-size:1.05rem;line-height:1.5}
#tennis .tennis-yarn::before{content:'BIG RED · HAMMOCK COMMENTARY';display:block;color:#ddd7c4;font-size:.75rem;letter-spacing:.13em;margin-bottom:7px}
#tennis .tennis-controls{padding:18px 22px;gap:9px}
#tennis .tennis-controls button{min-height:44px;border:1px solid #d9bd7566;background:#104a37;color:#fff7df}
#tennis .tennis-controls .primary{background:var(--court-gold);color:#153b2b;border-color:var(--court-gold);font-weight:700}
#tennis .tennis-controls button:disabled{opacity:.45}
#tennis input{accent-color:var(--court-gold)}
#tennis .tennis-help{border-top:1px solid #d9bd7533;padding:16px 22px;gap:16px}
#tennis .tennis-help label{font-size:.9rem;line-height:1.5}
#tennis .tennis-instructions,#tennis .reference-note{color:#c9d0c3;line-height:1.6;padding-inline:22px}
@media(max-width:650px){#tennis .tennis-heading{display:block}#tennis .tennis-settings{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px}#tennis .tennis-scorebar{padding:12px;gap:10px;flex-wrap:wrap}#tennis .tennis-controls{padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}#tennis .tennis-yarn{padding:15px}#tennis .tennis-help{padding:15px}#tennis .tennis-brand-mark{width:210px}}
/* Broadcast framing, signature-shot controls and the match scorecard. */
#tennis .tennis-heading{margin-bottom:20px}
#tennis .tennis-heading h2{font-size:clamp(2rem,3.5vw,3.2rem);margin-bottom:10px}
#tennis .tennis-brand-mark{width:205px;margin-bottom:16px}
#tennis .tennis-settings{flex-wrap:wrap;justify-content:flex-end;max-width:470px}
#tennis .tennis-board{padding:0;border-radius:20px}
#tennis .tennis-scorebar strong{color:#143d2e}
#tennis .tennis-stage{border-radius:0}
#tennis .tennis-host-tag{position:absolute;left:18px;top:16px;display:grid;padding:10px 14px;background:#03291ee8;border-left:3px solid var(--brand-gold);color:var(--brand-gold);font-size:.75rem;letter-spacing:.09em;pointer-events:none}
#tennis .tennis-host-tag strong{font-size:1.15rem;letter-spacing:.05em;color:#fff5dc;line-height:1.3}
#tennis .tennis-host-tag span{font-size:.75rem;letter-spacing:0;color:#e0ddcc}
#tennis .tennis-overlay{left:auto;right:5%;top:28%;width:40%;padding:clamp(12px,2.5vw,30px);border-radius:4px;text-align:left;border:0;border-left:3px solid var(--brand-gold);background:linear-gradient(120deg,#043927f5,#043927d9);pointer-events:none;box-sizing:border-box}
#tennis .tennis-overlay strong{display:block;font:700 clamp(1.15rem,3vw,2.6rem)/1.03 Georgia,serif;color:#fff5d8}
#tennis .tennis-overlay-kicker{display:block;letter-spacing:.11em;font:700 .75rem/1.4 Arial,sans-serif;color:var(--brand-gold);margin-bottom:12px}
#tennis #tennisOverlayDetail{display:block;font:400 clamp(.875rem,1.3vw,1rem)/1.45 Arial,sans-serif;color:#e0dfd0;margin-top:14px}
#tennis .tennis-overlay button{pointer-events:auto;margin-top:14px;min-height:44px;background:var(--brand-gold);color:#123d2e;font-size:.875rem}
#tennis .tennis-overlay[data-phase=between]{top:20px;right:20px;padding:12px 18px;width:auto;max-width:55%;border-radius:5px}
#tennis .tennis-overlay[data-phase=between] strong{font-size:1.3rem}
#tennis .tennis-overlay[data-phase=between] .tennis-overlay-kicker,#tennis .tennis-overlay[data-phase=between] #tennisOverlayDetail{display:none}
#tennis .tennis-overlay[data-phase=replay]{top:20px;right:20px;padding:12px 18px;width:auto;max-width:54%}
#tennis .tennis-overlay[data-phase=replay] strong{font-size:1.4rem}
#tennis .tennis-overlay[data-phase=replay] .tennis-overlay-kicker{display:none}
#tennis .tennis-shot-banner{position:absolute;top:18px;left:50%;transform:translateX(-50%);max-width:58%;padding:10px 20px;background:var(--brand-gold);color:#133e2d;box-shadow:0 5px 25px #e5c17d55;font-size:clamp(.875rem,2vw,1.25rem);font-weight:800;letter-spacing:.07em;text-align:center;pointer-events:none}
#tennis .tennis-yarn{min-height:88px;font-size:1.1rem;background:linear-gradient(110deg,#164a35,#0b3629)}
#tennis .tennis-yarn::before{content:'BIG RED · YOUR HOST';color:var(--brand-gold);font-weight:700}
#tennis .tennis-power-strip{display:flex;align-items:center;gap:20px;padding:18px 22px;background:#052e22;border-bottom:1px solid #d9bd7533}
#tennis .tennis-power-strip label{color:var(--brand-gold);font-size:.75rem;letter-spacing:.07em;min-width:185px}
#tennis .tennis-power-strip select{display:block;width:100%;margin-top:7px;font-size:.95rem;color:#fff2cf;background:#124c36;border:1px solid #d9bd7566;min-height:44px}
#tennis .tennis-charge{flex:1;min-width:100px}
#tennis progress{display:block;width:100%;height:10px;border:0;border-radius:9px;overflow:hidden;background:#ffffff18;accent-color:var(--brand-gold)}
#tennis progress::-webkit-progress-bar{background:#ffffff18}
#tennis progress::-webkit-progress-value{background:linear-gradient(90deg,var(--brand-gold),#ffe2a0)}
#tennis progress::-moz-progress-bar{background:var(--brand-gold)}
#tennis #tennisPowerStatus{display:block;margin-top:8px;color:#cdd6c8;font-size:.875rem;line-height:1.35}
#tennis #tennisPower{min-height:48px;max-width:275px;background:var(--brand-gold);color:#143b2d;border:1px solid var(--brand-gold);font-weight:700}
#tennis #tennisPower:disabled{background:#244c39;color:#c4c9b6;border-color:#d9bd7533}
#tennis #tennisPower[aria-pressed=true]{background:#fff0b8;box-shadow:0 0 24px #edcb7a44}
#tennis .tennis-result{padding:20px 24px;display:flex;align-items:center;gap:24px;background:#e0d6bb;color:#173d2b}
#tennis .tennis-result span{display:block;font-size:.75rem;letter-spacing:.1em}
#tennis .tennis-result strong{display:block;font:700 2.4rem/1.25 Georgia,serif}
#tennis .tennis-result p{font-size:1rem;line-height:1.5}
#tennis button:focus-visible,#tennis select:focus-visible,#tennis canvas:focus-visible{outline:3px solid #fff0ac;outline-offset:3px}
@media(max-width:650px){
 #tennis .tennis-settings{justify-content:flex-start;max-width:none;gap:12px}
 #tennis .tennis-settings label{flex:1 1 130px}#tennis .tennis-settings select{width:100%;max-width:none}
 #tennis .tennis-host-tag{left:8px;top:8px;padding:6px 8px;font-size:.75rem}#tennis .tennis-host-tag strong{font-size:.9rem}#tennis .tennis-host-tag span{display:none}
 #tennis .tennis-overlay{right:3%;top:28%;width:49%;padding:12px}
 #tennis .tennis-overlay-kicker{display:none}#tennis #tennisOverlayDetail{font-size:.875rem;margin-top:8px;line-height:1.2}
 #tennis .tennis-overlay button{margin-top:8px;padding:6px 10px;min-height:40px}
 #tennis .tennis-rally{bottom:8px;right:8px;font-size:.75rem;padding:5px 7px}
 #tennis .tennis-overlay[data-phase=replay]{top:8px;right:8px;padding:8px 10px}
 #tennis .tennis-overlay[data-phase=replay] strong{font-size:1.1rem}#tennis .tennis-overlay[data-phase=replay] #tennisOverlayDetail{display:none}
 #tennis .tennis-overlay[data-phase=between]{top:8px;right:8px;padding:8px 10px}
 #tennis .tennis-overlay[data-phase=between] strong{font-size:1rem}
 #tennis .tennis-shot-banner{top:auto;bottom:8px;left:8px;transform:none;padding:7px 10px;max-width:65%}
 #tennis .tennis-power-strip{padding:14px;gap:14px;flex-wrap:wrap}
 #tennis .tennis-power-strip label{min-width:145px;flex:1}#tennis .tennis-charge{flex:1}
 #tennis #tennisPower{max-width:none;width:100%}#tennis .tennis-result{padding:16px;gap:18px}
 #tennis .tennis-yarn{font-size:1rem;min-height:100px}#tennis .tennis-help{margin-block:0}
}
@media(max-width:390px){#tennis #tennisOverlayDetail{display:none}#tennis .tennis-overlay{top:33%}#tennis .tennis-overlay strong{font-size:1.05rem}}

#tennis .tennis-help .tennis-music-toggle span{font-size:.9rem;color:#e5e0ce}
#tennis .tennis-music-volume input[type=range]{width:170px}