* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #0a0a0f; font-family: 'Share Tech Mono', monospace; }
#scene-container { width: 100vw; height: 100vh; }
#scene-container canvas { display: block; }

/* Splash Screen */
#splash-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(180deg, #0d0d12 0%, #1a1520 40%, #2a1f25 70%, #3d2a1f 100%);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
#splash-city-silhouette {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30vh;
  background: linear-gradient(0deg, #000 0%, transparent 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cpath d='M0,200 L0,120 50,120 50,80 70,80 70,40 90,40 90,80 120,80 120,100 150,100 150,60 170,60 170,30 180,30 180,10 190,10 190,30 200,30 200,60 220,60 220,100 260,100 260,70 280,70 280,50 300,50 300,70 320,70 320,100 350,100 350,90 400,90 400,110 430,110 430,80 450,80 450,50 470,50 470,80 490,80 490,110 520,110 520,90 550,90 550,70 570,70 570,40 590,40 590,20 600,20 600,40 610,40 610,70 630,70 630,90 660,90 660,110 700,110 700,80 720,80 720,60 740,60 740,80 760,80 760,110 800,110 800,90 830,90 830,120 860,120 860,100 900,100 900,130 950,130 950,110 1000,110 1000,200Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cpath d='M0,200 L0,120 50,120 50,80 70,80 70,40 90,40 90,80 120,80 120,100 150,100 150,60 170,60 170,30 180,30 180,10 190,10 190,30 200,30 200,60 220,60 220,100 260,100 260,70 280,70 280,50 300,50 300,70 320,70 320,100 350,100 350,90 400,90 400,110 430,110 430,80 450,80 450,50 470,50 470,80 490,80 490,110 520,110 520,90 550,90 550,70 570,70 570,40 590,40 590,20 600,20 600,40 610,40 610,70 630,70 630,90 660,90 660,110 700,110 700,80 720,80 720,60 740,60 740,80 760,80 760,110 800,110 800,90 830,90 830,120 860,120 860,100 900,100 900,130 950,130 950,110 1000,110 1000,200Z' fill='black'/%3E%3C/svg%3E");
  mask-size: cover; -webkit-mask-size: cover;
  background: #080810;
}
#splash-content { text-align: center; z-index: 2; }
#splash-title {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 8rem;
  color: #d4a855; letter-spacing: 0.05em;
  text-shadow: 0 0 40px rgba(212,168,85,0.5), 0 4px 8px rgba(0,0,0,0.8);
  line-height: 1;
}
#splash-subtitle {
  font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 1.8rem;
  color: #8a8a9a; letter-spacing: 0.3em; margin-top: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
#splash-prompt {
  color: #b0a080; font-size: 1rem; margin-top: 60px; letter-spacing: 0.2em;
  animation: pulse-text 2s ease-in-out infinite;
}
#splash-credit { color: #444; font-size: 0.7rem; margin-top: 20px; }
@keyframes pulse-text { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* HUD */
#hud { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }

#minimap-container {
  position: absolute; top: 16px; left: 16px;
  width: 180px; height: 200px;
}
#minimap {
  border-radius: 8px; border: 2px solid rgba(200,180,120,0.4);
  background: rgba(10,10,20,0.85);
}
#wanted-stars-mini {
  text-align: center; margin-top: 4px; font-size: 14px; letter-spacing: 2px;
}

#wanted-display {
  position: absolute; top: 16px; right: 16px;
  background: rgba(10,10,20,0.7); padding: 8px 16px; border-radius: 6px;
  border: 1px solid rgba(200,180,120,0.3);
}
#wanted-stars { font-size: 22px; letter-spacing: 4px; }

#vehicle-info {
  position: absolute; bottom: 60px; left: 16px;
  background: rgba(10,10,20,0.75); padding: 12px 18px; border-radius: 8px;
  border: 1px solid rgba(200,180,120,0.25); min-width: 200px;
}
#car-name { color: #d4a855; font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 700; }
#speed-display { color: #e0e0e0; font-size: 1.6rem; margin: 4px 0; }
#speed-display .unit { font-size: 0.7rem; color: #888; }
#radio-display { color: #7a9a6a; font-size: 0.8rem; }
#headlight-status { color: #888; font-size: 0.75rem; margin-top: 4px; }

#controls-help {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(10,10,20,0.7); padding: 8px 20px; border-radius: 6px;
  border: 1px solid rgba(200,180,120,0.2); text-align: center;
  transition: opacity 0.5s;
}
.control-row { color: #8a8a8a; font-size: 0.7rem; line-height: 1.6; letter-spacing: 0.05em; }

#camera-mode-display {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #d4a855; font-family: 'Oswald', sans-serif; font-size: 1.5rem;
  text-shadow: 0 0 20px rgba(212,168,85,0.6);
  letter-spacing: 0.1em;
}

/* Phone */
#phone-overlay {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  transition: transform 0.4s ease;
}
#phone-frame {
  width: 180px; height: 320px; background: #1a1a22;
  border-radius: 20px 20px 0 0; border: 2px solid #333;
  box-shadow: 0 0 30px rgba(80,200,120,0.15), inset 0 0 20px rgba(0,0,0,0.5);
  padding: 20px 12px;
}
#phone-screen { text-align: center; }
#phone-time { color: #50c878; font-size: 2rem; margin-bottom: 20px; font-family: 'Share Tech Mono', monospace; }
#phone-icons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phone-icon {
  background: rgba(80,200,120,0.1); border: 1px solid rgba(80,200,120,0.3);
  border-radius: 10px; padding: 12px 8px; font-size: 1.5rem; color: #fff;
  cursor: pointer; transition: background 0.2s;
}
.phone-icon:hover { background: rgba(80,200,120,0.2); }
.phone-icon span { display: block; font-size: 0.6rem; color: #50c878; margin-top: 4px; }
#phone-carrier { color: #333; font-size: 0.6rem; margin-top: 20px; letter-spacing: 0.3em; }

/* Clothing Menu */
#clothing-menu {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: rgba(10,10,20,0.9); padding: 20px; border-radius: 10px;
  border: 1px solid rgba(200,180,120,0.3); width: 200px;
}
#clothing-menu h3 { color: #d4a855; font-family: 'Oswald', sans-serif; margin-bottom: 12px; letter-spacing: 0.2em; }
.outfit-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 6px; cursor: pointer; margin-bottom: 4px;
  border: 1px solid transparent; transition: all 0.2s;
}
.outfit-item:hover, .outfit-item.active { border-color: #d4a855; background: rgba(212,168,85,0.1); }
.outfit-swatch { width: 28px; height: 28px; border-radius: 4px; }
.outfit-name { color: #ccc; font-size: 0.8rem; }

/* Full Map */
#fullmap-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,15,0.85); display: flex; align-items: center;
  justify-content: center; flex-direction: column;
}
#fullmap { border: 2px solid rgba(200,180,120,0.4); border-radius: 8px; }
#fullmap-label { color: #888; font-size: 0.8rem; margin-top: 12px; letter-spacing: 0.15em; }

/* Busted */
#busted-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,40,0.7); display: flex; align-items: center; justify-content: center;
}
#busted-text {
  font-family: 'Oswald', sans-serif; font-size: 8rem; font-weight: 700;
  color: #4466ff; letter-spacing: 0.1em;
  text-shadow: 0 0 60px rgba(68,102,255,0.8), 0 0 120px rgba(68,102,255,0.4);
  animation: busted-flash 0.5s ease-in-out 3;
}
@keyframes busted-flash { 0%,100%{opacity:1} 50%{opacity:0.5} }

@keyframes siren { 0%,100%{color:#ff3333} 50%{color:#3355ff} }

#footer-link {
  position: fixed; bottom: 4px; right: 8px; z-index: 5;
  color: #333; font-size: 0.6rem; text-decoration: none; font-family: 'Share Tech Mono', monospace;
}
#footer-link:hover { color: #666; }