/* Lovebug Tennis: the stage, the scoreboard over it, Clover's calls, the
   banners, the phone's swing buttons and nudge stick, and the result card. */

.tennis-wrap{position:relative}
#tennisStage{height:clamp(380px,68vh,760px);border-radius:24px;overflow:hidden;touch-action:none;background:#3b5a3a;box-shadow:0 0 0 1px rgba(160,220,140,.4),0 0 40px rgba(160,220,140,.16),0 20px 50px rgba(20,40,20,.45);user-select:none;-webkit-user-select:none}
#tennisStage canvas{display:block;width:100%;height:100%;touch-action:none}
.tennis-wrap:fullscreen{background:#3b5a3a}
.tennis-wrap:fullscreen #tennisStage,.tennis-wrap.is-expanded #tennisStage{height:100vh;height:100dvh;border-radius:0}
.tennis-wrap.is-expanded{position:fixed;inset:0;z-index:3000;background:#3b5a3a;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.tennis-expanded{overflow:hidden}
.tennis-wrap .bowl-expand{z-index:7}
.tennis-wrap:fullscreen .bowl-expand,.tennis-wrap.is-expanded .bowl-expand{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.tennis-ready{position:absolute;left:50%;bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px));transform:translateX(-50%);z-index:8;min-width:220px;min-height:52px;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 10px 30px rgba(70,160,90,.45)}
.tennis-ready[hidden]{display:none}
.tennis-ready.is-waiting{background:#fff;color:#2f7a4a;border:1px solid #2f7a4a}
.tennis-options{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tennis-options select{border-radius:12px;padding:8px 10px;border:1px solid #cfe3cf;background:#fff;font:inherit;max-width:100%}

/* ----- the HUD ----- */
.tn-hud{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:ui-rounded,"SF Pro Rounded",Nunito,system-ui,sans-serif;color:#fff}
.tn-board{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;width:min(560px,calc(100% - 140px));border-radius:16px;overflow:hidden;background:rgba(20,48,30,.62);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.tn-side{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:7px 10px}
.tn-side.is-theirs{grid-template-columns:auto 1fr;text-align:right}
.tn-side.is-theirs .tn-games{grid-column:1;grid-row:1}
.tn-side.is-theirs .tn-name{grid-column:2;grid-row:1}
.tn-side.is-theirs .tn-sets{grid-column:2}
.tn-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-games{font:900 22px/1 ui-rounded,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:22px;text-align:center}
.tn-sets{font-size:10px;opacity:.8}
.tn-side.is-mine{background:linear-gradient(90deg,rgba(232,93,138,.35),transparent)}
.tn-side.is-theirs{background:linear-gradient(270deg,rgba(63,174,138,.35),transparent)}
.tn-side.is-serving .tn-name::before{content:"🎾 ";font-size:11px}
.tn-side.is-theirs.is-serving .tn-name::before{content:none}
.tn-side.is-theirs.is-serving .tn-name::after{content:" 🎾";font-size:11px}
.tn-mid{display:grid;justify-items:center;align-content:center;padding:4px 10px;background:rgba(255,255,255,.08)}
.tn-call{font:800 15px/1.1 Georgia,serif;white-space:nowrap;color:#fff8d8;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tn-call.is-pop{animation:tn-pop .4s cubic-bezier(.2,1.6,.4,1)}
.tn-call.is-tiebreak{color:#ffd36b}
.tn-rally{font-size:10.5px;opacity:.85;min-height:12px}
.tn-banner{position:absolute;left:0;right:0;top:36%;text-align:center;font:italic 800 clamp(24px,4.4vw,46px)/1.1 Georgia,serif;text-shadow:0 0 14px #ffd36b,0 3px 0 #b07a1e,0 0 34px rgba(255,211,107,.6);padding:0 18px}
.tn-banner.is-big{font-size:clamp(46px,10vw,104px)}
.tn-banner.is-pop{animation:tn-pop .45s cubic-bezier(.2,1.6,.4,1)}
.tn-banner:empty{display:none}
@keyframes tn-pop{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
.tn-wobbly,.tn-watching{position:absolute;left:50%;top:74px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:rgba(240,170,40,.3);border:1px solid rgba(255,200,80,.6);font-size:12px}
.tn-watching{background:rgba(20,48,30,.6);border-color:rgba(255,255,255,.4)}
.tn-help{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(640px,94%);padding:9px 14px;border-radius:14px;background:rgba(20,48,30,.62);backdrop-filter:blur(6px);font-size:12.5px;line-height:1.5;text-align:center}
.tn-help small{opacity:.8}
.tn-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(420px,88%);padding:18px 20px;border-radius:24px;background:rgba(250,255,246,.95);color:#24502f;text-align:center;box-shadow:0 20px 50px rgba(10,30,15,.45)}
.tn-result h3{margin:0 0 6px;font:800 26px/1.1 Georgia,serif}
.tn-result p{margin:4px 0}
.tn-stakes{font-weight:800;color:#b34978}
.tn-stakes:empty{display:none}

/* ----- touch controls ----- */
.tn-controls{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;pointer-events:none;padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.tn-hud.is-touch .tn-controls{display:flex}
.tn-hud.is-touch .tn-help{display:none}
.tn-controls button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;pointer-events:auto;font-family:inherit}
.tn-stick{pointer-events:auto;touch-action:none;padding:4px}
.tn-stick-base{position:relative;width:clamp(96px,26vw,124px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0 38%,rgba(20,48,30,.5) 39%);border:2px solid rgba(255,255,255,.5);box-shadow:0 8px 20px rgba(10,30,15,.35)}
.tn-stick-knob{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8f0c8 70%);box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .06s linear;pointer-events:none}
.tn-shots{display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.tn-small{display:grid;gap:8px}
.tn-shot{width:clamp(70px,20vw,90px);height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.65);background:rgba(20,48,30,.66);color:#fff;font-weight:800;font-size:14px;box-shadow:0 4px 10px rgba(5,20,10,.35)}
.tn-shot.is-lob{border-color:#9fd3ff}
.tn-shot.is-slice{border-color:#ffd36b}
.tn-swing{width:clamp(96px,27vw,124px);height:clamp(96px,27vw,124px);border-radius:50%;border:3px solid rgba(255,255,255,.8);background:radial-gradient(circle at 35% 30%,#f6ffb0,#c9dc3a 55%,#8fae22 80%);color:#2f4410;font:900 19px/1 ui-rounded,system-ui,sans-serif;box-shadow:0 10px 24px rgba(60,90,10,.45)}
.tn-swing.is-serve{background:radial-gradient(circle at 35% 30%,#ffe0ef,#f48ab4 60%,#d8507f 85%);color:#fff}
.tn-controls .is-pressed{animation:tn-press .16s ease-out}
@keyframes tn-press{40%{transform:scale(.86);filter:brightness(1.2)}}
@media (max-height:520px){
  .tn-stick-base{width:96px}
  .tn-shot{height:36px;width:68px;font-size:12px}
  .tn-swing{width:86px;height:86px;font-size:16px}
}
@media(max-width:600px){
  .tn-board{width:calc(100% - 20px);top:52px}
  .tn-name{font-size:11.5px}
  .tn-games{font-size:18px}
  .tn-call{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.tn-banner.is-pop,.tn-call.is-pop{animation:none}}