/* ══════════════════════════════════════════════════════
   TROT CHALLENGE — Alternating-thumb rhythm horse game
══════════════════════════════════════════════════════ */
:root {
  /* Fallbacks — overridden at runtime by QuizRemote from JSON data */
  --background-color: #06090e;
  --background-secondary-color: transparent;
  --background-third-color: #FFF;
  --primary-color: #ffcc00;
  --secondary-color: #f0f4ff;
  --third-color: #1e2430;
  --fourth-color: #CCC;
  --fifth-color: #CCC;
  --font-family: 'Teko', sans-serif;
  --secondary-font-family: 'Barlow Condensed', sans-serif;
  --font-size: 16px;
  --secondary-font-size: 14px;

  /* Game-specific (not overridden) */
  --grass1:  #1a5c28;
  --grass2:  #0f3a18;
  --dirt:    #6b4e2e;
  --sky1:    #0a1828;
  --sky2:    #152240;
  --left:    #3399ff;
  --right:   #ff4422;
}

* { margin:0; padding:0; box-sizing:border-box; max-width:100vw; }
html, body {
  background: var(--background-color);
  font-family: var(--secondary-font-family);
  font-size: var(--font-size);
  overflow: hidden;
  width: 100%;
  height: 100vh; height: 100dvh;
  max-height:-webkit-fill-available;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  cursor: none;
}

/* ── CURSOR (desktop only) ── */
#cursor {
  position:fixed; width:12px; height:12px; border-radius:50%;
  background:var(--secondary-color); box-shadow:0 0 8px var(--secondary-color);
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}

/* ══════════════════════════════════════════════════════
   SPLASH
══════════════════════════════════════════════════════ */
#splash {
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  background:var(--background-color); cursor:pointer;
  transition:opacity 0.7s ease, visibility 0.7s ease;
  padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0);
  overflow:hidden; width:100vw;
}
#splash.hidden { opacity:0; visibility:hidden; pointer-events:none; }

#splash-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,color-mix(in srgb,var(--primary-color) 4%,transparent) 0%,transparent 70%);
  animation:splashPulse 3s ease infinite;
}
@keyframes splashPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.1);opacity:1} }

#splash-rays {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
#splash-rays::before {
  content:''; position:absolute; top:50%; left:50%;
  width:200vmax; height:200vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(color-mix(in srgb,var(--primary-color) 2%,transparent) 0deg,color-mix(in srgb,var(--primary-color) 2%,transparent) 1deg,transparent 1deg,transparent 10deg);
  animation:rotateSlow 60s linear infinite;
}
@keyframes rotateSlow { to{transform:translate(-50%,-50%) rotate(360deg);} }

/* SPLASH TOP — header logo */
#splash-top {
  position:relative; z-index:2; width:100%; flex-shrink:0;
  padding:clamp(12px,3vh,32px) clamp(16px,4vw,48px) 0;
  display:flex; align-items:center; justify-content:center;
  animation:fadeDown 0.8s 0.1s ease both;
}
#splash-header-logo { display:flex; align-items:center; justify-content:center; }
#splash-header-logo img { max-height: 250px; max-width: 250px; width:auto; object-fit:contain; display:block; }
.splash-top-divider { position:absolute; bottom:0; left:clamp(20px,5vw,48px); right:clamp(20px,5vw,48px); height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--secondary-color) 13%,transparent),transparent); }

/* SPLASH CENTER */
#splash-inner {
  position:relative; z-index:2; flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(4px,1.5vh,16px);
  animation:splashIn 1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
@keyframes splashIn { from{opacity:0;transform:scale(0.82) translateY(28px)} to{opacity:1;transform:scale(1) translateY(0)} }

#splash-app-label { font-family:var(--font-family); font-size:clamp(12px,2vw,18px); letter-spacing:clamp(4px,1.5vw,10px); color:color-mix(in srgb,var(--secondary-color) 13%,transparent); text-transform:uppercase; }

#splash-horse-main { font-size:clamp(48px,12vmin,160px); line-height:1; filter:drop-shadow(0 0 30px color-mix(in srgb,var(--primary-color) 40%,transparent)); animation:previewGallop 0.4s ease infinite alternate; }
@keyframes previewGallop { 0%{transform:translateY(0) scaleX(-1)} 100%{transform:translateY(-8px) scaleX(-0.93)} }

#splash-title {
  font-family:var(--font-family);
  font-size:clamp(36px,10vmin,130px); font-weight:700;
  line-height:0.88; text-transform:uppercase; letter-spacing:4px;
  color:var(--secondary-color); text-align:center;
}
#splash-title span { color:var(--primary-color); text-shadow:0 0 40px var(--primary-color), 0 0 80px color-mix(in srgb,var(--primary-color) 40%,transparent); }

/* Thumb indicator */
#splash-thumbs {
  display:flex; align-items:center; gap:clamp(20px,6vw,48px);
  margin-top:4px;
}
.splash-thumb {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-family:var(--font-family); font-size:clamp(13px,2.5vw,18px);
  letter-spacing:4px; text-transform:uppercase;
}
.splash-thumb-icon { font-size:clamp(28px,6vw,50px); animation:thumbBounce 0.6s ease infinite alternate; }
.splash-thumb.left .splash-thumb-icon  { animation-delay:0s; color:var(--left); filter:drop-shadow(0 0 8px var(--left)); }
.splash-thumb.right .splash-thumb-icon { animation-delay:0.3s; color:var(--right); filter:drop-shadow(0 0 8px var(--right)); }
.splash-thumb.left  { color:var(--left); }
.splash-thumb.right { color:var(--right); }
@keyframes thumbBounce { 0%{transform:translateY(0)} 100%{transform:translateY(-8px)} }
.splash-arrow { font-size:clamp(16px,3vw,28px); color:color-mix(in srgb,var(--secondary-color) 13%,transparent); }

#splash-sub {
  font-family:var(--secondary-font-family);
  font-size:var(--secondary-font-size); letter-spacing:clamp(3px,1vw,6px);
  color:color-mix(in srgb,var(--secondary-color) 20%,transparent); text-transform:uppercase;
  animation:blinkAnim 1.5s ease infinite;
}
@keyframes blinkAnim { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* SPLASH BOTTOM: sponsor */
#splash-bottom {
  position:relative; z-index:2; width:100%; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  padding:0 clamp(16px,4vw,48px) clamp(8px,2vh,32px);
  animation:fadeUp 0.8s 0.4s ease both;
}
.splash-bottom-divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--secondary-color) 13%,transparent),transparent); margin-bottom:clamp(10px,2vh,18px); }
#splash-sponsor-row { display:none; align-items:center; justify-content:center; gap:clamp(12px,3vw,24px); max-width:100%; }
#splash-sponsor-logo { display:none; align-items:center; justify-content:center; height:clamp(28px,5vh,50px); }
#splash-sponsor-logo img { height:clamp(28px,5vh,50px); max-width:70vw; width:auto; object-fit:contain; display:block; }
#splash-sponsor-logo span { font-family:var(--font-family); font-size:clamp(18px,3.5vw,32px); font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--secondary-color); }

/* ══════════════════════════════════════════════════════
   REGISTER FORM
══════════════════════════════════════════════════════ */
main { position:relative; z-index:900; }
.register {
  display:none; position:fixed; inset:0; z-index:900;
  flex-direction:column; align-items:center; justify-content:center;
  background:var(--background-color); padding:clamp(16px,4vw,32px);
  overflow-y:auto;
}
.register.show { display:flex; }
#form-logo { display:flex; align-items:center; justify-content:center; margin-bottom:clamp(16px,3vh,32px); }
#form-logo img { height:clamp(40px,8vh,80px); max-width:70vw; width:auto; object-fit:contain; display:block; }
.register form {
  width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:clamp(10px,2vh,16px);
}
.register form.locked { pointer-events:none; opacity:0.5; }
.register .title {
  font-family:var(--font-family); font-size:clamp(24px,5vw,36px);
  font-weight:700; color:var(--secondary-color); text-align:center;
  letter-spacing:2px; text-transform:uppercase;
}
.register #notice { font-size:var(--secondary-font-size); color:color-mix(in srgb,var(--secondary-color) 40%,transparent); text-align:center; }
.register label {
  display:flex; flex-direction:column; gap:4px;
}
.register label[style*="display: none"],
.register label:has(input[type="hidden"]) { display:none; }
.register .label {
  font-family:var(--font-family); font-size:clamp(12px,2.5vw,15px);
  font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:color-mix(in srgb,var(--secondary-color) 40%,transparent);
}
.register input[type="text"],
.register input[type="email"],
.register input[type="tel"] {
  background:color-mix(in srgb,var(--secondary-color) 4%,transparent);
  border:1.5px solid color-mix(in srgb,var(--secondary-color) 13%,transparent); border-radius:8px;
  padding:clamp(10px,2vh,14px) 12px;
  font-family:var(--secondary-font-family); font-size:var(--font-size);
  color:var(--secondary-color); outline:none;
  transition:border-color 0.2s;
}
.register input:focus { border-color:var(--primary-color); }
.register button[type="submit"] {
  margin-top:8px; padding:clamp(12px,2.5vh,18px);
  background:var(--primary-color); color:var(--background-color); border:none; border-radius:10px;
  font-family:var(--font-family); font-size:clamp(18px,4vw,24px);
  font-weight:700; letter-spacing:4px; text-transform:uppercase;
  cursor:pointer; transition:opacity 0.2s, transform 0.1s;
}
.register button[type="submit"]:active { transform:scale(0.96); }
.register .error-message {
  font-size:var(--secondary-font-size); color:#ff4422; text-align:center; min-height:1em;
}
.wait { display:none; }

/* ══════════════════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════════════════ */
#game-screen {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity 0.5s ease, visibility 0.5s ease;
  height:100dvh; height:100vh;
  max-height:-webkit-fill-available;
  padding-bottom:env(safe-area-inset-bottom,0);
  overflow:hidden;
}
#game-screen.visible { opacity:1; visibility:visible; }

/* ─ TRACK ─ */
#track-section {
  height:70%; flex-shrink:0;
  position:relative; overflow:hidden;
}

/* Sky */
#sky {
  position:absolute; top:0; left:0; right:0; height:35%;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%);
}
.cloud { position:absolute; border-radius:50px; background:color-mix(in srgb,var(--secondary-color) 4%,transparent); animation:cloudDrift linear infinite; }
@keyframes cloudDrift { from{transform:translateX(110vw)} to{transform:translateX(-30vw)} }

/* Grass */
#grass {
  position:absolute; top:28%; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,var(--grass1),var(--grass2));
  overflow:hidden;
}

/* Scrolling track lane */
#dirt-track {
  position:absolute; bottom:0; left:0; right:0; height:55%;
  background:linear-gradient(180deg,var(--dirt) 0%,#5a3a1a 100%);
  overflow:hidden;
}

/* Track lane lines scrolling */
#track-lines { position:absolute; inset:0; }
.track-line {
  position:absolute; top:0; bottom:0; width:2px;
  background:rgba(255,255,255,0.06);
  animation:trackScroll linear infinite;
}
@keyframes trackScroll { from{transform:translateX(0)} to{transform:translateX(-80px)} }

/* Fence posts */
#fence-top {
  position:absolute; top:26%; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--secondary-color) 20%,transparent) 0px,color-mix(in srgb,var(--secondary-color) 20%,transparent) 12px,transparent 12px,transparent 24px);
  overflow:hidden;
}

/* HORSE on track — BIG */
#horse-container {
  position:absolute; bottom:48%; left:8%;
  display:flex; flex-direction:column; align-items:center;
  gap:0; z-index:5; transition:bottom 0.1s;
}
#horse-emoji {
  font-size:clamp(72px,18vw,150px);
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.6));
  display:block; line-height:1;
  transform:scaleX(-1);
}
/* Hooves indicator under horse */
#hooves-row {
  display:flex; gap:6px; margin-top:-2px;
}
.hoof {
  width:clamp(14px,3.5vw,22px); height:clamp(14px,3.5vw,22px);
  border-radius:50%;
  background:color-mix(in srgb,var(--secondary-color) 13%,transparent); border:2px solid transparent;
  transition:background 0.06s, box-shadow 0.06s, transform 0.06s;
}
.hoof.left  { border-color:var(--left); }
.hoof.right { border-color:var(--right); }
.hoof.active {
  background:currentColor;
  box-shadow:0 0 12px currentColor;
  transform:scale(1.3);
}
.hoof.left.active  { background:var(--left);  color:var(--left); }
.hoof.right.active { background:var(--right); color:var(--right); }

/* Horse shadow */
#horse-shadow {
  position:absolute; bottom:46%; left:8%;
  width:clamp(64px,16vw,130px); height:10px;
  background:radial-gradient(ellipse,rgba(0,0,0,0.5) 0%,transparent 70%);
  transform:translateX(8%) scaleY(0.6);
  z-index:4;
}

/* SCORE / DISTANCE overlay */
#track-hud {
  position:absolute; top:8px; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:0 clamp(12px,3vw,24px); z-index:6; pointer-events:none;
}
/* In-game header logo — BIG */
#hud-logo { display:flex; align-items:center; justify-content:center; }
#hud-logo img { height:clamp(32px,6vh,60px); width:auto; object-fit:contain; display:block; }
#hud-logo img[src=""] { display:none; }
#hud-distance {
  font-family:var(--font-family);
  font-size:clamp(22px,4.5vw,44px); font-weight:700;
  color:var(--primary-color); text-shadow:0 0 16px color-mix(in srgb,var(--primary-color) 40%,transparent);
  line-height:1;
}
#hud-distance small { font-size:0.45em; opacity:0.6; font-family:var(--secondary-font-family); letter-spacing:2px; }

#hud-speed {
  font-family:var(--font-family);
  font-size:clamp(18px,3.5vw,34px); font-weight:700;
  color:color-mix(in srgb,var(--secondary-color) 53%,transparent); line-height:1; text-align:right;
}
#hud-best {
  font-family:var(--secondary-font-family);
  font-size:var(--secondary-font-size); letter-spacing:3px;
  color:color-mix(in srgb,var(--secondary-color) 20%,transparent); text-transform:uppercase; text-align:right;
}

/* RHYTHM INDICATOR */
#rhythm-bar {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; z-index:6;
}
.rhythm-dot {
  width:clamp(6px,1.5vw,10px); height:clamp(6px,1.5vw,10px);
  border-radius:50%; background:color-mix(in srgb,var(--secondary-color) 13%,transparent);
  transition:background 0.1s, transform 0.1s;
}
.rhythm-dot.left  { background:var(--left);  transform:scale(1.4); box-shadow:0 0 6px var(--left); }
.rhythm-dot.right { background:var(--right); transform:scale(1.4); box-shadow:0 0 6px var(--right); }
.rhythm-dot.miss  { background:#ff000088; }

/* ─ NEXT EXPECTED INDICATOR ─ */
#next-indicator {
  position:absolute; bottom:20%; left:50%; transform:translateX(-50%);
  z-index:6; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:opacity 0.2s;
}
#next-side-label {
  font-family:var(--font-family);
  font-size:clamp(14px,3vw,26px); font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
}
#next-side-arrow { font-size:clamp(18px,4vw,32px); animation:arrowBounce 0.5s ease infinite alternate; }
@keyframes arrowBounce { 0%{transform:translateY(0)} 100%{transform:translateY(-5px)} }

/* TIMEOUT BAR — depletes between taps */
#timeout-bar-wrap {
  position:absolute; bottom:4px; left:clamp(12px,3vw,24px); right:clamp(12px,3vw,24px);
  height:3px; background:color-mix(in srgb,var(--secondary-color) 7%,transparent); border-radius:2px; z-index:6; overflow:hidden;
}
#timeout-bar {
  height:100%; border-radius:2px; width:100%;
  background:linear-gradient(90deg, var(--primary-color), #ff8800);
  transform-origin:left;
  transition:transform 0.05s linear;
}

/* ─ CONTROLS ─ */
#controls-section {
  flex:1; min-height:0; display:flex; position:relative;
  overflow:hidden;
}

/* Left thumb zone */
#zone-left, #zone-right {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; gap:clamp(8px,2vh,16px);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}

#zone-left  { background:linear-gradient(135deg,color-mix(in srgb,var(--left) 8%,var(--background-color)) 0%,var(--background-color) 100%); border-right:1px solid var(--third-color); }
#zone-right { background:linear-gradient(225deg,color-mix(in srgb,var(--right) 8%,var(--background-color)) 0%,var(--background-color) 100%); }

.zone-glow {
  position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; transition:opacity 0.1s;
  opacity:0;
}
#zone-left  .zone-glow { background:radial-gradient(ellipse at 30% 60%,color-mix(in srgb,var(--left) 13%,transparent) 0%,transparent 60%); }
#zone-right .zone-glow { background:radial-gradient(ellipse at 70% 60%,color-mix(in srgb,var(--right) 13%,transparent) 0%,transparent 60%); }
.zone-glow.active { opacity:1; }

/* BIG THUMB BUTTON */
.thumb-btn {
  width:clamp(80px,22vmin,170px); height:clamp(80px,22vmin,170px);
  border-radius:50%; border:3px solid currentColor;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  position:relative; z-index:2; pointer-events:none;
  transition:transform 0.07s, box-shadow 0.07s, background 0.07s;
  background:rgba(0,0,0,0.3);
}
#btn-left  { color:var(--left);  box-shadow:0 0 24px color-mix(in srgb,var(--left)  40%,transparent),inset 0 0 16px color-mix(in srgb,var(--left)  8%,transparent); }
#btn-right { color:var(--right); box-shadow:0 0 24px color-mix(in srgb,var(--right) 40%,transparent),inset 0 0 16px color-mix(in srgb,var(--right) 8%,transparent); }
.thumb-btn.pressed { transform:scale(0.86) !important; }
.thumb-btn.expected { animation:expectedPulse 0.5s ease infinite; }
@keyframes expectedPulse { 0%,100%{box-shadow:0 0 24px currentColor} 50%{box-shadow:0 0 48px currentColor,0 0 80px currentColor} }
.thumb-btn.wrong { background:rgba(255,0,0,0.15) !important; border-color:#ff0000 !important; box-shadow:0 0 30px #ff000066 !important; animation:wrongShake 0.25s ease; }
@keyframes wrongShake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-6px,0)} 75%{transform:translate(6px,0)} }

.thumb-icon  { font-size:clamp(32px,7vw,54px); }
.thumb-label { display: none; font-family:var(--font-family); font-size:clamp(16px,3.5vw,28px); font-weight:700; letter-spacing:3px; text-transform:uppercase; }

/* Combo / streak text in zone */
.zone-streak {
  position:absolute; top:clamp(8px,2vh,16px);
  font-family:var(--font-family);
  font-size:clamp(14px,3vw,22px); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; opacity:0.6; pointer-events:none;
  width:100%; text-align:center;
}
#streak-left  { left:50%; transform:translateX(-50%); color:var(--left); }
#streak-right { left:50%; transform:translateX(-50%); color:var(--right); }

/* PHONE FLASH */
#phone-flash { position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:0; transition:opacity 0.05s ease-out; }

/* PARTICLES */
#particles { position:fixed; inset:0; z-index:300; pointer-events:none; overflow:hidden; }
.particle { position:absolute; border-radius:50%; opacity:0; pointer-events:none; }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-80px) scale(0.3)} }

/* NUM POP */
@keyframes numPop { 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-140%) scale(0.5)} }
.tap-num { position:absolute; pointer-events:none; z-index:10; font-family:var(--font-family); font-weight:700; font-size:clamp(20px,4vw,34px); animation:numPop 0.5s ease-out forwards; }

/* STUMBLE OVERLAY */
#stumble-overlay {
  position:fixed; inset:0; z-index:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(6,9,14,0) ;pointer-events:none;
  transition:background 0.15s;
}
#stumble-overlay.active { background:rgba(200,0,0,0.25); }
#stumble-text {
  font-family:var(--font-family);
  font-size:clamp(48px,12vw,110px); font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:#ff2200; text-shadow:0 0 40px #ff220099;
  opacity:0; transition:opacity 0.1s;
  pointer-events:none;
}
#stumble-text.show { opacity:1; }

/* COUNTDOWN OVERLAY */
#countdown-overlay {
  position:fixed; inset:0; z-index:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:color-mix(in srgb,var(--background-color) 70%,transparent); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s;
}
#countdown-overlay.visible { opacity:1; visibility:visible; }
#countdown-num {
  font-family:var(--font-family); font-size:clamp(80px,20vw,200px); font-weight:700;
  color:var(--primary-color); text-shadow:0 0 60px var(--primary-color);
  animation:countPop 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes countPop { from{transform:scale(2);opacity:0} to{transform:scale(1);opacity:1} }
#countdown-label { font-family:var(--font-family); font-size:clamp(16px,3vw,28px); letter-spacing:6px; text-transform:uppercase; color:color-mix(in srgb,var(--secondary-color) 33%,transparent); }

/* RESULT SCREEN */
#result-screen {
  position:fixed; inset:0; z-index:800;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:color-mix(in srgb,var(--background-color) 92%,transparent); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity 0.5s,visibility 0.5s; cursor:pointer;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
  overflow-y:auto; overflow-x:hidden;
}
#result-screen.visible { opacity:1; visibility:visible; }

#result-horse-anim { font-size:clamp(40px,10vmin,120px); filter:drop-shadow(0 0 20px currentColor); animation:previewGallop 0.4s ease infinite alternate; line-height:1; margin-bottom:8px; transform:scaleX(-1); }
#result-title {
  font-family:var(--font-family);
  font-size:clamp(36px,10vmin,130px); font-weight:700;
  text-transform:uppercase; letter-spacing:3px; color:var(--secondary-color); text-align:center;
  animation:resultIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
@keyframes resultIn { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }

#result-stats {
  display:flex; gap:clamp(16px,5vw,40px); margin-top:clamp(8px,2vh,24px); margin-bottom:4px;
}
.result-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.result-stat-val { font-family:var(--font-family); font-size:clamp(28px,5vmin,58px); font-weight:700; color:var(--primary-color); line-height:1; }
.result-stat-label { font-family:var(--secondary-font-family); font-size:var(--secondary-font-size); letter-spacing:4px; text-transform:uppercase; color:color-mix(in srgb,var(--secondary-color) 27%,transparent); }

#result-best-badge {
  font-family:var(--secondary-font-family);
  font-size:var(--secondary-font-size); letter-spacing:4px; text-transform:uppercase;
  color:var(--primary-color); margin-top:6px; opacity:0;
  animation:blinkAnim 1.2s ease infinite;
}
#result-best-badge.show { opacity:1; }
#result-best-badge::before { content:'🏆 '; }

#result-rhythm-replay {
  display:flex; gap:4px; margin-top:12px;
  max-width:min(300px,80vw); flex-wrap:wrap; justify-content:center;
}
.replay-dot { width:8px; height:8px; border-radius:50%; }

#result-cta { font-family:var(--secondary-font-family); font-size:var(--secondary-font-size); letter-spacing:5px; text-transform:uppercase; color:color-mix(in srgb,var(--secondary-color) 20%,transparent); margin-top:clamp(14px,3vh,24px); animation:blinkAnim 1.8s ease infinite; }

/* PAUSE */
#pause-btn { position:fixed; top:12px; right:12px; z-index:999; width:36px; height:36px; background:color-mix(in srgb,var(--secondary-color) 4%,transparent); border:1.5px solid color-mix(in srgb,var(--secondary-color) 13%,transparent); border-radius:8px; color:color-mix(in srgb,var(--secondary-color) 27%,transparent); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
#pause-btn:hover { background:color-mix(in srgb,var(--secondary-color) 9%,transparent); border-color:color-mix(in srgb,var(--secondary-color) 40%,transparent); color:var(--secondary-color); }
#pause-btn.paused { border-color:var(--primary-color); color:var(--primary-color); }
#pause-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.7); backdrop-filter:blur(5px); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s,visibility 0.3s; cursor:pointer; }
#pause-overlay.visible { opacity:1; visibility:visible; pointer-events:all; }
#pause-label { font-family:var(--font-family); font-size:clamp(60px,14vw,120px); font-weight:700; color:var(--primary-color); letter-spacing:6px; text-shadow:0 0 40px var(--primary-color); animation:pausePulse 1.8s ease infinite; }
@keyframes pausePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(0.97)} }
#pause-sub { font-family:var(--secondary-font-family); font-size:12px; letter-spacing:5px; color:color-mix(in srgb,var(--secondary-color) 27%,transparent); text-transform:uppercase; margin-top:8px; animation:blinkAnim 2s ease infinite; }

/* CORNERS */
.corner { position:fixed; width:44px; height:44px; opacity:0.2; z-index:20; pointer-events:none; }
.corner.tl { top:10px;left:10px; border-top:1.5px solid var(--primary-color); border-left:1.5px solid var(--primary-color); }
.corner.tr { top:10px;right:10px; border-top:1.5px solid var(--primary-color); border-right:1.5px solid var(--primary-color); }
.corner.bl { bottom:10px;left:10px; border-bottom:1.5px solid var(--primary-color); border-left:1.5px solid var(--primary-color); }
.corner.br { bottom:10px;right:10px; border-bottom:1.5px solid var(--primary-color); border-right:1.5px solid var(--primary-color); }

@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)}  to{opacity:1;transform:translateY(0)} }

/* ── SMALL / SHORT PHONES ── */
@media (max-height:600px) {
  #splash-top { padding-top:6px; }
  #splash-header-logo img { height:clamp(24px,5vh,50px); }
  #splash-horse-main { font-size:clamp(36px,10vmin,80px); }
  #splash-title { font-size:clamp(28px,8vmin,60px); }
  #splash-thumbs { gap:clamp(12px,4vw,24px); }
  .splash-thumb-icon { font-size:clamp(22px,5vw,36px); }
  #splash-inner { gap:2px; }
  #splash-bottom { padding-bottom:6px; }
  .splash-bottom-divider { margin-bottom:6px; }
  #splash-sponsor-logo { height:clamp(18px,3vh,28px); }
  .thumb-btn { width:clamp(64px,18vmin,120px); height:clamp(64px,18vmin,120px); }
  .thumb-icon { font-size:clamp(24px,5vw,40px); }
  #result-horse-anim { font-size:clamp(32px,8vmin,60px); margin-bottom:4px; }
  #result-title { font-size:clamp(28px,8vmin,60px); }
  .result-stat-val { font-size:clamp(22px,4vmin,40px); }
  #result-rhythm-replay { margin-top:6px; }
  #result-cta { margin-top:8px; }
  #horse-emoji { font-size:clamp(54px,14vw,100px); }
  #hud-logo img { height:clamp(24px,4vh,40px); }
}

@media (max-height:500px) {
  #splash-app-label { display:none; }
  #splash-thumbs { display:none; }
  #splash-sub { margin-top:4px; }
}