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

body {
  background: #0a0a1a;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  color: #fff;
  user-select: none;
}

#game-canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  cursor: none;
  touch-action: none;
}

/* ── Screens ── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
  background: rgba(5, 5, 20, 0.88);
  backdrop-filter: blur(4px);
}
.screen.active { display: flex; }

.title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #00ffff;
  text-shadow: 0 0 20px #00ffff, 0 0 60px #00ffff80, 0 0 120px #00ffff40;
  animation: pulse-title 2.4s ease-in-out infinite;
}

@keyframes pulse-title {
  0%,100% { text-shadow: 0 0 20px #00ffff, 0 0 60px #00ffff80; }
  50%      { text-shadow: 0 0 40px #00ffff, 0 0 100px #00ffff, 0 0 6px #fff; }
}

.subtitle {
  color: #8888bb;
  letter-spacing: 0.35em;
  font-size: 1rem;
  text-transform: uppercase;
}

.input-group input {
  background: transparent;
  border: 1px solid #00ffff88;
  border-radius: 4px;
  color: #fff;
  font-size: 1.2rem;
  padding: 10px 24px;
  text-align: center;
  outline: none;
  width: 300px;
  box-shadow: 0 0 12px #00ffff30;
  font-family: inherit;
  letter-spacing: 0.1em;
  transition: box-shadow 0.2s;
}
.input-group input:focus {
  box-shadow: 0 0 24px #00ffff80;
  border-color: #00ffff;
}

.btn-neon {
  background: transparent;
  border: 2px solid #00ffff;
  color: #00ffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  padding: 12px 44px;
  text-transform: uppercase;
  transition: all 0.18s;
  box-shadow: 0 0 16px #00ffff40;
}
.btn-neon:hover {
  background: #00ffff1a;
  box-shadow: 0 0 30px #00ffff, inset 0 0 18px #00ffff20;
  transform: scale(1.04);
}

.high-score-display {
  color: #6666aa;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.high-score-display span {
  color: #00ffff;
  font-weight: 700;
}

/* ── Egg vending progression ─────────────────────────────────────────────── */
.egg-machine {
  width: 320px;
  padding: 12px 16px;
  text-align: center;
  background: linear-gradient(145deg, #19122d, #08091b);
  border: 1px solid #c87cff80;
  border-radius: 8px;
  box-shadow: 0 0 18px #a54dff30, inset 0 0 18px #ffffff08;
}
.egg-machine-title {
  color: #e0a8ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.egg-machine-status {
  margin: 8px 0;
  color: #9b93bd;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.egg-machine-status span { color: #ffe06a; font-weight: 700; }
.egg-machine-divider { margin: 0 5px; }
.egg-vend-btn {
  width: 100%;
  padding: 8px 10px;
  background: #7c35b8;
  border: 1px solid #e0a8ff;
  border-radius: 4px;
  box-shadow: 0 0 12px #b761ff70;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: transform 0.15s, background 0.15s;
}
.egg-vend-btn:hover:not(:disabled) { background: #9b4ddd; transform: scale(1.02); }
.egg-vend-btn:disabled {
  background: #282238;
  border-color: #575068;
  box-shadow: none;
  color: #777184;
  cursor: not-allowed;
}
.egg-vend-message {
  min-height: 1em;
  margin-top: 8px;
  color: #b8b1d4;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.egg-vend-message.unlocked { color: #83ffb6; text-shadow: 0 0 8px #42e89080; }
.egg-machine-open-btn {
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid #c87cff;
  border-radius: 5px;
  box-shadow: 0 0 13px #b761ff55;
  color: #e9c7ff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transition: background 0.15s, transform 0.15s;
}
.egg-machine-open-btn:hover {
  background: #b761ff20;
  transform: scale(1.02);
}
.egg-machine-open-btn small {
  display: block;
  margin-top: 5px;
  color: #ffe06a;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}
.egg-machine-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 20, 0.84);
  backdrop-filter: blur(6px);
}
.egg-machine-modal.active { display: flex; }
.egg-machine-modal-box {
  width: min(420px, 90vw);
  padding: 25px 28px 23px;
  background: linear-gradient(145deg, #21133d, #0a0a1d);
  border: 1px solid #d187ff;
  border-radius: 13px;
  box-shadow: 0 0 44px #b761ff55, inset 0 0 24px #ffffff08;
  text-align: center;
}
.egg-machine-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #edccff;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.egg-machine-display {
  width: 188px;
  margin: 14px auto;
}
.egg-machine-cabinet {
  padding: 8px 8px 0;
  background: linear-gradient(90deg, #7d2638, #e25a64 50%, #7d2638);
  border: 3px solid #f4a4a9;
  border-radius: 15px 15px 11px 11px;
  box-shadow: 0 7px 0 #42111e, 0 0 18px #e85b6b55;
}
.egg-machine-marquee {
  margin: 0 9px 7px;
  padding: 4px 3px;
  background: #251126;
  border: 1px solid #ffc6d2;
  border-radius: 4px;
  color: #ffe8a3;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
}
.egg-globe {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 152px;
  padding: 32px 20px 17px;
  overflow: hidden;
  background: radial-gradient(circle at 35% 20%, #ffffff55, transparent 25%), #102646a8;
  border: 4px solid #9cb4cc;
  border-radius: 50% 50% 42% 42%;
  box-shadow: inset 0 0 18px #04101f, 0 0 18px #72c9ff45;
}
.colored-egg {
  width: 23px;
  height: 30px;
  border-radius: 50% 50% 47% 47%;
  box-shadow: inset -5px -5px 7px #00000045, inset 4px 4px 5px #ffffff95, 0 0 5px currentColor;
  animation: egg-bob 1.8s ease-in-out infinite;
}
.colored-egg:nth-child(2n) { animation-delay: -0.5s; }
.colored-egg:nth-child(3n) { animation-delay: -1s; }
.egg-pink { background: #ff69b4; color: #ff94cb; }
.egg-blue { background: #45bfff; color: #88dcff; }
.egg-gold { background: #ffd43b; color: #ffe87d; }
.egg-green { background: #68dc73; color: #9dffa5; }
.egg-purple { background: #b071ff; color: #d2adff; }
.egg-red { background: #ff6969; color: #ff9a9a; }
.egg-machine-base {
  position: relative;
  height: 64px;
  margin: -5px 16px 0;
  padding-top: 11px;
  background: linear-gradient(90deg, #9c3345, #ed5d66 50%, #9c3345);
  border: 3px solid #f49b9e;
  border-radius: 8px 8px 15px 15px;
  box-shadow: 0 6px 0 #4f1724;
}
.egg-coin-slot {
  position: absolute;
  top: 19px;
  left: 16px;
  width: 23px;
  height: 8px;
  background: #24131a;
  border: 2px solid #f2bec0;
  border-radius: 5px;
  box-shadow: inset 0 0 4px #000;
}
.egg-insert-coin {
  position: absolute;
  top: -68px;
  left: 17px;
  z-index: 2;
  width: 20px;
  height: 20px;
  color: #ffd744;
  font-size: 1.7rem;
  line-height: 16px;
  opacity: 0;
  text-shadow: 0 0 8px #ffe878;
}
.coin-inserting .egg-insert-coin { animation: coin-insert 0.72s ease-in forwards; }
.egg-chute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 3px solid #e7eef5;
  border-radius: 50%;
  background: #1a2130;
  box-shadow: inset 0 0 8px #000, 0 0 7px #ffffff55;
}
@keyframes coin-insert {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; }
  82% { opacity: 1; transform: translateY(80px) scale(1); }
  100% { opacity: 0; transform: translateY(88px) scale(0.7); }
}
@keyframes egg-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.controls-hint {
  display: flex;
  gap: 32px;
  color: #6666aa;
  font-size: 0.82rem;
}
.controls-hint kbd {
  background: #ffffff15;
  border: 1px solid #ffffff30;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.78rem;
}

/* ── Settings Panel ── */
.settings-panel {
  background: rgba(0, 0, 30, 0.6);
  border: 1px solid #ffffff18;
  border-radius: 8px;
  width: 320px;
  overflow: hidden;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  cursor: pointer;
  color: #8888bb;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  transition: color 0.15s;
  user-select: none;
}
.settings-header:hover { color: #aaaadd; }

.settings-chevron {
  font-size: 0.65rem;
  transition: transform 0.25s;
}
.settings-chevron.open { transform: rotate(180deg); }

.settings-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.settings-body.open { max-height: 300px; }

.setting-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 16px;
  border-top: 1px solid #ffffff10;
}

.setting-label {
  color: #6666aa;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  min-width: 40px;
}

.skin-select {
  background: #0d0d1a;
  border: 1px solid #ffffff30;
  border-radius: 6px;
  color: #00ffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  padding: 6px 12px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  min-width: 160px;
}
.skin-select:hover,
.skin-select:focus {
  border-color: #00ffff;
  box-shadow: 0 0 10px #00ffff30;
}
.skin-select option {
  background: #0d0d1a;
  color: #ccccff;
}

/* Volume sliders */
.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: #ffffff20;
  border-radius: 2px;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 8px #00ffff80;
  cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 8px #00ffff80;
  border: none;
  cursor: pointer;
}
.vol-value {
  color: #00ffff;
  font-size: 0.68rem;
  min-width: 26px;
  text-align: right;
  letter-spacing: 0.05em;
}

.btn-menu {
  border-color: #8888bb;
  color: #8888bb;
  font-size: 0.88rem;
  padding: 9px 36px;
  box-shadow: 0 0 10px #8888bb30;
}
.btn-menu:hover {
  background: #8888bb1a;
  box-shadow: 0 0 22px #8888bb, inset 0 0 12px #8888bb15;
  color: #aaaadd;
  border-color: #aaaadd;
}

/* Weekly scores button */
.btn-weekly {
  border-color: #ccaa00;
  color: #ccaa00;
  font-size: 0.85rem;
  padding: 9px 28px;
  box-shadow: 0 0 10px #ccaa0030;
}
.btn-weekly:hover {
  background: #ccaa001a;
  box-shadow: 0 0 22px #ccaa00, inset 0 0 12px #ccaa0015;
  color: #ffdd44;
  border-color: #ffdd44;
}

/* Weekly rank on death screen */
.weekly-rank-line { color: #ccaa00; }

/* Weekly scoreboard modal */
.weekly-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,20,0.80);
  backdrop-filter: blur(6px);
}
.weekly-modal.active { display: flex; }

.weekly-modal-box {
  background: #0d0d22;
  border: 1px solid #ccaa0060;
  border-radius: 12px;
  box-shadow: 0 0 40px #ccaa0040, 0 0 80px #ccaa0015;
  padding: 28px 36px 22px;
  min-width: 320px;
  max-width: 480px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.weekly-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffdd44;
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.weekly-close {
  background: transparent;
  border: none;
  color: #8888aa;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 2px 6px;
  font-family: inherit;
  transition: color 0.15s;
}
.weekly-close:hover { color: #fff; }

.weekly-subtitle {
  color: #8888aa;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-align: center;
  margin-top: -6px;
}

.weekly-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.weekly-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 0.82rem;
}
.weekly-list li.wl-me {
  background: rgba(255,220,50,0.10);
  border: 1px solid #ccaa0050;
}
.wl-rank  { color: #8888aa; font-size: 0.72rem; text-align: right; }
.wl-name  { color: #ccccee; letter-spacing: 0.06em; }
.wl-score { color: #ffdd44; font-weight: 700; text-align: right; }
.wl-date  { color: #555577; font-size: 0.68rem; text-align: right; }

.weekly-empty {
  text-align: center;
  color: #555577;
  font-size: 0.8rem;
  padding: 20px 0;
  letter-spacing: 0.1em;
}

.weekly-clear-btn {
  background: transparent;
  border: 1px solid #443333;
  border-radius: 6px;
  color: #665555;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  align-self: center;
  transition: all 0.15s;
}
.weekly-clear-btn:hover { border-color: #ff4444; color: #ff6666; }

/* Death screen */
.death-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.death-title {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: #ff1155;
  text-shadow: 0 0 30px #ff1155, 0 0 80px #ff115560;
  animation: pulse-death 1s ease-in-out infinite;
}
@keyframes pulse-death {
  0%,100% { text-shadow: 0 0 30px #ff1155, 0 0 80px #ff115560; }
  50%      { text-shadow: 0 0 50px #ff4477, 0 0 100px #ff115590; }
}
.death-stat {
  font-size: 1.2rem;
  color: #8888bb;
  letter-spacing: 0.12em;
}
.death-stat span { color: #00ffff; font-weight: 700; }

/* ── HUD ── */
#hud {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
#hud.visible { display: block; }

#leaderboard {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(0, 0, 20, 0.72);
  border: 1px solid #00ffff30;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 190px;
  box-shadow: 0 0 20px #00000060;
}
#leaderboard h3 {
  color: #00ffff;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px #00ffff;
}
#leaderboard-list {
  list-style: none;
  font-size: 0.82rem;
}
#leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #ffffff0a;
}
#leaderboard-list li:last-child { border-bottom: none; }

.lb-rank  { color: #ffffff50; font-size: 0.72rem; min-width: 14px; }
.lb-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lb-name  { flex: 1; color: #ccccee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #ffffff60; font-size: 0.72rem; }
.lb-me .lb-name  { color: #fff; font-weight: 700; }
.lb-me .lb-score { color: #ffffffa0; }

#score-display {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px #fff8;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* Touch boost button — only visible on coarse-pointer (touch) devices */
.touch-boost-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,220,0,0.12);
  border: 2px solid rgba(255,220,0,0.50);
  color: #ffdd00;
  font-size: 2rem;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(255,220,0,0.20);
  transition: background 0.1s, box-shadow 0.1s;
}
@media (pointer: coarse) {
  .touch-boost-btn { display: flex; }
  .hint-mouse { display: none; }
}
.touch-boost-btn:active,
.touch-boost-btn.pressing {
  background: rgba(255,220,0,0.35);
  box-shadow: 0 0 28px #ffdd00;
}

/* Hint visibility */
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-touch { display: inline; }
}

/* Boost indicator */
#boost-indicator {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: #ffff0088;
  text-shadow: 0 0 10px #ffff00;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
#boost-indicator.active { opacity: 1; }

/* Treasure chest speed-boost HUD banner */
.treasure-boost-hud {
  display: none;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 200, 0, 0.12);
  border: 1px solid #ffd700;
  border-radius: 8px;
  color: #ffd700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  padding: 5px 18px;
  z-index: 10;
  pointer-events: none;
  animation: treasure-banner-pulse 1s ease-in-out infinite;
}
.treasure-boost-hud.active { display: block; }
@keyframes treasure-banner-pulse {
  0%,100% { box-shadow: 0 0 10px #ffd70050; }
  50%      { box-shadow: 0 0 26px #ffd700, 0 0 4px #fffb80; }
}

/* ── Floor toggle switch ───────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  width: 38px;
  height: 20px;
  background: #222244;
  border: 1px solid #444;
  border-radius: 10px;
  position: relative;
  transition: background 0.25s;
}
.toggle-switch input:checked + .toggle-track { background: #0099bb; border-color: #00ffff; }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #aaa;
  transition: left 0.25s, background 0.25s;
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  left: 20px;
  background: #00ffff;
  box-shadow: 0 0 6px #00ffff;
}