:root {
  color-scheme: dark;
  --forest-950: #021a14;
  --forest-900: #03271f;
  --forest-850: #063428;
  --forest-800: #084331;
  --forest-700: #0d5a40;
  --cream-50: #fff9e7;
  --cream-100: #fff0c7;
  --lime: #c9f146;
  --gold: #ffd65a;
  --blue: #2697e7;
  --green: #37bf5f;
  --red: #ef5a4c;
  --ink: #083629;
  --white: #fffdf5;
  --line: rgba(255, 255, 255, 0.14);
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 16% -10%, rgba(30, 126, 88, 0.42), transparent 36%),
    radial-gradient(circle at 92% 112%, rgba(217, 97, 50, 0.22), transparent 35%),
    linear-gradient(135deg, #021711 0%, #052e23 48%, #011c15 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 14%, rgba(255, 214, 90, 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 24%, rgba(84, 169, 255, 0.06) 0 1px, transparent 2px);
  background-size: 44px 44px, 62px 62px;
}
button, canvas { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, canvas:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
button:disabled { cursor: not-allowed; filter: grayscale(0.35); opacity: 0.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-app {
  width: min(1920px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(8px, 1vw, 16px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 0.8vw, 14px);
}

.game-header {
  position: relative;
  z-index: 5;
  min-height: 122px;
  padding: 10px clamp(12px, 1.25vw, 24px);
  display: grid;
  grid-template-columns: minmax(340px, 1.15fr) minmax(210px, 0.62fr) minmax(420px, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.15vw, 22px);
  border: 1px solid rgba(105, 204, 150, 0.26);
  border-radius: 26px 26px 34px 34px;
  background: linear-gradient(180deg, rgba(2, 45, 34, 0.99), rgba(3, 35, 27, 0.99));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.game-header::before {
  content: "";
  position: absolute;
  width: 650px;
  height: 150px;
  left: 125px;
  top: -100px;
  border: 28px solid rgba(148,228,96,0.07);
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}
.game-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,185,93,0.52), transparent);
  pointer-events: none;
}
.brand-block { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: clamp(12px, 1.1vw, 20px); }
.brand-logo { width: clamp(88px, 7vw, 126px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35)); }
.brand-copy { min-width: 0; }
.brand-copy h1 { margin: 0; font-size: clamp(1.7rem, 2.5vw, 3rem); line-height: 0.95; letter-spacing: -0.045em; white-space: nowrap; text-shadow: 0 5px 0 rgba(0,0,0,0.2); }
.brand-copy p { margin: 9px 0 0; color: #9ac8b7; font-size: clamp(0.63rem,0.82vw,0.86rem); font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; }
.title-ball { position: relative; display: inline-grid; place-items: center; width: .78em; height: .78em; margin-left: .1em; color: #d9f334; font-size: .64em; text-shadow: none; vertical-align: .12em; }
.title-ball::after { content: ""; position: absolute; width: 190%; height: 70%; right: 45%; top: 28%; border-top: 4px solid rgba(198,242,72,0.34); border-radius: 50%; transform: rotate(-14deg); }

.target-card {
  position: relative;
  min-height: 86px;
  padding: 12px 58px 12px 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.33), rgba(5,52,39,0.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 25px rgba(0,0,0,0.2);
  text-align: center;
}
.target-card > span:first-child { color: #d5dfd9; font-size: clamp(.65rem,.72vw,.8rem); font-weight: 950; letter-spacing: .07em; }
.target-card strong { color: var(--lime); font-size: clamp(1.3rem,1.75vw,2rem); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.25),0 0 24px rgba(201,241,70,.18); }
.target-reticle { position: absolute; right: 16px; top: 50%; width: 42px; aspect-ratio: 1; border: 3px solid var(--lime); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 16px rgba(201,241,70,.22),inset 0 0 0 6px rgba(201,241,70,.1); }
.target-reticle::before,.target-reticle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--lime); transform: translate(-50%,-50%); }
.target-reticle::before { width: 52px; height: 3px; }
.target-reticle::after { width: 3px; height: 52px; }

.scoreboard { position: relative; display: grid; grid-template-rows: repeat(2,minmax(38px,auto)) auto; gap: 5px; min-width: 0; }
.score-row { min-width: 0; display: grid; grid-template-columns: 40px 10px minmax(72px,1fr) repeat(3,42px) 58px; align-items: center; gap: 6px; }
.score-avatar { width: 40px; height: 40px; border-radius: 50%; filter: drop-shadow(0 5px 8px rgba(0,0,0,.32)); }
.player-status { width: 10px; height: 10px; border-radius: 50%; background: #ff8852; box-shadow: 0 0 14px rgba(255,136,82,.82); }
.player-status-you { background: #3da7ff; box-shadow: 0 0 14px rgba(61,167,255,.86); }
.player-name { overflow: hidden; text-overflow: ellipsis; font-size: clamp(.74rem,.9vw,1rem); font-weight: 950; letter-spacing: .035em; white-space: nowrap; }
.score-cell { min-width: 0; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(0,0,0,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-size: clamp(.9rem,1.1vw,1.18rem); font-weight: 950; }
.score-cell-large { height: 42px; border-width: 2px; font-size: 1.35rem; }
.opponent-game-total { color: #efffcd; border-color: rgba(192,239,72,.66); background: linear-gradient(180deg,rgba(65,121,21,.92),rgba(32,83,12,.92)); }
.player-game-total { color: #e7f6ff; border-color: rgba(66,169,255,.7); background: linear-gradient(180deg,rgba(27,111,184,.95),rgba(14,77,139,.95)); }
.score-labels { display: grid; grid-template-columns: 40px 10px minmax(72px,1fr) repeat(3,42px) 58px; gap: 6px; color: #8cae9f; font-size: .48rem; font-weight: 950; letter-spacing: .08em; text-align: center; }
.score-labels span:first-child { grid-column: 4; }
.header-actions { display: flex; gap: 10px; justify-content: flex-end; }
.round-icon-button { width: clamp(48px,3.7vw,64px); aspect-ratio: 1; padding: 0; display: grid; place-items: center; border: 2px solid rgba(113,198,151,.36); border-radius: 18px; color: white; background: linear-gradient(180deg,rgba(21,91,67,.95),rgba(4,48,36,.98)); box-shadow: 0 6px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15); cursor: pointer; font-size: clamp(1.2rem,1.55vw,1.65rem); font-weight: 950; transition: transform .14s ease,filter .14s ease; }
.round-icon-button:hover { filter: brightness(1.16); transform: translateY(-2px); }
.round-icon-button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12); }

.play-layout { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) clamp(255px,21vw,340px); gap: clamp(10px,1vw,18px); align-items: start; }
.arena-shell { position: relative; min-width: 0; min-height: 600px; overflow: hidden; border: 1px solid rgba(91,186,133,.28); border-radius: 28px; background: #062c22; box-shadow: var(--shadow),inset 0 0 0 1px rgba(255,255,255,.04); isolation: isolate; }
.arena-shell::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 70px rgba(0,0,0,.32); pointer-events: none; }
#gameCanvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.exit-button { position: absolute; z-index: 8; top: 18px; left: 18px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: white; background: rgba(3,35,28,.86); box-shadow: 0 8px 20px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(10px); cursor: pointer; font-size: .78rem; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.exit-button:hover { background: rgba(12,83,61,.94); }
.serve-widget { position: absolute; z-index: 6; left: 22px; top: 50%; width: 82px; min-height: 82px; padding: 10px; display: grid; place-items: center; align-content: center; gap: 2px; border: 2px solid rgba(75,159,113,.55); border-radius: 17px; background: linear-gradient(180deg,rgba(9,63,47,.96),rgba(3,36,28,.96)); box-shadow: 0 7px 0 rgba(0,0,0,.25),0 15px 25px rgba(0,0,0,.18); transform: translateY(-50%); pointer-events: none; }
.serve-widget span { color: #b9d2c8; font-size: .58rem; font-weight: 950; letter-spacing: .12em; }
.serve-widget strong { color: #ffe35f; font-size: .9rem; }
.serve-widget i { width: 15px; height: 15px; margin-top: 4px; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; background: #cfea37; box-shadow: 0 0 10px rgba(207,234,55,.46); }
.status-toast { position: absolute; z-index: 9; left: 50%; bottom: 82px; max-width: min(70%,620px); padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: white; background: rgba(2,33,25,.88); box-shadow: 0 12px 28px rgba(0,0,0,.25); transform: translateX(-50%); backdrop-filter: blur(12px); pointer-events: none; font-size: clamp(.68rem,.8vw,.86rem); font-weight: 900; text-align: center; transition: opacity .18s ease,transform .18s ease; }
.status-toast.hidden { opacity: 0; transform: translate(-50%,8px); }
.touch-controls { position: absolute; z-index: 10; left: 50%; bottom: 17px; display: flex; align-items: flex-end; gap: 10px; transform: translateX(-50%); }
.touch-button { min-width: 58px; height: 50px; padding: 0 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; color: white; background: linear-gradient(180deg,rgba(14,78,58,.96),rgba(3,42,32,.96)); box-shadow: 0 6px 0 rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12); cursor: pointer; font-weight: 950; user-select: none; touch-action: manipulation; }
.swing-button { min-width: 112px; height: 58px; border-color: rgba(130,242,146,.55); background: linear-gradient(180deg,#53d66c,#23a843); box-shadow: 0 7px 0 #126c2d,0 13px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42); letter-spacing: .04em; }
.touch-button:active,.touch-button.is-active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.arena-tip { position: absolute; z-index: 7; left: 50%; bottom: 16px; width: min(720px,64%); min-height: 47px; padding: 8px 145px 8px 15px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(113,211,155,.34); border-radius: 999px; color: #e4f1eb; background: rgba(3,47,35,.82); box-shadow: 0 8px 24px rgba(0,0,0,.23); transform: translateX(-50%); backdrop-filter: blur(10px); font-size: clamp(.61rem,.73vw,.78rem); }
.arena-tip strong { color: var(--gold); }
.tip-bulb { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid rgba(255,214,90,.38); border-radius: 50%; background: rgba(255,214,90,.12); }

.practice-card { position: relative; align-self: start; min-height: 0; padding: clamp(9px,.8vw,15px); display: grid; grid-template-rows: auto minmax(56px,auto) auto auto auto auto auto auto; align-items: center; gap: clamp(6px,.55vh,10px); overflow: hidden; border: 3px solid #377e58; border-radius: 34px; color: var(--ink); background: radial-gradient(circle at 70% 1%,rgba(255,255,255,.7),transparent 25%),linear-gradient(180deg,#fff9e9,#fff0c8); box-shadow: 0 0 0 5px rgba(2,45,34,.7),0 0 0 7px rgba(105,171,120,.42),var(--shadow),inset 0 1px 0 rgba(255,255,255,.9); }
.practice-card::before,.practice-card::after { content: "✦"; position: absolute; color: rgba(214,181,81,.65); font-size: 1.25rem; }
.practice-card::before { left: 18px; top: 22px; }
.practice-card::after { right: 30px; top: 120px; }
.sound-picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 4px 0; }
.sound-picker label { display: flex; flex-direction: column; gap: 3px; font-size: .6rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #bfe6cf; }
.sound-picker select { font: inherit; font-weight: 800; font-size: .95rem; padding: 7px 12px; border-radius: 12px; border: 2px solid rgba(113,198,151,.5); background: #063a2b; color: #fff; cursor: pointer; }
.practice-star { position: absolute; z-index: 2; right: 17px; top: 14px; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid #f0bd27; border-radius: 50%; color: white; background: linear-gradient(180deg,#ffd85c,#f5b820); box-shadow: 0 6px 0 #c38611,0 10px 18px rgba(107,74,12,.22),inset 0 1px 0 rgba(255,255,255,.75); font-size: 1.4rem; transform: rotate(8deg); }
.practice-card-heading { width: 100%; padding-right: 50px; display: flex; justify-content: space-between; gap: 10px; color: #8b5f2b; font-size: clamp(.62rem,.72vw,.78rem); font-weight: 950; letter-spacing: .06em; }
.practice-card-heading span:last-child { color: #248545; }
.picture-frame { position: relative; width: 100%; min-height: 0; overflow: hidden; border: 4px solid #a4c96a; border-radius: 26px; background: linear-gradient(180deg,#83cdf2 0 56%,#f8dd99 56% 72%,#86b84e 72% 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.68),0 8px 16px rgba(55,86,42,.15); }
.picture-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 14%,rgba(255,255,255,.78),transparent 18%); }
.picture-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.word-emoji { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: clamp(3.1rem,4.4vw,5.2rem); filter: drop-shadow(0 12px 8px rgba(0,0,0,.18)); }
.word-emoji[hidden] { display: none; }
.practice-card h2 { width: 100%; margin: 2px 0 0; overflow-wrap: anywhere; color: #07392c; font-size: clamp(1.5rem,2.2vw,2.8rem); line-height: .95; letter-spacing: -.045em; text-align: center; text-shadow: 0 2px 0 rgba(255,255,255,.9); }
.word-dots { width: 84%; height: 5px; margin: 0 auto; opacity: .62; background-image: radial-gradient(circle,#89a24b 2px,transparent 2.5px); background-size: 12px 5px; }
.practice-card p { margin: 0; color: #315b49; font-size: clamp(.82rem,1vw,1.04rem); font-weight: 850; text-align: center; }
.hear-button { width: 100%; min-height: clamp(62px,7vh,78px); padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 2px solid #8bc7f2; border-radius: 20px; color: white; background: linear-gradient(180deg,#36a9f3,#1678c9); box-shadow: 0 8px 0 #0b579d,0 14px 20px rgba(21,86,139,.24),inset 0 1px 0 rgba(255,255,255,.48); cursor: pointer; font-size: clamp(1rem,1.15vw,1.25rem); font-weight: 950; letter-spacing: .02em; text-transform: uppercase; transition: transform .14s ease,filter .14s ease; }
.hear-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.hear-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #0b579d; }
.rating-buttons { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.rating-button { min-width: 0; min-height: clamp(94px,12vh,126px); padding: 10px; display: grid; place-items: center; align-content: center; gap: 4px; border: 2px solid rgba(255,255,255,.5); border-radius: 22px; color: white; cursor: pointer; font-size: clamp(.88rem,1vw,1.05rem); font-weight: 950; letter-spacing: .02em; text-transform: uppercase; transition: transform .14s ease,filter .14s ease; }
.rating-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.rating-button:active { transform: translateY(6px); }
.rating-correct { background: linear-gradient(180deg,#54d46c,#2caf4a); box-shadow: 0 9px 0 #187a34,0 14px 18px rgba(24,122,52,.22),inset 0 1px 0 rgba(255,255,255,.48); }
.rating-incorrect { background: linear-gradient(180deg,#f36b5e,#d84439); box-shadow: 0 9px 0 #9e2825,0 14px 18px rgba(158,40,37,.22),inset 0 1px 0 rgba(255,255,255,.42); }
.rating-icon { font-size: clamp(2rem,2.7vw,3.1rem); line-height: .9; }
.practice-stats { align-self: end; width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.practice-stats div { min-width: 0; padding: 8px 4px; display: grid; place-items: center; border: 1px solid rgba(65,89,55,.16); border-radius: 14px; background: rgba(255,255,255,.42); }
.practice-stats strong { font-size: 1.15rem; }
.practice-stats span { color: #5b7768; font-size: .54rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }

.game-dialog { width: min(560px,calc(100vw - 28px)); padding: 0; border: 1px solid rgba(112,201,151,.36); border-radius: 26px; color: white; background: linear-gradient(180deg,#0b4a37,#03271f); box-shadow: 0 30px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1); }
.game-dialog::backdrop { background: rgba(0,15,11,.72); backdrop-filter: blur(7px); }
.game-dialog form { position: relative; padding: 34px; }
.dialog-close { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; color: white; background: rgba(0,0,0,.2); cursor: pointer; font-size: 1.4rem; }
.dialog-kicker { color: var(--lime); font-size: .68rem; font-weight: 950; letter-spacing: .14em; }
.game-dialog h2 { margin: 8px 0 12px; font-size: clamp(1.8rem,4vw,2.5rem); line-height: 1; }
.game-dialog p { color: #c7dbd3; line-height: 1.55; }
.control-grid { margin: 24px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.control-grid > div { min-height: 76px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(0,0,0,.16); text-align: center; }
.control-grid span:last-child { margin-left: 5px; color: #cce0d8; font-size: .78rem; font-weight: 850; }
kbd { min-width: 36px; padding: 8px; border: 1px solid rgba(255,255,255,.26); border-bottom-width: 4px; border-radius: 9px; color: white; background: #0a3c2d; font: 850 .78rem system-ui,sans-serif; text-align: center; }
.gesture-icon { font-size: 1.8rem; }
.dialog-note { font-size: .85rem; }
.primary-dialog-button { width: 100%; min-height: 54px; margin-top: 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 16px; color: #103523; background: linear-gradient(180deg,#d6f55a,#9bce2e); box-shadow: 0 7px 0 #5f8c17; cursor: pointer; font-weight: 950; }
.setting-row { margin: 12px 0; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(0,0,0,.14); }
.setting-row span { display: grid; gap: 4px; }
.setting-row small { color: #adc9be; }
.setting-toggle { min-width: 82px; min-height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: white; background: #0c5a42; cursor: pointer; font-weight: 950; }
.setting-toggle[aria-pressed="true"] { color: #18361e; background: var(--lime); }
.celebration-dialog { text-align: center; }
.celebration-mark { font-size: 4rem; }

@media (max-width: 1470px) {
  .game-header { grid-template-columns: minmax(285px,1fr) minmax(190px,.6fr) minmax(360px,.95fr) auto; min-height: 108px; }
  .brand-logo { width: 82px; }
  .brand-copy p { display: none; }
  .score-row,.score-labels { grid-template-columns: 34px 8px minmax(58px,1fr) repeat(3,36px) 50px; gap: 4px; }
  .score-avatar { width: 34px; height: 34px; }
  .score-cell { height: 34px; }
  .score-cell-large { height: 38px; }
  .round-icon-button { width: 49px; border-radius: 15px; }
  .play-layout { grid-template-columns: minmax(0,1fr) clamp(320px,28vw,410px); }
  .practice-card { padding: 18px; border-radius: 27px; }
  .practice-star { width: 42px; height: 42px; }
}

@media (max-width: 1120px) {
  .game-app { min-height: auto; }
  .game-header { grid-template-columns: minmax(260px,1.2fr) minmax(175px,.7fr) auto; grid-template-areas: "brand target actions" "score score score"; }
  .brand-block { grid-area: brand; }
  .target-card { grid-area: target; }
  .scoreboard { grid-area: score; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .header-actions { grid-area: actions; }
  .score-row { grid-template-columns: 34px 8px minmax(62px,1fr) repeat(3,38px) 52px; }
  .score-labels { display: none; }
  .play-layout { grid-template-columns: minmax(0,1fr) 335px; }
  .arena-shell { min-height: 680px; }
  .arena-tip { display: none; }
}

@media (max-width: 860px) {
  body { overflow: auto; }
  .game-header { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "target target" "score score"; border-radius: 22px; }
  .brand-logo { width: 72px; }
  .brand-copy h1 { font-size: clamp(1.35rem,5vw,2rem); }
  .target-card { min-height: 68px; }
  .play-layout { grid-template-columns: 1fr; }
  .arena-shell { min-height: min(76vh,760px); }
  .practice-card { min-height: 690px; grid-template-rows: auto 250px auto auto auto auto auto 1fr auto; }
  .practice-card h2 { font-size: clamp(2.5rem,9vw,4rem); }
}

@media (max-width: 560px) {
  .game-app { padding: 6px; gap: 7px; }
  .game-header { padding: 9px; gap: 8px; }
  .brand-logo { width: 60px; }
  .brand-copy h1 { font-size: 1.28rem; }
  .header-actions { gap: 6px; }
  .round-icon-button { width: 40px; border-radius: 12px; font-size: 1rem; }
  .target-card { min-height: 60px; padding: 8px 48px 8px 12px; }
  .target-reticle { width: 34px; }
  .scoreboard { display: grid; grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 32px 8px minmax(56px,1fr) repeat(3,34px) 46px; }
  .arena-shell { min-height: 600px; border-radius: 20px; }
  .exit-button { top: 10px; left: 10px; min-height: 38px; padding: 0 12px; font-size: .65rem; }
  .serve-widget { left: 10px; width: 66px; min-height: 70px; }
  .status-toast { bottom: 76px; max-width: 88%; }
  .touch-controls { bottom: 12px; gap: 6px; }
  .touch-button { min-width: 50px; height: 46px; padding: 0 13px; }
  .swing-button { min-width: 96px; height: 52px; }
  .practice-card { min-height: 660px; padding: 16px; grid-template-rows: auto 215px auto auto auto auto auto 1fr auto; }
  .game-dialog form { padding: 28px 20px 24px; }
  .control-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Keep the illustrated word art at a consistent card height. */
.picture-frame {
  height: 100%;
  align-self: stretch;
}

/* --------------------------------------------------------------------------
   Player roster selection
   -------------------------------------------------------------------------- */
body.selection-open { overflow: hidden; }
body.selection-open .game-app { pointer-events: none; user-select: none; filter: saturate(.72) brightness(.62); }
.score-avatar { object-fit: cover; object-position: 50% 34%; border: 2px solid rgba(255,255,255,.7); background: #fff0c7; }

.player-select-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(8px, 1.1vw, 18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, .9vw, 15px);
  overflow: auto;
  color: var(--white);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,214,90,.17), transparent 24%),
    radial-gradient(circle at 88% 78%, rgba(217,98,49,.26), transparent 28%),
    linear-gradient(180deg, rgba(1,27,20,.98), rgba(3,50,37,.96) 31%, rgba(155,67,36,.96) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease;
}
.player-select-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 6% 28%, #f5c85a 0 3px, transparent 4px),
    radial-gradient(circle at 11% 36%, #e77753 0 3px, transparent 4px),
    radial-gradient(circle at 92% 25%, #61aada 0 3px, transparent 4px),
    radial-gradient(circle at 96% 42%, #f08383 0 3px, transparent 4px),
    radial-gradient(circle at 14% 79%, rgba(79,164,96,.75) 0 4px, transparent 5px),
    radial-gradient(circle at 85% 84%, rgba(255,222,94,.75) 0 4px, transparent 5px);
  background-size: 64px 64px, 83px 83px, 72px 72px, 91px 91px, 112px 112px, 104px 104px;
  mask-image: linear-gradient(90deg, #000 0 16%, transparent 28% 72%, #000 84% 100%);
}
.player-select-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.player-select-header {
  position: relative;
  min-height: clamp(96px, 11.5vh, 126px);
  padding: 10px clamp(14px, 1.6vw, 28px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(101,205,146,.32);
  border-radius: 28px 28px 36px 36px;
  background: linear-gradient(180deg, rgba(1,49,36,.99), rgba(1,29,23,.99));
  box-shadow: 0 22px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.09);
}
.player-select-header::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 8%;
  top: 38%;
  height: 54%;
  border-top: 10px solid rgba(202,241,70,.14);
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}
.player-select-logo { position: relative; z-index: 1; width: clamp(86px, 8vw, 132px); filter: drop-shadow(0 8px 13px rgba(0,0,0,.36)); }
.player-select-title-wrap { position: relative; z-index: 1; min-width: 0; text-align: center; }
.player-select-kicker { color: #a4cbbb; font-size: clamp(.56rem,.66vw,.76rem); font-weight: 950; letter-spacing: .18em; }
.player-select-title-wrap h1 { margin: 3px 0 0; font-size: clamp(2rem, 4.2vw, 5rem); line-height: .95; letter-spacing: -.045em; text-shadow: 0 5px 0 rgba(0,0,0,.24); white-space: nowrap; }
.player-select-title-wrap h1 span { color: var(--gold); }
.player-select-title-wrap h1 i { position: relative; display: inline-grid; place-items: center; width: .72em; height: .72em; margin-left: .08em; color: #d9f337; font-size: .58em; font-style: normal; vertical-align: .13em; }
.player-select-title-wrap h1 i::after { content: ""; position: absolute; width: 180%; height: 70%; right: 45%; top: 28%; border-top: 4px solid rgba(198,242,72,.38); border-radius: 50%; transform: rotate(-14deg); }
.player-select-title-wrap p { margin: 7px 0 0; color: #b9d2c8; font-size: clamp(.67rem,.85vw,.96rem); font-weight: 760; }
.selection-sound-button { position: relative; z-index: 1; }

.player-select-stage {
  position: relative;
  min-height: 0;
  padding: clamp(14px, 1.45vw, 28px);
  display: grid;
  grid-template-columns: clamp(168px, 15vw, 218px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(102,193,142,.32);
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(3,44,33,.95) 0 10%, transparent 20% 80%, rgba(3,44,33,.95) 90% 100%),
    linear-gradient(180deg, rgba(8,65,48,.96) 0 17%, rgba(200,91,49,.96) 17% 100%);
  box-shadow: 0 26px 76px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
.player-select-stage::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 16%;
  bottom: 0;
  border: 4px solid rgba(255,248,224,.62);
  border-bottom: 0;
  opacity: .22;
  transform: perspective(900px) rotateX(5deg);
  pointer-events: none;
}
.player-select-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  opacity: .34;
  pointer-events: none;
}

.select-sidebar { position: relative; z-index: 3; align-self: center; display: flex; flex-direction: column; gap: 13px; }
.sound-picker-side { display: flex; flex-direction: column; gap: 9px; padding: 13px 12px; border-radius: 18px; border: 3px solid #ffcf4d; background: linear-gradient(180deg,#fff6dc,#ffe3a2); box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.7); color: #5a3d10; }
.sound-picker-side .picker-title { text-align: center; font-size: .74rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; color: #8a5a12; }
.sound-picker-side label { display: flex; flex-direction: column; gap: 3px; font-size: .56rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #7a5214; }
.sound-picker-side select { width: 100%; font: inherit; font-weight: 800; font-size: .92rem; padding: 8px 10px; border-radius: 11px; border: 2px solid #e0a92e; background: #fff; color: #3a2a08; cursor: pointer; }
.select-sidebar .selected-player-summary { grid-template-columns: 48px minmax(0,1fr); column-gap: 10px; padding: 8px 12px 8px 8px; }
.select-sidebar .selected-player-summary img { width: 48px; height: 48px; border-radius: 14px; }
.select-sidebar .start-match-button { width: 100%; }
.player-grid {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: clamp(10px, 1.25vw, 22px);
  align-content: center;
}
.player-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: 287 / 329;
  padding: 0;
  overflow: hidden;
  border: 3px solid rgba(94,174,121,.9);
  border-radius: clamp(18px, 1.8vw, 30px);
  background: #fff0c7;
  box-shadow: 0 12px 0 rgba(1,42,30,.62), 0 17px 28px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.6);
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform .17s ease, filter .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.player-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player-card:hover { filter: brightness(1.06) saturate(1.06); transform: translateY(-5px) scale(1.012); }
.player-card:active { transform: translateY(3px) scale(.99); }
.player-card.is-selected {
  border-color: #f4de4d;
  box-shadow: 0 0 0 5px rgba(255,220,68,.42), 0 0 30px rgba(255,225,68,.48), 0 12px 0 #9a7a18, 0 20px 38px rgba(0,0,0,.3);
  transform: translateY(-4px) scale(1.02);
}
.player-card.is-selected::before,
.player-card.is-selected::after {
  content: "✦";
  position: absolute;
  z-index: 2;
  color: #fff7a1;
  font-size: clamp(1.2rem, 2vw, 2rem);
  text-shadow: 0 0 12px #ffd738;
  pointer-events: none;
  animation: rosterSparkle 1.35s ease-in-out infinite alternate;
}
.player-card.is-selected::before { left: 4px; top: 7%; }
.player-card.is-selected::after { right: 4px; bottom: 10%; animation-delay: -.7s; }
@keyframes rosterSparkle { to { transform: scale(1.22) rotate(9deg); opacity: .72; } }

.player-select-footer {
  position: relative;
  z-index: 3;
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, .55fr) minmax(280px, .9fr);
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
}
.selected-player-summary {
  min-width: 0;
  min-height: 78px;
  padding: 8px 18px 8px 8px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: rgba(1,39,29,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.2);
}
.selected-player-summary img { grid-row: 1 / 4; width: 62px; height: 62px; object-fit: cover; object-position: 50% 34%; border: 3px solid #f5d851; border-radius: 18px; background: #fff0c7; }
.selected-player-summary span { align-self: end; color: #a9c9bd; font-size: .56rem; font-weight: 950; letter-spacing: .12em; }
.selected-player-summary strong { align-self: center; overflow: hidden; text-overflow: ellipsis; color: white; font-size: 1.45rem; line-height: 1; }
.selected-player-summary small { align-self: start; color: #d6f55a; font-size: .67rem; font-weight: 850; }
.start-match-button {
  min-height: 76px;
  padding: 0 clamp(20px, 3vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 3px solid #b9ddf6;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg,#3caaf2,#126fc1);
  box-shadow: 0 10px 0 #084a87, 0 18px 30px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.46);
  cursor: pointer;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  font-weight: 950;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.2);
  transition: transform .15s ease, filter .15s ease;
}
.start-match-button span { color: #d9f13f; font-size: .8em; filter: drop-shadow(0 2px 1px rgba(0,0,0,.22)); }
.start-match-button:hover { filter: brightness(1.1); transform: translateY(-3px); }
.start-match-button:active { transform: translateY(6px); box-shadow: 0 4px 0 #084a87, 0 10px 18px rgba(0,0,0,.26); }

.player-roster-setting { cursor: default; }
.roster-cycle-button { min-width: 108px; }

@media (max-width: 980px) {
  .player-select-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .player-select-title-wrap h1 { font-size: clamp(1.8rem, 5.6vw, 3.5rem); }
  .player-select-title-wrap p { display: none; }
  .player-grid { grid-template-columns: repeat(4, minmax(112px, 1fr)); gap: 10px; }
  .player-select-footer { grid-template-columns: minmax(210px, .65fr) minmax(260px, 1fr); }
}

@media (max-width: 700px) {
  body.selection-open { overflow: hidden; }
  .player-select-screen { padding: 6px; gap: 7px; }
  .player-select-header { min-height: 78px; padding: 8px 10px; border-radius: 20px; }
  .player-select-logo { width: 64px; }
  .player-select-kicker { display: none; }
  .player-select-title-wrap h1 { font-size: clamp(1.35rem, 6.2vw, 2.35rem); white-space: normal; }
  .selection-sound-button { width: 42px; }
  .player-select-stage { padding: 10px; overflow: auto; border-radius: 22px; }
  .player-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); grid-template-rows: none; gap: 10px; }
  .player-card { aspect-ratio: 287 / 329; border-radius: 19px; }
  .player-select-footer { grid-template-columns: 1fr; position: sticky; bottom: 0; padding-top: 8px; background: linear-gradient(180deg,transparent,rgba(129,53,29,.96) 24%); }
  .selected-player-summary { min-height: 66px; grid-template-columns: 52px minmax(0,1fr); }
  .selected-player-summary img { width: 52px; height: 52px; border-radius: 15px; }
  .start-match-button { min-height: 62px; font-size: 1.2rem; }
}

@media (max-width: 700px) {
  .player-select-stage { display: block; }
  .player-grid { height: auto; align-content: start; }
  .player-card { height: auto; }
  .player-select-footer { margin-top: 12px; }
}