/* ============================================================================
   TEMA "ARENA TURNAMEN" — Cerdas Cermat OKAGAME
   Satu berkas dipakai bersama oleh index / daftar / join / screen.

   KENAPA BEGINI:
   - Sasaran usia SD–SMA. Bahasa rupa yang dipilih adalah PAPAN SKOR STADION:
     huruf kondensat tebal, angka besar, warna tim, kontras tinggi. Remaja
     membacanya sebagai "kompetisi", bukan "pelajaran", tapi tetap berwibawa
     di mata guru — budaya lomba sudah lazim di sekolah.
   - Font DIINANGKAN SENDIRI (public/fonts). JANGAN pernah menggantinya dengan
     tautan Google Fonts: halaman ini dibuka MURID, dan tautan pihak ketiga
     akan mengirim IP anak di bawah umur ke server lain. Itu melanggar janji
     "tanpa data siswa" yang menopang seluruh posisi acara ini.
   - Tema tunggal (gelap) dan disengaja — bukan kelalaian. Karena itu semua
     warna ditulis eksplisit agar halaman tetap utuh di peramban mode terang.

   PAGAR YANG TIDAK BOLEH DILANGGAR SAAT MENYUNTING:
   1. Terbaca dari bangku belakang aula (proyektor): kontras tinggi, tak ada
      huruf tipis pada teks soal.
   2. Pilihan A/B/C/D tidak pernah dibedakan lewat WARNA SAJA — huruf penanda
      wajib ada (ada murid buta warna).
   3. Tombol bel tidak boleh diperlambat animasi apa pun.
   4. prefers-reduced-motion dihormati — kilatan di aula gelap berisiko bagi
      murid fotosensitif.
   ========================================================================= */

/* ---------- huruf: diinangkan sendiri, tanpa permintaan ke pihak ketiga ---- */
/* Anton, Barlow, Barlow Condensed — SIL Open Font License 1.1 (lihat fonts/OFL.txt) */
@font-face {
    font-family: 'Anton';
    src: url('/fonts/anton-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/barlowcondensed-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/barlow-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/barlow-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

:root {
    color-scheme: dark;

    /* dasar: stadion malam di bawah lampu sorot */
    --ink-900: #070A11;
    --ink-800: #0F1420;
    --ink-700: #171E2C;
    --ink-600: #212B3C;
    --line:    #2E3A4D;
    --line-soft: rgba(255,255,255,.09);

    /* teks */
    --chalk:   #F3F6FB;
    --chalk-2: #A4B1C4;
    --chalk-3: #6F7D91;

    /* aksen: cahaya lampu sorot & piala. Sengaja EMAS, bukan merah/oranye,
       supaya tidak bertabrakan dengan merah "salah" bagi murid buta warna. */
    --gold:      #FFC53D;
    --gold-deep: #D99A12;
    --gold-ink:  #2A1D00;
    --flare:     #FF7A2F;   /* hanya untuk garis/gradasi, TIDAK pernah semantik */

    /* semantik — terpisah dari aksen, selalu didampingi lambang/teks */
    --go: #2ED573;
    --no: #F2415A;

    /* warna pilihan jawaban (selalu berpasangan dengan huruf A/B/C/D) */
    --o0: #F2415A;
    --o1: #2E8BFF;
    --o2: #F5A524;
    --o3: #2ED573;

    /* huruf */
    --f-display: 'Anton', 'Arial Narrow', Impact, system-ui, sans-serif;
    --f-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-mono: ui-monospace, Menlo, Consolas, monospace;

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ink-800);
    color: var(--chalk);
    font-family: var(--f-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------- suara tipografi ---------- */
.display, h1, .h-display {
    font-family: var(--f-display);
    font-weight: 400;              /* Anton hanya punya satu berat */
    letter-spacing: .01em;
    line-height: 1.04;
    text-transform: uppercase;
    text-wrap: balance;
}
h2, h3 {
    font-family: var(--f-cond);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.15;
    text-wrap: balance;
}

/* label kecil huruf besar berjarak lebar — nada papan pengumuman stadion */
.eyebrow, .brand, .mark {
    font-family: var(--f-cond);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .17em;
}

/* semua angka yang berubah harus tabular agar tidak "bergoyang" saat menghitung */
.num, .score, [class*="timer"], #qTimer, #sTimer, #cd, #cdNum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- motif arena: pita chevron (murni CSS, tanpa gambar) ---------- */
.chevrons {
    background-image: repeating-linear-gradient(
        -60deg,
        rgba(255,197,61,.16) 0 10px,
        transparent 10px 22px
    );
}
/* garis lampu sorot tipis di puncak panel */
.floodline {
    background-image: linear-gradient(90deg,
        transparent, var(--gold) 22%, var(--flare) 50%, var(--gold) 78%, transparent);
}

/* ---------- tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; font-size: 1.05rem; text-decoration: none;
    padding: .8rem 1.6rem; border: 0; border-radius: var(--r); cursor: pointer;
    transition: transform .1s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn.primary {
    background: var(--gold); color: var(--gold-ink);
    box-shadow: 0 4px 0 var(--gold-deep);
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.primary:active { box-shadow: 0 1px 0 var(--gold-deep); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 4px 0 var(--gold-deep); }
.btn.ghost {
    background: rgba(255,255,255,.07); color: var(--chalk);
    border: 1px solid var(--line); box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn.ghost:hover { background: rgba(255,255,255,.13); }
.btn.ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* fokus papan ketik harus selalu terlihat — dipakai guru & murid berkebutuhan khusus */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- panel / kartu: "lempengan papan skor" dengan rel warna ---------- */
.card {
    background: var(--ink-700);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.3rem;
    position: relative;
    overflow: hidden;
}
/* rel tipis di tepi atas — penanda visual khas tema ini */
.card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--flare) 60%, transparent);
    opacity: .55;
}

/* ---------- isian formulir ---------- */
input, select, textarea {
    font-family: var(--f-body); font-size: 1rem;
    width: 100%; padding: .78rem .9rem;
    border-radius: var(--r); border: 1px solid var(--line);
    background: var(--ink-900); color: var(--chalk);
}
input::placeholder { color: var(--chalk-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
label { display: block; font-family: var(--f-cond); font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
        color: var(--chalk-2); margin: 1rem 0 .35rem; }
label .req { color: var(--no); }

/* ---------- pilihan jawaban (join + screen memakai kelas yang sama: o0..o3) --
   Warna SELALU didampingi huruf A/B/C/D. Jangan pernah hapus hurufnya. */
.opt.o0, .sopt.o0 { background: var(--o0); }
.opt.o1, .sopt.o1 { background: var(--o1); }
.opt.o2, .sopt.o2 { background: var(--o2); color: #241900; }
.opt.o3, .sopt.o3 { background: var(--o3); color: #04240F; }

/* ---------- baris klasemen ---------- */
.rank-rail { border-left: 4px solid var(--line); }
.top1 { --rail: var(--gold); }
.top2 { --rail: #C8D2E0; }
.top3 { --rail: #CD7F32; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}