/* =====================================================
   Lomba Lari Hewan — tampilan
   ===================================================== */
:root {
    --teks: #23313f;
    --redup: #6c7a89;
    --utama: #ff7a00;
    --utama-gelap: #c55f00;
    --hijau: #2bb673;
    --merah: #e63946;
    --rumput: #6cc551;
    --rumput2: #4a9e36;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
    color: var(--teks);
    background: linear-gradient(180deg, #8fd3ff 0%, #d9f3ff 55%, #c9f0b4 100%) fixed;
    min-height: 100vh;
}

a { color: var(--utama-gelap); }
.redup { color: var(--redup); }
.sembunyi { display: none !important; }

/* ---------- Tombol & form ---------- */
.btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none;
    background: var(--utama); color: #fff; font: inherit; font-weight: 700;
    padding: 10px 18px; border-radius: 12px; box-shadow: 0 4px 0 var(--utama-gelap);
    transition: transform .1s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--utama-gelap); }
.btn.kecil { padding: 5px 12px; font-size: .9rem; }
.btn.merah { background: var(--merah); box-shadow: 0 4px 0 #a51d28; }
.btn.abu { background: #6c7a89; box-shadow: 0 4px 0 #4b5663; }
.btn.penuh { width: 100%; margin-top: 10px; }

label { display: block; font-weight: 700; margin-bottom: 10px; }
input, textarea, select {
    display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
    border: 2px solid #d6e2ee; border-radius: 10px; font: inherit; background: #fbfdff;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--utama); }

.alert { background: #fde2e4; color: #9b1c25; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; }
.alert.sukses { background: #dff7ea; color: #17643f; }

/* ---------- Tata letak ---------- */
.topbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 20px; background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08); position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; font-size: 1.4rem; color: var(--utama); }
.profil { display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.emoji-profil { font-size: 2.2rem; display: inline-block; transform: scaleX(-1); }

.grid {
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px;
    max-width: 1150px; margin: 20px auto; padding: 0 16px;
}
.lebar { grid-column: 1 / -1; }
.kartu {
    background: #fff; border-radius: 20px; padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 60, 120, .12);
}
.kartu h2 { margin: 0 0 12px; font-size: 1.25rem; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

/* ---------- Halaman masuk ---------- */
.masuk-wrap { max-width: 560px; margin: 0 auto; padding: 30px 16px; }
.judul-besar { text-align: center; margin-bottom: 16px; }
.judul-besar h1 { font-size: 2.5rem; margin: 0; color: #fff; text-shadow: 0 3px 0 var(--utama-gelap), 0 6px 14px rgba(0,0,0,.2); }
.judul-besar p { font-size: 1.1rem; margin: 6px 0 0; }
.parade { font-size: 2.4rem; animation: parade 2.5s ease-in-out infinite; }
@keyframes parade { 50% { transform: translateY(-8px); } }

.tab { display: flex; gap: 6px; background: #eef4fa; padding: 5px; border-radius: 14px; margin-bottom: 14px; }
.tab button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; color: var(--redup); }
.tab button.aktif { background: #fff; color: var(--utama); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.sub-judul { font-weight: 700; margin: 4px 0 8px; }
.pilih-hewan { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pilih-hewan label { margin: 0; font-weight: 600; }
.pilih-hewan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilih-hewan .pil {
    display: flex; flex-direction: column; align-items: center; padding: 8px 4px;
    border: 3px solid #e3ebf3; border-radius: 14px; cursor: pointer; font-size: .85rem; transition: .15s;
}
.pilih-hewan .pil em { font-style: normal; font-size: 2rem; }
.pilih-hewan .pil:hover { border-color: #ffc38a; transform: translateY(-2px); }
.pilih-hewan input:checked + .pil { border-color: var(--utama); background: #fff4e8; }
.pilih-hewan input:disabled + .pil { opacity: .3; cursor: not-allowed; transform: none; }
.pilih-hewan input:focus-visible + .pil { outline: 3px solid #1982c4; }
.tautan-bawah { text-align: center; margin-top: 16px; font-weight: 700; }

/* ---------- Hadiah (mobil animasi) ---------- */
.hadiah { text-align: center; position: relative; overflow: hidden; background: linear-gradient(160deg, #fff9df, #ffe08a); }
.pita {
    display: inline-block; background: var(--merah); color: #fff; font-weight: 800;
    padding: 5px 18px; border-radius: 999px; letter-spacing: 1px; animation: denyut 1.6s ease-in-out infinite;
}
.panggung { position: relative; height: 160px; margin: 10px 0 4px; }
.panggung .slot-mobil { position: absolute; left: 50%; bottom: 16px; width: 240px; max-width: 90%; transform: translateX(-50%); }
.jalan { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: #454a50; border-radius: 8px; overflow: hidden; }
.jalan::after {
    content: ''; position: absolute; left: 0; top: 12px; width: 200%; height: 4px;
    background: repeating-linear-gradient(90deg, #ffd166 0 30px, transparent 30px 60px);
    animation: jalan-gerak .5s linear infinite;
}
.teks-hadiah { margin: 8px 0 0; font-size: 1.05rem; }
.kilau { position: absolute; font-size: 1.4rem; animation: kelip 1.8s ease-in-out infinite; }
.kilau.k1 { left: 12%; top: 8px; }
.kilau.k2 { right: 14%; top: 20px; animation-delay: .6s; }
.kilau.k3 { left: 48%; top: 0; animation-delay: 1.2s; }

.mobil { display: block; width: 100%; height: auto; overflow: visible; }
.mobil .badan { animation: goyang .3s ease-in-out infinite alternate; }
.mobil .roda { animation: putar .45s linear infinite; transform-box: fill-box; transform-origin: center; }
.mobil .kilap { animation: kilap 2.6s ease-in-out infinite; }
.mobil .sinar { animation: sinar 1.2s ease-in-out infinite alternate; }
.mobil .asap { transform-box: fill-box; transform-origin: center; animation: asap 1.2s ease-out infinite; opacity: 0; }
.mobil .asap.a2 { animation-delay: .4s; }
.mobil .asap.a3 { animation-delay: .8s; }

@keyframes jalan-gerak { to { transform: translateX(-60px); } }
@keyframes goyang { to { transform: translateY(-2px); } }
@keyframes putar { to { transform: rotate(360deg); } }
@keyframes kilap { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(330px); } }
@keyframes sinar { from { opacity: .35; } to { opacity: 1; } }
@keyframes asap { 0% { transform: translate(0, 0) scale(.5); opacity: .8; } 100% { transform: translate(-28px, -10px) scale(2); opacity: 0; } }
@keyframes denyut { 50% { transform: scale(1.08); } }
@keyframes kelip { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- Soal ---------- */
.pertanyaan { font-size: 1.35rem; font-weight: 700; margin-bottom: 14px; line-height: 1.4; }
.opsi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 500px) { .opsi { grid-template-columns: 1fr; } }
.opsi button {
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 12px 14px; border-radius: 14px; border: 3px solid #dde6ef; background: #f7fbff;
    font: inherit; font-size: 1.05rem; cursor: pointer; transition: .15s; color: var(--teks);
}
.opsi button b {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--utama); color: #fff;
}
.opsi button:hover:not(:disabled) { border-color: var(--utama); transform: translateY(-2px); }
.opsi button:disabled { cursor: default; }
.opsi button.benar { background: #dff7ea; border-color: var(--hijau); }
.opsi button.benar b { background: var(--hijau); }
.opsi button.salah { background: #fde2e4; border-color: var(--merah); animation: gemetar .4s; }
.opsi button.salah b { background: var(--merah); }
#umpan { margin-top: 12px; font-weight: 800; font-size: 1.1rem; min-height: 1.6em; }
#umpan.ok { color: var(--hijau); }
#umpan.no { color: var(--merah); }
.selesai { text-align: center; font-size: 1.6rem; font-weight: 800; padding: 30px 0; }
.selesai small { font-size: 1rem; color: var(--redup); font-weight: 600; }
@keyframes gemetar { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Lintasan lomba ---------- */
.lintasan { display: flex; flex-direction: column; gap: 8px; --n: 10; }
.jalur { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 10px; }
.jalur .label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jalur .label small { color: var(--redup); margin-left: 4px; }
.jalur.saya .label { color: var(--utama); }
.trek {
    position: relative; height: 54px; border-radius: 12px;
    background: linear-gradient(180deg, var(--rumput), var(--rumput2));
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12);
}
.jalur.saya .trek { box-shadow: 0 0 0 3px var(--utama), inset 0 -4px 0 rgba(0, 0, 0, .12); }
/* garis setiap langkah */
.trek::before {
    content: ''; position: absolute; top: 6px; bottom: 6px; left: 27px; right: 27px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px calc(100% / var(--n)));
}
.garis-finish {
    position: absolute; right: 0; top: 0; bottom: 0; width: 27px; border-radius: 0 12px 12px 0;
    background: conic-gradient(#222 25%, #fff 0 50%, #222 0 75%, #fff 0) 0 0 / 13px 13px;
}
.hewan {
    position: absolute; top: 50%; width: 54px; height: 54px; margin-top: -27px;
    left: calc((100% - 54px) * var(--p, 0) / var(--n, 10));
    display: grid; place-items: center; font-size: 2.3rem; z-index: 2;
    transition: left .7s cubic-bezier(.3, 1.4, .5, 1);
}
.hewan .emoji { display: inline-block; transform: scaleX(-1); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.hewan.maju .emoji { animation: lompat .7s ease-out; }
.hewan.mundur .emoji { animation: goyah .7s ease-in-out; }
@keyframes lompat {
    0% { transform: scaleX(-1) translateY(0); }
    40% { transform: scaleX(-1) translateY(-20px); }
    100% { transform: scaleX(-1) translateY(0); }
}
@keyframes goyah {
    0%, 100% { transform: scaleX(-1) rotate(0); }
    25% { transform: scaleX(-1) rotate(-18deg); }
    75% { transform: scaleX(-1) rotate(18deg); }
}
@media (max-width: 600px) {
    .jalur { grid-template-columns: 1fr; gap: 2px; }
    .trek { height: 46px; }
    .hewan { font-size: 1.9rem; }
}

/* ---------- Peringkat ---------- */
.peringkat { margin: 0; padding-left: 26px; font-size: 1.15rem; }
.peringkat li { padding: 5px 0; border-bottom: 1px dashed #e3ebf3; }
.peringkat li::marker { font-weight: 800; color: var(--utama); }
.peringkat .em { display: inline-block; transform: scaleX(-1); font-size: 1.5rem; }
.peringkat .ps { float: right; font-weight: 800; color: var(--redup); }

/* ---------- Layar pemenang ---------- */
.overlay {
    position: fixed; inset: 0; background: rgba(10, 20, 40, .78); z-index: 50;
    display: none; place-items: center; padding: 16px; overflow: hidden;
}
.overlay.tampil { display: grid; }
.overlay .kotak {
    position: relative; z-index: 2; width: 100%; max-width: 540px; text-align: center;
    background: linear-gradient(160deg, #fff, #fff1bd); border-radius: 26px; padding: 22px 26px;
    animation: muncul .5s cubic-bezier(.3, 1.5, .5, 1);
}
.overlay h1 { margin: 0; font-size: 2rem; color: var(--utama); }
.trofi { font-size: 4rem; animation: denyut 1s ease-in-out infinite; }
.mobil-menang { width: min(380px, 92%); margin: 12px auto 16px; animation: masuk 1.8s cubic-bezier(.2, .9, .3, 1) both; }
.konfeti { position: absolute; inset: 0; pointer-events: none; }
.konfeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: jatuh linear infinite; will-change: transform; }
@keyframes jatuh { to { transform: translateY(calc(100vh + 40px)) rotate(720deg); } } /* transform, bukan top → tanpa layout ulang */
@keyframes muncul { from { transform: scale(.5); opacity: 0; } }
@keyframes masuk { 0% { transform: translateX(-120vw); } 80% { transform: translateX(14px); } 100% { transform: translateX(0); } }

/* ---------- Layar proyektor ---------- */
body.papan .grid { max-width: 1400px; }
body.papan .trek { height: 64px; }
body.papan .hewan { font-size: 2.8rem; }

/* ---------- Halaman guru ---------- */
.baris { display: flex; gap: 10px; align-items: flex-end; }
.baris label { flex: 1; }
.baris .btn { margin-bottom: 10px; }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: 8px 10px; border-bottom: 1px solid #e8eef4; text-align: left; vertical-align: top; }
.tabel th { background: #f3f8fc; }
.tabel form { margin: 0; }
.emoji-sel { font-size: 1.6rem; }
.kecil-teks { font-size: .9rem; color: var(--redup); }
.info-gabung { background: #eef7ff; border: 2px dashed #9cc9ef; border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.7; word-break: break-all; }
.info-gabung .kode { font-size: 1.2rem; letter-spacing: 2px; color: var(--utama-gelap); }
.progres { margin-bottom: 12px; }
.progres-teks { font-size: .95rem; color: var(--redup); margin-bottom: 4px; }
.progres-bar { height: 10px; background: #e8eef4; border-radius: 999px; overflow: hidden; }
.progres-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--hijau), #7ee0a8); border-radius: 999px; transition: width .6s; }
/* Banyak langkah (mis. 50 soal): garis langkah dibuat lebih tipis */
.trek::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px calc(100% / var(--n))); }

/* =====================================================
   Nyawa, status, podium juara
   ===================================================== */
.lencana { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
           background: #e7f1fb; color: #1d5f96; margin-bottom: 6px; }
.lencana.jalan-l { background: #dff7ea; color: #17643f; }
.lencana.selesai-l { background: #fff1c2; color: #8a5a00; }
.progres-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                font-size: .95rem; color: var(--redup); margin-bottom: 4px; flex-wrap: wrap; }
.nyawa { font-size: 1.05rem; letter-spacing: 1px; }
.nyawa-besar { font-size: 1.8rem; letter-spacing: 2px; }
.selesai.gameover { color: var(--merah); }
.selesai .btn { margin-top: 14px; font-size: 1rem; }

/* status hewan di lintasan */
.hewan .lencana-hewan { position: absolute; top: -6px; right: -4px; font-size: 1.1rem; }
.jalur.gugur .emoji { filter: grayscale(1) opacity(.55); }
.jalur.gugur .trek { background: linear-gradient(180deg, #9aa5ad, #7c868e); }
.jalur.gugur .label { color: var(--redup); }
.jalur.gugur .label small { text-decoration: none; display: block; }
.jalur.finish .trek { box-shadow: 0 0 0 3px #ffca3a, inset 0 -4px 0 rgba(0,0,0,.12); }
.jalur .rank { font-size: 1.2rem; }

/* papan skor */
.ringkasan { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ringkasan span { background: #f3f8fc; border-radius: 999px; padding: 3px 12px; font-size: .95rem; }
.peringkat.tanpa-nomor { list-style: none; padding-left: 0; }
.peringkat li.gugur { opacity: .55; }
.peringkat li.juara { font-weight: 800; }

/* overlay hasil */
.overlay .kotak { max-height: 92vh; overflow-y: auto; }
.teks-saya { font-size: 1.15rem; margin: 6px 0 10px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 10px 0 6px; }
.tiang { flex: 1; max-width: 150px; text-align: center; animation: naik .8s cubic-bezier(.3,1.4,.5,1) both; }
.tiang.t1 { animation-delay: .9s; }
.tiang.t2 { animation-delay: .5s; }
.tiang.t3 { animation-delay: .1s; }
.tiang-hewan { font-size: 2.6rem; display: inline-block; transform: scaleX(-1); animation: parade 1.6s ease-in-out infinite; }
.tiang.t1 .tiang-hewan { font-size: 3.4rem; }
.tiang-nama { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiang-balok { border-radius: 12px 12px 0 0; color: #fff; padding: 8px 4px; display: flex; flex-direction: column; justify-content: center; }
.tiang-balok span { font-size: 1.8rem; line-height: 1; }
.tiang.t1 .tiang-balok { height: 120px; background: linear-gradient(180deg, #ffcb2f, #e0a100); }
.tiang.t2 .tiang-balok { height: 90px;  background: linear-gradient(180deg, #c9d3dc, #8e9aa6); }
.tiang.t3 .tiang-balok { height: 65px;  background: linear-gradient(180deg, #e3a36b, #b36b2f); }
@keyframes naik { from { transform: translateY(60px); opacity: 0; } }
.hadiah-juara { background: #fff7d6; border-radius: 16px; padding: 6px 10px 2px; margin-top: 8px; }
.hadiah-juara .mobil-menang { margin: 4px auto 0; width: min(300px, 90%); }
.judul-peringkat { margin: 14px 0 6px; }
.peringkat-akhir { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; }
.peringkat-akhir li { display: grid; grid-template-columns: 38px 34px 1fr; align-items: center; column-gap: 6px;
                      padding: 6px 8px; border-radius: 10px; }
.peringkat-akhir li:nth-child(odd) { background: rgba(0,0,0,.035); }
.peringkat-akhir li.juara { font-weight: 800; }
.peringkat-akhir li.saya { outline: 2px solid var(--utama); background: #fff4e8; }
.peringkat-akhir .no { font-weight: 800; text-align: center; font-size: 1.15rem; }
.peringkat-akhir .em { font-size: 1.4rem; display: inline-block; transform: scaleX(-1); }
.peringkat-akhir .ket { grid-column: 3; font-size: .82rem; color: var(--redup); font-weight: 600; }

/* halaman guru */
.juara-baris { background: #fff8dc; }
.rank-sel { white-space: nowrap; }
/* label jalur: nama di baris pertama, progres + nyawa di baris kedua */
.jalur .label { line-height: 1.15; }
.jalur .label small { display: block; margin-left: 0; font-size: .78rem; white-space: nowrap; }
.jalur.gugur .label small { color: var(--merah); font-weight: 800; }
@media (max-width: 820px) {
    .kartu-soal { order: -1; }               /* di HP: soal tampil paling atas */
    .hadiah .panggung { height: 130px; }
}

/* halaman guru: aksi siswa & jumlah soal */
.btn.hijau { background: var(--hijau); box-shadow: 0 4px 0 #1d8a55; }
.aksi-siswa { display: flex; flex-wrap: wrap; gap: 6px; }
.kick-baris td { background: #fdecee; color: #9b1c25; }
.atur-soal { background: #f7fbff; border: 2px solid #d6e2ee; border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.judul-atur { font-size: 1.1rem; margin-bottom: 6px; }
.judul-atur b { color: var(--utama); font-size: 1.4rem; }
.atur-soal input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--utama); height: 28px; }
.skala { display: flex; justify-content: space-between; font-size: .8rem; color: var(--redup); }
.pilih-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* =====================================================
   Animasi hewan berlari (lebih hidup)
   ===================================================== */
/* rumput bergerak memberi kesan kecepatan */
.trek .rumput { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; }
/* Digeser dengan transform (dikerjakan GPU). Dulu background-position dianimasikan di 30 lintasan
   sekaligus → browser menggambar ulang semua lintasan setiap frame (penyebab lag di HP/proyektor). */
.trek .rumput::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -44px;
    background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(255,255,255,.12) 18px 22px);
    background-size: 44px 100%; animation: rumput-gerak .9s linear infinite; will-change: transform;
}
@keyframes rumput-gerak { to { transform: translateX(-44px); } }

.hewan .emoji { animation: none !important; }               /* animasi lama digantikan di bawah */
.hewan .badan-hewan {
    display: inline-block; transform-origin: 50% 90%;
    animation: lari var(--irama, .36s) ease-in-out infinite alternate; animation-delay: var(--tunda, 0s);
}
@keyframes lari { 0% { transform: translateY(0) rotate(-4deg); } 100% { transform: translateY(-9px) rotate(5deg); } }

.hewan .bayangan {
    position: absolute; left: 50%; bottom: 3px; width: 34px; height: 7px; margin-left: -17px;
    border-radius: 50%; background: rgba(0,0,0,.25);
    animation: bayang var(--irama, .36s) ease-in-out infinite alternate; animation-delay: var(--tunda, 0s);
}
@keyframes bayang { to { transform: scaleX(.7); opacity: .6; } }

/* debu di belakang kaki */
.hewan .debu { position: absolute; left: -2px; bottom: 5px; width: 20px; height: 14px; pointer-events: none; }
.hewan .debu i {
    position: absolute; left: 0; bottom: 0; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,248,220,.9); opacity: 0; animation: debu .9s ease-out infinite;
}
.hewan .debu i:nth-child(2) { animation-delay: .3s; }
.hewan .debu i:nth-child(3) { animation-delay: .6s; }
@keyframes debu { 0% { transform: translate(0,0) scale(.6); opacity: .9; } 100% { transform: translate(-22px,-10px) scale(1.6); opacity: 0; } }

/* SPRINT saat jawaban benar */
.hewan.maju .badan-hewan { animation: sprint .12s ease-in-out 7 alternate; }
@keyframes sprint { from { transform: translateY(0) rotate(-8deg) scale(1.08); } to { transform: translateY(-14px) rotate(8deg) scale(1.15); } }
.hewan .garis-cepat {
    position: absolute; right: 88%; top: 28%; width: 0; height: 55%; opacity: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 3px, transparent 3px 9px);
}
.hewan.maju .garis-cepat { animation: garis-cepat .8s ease-out; }
@keyframes garis-cepat { 0% { width: 0; opacity: 1; } 40% { width: 48px; opacity: .9; } 100% { width: 10px; opacity: 0; } }
.hewan.maju .debu i { animation-duration: .35s; }

/* TERSANDUNG saat jawaban salah */
.hewan.mundur .badan-hewan { animation: tersandung .9s ease-in-out; }
@keyframes tersandung {
    0% { transform: rotate(0); } 20% { transform: rotate(-35deg) translateY(-6px); }
    45% { transform: rotate(20deg); } 70% { transform: rotate(-10deg); } 100% { transform: rotate(0); }
}
.hewan.mundur::after { content: '💫'; position: absolute; top: -14px; left: 14px; font-size: 1.1rem; animation: pusing .9s ease-out forwards; }
@keyframes pusing { from { transform: rotate(0) scale(.5); opacity: 1; } to { transform: rotate(360deg) scale(1.2); opacity: 0; } }

/* FINISH: meloncat merayakan */
.jalur.finish .badan-hewan { animation: rayakan 1s ease-in-out infinite; }
@keyframes rayakan {
    0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-16px) rotate(-10deg); }
    60% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-6px) rotate(8deg); }
}
.jalur.finish .debu, .jalur.finish .rumput { display: none; }

/* GAME OVER: hewan rebah */
.jalur.gugur .badan-hewan { animation: none; transform: rotate(-90deg) translateX(-6px); }
.jalur.gugur .debu, .jalur.gugur .bayangan, .jalur.gugur .rumput { display: none; }

/* Lomba selesai: hewan berhenti berlari */
.berhenti .jalur:not(.finish) .badan-hewan { animation: none; }
.berhenti .bayangan, .berhenti .rumput::before { animation: none; }
.berhenti .debu { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hewan .badan-hewan, .trek .rumput::before, .hewan .debu i, .hewan .bayangan { animation: none !important; }
}
/* Mode hemat (otomatis di HP/laptop lemah atau bila peserta banyak): hiasan yang terus bergerak dimatikan,
   animasi maju/mundur/finish tetap ada. */
.hemat .trek .rumput::before, .hemat .hewan .debu, .hemat .hewan .bayangan { animation: none !important; }
.hemat .hewan .debu { display: none; }
.hemat .jalur:not(.saya):not(.finish) .hewan:not(.maju):not(.mundur) .badan-hewan { animation: none; }
.hemat .hewan .emoji { filter: none; }

/* peringkat: siswa di-kick */
.peringkat li.kick, .peringkat-akhir li.kick { opacity: .7; color: #9b1c25; }
.peringkat .no-urut { display: inline-block; min-width: 26px; font-weight: 800; color: var(--utama); }

/* =====================================================
   Tombol musik
   ===================================================== */
.tombol-musik {
    position: fixed; right: 14px; bottom: 14px; z-index: 60; border: 0; border-radius: 999px;
    padding: 10px 16px; font: inherit; font-weight: 800; background: #23313f; color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: pointer; animation: denyut 1.8s ease-in-out infinite;
}
.tombol-musik.mati { background: #6c7a89; animation: none; }

/* #####################################################
   TEMA bad-coder.com — gaya editor kode / terminal neon
   (blok ini menimpa warna terang di atas)
   ##################################################### */
:root {
    --bg: #0d1117; --panel: #161b22; --panel2: #1c2230; --garis: #30363d;
    --teks: #e6edf3; --redup: #8b949e;
    --utama: #3dff8f; --utama-gelap: #1fa860; --hijau: #3dff8f; --merah: #ff5c7a;
    --ungu: #b16cff; --cyan: #38e1ff; --kuning: #ffd43b;
    --rumput: #1d5c3a; --rumput2: #123a25;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}
::selection { background: var(--utama); color: var(--bg); }
body {
    font-family: 'Inter', system-ui, 'Segoe UI', sans-serif; color: var(--teks);
    background:
        radial-gradient(900px 520px at 8% -10%, rgba(61,255,143,.13), transparent 60%),
        radial-gradient(800px 520px at 108% 8%, rgba(177,108,255,.15), transparent 60%),
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bg);
    background-attachment: fixed;
}
a { color: var(--cyan); }
h1, h2, h3, .btn, label, th, .lencana, .tab button, .pita, .progres-atas, .jalur .label, .ringkasan,
.tombol-musik, .peringkat .ps, .kode, .skala, .judul-atur, .brand, .selesai, #umpan, .tiang-balok, .no-urut {
    font-family: var(--mono);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Logo <bad-coder/> ---------- */
.logo { font-family: var(--mono); font-weight: 800; font-size: 1.15rem; color: var(--teks); text-decoration: none; letter-spacing: -.5px; white-space: nowrap; }
.logo:hover { text-shadow: 0 0 12px rgba(61,255,143,.6); }
.logo-kurung { color: var(--utama); }
.logo-strip { color: var(--ungu); }
.logo-kursor { color: var(--utama); animation: kedip 1s steps(1) infinite; }
@keyframes kedip { 50% { opacity: 0; } }
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--teks); font-size: 1rem; }
.brand-halaman { color: var(--redup); font-size: .9rem; font-weight: 500; }
.brand-halaman::before { content: '~/'; color: var(--ungu); }

/* ---------- Header & kartu jendela terminal ---------- */
.topbar { background: rgba(13,17,23,.82); border-bottom: 1px solid var(--garis); box-shadow: none; backdrop-filter: blur(8px); }
.profil small { color: var(--redup); }
.kartu {
    position: relative; background: var(--panel); border: 1px solid var(--garis); border-radius: 12px;
    padding-top: 44px; box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.kartu::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px; border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--garis);
    background:
        radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 5.5px),
        radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 5.5px),
        radial-gradient(circle at 52px 14px, #28c840 5px, transparent 5.5px),
        #0f141b;
}
.kartu h2 { color: var(--teks); font-size: 1.05rem; letter-spacing: -.3px; }
.kartu h2::before { content: '> '; color: var(--utama); }
.hadiah { background: linear-gradient(160deg, #1a1f2b, #211832); }
.teks-hadiah { color: var(--teks); }
.pita { background: linear-gradient(90deg, var(--ungu), #ff4fd8); box-shadow: 0 0 18px rgba(177,108,255,.5); }

/* ---------- Tombol & form ---------- */
.btn { background: var(--utama); color: var(--bg); box-shadow: 0 4px 0 var(--utama-gelap), 0 0 16px rgba(61,255,143,.25); border-radius: 10px; }
.btn:active { box-shadow: 0 1px 0 var(--utama-gelap); }
.btn.abu { background: #30363d; color: var(--teks); box-shadow: 0 4px 0 #1f242b; }
.btn.merah { background: var(--merah); color: #fff; box-shadow: 0 4px 0 #b3334d, 0 0 16px rgba(255,92,122,.25); }
.btn.hijau { background: var(--cyan); color: var(--bg); box-shadow: 0 4px 0 #1b98b0; }
input, textarea, select { background: var(--bg); border: 1px solid var(--garis); color: var(--teks); border-radius: 8px; }
input:focus, textarea:focus, select:focus { border-color: var(--utama); box-shadow: 0 0 0 3px rgba(61,255,143,.15); }
input::placeholder, textarea::placeholder { color: #5b6470; }
.alert { background: rgba(255,92,122,.12); color: #ff9aad; border: 1px solid rgba(255,92,122,.35); }
.alert.sukses { background: rgba(61,255,143,.08); color: #86ffbd; border-color: rgba(61,255,143,.35); }
.redup, .kecil-teks { color: var(--redup); }

/* ---------- Halaman masuk ---------- */
.judul-besar .logo-besar { display: inline-block; font-size: 1.35rem; margin-bottom: 6px; }
.judul-besar h1 { color: #fff; font-size: 2.3rem; letter-spacing: -1px; text-shadow: 0 0 22px rgba(61,255,143,.45); }
.judul-besar p { color: var(--teks); }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-teks); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: #ff4fd8; transform: translate(-2px, 0); clip-path: inset(0 0 60% 0); animation: glitch1 3s infinite steps(1); opacity: .8; }
.glitch::after  { color: var(--cyan); transform: translate(2px, 0); clip-path: inset(55% 0 0 0); animation: glitch2 2.4s infinite steps(1); opacity: .8; }
@keyframes glitch1 { 0%, 92%, 100% { transform: translate(0); opacity: 0; } 93% { transform: translate(-3px, -1px); opacity: .9; } 96% { transform: translate(3px, 1px); opacity: .9; } }
@keyframes glitch2 { 0%, 88%, 100% { transform: translate(0); opacity: 0; } 89% { transform: translate(3px, 1px); opacity: .9; } 94% { transform: translate(-2px, -1px); opacity: .9; } }
.potongan-kode {
    display: inline-block; max-width: 100%; margin: 10px 0 4px; padding: 8px 14px; white-space: pre-wrap; text-align: left;
    background: var(--bg); border: 1px solid var(--garis); border-radius: 8px; font: 500 .85rem/1.5 var(--mono); color: var(--teks);
}
.potongan-kode .k { color: var(--ungu); } .potongan-kode .f { color: var(--cyan); } .potongan-kode .c { color: var(--redup); font-style: italic; }
.tab { background: var(--bg); border: 1px solid var(--garis); }
.tab button { color: var(--redup); }
.tab button.aktif { background: var(--panel2); color: var(--utama); box-shadow: none; }
.pilih-hewan .pil { background: var(--bg); border: 2px solid var(--garis); color: var(--teks); }
.pilih-hewan .pil:hover { border-color: var(--ungu); }
.pilih-hewan input:checked + .pil { border-color: var(--utama); background: rgba(61,255,143,.08); box-shadow: 0 0 14px rgba(61,255,143,.25); }
.tautan-bawah a { color: var(--cyan); }

/* ---------- Soal ---------- */
.lencana { background: rgba(56,225,255,.12); color: var(--cyan); border: 1px solid rgba(56,225,255,.3); }
.lencana.jalan-l { background: rgba(61,255,143,.1); color: var(--utama); border-color: rgba(61,255,143,.35); }
.lencana.selesai-l { background: rgba(255,212,59,.1); color: var(--kuning); border-color: rgba(255,212,59,.35); }
.pertanyaan { color: #fff; }
.progres-atas { color: var(--redup); }
.progres-bar { background: #21262d; }
.progres-bar span { background: linear-gradient(90deg, var(--utama), var(--cyan)); box-shadow: 0 0 10px rgba(61,255,143,.5); }
.opsi button { background: var(--bg); border: 1px solid var(--garis); color: var(--teks); border-radius: 10px; }
.opsi button b { background: var(--panel2); color: var(--utama); border: 1px solid var(--utama); font-family: var(--mono); }
.opsi button:hover:not(:disabled) { border-color: var(--utama); box-shadow: 0 0 14px rgba(61,255,143,.2); }
.opsi button.benar { background: rgba(61,255,143,.12); border-color: var(--utama); }
.opsi button.benar b { background: var(--utama); color: var(--bg); }
.opsi button.salah { background: rgba(255,92,122,.12); border-color: var(--merah); }
.opsi button.salah b { background: var(--merah); color: #fff; border-color: var(--merah); }
.selesai small { color: var(--redup); }

/* ---------- Lintasan ---------- */
.jalur .label { color: var(--teks); }
.jalur .label small { color: var(--redup); }
.jalur.saya .label { color: var(--utama); }
.trek { background: linear-gradient(180deg, var(--rumput), var(--rumput2)); box-shadow: inset 0 0 0 1px rgba(61,255,143,.18); }
.trek::before { background: repeating-linear-gradient(90deg, rgba(61,255,143,.35) 0 1px, transparent 1px calc(100% / var(--n))); }
.jalur.saya .trek { box-shadow: 0 0 0 2px var(--utama), 0 0 18px rgba(61,255,143,.35); }
.jalur.finish .trek { box-shadow: 0 0 0 2px var(--kuning), 0 0 18px rgba(255,212,59,.35); }
.jalur.gugur .trek { background: linear-gradient(180deg, #2a2f37, #1f242b); box-shadow: inset 0 0 0 1px #3a4049; }
.hewan .bayangan { background: rgba(0,0,0,.45); }

/* ---------- Papan & peringkat ---------- */
.ringkasan span { background: var(--bg); border: 1px solid var(--garis); color: var(--teks); }
.peringkat li { border-bottom: 1px dashed var(--garis); }
.peringkat .ps { color: var(--redup); }
.peringkat .no-urut, .peringkat li::marker { color: var(--utama); }

/* ---------- Layar hasil ---------- */
.overlay { background: rgba(5,8,12,.85); }
.overlay .kotak { background: linear-gradient(160deg, #161b22, #1d1530); border: 1px solid var(--garis); color: var(--teks); box-shadow: 0 0 40px rgba(177,108,255,.25); }
.overlay h1 { color: var(--utama); font-size: 1.7rem; text-shadow: 0 0 18px rgba(61,255,143,.55); }
.overlay h3 { color: var(--teks); }
.tiang-nama { color: var(--teks); }
.hadiah-juara { background: rgba(255,212,59,.07); border: 1px solid rgba(255,212,59,.25); }
.peringkat-akhir li:nth-child(odd) { background: rgba(255,255,255,.03); }
.peringkat-akhir li.saya { outline: 1px solid var(--utama); background: rgba(61,255,143,.08); }
.peringkat-akhir .ket { color: var(--redup); }
.peringkat li.kick, .peringkat-akhir li.kick { color: #ff9aad; }

/* ---------- Halaman guru ---------- */
.info-gabung { background: rgba(56,225,255,.05); border: 1px dashed rgba(56,225,255,.35); }
.info-gabung .kode { color: var(--kuning); }
.atur-soal { background: var(--bg); border: 1px solid var(--garis); }
.judul-atur b { color: var(--utama); }
.tabel th { background: var(--bg); color: var(--redup); font-size: .85rem; }
.tabel th, .tabel td { border-bottom: 1px solid var(--garis); }
.juara-baris td { background: rgba(255,212,59,.07); }
.kick-baris td { background: rgba(255,92,122,.08); color: #ff9aad; }

/* ---------- Tombol musik & kredit ---------- */
.tombol-musik { background: var(--panel2); color: var(--utama); border: 1px solid var(--utama); box-shadow: 0 0 16px rgba(61,255,143,.3); }
.tombol-musik.mati { background: var(--panel); color: var(--redup); border-color: var(--garis); box-shadow: none; }
.kredit { text-align: center; padding: 22px 16px 76px; font: 500 .85rem var(--mono); color: var(--redup); }
.kredit-kode { color: #5b6470; }
.kredit a { color: var(--utama); font-weight: 800; text-decoration: none; }
.kredit a:hover { text-decoration: underline; text-shadow: 0 0 10px rgba(61,255,143,.6); }
.juara-baris { background: rgba(255,212,59,.07); }
.kick-baris { background: rgba(255,92,122,.08); }
.juara-baris td:first-child { color: var(--kuning); }

/* #####################################################
   MULTI GURU — panel guru/admin, ruang, pilihan soal
   ##################################################### */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] { opacity: .55; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.besar { font-size: 1.15rem; padding: 14px 18px; }
.btn + .btn, form + form, form + .btn, .btn + form { margin-top: 8px; }
.aksi-siswa form + form, .aksi-siswa .btn + form { margin-top: 0; }
code { font-family: var(--mono); color: var(--cyan); }
.tiga-kolom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
@media (max-width: 560px) { .tiga-kolom, .dua-kolom { grid-template-columns: 1fr; } }
textarea.mono { font-family: var(--mono); font-size: .88rem; line-height: 1.5; }
.centang { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.centang input { width: auto; margin: 0; accent-color: var(--utama); }
.sub-kartu { margin-top: 22px !important; }

/* navigasi staf */
.nav-staf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: .9rem; }
.nav-staf > a:not(.btn) { color: var(--redup); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.nav-staf > a:not(.btn):hover { color: var(--teks); background: var(--panel2); }
.nav-staf > a.aktif { color: var(--utama); background: rgba(61,255,143,.08); box-shadow: inset 0 0 0 1px rgba(61,255,143,.3); }
.nav-staf .siapa { color: var(--teks); margin: 0 6px 0 10px; }
.nav-staf .siapa small { color: var(--redup); }
.pil-ruang { font: 600 .9rem var(--mono); color: var(--kuning); background: rgba(255,212,59,.08);
             border: 1px solid rgba(255,212,59,.3); border-radius: 999px; padding: 4px 12px; }

/* lencana status ruang & sumber soal */
.lencana.st-menunggu { background: rgba(56,225,255,.1); color: var(--cyan); border-color: rgba(56,225,255,.35); }
.lencana.st-berjalan { background: rgba(61,255,143,.1); color: var(--utama); border-color: rgba(61,255,143,.35); }
.lencana.st-selesai  { background: rgba(255,212,59,.1); color: var(--kuning); border-color: rgba(255,212,59,.35); }
.lencana.l-saya    { background: rgba(61,255,143,.08); color: var(--utama); border-color: rgba(61,255,143,.3); }
.lencana.l-bersama { background: rgba(56,225,255,.08); color: var(--cyan); border-color: rgba(56,225,255,.3); }
.lencana.l-lain    { background: rgba(177,108,255,.1); color: var(--ungu); border-color: rgba(177,108,255,.35); }
.kartu h2 .lencana { vertical-align: middle; margin-left: 6px; }

/* dasbor guru: kartu ruang */
.daftar-ruang { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.kartu-ruang { background: var(--bg); border: 1px solid var(--garis); border-radius: 12px; padding: 14px;
               display: flex; flex-direction: column; gap: 8px; transition: .15s; }
.kartu-ruang:hover { border-color: var(--utama); box-shadow: 0 0 18px rgba(61,255,143,.15); }
.kr-atas { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.kr-nama { font-size: 1.05rem; }
.kr-kode { font: 800 1.8rem var(--mono); letter-spacing: 4px; color: var(--kuning); text-shadow: 0 0 14px rgba(255,212,59,.35); }
.kr-info { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--redup); font-size: .88rem; }
.kr-aksi { display: flex; gap: 6px; margin-top: auto; }
.kr-aksi .btn { margin: 0; }

/* halaman kelola ruang */
.kendali { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .kendali { grid-template-columns: 1fr; } }
.kode-besar { font-size: 1.6rem; letter-spacing: 4px; }
.ringkas-angka { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ringkas-angka span:not(.lencana) { background: var(--bg); border: 1px solid var(--garis); border-radius: 999px; padding: 3px 12px; font-size: .9rem; }
.ringkas-angka b { color: var(--utama); }
.langkah { padding-left: 20px; line-height: 1.6; }
.langkah li { margin-bottom: 4px; }
.zona-bahaya { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--garis); padding-top: 12px; margin-top: 12px; }
.zona-bahaya form + form { margin-top: 0; }
.atur-soal .skala span:nth-child(2):not(:last-child) { text-align: center; }

/* pilih soal */
.alat-pool { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.alat-pool input[type=search] { flex: 1 1 220px; width: auto; margin: 0; }
.alat-pool select { width: auto; margin: 0; }
.alat-pool .btn { margin: 0; }
.jumlah-dipilih { margin-left: auto; font-family: var(--mono); }
.jumlah-dipilih b { color: var(--utama); font-size: 1.2rem; }
.daftar-pool { max-height: 560px; overflow-y: auto; border: 1px solid var(--garis); border-radius: 10px; background: var(--bg); }
.judul-kat { position: sticky; top: 0; z-index: 1; background: var(--panel2); padding: 6px 12px;
             font: 700 .9rem var(--mono); color: var(--cyan); border-bottom: 1px solid var(--garis); }
.judul-kat small { color: var(--redup); }
.item-soal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0; font-weight: 500;
             border-bottom: 1px solid rgba(48,54,61,.6); cursor: pointer; }
.item-soal:hover { background: rgba(61,255,143,.04); }
.item-soal input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--utama); }
.item-soal .teks-soal { flex: 1; }
.item-soal .lencana { margin: 0; flex: none; }
.item-soal:has(input:checked) { background: rgba(61,255,143,.07); }
.simpan-pool { margin-top: 12px; }
.item-soal { font-family: Inter, system-ui, sans-serif; }

/* bank soal: tab tautan */
.tab.tab-kiri { display: inline-flex; flex-wrap: wrap; margin-bottom: 12px; }
.tab a { color: var(--redup); text-decoration: none; padding: 8px 12px; border-radius: 10px; font: 700 .9rem var(--mono); }
.tab a.aktif { background: var(--panel2); color: var(--utama); }

/* admin */
.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.statistik div { background: var(--bg); border: 1px solid var(--garis); border-radius: 12px; padding: 12px; text-align: center; }
.statistik b { display: block; font: 800 2rem var(--mono); color: var(--utama); }
.statistik span { color: var(--redup); font-size: .85rem; }
.statistik .perlu { border-color: var(--kuning); box-shadow: 0 0 16px rgba(255,212,59,.2); }
.statistik .perlu b { color: var(--kuning); }

/* siswa: kode ruang */
.input-kode { font: 800 1.8rem var(--mono); text-align: center; letter-spacing: 8px; text-transform: uppercase; padding: 12px; }
.info-ruang { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ir-nama { font-weight: 800; font-size: 1.15rem; }
.kartu-masuk h2 { text-align: left; }
.selesai.menunggu { color: var(--cyan); }
.jam-pasir { font-size: 3rem; display: inline-block; animation: putar-jam 2.4s ease-in-out infinite; }
@keyframes putar-jam { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* papan: info gabung */
.gabung-papan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
                font-family: var(--mono); font-size: 1.05rem; }
.gabung-papan b { color: var(--cyan); }
.kode-raksasa { font-size: 2.6rem; letter-spacing: 8px; color: var(--kuning) !important; text-shadow: 0 0 20px rgba(255,212,59,.45); vertical-align: middle; }

/* Performa: hewan digeser dengan transform (GPU) bila browser mendukung container query units.
   Browser lama tetap memakai "left" seperti sebelumnya. */
@supports (width: 1cqw) {
    .trek { container-type: inline-size; }
    .hewan {
        left: 0;
        transform: translateX(calc((100cqw - 54px) * var(--p, 0) / var(--n, 10)));
        transition: transform .7s cubic-bezier(.3, 1.4, .5, 1);
    }
}

/* Debu (3 partikel × setiap hewan) adalah animasi terberat. Sekarang hanya muncul saat hewan sedang
   maju, dan terus-menerus hanya di lintasan milik siswa sendiri. */
.hewan .debu { display: none; }
.jalur.saya .hewan .debu, .hewan.maju .debu { display: block; }
.jalur.finish .hewan .debu, .jalur.gugur .hewan .debu, .berhenti .hewan .debu, .hemat .jalur:not(.saya) .hewan:not(.maju) .debu { display: none; }