/* ─── ro-spill — retro rhythm-game styling (placeholder art) ──────────────── */

:root {
  --bg:     #1a0e06;
  --gold:   #e8b04b;
  --green:  #4caf72;
  --cream:  #f5e9d0;
  --ink:    #2a1709;
  /* Norway flag palette */
  --red:    #c8102e;
  --blue:   #00205b;
  --white:  #ffffff;
}

/* Press Start 2P, self-hosted; swaps in when loaded (Courier until then). */
@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/press-start-2p-latin.woff2") format("woff2");
  font-display: swap;
}
* {
  box-sizing: border-box;
  font-family: "Press Start 2P", "Courier New", ui-monospace, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--cream);
  /* pixel aesthetic */
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* mobile: no pull-to-refresh, no double-tap zoom, no long-press callout */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

#game-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* shake transforms are applied here at runtime */
  will-change: transform;
}

/* iOS Safari samples the background-color of fixed elements near the top/bottom
   edges to tint its status/URL bars (iOS 26) — and fills the safe area with the
   page background on older iOS. These 1px strips carry the per-scene edge color
   so the native bars blend into the artwork instead of showing a dark band. */
#chrome-top, #chrome-bottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 100;
  pointer-events: none;
  background: var(--bg);
}
#chrome-top { top: 0; }
#chrome-bottom { bottom: 0; }

/* ─── Background layer (placeholder gradient; swappable for real art) ─────── */
#background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #3a2410 0%, #1a0e06 55%, #0e0703 100%);
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}
/* subtle animated water shimmer — only over the placeholder gradient */
#background-layer:not(.has-bg)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: repeating-linear-gradient(
    180deg,
    rgba(232, 176, 75, 0.05) 0px,
    rgba(232, 176, 75, 0.05) 2px,
    transparent 2px,
    transparent 10px
  );
  opacity: 0.6;
}
/* darken the scene a touch so the rower + HUD stay readable */
#background-layer.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.08) 38%, rgba(0,0,0,0.42) 100%);
}

/* ─── Background-select carousel (title screen) ──────────────────────────── */
#bg-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}
#bg-carousel .bg-arrow {
  font: inherit;
  font-size: 22px;
  color: var(--white);
  background: var(--red);
  border: 3px solid var(--white);
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--blue);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
#bg-carousel .bg-arrow:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--blue); }
#bg-name {
  min-width: 8em;
  padding: 12px 14px;
  font-size: clamp(11px, 2.8vw, 16px);
  color: var(--white);
  letter-spacing: 1px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 4px;
}

#game-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* play area owns all gestures — no scroll/pinch on the game */
  touch-action: none;
  /* keep HUD/sweep clear of notch + home indicator */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── Screens ────────────────────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.screen.active {
  display: flex;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-size: clamp(16px, 3.4vw, 22px);
  color: var(--white);
  background: var(--red);
  border: 4px solid var(--white);
  padding: 20px 40px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 6px 0 var(--blue);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ─── Title ──────────────────────────────────────────────────────────────── */
.title-logo {
  font-size: clamp(26px, 11vw, 96px);
  white-space: nowrap;
  color: var(--white);
  /* Norway-flag layered outline: white text, blue then red offset, dark drop */
  text-shadow:
    -3px 0 0 var(--blue), 3px 0 0 var(--blue),
    0 -3px 0 var(--blue), 0 3px 0 var(--blue),
    0 7px 0 var(--red),
    0 10px 0 #00000066;
  margin: 0 0 32px;
  letter-spacing: 3px;
}
.hint {
  margin-top: 26px;
  font-size: clamp(8px, 2.2vw, 11px);
  color: var(--cream);
  opacity: 0.8;
  line-height: 1.8;
}

/* Sound reminder badge — button-style pill pinned to the bottom of the title
   screen. Absolute within the .screen (inset:0), so it tracks any viewport and
   hides automatically when the title screen is inactive. */
#sound-hint {
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: 1px;
  color: var(--white);
  background: var(--red);
  border: 3px solid var(--white);
  padding: 8px 18px;
  box-shadow: 0 4px 0 var(--blue);
}

/* ─── HUD ────────────────────────────────────────────────────────────────── */
#hud {
  position: absolute;
  top: calc(48px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}
#hud-score {
  font-size: clamp(32px, 10vw, 64px);
  color: var(--white);
  text-shadow:
    -2px 0 0 var(--blue), 2px 0 0 var(--blue),
    0 4px 0 var(--red),
    0 6px 0 #000000aa;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
#hud-combo {
  margin-top: 12px;
  font-size: clamp(15px, 4.2vw, 26px);
  color: var(--red);
  text-shadow: 0 2px 0 #000000aa;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-height: 1em;
}
#hud-score.miss {
  animation: score-miss 0.34s ease;
}
@keyframes score-miss {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.82); color: var(--red); }
  100% { transform: scale(1); }
}
#hud-combo.pop {
  animation: combo-pop 0.28s ease;
}
@keyframes combo-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); color: var(--white); }
  100% { transform: scale(1); }
}

/* ─── Rower (placeholder, CSS shapes) ────────────────────────────────────── */
#rower {
  position: absolute;
  left: 50%;
  /* top is set per-background by JS (the seat anchor); this is the fallback. */
  top: 30%;
  transform: translate(-50%, 0);
  width: min(70vw, 540px);
  height: min(70vw, 540px);
  z-index: 3;
}
/* 3 stacked stroke frames; only .show is visible. */
.rf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 40ms linear;
}
.rf.show {
  opacity: 1;
}

/* ─── Sweep bar ──────────────────────────────────────────────────────────── */
#sweep-bar {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(86vw, 620px);
  height: 46px;
  background: #0a1330;
  border: 4px solid var(--red);
  border-radius: 8px;
  z-index: 4;
}
/* center target — the indicator crosses it on each beat (the correct spot) */
.sweet-spot {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 20%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.30);
  border-left: 3px solid var(--white);
  border-right: 3px solid var(--white);
}
/* tighter perfect center line */
.perfect-line {
  position: absolute;
  left: 50%;
  top: -6px;
  bottom: -6px;
  width: 4px;
  transform: translateX(-50%);
  background: var(--cream);
  box-shadow: 0 0 10px rgba(245, 233, 208, 0.7);
}
/* moving indicator: translateX only (GPU-composited) */
#sweep-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 60px;
  background: var(--red);
  border: 3px solid var(--white);
  border-radius: 4px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  box-shadow: 0 0 12px rgba(200, 16, 46, 0.8);
}

/* ─── Finale flourish ────────────────────────────────────────────────────── */
#finale {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: clamp(56px, 20vw, 150px);
  color: var(--white);
  text-shadow:
    -4px 0 0 var(--blue), 4px 0 0 var(--blue),
    0 -4px 0 var(--blue), 0 4px 0 var(--blue),
    0 9px 0 var(--red),
    0 0 30px rgba(0, 32, 91, 0.6);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}
#finale.show {
  animation: finale-pop 1.4s ease-out;
}
#finale.count {
  animation: count-pop 0.62s ease-out;
}
@keyframes finale-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(4deg); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes count-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* ─── Color flash overlay ────────────────────────────────────────────────── */
#flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
#flash.flashing {
  animation: flash-fade 180ms ease-out;
}
@keyframes flash-fade {
  0%   { /* opacity set inline by JS */ }
  100% { opacity: 0; }
}

/* ─── Particle canvas ────────────────────────────────────────────────────── */
#particles {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

/* ─── Score screen ───────────────────────────────────────────────────────── */
/* score text up top, character behind/centre, buttons at the bottom — composes
   into a clean shareable card. */
#screen-score {
  justify-content: center;
  gap: clamp(6px, 1.6vh, 18px);
  padding: 6% 24px max(6%, env(safe-area-inset-bottom));
}
#rower-end {
  width: auto;
  height: clamp(140px, 32vh, 300px);
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 0 #00000033);
}
.score-top { position: relative; z-index: 2; }
.score-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.score-title {
  font-size: clamp(22px, 6.5vw, 44px);
  color: var(--white);
  margin: 0;                 /* spacing handled by #screen-score flex gap */
  text-shadow:
    -2px 0 0 var(--blue), 2px 0 0 var(--blue),
    0 4px 0 var(--red),
    0 6px 0 #000000aa;
}
.final-score-label {
  font-size: clamp(9px, 2.6vw, 13px);
  color: var(--white);
  letter-spacing: 3px;
  text-shadow: 0 2px 0 #000, 0 0 6px #000, -1px 0 0 #000, 1px 0 0 #000;
}
#final-score {
  font-size: clamp(44px, 14vw, 96px);
  color: var(--white);
  margin: 8px 0 0;
  text-shadow:
    -3px 0 0 var(--blue), 3px 0 0 var(--blue),
    0 6px 0 var(--red),
    0 9px 0 #00000088;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* secondary button (e.g. back to menu) — blue instead of red */
.btn.ghost {
  background: var(--blue);
  box-shadow: 0 6px 0 #00000066;
  font-size: clamp(13px, 2.8vw, 17px);
  padding: 14px 28px;
}
.btn.ghost:active:not(:disabled) { box-shadow: 0 2px 0 #00000066; }