/* Prévia do Kx FiveM: a janela mantém a proporção 1120×720 e escala para caber. */
:root { color-scheme: dark; --bg: #050507; --mut: #8b8b94; --accent: #ff2540; --hover: rgba(255, 255, 255, .055); --ring: rgba(255, 37, 64, .55); }
body[data-theme="light"] { --hover: rgba(10, 10, 14, .05); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: #f4f4f6; font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }

.stage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px 10px; }
.window { position: relative; aspect-ratio: 1120 / 720; width: min(100%, calc((100vh - 52px) * 1120 / 720)); border-radius: 12px; overflow: hidden;
  background: #111113; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px -20px rgba(0, 0, 0, .9); }
body[data-theme="light"] .window { background: #f4f4f5; }

.screen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.screen.next { opacity: 0; transition: opacity .16s ease-out; pointer-events: none; }
.screen.next.show { opacity: 1; }
.screen.next.instant { transition: none; }

.hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color .12s ease-out; }
.hotspot:hover { background: var(--hover); }
.hotspot:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.hotspot.round { border-radius: 999px; }

.hint { margin: 0; color: var(--mut); font-size: 11px; letter-spacing: .02em; text-align: center; transition: opacity .3s ease-out; }
.hint.done { opacity: 0; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-height: 420px) { .hint { display: none; } .window { width: min(100%, calc((100vh - 24px) * 1120 / 720)); } }
@media (prefers-reduced-motion: reduce) { .screen.next, .hotspot, .hint { transition: none; } }