:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --text: #f0f0f0;
  --muted: #888;
  --red: #e10600;
  --red-dark: #a00400;
  --red-glow: rgba(225, 6, 0, 0.4);
  --border: #333;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, sans-serif; }

#app {
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh;
  background: linear-gradient(180deg, #111 0%, var(--bg) 100%);
}

.hud {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem; background: #111;
  border-bottom: 2px solid var(--red); z-index: 10;
}
.hud-block { display: flex; flex-direction: column; min-width: 3.5rem; }
.hud-block .label { font-size: 0.55rem; letter-spacing: 0.12em; color: var(--muted); }
.hud-block span:last-child { font-size: 0.95rem; font-weight: 700; color: var(--red); }
.hud-shop-btn {
  background: var(--red); border: none; color: #fff;
  font-weight: 700; font-size: 0.7rem; padding: 0.35rem 0.6rem;
  border-radius: 3px; cursor: pointer;
}
.hud-view-btn {
  background: #1a2a4a; border: 1px solid #3a5a9a; color: #8ab4f8;
  font-weight: 700; font-size: 0.65rem; padding: 0.3rem 0.45rem;
  border-radius: 3px; cursor: pointer; letter-spacing: 0.04em;
  max-width: 5.5rem;
}
.hud-view-btn:hover { background: #243858; }

#game-canvas { flex: 1; width: 100%; display: block; background: #2a2a34; touch-action: none; }

.welcome-banner {
  position: absolute; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
}
.welcome-banner.away {
  transform: translateX(-120%);
  opacity: 0;
}
.welcome-banner-inner {
  text-align: center; padding: 2rem 1.5rem;
  border: 3px solid var(--red); border-radius: 8px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow: 0 0 60px var(--red-glow);
  max-width: 90%;
}
.welcome-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 800; letter-spacing: 0.12em;
  color: var(--red); margin-bottom: 0.5rem;
  text-shadow: 0 0 20px var(--red-glow);
}
.welcome-subtitle {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 700; letter-spacing: 0.08em;
  color: #fff; margin-bottom: 1.25rem;
}
.welcome-hint {
  font-size: 0.85rem; color: var(--muted);
  letter-spacing: 0.06em; animation: welcome-pulse 1.2s ease-in-out infinite;
}
@keyframes welcome-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; color: #8ab4f8; }
}

.overlay {
  position: absolute; inset: 0; display: flex;
  align-items: flex-start; justify-content: center;
  background: rgba(0,0,0,0.85); z-index: 200;
  overflow-y: auto; padding: 1rem;
}
.overlay.hidden { display: none; }

.panel {
  text-align: center; padding: 1.5rem 1.25rem;
  background: var(--surface); border: 2px solid var(--red);
  box-shadow: 0 0 40px var(--red-glow); border-radius: 4px;
  max-width: 680px; width: 100%; margin: 1rem auto 2rem;
}
.panel h1 { font-size: 1.8rem; letter-spacing: 0.15em; color: var(--red); margin-bottom: 0.75rem; }
.panel p { color: var(--muted); margin-bottom: 0.75rem; line-height: 1.5; }

.menu-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 0.5rem; }
.menu-coins { font-weight: 700; color: #f0c020; }
.btn-shop-big {
  background: #1a1a1a; border: 2px solid var(--red); color: var(--red);
  font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;
}
.btn-design-big {
  background: #1a1a1a; border: 2px solid #3a5a9a; color: #8ab4f8;
  font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;
}
.btn-cars-big {
  background: #1a1a1a; border: 2px solid #2a8a4a; color: #6fcf6f;
  font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;
}
.menu-top-row { flex-wrap: wrap; }
.equipped-car-label { font-size: 0.8rem; color: #6fcf6f; font-weight: 700; margin-bottom: 0.5rem; }

.selected-level-label { font-size: 0.85rem; color: var(--red); font-weight: 700; margin-bottom: 0.65rem; }

.level-select {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.45rem; margin-bottom: 1rem; max-height: 320px; overflow-y: auto;
}
.level-card {
  display: block; width: 100%; background: #0f0f0f;
  border: 2px solid var(--border); border-radius: 4px;
  padding: 0.6rem 0.5rem; cursor: pointer; text-align: left;
  color: var(--text); font: inherit; touch-action: manipulation;
}
.level-card:hover { border-color: var(--red-dark); background: #161616; }
.level-card.selected { border-color: var(--red); box-shadow: 0 0 16px var(--red-glow); }
.level-card .level-num { font-size: 0.6rem; color: var(--red); letter-spacing: 0.1em; }
.level-card .level-name { font-size: 0.85rem; font-weight: 700; margin: 0.15rem 0; }
.level-card .level-desc { font-size: 0.65rem; color: var(--muted); }
.level-card .level-meta { font-size: 0.6rem; color: #666; margin-top: 0.3rem; }

.btn-primary {
  background: linear-gradient(180deg, #ff1a14 0%, #c00400 100%);
  border: 2px solid #ff4440; color: #fff; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.1em; padding: 0.75rem 2rem;
  border-radius: 4px; cursor: pointer; width: 100%; max-width: 320px;
}
.btn-start-wide { max-width: 100%; }

.shop-items { display: flex; flex-direction: column; gap: 0.5rem; max-height: 340px; overflow-y: auto; margin-bottom: 1rem; text-align: left; }
.shop-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: #0f0f0f; border: 1px solid var(--border); padding: 0.65rem; border-radius: 4px;
}
.shop-item.owned { opacity: 0.65; border-color: #2a5a2a; }
.shop-item.cant-afford { opacity: 0.5; }
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-tag {
  font-size: 0.55rem; letter-spacing: 0.1em; color: var(--red);
  font-weight: 700; margin-bottom: 0.15rem;
}
.shop-item-name { font-weight: 700; font-size: 0.85rem; }
.shop-item-desc { font-size: 0.7rem; color: var(--muted); }
.shop-hint { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.75rem; }
.shop-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.65rem; }
.shop-tab {
  flex: 1; background: #0f0f0f; border: 2px solid var(--border); color: var(--muted);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.5rem;
  border-radius: 4px; cursor: pointer;
}
.shop-tab.active { border-color: var(--red); color: #fff; background: #1a1010; }
.shop-tab-cars.active { border-color: #2a8a4a; background: #0f1a12; color: #6fcf6f; }
.shop-message, .dealer-message {
  min-height: 1.2rem; font-size: 0.8rem; font-weight: 700; text-align: center;
  color: #6fcf6f; margin-bottom: 0.5rem;
}
.shop-message.error, .dealer-message.error { color: #ff6666; }
.hidden { display: none !important; }
.shop-panel { max-width: 520px; }
.dealer-panel { max-width: 620px; text-align: left; }
.dealer-balance { font-weight: 700; color: #f0c020; text-align: center; }
.dealer-hint { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.75rem; text-align: center; }
.dealer-cars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem; max-height: 360px; overflow-y: auto; margin-bottom: 1rem;
}
.dealer-card {
  background: #0f0f0f; border: 2px solid var(--border); border-radius: 6px;
  padding: 0.65rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.dealer-card.owned { border-color: #2a5a3a; }
.dealer-card.equipped { border-color: #6fcf6f; box-shadow: 0 0 14px rgba(111, 207, 111, 0.25); }
.dealer-card.cant-afford { opacity: 0.55; }
.dealer-swatch {
  height: 2.5rem; border-radius: 4px; border: 1px solid #444;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
}
.dealer-card-name { font-weight: 700; font-size: 0.82rem; }
.dealer-card-desc { font-size: 0.68rem; color: var(--muted); line-height: 1.35; }
.dealer-card-stat { font-size: 0.62rem; color: #8ab4f8; letter-spacing: 0.04em; }
.dealer-card button {
  background: #2a8a4a; border: none; color: #fff; font-weight: 700;
  font-size: 0.8rem; padding: 0.55rem; border-radius: 4px; cursor: pointer; width: 100%;
  touch-action: manipulation;
}
.dealer-card button.buy-btn { background: linear-gradient(180deg, #3aba5a, #1a7a3a); font-size: 0.85rem; }
.dealer-card button.equip-btn { background: #1a5a9a; }
.dealer-card button:disabled { opacity: 0.45; cursor: not-allowed; background: #333; }
.shop-item button {
  background: var(--red); border: none; color: #fff;
  padding: 0.35rem 0.7rem; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 0.75rem;
}
.shop-item button:disabled { opacity: 0.4; cursor: not-allowed; }

#shop-overlay, #design-overlay, #dealer-overlay { z-index: 250; }
.design-panel { max-width: 640px; text-align: left; }
.design-hint { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.75rem; text-align: center; }
.design-layout { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.design-preview-wrap {
  background: linear-gradient(180deg, #1a1a22 0%, #0a0a10 100%);
  border: 2px solid var(--border); border-radius: 6px; padding: 0.75rem; text-align: center;
}
#design-canvas { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; border-radius: 4px; }
.design-preview-label { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--red); margin-top: 0.5rem; font-weight: 700; }
.design-options { display: flex; flex-direction: column; gap: 0.85rem; max-height: 280px; overflow-y: auto; }
.design-section-title {
  font-size: 0.65rem; letter-spacing: 0.12em; color: var(--muted);
  font-weight: 700; margin-bottom: 0.35rem;
}
.design-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.design-choice {
  background: #0f0f0f; border: 2px solid var(--border); color: var(--text);
  padding: 0.4rem 0.55rem; border-radius: 4px; cursor: pointer; font-size: 0.72rem; font-weight: 600;
}
.design-choice:hover { border-color: #555; }
.design-choice.active { border-color: var(--red); box-shadow: 0 0 10px var(--red-glow); color: #fff; }
.design-choice.locked { opacity: 0.45; cursor: not-allowed; }
.design-swatch {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; padding: 0;
}
.design-swatch.active { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.4); }
.design-swatch.locked { opacity: 0.35; cursor: not-allowed; }
.design-toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: #0f0f0f; border: 1px solid var(--border); padding: 0.5rem 0.65rem; border-radius: 4px;
}
.design-toggle label { font-size: 0.8rem; font-weight: 600; }
.design-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--red); }

@media (min-width: 560px) {
  .design-layout { flex-direction: row; align-items: flex-start; }
  .design-preview-wrap { flex: 0 0 200px; }
  .design-options { flex: 1; max-height: 360px; }
}

.controls-top {
  position: absolute; top: 3.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.35rem; z-index: 300;
}
.controls-steer {
  position: absolute; left: 0.5rem; bottom: 2.5rem;
  display: flex; flex-direction: column; gap: 0.5rem; z-index: 300;
}
.controls-right {
  position: absolute; right: 0.5rem; bottom: 2.5rem;
  display: flex; flex-direction: column; gap: 0.5rem; z-index: 300;
}

.ctrl-btn {
  background: rgba(20,20,20,0.92); border: 2px solid var(--border);
  color: var(--text); font-weight: 700; font-size: 0.8rem;
  padding: 0.85rem 1rem; border-radius: 6px; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  min-width: 5rem; min-height: 3rem;
}
.ctrl-btn.pressed, .ctrl-btn.active { background: var(--red-dark); border-color: var(--red); color: #fff; }
.steer-btn { border-color: #3a5a9a; color: #8ab4f8; min-width: 5.5rem; }
.steer-btn.pressed { background: #1a3a6a; border-color: #5a9af0; color: #fff; }
.gas-btn { border-color: #2a8a2a; color: #6fcf6f; }
.gas-btn.pressed { background: #1a5c1a; border-color: #4caf50; }
.brake-btn { border-color: #8a2a2a; color: #cf6f6f; }
.brake-btn.pressed { background: #5c1a1a; border-color: #cf4a4a; }
.mode-btn { font-size: 0.65rem; padding: 0.5rem 0.7rem; min-width: auto; min-height: auto; }

.help {
  position: absolute; bottom: 0.25rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.75rem; font-size: 0.6rem; color: #555; z-index: 20;
}

@media (max-width: 500px) {
  .ctrl-btn { font-size: 0.7rem; padding: 0.7rem 0.6rem; min-width: 4rem; }
}