/* GameNav GPS — interface (as cores vêm do tema ativo via variáveis CSS) */
:root {
  --bg: #0d0f12; --accent: #b06cf5; --accent2: #fff;
  --panel: rgba(10,12,14,.84); --panelSolid: #0d0f12;
  --text: #fff; --muted: #9aa1a8; --border: rgba(255,255,255,.16);
  --font: 'Rajdhani', system-ui, sans-serif; --title: 'Rajdhani', sans-serif;
  --radius: 4px; --glow: 0 0 0 transparent;
  --route: #b06cf5; --player: #fff; --player-stroke: #000;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; font-weight: 600;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
#map { position: fixed; inset: 0; }
.maplibregl-ctrl-attrib { font-family: system-ui, sans-serif; font-size: 10px; }

/* ---------- efeitos de tela ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.fx.vignette { background: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.45) 100%); }
.fx.scanlines { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.5) 100%); }
.fx.neon { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.12) 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(90,0,110,.5) 100%); }
.fx.crt { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.2) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.55) 100%); }
.fx.parchment {
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(70,40,10,.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .1  0 0 0 .38 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ---------- painéis e botões ---------- */
.panel {
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), var(--glow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn {
  font: inherit; font-weight: 700; color: var(--text); background: var(--panel);
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 12px 18px; min-height: 54px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--panelSolid); }
.btn.on { background: var(--accent2); color: var(--panelSolid); border-color: var(--accent2); }
.btn:active, .icon-btn:active { transform: scale(.96); }
.icon-btn {
  width: 58px; height: 58px; display: grid; place-items: center; padding: 0;
  color: var(--text); cursor: pointer; font: inherit;
}
.icon-btn.flat { background: none; border: 0; box-shadow: none; width: 52px; height: 52px; }
.icon-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg .fill { fill: currentColor; }
#btnVoice .mute { display: none; }
#btnVoice.off .mute { display: inline; }
#btnVoice.off .wave { display: none; }
#btnCenter.attn { color: var(--accent); animation: blink 1.1s infinite; }
.title-text { font-family: var(--title); }

/* ---------- busca ---------- */
#topbar { position: fixed; top: calc(var(--sat) + 12px); left: 12px; right: 84px; max-width: 560px; z-index: 10; }
#searchForm { display: flex; align-items: center; padding-left: 14px; }
#searchInput {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font: inherit; font-size: 18px; padding: 14px 0;
}
#searchInput::placeholder { color: var(--muted); }
#searchInput::-webkit-search-cancel-button { display: none; }
#results { margin-top: 8px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.res { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; padding: 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.res:last-child { border-bottom: 0; }
.res-name { font-weight: 700; }
.res-addr { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-dist { float: right; color: var(--accent); font-size: 14px; margin-left: 8px; }
.res-msg { padding: 14px; color: var(--muted); }

/* ---------- navegação ---------- */
#navBanner {
  position: fixed; top: calc(var(--sat) + 12px); left: 12px; right: 84px; max-width: 560px;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; z-index: 10;
}
#manIcon { width: 66px; height: 66px; flex: none; color: var(--accent); }
#manIcon svg { width: 100%; height: 100%; fill: currentColor; }
.man-info { min-width: 0; }
#manDist { font-size: 36px; line-height: 1; color: var(--accent); }
#manText { font-size: 19px; margin-top: 4px; line-height: 1.2; }

#sideBtns { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 10; }

#speedo {
  position: fixed; left: 12px; bottom: calc(var(--sab) + 12px); z-index: 9;
  width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
}
#speedVal { font-size: 30px; line-height: 1; color: var(--accent); }
#speedo small { font-size: 11px; color: var(--muted); }
body.has-route #speedo { bottom: calc(var(--sab) + 196px); }

#bottom { position: fixed; left: 12px; right: 12px; bottom: calc(var(--sab) + 12px); max-width: 640px; margin: 0 auto; padding: 12px; z-index: 10; }
#destName { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; text-align: center; }
.stats { display: flex; justify-content: space-around; text-align: center; }
.stats b { display: block; font-size: 28px; color: var(--accent); line-height: 1.1; }
.stats small { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.actions { display: flex; gap: 8px; margin-top: 10px; }
.actions .primary { flex: 1; }
body.navigating #topbar { display: none; }
body.navigating #btnStart { background: var(--panel); color: var(--text); border-color: var(--border); }

/* ---------- marcadores ---------- */
.player { width: 46px; height: 46px; position: relative; }
.player-arrow { position: relative; width: 46px; height: 46px; fill: var(--player); stroke: var(--player-stroke); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.player-pulse { position: absolute; inset: -6px; border-radius: 50%; background: var(--player); opacity: .25; animation: pulse 2s infinite; }
.dest { width: 40px; height: 40px; position: relative; }
.dest-ring { position: absolute; inset: 0; border: 4px solid var(--route); border-radius: 50%; animation: ring 1.6s infinite; }
.dest-core { position: absolute; inset: 11px; background: var(--route); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 10px var(--route); }

/* ---------- avisos ---------- */
#toast { position: fixed; top: calc(var(--sat) + 84px); left: 50%; transform: translateX(-50%); padding: 12px 18px; z-index: 30; max-width: 90vw; text-align: center; }
#busy { position: fixed; top: calc(var(--sat) + 80px); left: 50%; transform: translateX(-50%); z-index: 20; }
#busy span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
#mission { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); }
#mission span { font-size: clamp(30px, 8vw, 72px); color: var(--accent); text-shadow: 3px 3px 0 #000, 0 0 24px rgba(0,0,0,.6); animation: pop .5s ease-out; text-align: center; padding: 0 20px; }

/* ---------- modais ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; }
.modal-card { width: min(760px, 100%); max-height: 92vh; overflow-y: auto; padding: 20px; }
.modal-card.narrow { width: min(440px, 100%); }
.modal-card h2 { margin: 0 0 14px; color: var(--accent); font-size: 28px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.splash-card { text-align: center; }
.splash-card h1 { margin: 6px 0 10px; font-size: 48px; color: var(--accent); }
.splash-card p { line-height: 1.45; }
.warn { color: #ffb347; font-size: 14px; }
#themeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.theme-card { border: 2px solid rgba(255,255,255,.18); border-radius: 10px; padding: 0; overflow: hidden; text-align: left; cursor: pointer; font: inherit; }
.theme-card.active { outline: 3px solid var(--accent); outline-offset: 2px; }
.tc-prev { height: 96px; }
.tc-name { padding: 10px 12px 2px; font-size: 20px; }
.tc-tag { padding: 0 12px 12px; font-size: 13px; opacity: .8; font-family: system-ui, sans-serif; font-weight: 500; line-height: 1.35; }

/* ---------- personalidade de cada tema ---------- */
body[data-theme=costa92] .panel, body[data-theme=costa92] .btn { border-width: 3px; box-shadow: 4px 4px 0 #000; }
body[data-theme=costa92] .title-text { letter-spacing: .04em; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; }

body[data-theme=neon86] .title-text { text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent); }
body[data-theme=neon86] #manDist, body[data-theme=neon86] .stats b, body[data-theme=neon86] #speedVal { font-family: 'Righteous', sans-serif; }

body[data-theme=metropole] .panel { border-width: 1px; }
body[data-theme=metropole] .title-text { font-weight: 700; text-transform: uppercase; }

body[data-theme=reino] .panel { border-width: 1px; outline: 1px solid rgba(201,164,92,.35); outline-offset: -7px; background: linear-gradient(rgba(24,19,14,.92), rgba(12,10,8,.92)); }
body[data-theme=reino] .title-text { text-transform: uppercase; letter-spacing: .12em; }
body[data-theme=reino] .dest-ring { display: none; }
body[data-theme=reino] .dest-core { inset: 4px; background: none; border: 0; box-shadow: none; }
body[data-theme=reino] .dest-core::before { content: "✕"; display: grid; place-items: center; height: 100%; font: 800 30px 'Cinzel', serif; color: #8b1a1a; text-shadow: 0 0 3px #efe3c6; }

body[data-theme=pixel] { font-size: 11px; }
body[data-theme=pixel] .panel, body[data-theme=pixel] .btn { border-width: 4px; box-shadow: 4px 4px 0 #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-theme=pixel] #map canvas { image-rendering: pixelated; }
body[data-theme=pixel] #speedo { border-radius: 0; }
body[data-theme=pixel] #manDist { font-size: 22px; }
body[data-theme=pixel] #manText, body[data-theme=pixel] #searchInput { font-size: 12px; line-height: 1.5; }
body[data-theme=pixel] .stats b { font-size: 18px; }
body[data-theme=pixel] #speedVal { font-size: 20px; }
body[data-theme=pixel] .dest-ring, body[data-theme=pixel] .dest-core, body[data-theme=pixel] .player-pulse { border-radius: 0; }
body[data-theme=pixel] #mission span { font-size: clamp(20px, 6vw, 48px); }

body[data-theme=cyber] .panel, body[data-theme=cyber] .btn {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
body[data-theme=cyber] #speedo { clip-path: none; }
body[data-theme=cyber] .title-text { text-transform: uppercase; text-shadow: 2px 0 #ff003c, -2px 0 #00f0ff; }

/* ---------- telas de carro (paisagem baixa) ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #bottom { left: 12px; right: auto; width: 380px; margin: 0; padding: 10px; }
  #navBanner, #topbar { max-width: 420px; }
  #speedo, body.has-route #speedo { left: auto; right: 84px; bottom: calc(var(--sab) + 12px); width: 76px; height: 76px; }
  #manIcon { width: 54px; height: 54px; }
  #manDist { font-size: 30px; }
  .stats b { font-size: 24px; }
  .btn { min-height: 48px; padding: 10px 14px; }
  #sideBtns { gap: 8px; }
  .icon-btn { width: 54px; height: 54px; }
}

@keyframes pulse { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ring { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes blink { 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(2.2); opacity: 0; } 70% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }