* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui, sans-serif; }
canvas { display: block; }

#ui { position: fixed; inset: 0; pointer-events: none; }

#flash {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.05s; pointer-events: none;
}

#score-display {
  position: absolute; top: 1.5rem; right: 1.5rem;
  text-align: right; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#score {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 900; font-variant-numeric: tabular-nums;
}
#high-score {
  font-size: clamp(0.75rem, 2vw, 1.2rem);
  opacity: 0.7; margin-top: 0.25rem;
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  pointer-events: auto;
}
.screen h1 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 1rem; }
.screen p { font-size: clamp(0.9rem, 2.5vw, 1.4rem); opacity: 0.8; }
.screen .subtitle {
  margin-top: 0.5rem;
  font-size: clamp(0.7rem, 2vw, 1rem); opacity: 0.5;
}

#game-over-screen .final-score {
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; margin: 1rem 0;
}
#game-over-screen .new-record { color: #ffd700; font-weight: 700; display: none; }
#game-over-screen button {
  margin-top: 1.5rem; padding: 0.8rem 2rem;
  font-size: 1.2rem; border: 2px solid #fff;
  background: transparent; color: #fff;
  border-radius: 0.5rem; cursor: pointer;
  pointer-events: auto; transition: background 0.2s;
}
#game-over-screen button:hover { background: rgba(255,255,255,0.15); }

#float-container { position: absolute; inset: 0; pointer-events: none; }
.float-text {
  position: absolute; top: 40%; left: 50%;
  font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 900;
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  50%  { opacity: 1; transform: translate(-50%, -120%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(1); }
}

#jump-btn {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 20vw, 120px); height: clamp(80px, 20vw, 120px);
  border-radius: 50%; border: 3px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 0.9rem; font-weight: 700;
  pointer-events: auto; display: none; place-content: center;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
@media (pointer: coarse) { #jump-btn { display: grid; } }

.hidden { display: none !important; }

/* ── Loading Screen ─────────────────────── */
#loading-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #1a1a2e; color: #fff;
}
#loading-screen h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: 2rem; opacity: 0.9;
  letter-spacing: 0.3em; text-transform: uppercase;
}
#loading-bar-bg {
  width: 60%; max-width: 400px; height: 6px;
  background: rgba(255,255,255,0.12); border-radius: 3px;
  overflow: hidden;
}
#loading-bar {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #4488ff, #44ddff);
  border-radius: 3px; transition: width 0.15s;
}
#loading-asset {
  margin-top: 1rem;
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  opacity: 0.4; font-family: monospace;
}

/* ── Character Select Screen ──────────── */
#char-select-screen {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0d0d1a 0%, #1a1a2e 50%, #16213e 100%);
  color: #fff;
}
#char-select-screen.hidden { display: none !important; }

#char-preview {
  width: min(300px, 70vw); height: min(300px, 70vw);
  border-radius: 1rem;
  background: radial-gradient(circle, #2a2a4a, #1a1a2e);
}
#char-category {
  margin-top: 1rem;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  text-transform: uppercase; letter-spacing: 0.25em;
  opacity: 0.5;
}
#char-name {
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: 800; margin-top: 0.3rem;
}
.char-nav {
  display: flex; align-items: center;
  gap: clamp(1rem, 4vw, 2rem); margin-top: 1rem;
}
.char-nav button {
  width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px);
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 1.5rem; cursor: pointer;
  display: grid; place-content: center;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.char-nav button:hover { background: rgba(255,255,255,0.18); }

.char-dots {
  display: flex; gap: 6px;
  justify-content: center; margin-top: 1rem;
  flex-wrap: wrap; max-width: min(300px, 70vw);
}
.char-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s, transform 0.2s;
}
.char-dots span.active {
  background: #4488ff; transform: scale(1.4);
}
#char-confirm {
  margin-top: 1.5rem; padding: 0.8rem 2.5rem;
  font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 700;
  border: 2px solid #4488ff; background: rgba(68,136,255,0.15);
  color: #fff; border-radius: 0.5rem; cursor: pointer;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
#char-confirm:hover { background: rgba(68,136,255,0.3); }
#char-hint {
  margin-top: 1rem;
  font-size: clamp(0.6rem, 1.5vw, 0.75rem);
  opacity: 0.35;
}

/* ── Error Toast ─────────────────────── */
#error-toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%); z-index: 9999;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  background: rgba(220,38,38,0.9); color: #fff;
  font-size: 0.85rem; font-family: monospace;
  pointer-events: none;
}