/* NEON PONG vs A.V.A. and the "After Hours" result screen.
   Look carried over from the earlier ELVT build (ava-hologram.css, pong-companions.css, games.css),
   with the smallest type made a little bigger so it can be read.
   Green (#bdff74) = you. Purple (#dc5cff) = A.V.A. */
.pong-overlay { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --pong-w: min(1240px, 82%);
  position: fixed; inset: 0; z-index: 26; padding-top: 62px; overflow: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 12%, #2d193866, transparent 58%), #030407; color: #eee7fc; font-stretch: 100%;
  scrollbar-width: thin; scrollbar-color: #867395 #070a12; animation: pongIn .28s ease-out; }
.pong-overlay[hidden] { display: none; }
.pong-overlay :is(button, a, select, input):focus-visible, .ava-pong-court:focus-visible { outline: 2px solid #e7ffba; outline-offset: 3px; }
@keyframes pongIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* ---------- layout: A.V.A. on top, the machine under her hands, the controls below ---------- */
.ava-arcade { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 0 30px; min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); }
.ava-arcade[hidden], .alien-encounter[hidden] { display: none; }
.pong-top { position: relative; width: var(--pong-w); flex-shrink: 0; }
.pong-boss { position: relative; width: 100%; aspect-ratio: 1280 / 334; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pong-boss-aura { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, #56208266, transparent 65%); }
.pong-boss-media { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9; mix-blend-mode: screen; }
.pong-boss-media > img, .pong-boss-media > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 0; }
.pong-boss-media > video { opacity: 0; transition: opacity .35s ease; }
.pong-boss[data-video-ready=true] .pong-boss-media > video { opacity: 1; }
/* A.V.A. as points of light (ava-particles.js): once the points are drawing, her clip underneath fades to a faint ghost */
.pong-boss .ava-particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.pong-boss[data-particles=ready] .ava-particle-canvas { opacity: 1; }
.pong-boss[data-particles=ready] .pong-boss-media > img, .pong-boss[data-particles=ready] .pong-boss-media > video { opacity: .08; }

/* what A.V.A. is saying, tucked into the empty corner beside her */
.ava-game-heading { position: absolute; z-index: 3; left: 14px; top: 14px; width: min(310px, 26%); text-align: left; text-shadow: 0 2px 18px #000; }
.ava-game-heading > span { font: 10px var(--mono); letter-spacing: .14em; color: #c3bfd1; }
.ava-game-heading h2 { font: 300 clamp(18px, 1.7vw, 25px)/1.15 "Rajdhani", sans-serif; color: #edf5ee; margin: 8px 0 9px; }
.ava-game-heading p { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font: 10px/1.7 var(--mono); color: #9cab9d; }
.ava-game-heading p > span:first-child { color: #e4d5f9; }
.ava-game-heading p > span:last-child { color: #bdb2d0; }

/* ---------- the machine ---------- */
.pong-machine { position: relative; z-index: 2; width: var(--pong-w); margin: -1px auto 0; padding: 18px 15px 13px; border: 1px solid #59664b; border-radius: 10px 10px 8px 8px;
  background: repeating-linear-gradient(113deg, transparent 0 11px, #8dff6b10 12px, transparent 13px 37px), linear-gradient(115deg, #18351d 0%, #050905 23%, #11101a 75%, #47254e);
  box-shadow: -9px 1px 55px #70ff252d, 9px 2px 55px #db29ff2b, inset 0 0 0 5px #040705, inset 0 0 0 7px #72846c66; }
.pong-machine::before, .pong-machine::after { content: ""; position: absolute; inset: -4px 4% auto; height: 3px; background: linear-gradient(90deg, #99ff51 0%, #67fa7f 25%, transparent 25% 67%, #c148ed 67%); box-shadow: 0 0 15px #bcff6e50; pointer-events: none; }
.pong-machine::after { inset: auto 3% -4px; background: linear-gradient(90deg, #648e4b 5%, #3afff5 8% 28%, transparent 28% 48%, #c349ff 48% 85%, #5d2578 85%); }
.pong-machine-brand { position: absolute; z-index: 3; bottom: -15px; left: 50%; transform: translateX(-50%) skew(-12deg) rotate(-5deg); background: #080a09; padding: 0 12px; font: 400 42px/.9 "Bebas Neue", sans-serif; letter-spacing: -.02em; color: #bdff74; text-shadow: 0 0 15px #a6ff3660; }
.pong-machine-brand > span { display: block; font: 7px/1.4 var(--mono); letter-spacing: .08em; color: #a4b996; padding-top: 3px; text-shadow: none; }
.ava-pong-court { position: relative; width: 100%; height: clamp(270px, 36vh, 390px); height: clamp(270px, 36dvh, 390px); background: radial-gradient(ellipse at 50% 95%, #15102066, transparent 70%), #030508; border: 1px solid #8dca7d7a; border-right-color: #c858d898; border-radius: 3px; box-shadow: inset 0 0 35px #22382235, 0 0 14px #7bdf5c20; isolation: isolate; touch-action: none; outline: none; }
.ava-pong-court::after { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 4px); pointer-events: none; opacity: .45; }
.ava-pong-court > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.pong-scoreboard { position: absolute; inset: 20px 26% auto; display: flex; justify-content: space-between; gap: 30px; pointer-events: none; z-index: 2; }
.pong-scoreboard > div { display: flex; flex-direction: column; align-items: center; color: #beff6c; gap: 7px; }
.pong-scoreboard > div:last-child { color: #dc5cff; }
.pong-scoreboard small { font: 10px/1 var(--mono); letter-spacing: .12em; color: #badca3; }
.pong-scoreboard > div:last-child small { color: #d6a7e8; }
.pong-digits { display: flex; gap: 5px; height: 46px; filter: drop-shadow(0 0 5px currentColor); }
.pong-digits > svg { height: 100%; width: 25px; }
.pong-edge-tag { position: absolute; z-index: 2; left: 10px; bottom: 11px; font: 9px var(--mono); color: #9cbd88; letter-spacing: .09em; pointer-events: none; }
.pong-machine-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 10px 4px 0; font: 9px/1.4 var(--mono); letter-spacing: .12em; color: #b7c9a9; }
.pong-machine-bottom > span:last-child { color: #cba9db; }
.ava-court-action { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 35px 20px 0; background: #03050860; pointer-events: none; }
.ava-court-action[hidden] { display: none; }
.ava-court-action > button { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 24px; border: 1px solid #bcff83; border-radius: 3px; background: #0b160b; color: #d8ffae; font: 12px/1.3 var(--mono); text-transform: uppercase; box-shadow: 0 0 18px #b4ff3c22, inset 0 0 20px #a3ff2310; cursor: pointer; }
.ava-court-action > button:hover { background: #142512; }
.ava-court-action > small { font: 10px/1.6 var(--mono); max-width: 290px; color: #b5c3b0; text-align: center; }

/* ---------- controls under the machine ---------- */
.ava-game-controls { position: relative; z-index: 2; width: min(940px, 90%); margin: 17px auto 0; padding: 0 18px 10px; background: linear-gradient(#030508c9, #030508f0); border-radius: 5px; }
.ava-paddle-control { display: flex; align-items: center; gap: 18px; }
.ava-paddle-control > span { font: 10px var(--mono); color: #c5dbc1; white-space: nowrap; }
.ava-paddle-control small { font-size: 9px; margin-left: 8px; color: #92aa93; }
.ava-paddle-control input { min-width: 0; flex: 1; height: 44px; accent-color: #b8ff6f; cursor: ew-resize; }
.ava-game-options { display: flex; justify-content: center; align-items: center; gap: 15px; }
.ava-game-options > button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: #cdfab9; font: 10px var(--mono); cursor: pointer; }
.ava-difficulty select { color: #d8edce; background: #0a100d; border: 1px solid #687a648c; border-radius: 4px; min-height: 44px; padding: 8px 30px 8px 12px; font: 10px var(--mono); max-width: 240px; cursor: pointer; color-scheme: dark; }
.pong-soundtrack { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 8px auto; padding: 10px 14px; border: 1px solid #6b4e8a66; border-radius: 5px; background: linear-gradient(110deg, #10120fdb, #140c1bd6); max-width: 620px; color: #d0d5d2; }
.ava-reveal-sound { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; margin: 0; font: 10px/1.5 var(--mono); color: #b7b6c7; text-align: center; cursor: pointer; }
.ava-reveal-sound input { accent-color: #b8ff6f; width: 15px; height: 15px; }
.pong-soundtrack-title { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin: 0; font: 10px/1.6 var(--mono); color: #c9acd9; text-align: center; }
.pong-soundtrack-explicit { display: inline-block; border: 1px solid #ad9a8566; border-radius: 2px; padding: 1px 4px; font: 8px/1.5 var(--mono); letter-spacing: .08em; color: #d5c1a9; text-transform: uppercase; }
.pong-soundtrack-explicit[hidden] { display: none; }
.pong-soundtrack-level { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 430px; font: 10px/1.5 var(--mono); color: #c5cfc4; }
.pong-soundtrack-level > button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 9px; border: 1px solid #869a7e55; border-radius: 4px; background: #0c130c; color: #d3eac6; cursor: pointer; }
.pong-soundtrack-level > label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pong-soundtrack-level input { min-width: 0; flex: 1; accent-color: #c383f0; min-height: 44px; cursor: pointer; }
.pong-soundtrack-level > label > span { white-space: nowrap; font-size: 9px; }
.pong-soundtrack-level > span { width: 46px; text-align: right; }
.pong-soundtrack > small { font: 9px/1.6 var(--mono); color: #9baba2; text-align: center; }
.ava-game-controls nav { display: flex; justify-content: center; flex-wrap: wrap; border-top: 1px solid #77846c40; margin-top: 5px; gap: 9px; padding-top: 10px; }
.ava-game-controls nav > button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid #697d6a70; border-radius: 4px; background: #0b0e0f; color: #c4dfcd; font: 10px var(--mono); white-space: nowrap; cursor: pointer; }
.ava-game-controls nav > button[aria-pressed=true] { border-color: #b3ed79; color: #d8ffa8; }
.ava-game-controls nav > button:hover { border-color: #c5e3bf9c; color: #e7ffe5; }
.pong-input-hint { text-align: center; font: 10px/1.7 var(--mono); color: #97a899; margin: 12px 0 0; }

/* =====================================================================
   AFTER HOURS: the screen you land on when the match ends
   ===================================================================== */
.alien-encounter { position: relative; min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); overflow: hidden; isolation: isolate; background: #050507; color: #f0f0df; }
.alien-bloom { position: absolute; inset: -15%; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 27% 50%, #3c1d7955, transparent 50%), radial-gradient(at 80% 40%, #39520d44, transparent 45%); }
.alien-bloom > i { position: absolute; inset: 20%; border-radius: 44% 56% 30% 70% / 60% 45% 55% 40%; border: 2px solid #baff4a65; box-shadow: 0 0 80px #974eff24, inset 0 0 70px #b3ff0022; transform: scale(0); animation: alienBloom 2.8s cubic-bezier(.16, .64, .25, 1) forwards, alienTurn 30s linear 2.8s infinite; }
.alien-bloom > i:nth-child(2) { inset: 32%; border-color: #d3a1ff77; animation-delay: .12s, 3s; }
.alien-bloom > i:nth-child(3) { inset: 10%; border-color: #9171d44a; animation-delay: .25s, 3.2s; }
.alien-bloom > b { position: absolute; left: 50%; top: 50%; width: clamp(16px, 3vw, 55px); height: clamp(10px, 1.5vw, 25px); border-radius: 50% 30% 60% 40%; background: hsl(var(--hue) 70% 65% / .6); box-shadow: 0 0 35px hsl(var(--hue) 80% 60% / .25); transform: rotate(var(--angle)) translateX(0) scale(0); animation: alienBurst 2.8s cubic-bezier(.12, .63, .25, 1) forwards; animation-delay: calc(var(--i) * 12ms); }
.alien-top { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 25px 32px; }
.alien-top > span { font: 10px/1.7 var(--mono); letter-spacing: .13em; color: #c5d59e; }
.alien-top small { display: block; font: 10px/1.6 var(--mono); letter-spacing: 0; color: #a79aaf; margin-top: 3px; }
.alien-top button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid #cad3ad40; border-radius: 25px; background: #0c0c13ab; color: #dbdac9; cursor: pointer; }
.alien-stage { mix-blend-mode: screen; position: absolute; left: 0; bottom: 0; width: 56%; height: calc(100% - 84px); min-height: 420px; overflow: hidden; pointer-events: none; animation: alienArrive 1.1s ease-out both; }
.alien-stage video { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 800 / 1088; margin: 0 auto; object-fit: contain; object-position: 50% 70%; mix-blend-mode: screen; filter: contrast(1.15);
  /* his clip is cut off square at its edges, so the bottom and both sides fade out instead of ending in a hard line */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.alien-orbit { position: absolute; inset: 20% 4%; border: 1px solid #aaf56a70; border-radius: 50%; transform: rotate(-30deg); box-shadow: 0 0 80px #a9f51c20; animation: alienOrbit 14s ease-in-out infinite alternate; }
.alien-signature { position: absolute; left: 7%; bottom: 8%; font: 400 clamp(65px, 9vw, 160px)/.65 "Bebas Neue", sans-serif; letter-spacing: -.03em; transform: rotate(-9deg); color: #d8ffa1; mix-blend-mode: screen; text-shadow: 0 0 35px #d4ff6b30; }
.alien-signature small { display: block; font: 9px/1.8 var(--mono); letter-spacing: .08em; margin: 22px 0 0 8px; color: #d0bce5; }
.alien-copy { position: relative; z-index: 2; margin: clamp(15px, 4vh, 70px) 6% 35px 55%; max-width: 510px; animation: alienCopy .9s .2s both; }
.alien-kicker { font: 10px/1.7 var(--mono); letter-spacing: .09em; color: #b9dc88; }
.alien-copy h2 { font: 300 clamp(44px, 5.5vw, 84px)/.88 "Rajdhani", sans-serif; letter-spacing: -.04em; margin: 22px 0; outline: none; color: #f0f0dd; }
.alien-greeting { font: 500 18px/1.6 "Rajdhani", sans-serif; letter-spacing: .01em; color: #e5e4cf; max-width: 380px; margin: 0 0 10px; }
.alien-roast { font: 13px/1.8 Arial, sans-serif; color: #bdb3c8; margin: 0; }
.alien-roast[hidden] { display: none; }
.alien-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.alien-actions > a, .alien-actions > button { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; border: 1px solid #c1adc248; border-radius: 25px; color: #e3d4ef; background: #191220b3; font: 10px/1.5 var(--mono); text-align: left; text-decoration: none; cursor: pointer; }
.alien-actions .alien-primary { background: #c7f27e; color: #1c250d; border-color: #dafa9e; }
.alien-actions .ava-beacon { box-shadow: 0 0 26px #c5ff5322; }
.alien-radio { display: flex; align-items: center; gap: 8px; border-top: 1px solid #c5b9d439; border-bottom: 1px solid #c5b9d439; min-height: 74px; }
.alien-radio > button { width: 40px; min-height: 44px; display: grid; place-items: center; flex-shrink: 0; padding: 0; border: 0; color: #d5eab5; background: none; border-radius: 12px; cursor: pointer; }
.alien-radio > div { flex: 1; min-width: 0; }
.alien-radio small { display: block; font: 9px/1.7 var(--mono); letter-spacing: .08em; color: #a99bb6; margin-bottom: 5px; }
.alien-radio strong { display: block; font: 600 15px/1.3 "Rajdhani", sans-serif; color: #e9e8d6; overflow-wrap: anywhere; }
.alien-credit { font: 10px/1.7 var(--mono); color: #ac9cbb; margin-top: 12px; }
.alien-audio-error { font: 10px/1.7 var(--mono); color: #ecc0cb; }
.alien-audio-error[hidden] { display: none; }
@keyframes alienBloom { 0% { transform: scale(.08) rotate(-40deg); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.5) rotate(15deg); opacity: .45; } }
@keyframes alienTurn { from { transform: scale(1.5) rotate(15deg); } to { transform: scale(1.5) rotate(375deg); } }
@keyframes alienBurst { 0% { transform: rotate(var(--angle)) translateX(0) scale(.1); opacity: 0; } 20% { opacity: .8; } 100% { transform: rotate(var(--angle)) translateX(var(--distance)) scale(.7); opacity: .25; } }
@keyframes alienArrive { from { opacity: 0; transform: translateY(8%) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes alienCopy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes alienOrbit { from { transform: rotate(-30deg) scale(.9); } to { transform: rotate(30deg) scale(1.05); } }

/* =====================================================================
   A.V.A. WINS: the screen you land on when you lose. Same layout as After Hours, in her colours.
   ===================================================================== */
.ava-wins { background: #03050b; color: #eaf3ff; }
.ava-wins-glow { position: absolute; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 27% 46%, #2a5cff40, transparent 52%), radial-gradient(at 30% 70%, #8a3fd038, transparent 46%), radial-gradient(at 82% 30%, #18c3ff1c, transparent 42%); }
.ava-wins .alien-top > span { color: #9fe6ff; }
.ava-wins .alien-stage { mix-blend-mode: normal; }
.ava-wins .alien-stage video { aspect-ratio: 768 / 1152; object-fit: cover; object-position: 50% 30%; mix-blend-mode: screen; filter: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 78%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.ava-wins .alien-kicker { color: #8fe3ff; }
.ava-wins .alien-copy h2 { color: #f2f8ff; text-shadow: 0 0 40px #4aa8ff40; }
.ava-wins .alien-greeting { font-size: 24px; line-height: 1.3; max-width: 430px; color: #eaf3ff; margin-bottom: 14px; }
.ava-wins .alien-roast { font: 500 17px/1.5 "Rajdhani", sans-serif; color: #b9c8e6; }
.ava-wins .alien-actions { margin: 24px 0 18px; }
.ava-wins .alien-actions > button { border-color: #9fc4ff48; color: #dfeaff; background: #0b1424b3; }
.ava-wins .alien-actions .alien-primary { background: #8fe3ff; color: #04121c; border-color: #c5f0ff; }
.ava-wins .alien-actions .ava-beacon { box-shadow: 0 0 30px #5fd0ff40; }
.ava-wins .alien-credit { color: #8fa0c0; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .pong-overlay { --pong-w: 100%; }
  .ava-arcade { padding-inline: 14px; min-height: 0; }
  .pong-top { display: flex; flex-direction: column-reverse; width: calc(100% + 28px); margin-inline: -14px; }
  .pong-boss { -webkit-mask-image: none; mask-image: none; }
  .ava-game-heading { position: relative; left: auto; top: auto; width: 100%; max-width: 700px; margin: 0 auto; text-align: center; padding: 10px 14px 12px; }
  .ava-game-heading h2 { font-size: 23px; margin: 7px 0 10px; }
  .ava-game-heading p { justify-content: center; }
  .ava-game-controls { width: 100%; padding-inline: 0; }
  .alien-copy { margin-left: 51%; margin-right: 4%; }
  .alien-stage { width: 54%; }
}
@media (max-width: 650px) {
  .pong-overlay { padding-top: 58px; }
  .ava-game-heading h2 { font-size: 21px; }
  .pong-machine { padding: 12px 8px 10px; border-radius: 7px; }
  .pong-machine-brand { font-size: 30px; bottom: -13px; }
  .ava-pong-court { height: clamp(245px, 35vh, 330px); height: clamp(245px, 35dvh, 330px); }
  .pong-scoreboard { inset: 17px 28% auto; } .pong-digits { height: 35px; } .pong-digits > svg { width: 19px; }
  .pong-machine-bottom { font-size: 8px; letter-spacing: .08em; padding-top: 9px; }
  .ava-court-action { padding: 50px 15px 0; gap: 11px; } .ava-court-action > button { font-size: 11px; padding: 10px 19px; } .ava-court-action > small { max-width: 220px; }
  .ava-game-controls { margin-top: 9px; } .ava-paddle-control { gap: 10px; } .ava-paddle-control small { display: none; }
  .ava-difficulty select { max-width: 218px; }
  .pong-soundtrack { padding: 8px 10px; width: 100%; gap: 4px; } .pong-soundtrack-level { gap: 8px; } .pong-soundtrack-level > label { gap: 7px; }
  .ava-game-controls nav { gap: 6px; padding-top: 8px; } .ava-game-controls nav > button { padding: 7px 10px; gap: 5px; }
  .alien-top { padding: 14px 16px; }
  .alien-stage { position: relative; left: auto; bottom: auto; width: 100%; height: 34vh; height: 34dvh; min-height: 220px; max-height: 300px; margin-top: -5px; }
  .alien-stage video { object-position: 50% 45%; }
  .ava-wins .alien-stage video { width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 26%; } .ava-wins .alien-greeting { font-size: 21px; }
  .alien-signature { font-size: 80px; left: 7%; bottom: 10%; line-height: .7; } .alien-signature small { font-size: 8px; margin-top: 13px; }
  .alien-orbit { inset: 15% 15%; }
  .alien-copy { margin: -20px 23px 28px; max-width: none; }
  .alien-copy h2 { font-size: 49px; margin: 14px 0 16px; line-height: .9; }
  .alien-greeting { font-size: 17px; line-height: 1.5; margin-bottom: 6px; }
  .alien-actions { gap: 7px; margin: 12px 0; } .alien-actions > a, .alien-actions > button { padding: 9px 12px; } .alien-actions .alien-primary { min-width: 100%; justify-content: space-between; }
  .alien-radio { gap: 2px; min-height: 68px; } .alien-radio > button { width: 36px; }
}
@media (max-height: 620px) and (min-width: 651px) {
  .ava-pong-court { height: 260px; }
  .alien-copy { margin-top: 8px; } .alien-copy h2 { font-size: 52px; } .alien-greeting { font-size: 15px; } .alien-actions { margin: 10px 0; } .alien-radio { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .pong-overlay, .alien-bloom > i, .alien-bloom > b, .alien-stage, .alien-copy, .alien-orbit { animation: none !important; }
  .alien-bloom > b { display: none; } .alien-bloom > i { transform: scale(1.5); opacity: .2; }
  .pong-boss-media > video { transition: none; }
}