:root {
  --c0: #9BBC0F;
  --c1: #8BAC0F;
  --c2: #306230;
  --c3: #0F380F;
}

/* ══════════════════════════════════════════════════════════════
   NES COLOR MODE
   Base vars → everything dark/white, then specific overrides
   inject the NES piece palette as accent colors.
══════════════════════════════════════════════════════════════ */
body.nes {
  --c0: #000000;   /* page / panel bg   */
  --c1: #0A0A1C;   /* input / secondary  */
  --c2: #4040A0;   /* muted accent       */
  --c3: #FFFFFF;   /* primary text       */
}

/* ── Pure black background – real NES Tetris ──────────────── */
body.nes {
  background-color: #000000;
  background-image: none;
}

/* ── Starfield canvas ─────────────────────────────────────── */
#stars-canvas {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
body.nes #stars-canvas { display: block; }

/* ── Page / start screen ──────────────────────────────────── */
body.nes #start-screen  { background: transparent; }
body.nes #game-wrapper  { background: transparent; }

/* ── Marquee ──────────────────────────────────────────────── */
body.nes .marquee-wrap       { background: #141414; border-bottom: 2px solid #111111; }
body.nes .marquee-wrap span  { color: #FFFFFF; }

/* ── Version selector ─────────────────────────────────────── */
body.nes #version-label  { color: #555555; }
body.nes .ver-btn        { background: #444444; color: #FFFFFF; border-color: #444444; opacity: 1; }
body.nes .ver-btn.on     { background: #F8D800; color: #000000; border-color: #F8D800; }

/* ── Title – rainbow letters, one per piece type ──────────── */
body.nes .title-rule {
  background: linear-gradient(90deg,#00C8C8 0%,#F8D800 17%,#9818D8 33%,#00A800 50%,#E00000 67%,#0038D8 83%,#F87800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.35em;
}
body.nes #game-title { color: inherit; text-shadow: none; }
body.nes .tl-1 { color: #00C8C8; text-shadow: 4px 4px 0 #005858; } /* G – I – Cyan   */
body.nes .tl-2 { color: #F8D800; text-shadow: 4px 4px 0 #706000; } /* A – O – Yellow */
body.nes .tl-3 { color: #9818D8; text-shadow: 4px 4px 0 #440878; } /* M – T – Purple */
body.nes .tl-4 { color: #00A800; text-shadow: 4px 4px 0 #004800; } /* E – S – Green  */
body.nes .tl-5 { color: #E00000; text-shadow: 4px 4px 0 #600000; } /* B – Z – Red    */
body.nes .tl-6 { color: #0038D8; text-shadow: 4px 4px 0 #001870; } /* O – J – Blue   */
body.nes .tl-7 { color: #F87800; text-shadow: 4px 4px 0 #703400; } /* Y – L – Orange */
body.nes .title-se { color: #F8D800; text-shadow: none; -webkit-text-fill-color: #F8D800; }

/* ── PRESS START – white blinking, classic NES ────────────── */
body.nes #start-btn   { color: #FFFFFF; }

/* ── Leaderboard – Green (S piece) ───────────────────────── */
body.nes #lb-btn             { color: #00D800; }
body.nes #lb-btn .lb-arrow   { color: #00D800; }
/* ── Donators – Red (Z piece) ────────────────────────────── */
body.nes #donators-btn             { color: #E820A0; }
body.nes #donators-btn .lb-arrow   { color: #E820A0; }

/* ── Start footer ─────────────────────────────────────────── */
body.nes #howto-btn   { color: #00C8C8 !important; opacity: 1; } /* Cyan  – I */
body.nes #options-btn { color: #F8D800 !important; opacity: 1; } /* Yellow– O */
body.nes #legal-btn   { color: #9818D8 !important; opacity: 1; } /* Purple– T */
body.nes #start-footer .dot { color: #444444; }

/* ── Insert Coin – Red ────────────────────────────────────── */
body.nes #coin-btn {
  background: #B80000;
  color: #FFFFFF;
  box-shadow: -3px 0 0 #700000, 3px 0 0 #700000, 0 -3px 0 #700000, 0 3px 0 #700000;
}
body.nes #coin-btn:active {
  box-shadow: -1px 0 0 #700000, 1px 0 0 #700000, 0 -1px 0 #700000, 0 1px 0 #700000;
}
body.nes .coin-sub    { color: #E00000; }
body.nes .follow-link { color: #888888; opacity: 1; }

/* ── Modal overlay & box – base ───────────────────────────── */
body.nes #modal-overlay { background: rgba(0, 0, 0, 0.92); }
body.nes #modal-box {
  background: #0A0A0A;
  border-color: #F8D800;
  box-shadow: 6px 6px 0 #C01880;
  color: #FFFFFF;
}
body.nes .modal-head {
  color: #F8D800;
  border-bottom-color: #F87800;
}
body.nes #modal-close {
  background: #C01880;
  color: #FFFFFF;
  box-shadow: -3px 0 0 #701040, 3px 0 0 #701040, 0 -3px 0 #701040, 0 3px 0 #701040;
}
body.nes #modal-close:active {
  box-shadow: -1px 0 0 #701040, 1px 0 0 #701040, 0 -1px 0 #701040, 0 1px 0 #701040;
}

/* ── Leaderboard modal – Cyan ─────────────────────────────── */
body.nes #modal-box[data-modal="leaderboard"] { border-color: #00C8C8; box-shadow: 6px 6px 0 #0038D8; }
body.nes #modal-box[data-modal="leaderboard"] .modal-head { color: #00C8C8; border-bottom-color: #0038D8; }
body.nes #modal-box[data-modal="leaderboard"] #modal-close { background: #0038D8; box-shadow: -3px 0 0 #001890, 3px 0 0 #001890, 0 -3px 0 #001890, 0 3px 0 #001890; }
body.nes #modal-box[data-modal="leaderboard"] .go-lb-head { color: #00C8C8; border-bottom-color: #0038D8; }

/* ── Donators modal – Pink ────────────────────────────────── */
body.nes #modal-box[data-modal="donators"] { border-color: #E820A0; box-shadow: 6px 6px 0 #701040; }
body.nes #modal-box[data-modal="donators"] .modal-head { color: #E820A0; border-bottom-color: #C01880; }
body.nes #modal-box[data-modal="donators"] #modal-close { background: #E820A0; box-shadow: -3px 0 0 #701040, 3px 0 0 #701040, 0 -3px 0 #701040, 0 3px 0 #701040; }

/* ── How to Play modal – Orange ───────────────────────────── */
body.nes #modal-box[data-modal="howto"] { border-color: #00C8C8; box-shadow: 6px 6px 0 #006464; }
body.nes #modal-box[data-modal="howto"] .modal-head { color: #00C8C8; border-bottom-color: #006464; }
body.nes #modal-box[data-modal="howto"] #modal-close { background: #00C8C8; color: #000000; box-shadow: -3px 0 0 #006464, 3px 0 0 #006464, 0 -3px 0 #006464, 0 3px 0 #006464; }
body.nes #modal-box[data-modal="howto"] .ctrl-key { background: #00C8C8; color: #000000; }

/* ── Options modal – Yellow variants ──────────────────────── */
body.nes #modal-box[data-modal="options"] { border-color: #F8D800; box-shadow: 6px 6px 0 #786000; }
body.nes #modal-box[data-modal="options"] .modal-head { color: #F8D800; border-bottom-color: #A07800; }
body.nes #modal-box[data-modal="options"] #modal-close { background: #D4A800; color: #000000; box-shadow: -3px 0 0 #786000, 3px 0 0 #786000, 0 -3px 0 #786000, 0 3px 0 #786000; }
body.nes #modal-box[data-modal="options"] .opt-section-head { color: #FFEC60; border-bottom-color: #A07800; }
body.nes #modal-box[data-modal="options"] .ctrl-key { background: #A07800; color: #000000; }
body.nes #modal-box[data-modal="options"] .chk { border-color: #D4A800; background: #0A0A0A; }
body.nes #modal-box[data-modal="options"] .chk::after { background: #F8D800; }
body.nes #modal-box[data-modal="options"] .tune-btn { border-color: #786000; }
body.nes #modal-box[data-modal="options"] .tune-btn.on { background: #F8D800; color: #000000; border-color: #F8D800; }

/* ── Legal modal – Purple ─────────────────────────────────── */
body.nes #modal-box[data-modal="legal"] { border-color: #9818D8; box-shadow: 6px 6px 0 #4A0878; }
body.nes #modal-box[data-modal="legal"] .modal-head { color: #9818D8; border-bottom-color: #4A0878; }
body.nes #modal-box[data-modal="legal"] #modal-close { background: #9818D8; box-shadow: -3px 0 0 #4A0878, 3px 0 0 #4A0878, 0 -3px 0 #4A0878, 0 3px 0 #4A0878; }

/* ── Game Over modal – Red/Yellow ─────────────────────────── */
body.nes #modal-box[data-modal="gameover"] { border-color: #00C8C8; box-shadow: 6px 6px 0 #0038D8; }
body.nes #modal-box[data-modal="gameover"] .modal-head { color: #00C8C8; border-bottom-color: #0038D8; }
body.nes #modal-box[data-modal="gameover"] #modal-close { background: #0038D8; box-shadow: -3px 0 0 #001890, 3px 0 0 #001890, 0 -3px 0 #001890, 0 3px 0 #001890; }

/* ── Options modal ────────────────────────────────────────── */
body.nes .opt-section-head { color: #00C8C8; border-bottom-color: #9818D8; }
body.nes .ctrl-key         { background: #9818D8; color: #FFFFFF; }
body.nes .chk              { border-color: #9818D8; background: #0A0A0A; }
body.nes .chk::after       { background: #E820A0; }
body.nes .tune-btn         { background: #0A0A0A; color: #FFFFFF; border-color: #444444; opacity: 0.6; }
body.nes .tune-btn.on      { background: #F87800; color: #000000; border-color: #F87800; opacity: 1; }

/* ── Game-over modal ──────────────────────────────────────── */
body.nes .go-score        { color: #F8D800; }
body.nes .go-lb-head      { color: #00C8C8; border-bottom-color: #0038D8; }
body.nes .go-rank         { color: #F87800; }
body.nes .go-pts          { color: #00C8C8; }
body.nes .go-name-cell a  { color: #FFFFFF; }
body.nes #go-name {
  background: #0A0A0A;
  border-color: #9818D8;
  color: #FFFFFF;
}
body.nes #go-submit-btn {
  background: #C01880;
  color: #FFFFFF;
  box-shadow: -3px 0 0 #701040, 3px 0 0 #701040, 0 -3px 0 #701040, 0 3px 0 #701040;
}
body.nes #go-submit-btn:active {
  box-shadow: -1px 0 0 #701040, 1px 0 0 #701040, 0 -1px 0 #701040, 0 1px 0 #701040;
}

/* ── Canvas border ────────────────────────────────────────── */
body.nes #canvas {
  border-color: #FFFFFF;
  box-shadow: 6px 0 0 #FFFFFF, 0 6px 0 #FFFFFF, 6px 6px 0 #FFFFFF;
}

/* ── HUD – white borders, colored labels ──────────────────── */
body.nes #hud { color: #FFFFFF; gap: 10px; }
body.nes #hud span {
  background: #000000;
  border: 2px solid #FFFFFF;
  padding: 5px 8px 6px;
  box-shadow: 2px 2px 0 #444;
  min-width: 52px;
  text-align: center;
}
body.nes #hud b { font-size: 15px; }

/* Score – Red */
body.nes #hud span:nth-child(1) { color: #F83800; }
body.nes #hud span:nth-child(1) b { color: #FF8060; }
/* Level – Yellow */
body.nes #hud span:nth-child(2) { color: #F8C800; }
body.nes #hud span:nth-child(2) b { color: #FFEE80; }
/* Lines – Green */
body.nes #hud span:nth-child(3) { color: #00B800; }
body.nes #hud span:nth-child(3) b { color: #40E840; }
/* Next – Cyan */
body.nes #hud span:nth-child(4) { color: #00C8C8; }
body.nes #hud span:nth-child(4) b { color: #80FFFF; }

/* ── In-game buttons ──────────────────────────────────────── */
body.nes #mobile-pause-btn {
  background: #B80000; color: #FFFFFF;
  box-shadow: -3px 0 0 #700000, 3px 0 0 #700000, 0 -3px 0 #700000, 0 3px 0 #700000;
}
body.nes #mobile-pause-btn:active {
  box-shadow: -1px 0 0 #700000, 1px 0 0 #700000, 0 -1px 0 #700000, 0 1px 0 #700000;
}
body.nes #mobile-pause-btn.resumed {
  background: #008800; color: #FFFFFF;
  box-shadow: -3px 0 0 #005500, 3px 0 0 #005500, 0 -3px 0 #005500, 0 3px 0 #005500;
}
body.nes #pause-home-btn {
  background: #B80000; color: #FFFFFF;
  box-shadow: -3px 0 0 #700000, 3px 0 0 #700000, 0 -3px 0 #700000, 0 3px 0 #700000;
}
body.nes #pause-home-btn:active {
  box-shadow: -1px 0 0 #700000, 1px 0 0 #700000, 0 -1px 0 #700000, 0 1px 0 #700000;
}
body.nes #pause-opts-btn {
  background: #F8D800; color: #000000;
  box-shadow: -3px 0 0 #807000, 3px 0 0 #807000, 0 -3px 0 #807000, 0 3px 0 #807000;
}
body.nes #pause-opts-btn:active {
  box-shadow: -1px 0 0 #807000, 1px 0 0 #807000, 0 -1px 0 #807000, 0 1px 0 #807000;
}
/* Music – Gray */
body.nes #mute-music-btn {
  background: #555555; color: #FFFFFF;
  box-shadow: -2px 0 0 #2A2A2A, 2px 0 0 #2A2A2A, 0 -2px 0 #2A2A2A, 0 2px 0 #2A2A2A;
}
body.nes #mute-music-btn:active {
  box-shadow: -1px 0 0 #2A2A2A, 1px 0 0 #2A2A2A, 0 -1px 0 #2A2A2A, 0 1px 0 #2A2A2A;
}
/* SFX – Gray */
body.nes #mute-sfx-btn {
  background: #555555; color: #FFFFFF;
  box-shadow: -2px 0 0 #2A2A2A, 2px 0 0 #2A2A2A, 0 -2px 0 #2A2A2A, 0 2px 0 #2A2A2A;
}
body.nes #mute-sfx-btn:active {
  box-shadow: -1px 0 0 #2A2A2A, 1px 0 0 #2A2A2A, 0 -1px 0 #2A2A2A, 0 1px 0 #2A2A2A;
}

/* ── Pause confirm ────────────────────────────────────────── */
body.nes #pause-sure-text { color: #FFFFFF; }
body.nes #pause-yes-btn {
  background: #CC0000;
  color: #FFFFFF;
  box-shadow: -3px 0 0 #880000, 3px 0 0 #880000, 0 -3px 0 #880000, 0 3px 0 #880000;
}
body.nes #pause-yes-btn:active {
  box-shadow: -1px 0 0 #880000, 1px 0 0 #880000, 0 -1px 0 #880000, 0 1px 0 #880000;
}
body.nes #pause-no-btn {
  background: #008800;
  color: #FFFFFF;
  box-shadow: -3px 0 0 #005500, 3px 0 0 #005500, 0 -3px 0 #005500, 0 3px 0 #005500;
}
body.nes #pause-no-btn:active {
  box-shadow: -1px 0 0 #005500, 1px 0 0 #005500, 0 -1px 0 #005500, 0 1px 0 #005500;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--c0);
  font-family: monospace;
  overflow: hidden;
  user-select: none;
}

/* ── Version selector ────────────────────────────────────── */
#version-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#version-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--c2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.version-btns { display: flex; gap: 6px; }
.ver-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  background: var(--c0);
  color: var(--c3);
  border: 2px solid var(--c3);
  cursor: pointer;
  opacity: 0.5;
  touch-action: manipulation;
}
.ver-btn.on { opacity: 1; background: var(--c3); color: var(--c0); }

/* ── Color teaser modal ───────────────────────────────────── */
.color-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 8px 0;
}
.color-teaser-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c2);
  border: 2px solid var(--c2);
  padding: 4px 10px;
}
.color-teaser-body {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c3);
}
.color-teaser-follow {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c3);
  text-decoration: none;
  opacity: 0.8;
}
.color-teaser-follow:hover { opacity: 1; }

/* ── Start screen ─────────────────────────────────────────── */
#start-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  padding: 44px 0;
  background: var(--c0);
  z-index: 10;
}

/* pixel checkbox */
.chk {
  width: 20px; height: 20px;
  border: 2px solid var(--c3);
  background: var(--c1);
  position: relative;
  touch-action: manipulation;
}
.chk::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--c3);
  display: none;
}
.chk.on::after { display: block; }

#start-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(17px, 4vw, 20px);
  color: var(--c3);
  letter-spacing: 0.15em;
  cursor: pointer;
  animation: blink 0.5s step-start infinite;
  margin-top: 18px;
  margin-bottom: 18px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── ASCII title ──────────────────────────────────────────── */
#title-block {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.title-rule {
  color: var(--c2);
  font-size: 11px;
  letter-spacing: 0.28em;
}
.tl-1,.tl-2,.tl-3,.tl-4,.tl-5,.tl-6,.tl-7 { color: inherit; }

#game-title {
  font-family: 'Press Start 2P', monospace;
  font-weight: normal;
  color: var(--c3);
  font-size: clamp(26px, 9vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-top: 18px;
  text-shadow: 3px 3px 0 var(--c2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.title-se {
  font-size: 0.27em;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-shadow: none;
  margin-right: 0.4em;
}

/* ── Marquee ──────────────────────────────────────────────── */
.marquee-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c3);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-wrap span {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--c0);
  letter-spacing: 0.1em;
  will-change: transform;
}

/* ── Start footer links ───────────────────────────────────── */
.lb-link {
  display: block;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c3);
  text-decoration: none;
  opacity: 0.85;
  margin-bottom: 0;
  transition: opacity 120ms;
}
.lb-link:hover { opacity: 1; }
#lb-btn { margin-top: 8px; }
#donators-btn { margin-bottom: 4px; }
#donators-btn .lb-arrow { animation-delay: 0.5s; }
.lb-arrow {
  display: inline-block;
  animation: lb-pulse 1s ease-in-out infinite;
  margin: 0 6px;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

#start-footer {
  display: flex; gap: 14px; align-items: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#start-footer a {
  color: var(--c3);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 120ms;
}
#start-footer a:hover { opacity: 1; }
#start-footer .dot { color: var(--c2); }

/* ── How to Play modal ────────────────────────────────────── */
#modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,56,15,0.75);
  z-index: 50;
  align-items: center; justify-content: center;
}
#modal-overlay.open { display: flex; }
#modal-box {
  background: var(--c0);
  border: 3px solid var(--c3);
  box-shadow: 6px 6px 0 var(--c2);
  padding: 24px 28px;
  width: min(340px, 90vw);
  font-family: monospace;
  color: var(--c3);
}
.modal-head {
  font-size: 15px; font-weight: bold;
  letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 2px solid var(--c3);
  padding-bottom: 10px; margin-bottom: 16px;
  text-align: center;
}
.ctrl-row {
  display: flex; align-items: baseline;
  gap: 12px; margin-bottom: 10px; font-size: 12px;
}
.ctrl-key {
  background: var(--c3); color: var(--c0);
  padding: 2px 7px; font-size: 10px;
  letter-spacing: 0.05em; white-space: nowrap;
  flex-shrink: 0;
}
#modal-close {
  margin-top: 20px;
  background: var(--c3);
  color: var(--c0);
  border: none;
  width: 100%;
  padding: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#modal-close:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}

/* ── Options rows ─────────────────────────────────────────── */
#modal-content {
  max-height: 55vh;
  overflow-y: auto;
  scrollbar-width: none;
}
#modal-content::-webkit-scrollbar {
  display: none;
}
.opt-section-head {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c2); border-bottom: 1px solid var(--c2);
  padding-bottom: 4px; margin: 14px 0 10px;
}
.opt-section-head:first-child { margin-top: 0; }
.opt-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.opt-row:last-child { margin-bottom: 0; }
.opt-row .chk { cursor: pointer; flex-shrink: 0; }
.opt-tune-btns { display: flex; gap: 6px; }
.tune-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.05em;
  padding: 5px 7px;
  background: var(--c0);
  color: var(--c3);
  border: 2px solid var(--c3);
  cursor: pointer;
  opacity: 0.5;
  touch-action: manipulation;
}
.tune-btn.on { opacity: 1; background: var(--c3); color: var(--c0); }

/* ── Legal modal content ──────────────────────────────────── */
.legal-content { font-size: 11px; line-height: 1.7; }
.legal-content a { color: inherit; font-weight: bold; }
.legal-p { margin-bottom: 14px; }
.legal-p:last-child { margin-bottom: 0; }

/* ── Insert Coin button ───────────────────────────────────── */
#coin-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--c0);
  background: var(--c3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  margin-top: 14px;
  image-rendering: pixelated;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#coin-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}
#coin-btn:hover { opacity: 0.9; }
.coin-arrow {
  position: relative;
  top: -2px;
}
.follow-link {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c3);
  margin-top: 24px;
  opacity: 0.7;
  text-align: center;
}
.coin-sub {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 4px;
  text-decoration: none;
  color: var(--c3);
  animation: coinSubFade 2.5s ease-in-out infinite;
}
@keyframes coinSubFade {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
.coin-heart {
  animation: heartBlink 1s step-start 0.25s infinite;
}
@keyframes heartBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Pause menu ───────────────────────────────────────────── */
#pause-menu {
  display: none;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  flex-direction: column; gap: 32px;
  align-items: center;
}
#pause-home-btn, #pause-opts-btn {
  background: var(--c3);
  color: var(--c0);
  border: none;
  padding: 10px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#pause-home-btn:active, #pause-opts-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}

/* ── Pause confirm ────────────────────────────────────────── */
#pause-confirm {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#pause-confirm.open { display: flex; }
#pause-sure-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--c3);
  letter-spacing: 0.1em;
}
.pause-confirm-btns { display: flex; gap: 12px; }
#pause-yes-btn, #pause-no-btn {
  background: var(--c3);
  color: var(--c0);
  border: none;
  padding: 10px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#pause-yes-btn:active, #pause-no-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}

/* ── Game button row (pause + mute buttons) ──────────────── */
#game-btn-row {
  display: none; /* shown via JS on game start */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

/* ── Mobile pause button ──────────────────────────────────── */
#mobile-pause-btn {
  background: var(--c3);
  color: var(--c0);
  border: none;
  padding: 10px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#mobile-pause-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}

/* ── Mute buttons ─────────────────────────────────────────── */
#mute-music-btn, #mute-sfx-btn {
  background: var(--c3);
  color: var(--c0);
  border: none;
  padding: 7px 9px;
  min-width: 72px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  opacity: 0.75;
  box-shadow:
    -2px 0 0 var(--c2),
    2px 0 0 var(--c2),
    0 -2px 0 var(--c2),
    0 2px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms, opacity 80ms;
}
#mute-music-btn:active, #mute-sfx-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}
#mute-music-btn.muted, #mute-sfx-btn.muted {
  opacity: 0.4;
}

/* ── Game ─────────────────────────────────────────────────── */
#game-wrapper {
  display: none; position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: var(--c0);
  touch-action: none;
}
#game-wrapper.active { display: flex; }

#board-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 40px 0 36px;
}

#hud {
  display: flex; gap: 32px;
  color: var(--c3);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#hud span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#hud b { font-size: 18px; }
#next-canvas { image-rendering: pixelated; display: block; }

#canvas {
  display: block;
  image-rendering: pixelated;
  border: 4px solid var(--c3);
  box-shadow: 6px 0 0 var(--c2), 0 6px 0 var(--c2), 6px 6px 0 var(--c2);
}

/* ── Game Over modal ──────────────────────────────────────── */
.go-score {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.8;
}
.go-score b {
  display: block;
  font-size: 22px;
  margin-top: 6px;
}
.go-submit-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
#go-name {
  flex: 1;
  min-width: 0;
  background: var(--c1);
  border: 2px solid var(--c3);
  color: var(--c3);
  font-family: monospace;
  font-size: 16px;
  padding: 8px 10px;
  outline: none;
}
#go-name::placeholder { opacity: 0.5; }
#go-submit-btn {
  background: var(--c3);
  color: var(--c0);
  border: none;
  padding: 8px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    -3px 0 0 var(--c2),
    3px 0 0 var(--c2),
    0 -3px 0 var(--c2),
    0 3px 0 var(--c2);
  transition: transform 80ms, box-shadow 80ms;
}
#go-submit-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    -1px 0 0 var(--c2),
    1px 0 0 var(--c2),
    0 -1px 0 var(--c2),
    0 1px 0 var(--c2);
}
#go-submit-btn:disabled { opacity: 0.65; cursor: default; }
.go-lb-head {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c2);
  border-bottom: 1px solid var(--c2);
  padding-bottom: 4px;
  margin: 14px 0 10px;
}
.go-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 7px;
  font-size: 12px;
}
.go-rank {
  width: 20px;
  color: var(--c2);
  font-size: 10px;
  flex-shrink: 0;
}
.go-name-cell {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.go-name-cell a {
  color: var(--c3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.go-pts {
  color: var(--c2);
  font-size: 11px;
  flex-shrink: 0;
}
.go-loading {
  font-size: 11px;
  opacity: 0.6;
}