/* Vazdušni hokej (🏒) — ledeni neon sto; sama igra se crta na canvas-u
   (airhockey.js), CSS drži okvir/HUD/overlaye. Prefiks .ah- */

:root {
    --text: #eaf6ff;
    --text-dim: #93aac4;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-bd: rgba(255, 255, 255, 0.13);
    --accent: #4fd8ff;
    --accent2: #ff6b8b;
    --gold: #ffd86b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
/* `hidden` atribut mora da pobedi i elemente sa display:flex (overlay/score/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%, #123457 0%, #0a1a30 45%, #050b16 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 20% 8%, rgba(79, 216, 255, 0.14), transparent 32%),
                radial-gradient(circle at 80% 8%, rgba(120, 160, 255, 0.13), transparent 32%),
                radial-gradient(circle at 50% 100%, rgba(79, 216, 255, 0.10), transparent 55%);
    filter: blur(30px);
}

.ah-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 ---------- */
.ah-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ah-top__btns { display: flex; gap: 8px; }
.ah-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;
}
.ah-iconbtn:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }

.ah-title {
    margin: 0; text-align: center; font-size: 25px; font-weight: 900; letter-spacing: 0.5px;
    text-shadow: 0 2px 18px rgba(79, 216, 255, 0.4);
}

/* ---------- Semafor + sat ---------- */
.ah-score {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(14, 32, 56, 0.9), rgba(8, 18, 34, 0.9));
    border: 1px solid var(--surface-bd);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.ah-score::before {
    content: '';
    position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
    opacity: 0.8;
}
.ah-score__name {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-score__name--r { text-align: right; }
.ah-score__mid { display: flex; align-items: center; gap: 9px; font-weight: 900; }
.ah-score__num {
    font-size: 28px; min-width: 34px; text-align: center;
    padding: 0 6px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ah-score__clock {
    font-size: 16px; font-variant-numeric: tabular-nums; color: var(--gold);
    padding: 3px 8px; border-radius: 9px;
    background: rgba(255, 216, 107, 0.08);
    border: 1px solid rgba(255, 216, 107, 0.25);
}
.ah-score__clock.low { color: #ff8d8d; border-color: rgba(255, 120, 120, 0.5); animation: ahBlink 1s steps(2) infinite; }
.ah-score__clock.sd { color: var(--gold); animation: ahBlink 0.8s steps(2) infinite; }
@keyframes ahBlink { 50% { opacity: 0.45; } }

/* ---------- Status ---------- */
.ah-status {
    min-height: 40px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 8px 14px; border-radius: 14px;
    font-size: 14.5px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--surface-bd);
    backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ah-status--goal { background: rgba(79, 216, 255, 0.14); border-color: rgba(79, 216, 255, 0.6); color: #a8ecff; text-shadow: 0 0 14px rgba(79, 216, 255, 0.5); }
.ah-status--bad { background: rgba(255, 90, 110, 0.13); border-color: rgba(255, 90, 110, 0.55); color: #ffa9b6; }
.ah-status--warn { border-color: rgba(255, 216, 107, 0.5); color: #ffe9ad; }

/* ---------- Sto (canvas) ---------- */
.ah-stage {
    position: relative;
    /* širina se steže da ceo sto (odnos 480:800) stane u visinu ekrana */
    width: min(100%, calc(62vh * 0.6));
    margin: 0 auto;
    aspect-ratio: 480 / 800;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07),
                0 0 34px rgba(79, 216, 255, 0.12);
    touch-action: none;     /* prevlačenje malja ne sme da skroluje stranicu */
}
.ah-stage.shake { animation: ahShake 0.4s ease; }
@keyframes ahShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 3px); }
    50% { transform: translate(4px, -3px); }
    75% { transform: translate(-3px, 2px); }
}
#ahCanvas { display: block; width: 100%; height: 100%; cursor: none; }

.ah-back {
    align-self: center;
    background: none; border: none; color: var(--text-dim);
    font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 7px 12px;
    text-decoration: underline; text-underline-offset: 3px;
}
.ah-back:hover { color: var(--text); }

.ah-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 ---------- */
.ah-overlay {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(4, 10, 20, 0.72);
    backdrop-filter: blur(7px);
}
.ah-card {
    width: min(92vw, 380px);
    display: flex; flex-direction: column; gap: 11px;
    padding: 22px 20px;
    border-radius: 22px; text-align: center;
    background: linear-gradient(180deg, rgba(18, 38, 64, 0.97), rgba(9, 20, 38, 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(79, 216, 255, 0.08);
}
.ah-card h2 { margin: 2px 0 0; font-size: 22px; font-weight: 900; }
.ah-card__sub { margin: 0; color: var(--text-dim); font-size: 13.5px; }

.ah-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px 16px; border-radius: 15px;
    font-size: 15.5px; font-weight: 800; color: #04121f; cursor: pointer;
    background: linear-gradient(135deg, #4fd8ff, #2f9dff);
    border: none;
    box-shadow: 0 8px 22px rgba(63, 170, 255, 0.35);
    transition: transform 0.14s ease, filter 0.14s ease;
}
.ah-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ah-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.ah-btn--ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--surface-bd);
    box-shadow: none;
}
.ah-btn small { font-weight: 600; opacity: 0.75; }

.ah-input {
    width: 100%; padding: 12px 13px; border-radius: 13px;
    font-size: 15px; font-weight: 700; text-align: center; color: var(--text);
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--surface-bd);
    outline: none;
}
.ah-input:focus { border-color: rgba(79, 216, 255, 0.6); }
.ah-wager { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 700; }

.ah-room__code {
    font-size: 38px; font-weight: 900; letter-spacing: 10px;
    color: var(--accent); text-shadow: 0 0 22px rgba(79, 216, 255, 0.5);
}
.ah-room__wager { margin: 0; color: var(--gold); font-weight: 800; font-size: 14px; }
.ah-room__btns { display: flex; gap: 9px; }
.ah-room__btns .ah-btn { flex: 1; }
.ah-wait { margin: 2px 0 0; color: var(--text-dim); font-size: 13.5px; animation: ahPulse 1.6s ease-in-out infinite; }
@keyframes ahPulse { 50% { opacity: 0.45; } }

.ah-search__spin { font-size: 44px; animation: ahSpin 1.6s linear infinite; }
@keyframes ahSpin { to { transform: rotate(360deg); } }

.ah-win { color: #7dffc9; text-shadow: 0 0 20px rgba(60, 255, 170, 0.5); }
.ah-lose { color: #ff8d9d; }
.ah-draw { color: var(--gold); }
.ah-rematch__msg { margin: 0; font-size: 13px; color: var(--gold); font-weight: 700; }

/* Konfete (pobeda) */
.ah-conf {
    position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px;
    animation: ahFall linear forwards;
}
@keyframes ahFall {
    to { transform: translateY(105vh) rotate(720deg); opacity: 0.7; }
}

@media (max-width: 400px) {
    .ah-title { font-size: 21px; }
    .ah-score__num { font-size: 24px; }
}