@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

body {
  background: #1a1a2e;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-container {
  position: relative;
}

#game-canvas {
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
}
.overlay.active { pointer-events: auto; }
.overlay.hidden { display: none; }

#title-screen {
  background: linear-gradient(180deg, #4a90d9 0%, #87ceeb 40%, #a8d8a8 70%, #f0e68c 100%);
  padding: 20px;
}

.game-title {
  font-size: clamp(14px, 4vw, 28px);
  text-shadow: 3px 3px 0 #2c5f8a;
  text-align: center;
  line-height: 1.8;
  margin-bottom: 6px;
}

.subtitle {
  font-size: clamp(8px, 2vw, 13px);
  text-shadow: 1px 1px 0 #2c5f8a;
  margin-bottom: 16px;
}

.character-select {
  display: flex;
  gap: clamp(10px, 3vw, 24px);
}

.char-card {
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: clamp(12px, 3vw, 20px) clamp(10px, 2.5vw, 18px);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  text-align: center;
  pointer-events: auto;
  border: 3px solid transparent;
}
.char-card:hover,
.char-card:active { transform: scale(1.06); border-color: #FFD700; }

.char-card canvas { display: block; margin: 0 auto 8px; }

.char-name { font-size: clamp(9px, 2.2vw, 14px); color: #333; }
.char-age  { font-size: clamp(7px, 1.6vw, 10px); color: #666; margin-top: 3px; }
.char-hs   { font-size: clamp(5px, 1.3vw, 8px);  color: #999; margin-top: 6px; }

#hud {
  justify-content: flex-start;
  align-items: stretch;
  padding: clamp(6px, 1.5vw, 12px);
}

.hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.score-display {
  font-size: clamp(9px, 2.2vw, 16px);
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.route-color-dot {
  width: clamp(14px, 3.5vw, 22px);
  height: clamp(14px, 3.5vw, 22px);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  display: inline-block;
}

.mute-btn {
  font-size: clamp(18px, 4vw, 28px);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.hint {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5px, 1.3vw, 9px);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  text-align: center;
  opacity: .85;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .3s;
}

#dialog {
  background: rgba(0,0,0,.65);
}

.dialog-box {
  background: #fff;
  border-radius: 16px;
  padding: clamp(18px, 4vw, 32px) clamp(16px, 3vw, 28px);
  text-align: center;
  max-width: 82%;
  color: #333;
}

.dialog-title { font-size: clamp(13px, 3.5vw, 24px); margin-bottom: 10px; }
.dialog-score { font-size: clamp(9px, 2.2vw, 16px); margin-bottom: 6px; }
.dialog-hs    { font-size: clamp(7px, 1.7vw, 12px); color: #FFD700; margin-bottom: 14px; }

.dialog-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.dbtn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.7vw, 11px);
  padding: clamp(8px, 2vw, 14px) clamp(12px, 3vw, 22px);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .1s;
  color: #fff;
}
.dbtn:hover { transform: scale(1.05); }
.dbtn.g { background: #43A047; }
.dbtn.b { background: #1E88E5; }
.dbtn.o { background: #FB8C00; }

.cant-reach {
  position: absolute;
  font-size: clamp(7px, 1.7vw, 11px);
  color: #FF6B6B;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  pointer-events: none;
  animation: floatUp 1.2s forwards;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}

#landscape-warning {
  position: fixed;
  inset: 0;
  background: #1a1a2e;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: clamp(10px, 3vw, 16px);
  text-align: center;
  padding: 24px;
}

@media (orientation: landscape) and (max-height: 500px) {
  #landscape-warning { display: flex; }
  #game-container { display: none; }
}