/* Snake (igra #2) — sopstveni stil; platformske widgete stilizuje SDK (.vasa-*). */
:root {
    /* varijable koje koristi SDK pila (.vasa-coins) */
    --text: #f3eefe;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-bd: rgba(255, 255, 255, 0.14);
    --bg2: #120a26;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: #0a0616;
    -webkit-tap-highlight-color: transparent;
    /* SEO blok ispod igre: vertikalni skrol dozvoljen; touch-action:none je na .sn-app. */
    overflow-x: hidden;
    overscroll-behavior: none;
}

body::before {
    content: '';
    position: fixed;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(circle at 28% 26%, rgba(66, 230, 149, 0.45), transparent 42%),
               radial-gradient(circle at 74% 64%, rgba(124, 77, 255, 0.4), transparent 42%),
               radial-gradient(circle at 50% 96%, rgba(59, 178, 184, 0.35), transparent 45%);
    filter: blur(48px);
}

.sn-app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    touch-action: none;   /* swipe kontrole ne smeju da skroluju stranicu */
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));
}

/* ---------- Top bar ---------- */
.sn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sn-top__btns { display: flex; align-items: center; gap: 8px; }

.sn-iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text);
    border: 1px solid var(--surface-bd);
    border-radius: 14px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

/* ---------- Score bar ---------- */
.sn-scorebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sn-title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #42e695, #3bb2b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sn-score { display: flex; flex-direction: column; min-width: 64px; }
.sn-score--right { text-align: right; }
.sn-score__l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(243, 238, 254, 0.5); }
.sn-score__v { font-size: 24px; font-weight: 800; color: #fff; }

/* ---------- Board ---------- */
.sn-boardwrap { display: flex; justify-content: center; position: relative; }
.sn-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #0a0616;
    background: linear-gradient(90deg, #42e695, #5ef0a8);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: nowrap;
    animation: snHintPulse 1.3s ease-in-out infinite;
}
.sn-hint[hidden] { display: none; }
@keyframes snHintPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.06); }
}
.sn-board {
    width: min(92vw, 448px);
    aspect-ratio: 1;
    border-radius: 18px;
    border: 1px solid var(--surface-bd);
    background: rgba(0, 0, 0, 0.28);
    touch-action: none;
}

/* ---------- D-pad (mobilna kontrola) ---------- */
.sn-dpad { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.sn-dpad__mid { display: flex; gap: 64px; }
.sn-dbtn {
    width: 64px;
    height: 52px;
    font-size: 20px;
    color: var(--text);
    border: 1px solid var(--surface-bd);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}
.sn-dbtn:active { background: rgba(66, 230, 149, 0.25); }

/* ---------- Reklamni baner (placeholder) ---------- */
.sn-adbanner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    height: 56px;
    margin: 4px auto 0;
    border-radius: 14px;
    border: 1px dashed var(--surface-bd);
    background: var(--surface);
    color: rgba(243, 238, 254, 0.5);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---------- Game over ---------- */
.sn-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 3, 12, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
}
.sn-overlay[hidden] { display: none; }

.sn-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 40px;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(160deg, rgba(28, 60, 50, 0.96), rgba(14, 26, 30, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
}
.sn-card h2 { margin: 0 0 4px; font-size: 28px; font-weight: 900; letter-spacing: 1px; color: #5ef0a8; }
.sn-card__score { font-size: 52px; font-weight: 900; color: #ffd86b; line-height: 1; }
.sn-card__best { margin: 2px 0 16px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.sn-card__best span:last-child { color: #ffd86b; font-weight: 700; }

.sn-btn {
    width: 100%;
    padding: 13px 22px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(135deg, #42e695, #3bb2b8);
}
.sn-btn--big { box-shadow: 0 8px 22px rgba(66, 230, 149, 0.4); }
.sn-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); }
.sn-btn small { font-weight: 600; opacity: 0.85; }