/* ============================================
   VERSENT SNAKE - RETRO HANDHELD CONSOLE
   ============================================ */

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

body {
  background: #2a2a2a;
  color: #d0d0c0;
  font-family: 'Press Start 2P', monospace;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================
   CONSOLE BODY
   ============================================ */

#console {
  width: min(95vw, 420px);
  background: linear-gradient(135deg, #565656 0%, #4a4a4a 25%, #424242 50%, #383838 80%, #323232 100%);
  border-radius: clamp(16px, 4vw, 28px);
  border-top: 3px solid #666;
  border-left: 3px solid #5a5a5a;
  border-right: 3px solid #2a2a2a;
  border-bottom: 3px solid #222;
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);
  padding: clamp(12px, 3vw, 20px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.5vw, 16px);
  min-height: 95dvh;
}



/* ============================================
   CONSOLE TOP - Branding + LED + Screws
   ============================================ */

#console-top {
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 8px;
}

/* Screws */
.screw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3a3a3a;
  box-shadow:
    inset 1px 1px 2px rgba(0,0,0,0.6),
    inset -1px -1px 1px rgba(255,255,255,0.1),
    0 1px 1px rgba(0,0,0,0.3);
  position: relative;
  flex-shrink: 0;
  display: none;
}

.screw::before,
.screw::after {
  content: '';
  position: absolute;
  background: #2a2a2a;
  border-radius: 1px;
}

.screw::before {
  width: 8px;
  height: 1.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.screw::after {
  width: 1.5px;
  height: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Branding Plate */
#branding-plate {
  background: #333;
  border-radius: 4px;
  padding: 6px 16px;
  text-align: center;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid #2a2a2a;
}

#branding-plate .brand-name {
  font-size: 8px;
  color: #d0d0c0;
  letter-spacing: 0.1em;
  display: block;
}

#branding-plate .brand-sub {
  font-size: 6px;
  color: #888;
  letter-spacing: 0.08em;
  display: block;
  margin-top: 2px;
}

/* Power LED */
#power-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a2a1a;
  border: 1px solid #111;
  flex-shrink: 0;
  transition: all 0.3s;
}

#power-led.on {
  background: radial-gradient(circle at 35% 35%, #aaffaa 0%, #55ff55 30%, #33ff33 60%, #22cc22 100%);
  border-color: #44ff44;
  box-shadow:
    0 0 3px #55ff55,
    0 0 8px rgba(51, 255, 51, 0.7),
    0 0 16px rgba(51, 255, 51, 0.3),
    0 0 30px rgba(51, 255, 51, 0.1);
}

/* ============================================
   SCREEN BEZEL + DISPLAY
   ============================================ */

#screen-bezel {
  background: #383838;
  border-radius: 6px;
  padding: clamp(8px, 2vw, 14px);
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,0.6),
    inset -1px -1px 2px rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.05);
  border: 1px solid #2a2a2a;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#screen {
  background: #1a2a1a;
  border-radius: 4px;
  border: 2px solid #142814;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Screen vignette (always visible, adds depth) */
#screen::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.4),
    inset 0 0 60px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 21;
  border-radius: 3px;
}

/* Scanline overlay */
#screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 20;
}

/* Play Area (contains canvas, sits below HUD) */
#play-area {
  flex: 1;
  border: 1px solid #2a7a2a;
  margin: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Canvas */
#game-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ============================================
   SCREEN OVERLAYS (inside screen)
   ============================================ */

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a2a1a;
  z-index: 15;
  padding: clamp(8px, 3vw, 16px);
  color: #33ff33;
}

.overlay.hidden { display: none; }

.overlay h1 {
  font-size: clamp(10px, 3.5vw, 16px);
  color: #33ff33;
  margin-bottom: 4px;
}

#start-overlay.overlay h1 {
  margin-bottom: 40px;
}

.overlay .subtitle {
  font-size: clamp(6px, 2vw, 9px);
  color: #2a7a2a;
  margin-bottom: clamp(8px, 2vw, 16px);
}

.overlay .final-score {
  font-size: clamp(16px, 6vw, 28px);
  color: #33ff33;
  margin-bottom: 2px;
  margin-top:12px;
}

.overlay .final-score-label {
  font-size: clamp(6px, 2vw, 8px);
  color: #2a7a2a;
  margin-bottom: clamp(8px, 2vw, 12px);
}

/* Screen-style pixel border for title */
.screen-border {
  border: 1px dashed #2a7a2a;
  padding: 2px;
  margin-bottom: 4px;
}

/* Divider line */
.screen-divider {
  width: 90%;
  height: 1px;
  background: #2a5a2a;
  margin: clamp(4px, 1.5vw, 8px) 0;
}

/* Info row (1 Player / High Score) */
.screen-info-row {
  display: flex;
  justify-content: space-between;
  /* width: 90%; */
  font-size: clamp(10px, 1.5vw, 7px);
  color: #2a7a2a;
  margin-bottom: clamp(10%, 1.5vw, 8px);
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
}

/* Menu items (Start, Switch Player) */
.menu-item {
  font-size: clamp(12px, 2vw, 9px);
  color: #2a5a2a;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Press Start 2P', monospace;
  touch-action: manipulation;
  padding: 6px 8px;
  margin-top: 2px;
}

.menu-selected {
  color: #33ff33 !important;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#btn-not-you {
  display: none;
}

/* Loading overlay */
.loading-text {
  font-size: clamp(12px, 3vw, 16px);
  color: #33ff33;
}

.loading-dots span {
  opacity: 0;
  animation: dot-appear 1.5s infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.3s; }
.loading-dots span:nth-child(3) { animation-delay: 0.6s; }

/* Cheat detection message */
#cheat-message {
  font-size: clamp(7px, 2vw, 9px);
  color: #33ff33;
  text-align: center;
  padding: 4px 8px;
  margin-top: 4px;
  animation: blink 1.5s step-end infinite;
}

@keyframes dot-appear {
  0%, 20% { opacity: 0; }
  40%, 100% { opacity: 1; }
}

/* Prizes screen */
.prizes-screen {
  text-align: left;
  width: 90%;
}

.prizes-intro {
  font-size: clamp(12px, 1.8vw, 8px);
  color: #33ff33;
  margin-bottom: clamp(6px, 1.5vw, 10px);
}

.prizes-list p {
  font-size: clamp(10px, 1.5vw, 7px);
  color: #2a7a2a;
  line-height: 1.6;
  margin-bottom:6px;
}

.prizes-note {
  font-size: clamp(10px, 1.2vw, 6px);
  color: #1a5a1a;
  margin-top: clamp(6px, 1.5vw, 10px);
}

/* Score HUD (inside screen, during gameplay) */
#score-hud {
  display: flex;
  justify-content: space-between;
  font-size: clamp(10px, 1.5vw, 7px);
  color: #2a7a2a;
  padding: 6px 8px;
  flex-shrink: 0;
  z-index: 15;
  position: relative;
}

#score-hud .score-value {
  color: #33ff33;
}

/* ============================================
   GAME OVER OVERLAY
   ============================================ */



/* Leaderboard */
#leaderboard {
  margin-top: clamp(6px, 2vw, 12px);
  margin-bottom: 12px;
  width: 90%;
}

#leaderboard h3 {
  font-size: clamp(12px, 1.5vw, 7px);
  color: #2a7a2a;
  margin-bottom: 10px;
  text-align: center;
}

.lb-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #1a3a1a;
  font-size: clamp(10px, 1.5vw, 7px);
  color: #2a7a2a;
}

.lb-row .rank { width: 20px; }
.lb-row .name { flex: 1; }
.lb-row .lb-score { color: #33ff33; }

/* Desktop: constrain console size, don't fill viewport */
@media (min-width: 600px) {
  #console {
    min-height: auto;
    max-height: 95vh;
    max-width: 420px;
  }
  #screen{
    min-height: 50dvh;
  }
  #screen-bezel {
    min-height: auto;
  }
}

@media (min-width: 1024px) {
  #console {
    max-height: 96vh;
    max-width: 480px;
  }
  #screen {
    /* adjust screen height for desktop */
  }
}

/* ============================================
   CONTROLS AREA
   ============================================ */

#controls-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  /* padding: 0 clamp(4px, 1vw, 8px); */
}

/* Top row: Start button right-aligned */
#controls-top-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Keyboard hint (hidden on mobile, shown on desktop) */
#keyboard-hint {
  display: none;
}

/* (desktop D-pad/keyboard swap is at the end of CONTROLS AREA section) */

#controls-bottom {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: -20px;
}

/* D-Pad wrapper (positions groove + dpad together) */
#dpad-wrapper {
  position: relative;
  width: clamp(150px, 38vw, 180px);
  height: clamp(150px, 38vw, 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
}

/* Groove channels — two overlapping bars forming a cross recess */
.groove {
  position: absolute;
  background: #2c2c2c;
  border-radius: 8px;
  z-index:1;
  box-shadow:
    inset -1px -1px 3px rgba(0,0,0,0.7),
    inset 2px 2px 6px rgba(255,255,255,0.06);
}

.groove-v {
  width: 32%;
  height: 85%;
  left: 35%;
  top: 8%;
}

.groove-h {
  width: 85%;
  height: 31%;
  top: 36%;
  left: 7%;
}

/* Cutout rim — inverted chamfer edge (same style as start-btn-groove) */
.dpad-rim {
  position: absolute;
  background: linear-gradient(145deg, #2e2e2e 0%, #333 40%, #3a3a3a 100%);
  border-radius: 11px;
  border-top: 2px solid #252525;
  border-left: 2px solid #282828;
  border-right: 2px solid #333;
  border-bottom: 2px solid #363636;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  z-index: 0;
}

.dpad-rim-v {
  width: 35%;
  height: 88%;
  left: 33.5%;
  top: 6.5%;
}

.dpad-rim-h {
  width: 88%;
  height: 34%;
  left: 5.5%;
  top: 34.5%;
}

/* D-Pad (sits on top of groove) */
#dpad {
  width: clamp(120px, 32vw, 148px);
  height: clamp(120px, 32vw, 148px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  position: relative;
  z-index: 2;
}

/* Hide corner cells */
.dpad-corner {
  background: transparent !important;
  pointer-events: none;
}

.dpad-arm {
  background: #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.dpad-arm::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
}

.dpad-up {
  grid-column: 2;
  grid-row: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #484848 0%, #3a3a3a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 2px rgba(0,0,0,0.3);
}
.dpad-up::after { border-width: 0 7px 9px 7px; border-color: transparent transparent #2a2a2a transparent; }

.dpad-down {
  grid-column: 2;
  grid-row: 3;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #3a3a3a 0%, #333 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.04),
    inset 0 -1px 2px rgba(0,0,0,0.4);
}
.dpad-down::after { border-width: 9px 7px 0 7px; border-color: #2a2a2a transparent transparent transparent; }

.dpad-left {
  grid-column: 1;
  grid-row: 2;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #484848 0%, #3a3a3a 100%);
  box-shadow:
    inset 1px 0 1px rgba(255,255,255,0.08),
    inset -1px 0 2px rgba(0,0,0,0.3);
}
.dpad-left::after { border-width: 7px 9px 7px 0; border-color: transparent #2a2a2a transparent transparent; }

.dpad-right {
  grid-column: 3;
  grid-row: 2;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #3a3a3a 0%, #333 100%);
  box-shadow:
    inset 1px 0 1px rgba(255,255,255,0.04),
    inset -1px 0 2px rgba(0,0,0,0.4);
}
.dpad-right::after { border-width: 7px 0 7px 9px; border-color: transparent transparent transparent #2a2a2a; }

.dpad-center {
  grid-column: 2;
  grid-row: 2;
  background: #3c3c3c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpad-center-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #3a3a3a 40%, #2e2e2e 100%);
  box-shadow:
    inset 1px 1px 3px rgba(0,0,0,0.6),
    inset -1px -1px 1px rgba(255,255,255,0.05);
}

.dpad-arm:active {
  background: #353535 !important;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5) !important;
}

/* Start Button groove (cutout in plastic) */
/* Start Button groove (cutout in plastic — inverted chamfer) */
#start-btn-groove {
  background: linear-gradient(145deg, #2e2e2e 0%, #333 40%, #3a3a3a 100%);
  border-radius: 18px;
  padding: 1px 1px;
  border-top: 2px solid #252525;
  border-left: 2px solid #282828;
  border-right: 2px solid #333;
  border-bottom: 2px solid #363636;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.4);
}

/* Start Button (pill, sits inside groove — chamfered plastic edge) */
#start-btn {
  background: linear-gradient(145deg, #484848 0%, #3c3c3c 40%, #343434 100%);
  border: none;
  border-radius: 14px;
  padding: 7px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #888;
  letter-spacing: 0.08em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-top: 2px solid #555;
  border-left: 2px solid #4e4e4e;
  border-right: 2px solid #2a2a2a;
  border-bottom: 2px solid #252525;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08);
}

#start-btn:active {
  background: linear-gradient(145deg, #383838 0%, #323232 40%, #2e2e2e 100%);
  border-top: 2px solid #2a2a2a;
  border-left: 2px solid #2a2a2a;
  border-right: 2px solid #4a4a4a;
  border-bottom: 2px solid #4a4a4a;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.5);
  transform: translateY(1px);
}

/* Speaker Grille */
#speaker-grille {
  display: grid;
  grid-template-columns: repeat(6, 5px);
  grid-template-rows: repeat(4, 5px);
  gap: 3px;
}

.speaker-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2a2a2a;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}

/* Desktop: swap D-pad for keyboard hint */
@media (min-width: 600px) {
  #dpad-wrapper {
    display: none !important;
  }

  #keyboard-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .key-row {
    display: flex;
    gap: 3px;
  }

  .key-etch {
    width: 36px;
    height: 36px;
    border: 1.5px solid #4a4a4a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #666;
    background: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .key-blank {
    width: 36px;
    height: 36px;
  }

  .key-label {
    font-size: 6px;
    color: #4a4a4a;
    margin-top: 6px;
    letter-spacing: 0.05em;
  }
}

/* ============================================
   CONSOLE BOTTOM - Screws
   ============================================ */

#console-bottom {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  display: none;
}

/* ============================================
   ONBOARDING (inside screen)
   ============================================ */

#onboarding-overlay {
  position: absolute;
  inset: 0;
  background: #1a2a1a;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(8px, 2vw, 14px);
  overflow-y: auto;
  color: #33ff33;
}

#onboarding-overlay.hidden { display: none; }

#onboarding-overlay .onboard-logo {
  width: clamp(28px, 8vw, 40px);
  height: auto;
  image-rendering: pixelated;
  margin-bottom: 6px;
}

#onboarding-overlay h1 {
  font-size: clamp(8px, 2.5vw, 12px);
  color: #33ff33;
  margin-bottom: 2px;
}

#onboarding-overlay .subtitle {
  font-size: clamp(8px, 1.5vw, 7px);
  color: #2a7a2a;
  margin-top: 8px;
  margin-bottom: clamp(6px, 2vw, 12px);
}

#onboarding-form {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 1.5vw, 8px);
  margin-top:20px;
}

#onboarding-form label {
  font-size: clamp(10px, 1.5vw, 7px);
  color: #2a7a2a;
  margin-bottom: 1px;
}

#onboarding-form input {
  background: #142814;
  border: 1px solid #2a5a2a;
  border-radius: 2px;
  padding: clamp(4px, 1.5vw, 8px) clamp(4px, 1.5vw, 8px);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 1.8vw, 8px);
  color: #33ff33;
  outline: none;
  width: 100%;
  touch-action: manipulation;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

#onboarding-form input:focus {
  border-color: #33ff33;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 4px rgba(51, 255, 51, 0.2);
}

#onboarding-form input::placeholder {
  color: #1a4a1a;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.onboard-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: clamp(4px, 1.5vw, 8px);
}

.form-error {
  color: #33ff33;
  font-size: clamp(10px, 1.2vw, 6px);
  min-height: 10px;
}