/* =========================================================
   Traffic Rush Puzzle — Stylesheet
   ========================================================= */

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

:root {
  --bg:        #0F1117;
  --surface:   #1A1D27;
  --surface2:  #22263a;
  --accent:    #305CDE;
  --accent2:   #4a7aff;
  --text:      #e8eaf6;
  --text-dim:  #7a7f9a;
  --red-car:   #e53935;
  --green-car: #2e9e5b;
  --blue-car:  #1976d2;
  --yellow-car:#f9a825;
  --purple-car:#7b1fa2;
  --teal-car:  #00897b;
  --orange-car:#e65100;
  --pink-car:  #c2185b;
  --lime-car:  #558b2f;
  --navy-car:  #1a237e;
  --grid-line: #2d3250;
  --cell-bg:   #171a28;
  --hint-glow: #ffe040;
  --star-on:   #fdd835;
  --star-off:  #2d3250;
  --radius:    12px;
  --car-radius:8px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
}

/* ── SCREENS ─────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
  overflow-y: auto;
}
.screen.active {
  opacity: 1; pointer-events: all;
}

/* ── START SCREEN ────────────────────────────────────────── */
.start-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 32px;
  padding: 32px 20px;
  max-width: 480px; width: 100%;
}

.game-logo { text-align: center; }
.logo-icon { font-size: 56px; line-height: 1; margin-bottom: 10px; }
.game-logo h1 {
  font-size: 2.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent2), #88aaff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tagline { color: var(--text-dim); margin-top: 6px; font-size: .95rem; }

/* Level select grid */
.level-select-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px; width: 100%;
}
.lvl-btn {
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--surface);
  border: 2px solid var(--grid-line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-dim);
  transition: all .18s;
  position: relative;
}
.lvl-btn.unlocked {
  color: var(--text);
  border-color: var(--surface2);
}
.lvl-btn.unlocked:hover {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateY(-2px);
}
.lvl-btn.locked { opacity: .45; cursor: not-allowed; }
.lvl-btn.completed { border-color: var(--star-on); }
.lvl-btn .lvl-stars {
  font-size: .65rem; letter-spacing: 1px;
  margin-top: 2px; color: var(--star-on);
}
.lvl-btn.selected {
  border-color: var(--accent2);
  background: #1e2a50;
  box-shadow: 0 0 0 3px rgba(48,92,222,.4);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  padding: 14px 36px;
  background: var(--accent);
  color: #fff; font-size: 1.05rem; font-weight: 700;
  border: none; border-radius: var(--radius);
  cursor: pointer; letter-spacing: .5px;
  transition: background .18s, transform .1s;
  width: 100%;
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  padding: 10px 20px;
  background: var(--surface2);
  color: var(--text); font-size: .9rem; font-weight: 600;
  border: 1px solid var(--grid-line); border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.btn-secondary:hover { background: #2a2f4a; border-color: var(--accent); }

.btn-icon {
  background: transparent; border: none;
  color: var(--text-dim); font-size: .9rem;
  cursor: pointer; padding: 6px 10px;
  border-radius: 8px; transition: color .18s, background .18s;
}
.btn-icon:hover { color: var(--text); background: var(--surface2); }

/* ── GAME SCREEN ─────────────────────────────────────────── */
#screen-game {
  justify-content: flex-start;
  padding-top: 0;
}

.game-header {
  width: 100%; max-width: 520px;
  display: flex; align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--grid-line);
}
.hud-center {
  flex: 1; text-align: center;
}
.level-label {
  font-size: 1rem; font-weight: 700; color: var(--text);
}
.hud-right { min-width: 80px; text-align: right; }
.move-counter {
  display: flex; flex-direction: column; align-items: flex-end;
}
.move-val {
  font-size: 1.4rem; font-weight: 800; color: var(--accent2);
  line-height: 1;
}
.move-txt { font-size: .7rem; color: var(--text-dim); }

.hint-bar {
  width: 100%; max-width: 520px;
  background: rgba(255,224,64,.12);
  border-bottom: 1px solid rgba(255,224,64,.3);
  padding: 8px 16px; text-align: center;
  font-size: .85rem; color: var(--hint-glow);
}

/* ── GRID ────────────────────────────────────────────────── */
.grid-wrapper {
  display: flex; align-items: center; gap: 8px;
  margin: 20px auto;
  padding: 0 16px;
}

.grid-container {
  position: relative;
  border: 2px solid var(--grid-line);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
}

.grid-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  position: relative; z-index: 1;
}
.grid-cell {
  background: var(--cell-bg);
  border: 1px solid var(--grid-line);
}
/* Exit row highlight */
.grid-cell.exit-row {
  background: rgba(48,92,222,.06);
}

.grid-cars {
  position: absolute; inset: 0; z-index: 2;
}

/* ── CARS ────────────────────────────────────────────────── */
.car {
  position: absolute;
  border-radius: var(--car-radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: rgba(255,255,255,.7);
  letter-spacing: 1px;
  transition: box-shadow .15s;
  touch-action: none;
  /* 3-D effect */
  box-shadow: 0 3px 8px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.2);
}
.car::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: calc(var(--car-radius) - 2px);
  background: rgba(255,255,255,.08);
}
.car.selected {
  box-shadow: 0 0 0 3px #fff,
              0 4px 16px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.2);
  z-index: 10;
}
.car.hint-glow {
  box-shadow: 0 0 0 3px var(--hint-glow),
              0 0 18px rgba(255,224,64,.5),
              inset 0 1px 0 rgba(255,255,255,.2);
  animation: pulse-hint 1s ease-in-out infinite alternate;
}
@keyframes pulse-hint {
  from { box-shadow: 0 0 0 3px var(--hint-glow), 0 0 12px rgba(255,224,64,.4), inset 0 1px 0 rgba(255,255,255,.2); }
  to   { box-shadow: 0 0 0 4px var(--hint-glow), 0 0 28px rgba(255,224,64,.7), inset 0 1px 0 rgba(255,255,255,.2); }
}
.car.moving {
  transition: left .15s ease, top .15s ease, box-shadow .15s;
}

/* Car colour map */
.car[data-color="red"]    { background: linear-gradient(145deg, #ef5350, #b71c1c); }
.car[data-color="green"]  { background: linear-gradient(145deg, #43a047, #1b5e20); }
.car[data-color="blue"]   { background: linear-gradient(145deg, #1e88e5, #0d47a1); }
.car[data-color="yellow"] { background: linear-gradient(145deg, #fdd835, #f9a825); color: rgba(0,0,0,.6); }
.car[data-color="purple"] { background: linear-gradient(145deg, #ab47bc, #6a1b9a); }
.car[data-color="teal"]   { background: linear-gradient(145deg, #26a69a, #00695c); }
.car[data-color="orange"] { background: linear-gradient(145deg, #fb8c00, #bf360c); }
.car[data-color="pink"]   { background: linear-gradient(145deg, #ec407a, #880e4f); }
.car[data-color="lime"]   { background: linear-gradient(145deg, #9ccc65, #33691e); color: rgba(0,0,0,.5); }
.car[data-color="navy"]   { background: linear-gradient(145deg, #3949ab, #1a237e); }
.car[data-color="cyan"]   { background: linear-gradient(145deg, #26c6da, #00838f); }
.car[data-color="brown"]  { background: linear-gradient(145deg, #8d6e63, #4e342e); }

.exit-marker {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: .7rem; font-weight: 800;
  color: var(--accent2);
  letter-spacing: 3px;
  opacity: .8;
}

/* Arrow overlay on selected car */
.car .move-arrows { display: none; }

/* ── CONTROLS BAR ────────────────────────────────────────── */
.controls-bar {
  display: flex; gap: 10px; justify-content: center;
  padding: 0 16px 10px;
}
.min-moves-bar {
  text-align: center; padding: 8px;
  color: var(--text-dim); font-size: .85rem;
}

/* ── VICTORY SCREEN ──────────────────────────────────────── */
.victory-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  padding: 40px 24px;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--grid-line);
  max-width: 360px; width: 90%;
  text-align: center;
}
.victory-title {
  font-size: 2rem; font-weight: 800;
  background: linear-gradient(135deg, #ffe040, #ffb300);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stars-row { display: flex; gap: 12px; justify-content: center; }
.star {
  font-size: 3rem; line-height: 1;
  filter: grayscale(1) brightness(.4);
  transition: filter .3s, transform .3s;
}
.star.lit {
  filter: none;
  animation: star-pop .4s cubic-bezier(.36,2,.6,1) forwards;
}
@keyframes star-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.victory-stats { display: flex; gap: 32px; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-size: 2rem; font-weight: 800; color: var(--accent2); }
.stat-lbl { font-size: .8rem; color: var(--text-dim); }
.victory-buttons { display: flex; gap: 12px; width: 100%; }
.victory-buttons .btn-secondary { flex: 1; }
.victory-buttons .btn-primary { flex: 1.5; }

/* ── COMPLETION SCREEN ───────────────────────────────────── */
.complete-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  padding: 40px 24px; text-align: center;
  max-width: 400px; width: 90%;
}
.complete-icon { font-size: 72px; }
.complete-inner h2 { font-size: 2rem; font-weight: 800; }
.complete-inner p { color: var(--text-dim); }
.total-stars { font-size: 1.6rem; letter-spacing: 4px; color: var(--star-on); }
.complete-inner .btn-primary,
.complete-inner .btn-secondary { width: 100%; }

/* ── SLIDE GHOST ─────────────────────────────────────────── */
.slide-ghost {
  position: absolute;
  border-radius: var(--car-radius);
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.2);
  pointer-events: none;
  z-index: 3;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .game-logo h1 { font-size: 1.9rem; }
  .controls-bar { gap: 8px; }
  .btn-secondary { padding: 9px 14px; font-size: .82rem; }
}