.tennis-section { background:var(--purple); border-top:2px solid var(--ink); }
.tennis-section h2 { font-size:clamp(2.5rem,5.4vw,5rem); line-height:1; }
.tennis-section .section-heading > p { max-width:500px; }
.tennis-game { display:grid; grid-template-columns:minmax(0,1fr); max-width:1000px; margin-inline:auto; background:var(--paper); border:2px solid var(--ink); border-radius:8px; box-shadow:6px 6px 0 var(--ink); overflow:clip; scroll-margin-top:16px; }
.tennis-topline { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; padding:12px 22px; border-bottom:2px solid var(--ink); background:var(--paper); }
.tennis-opponent { display:flex; align-items:center; gap:12px; font-size:1rem; font-weight:800; }
.tennis-vs { font-family:Georgia,serif; font-style:italic; color:#922418; padding-inline:5px; }
.tennis-portrait,.tennis-head { display:block; object-fit:contain; background:none; border:0; border-radius:0; box-shadow:none; }
.tennis-portrait { flex:none; width:64px; height:64px; }
.tennis-personal-best { margin-left:auto; font-size:.75rem; }
.tennis-personal-best strong { margin-left:8px; font-size:1.1rem; }
.tennis-topline .text-button { min-height:48px; font-size:.85rem; }
.tennis-hud { display:grid; grid-template-columns:1fr 1fr 1.5fr; border-bottom:2px solid var(--ink); background:var(--yellow); }
.tennis-hud > div { min-width:0; padding:7px 18px; }
.tennis-hud > div + div { border-left:1px solid var(--ink); }
.tennis-hud span { display:block; font-size:.75rem; font-weight:700; }
.tennis-hud strong { display:block; font-family:Impact,'Arial Narrow',sans-serif; font-weight:400; font-size:1.7rem; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tennis-server strong { font-family:inherit; font-weight:800; font-size:1rem; padding-top:4px; }
.tennis-stage { position:relative; width:100%; max-width:620px; aspect-ratio:600/580; margin:auto; overflow:hidden; isolation:isolate; touch-action:pan-y; background:#f3eddc; }
.tennis-game:not([data-phase=ready]):not([data-phase=ended]):not([data-phase=paused]) .tennis-stage { touch-action:none; cursor:ew-resize; }
.tennis-stage:focus-visible { outline-offset:-5px; }
.tennis-world { position:absolute; top:0; left:0; width:600px; height:580px; transform-origin:0 0; pointer-events:none; }
.tennis-court { position:absolute; top:140px; left:0; z-index:2; width:600px; height:440px; }
.tennis-table { fill:var(--sky); }
.tennis-athlete { position:absolute; inset:0; width:600px; height:580px; z-index:4; overflow:visible; }
.tennis-player { position:absolute; top:0; left:0; width:80px; height:110px; z-index:5; transform-origin:0 0; }
.tennis-player svg { display:block; width:100%; height:100%; overflow:visible; }
.tennis-player { z-index:7; }
.tennis-wrist { transform-origin:38px 90px; }
.tennis-ball { position:absolute; left:0; top:0; width:18px; height:18px; z-index:6; background:var(--paper); border:2px solid var(--ink); border-radius:50%; will-change:transform; }
.tennis-ball-shadow { position:absolute; left:0; top:0; width:18px; height:6px; z-index:3; border-radius:50%; background:var(--ink); }
.tennis-landing { position:absolute; left:0; top:0; width:116px; height:16px; z-index:3; border:2px dashed var(--ink); border-radius:50%; background:#ffe75c88; }
.tennis-bounce { position:absolute; left:0; top:0; width:24px; height:8px; z-index:3; border:3px solid var(--paper); border-radius:50%; }
.tennis-ready-sticker { position:absolute; z-index:6; left:24px; top:25px; width:155px; background:var(--yellow); border:2px solid var(--ink); padding:12px; transform:rotate(-8deg); box-shadow:3px 3px 0 var(--ink); }
.tennis-ready-sticker > span { font-size:13px; font-weight:800; }
.tennis-ready-sticker strong { display:block; font-family:Impact,'Arial Narrow',sans-serif; font-size:27px; line-height:1.1; margin-top:5px; }
.tennis-game:not([data-phase=ready]) .tennis-ready-sticker { display:none; }
.tennis-game[data-phase=ended] .tennis-stage { display:none; }
.tennis-game[data-phase=paused] .tennis-stage { visibility:hidden; grid-row:3; grid-column:1; }
.tennis-game[data-phase=paused] .tennis-overlay { grid-row:3; grid-column:1 / -1; }
.tennis-game[data-phase=paused] .tennis-play-controls { visibility:hidden; }
.tennis-setup,.tennis-play-controls,.tennis-result { padding:18px 24px; border-top:2px solid var(--ink); }
.tennis-result { background:var(--paper); }
.tennis-how { margin:0 0 16px; font-size:1rem; }
.tennis-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.tennis-actions .text-button { min-height:48px; font-size:.85rem; }
.tennis-key-hint { font-size:.85rem; line-height:1.45; margin:10px 0; }
.tennis-setup .under-link { margin:0; }
#tennis-feedback { font-weight:700; font-size:.9rem; margin:0 0 10px; min-height:2.6em; line-height:1.35; }
#tennis-training { margin:0 0 10px; font-size:.9rem; font-weight:700; padding:10px; background:var(--yellow); border-left:3px solid var(--ink); }
.tennis-touchpad { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; border:2px solid var(--ink); border-radius:6px; background:linear-gradient(var(--red),var(--red)) no-repeat 50% 100% / 20% 4px,var(--purple); touch-action:none; cursor:ew-resize; user-select:none; font-size:.85rem; font-weight:700; line-height:1.3; }
.tennis-guide { margin-top:8px; }
.tennis-guide summary { min-height:48px; display:flex; align-items:center; cursor:pointer; text-decoration:underline; font-size:.85rem; font-weight:700; }
.tennis-guide summary::before { content:'+'; margin-right:10px; }
.tennis-guide[open] summary::before { content:'−'; }
.tennis-aim-label { display:block; font-size:.8rem; font-weight:700; }
#tennis-aim { display:block; width:100%; height:48px; margin:0; cursor:ew-resize; accent-color:var(--red); touch-action:pan-y; }
#tennis-practice-controls { border-top:1px solid #1b202144; }
#tennis-practice-controls .text-button { min-height:48px; font-size:.9rem; }
.tennis-skip { display:inline-flex; min-height:48px; align-items:center; font-size:.85rem; font-weight:800; }
.tennis-overlay { position:relative; z-index:10; min-height:300px; background:var(--paper); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:24px; text-align:center; }
.tennis-overlay h3 { font-size:2rem; margin:0; }
.tennis-overlay p { margin:0; font-size:1rem; }
.tennis-overlay .button { font-size:.9rem; }
.tennis-overlay .under-link { margin:0; }
.tennis-overlay .text-button { min-height:48px; font-size:.9rem; }
.tennis-result h3 { font-size:clamp(1.9rem,4vw,3rem); margin:15px 0; line-height:1.05; }
.tennis-result .eyebrow { margin:0; }
.tennis-result-total { margin:0; }
.tennis-result-total strong { font-family:Impact,'Arial Narrow',sans-serif; font-size:clamp(1.6rem,4vw,2.6rem); font-weight:400; overflow-wrap:anywhere; }
.tennis-result > p:not([class]) { font-size:1rem; max-width:800px; }
.tennis-result .tennis-actions { margin-top:24px; }
.tennis-section-footer { max-width:1000px; margin:20px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; font-size:.85rem; }
.tennis-section-footer a { display:inline-flex; align-items:center; min-height:48px; font-weight:700; }
.tennis-invite { display:block; font-size:.85rem; margin-top:12px; font-weight:700; }
@media(max-width:760px){
  .tennis-section .section-heading { display:block; }
  .tennis-section .section-heading > p { margin:22px 0 0; font-size:1rem; }
  .tennis-topline { padding:8px 12px; gap:6px 10px; }
  .tennis-opponent { font-size:.85rem; gap:8px; }
  .tennis-portrait { width:44px; height:48px; }
  .tennis-personal-best { font-size:.75rem; }
  .tennis-topline:has(#tennis-pause:not([hidden])) .tennis-personal-best { display:none; }
  .tennis-topline .text-button { margin-left:auto; }
  .tennis-hud > div { padding:6px 12px; }
  .tennis-hud strong { font-size:1.4rem; }
  .tennis-hud .tennis-server strong { font-size:.9rem; }
  .tennis-setup,.tennis-play-controls,.tennis-result { padding:12px; }
  .tennis-actions { gap:10px; }
  .tennis-actions .button { width:100%; font-size:.9rem; justify-content:center; text-align:center; }
  #tennis-feedback { font-size:.85rem; }
  .tennis-touchpad { font-size:.8rem; padding:8px 10px; }
}
@media(prefers-reduced-motion:reduce){.tennis-ball { will-change:auto; }}
@media (min-width: 761px) and (max-width: 1099px) {
  .tennis-game:not([data-phase=ready]) .tennis-stage {
    max-width: clamp(220px, calc((100svh - 350px) * 600 / 580), 620px);
  }
}
/* Keep the same world size before and after starting, with instructions alongside it. */
@media(min-width:1100px){
  .tennis-game { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); background:linear-gradient(90deg,#f3eddc 60%,var(--paper) 60%); }
  .tennis-topline,.tennis-hud,.tennis-overlay,.tennis-result { grid-column:1 / -1; }
  .tennis-stage { align-self:start; }
  .tennis-stage { max-width:clamp(320px,calc((100dvh - 350px) * 1.03448),620px); }
  .tennis-game[data-phase=paused] .tennis-play-controls { grid-row:3; grid-column:2; }
  .tennis-setup,.tennis-play-controls { border-top:0; border-left:2px solid var(--ink); padding:20px; }
  .tennis-how { font-size:.9rem; }
  .tennis-setup .tennis-actions { gap:8px; }
  .tennis-setup .button { width:100%; font-size:.9rem; justify-content:center; }
  .tennis-setup .tennis-key-hint { font-size:.8rem; }
}

.tennis-mode { font-size:.75rem; font-weight:800; background:var(--yellow,#ffe75b); border:2px solid var(--ink); padding:4px 8px; border-radius:4px; max-width:100%; overflow-wrap:anywhere; }
.tennis-difficulties { border:0; padding:0; margin:0 0 16px; min-width:0; display:grid; gap:8px; }
.tennis-difficulties legend { font-weight:800; margin-bottom:8px; }
.tennis-difficulties label { display:flex; gap:10px; align-items:center; padding:10px; border:2px solid var(--ink); border-radius:4px; cursor:pointer; background:var(--paper); }
.tennis-difficulties label:has(:checked) { background:var(--yellow,#ffe75b); box-shadow:3px 3px 0 var(--ink); }
.tennis-difficulties label:has(:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.tennis-difficulties input { width:22px; height:22px; flex:none; accent-color:var(--ink); }
.tennis-difficulties small { display:block; font-size:.75rem; }
@media (min-width:1100px) {
  .tennis-difficulties { grid-template-columns:repeat(auto-fit,minmax(min(100%,7.2rem),1fr)); gap:8px; margin-bottom:6px; }
  .tennis-difficulties legend { font-size:.8rem; margin-bottom:6px; }
  .tennis-difficulties label { gap:6px; padding:8px; min-width:0; }
  .tennis-difficulties strong { font-size:.8rem; }
  .tennis-difficulties small { font-size:.65rem; }
}
.tennis-rules { margin-top:8px; font-size:.8rem; }
.tennis-rules summary { cursor:pointer; font-weight:700; min-height:40px; }

.tennis-info-mobile { display: none; }

@media (max-width: 760px) {
  .tennis-section.section-pad { padding-block: 25px 32px; }
  .tennis-section > .section-heading { margin-bottom: 14px; }
  .tennis-section .section-heading .eyebrow { margin-bottom: 8px; }
  .tennis-section h2 { font-size: clamp(2rem, 10vw, 2.65rem); }
  .tennis-game[data-phase=ready] .tennis-stage {
    order: 1;
    width: min(100%, 230px);
    margin-block: 6px 10px;
    border: 1px solid var(--ink);
  }
  .tennis-game[data-phase=ready] .tennis-portrait { width: 32px; height: 36px; }
  .tennis-game[data-phase=ready] #tennis-mode { min-inline-size: 7.5em; text-align: center; }
  .tennis-game[data-phase=ready] .tennis-personal-best { font-size: .7rem; }
  .tennis-setup { border-top: 0; }
  .tennis-difficulties { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
  .tennis-difficulties legend { font-size: .8rem; }
  .tennis-difficulties label { gap: 6px; min-width: 0; padding: 7px; }
  .tennis-difficulties input { width: 16px; height: 16px; margin: 0; }
  .tennis-difficulties strong { display: block; font-size: .78rem; line-height: 1.15; }
  .tennis-difficulties small { font-size: .71rem; font-weight: 700; line-height: 1.2; margin-top: 3px; }
  .tennis-intro-desktop, .tennis-how-desktop { display: none; }
  .tennis-info-mobile { display: block; }
  .tennis-setup .tennis-actions { gap: 2px 14px; }
  .tennis-setup .tennis-actions a { display: inline-flex; align-items: center; min-height: 44px; }
  .tennis-rules { margin-top: 0; }
  .tennis-rules summary { padding-block: 9px; min-height: 44px; }
}

@media (max-width: 360px) {
  .tennis-game[data-phase=ready] .tennis-topline { padding-inline: 10px; column-gap: 8px; }
  .tennis-game[data-phase=ready] .tennis-opponent { gap: 6px; }
  .tennis-game[data-phase=ready] .tennis-vs { padding-inline: 2px; }
  .tennis-game[data-phase=ready] .tennis-portrait { width: 28px; }
}

@media (max-width: 760px) and (max-height: 600px) {
  .tennis-game:not([data-phase=ready]) .tennis-stage {
    max-width: max(220px, calc((100svh - 273px) * 600 / 580));
  }
  .tennis-play-controls:not([hidden]) { display: flex; flex-direction: column; }
  .tennis-touchpad { order: -1; margin-bottom: 8px; }
}