/* Dok se Vue ne montira, sirovi sablon sa vitičastim zagradama ne smije bljesnuti
   na ekranu, a najmanje na projektoru pred publikom. */
[v-cloak]{display:none !important}  /* jace od Tailwind klase .flex, koja se ucitava kasnije */

/* Drugi uvjet, samo za projektor. Tailwind ovdje nije stylesheet nego skripta koja svoj
   CSS ubaci nakon sto se DOM raspase, pa se zna vidjeti jedan frame bez njegovih klasa.
   Na velikom ekranu pred publikom to je najskuplje mjesto za treptaj (D55, D59).
   Ekran igraca ovo NEMA namjerno: cekanje na potpuno ucitavanje bi usporilo formu za
   ulazak na telefonu, a to kosta vise od treptaja. */
html.boot #app{visibility:hidden}

:root { color-scheme: dark; }  /* stranica je vec tamna: bez ovoga je pregledac na telefonu sam zatamnjuje jos jednom */

/* EventQuiz — zajednički stil igre (/j/ igrač + /tv/ veliki ekran), identitet po D23/D28. */

* { box-sizing: border-box; }

body {
    background: #141C48;
    color: white;
    font-family: 'Inter', sans-serif;
    height: 100dvh;
    overflow: hidden;
    touch-action: manipulation;
}

@supports not (height: 100dvh) {
    body { height: 100vh; }
}

h1, h2, h3, .font-display { font-family: 'Poppins', sans-serif; }

/* Suptilni gornji sjaj u brend ljubičastoj */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 300px;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(124, 108, 248, 0.16) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.grad-text {
    background: linear-gradient(100deg, #A855F7, #6366F1 55%, #22D3EE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Samsung Internet u tamnom rezimu gradijent u tekstu zatamni skoro do pozadine (D191). Klasu sb stavlja
   skripta u zaglavlju stranice igraca, pa projektor ostaje sa gradijentom. */
.sb .grad-text {
    background: none;
    -webkit-text-fill-color: #C4B5FD;
}

/* Diskretni brend potpis (TV ugao) — logo je ujedno uputa za ulaz */
.brand-tag {
    position: fixed;
    bottom: 14px; right: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    z-index: 30;
}
.brand-tag b { color: rgba(255, 255, 255, 0.8); }

/* Player header */
.player-bar {
    background: rgba(14, 18, 53, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Answer buttons — boje odgovora su funkcionalne (A/B/C/D), ostaju */
.opt-btn {
    border-radius: 14px;
    padding: 18px 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.12s, border-color 0.15s;
    position: relative;
    overflow: hidden;
}
.opt-btn:active { transform: scale(0.97); }
.opt-btn.selected { border-color: white; transform: scale(0.97); }
.opt-btn:disabled { cursor: default; }

.opt-A { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); color: #fca5a5; }
.opt-B { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); color: #93c5fd; }
.opt-C { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.25); color: #fde047; }
.opt-D { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.25); color: #86efac; }
.opt-A:hover:not(:disabled) { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.5); }
.opt-B:hover:not(:disabled) { background: rgba(59, 130, 246, 0.20); border-color: rgba(59, 130, 246, 0.5); }
.opt-C:hover:not(:disabled) { background: rgba(234, 179, 8, 0.20); border-color: rgba(234, 179, 8, 0.5); }
.opt-D:hover:not(:disabled) { background: rgba(34, 197, 94, 0.20); border-color: rgba(34, 197, 94, 0.5); }

/* Timer bar */
.timer-track { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.timer-fill { height: 100%; border-radius: 2px; transition: width 1s linear, background-color 1s; }

/* Correct answer flash */
@keyframes correctFlash {
    0% { background: rgba(34, 197, 94, 0.0); }
    30% { background: rgba(34, 197, 94, 0.15); }
    100% { background: rgba(34, 197, 94, 0.0); }
}
.correct-flash { animation: correctFlash 0.8s ease-out; }

/* Leaderboard row slide in */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}
.slide-in { animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Winners podium ── */
@keyframes podiumRise {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}
.podium-bar { transform-origin: bottom; }

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}
.crown-bounce { animation: crownBounce 1.8s ease-in-out infinite; display: inline-block; }

@keyframes winnerPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(234, 179, 8, 0.35), 0 0 40px rgba(234, 179, 8, 0.10); }
    50% { box-shadow: 0 0 32px rgba(234, 179, 8, 0.60), 0 0 70px rgba(234, 179, 8, 0.20); }
}
.winner-glow { animation: winnerPulse 2s ease-in-out infinite; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
.confetti-piece { position: absolute; border-radius: 3px; animation: confettiFall linear both; pointer-events: none; }

/* Streak badge */
.streak-badge {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fb923c;
}

/* Result card */
.result-card { border-radius: 16px; padding: 28px; text-align: center; }
.result-correct { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); }
.result-wrong { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); }
.result-timeout { background: rgba(234, 179, 8, 0.08); border: 1px solid rgba(234, 179, 8, 0.2); }

/* Submit + join dugmad. Puna indigo, ne gradijent: bijelo na gradijentu pada na
   kontrastu cijelom duzinom (ljubicasti kraj 3.96, sredina 4.47, cijan kraj 1.81,
   prag je 4.5), a ovo je dugme koje igrac pritiska na telefonu u zamracenoj sali.
   #4F46E5 daje 6.29, ista boja i isti razlog kao na landingu (D45). */
.btn-submit {
    background: #4F46E5;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-submit:hover:not(:disabled) { background: #4338CA; }

/* Join forma (/j/ bez aktivne prijave) */
.join-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 380px;
}
.join-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 13px 16px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}
.join-field:focus { border-color: rgba(124, 108, 248, 0.7); }
.join-field.pin-field {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}
.join-field::placeholder { color: rgba(255, 255, 255, 0.25); letter-spacing: normal; }

/* Mobile-safe bottom padding */
.options-wrap { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

@media (max-height: 700px) {
    .opt-btn { padding: 12px 12px; font-size: 0.875rem; }
    .question-box { padding: 16px !important; }
    .q-header { padding-top: 8px !important; padding-bottom: 4px !important; }
}

/* TV, ekran čekanja: brend ide u gornje uglove (D48). Traka je fiksna da ne bi
   gurala QR, PIN i broj igrača prema dnu ekrana; sadržaj se centrira u ostatku. */
.tv-brandbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: clamp(8px, 1.8vh, 24px) 38px;
    pointer-events: none;
    z-index: 20;
}
.tv-brandbar img { max-height: clamp(34px, 7.5vh, 68px); max-width: 280px; object-fit: contain; }
.tv-brandname {
    margin-left: auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3.6vh, 38px);
    line-height: 1.15;
    text-align: right;
    max-width: 46vw;
}

/* TV, ekran čekanja: mjere prate VISINU ekrana. Na projektoru od 720 px je prije
   ispadao donji dio, jer su QR, PIN i pilule bili u fiksnim pikselima (D48). */
.tv-waiting { padding: clamp(10px, 2vh, 32px); }
.tv-scan { margin-bottom: clamp(8px, 1.8vh, 24px); }
.tv-qr { padding: clamp(8px, 1.4vh, 16px); margin-bottom: clamp(10px, 2.6vh, 32px); }
.tv-qr canvas, .tv-qr img { width: clamp(120px, 24vh, 200px) !important; height: auto !important; }
.tv-pinlabel { margin-bottom: clamp(4px, 1vh, 12px); }
.tv-pin { font-size: clamp(56px, 15vh, 150px); line-height: 1; margin-bottom: clamp(10px, 2.6vh, 32px); }
.tv-foot { gap: clamp(10px, 2.4vh, 32px); }

/* Anketa: raspodjela odgovora na velikom ekranu (D58). Trake rastu uzivo, pa je
   prijelaz na sirini namjeran: oko prati promjenu bez da itko objasnjava. */
.sv-list{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);max-width:1100px;margin-inline:auto;width:100%}
.sv-row{display:grid;grid-template-columns:minmax(120px,22%) 1fr minmax(96px,auto);align-items:center;gap:14px}
.sv-label{font-weight:600;font-size:clamp(15px,2.2vh,22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-track{height:clamp(18px,3.2vh,34px);background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.sv-fill{height:100%;border-radius:99px;transition:width .45s ease}
.sv-num{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(14px,2vh,20px);color:rgba(255,255,255,.62);text-align:right;white-space:nowrap}

/* Slike u pitanjima (D132), samo projektor. Slika pitanja popunjava prostor izmedju
   teksta i odgovora i uvijek staje cijela (object-fit), ma kakav bio njen omjer. */
.q-media-text { flex: none; max-width: 100%; font-size: clamp(22px, 3.4vh, 44px); }
.q-media-img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain;
  /* Razmak do odgovora raste s visinom ekrana: bez njega je donja ivica slike stajala
     8 px iznad odgovora i izgledala zalijepljeno (D147) */
  margin-bottom: clamp(14px, 3vh, 32px); }
.res-img { flex: 0 1 auto; min-height: 0; max-width: min(90vw, 1100px); max-height: 34vh; object-fit: contain; } /* skuplja se prva kad ponestane mjesta (D134) */

/* Kako je sala odgovorila, poslije pitanja (D134). Traka je ista kao u anketi, a tacan
   odgovor je istaknut zelenom. Tekst opcije smije u dva reda, jer se po njemu prepoznaje. */
.rs-row { display: grid; grid-template-columns: minmax(160px, 40%) 1fr minmax(64px, auto); align-items: center;
          gap: 14px; padding: 6px 12px; border-radius: 14px; border: 1px solid transparent; }
.rs-row.rs-ok { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); }
.rs-label { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: clamp(15px, 2.2vh, 22px); }
.rs-letter { flex: none; font-family: 'Poppins', sans-serif; font-weight: 800; opacity: .5; }
.rs-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.rs-check { flex: none; font-weight: 800; color: #4ade80; }
.rs-ok .rs-letter, .rs-ok .rs-text { color: #4ade80; opacity: 1; }
.rs-fill { background: rgba(255,255,255,.28); }
.rs-ok .rs-fill { background: #22c55e; }
.rs-num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(16px, 2.4vh, 26px); color: rgba(255,255,255,.7); text-align: right; white-space: nowrap; }
.rs-ok .rs-num { color: #4ade80; }

/* Srecni dobitnik (D136). Stoji preko svega, jer se izvlaci u bilo kojoj fazi. Ime se
   vrti pa stane; velicina prati visinu platna, kao i ostalo na projektoru. */
.draw-wrap { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 20px);
             background: rgba(10, 14, 40, .93); backdrop-filter: blur(6px); text-align: center; padding: 4vh 4vw; }
.draw-label { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
              font-size: clamp(14px, 2.2vh, 24px); color: rgba(255,255,255,.45); }
.draw-name { font-family: 'Poppins', sans-serif; font-weight: 900; line-height: 1.05; max-width: 92vw;
             font-size: clamp(40px, 12vh, 150px); overflow-wrap: anywhere; }
.draw-spin { color: rgba(255,255,255,.55); }
.draw-win { color: #4ade80; animation: drawPop .5s ease-out; }
.draw-sub { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(16px, 2.6vh, 30px); color: rgba(255,255,255,.55); }
@keyframes drawPop { 0% { transform: scale(.7); opacity: 0 } 60% { transform: scale(1.06) } 100% { transform: scale(1); opacity: 1 } }

/* Najblizi broj (D139): broj je glavni junak ekrana, pa je krupan kao i dobitnik izvlacenja */
.num-answer { font-size: clamp(48px, 14vh, 170px); line-height: 1; color: #4ade80; }
.num-list { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); margin-top: clamp(14px, 3vh, 34px); }
.num-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
           padding: clamp(6px, 1.2vh, 12px) clamp(12px, 2vw, 22px); border-radius: 14px;
           background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.num-rank { font-family: 'Poppins', sans-serif; font-weight: 800; color: rgba(255,255,255,.35); font-size: clamp(16px, 2.4vh, 26px); }
.num-nick { text-align: left; font-weight: 600; font-size: clamp(16px, 2.6vh, 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num-guess { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(16px, 2.6vh, 30px); color: rgba(255,255,255,.7); }
/* Polje za broj na telefonu */
.num-input { width: 100%; padding: 16px; border-radius: 14px; margin-bottom: 12px; text-align: center;
             background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff;
             font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.6rem; outline: none; }
.num-input:focus { border-color: rgba(129,140,248,.7); background: rgba(129,140,248,.06); }

/* Ljestvica izmedju pitanja (D148). Naslov i deset redova po 74 px traze oko 980 px visine,
   pa su na projektoru 1280x800 i 1280x720 zadnji redovi padali ispod ivice. Mjere sada prate
   visinu ekrana, kao lobi (D48); gornja granica svake je stara mjera i dostize se oko 1067 px,
   pa na 1080 i vise ljestvica izgleda kao prije. Donje granice drze deset redova do oko 560 px. */
.lb-wrap { padding: clamp(12px, 2.25vh, 24px) 24px; }
.lb-title { font-size: clamp(28px, 4.5vh, 48px); line-height: 1; margin-bottom: clamp(10px, 3vh, 32px); }
.lb-list { display: flex; flex-direction: column; gap: clamp(6px, 1.15vh, 12px); }
.lb-row { flex: none; padding: clamp(6px, 1.5vh, 16px) 20px; }
.lb-rank { width: clamp(24px, 3.75vh, 40px); height: clamp(24px, 3.75vh, 40px); font-size: clamp(13px, 1.5vh, 16px); }
.lb-name { font-size: clamp(16px, 1.9vh, 20px); line-height: 1.4; }
.lb-score { font-size: clamp(18px, 2.25vh, 24px); line-height: 1.35; }
/* Runde (D160): naziv runde krupno, i bodovi runde uz ukupne na ljestvici */
.round-title { font-size: clamp(40px, 11vh, 140px); line-height: 1.05; max-width: 90vw; overflow-wrap: anywhere; }
.lb-round { font-size: 0.62em; color: #86efac; font-weight: 600; margin-right: 0.7em; }

/* Live Q&A (D155): izabrano pitanje preko lobija, van lanca faza kao izvlacenje (D146) */
.qa-spot-wrap { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 3vh; padding: 6vh 8vw; background: radial-gradient(ellipse at 50% 0%, #232a66, #141C48 70%); text-align: center; }
.qa-spot-label { color: rgba(255,255,255,.45); font: 600 clamp(14px, 2.2vh, 22px) 'Poppins', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.qa-spot-text { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.25; max-width: 1400px; overflow-wrap: anywhere; }
.qa-spot-by { color: #a5abdf; font: 600 clamp(16px, 2.6vh, 28px) 'Poppins', sans-serif; }

/* Kucani odgovor (D159): tacan odgovor posle pitanja, i najduzi (60 znakova) staje na 720 px */
.typed-answer { font-size: clamp(40px, 9vh, 120px); line-height: 1.1; color: #4ade80; max-width: 90vw; margin: 0 auto; overflow-wrap: anywhere; }