/* Brmici (🚗) — 3D vožnja u sumrak: neon-sunset paleta; sama igra se crta na
   canvas-u (brmici.js), CSS drži okvir/HUD/overlaye. Prefiks .br- */

:root {
    --text: #f4eeff;
    --text-dim: #a89ac4;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-bd: rgba(255, 255, 255, 0.13);
    --accent: #ff8a5c;
    --accent2: #ffd86b;
    --neon: #ff5e8a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* `hidden` mora da pobedi i display:flex elemente (overlay/hud/btn) */
[hidden] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: radial-gradient(ellipse at 50% -10%, #3a1a4f 0%, #1c0f33 45%, #0b0618 100%);
    overflow-x: hidden;
    overscroll-behavior: none;
}
body::before {
    content: '';
    position: fixed; inset: -20%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 22% 8%, rgba(255, 138, 92, 0.14), transparent 32%),
                radial-gradient(circle at 78% 8%, rgba(255, 94, 138, 0.12), transparent 32%),
                radial-gradient(circle at 50% 100%, rgba(255, 216, 107, 0.08), transparent 55%);
    filter: blur(30px);
}

.br-app, .br-overlay {
    /* bez iOS „selektuj tekst"/callout-a pri tapkanju kontrola i dijaloga (SEO blok ostaje selektabilan) */
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.br-app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}

/* ---------- Vrh ---------- */
.br-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.br-top__btns { display: flex; gap: 8px; }
.br-iconbtn {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    color: var(--text); background: var(--surface); border: 1px solid var(--surface-bd);
    border-radius: 14px; cursor: pointer; text-decoration: none;
    backdrop-filter: blur(8px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.br-iconbtn:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }

.br-title {
    margin: 0; text-align: center; font-size: 25px; font-weight: 900; letter-spacing: 0.5px;
    text-shadow: 0 2px 18px rgba(255, 138, 92, 0.45);
}

/* ---------- HUD ---------- */
.br-hud { display: flex; gap: 9px; }
.br-hud__box {
    flex: 1;
    display: flex; align-items: baseline; justify-content: center; gap: 5px;
    padding: 8px 10px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(40, 22, 62, 0.92), rgba(22, 12, 40, 0.92));
    border: 1px solid var(--surface-bd);
    backdrop-filter: blur(8px);
}
.br-hud__box--mid { border-color: rgba(255, 138, 92, 0.35); }
.br-hud__val { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.br-hud__lbl { font-size: 12px; color: var(--text-dim); font-weight: 700; }
/* .vasa-coin (SDK zlatnik) — usklađen sa pilom novčića gore, umesto 🪙 emojija */
.br-hud__coin { width: 17px; height: 17px; align-self: center; }

/* ---------- Put (canvas) ---------- */
.br-stage {
    position: relative;
    width: min(100%, calc(66vh * 0.667));   /* odnos 480:720 mora da stane u ekran */
    margin: 0 auto;
    aspect-ratio: 480 / 720;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07),
                0 0 34px rgba(255, 94, 138, 0.12);
    touch-action: none;      /* volan prevlačenjem ne sme da skroluje stranicu */
}
.br-stage.shake { animation: brShake 0.45s ease; }
@keyframes brShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 4px); }
    45% { transform: translate(5px, -4px); }
    70% { transform: translate(-4px, 2px); }
}
#brCanvas { display: block; width: 100%; height: 100%; }

/* Papučice (kočnica levo, gas/truba desno) — metalni obruč + ispupčena glossy „gazna" površina.
   Boja površine je var(--face). Bez iOS selekcije/callout-a. */
.br-horn, .br-brake, .br-gas {
    position: absolute; bottom: 14px; z-index: 5;
    width: 68px; height: 68px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; color: #fff;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
        var(--face, #555);
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.5),               /* pad senke */
        0 0 0 4px rgba(255, 255, 255, 0.12),         /* svetli obod */
        0 0 0 6px rgba(0, 0, 0, 0.4),                /* tamni metalni prsten */
        inset 0 3px 4px rgba(255, 255, 255, 0.45),   /* gornji sjaj (ispupčenje) */
        inset 0 -9px 15px rgba(0, 0, 0, 0.45);       /* donja senka */
    transition: transform 0.09s ease, filter 0.09s ease, box-shadow 0.09s ease;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    touch-action: none;
}
/* rebra po obodu (center čist za ikonu) — daju „pedal" teksturu */
.br-horn::after, .br-brake::after, .br-gas::after {
    content: ''; position: absolute; inset: 7px; border-radius: 50%; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 8px);
    -webkit-mask: radial-gradient(circle, transparent 45%, #000 48%, #000 93%, transparent 97%);
            mask: radial-gradient(circle, transparent 45%, #000 48%, #000 93%, transparent 97%);
    opacity: 0.55;
}
.br-horn > *, .br-brake > *, .br-gas > * { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.br-horn { right: 14px; color: #3a1e00; --face: radial-gradient(circle at 50% 36%, #ffe6a0, #ffb64d 56%, #d97e22); }
.br-brake { left: 14px; --face: radial-gradient(circle at 50% 36%, #ff9090, #e0384a 55%, #8f1a2a); }
/* Gas — samo u mobilnom (tilt) režimu */
.br-gas { display: none; right: 14px; --face: radial-gradient(circle at 50% 36%, #a6ffc4, #2fbf6b 55%, #157139); }
/* pritisak papučice: utisne se + jače insetne senke */
.br-horn:active, .br-brake:active, .br-gas:active,
.br-brake.on, .br-gas.on {
    transform: translateY(2px) scale(0.96); filter: brightness(1.06);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 0 6px rgba(0, 0, 0, 0.42),
        inset 0 4px 10px rgba(0, 0, 0, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Izlaz iz mobilnog režima (✕) — samo u tilt/fullscreen */
.br-exit {
    display: none; position: absolute; top: 10px; left: 10px; z-index: 9;
    width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center;
    color: #fff; background: rgba(10, 5, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* „Okreni telefon" podsetnik (tilt režim u portretu) */
.br-rotate {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(8, 4, 18, 0.92); color: var(--text); text-align: center; padding: 24px;
    font-size: 16px; font-weight: 800;
}
.br-rotate__i { font-size: 54px; animation: brRotate 2s ease-in-out infinite; }
@keyframes brRotate { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

/* „Vozi nagibom" dugme — zeleni akcenat da se razlikuje od običnog Vozi */
.br-btn--tilt { background: linear-gradient(135deg, #6dffa0, #2fb968); color: #063018; }

/* ---------- Mobilni landscape/fullscreen režim (html.br-mobile) ---------- */
/* 100dvh = dinamički viewport → puni vidljivi prostor i na iOS Safariju (bez trake ispod chrome-a) */
html.br-mobile, html.br-mobile body { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
html.br-mobile .br-app { max-width: none; min-height: 100vh; min-height: 100dvh; padding: 0; gap: 0; }
html.br-mobile .br-top, html.br-mobile .br-title, html.br-mobile .br-adbanner, html.br-mobile .seo { display: none !important; }
html.br-mobile .br-stage {
    position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; aspect-ratio: auto; border-radius: 0;
}
/* HUD kao proziran overlay na vrhu */
html.br-mobile .br-hud {
    position: fixed; z-index: 8; width: auto; left: 50%; transform: translateX(-50%);
    top: calc(6px + env(safe-area-inset-top)); gap: 8px;
}
html.br-mobile .br-hud__box { background: rgba(10, 5, 22, 0.5); padding: 6px 12px; }
html.br-mobile .br-hud__val { font-size: 18px; }
/* dugmad krupnija i u „bezbednim" zonama palca */
html.br-mobile .br-gas { display: flex; }
html.br-mobile .br-gas, html.br-mobile .br-brake {
    width: 82px; height: 82px;
    bottom: calc(18px + env(safe-area-inset-bottom));
}
html.br-mobile .br-gas { right: calc(20px + env(safe-area-inset-right)); }
html.br-mobile .br-brake { left: calc(20px + env(safe-area-inset-left)); }
html.br-mobile .br-horn {
    width: 58px; height: 58px; font-size: 25px;
    right: calc(116px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom));
}
/* ✕ iznad „kraj vožnje" overlaya (z-index 60) da izlaz uvek radi */
html.br-mobile .br-exit { display: flex; z-index: 62; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }

.br-adbanner {
    min-height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 12.5px;
    background: var(--surface); border: 1px dashed var(--surface-bd);
}

/* ---------- Overlays / kartice ---------- */
.br-overlay {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(10, 5, 22, 0.74);
    backdrop-filter: blur(7px);
}
.br-card {
    width: min(92vw, 380px);
    display: flex; flex-direction: column; gap: 11px;
    padding: 24px 20px;
    border-radius: 22px; text-align: center;
    background: linear-gradient(180deg, rgba(45, 24, 70, 0.97), rgba(22, 12, 42, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 44px rgba(255, 138, 92, 0.1);
}
.br-card__art { font-size: 46px; line-height: 1; }
.br-card h2 { margin: 2px 0 0; font-size: 24px; font-weight: 900; }
.br-card__sub { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.br-best { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--accent2); }
.br-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); }

.br-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 16px; border-radius: 15px;
    font-size: 16px; font-weight: 800; color: #2a1200; cursor: pointer;
    background: linear-gradient(135deg, #ffd86b, #ff8a5c);
    border: none;
    box-shadow: 0 8px 22px rgba(255, 138, 92, 0.35);
    transition: transform 0.14s ease, filter 0.14s ease;
}
.br-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.br-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.br-btn small { font-weight: 600; opacity: 0.75; }

.br-win { color: #ffd86b; text-shadow: 0 0 20px rgba(255, 216, 107, 0.5); }

@media (max-width: 400px) {
    .br-title { font-size: 21px; }
    .br-hud__val { font-size: 18px; }
}