:root {
  --midnight-green: #004C54;
  --midnight-green-dark: #00282c;
  --black: #000000;
  --white: #FFFFFF;
  --cream: #FDFBD4;
  --silver: #A5ACAF;
  --silver-dark: #787f82;
  --sky: #8FD6E8;
  --gold: #E8B33D;
  --gold-dark: #9c7320;
  --bronze: #C97A42;
  --bronze-dark: #7c4a26;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky);
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* --- Splash / loading screen ---
   Sky-blue cover with the loading gif centered, shown until game.js's
   boot() confirms every asset (DOM images — logo, buttons — and the
   canvas sprites — clouds, cityscape, street, etc.) has actually
   finished loading, at which point it adds .assets-ready to <body>.
   Real readiness, not a guessed timer.

   Hidden by default rather than shown-then-faded — on a fast connection
   everything can finish loading in well under a second, and popping the
   spinner up just to immediately fade it back out reads as a glitch, not
   a loading state. game.js only adds .show-loading (see below) if
   loading is still in progress 2s in, so quick loads skip the splash
   entirely and slow ones still get a clear "it's working" indicator. */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.loading-spinner {
  width: min(28vw, 96px);
  height: auto;
}

body.show-loading #loading-screen {
  opacity: 1;
}

body.assets-ready #game-root {
  opacity: 1;
  pointer-events: auto;
}

body.assets-ready #loading-screen {
  opacity: 0;
  pointer-events: none;
}

#game-stage {
  position: relative;
  line-height: 0;
  width: 100%;
  height: 100%;
}

#game-canvas {
  display: block;
  touch-action: none;
  background: var(--sky);
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 24px;
  gap: 16px;
  line-height: normal; /* #game-stage sets line-height:0 to collapse the canvas baseline gap; reset it here so overlay text lays out normally */
}

.hidden {
  display: none !important;
}

/* --- Pixel button system: chunky border + solid drop shadow that
   "presses in" on click, like classic 16-bit arcade UI chrome. --- */
.pixel-btn {
  appearance: none;
  cursor: pointer;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 3px solid var(--black);
  border-radius: 10px;
  color: var(--pixel-fg, var(--white));
  background: var(--pixel-bg, var(--midnight-green));
  box-shadow: 0 3px 0 var(--pixel-shadow, var(--midnight-green-dark));
  transform: translateY(0);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.pixel-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--pixel-shadow, var(--midnight-green-dark));
}

.pixel-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pixel-btn:disabled:active {
  transform: none;
  box-shadow: 0 3px 0 var(--pixel-shadow, var(--midnight-green-dark));
}

.start-middle-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.start-middle-actions .pill {
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
}

.how-to-play-btn {
  font-weight: 800;
  letter-spacing: 0.5px;
}

#attribution {
  position: absolute;
  right: calc(11px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 10.6px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

#privacy-link {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

#privacy-link:hover,
#privacy-link:focus {
  text-decoration: underline;
}

/* --- HUD --- */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  pointer-events: none;
  z-index: 5;
  line-height: normal;
}

#hud-live-score {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: "receipt-narrow", system-ui, sans-serif;
  /* Base/fallback size — game.js's sizeLiveScore() sets the real size
     per-frame via inline style, shrinking only as digit count grows so it
     never bumps into the Best chip on narrow phones (see there). */
  font-size: 90px;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
  -webkit-text-stroke: .2px var(--black);
  text-shadow: -3px 2px 0 var(--black);
  font-variant-numeric: tabular-nums;
}

#countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 135px;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  /* -webkit-text-stroke: 3px var(--black); */
  text-shadow: -9px 7px 0 var(--black);
}

#countdown-overlay.pulse {
  animation: countdown-pop 1s ease-out forwards;
}

@keyframes countdown-pop {
  0% { transform: scale(1.4); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0; }
}

.hud-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  background: var(--white);
  color: var(--midnight-green);
  padding: 0 14px;
  border-radius: 10px;
  border: 3px solid var(--black);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

#hud-score {
  min-width: 1.2em;
  text-align: center;
}

.icon-btn {
  --pixel-bg: var(--silver);
  --pixel-shadow: var(--silver-dark);
  pointer-events: all;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-refresh-scores {
  --pixel-bg: var(--white);
  --pixel-fg: var(--midnight-green);
  --pixel-shadow: var(--silver-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  width: auto;
  max-width: 170px;
}

.refresh-icon-img {
  width: 11px;
  height: 11px;
}

.refresh-icon-img.spinning {
  animation: refresh-spin 0.6s linear;
}

@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-img {
  height: 16px;
  width: auto;
  image-rendering: pixelated;
  vertical-align: middle;
}

.sound-icon-img {
  height: 18px;
  width: auto;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* --- Start screen (no card — sits directly on the scene) --- */
.start-overlay {
  padding: 18px 20px 28px;
}

.start-top-row {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.start-top-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-icon-wrap {
  position: relative;
  display: inline-flex;
}

@media (max-width: 408px) {
  .share-icon-wrap {
    display: none;
  }
}

.share-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
  max-width: 135px;
}

.share-icon-btn {
  --pixel-bg: var(--white);
  --pixel-shadow: var(--silver-dark);
  font-size: 18px;
}

.share-icon-img {
  height: 18px;
  width: auto;
}

.share-toast {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.share-toast.visible {
  opacity: 1;
  transform: translate(0, -50%);
}

.best-breakdown {
  position: absolute;
  top: 64px;
  left: 20px;
  z-index: 10;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.best-breakdown-username {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--silver-dark);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.best-breakdown-username strong {
  color: var(--white);
  background-color: var(--midnight-green);
  padding: 2px 10px 4px 10px;
  border-radius: 6px;
}

.username-edit-icon {
  font-size: 11px;
  color: var(--silver-dark);
  opacity: 0.7;
}

.best-breakdown-username:hover .username-edit-icon,
.best-breakdown-username:active .username-edit-icon {
  opacity: 1;
}

.username-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

#username-edit-input {
  width: 64px;
  height: 28px;
  box-sizing: border-box;
  text-align: center;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 0 0 6px;
  border-radius: 6px;
  border: 2px solid var(--black);
  background: #F2F4F4;
  color: var(--midnight-green);
}

.username-edit-save {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: var(--silver);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.username-edit-save.ready {
  background: #3DBE5C;
}

.best-breakdown-divider {
  width: 100%;
  border: none;
  border-top: 2px solid var(--silver);
  margin: 0;
}

.best-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--midnight-green);
  white-space: nowrap;
}

.start-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  background: var(--white);
  color: var(--midnight-green);
  padding: 0 14px;
  border-radius: 10px;
  border: 3px solid var(--black);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pill-btn {
  --pixel-bg: var(--white);
  --pixel-fg: var(--midnight-green);
  --pixel-shadow: var(--silver-dark);
  border: 3px solid var(--black);
  box-shadow: 0 2px 0 var(--pixel-shadow);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.pill-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--pixel-shadow);
}

/* --- Panels (game over / leaderboard) --- */
.panel {
  position: relative;
  background: var(--cream);
  border: 4px solid var(--black);
  border-radius: 16px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.3);
  padding: 26px 22px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--midnight-green);
}

.title {
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 46px;
  font-weight: 450;
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  color: var(--white);
  -webkit-text-stroke: 1.5px var(--black);
  text-shadow: 3px 3px 0 var(--midnight-green);
}

.panel .title {
  color: var(--midnight-green);
  -webkit-text-stroke: 1.5px var(--black);
  text-shadow: 2px 2px 0 var(--silver);
}

.logo-img {
  width: min(82vw, 320px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.2));
}

/* Brief squash on every tap so a logo tap that isn't the 5th (Birdzerk)
   tap still visibly does something, instead of looking unresponsive —
   it sits dead-center over "Tap anywhere to begin", exactly where a
   normal start tap naturally lands. */
.logo-img.tap-pulse {
  animation: logo-tap-pulse 0.18s ease-out;
}

@keyframes logo-tap-pulse {
  0%   { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.gameover-img {
  width: min(70vw, 260px);
  height: auto;
  image-rendering: pixelated;
}

.difficulty-select {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 220px;
  /* Generous padding so a tap that's "close enough" to the slider still
     lands on this control instead of falling through and starting the
     game — the visible track is thin, the tappable zone shouldn't be. */
  padding: 18px 0;
  margin: -18px 0;
}

.difficulty-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  margin: 6px 0;
  background: transparent;
  cursor: pointer;
}

.difficulty-slider::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 8px;
  border: 3px solid var(--black);
  background: linear-gradient(90deg, #3DBE5C 0%, #3DBE5C 28%, #F0A830 50%, #F0A830 72%, #E24C4C 100%);
}

.difficulty-slider::-moz-range-track {
  height: 16px;
  border-radius: 8px;
  border: 3px solid var(--black);
  background: linear-gradient(90deg, #3DBE5C 0%, #3DBE5C 28%, #F0A830 50%, #F0A830 72%, #E24C4C 100%);
}

.difficulty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 7px;
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

.difficulty-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

.difficulty-slider[data-level="easy"]::-webkit-slider-thumb { background: #3DBE5C; }
.difficulty-slider[data-level="medium"]::-webkit-slider-thumb { background: #F0A830; }
.difficulty-slider[data-level="hard"]::-webkit-slider-thumb { background: #E24C4C; }
.difficulty-slider[data-level="easy"]::-moz-range-thumb { background: #3DBE5C; }
.difficulty-slider[data-level="medium"]::-moz-range-thumb { background: #F0A830; }
.difficulty-slider[data-level="hard"]::-moz-range-thumb { background: #E24C4C; }

.difficulty-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.difficulty-label {
  opacity: 0.6;
  background: none;
  border: none;
  margin: 0;
  /* Same box size as .active below (padding/radius) at all times, just
     with a transparent background — otherwise toggling .active changes
     this label's box size, which nudges its neighbors in this
     space-between row (a visible "bump" on every selection). */
  padding: 2px 6px 2px 6px;
  border-radius: 100px;
  font: inherit;
  /* Buttons don't inherit text color from their parent like other
     elements do — without this, unstyled buttons fall back to the
     browser's default control color (system blue on iOS/Safari) instead
     of matching the other labels on this control. */
  color: var(--black);
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.difficulty-label.active {
  opacity: 1;
  background: white;
  text-shadow: none;
}

.difficulty-label[data-level="easy"].active { color: #3DBE5C; }
.difficulty-label[data-level="medium"].active { color: #F0A830; }
.difficulty-label[data-level="hard"].active { color: #E24C4C; }

.tap-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.tap-badge {
  --pixel-bg: var(--midnight-green);
  --pixel-shadow: var(--midnight-green-dark);
  display: inline-block;
  padding: 8px 28px;
  font-size: 18px;
  animation: tap-pulse 1.1s ease-in-out infinite;
}

@keyframes tap-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.94); }
}

.instructions {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--midnight-green-dark);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  margin: 0;
}

/* Spacebar is only a real option on tablet/desktop, so the two screen
   sizes get different instruction text rather than mobile showing a
   control it doesn't have. */
.instructions-desktop {
  display: none;
}

@media (min-width: 768px) {
  .instructions-mobile {
    display: none;
  }
  .instructions-desktop {
    display: block;
  }
}

.stat-row {
  display: flex;
  gap: 16px;
  margin: 2px 0;
  width: 100%;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #F2F4F4;
  border: 3px solid var(--black);
  border-radius: 10px;
  padding: 10px 8px;
}

.stat-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 700;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--midnight-green);
}

.badge-new-best {
  display: inline-block;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3DBE5C;
}

.btn {
  padding: 14px 28px;
  font-size: 17px;
  width: 100%;
  max-width: 260px;
}

.btn-primary {
  --pixel-bg: var(--midnight-green);
  --pixel-shadow: var(--midnight-green-dark);
}

.btn-secondary {
  --pixel-bg: var(--white);
  --pixel-fg: var(--midnight-green);
  --pixel-shadow: var(--silver-dark);
}

.btn-text {
  background: none;
  border: none;
  color: var(--silver-dark);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.gameover-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.btn-small {
  flex: 1;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  font-size: 13px;
}

.share-divider {
  width: 100%;
  max-width: 280px;
  border: none;
  border-top: 2px solid var(--silver);
  margin: 4px 0;
}

.share-btn {
  width: 100%;
  max-width: 135px;
  min-height: 35px !important;
  box-shadow: 0 5px 0 var(--pixel-shadow, var(--midnight-green-dark));
}

.share-btn:active {
  box-shadow: 0 0 0 var(--pixel-shadow, var(--midnight-green-dark));
}

.add-home-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 10px 28px 10px 12px;
  border-radius: 12px;
  background: #E3F6FB;
  border: 2px solid var(--sky);
  cursor: default;
  animation: add-home-pop 0.4s ease-out;
}

@keyframes add-home-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.add-home-icon {
  font-size: 22px;
  line-height: 1;
  flex: none;
}

.add-home-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: var(--midnight-green);
}

.add-home-copy strong {
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.add-home-cta {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--midnight-green);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.add-home-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--midnight-green);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.played-on {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: var(--silver-dark);
}

/* --- Initials form --- */
#initials-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.initials-label {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 700;
}

.initials-input-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
}

#initials-input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  text-align: left;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 8px;
  text-transform: uppercase;
  padding: 0 78px 0 16px;
  border-radius: 10px;
  border: 3px solid var(--black);
  background: #F2F4F4;
  color: var(--midnight-green);
}

.initials-submit-slot {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

/* Flat "chip" style, not the usual pixel-btn chrome — it's nested inside
   the input's own bordered box, so a second thick border + drop shadow
   here just collides with it at the rounded corners instead of looking
   embedded. */
.initials-submit-btn {
  --pixel-bg: var(--silver);
  --pixel-fg: var(--white);
  height: 32px;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: 12px;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

.initials-submit-btn:active {
  transform: none;
  box-shadow: none;
  opacity: 0.8;
}

.initials-submit-btn.ready {
  --pixel-bg: #3DBE5C;
}

#initials-input:focus {
  outline: none;
  background: var(--white);
}

#initials-submitted {
  font-size: 15px;
  font-weight: 700;
  color: var(--midnight-green);
  background: #F2F4F4;
  border: 3px solid var(--black);
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 18px;
  line-height: 1.3;
}

#initials-submitted.success {
  background: var(--gold);
  color: var(--black);
}

#initials-submitted.error {
  background: #FFE1E1;
  color: #B3261E;
}

#initials-submitted.pending {
  background: #F2F4F4;
  color: var(--silver-dark);
  animation: submitting-pulse 1s ease-in-out infinite;
}

@keyframes submitting-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* --- Leaderboard --- */
.leaderboard-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--black);
  background: #E24C4C;
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 #8f2626;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.leaderboard-close-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #8f2626;
}

/* --- Instructions --- */
.instructions-panel {
  width: min(95vw, 640px);
  height: min(95vh, 760px);
  max-width: 95vw;
  max-height: 95vh;
  align-items: stretch;
  overflow-y: auto;
  background-color: var(--white);
}

.instructions-panel > .btn {
  align-self: center;
}

.instructions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  text-align: left;
  overflow-y: auto;
}

.instructions-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.instructions-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1.3;
}

.instructions-text {
  min-width: 0;
}

.instructions-heading {
  margin: 0 0 4px;
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--midnight-green);
}

.instructions-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--midnight-green-dark);
}

.instructions-desc .difficulty-tag {
  vertical-align: middle;
}

.add-home-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--midnight-green-dark);
}

.add-home-steps li {
  padding-left: 2px;
}

.add-home-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.add-home-preview-img {
  width: 62px;
  height: auto;
  border-radius: 8px;
}

.add-home-footnote {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--silver-dark);
  text-align: center;
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.leaderboard-filters {
  display: flex;
  gap: 6px;
  width: 100%;
}

.filter-btn {
  --pixel-bg: var(--white);
  --pixel-fg: var(--silver-dark);
  --pixel-shadow: var(--silver-dark);
  flex: 1;
  padding: 7px 4px;
  font-size: 11px;
}

.filter-btn.active {
  --pixel-fg: var(--white);
}

.filter-btn[data-difficulty="easy"].active {
  --pixel-bg: #3DBE5C;
  --pixel-shadow: #277a3c;
}

.filter-btn[data-difficulty="medium"].active {
  --pixel-bg: #F0A830;
  --pixel-shadow: #a06f1a;
}

.filter-btn[data-difficulty="hard"].active {
  --pixel-bg: #E24C4C;
  --pixel-shadow: #8f2626;
}

.filter-btn[data-difficulty="birdzerk"].active {
  --pixel-bg: #1a1a1a;
  --pixel-shadow: #ff5a1f;
}

.filter-btn-wrap {
  position: relative;
  flex: 1;
  display: flex;
}

.filter-btn-wrap .filter-btn {
  flex: 1;
}

.filter-btn.locked {
  opacity: 0.45;
}

.birdzerk-lock-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 170px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.birdzerk-lock-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: #F2F4F4;
  border: 3px solid var(--black);
  padding: 7px 10px;
  border-radius: 10px;
  font-weight: 700;
}

.difficulty-tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  border: 2px solid var(--black);
  color: var(--white);
  letter-spacing: 0.5px;
}

.difficulty-tag[data-difficulty="easy"] { background: #3DBE5C; }
.difficulty-tag[data-difficulty="medium"] { background: #F0A830; }
.difficulty-tag[data-difficulty="hard"] { background: #E24C4C; }
.difficulty-tag[data-difficulty="birdzerk"] { background: #1a1a1a; border-color: #ff5a1f; }

.leaderboard-row .rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  color: var(--black);
  font-size: 14px;
}

.leaderboard-row.rank-1 .rank { background: var(--gold);border: 2px solid var(--black); color: var(--white);}
.leaderboard-row.rank-2 .rank { background: var(--silver);border: 2px solid var(--black); color: var(--white);}
.leaderboard-row.rank-3 .rank { background: var(--bronze);border: 2px solid var(--black); color: var(--white);}

.leaderboard-row .name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.leaderboard-row .initials {
  letter-spacing: 2px;
  color: var(--midnight-green);
}

.leaderboard-row .tied-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--silver-dark);
  white-space: nowrap;
}

.leaderboard-row .score {
  font-variant-numeric: tabular-nums;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--midnight-green);
}

#leaderboard-empty {
  color: var(--silver-dark);
  font-size: 14px;
  padding: 20px 0;
}

#leaderboard-note {
  font-size: 11px;
  color: var(--silver-dark);
  line-height: 1.4;
}

@media (max-height: 700px) {
  .title { font-size: 34px; }
  .panel { padding: 18px 18px; gap: 10px; }
  .logo-img { width: min(70vw, 240px); }
}

/* --- Top-3 leaderboard confetti --- */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate(0, 0) rotate(var(--rotate-start));
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), 110vh) rotate(var(--rotate-end));
    opacity: 0.9;
  }
}

/* --- Birdzerk Mode easter egg --- */
.birdzerk-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 300;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  color: var(--white);
  background: rgba(20, 0, 0, 0.75);
  border: 3px solid #ff5a1f;
  border-radius: 14px;
  padding: 16px 22px;
  letter-spacing: 0.5px;
  pointer-events: none;
  text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff3b00;
  animation: birdzerk-pop 0.35s ease-out;
  min-width: 360px;
}

@keyframes birdzerk-pop {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.birdzerk-replay-panel {
  background: rgba(20, 0, 0, 0.9);
  border-color: #ff5a1f;
  color: var(--white);
  max-width: 360px;
}

.birdzerk-replay-title {
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff3b00;
}

.birdzerk-replay-desc {
  margin: 0;
  color: var(--silver);
  font-size: 14px;
}

.fire-piece {
  position: absolute;
  animation-name: fire-float;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fire-float {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--drift), var(--rise)) rotate(var(--spin)) scale(1); opacity: 0; }
}

/* --- Play-count break screen --- */
#screen-break {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 24px;
}

.break-panel {
  max-width: 340px;
  text-align: center;
  gap: 10px;
}

.break-title {
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--midnight-green);
  margin: 0;
}

.break-message {
  font-size: 14px;
  font-weight: 700;
  color: var(--midnight-green-dark);
  margin: 0;
}

.break-countdown {
  font-family: "receipt-narrow", system-ui, sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--midnight-green);
  /* -webkit-text-stroke: 1.5px var(--black); */
  text-shadow: 3px 3px 0 var(--silver);
  font-variant-numeric: tabular-nums;
}

.break-subtext {
  font-size: 12px;
  color: var(--silver-dark);
  margin: 0;
}