/* ════════════════════════════════════════════════════════════
   PIXEL CITY BLOXX — Art Direction Layer
   Palette tokens
     Gold light  : #ffe97a / #ffd040
     Gold mid    : #f0b120
     Gold dark   : #c07808 / #8c5200
     Navy 1      : #04060e
     Navy 2      : #090d1e
     Navy 3      : #111827
     Panel glass : rgba(8,10,28,0.92)
════════════════════════════════════════════════════════════ */

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  font-family: 'Courier New', Courier, monospace;
}

body {
  /* Deep-space radial + linear combo — centre glows slightly
     warmer than the absolute black edges */
  background:
    radial-gradient(
      ellipse 90% 60% at 50% 15%,
      #0d1232 0%,
      #060910 55%,
      #020408 100%
    );
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  position: relative;
}

/* Scanline / vignette overlay — gives the CRT arcade feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    /* vignette */
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      transparent 50%,
      rgba(0,0,0,0.55) 100%
    ),
    /* subtle top-down light bleed */
    linear-gradient(
      to bottom,
      rgba(80,100,200,0.04) 0%,
      rgba(0,0,0,0.06) 100%
    );
  mix-blend-mode: multiply;
  z-index: 1000;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  filter: contrast(1.07) saturate(1.14);
}

/* ══════════════════════════════════════
   SCREEN SYSTEM
══════════════════════════════════════ */

.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
}

.screen.active {
  display: flex;
}

/* ══════════════════════════════════════
   SCREEN CARD — multi-layer glass
══════════════════════════════════════ */

.screen-card {
  position: relative;
  /* Three-layer deep glass: warm tint at top, cool at bottom */
  background:
    linear-gradient(
      170deg,
      rgba(18, 22, 50, 0.97) 0%,
      rgba(7,  9, 24, 0.98) 45%,
      rgba(12, 14, 32, 0.97) 100%
    );
  border-radius: 12px;
  padding: 38px 46px 34px;
  min-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Border: gold gradient via box-shadow trick */
  box-shadow:
    0 0 0 1.5px rgba(255,215,60,0.50),      /* gold rim           */
    0 0 0 3px   rgba(0,0,0,0.80),           /* outer black ring   */
    0 0 50px    rgba(255,190,40,0.08),       /* outer glow         */
    0 20px 60px rgba(0,0,0,0.80),           /* ground shadow      */
    inset 0 1px 0 rgba(255,240,140,0.10);   /* top-edge highlight */
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Top-edge gold highlight bar */
.screen-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,220,80,0.55) 30%,
    rgba(255,240,120,0.80) 50%,
    rgba(255,220,80,0.55) 70%,
    transparent 100%
  );
  border-radius: 12px 12px 0 0;
}

/* Inner left-side specular sliver */
.screen-card::after {
  content: "";
  position: absolute;
  top: 2px; left: 0; bottom: 2px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.04) 70%,
    transparent
  );
}

.screen-title {
  /* Gold gradient text */
  background: linear-gradient(
    to bottom,
    #ffe984 0%,
    #ffd040 40%,
    #c98a10 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(255,200,40,0.45));
  margin-bottom: 6px;
}

/* ══════════════════════════════════════
   MAIN MENU
══════════════════════════════════════ */

#menu {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 40%,
      rgba(14,18,48,0.60) 0%,
      rgba(2,3,10,0.72) 100%
    );
  backdrop-filter: blur(4px);
}

#menu-card {
  animation: menuSlideIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#menu-logo {
  text-align: center;
  margin-bottom: 6px;
}

#menu-logo-pixel {
  /* Pale gold gradient — readable but not shouty */
  background: linear-gradient(
    to right,
    rgba(255,213,74,0.45) 0%,
    rgba(255,228,110,0.70) 50%,
    rgba(255,213,74,0.45) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  letter-spacing: 7px;
  font-weight: bold;
}

#menu-logo-bloxx {
  /* Metallic gold with hot highlight at top, deep amber at base */
  background: linear-gradient(
    to bottom,
    #ffe98a  0%,
    #ffd84a 30%,
    #f0b015 60%,
    #9c6200 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 10px;
  filter:
    drop-shadow(0 0 28px rgba(255,190,30,0.45))
    drop-shadow(4px 4px 0 rgba(0,0,0,0.85));
  line-height: 1;
}

#menu-best-line {
  background: linear-gradient(
    to right,
    rgba(255,213,74,0.45),
    rgba(255,228,110,0.62),
    rgba(255,213,74,0.45)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-bottom: 4px;
}

#menu-best-line span {
  /* Override gradient clip for the score number — bright white */
  background: linear-gradient(to bottom, #ffffff 0%, #fff7c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,230,100,0.55));
}

/* ══════════════════════════════════════
   BUTTONS — Art Direction Upgrade
══════════════════════════════════════ */

.big-btn {
  width: 100%;
  padding: 13px 0;
  border-radius: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
  transition: transform 0.07s, box-shadow 0.07s, filter 0.07s;
  position: relative;
  overflow: hidden;

  /* Dark steel default */
  background: linear-gradient(
    to bottom,
    rgba(38, 48, 88, 0.96) 0%,
    rgba(20, 26, 56, 0.98) 55%,
    rgba(12, 16, 40, 0.99) 100%
  );
  color: rgba(255, 215, 70, 0.88);
  border: none;
  box-shadow:
    0 0 0 1.5px rgba(255,210,60,0.30),
    0 0 0 3px   rgba(0,0,0,0.70),
    4px 4px 0   rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Specular streak across top of every button */
.big-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    transparent
  );
  pointer-events: none;
}

.big-btn.primary {
  /* Rich 4-stop gold: white-hot top → warm gold → deep amber */
  background: linear-gradient(
    to bottom,
    #ffe98c 0%,
    #ffd240 28%,
    #f0a810 68%,
    #c07808 100%
  );
  color: #1a0800;
  box-shadow:
    0 0 0 1.5px rgba(255,240,100,0.45),
    0 0 0 3px   rgba(0,0,0,0.70),
    4px 4px 0   rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(100,40,0,0.30);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.20),
    0 -1px 0 rgba(0,0,0,0.25);
}

.big-btn.danger {
  /* Deep blood-red gradient — dark at centre, lighter at top */
  background: linear-gradient(
    to bottom,
    rgba(210, 55, 55, 0.95) 0%,
    rgba(160, 24, 24, 0.97) 55%,
    rgba(90,  10, 10, 0.99) 100%
  );
  color: #ffcccc;
  box-shadow:
    0 0 0 1.5px rgba(220,60,60,0.38),
    0 0 0 3px   rgba(0,0,0,0.70),
    4px 4px 0   rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,180,180,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.40);
}

.big-btn.back-btn {
  margin-top: 8px;
}

.big-btn:active {
  transform: translate(3px, 3px);
  box-shadow:
    0 0 0 1.5px rgba(255,210,60,0.28),
    0 0 0 3px rgba(0,0,0,0.70),
    1px 1px 0 rgba(0,0,0,0.65);
  filter: brightness(0.93);
}

/* ══════════════════════════════════════
   TOGGLE BUTTON
══════════════════════════════════════ */

.toggle-btn {
  padding: 8px 24px;
  border-radius: 5px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  border: none;
  transition: 0.12s;
  position: relative;
  overflow: hidden;

  /* ON — gold metallic */
  background: linear-gradient(
    to bottom,
    #ffe984 0%,
    #ffd040 35%,
    #e09010 70%,
    #b06808 100%
  );
  color: #1a0800;
  box-shadow:
    0 0 0 1.5px rgba(255,230,80,0.40),
    0 0 0 3px rgba(0,0,0,0.60),
    3px 3px 0 rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.30);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}

.toggle-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.14),
    transparent
  );
  pointer-events: none;
}

.toggle-btn.off {
  background: linear-gradient(
    to bottom,
    rgba(58, 64, 96, 0.96) 0%,
    rgba(36, 40, 68, 0.98) 55%,
    rgba(22, 26, 50, 0.99) 100%
  );
  color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 0 1.5px rgba(100,110,160,0.20),
    0 0 0 3px rgba(0,0,0,0.55),
    3px 3px 0 rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
  text-shadow: none;
}

.toggle-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    0 0 0 1.5px rgba(255,210,60,0.28),
    0 0 0 3px rgba(0,0,0,0.60),
    1px 1px 0 rgba(0,0,0,0.50);
}

/* ══════════════════════════════════════
   SETTINGS PANEL
══════════════════════════════════════ */

#settings-overlay {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 40%,
      rgba(14,18,48,0.72) 0%,
      rgba(2,3,10,0.82) 100%
    );
  backdrop-filter: blur(8px);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 24px;
  padding: 6px 0;
  /* Gold gradient hairline divider */
  border-bottom: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(255,210,60,0.12);
}

.setting-label {
  background: linear-gradient(
    to right,
    rgba(255,213,74,0.70),
    rgba(255,228,110,0.88)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* ══════════════════════════════════════
   HUD
══════════════════════════════════════ */

#ui {
  pointer-events: none;
  z-index: 10;
}

.panel {
  position: absolute;
  padding: 12px 16px;
  /* Three-layer dark glass: warm left edge, cool centre, deep bottom */
  background:
    linear-gradient(
      135deg,
      rgba(18, 24, 52, 0.88) 0%,
      rgba(7,  9, 24, 0.92) 50%,
      rgba(10, 12, 30, 0.90) 100%
    );
  border-radius: 6px;
  box-shadow:
    0 0 0 1.5px rgba(255,210,60,0.38),
    0 0 0 3px   rgba(0,0,0,0.65),
    0 8px 22px  rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  color: #ffd54a;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 1.5px;
  font-weight: bold;
  opacity: 0.97;
  transform: translateZ(0);
  overflow: hidden;
}

/* Top-edge highlight on HUD panels */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,220,80,0.45),
    transparent
  );
}

.panel .label-text {
  background: linear-gradient(
    to right,
    rgba(255,210,60,0.65),
    rgba(255,228,100,0.80)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.panel span {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fff7c0 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,230,100,0.55));
}

.left {
  left: 12px;
  top: calc(env(safe-area-inset-top) + 12px);
}

.right {
  right: 12px;
  top: calc(env(safe-area-inset-top) + 12px);
  text-align: right;
}

/* ══════════════════════════════════════
   PAUSE BUTTON (in-game)
══════════════════════════════════════ */

#pauseBtn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 0;
  background: linear-gradient(
    to bottom,
    rgba(255,210,60,0.16) 0%,
    rgba(255,180,30,0.08) 100%
  );
  border: none;
  box-shadow:
    0 0 0 1px rgba(255,210,60,0.38),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 4px;
  background-clip: padding-box;
  color: #ffd54a;
  font-size: 16px;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.08s, transform 0.07s;
  letter-spacing: 1px;
  text-align: center;
}

#pauseBtn:active {
  background: linear-gradient(
    to bottom,
    rgba(255,210,60,0.26) 0%,
    rgba(255,180,30,0.16) 100%
  );
  transform: scale(0.96);
}

/* ══════════════════════════════════════
   PAUSE OVERLAY
══════════════════════════════════════ */

#pause-overlay {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 40%,
      rgba(12,16,42,0.82) 0%,
      rgba(2,3,10,0.88) 100%
    );
  backdrop-filter: blur(10px);
}

#pause-overlay .screen-card {
  animation: pauseSlideIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes pauseSlideIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ══════════════════════════════════════
   GAME OVER
══════════════════════════════════════ */

#gameover {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 40%,
      rgba(14,8,28,0.84) 0%,
      rgba(2,2,10,0.88) 100%
    );
  backdrop-filter: blur(8px);
}

#gameover-card {
  animation: goCardIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes goCardIn {
  from {
    opacity: 0;
    transform: translateY(55px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#gameover-title {
  /* Angry gold — brighter than normal, slight red warmth */
  background: linear-gradient(
    to bottom,
    #fff0a0 0%,
    #ffd040 35%,
    #f09010 70%,
    #a05c00 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 4px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 18px rgba(255,180,30,0.50));
}

.go-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 36px;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 2px;
  box-shadow: 0 1px 0 rgba(255,210,60,0.10);
}

.go-row:last-of-type {
  box-shadow: none;
}

.go-label {
  background: linear-gradient(
    to right,
    rgba(255,213,74,0.60),
    rgba(255,228,110,0.78)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
}

.go-value {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fff4c0 60%,
    #ffe080 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 8px rgba(255,220,90,0.40));
}

.go-best-row .go-label {
  background: linear-gradient(
    to right,
    rgba(255,213,74,0.85),
    rgba(255,238,130,1.00)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.go-best-row .go-value {
  background: linear-gradient(
    to bottom,
    #ffe984 0%,
    #ffd040 40%,
    #f0a810 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 28px;
  filter: drop-shadow(0 0 14px rgba(255,190,30,0.60));
}

.go-newbest {
  display: none;
  background: linear-gradient(
    to right,
    #ffec6e,
    #ffffff,
    #ffec6e
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: right;
  width: 100%;
  filter: drop-shadow(0 0 10px rgba(255,230,80,0.80));
  animation: newBestPulse 0.8s ease-in-out infinite alternate;
  margin-top: -4px;
}

.go-newbest.visible { display: block; }

@keyframes newBestPulse {
  from { opacity: 0.70; filter: drop-shadow(0 0 8px rgba(255,220,60,0.60)); }
  to   { opacity: 1.00; filter: drop-shadow(0 0 18px rgba(255,240,80,1.00)); }
}

/* ══════════════════════════════════════
   TRANSITION OVERLAY
══════════════════════════════════════ */

#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Radial fade — deeper at edges, centre reveals first */
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    #07090f 0%,
    #020408 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

#transition-overlay.fading {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════
   FLASH
══════════════════════════════════════ */

#flash {
  position: fixed;
  inset: 0;
  /* Warm gold flash instead of pure white — fits the palette */
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    #fffbe8 0%,
    #fff4c0 60%,
    #ffe080 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 150;
  transition: opacity 0.18s ease-out;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 480px) {
  .screen-card {
    padding: 28px 26px 26px;
    min-width: 250px;
    gap: 12px;
  }

  #menu-logo-bloxx { font-size: 42px; }

  .big-btn {
    font-size: 14px;
    padding: 11px 0;
    letter-spacing: 2px;
  }

  .panel {
    font-size: 14px;
    padding: 9px 12px;
    line-height: 1.85;
    letter-spacing: 1px;
  }

  .go-value { font-size: 22px; }
  .go-best-row .go-value { font-size: 24px; }

  #gameover-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
}