/* =====================================================================
   SUSUN ATUR SATU SKRIN
   Saiz kad (--kh / --kw) dikira daripada tinggi & lebar tetingkap supaya
   seluruh papan muat dalam satu skrin tanpa menatal.
   ===================================================================== */
body.papan-permainan {
    height: 100vh; overflow: hidden; display: flex; flex-direction: column;
    --log-w: 250px;
    --tetap: 244px;   /* anggaran ruang bukan-kad: bar atas, bar pemain, tengah, jarak */
    --pekali: 5.27;    /* jumlah tinggi kad: 2 baris Watak + 2 baris Magic + tangan + tangan lawan */
    --kh: max(46px, min(calc((100vh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 100px) / 4.2), 150px));
    --kw: calc(var(--kh) * .71);
    --kh-m: calc((var(--kh) + 6px) * .78 - 8px);   /* kad dalam baris Magic yang lebih rendah */
    --kh-lawan: calc(var(--kh) * .58);             /* kad di tangan lawan */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@supports (height: 100dvh) {
    body.papan-permainan { height: 100dvh;
        --kh: max(46px, min(calc((100dvh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 100px) / 4.2), 150px)); }
}
@media (max-width: 1099px) { body.papan-permainan { --log-w: 0px; } }
@media (max-width: 640px) { body.papan-permainan { --tetap: 300px; } body.papan-permainan .label-baris { display: none; } }

/* Bar atas */
.bar-permainan { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 4px 10px; min-height: 42px;
    background: rgba(0, 0, 0, .4); border-bottom: 1px solid var(--garis); }
.bar-permainan .jenama { font-size: 1.05rem; white-space: nowrap; }
.bar-permainan .lawan-info { font-size: .8rem; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-permainan .kawalan { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bar-permainan .btn { padding: 2px 8px; }
.bar-permainan .coin-papar { font-size: .85rem; white-space: nowrap; }

/* Arena: papan + log */
.arena { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 6px 10px; }
.papan { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }

/* Bar pemain */
.pemain-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 3px 10px; font-size: .82rem; min-height: 34px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--garis); border-radius: 8px; white-space: nowrap; }
.pemain-bar .nama { font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.pemain-bar .giliran-aktif { color: var(--emas); }
.tabung { flex: 1; min-width: 80px; display: flex; align-items: center; gap: 8px; }
.tabung .progress { flex: 1; height: 10px; background: rgba(255, 255, 255, .08); border-radius: 6px; }
.tabung .progress-bar { background: linear-gradient(90deg, #b8860b, var(--emas)); transition: width .6s ease; }
.lawan .tabung .progress-bar { background: linear-gradient(90deg, #8e2c48, #ff6b81); }
.tabung small { color: var(--teks); font-weight: 600; font-size: .78rem; }
.timbunan { font-size: .76rem; color: var(--redup); cursor: pointer; user-select: none; }
.timbunan:hover { color: var(--teks); }
@media (max-width: 640px) { .timbunan .lbl { display: none; } .pemain-bar { gap: 8px; } }

/* Medan */
.medan { flex: 0 0 auto; }
.baris { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 3px 0; }
.label-baris { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .6rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--redup); }
.slot-grid { display: grid; grid-template-columns: repeat(4, calc(var(--kh) + 6px)); gap: 6px; }
.slot { width: calc(var(--kh) + 6px); height: calc(var(--kh) + 6px); border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.medan-lawan .slot { background: rgba(255, 107, 129, .03); }
.medan-saya .slot { background: rgba(226, 184, 74, .03); }
.slot.boleh { border-color: var(--emas); box-shadow: 0 0 0 1px var(--emas) inset; cursor: pointer; }
.slot.sasaran { border-color: var(--serang); box-shadow: 0 0 12px rgba(255, 122, 89, .5); }
.medan-lawan .baris:first-child .slot { height: calc(var(--kh) * .78); }  /* Magic lawan sentiasa tertutup: baris lebih rendah */
.medan-saya .baris:last-child .slot { height: calc(var(--kh) * .78); }
.medan-lawan .baris:first-child .kad, .medan-saya .baris:last-child .kad { --kh: var(--kh-m); --kw: calc(var(--kh-m) * .71); }

/* Tengah: Fenomena, fasa, arahan, butang — satu baris */
.tengah { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; padding: 5px 8px; margin: 2px 0;
    border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent); }
.zon-fenomena { display: flex; align-items: center; }
.pil-fenomena { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 3px 10px; border-radius: 20px; cursor: pointer;
    background: linear-gradient(90deg, #1d7f8c, #0e4c56); border: 1px solid #6fe3f0; font-size: .78rem; }
.pil-fenomena .ikon { font-size: 1.1rem; }
.pil-fenomena .nm { font-weight: 700; white-space: nowrap; }
.pil-fenomena .tx { color: #c9f4f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; }
.pil-fenomena.kosong { background: none; border-style: dashed; border-color: rgba(64, 196, 210, .35); color: var(--redup); cursor: default; }
.fasa-langkah { display: flex; gap: 4px; }
.fasa-langkah span { font-size: .7rem; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--garis); color: var(--redup); white-space: nowrap; }
.fasa-langkah span.aktif { background: var(--emas); color: #1a1400; border-color: var(--emas); font-weight: 700; }
.arahan { font-size: .78rem; color: var(--redup); flex: 1 1 200px; text-align: center; min-width: 0; }
.butang { display: flex; gap: 6px; }
.butang .btn { padding: 3px 12px; }

/* Tangan: kad bertindih secara automatik bila ruang sempit (lihat app.js) */
.tangan { flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-end; padding: 4px 0 2px; height: calc(var(--kh) + 10px); }
.tangan .kad { cursor: pointer; transition: transform .15s ease, margin .2s ease; margin-left: var(--tindih, 6px); }
.tangan .kad:first-child { margin-left: 0; }
.tangan .kad:hover { transform: translateY(-10px); z-index: 5; }
.tangan .kad.malap { opacity: .55; }
/* Tangan lawan: kad belakang penuh, disusun seperti kipas */
.tangan-lawan { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; height: calc(var(--kh-lawan) + 6px); margin: 2px 0; }
.tangan-lawan .kad { --kh: var(--kh-lawan); --kw: calc(var(--kh-lawan) * .71); flex: 0 0 auto;
    margin-left: calc(var(--kw) * -.22); transform: rotate(calc(var(--i, 0) * -2.5deg)) translateY(calc(var(--i, 0) * var(--i, 0) * 1px)); }
.tangan-lawan .kad:first-child { margin-left: 0; }

.kad.mod-bertahan { transform: rotate(-90deg); }
.kad.dah-guna { filter: saturate(.4) brightness(.8); }
.lencana { position: absolute; top: -6px; right: -6px; font-size: .58rem; padding: 1px 5px; border-radius: 10px; z-index: 2; font-weight: 700; }
.lencana.serang { background: var(--serang); color: #210800; }
.lencana.bertahan { background: var(--tahan); color: #00142a; }
.lencana.sedia { background: #7dffa1; color: #052810; }

/* Log: lajur kanan di skrin lebar; laci di skrin kecil */
.panel-log { flex: 0 0 var(--log-w); width: var(--log-w); min-height: 0; display: flex; flex-direction: column;
    background: rgba(0, 0, 0, .3); border: 1px solid var(--garis); border-radius: 10px; }
.panel-tajuk { font-family: var(--fon-tajuk); padding: 6px 12px; border-bottom: 1px solid var(--garis); color: var(--emas);
    display: flex; align-items: center; justify-content: space-between; }
.panel-tajuk .btn-close { font-size: .6rem; }
#tutup-log { display: none; }
#log { overflow-y: auto; padding: 6px 12px; font-size: .76rem; flex: 1; min-height: 0; }
#log div { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .03); }
#log .baru { animation: kilat 1.2s ease; }
@keyframes kilat { from { background: rgba(226, 184, 74, .35); } to { background: transparent; } }
.l-giliran { color: var(--emas); font-weight: 700; margin-top: 6px; }
.l-tabung { color: #ffd76a; } .l-musnah { color: #ff8a8a; } .l-perangkap { color: #ff8fb4; font-weight: 600; }
.l-magic { color: #7de0b0; } .l-fenomena { color: #6fe3f0; } .l-menang { color: var(--emas); font-weight: 800; }
.l-kira { color: #c6cdf0; } .l-serang { color: var(--serang); } .l-debug { color: #666; } .l-sistem { color: var(--redup); font-style: italic; }
@media (min-width: 1100px) { #btn-log { display: none; } }
@media (max-width: 1099px) {
    .panel-log { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); z-index: 1060; border-radius: 0;
        background: rgba(10, 13, 30, .97); transform: translateX(100%); transition: transform .25s ease; }
    body.log-buka .panel-log { transform: none; box-shadow: -10px 0 30px rgba(0, 0, 0, .6); }
    #tutup-log { display: block; }
}

/* Skrin penuh */
:fullscreen body.papan-permainan, body.papan-permainan:fullscreen { height: 100vh; }

/* ---------- Modal ---------- */
.modal-sifu { background: var(--bg2); color: var(--teks); border: 1px solid rgba(226, 184, 74, .4); }
.modal-sifu .modal-header { border-color: var(--garis); }
.modal-sifu .modal-title { font-family: var(--fon-tajuk); color: var(--emas); }
.pilihan-list { display: flex; flex-direction: column; gap: 6px; }
.pilihan-list .btn { text-align: left; }
.korban-item { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--garis); border-radius: 6px; margin-bottom: 4px; }
.senarai-kubur { display: flex; flex-wrap: wrap; gap: 6px; }
.peraturan li { margin-bottom: 4px; }

/* =====================================================================
   ANIMASI
   ===================================================================== */
#lapisan { position: fixed; inset: 0; pointer-events: none; z-index: 1070; overflow: hidden; }
body.sibuk .arena { pointer-events: none; }
body.sibuk .arena .tangan .kad { opacity: .7; }
.slot { transform-style: preserve-3d; }
.slot.disasar { box-shadow: 0 0 0 2px var(--serang), 0 0 24px rgba(255, 122, 89, .7); border-color: var(--serang); }
.pemain-bar.disasar { box-shadow: 0 0 0 2px var(--serang), 0 0 24px rgba(255, 122, 89, .7); }

/* Sepanduk (giliran, fasa, fenomena, keputusan) */
.sepanduk { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); text-align: center; padding: 22px 16px;
    background: linear-gradient(90deg, transparent, rgba(5, 7, 20, .92) 18%, rgba(5, 7, 20, .92) 82%, transparent);
    border-top: 1px solid rgba(226, 184, 74, .5); border-bottom: 1px solid rgba(226, 184, 74, .5);
    animation: sepanduk var(--t, 1200ms) ease forwards; }
.sepanduk .sp-tajuk { font-family: var(--fon-tajuk); font-weight: 800; font-size: clamp(1.6rem, 5vw, 3rem); color: var(--emas);
    letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 24px rgba(226, 184, 74, .6); }
.sepanduk small { display: block; color: var(--teks); font-size: .95rem; margin-top: 4px; }
.sepanduk.lawan { border-color: rgba(255, 107, 129, .6); }
.sepanduk.lawan .sp-tajuk { color: #ff8fa3; text-shadow: 0 0 24px rgba(255, 107, 129, .6); }
.sepanduk.sp-nama .sp-tajuk::before { content: 'Giliran'; display: block; font-size: .38em; letter-spacing: .35em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.sepanduk.menang .sp-tajuk { font-size: clamp(2rem, 7vw, 4rem); }
.sepanduk.fenomena { border-color: rgba(64, 196, 210, .7); background: linear-gradient(90deg, transparent, rgba(4, 30, 36, .94) 15%, rgba(4, 30, 36, .94) 85%, transparent); }
.sepanduk.fenomena .sp-tajuk { color: #6fe3f0; text-shadow: 0 0 24px rgba(64, 196, 210, .7); }
.sepanduk .sp-ikon { font-size: 3rem; line-height: 1; animation: putar-ikon var(--t) ease; }
@keyframes sepanduk {
    0% { opacity: 0; transform: translateY(-50%) scaleY(.1); }
    12% { opacity: 1; transform: translateY(-50%) scaleY(1); }
    85% { opacity: 1; transform: translateY(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateY(-50%) scaleY(.1); }
}
@keyframes putar-ikon { 0% { transform: scale(0) rotate(-180deg); } 30% { transform: scale(1.2) rotate(10deg); } 45%, 100% { transform: scale(1) rotate(0); } }

/* Kad besar di tengah (Magic / Perangkap) */
.kad-tengah { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center;
    animation: kad-tengah var(--t, 1200ms) ease forwards; }
.kad-tengah .kad { margin: 0 auto; }
.kad-tengah.magic .kad { box-shadow: 0 0 60px rgba(35, 163, 107, .9), 0 0 0 3px #7de0b0; }
.kad-tengah.perangkap .kad { box-shadow: 0 0 60px rgba(255, 70, 110, .9), 0 0 0 3px #ff8fb4; }
.kt-label { font-family: var(--fon-tajuk); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
    font-size: 1.3rem; color: #fff; text-shadow: 0 2px 12px #000; }
.kad-tengah.perangkap .kt-label { color: #ff8fb4; font-size: 1.8rem; }
@keyframes kad-tengah {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotateY(90deg); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotateY(0); }
    30%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

/* Pertembungan nilai */
.pertembungan { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center;
    animation: kad-tengah var(--t, 1100ms) ease forwards; }
.pt-baris { display: flex; align-items: center; gap: 24px; }
.pt-nilai { font-family: var(--fon-tajuk); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); color: #fff;
    background: rgba(5, 7, 20, .9); border: 2px solid var(--garis); border-radius: 14px; padding: 6px 22px; min-width: 150px; }
.pt-nilai small { display: block; font-family: var(--fon-teks); font-size: .8rem; font-weight: 600; color: var(--redup); letter-spacing: .1em; text-transform: uppercase; }
.pt-nilai.unggul { border-color: var(--emas); color: var(--emas); box-shadow: 0 0 30px rgba(226, 184, 74, .5); }
.pt-vs { font-size: 2.6rem; animation: vs .5s ease infinite alternate; }
.pt-hasil { margin-top: 10px; font-family: var(--fon-tajuk); font-weight: 800; font-size: 1.6rem; color: var(--serang); letter-spacing: .15em; text-shadow: 0 2px 12px #000; }
@keyframes vs { from { transform: scale(1) rotate(-8deg); } to { transform: scale(1.25) rotate(8deg); } }

/* Teks terapung */
.terapung { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.15rem; white-space: nowrap;
    text-shadow: 0 2px 6px #000, 0 0 12px currentColor; animation: terapung var(--t, 1000ms) ease-out forwards; }
.w-emas { color: #ffd76a; } .w-hijau { color: #7dffa1; } .w-merah { color: #ff7a7a; } .w-biru { color: #8cc8ff; } .w-ungu { color: #d7a6ff; }
@keyframes terapung {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
    15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

/* Kad terbang (tarik kad) */
.terbang { position: absolute; transform: translate(-50%, -50%); }
.terbang .kad { --kw: 56px; --kh: 78px; }

/* Kilat skrin */
.kilat { position: absolute; inset: 0; animation: kilat-skrin var(--t, 500ms) ease-out forwards; }
.kilat.merah { background: radial-gradient(circle, rgba(255, 60, 90, .45), rgba(255, 60, 90, .1)); }
.kilat.emas { background: radial-gradient(circle, rgba(255, 215, 106, .4), rgba(255, 215, 106, .05)); }
.kilat.biru { background: radial-gradient(circle, rgba(64, 196, 210, .4), rgba(64, 196, 210, .05)); }
@keyframes kilat-skrin { from { opacity: 1; } to { opacity: 0; } }

/* Animasi slot */
.anim-panggil { animation: panggil var(--t, 750ms) cubic-bezier(.2, 1.3, .4, 1); }
@keyframes panggil {
    0% { transform: scale(1.9) translateY(-40px); opacity: 0; filter: brightness(3); }
    55% { opacity: 1; transform: scale(.95); filter: brightness(1.8) drop-shadow(0 0 18px #ffd76a); }
    100% { transform: scale(1); filter: none; }
}
.anim-set { animation: set var(--t, 500ms) ease-out; }
@keyframes set { from { transform: translateY(-60px) scale(1.2); opacity: 0; } to { transform: none; opacity: 1; } }
.anim-korban { animation: korban var(--t, 650ms) ease-in forwards; }
@keyframes korban { to { transform: translateY(-40px) scale(.8); opacity: 0; filter: drop-shadow(0 0 20px #b06cff) brightness(2) hue-rotate(60deg); } }
.anim-pecah { animation: pecah var(--t, 700ms) ease-in forwards; }
@keyframes pecah {
    0% { transform: none; filter: none; }
    15% { transform: translateX(-7px) rotate(-4deg); filter: brightness(2.2); }
    30% { transform: translateX(7px) rotate(4deg); }
    45% { transform: translateX(-4px) rotate(-2deg); filter: brightness(2.5) drop-shadow(0 0 16px #ff5a5a); }
    100% { transform: scale(.3) rotate(25deg); opacity: 0; filter: blur(6px) brightness(3) saturate(0); }
}
.anim-flip { animation: flip var(--t, 600ms) ease; }
@keyframes flip { 0% { transform: perspective(600px) rotateY(90deg); filter: brightness(2.5); } 100% { transform: perspective(600px) rotateY(0); filter: none; } }
.anim-sasar { animation: sasar var(--t, 900ms) ease; }
@keyframes sasar { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 3px #7de0b0, 0 0 30px rgba(125, 224, 176, .8); } }
.anim-kuat { animation: kuat var(--t, 700ms) ease; }
@keyframes kuat { 0%, 100% { filter: none; } 40% { filter: brightness(1.7) drop-shadow(0 0 16px #7dffa1); transform: scale(1.06); } }
.anim-lemah { animation: lemah var(--t, 700ms) ease; }
@keyframes lemah { 0%, 100% { filter: none; } 40% { filter: grayscale(.8) brightness(.6) drop-shadow(0 0 12px #ff5a5a); transform: scale(.94); } }
.anim-hentak { animation: hentak var(--t, 350ms) ease; }
@keyframes hentak { 0%, 100% { transform: none; } 30% { transform: translateX(-8px) rotate(-3deg); } 60% { transform: translateX(8px) rotate(3deg); } }
.anim-gegar { animation: gegar var(--t, 450ms) ease; }
@keyframes gegar { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(4px, -1px); } }
.anim-tabung { animation: tabung var(--t, 800ms) ease; }
@keyframes tabung { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 2px var(--emas), 0 0 30px rgba(226, 184, 74, .6); } }

@media (prefers-reduced-motion: reduce) {
    .sepanduk, .kad-tengah, .pertembungan, .terapung, [class*="anim-"] { animation-duration: 1ms !important; }
}

/* =====================================================================
   KUIZ PAKAR
   ===================================================================== */
.soalan-ikon { font-size: 3.5rem; animation: putar-ikon 1s ease; }
.soalan-teks { font-size: 1.08rem; line-height: 1.5; }
.pilihan-soalan { display: flex; flex-direction: column; gap: 8px; }
.pilihan-soalan .btn { text-align: left; white-space: normal; padding: 10px 14px; }
.pilihan-soalan .btn b { display: inline-block; width: 1.6em; color: var(--emas); }
.pilihan-soalan .btn:hover { border-color: var(--emas); background: rgba(226, 184, 74, .12); color: #fff; }
.pilihan-soalan .btn.dipilih { background: rgba(226, 184, 74, .3); border-color: var(--emas); }
.pemasa { position: relative; height: 22px; background: rgba(255, 255, 255, .08); border-radius: 11px; overflow: hidden; }
.pemasa-bar { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #2ab3c2, #7de0b0); transition: width .2s linear; }
.pemasa-bar.kritikal { background: linear-gradient(90deg, #a83a5c, #ff6b81); }
.pemasa span { position: relative; display: block; text-align: center; font-size: .78rem; font-weight: 700; line-height: 22px; text-shadow: 0 1px 3px #000; }
.sepanduk.ganjaran .sp-tajuk { color: #7dffa1; text-shadow: 0 0 24px rgba(125, 255, 161, .6); }
.sepanduk.ganjaran { border-color: rgba(125, 255, 161, .6); }
.coin-papar { color: #ffd76a; font-weight: 700; }

/* ---------- Telefon potret: bar atas boleh berbalut ---------- */
@media (max-width: 640px) {
    .bar-permainan { flex-wrap: wrap; row-gap: 4px; }
    .bar-permainan .kawalan { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    .bar-permainan .btn { padding: 2px 6px; font-size: .78rem; }
    .arena { padding: 4px 6px; }
    .slot-grid { gap: 4px; }
    .pemain-bar .nama { max-width: 38%; }
}

/* ---------- Skrin rendah (telefon landskap, tetingkap pendek): mod padat ---------- */
@media (max-height: 560px) {
    body.papan-permainan { --tetap: 176px; --pekali: 5.05; --kh: max(34px, min(calc((100vh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 100px) / 4.2), 150px)); }
    @supports (height: 100dvh) {
        body.papan-permainan { --kh: max(34px, min(calc((100dvh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 100px) / 4.2), 150px)); }
    }
    body.papan-permainan { --kh-lawan: calc(var(--kh) * .4); }
    .tangan-lawan { height: calc(var(--kh) * .4 + 4px); margin: 1px 0; }
    .bar-permainan { min-height: 32px; padding: 2px 8px; }
    .bar-permainan .lawan-info { display: none !important; }
    .bar-permainan .btn { padding: 1px 7px; font-size: .75rem; }
    .arena { padding: 3px 8px; gap: 8px; }
    .pemain-bar { min-height: 24px; padding: 1px 8px; font-size: .72rem; }
    .tabung .progress { height: 7px; }
    .tabung small { font-size: .7rem; }
    .baris { margin: 1px 0; }
    .slot-grid { gap: 4px; }
    .tengah { flex-wrap: nowrap; padding: 2px 6px; margin: 1px 0; gap: 8px; }
    .arahan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; }
    .fasa-langkah span { padding: 1px 6px; font-size: .64rem; }
    .pil-fenomena { padding: 1px 8px; font-size: .7rem; }
    .butang .btn { padding: 1px 8px; font-size: .75rem; }
    .tangan { padding: 2px 0 0; height: calc(var(--kh) + 4px); }
    .label-baris { display: none; }
}

/* =====================================================================
   MEDAN FENOMENA — imej latar + animasi mengikut tema
   ===================================================================== */
.papan { position: relative; isolation: isolate; }
.papan > :not(.latar-medan) { position: relative; z-index: 1; }
.latar-medan { position: absolute; inset: 0 -6px; z-index: 0; overflow: hidden; border-radius: 12px; pointer-events: none; }
.latar-imej { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.08);
    transition: opacity 1.2s ease, transform 6s ease; }
.latar-medan.aktif .latar-imej { opacity: .62; transform: scale(1); }
.latar-medan::after { content: ''; position: absolute; inset: 0; z-index: 3;
    background: radial-gradient(ellipse at 50% 50%, rgba(13, 16, 32, .15) 30%, rgba(13, 16, 32, .7) 100%); }
.latar-zarah, .latar-kesan { position: absolute; inset: 0; z-index: 2; }
.latar-medan.masuk .latar-imej { animation: latar-masuk 1.8s ease-out; }
@keyframes latar-masuk { 0% { opacity: 0; transform: scale(1.35); filter: brightness(2.5) blur(6px); } 100% { opacity: .62; transform: scale(1); filter: none; } }
.latar-medan.aktif ~ .medan .slot { background: rgba(8, 10, 24, .38); backdrop-filter: blur(1px); }
.latar-zarah i, .latar-zarah b { position: absolute; display: block; }

/* Hujan: titisan hujan condong + kilat sesekali */
.tema-hujan .latar-zarah i { top: -15%; left: var(--x); width: 2px; height: calc(70px * var(--s));
    background: linear-gradient(to bottom, transparent, rgba(190, 220, 255, .75)); transform: rotate(14deg);
    animation: hujan calc(var(--t) * .45) linear var(--d) infinite; }
@keyframes hujan { to { transform: translate(-28vh, 130vh) rotate(14deg); } }
.tema-hujan .latar-kesan { animation: petir 9s linear infinite; }
@keyframes petir { 0%, 90%, 93%, 100% { background: transparent; } 91%, 94% { background: rgba(220, 235, 255, .35); } }

/* Kemarau: debu terbang + bahang berkilau */
.tema-kemarau .latar-zarah i { left: var(--x); bottom: -5%; width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%;
    background: rgba(255, 196, 120, .7); animation: debu var(--t) ease-in-out var(--d) infinite; }
@keyframes debu { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18vw, -70vh); opacity: 0; } }
.tema-kemarau .latar-kesan { background: repeating-linear-gradient(180deg, rgba(255, 180, 90, .06) 0 6px, transparent 6px 14px);
    animation: bahang 2.4s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes bahang { from { transform: translateY(0) skewX(0); opacity: .5; } to { transform: translateY(-10px) skewX(2deg); opacity: 1; } }
.tema-kemarau .latar-imej { animation: matahari 5s ease-in-out infinite alternate; }
@keyframes matahari { from { filter: brightness(1) saturate(1); } to { filter: brightness(1.15) saturate(1.25); } }

/* Wabak: spora hijau terapung + kabus berdenyut */
.tema-wabak .latar-zarah i { left: var(--x); bottom: -8%; width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 255, 120, .8), rgba(110, 200, 60, 0) 70%); filter: blur(1px);
    animation: spora var(--t) ease-in-out var(--d) infinite; }
@keyframes spora { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .9; }
    50% { transform: translate(4vw, -50vh) scale(1); } 100% { transform: translate(-3vw, -105vh) scale(.7); opacity: 0; } }
.tema-wabak .latar-kesan { background: radial-gradient(ellipse at 50% 100%, rgba(120, 200, 60, .35), transparent 60%);
    animation: kabus 4s ease-in-out infinite alternate; }
@keyframes kabus { from { opacity: .4; } to { opacity: 1; } }

/* Pesta Rakyat: konfeti berwarna + cahaya berkelip */
.tema-pesta .latar-zarah i { top: -5%; left: var(--x); width: calc(7px * var(--s)); height: calc(12px * var(--s)); border-radius: 2px;
    animation: konfeti var(--t) linear var(--d) infinite; }
.tema-pesta .latar-zarah i:nth-child(5n) { background: #ff6fa8; } .tema-pesta .latar-zarah i:nth-child(5n+1) { background: #ffd36b; }
.tema-pesta .latar-zarah i:nth-child(5n+2) { background: #6fe3f0; } .tema-pesta .latar-zarah i:nth-child(5n+3) { background: #7dffa1; }
.tema-pesta .latar-zarah i:nth-child(5n+4) { background: #b48cff; }
@keyframes konfeti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(6vw, 115vh) rotate(720deg); opacity: .8; } }
.tema-pesta .latar-kesan { animation: kelip 2.2s ease-in-out infinite; }
@keyframes kelip { 0%, 100% { background: transparent; } 50% { background: radial-gradient(circle at 30% 20%, rgba(255, 210, 110, .14), transparent 45%); } }

/* Zaman Perang: bara naik + nyalaan dari bawah */
.tema-perang .latar-zarah i { left: var(--x); bottom: -4%; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%;
    background: #ffb347; box-shadow: 0 0 8px 2px rgba(255, 120, 40, .8); animation: bara var(--t) ease-out var(--d) infinite; }
@keyframes bara { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; }
    100% { transform: translate(calc((var(--s) - 1) * 20vw), -90vh); opacity: 0; } }
.tema-perang .latar-kesan { background: linear-gradient(to top, rgba(255, 70, 20, .35), transparent 45%);
    animation: nyala 1.6s ease-in-out infinite alternate; }
@keyframes nyala { from { opacity: .55; } to { opacity: 1; } }

/* Revolusi Industri: asap naik + gear berputar */
.tema-industri .latar-zarah i { left: var(--x); bottom: 30%; width: calc(60px * var(--s)); height: calc(60px * var(--s)); border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 180, 175, .35), transparent 70%); animation: asap var(--t) ease-out var(--d) infinite; }
@keyframes asap { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate(8vw, -60vh) scale(2.4); opacity: 0; } }
.tema-industri .latar-zarah b { font-size: 18vh; line-height: 1; color: rgba(160, 185, 190, .14); animation: gear 14s linear infinite; }
.tema-industri .latar-zarah b.g1 { left: 2%; bottom: 4%; }
.tema-industri .latar-zarah b.g2 { right: 3%; top: 8%; font-size: 12vh; animation-direction: reverse; animation-duration: 10s; }
@keyframes gear { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .latar-zarah, .latar-kesan { display: none; } .latar-imej { animation: none !important; } }

/* Tabung dikurangkan & rekod */
.anim-tolak { animation: tolak var(--t, 900ms) ease; }
@keyframes tolak { 0%, 100% { box-shadow: none; transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); box-shadow: 0 0 0 2px #ff5a5a, 0 0 30px rgba(255, 90, 90, .6); } 60% { transform: translateX(-3px); } }
.timbunan.rekod { color: #9ee7b1; }

/* ---------- 9 tema Fenomena tambahan ---------- */
/* Banjir: hujan + paras air beralun */
.tema-banjir .latar-zarah i { top: -15%; left: var(--x); width: 2px; height: calc(60px * var(--s));
    background: linear-gradient(to bottom, transparent, rgba(190, 210, 230, .7)); animation: hujan calc(var(--t) * .5) linear var(--d) infinite; }
.tema-banjir .latar-kesan { top: auto; height: 30%;
    background: repeating-linear-gradient(170deg, rgba(150, 120, 70, .0) 0 18px, rgba(190, 160, 110, .18) 18px 22px), linear-gradient(to top, rgba(110, 90, 50, .55), rgba(110, 90, 50, .1));
    animation: air-naik 6s ease-in-out infinite alternate; }
@keyframes air-naik { from { transform: translateY(12%); background-position: 0 0; } to { transform: translateY(-4%); background-position: 120px 0; } }

/* Musim Peperiksaan: kertas melayang + detik jam */
.tema-peperiksaan .latar-zarah i { top: -8%; left: var(--x); width: calc(16px * var(--s)); height: calc(21px * var(--s)); background: rgba(240, 236, 224, .8);
    box-shadow: inset 0 3px 0 rgba(120, 120, 140, .5), inset 0 8px 0 rgba(240, 236, 224, .8), inset 0 10px 0 rgba(120, 120, 140, .4);
    animation: kertas var(--t) ease-in-out var(--d) infinite; }
@keyframes kertas { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; }
    50% { transform: translate(5vw, 55vh) rotate(160deg); } 100% { transform: translate(-3vw, 112vh) rotate(340deg); opacity: .6; } }
.tema-peperiksaan .latar-kesan { animation: detik 1s steps(1) infinite; }
@keyframes detik { 0% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 120px rgba(255, 255, 255, .05); } }

/* Hari Kantin: wap makanan naik */
.tema-kantin .latar-zarah i { left: var(--x); bottom: 30%; width: calc(26px * var(--s)); height: calc(70px * var(--s)); border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 245, 230, .35), transparent 70%); filter: blur(4px); animation: wap var(--t) ease-out var(--d) infinite; }
@keyframes wap { 0% { transform: translate(0, 0) scaleX(.6); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(2vw, -45vh) scaleX(1.6); opacity: 0; } }
.tema-kantin .latar-kesan { background: radial-gradient(ellipse at 50% 60%, rgba(255, 190, 110, .18), transparent 60%); }

/* Jerebu: kabut tebal bergerak + zarah habuk */
.tema-jerebu .latar-zarah i { left: var(--x); top: calc(var(--s) * 50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(90, 80, 60, .7);
    animation: habuk var(--t) linear var(--d) infinite; }
@keyframes habuk { from { transform: translateX(-10vw); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(30vw); opacity: 0; } }
.tema-jerebu .latar-kesan { background: linear-gradient(90deg, rgba(170, 150, 110, .45), rgba(150, 135, 100, .2), rgba(170, 150, 110, .45));
    background-size: 200% 100%; animation: kabut 10s linear infinite; }
@keyframes kabut { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* Gempa Bumi: gegaran berkala + debu runtuh */
.tema-gempa .latar-imej { animation: gegar-latar 5s ease-in-out infinite; }
@keyframes gegar-latar { 0%, 70%, 100% { transform: none; } 72% { transform: translate(-10px, 4px) rotate(-.4deg); } 74% { transform: translate(10px, -4px) rotate(.4deg); }
    76% { transform: translate(-8px, 2px); } 78% { transform: translate(8px, -2px); } 80% { transform: translate(-4px, 1px); } 82% { transform: none; } }
.tema-gempa .latar-zarah i { top: -5%; left: var(--x); width: calc(6px * var(--s)); height: calc(6px * var(--s)); background: rgba(150, 110, 80, .8);
    animation: runtuh calc(var(--t) * .7) ease-in var(--d) infinite; }
@keyframes runtuh { from { transform: translateY(0) rotate(0); } to { transform: translateY(110vh) rotate(400deg); } }
.tema-gempa .latar-kesan { animation: petir 5s linear infinite; }

/* Konsert Artis: lampu sorot berayun + kilauan */
.tema-artis .latar-kesan { background:
    conic-gradient(from 160deg at 25% -10%, transparent 0 8deg, rgba(255, 240, 190, .16) 8deg 22deg, transparent 22deg),
    conic-gradient(from 175deg at 75% -10%, transparent 0 8deg, rgba(190, 140, 255, .18) 8deg 22deg, transparent 22deg);
    animation: sorot 4s ease-in-out infinite alternate; }
@keyframes sorot { from { filter: hue-rotate(0); transform: skewX(-8deg); } to { filter: hue-rotate(80deg); transform: skewX(8deg); } }
.tema-artis .latar-zarah i { left: var(--x); top: calc(var(--s) * 55%); width: 4px; height: 4px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 10px 3px rgba(255, 220, 255, .8); animation: kilau calc(var(--t) * .4) ease-in-out var(--d) infinite; }
@keyframes kilau { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }

/* Hari Sukan: reben warna rumah sukan + semangat */
.tema-sukan .latar-zarah i { top: -5%; left: var(--x); width: calc(5px * var(--s)); height: calc(16px * var(--s)); border-radius: 2px; animation: konfeti var(--t) linear var(--d) infinite; }
.tema-sukan .latar-zarah i:nth-child(4n) { background: #e74c3c; } .tema-sukan .latar-zarah i:nth-child(4n+1) { background: #f1c40f; }
.tema-sukan .latar-zarah i:nth-child(4n+2) { background: #2e86de; } .tema-sukan .latar-zarah i:nth-child(4n+3) { background: #27ae60; }
.tema-sukan .latar-kesan { background: radial-gradient(ellipse at 80% 10%, rgba(255, 245, 200, .25), transparent 40%); }

/* Tular Media Sosial: reaksi emoji terapung */
.tema-tular .latar-zarah i { left: var(--x); bottom: -6%; font-style: normal; font-size: calc(22px * var(--s)); line-height: 1;
    animation: reaksi var(--t) ease-out var(--d) infinite; }
@keyframes reaksi { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; transform: translateY(-10vh) scale(1.1); }
    100% { transform: translate(calc((var(--s) - 1) * 12vw), -95vh) scale(.9); opacity: 0; } }
.tema-tular .latar-kesan { background: radial-gradient(circle at 50% 50%, rgba(111, 95, 216, .15), transparent 60%); animation: kabus 2s ease-in-out infinite alternate; }

/* Musim Durian: daun & durian gugur */
.tema-durian .latar-zarah i { top: -6%; left: var(--x); font-style: normal; font-size: calc(18px * var(--s)); line-height: 1;
    animation: gugur var(--t) ease-in var(--d) infinite; }
@keyframes gugur { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(4vw, 112vh) rotate(260deg); opacity: .8; } }
.tema-durian .latar-kesan { background: radial-gradient(ellipse at 50% 100%, rgba(190, 200, 60, .2), transparent 55%); }

/* ---------- Tema Siri Hantu · Halloween · Robot · Mecha ---------- */
/* Hantu: roh & hantu terapung perlahan + kabus + lampu berkelip */
.tema-hantu .latar-zarah i { left: var(--x); bottom: -8%; font-style: normal; font-size: calc(26px * var(--s)); line-height: 1; opacity: 0;
    animation: roh calc(var(--t) * 1.6) ease-in-out var(--d) infinite; filter: drop-shadow(0 0 6px rgba(200, 220, 255, .6)); }
.tema-hantu .latar-zarah i:empty { width: calc(40px * var(--s)); height: calc(70px * var(--s)); border-radius: 50% 50% 40% 40%;
    background: radial-gradient(ellipse at 50% 35%, rgba(220, 235, 255, .35), transparent 70%); }
@keyframes roh { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .75; }
    50% { transform: translate(5vw, -45vh) scale(1.05); } 80% { opacity: .5; } 100% { transform: translate(-4vw, -100vh) scale(.9); opacity: 0; } }
.tema-hantu .latar-kesan { background: linear-gradient(to top, rgba(190, 210, 240, .28), transparent 40%); animation: kabus-hantu 5s ease-in-out infinite alternate; }
@keyframes kabus-hantu { 0% { opacity: .5; } 48% { opacity: 1; } 50% { opacity: .2; } 52% { opacity: 1; } 100% { opacity: .6; } }

/* Gerhana: bara merah gugur + denyutan merah + kelawar melintas */
.tema-gerhana .latar-zarah i { left: var(--x); top: -6%; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%;
    background: #ff4b4b; box-shadow: 0 0 8px 2px rgba(255, 60, 60, .7); animation: gugur var(--t) linear var(--d) infinite; }
.tema-gerhana .latar-zarah i:not(:empty) { width: auto; height: auto; background: none; box-shadow: none; font-style: normal; font-size: calc(24px * var(--s));
    top: calc(var(--s) * 30%); left: -10%; animation: kelawar var(--t) linear var(--d) infinite; }
@keyframes kelawar { 0% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(30vw, -4vh) scaleY(.6); } 50% { transform: translate(60vw, 2vh) scaleY(1); }
    75% { transform: translate(90vw, -3vh) scaleY(.6); } 100% { transform: translate(125vw, 0) scaleY(1); } }
.tema-gerhana .latar-kesan { background: radial-gradient(circle at 50% 30%, rgba(255, 40, 60, .35), transparent 45%); animation: kabus 2.6s ease-in-out infinite alternate; }

/* Labu: kelawar & daun luruh + cahaya labu berkelip */
.tema-labu .latar-zarah i { left: var(--x); top: -6%; font-style: normal; font-size: calc(20px * var(--s)); line-height: 1; animation: gugur var(--t) ease-in var(--d) infinite; }
.tema-labu .latar-zarah i:nth-child(4n) { top: calc(var(--s) * 30%); left: -10%; animation: kelawar calc(var(--t) * .9) linear var(--d) infinite; }
.tema-labu .latar-kesan { background: radial-gradient(ellipse at 35% 85%, rgba(255, 150, 40, .35), transparent 40%); animation: lilin 1.3s steps(2) infinite; }
@keyframes lilin { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Sihir: gelembung hijau naik + kilauan */
.tema-sihir .latar-zarah i { left: calc(35% + var(--x) * .3); bottom: 22%; width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 50%;
    border: 2px solid rgba(160, 255, 130, .75); background: rgba(120, 255, 120, .12); animation: gelembung calc(var(--t) * .7) ease-out var(--d) infinite; }
.tema-sihir .latar-zarah i:not(:empty) { left: var(--x); top: calc(var(--s) * 45%); bottom: auto; border: 0; background: none; font-style: normal;
    font-size: calc(16px * var(--s)); animation: kelip-bintang 2.4s ease-in-out var(--d) infinite; }
@keyframes gelembung { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc((var(--s) - 1) * 14vw), -60vh) scale(1.3); opacity: 0; } }
@keyframes kelip-bintang { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
.tema-sihir .latar-kesan { background: radial-gradient(ellipse at 50% 70%, rgba(110, 255, 120, .3), transparent 45%); animation: kabus 2s ease-in-out infinite alternate; }

/* Robot: percikan api + garis imbasan */
.tema-robot .latar-zarah i { left: var(--x); bottom: 25%; width: 3px; height: calc(10px * var(--s)); border-radius: 2px; background: #ffe27a;
    box-shadow: 0 0 6px #ffb800; animation: percik calc(var(--t) * .35) ease-out var(--d) infinite; }
@keyframes percik { 0% { transform: translate(0, 0) rotate(-30deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(calc((var(--s) - 1) * 30vw), 25vh) rotate(40deg); opacity: 0; } }
.tema-robot .latar-kesan { background: linear-gradient(to bottom, transparent 0, rgba(47, 211, 200, .28) 2px, transparent 6px) 0 0 / 100% 100% no-repeat;
    animation: imbas 3.5s linear infinite; }
@keyframes imbas { from { background-position: 0 -10%; } to { background-position: 0 110%; } }

/* Siber: hujan kod digital */
.tema-siber .latar-zarah i { left: var(--x); top: -10%; font-style: normal; font-family: monospace; font-weight: 700; font-size: calc(18px * var(--s));
    color: #00ffa3; text-shadow: 0 0 6px #00ffa3; animation: kod calc(var(--t) * .6) linear var(--d) infinite; }
@keyframes kod { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(115vh); opacity: .2; } }
.tema-siber .latar-kesan { background: repeating-linear-gradient(0deg, rgba(0, 255, 163, .05) 0 2px, transparent 2px 5px); animation: kabus 1.2s ease-in-out infinite alternate; }

/* Mecha: lampu sorot menyapu + habuk naik */
.tema-mecha .latar-zarah i { left: var(--x); bottom: -4%; width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%;
    background: rgba(255, 207, 58, .8); animation: bara calc(var(--t) * 1.4) ease-out var(--d) infinite; }
.tema-mecha .latar-kesan { background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(200, 230, 255, .2) 12deg, transparent 24deg);
    animation: sorot 6s ease-in-out infinite alternate; }
@keyframes sorot { from { transform: translateX(-25%); } to { transform: translateX(25%); } }

/* Angkasa: bintang meluncur (warp) + meteor */
.tema-angkasa .latar-zarah i { top: calc(var(--s) * 60%); right: -10%; width: calc(60px * var(--s)); height: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, .9), transparent); animation: warp calc(var(--t) * .35) linear var(--d) infinite; }
.tema-angkasa .latar-zarah i:nth-child(6n) { height: 3px; background: linear-gradient(to left, #ffb347, transparent); transform: rotate(-20deg); }
@keyframes warp { from { transform: translateX(0); } to { transform: translateX(-130vw); } }
.tema-angkasa .latar-kesan { background: radial-gradient(circle at 75% 80%, rgba(90, 176, 255, .22), transparent 40%); animation: kabus 4s ease-in-out infinite alternate; }

/* ---------- Barisan Pakar: upacara kemenangan ---------- */
.god-mode { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; overflow: hidden;
    background: radial-gradient(ellipse at 50% 55%, rgba(255, 214, 110, .5), rgba(60, 30, 0, .9) 55%, rgba(10, 5, 0, .97) 85%);
    animation: god-masuk var(--t, 5600ms) ease forwards; pointer-events: none; --emas: #ffd76a; --emas2: #ff9a00; }
.god-mode::before { content: ''; position: absolute; inset: -60%; z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .16) 0 6deg, transparent 6deg 18deg); animation: gear 14s linear infinite; }
.god-mode::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 60%, rgba(255, 250, 220, .55), transparent 35%);
    opacity: 0; animation: god-satu .9s ease-out var(--satu, 2800ms) both; }
.god-mode .gm-mahkota { font-size: clamp(2.6rem, 9vh, 5rem); filter: drop-shadow(0 0 18px var(--emas)) drop-shadow(0 6px 0 rgba(0, 0, 0, .4));
    animation: god-mahkota 1.1s cubic-bezier(.3, 1.6, .5, 1) .15s both, god-apung 2.4s ease-in-out 1.3s infinite alternate; }
.god-mode .gm-tajuk { position: relative; font-family: var(--fon-tajuk); font-weight: 800; font-size: clamp(1.7rem, min(8.5vh, 10.5vw), 5.4rem); letter-spacing: .12em; line-height: 1.05; text-align: center; padding: 0 8px;
    background: linear-gradient(100deg, #8a5a00 0%, #ffe9a3 22%, #fff 30%, #ffd76a 38%, #b07400 60%, #ffe9a3 80%, #8a5a00 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 190, 60, .75)) drop-shadow(0 3px 0 #5a3500);
    animation: god-tajuk .9s cubic-bezier(.2, 1.3, .4, 1) .35s both, god-kilau 2.6s linear .8s infinite; }
.god-mode .gm-kad { display: flex; gap: clamp(10px, 2.4vw, 34px); align-items: flex-end; margin-top: 1vh; }
.god-mode .gm-tiang { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: god-kad-naik .7s cubic-bezier(.2, 1.5, .4, 1) var(--mula) both; }
.god-mode .gm-cahaya { position: absolute; left: 50%; bottom: 18%; width: 140%; height: 70vh; transform: translateX(-50%); transform-origin: bottom; z-index: -1;
    background: linear-gradient(to top, rgba(255, 225, 140, .75), rgba(255, 225, 140, .15) 60%, transparent); filter: blur(6px);
    clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); animation: god-tiang .8s ease-out var(--mula) both; }
.god-mode .gm-tiang .kad { --kw: clamp(84px, 15vh, 160px); --kh: clamp(118px, 21vh, 224px); box-shadow: 0 0 0 2px var(--emas), 0 0 28px rgba(255, 200, 80, .8);
}
.god-mode .gm-nama { font-family: var(--fon-tajuk); font-weight: 700; font-size: clamp(.7rem, 1.8vh, 1rem); color: #fff6d8; padding: 2px 12px; border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(120, 70, 0, .9), transparent); text-shadow: 0 1px 3px #000; white-space: nowrap;
    animation: god-naik .5s ease calc(var(--mula) + 400ms) both; }
.god-mode .gm-rantai { width: min(70vw, 620px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--emas), #fff, var(--emas), transparent);
    box-shadow: 0 0 14px var(--emas); transform: scaleX(0); animation: god-rantai .7s ease-out var(--satu, 2800ms) both; }
.god-mode .gm-sub { color: #fff; font-size: clamp(.85rem, 2.4vh, 1.25rem); text-shadow: 0 2px 6px #000; text-align: center; padding: 0 16px;
    animation: god-naik .6s ease calc(var(--satu, 2800ms) + 300ms) both; }
.god-mode .gm-percik { position: absolute; inset: 0; z-index: -1; }
.god-mode .gm-percik i { position: absolute; top: -4%; left: var(--x); width: 6px; height: 6px; border-radius: 50%; background: #fff3c4;
    box-shadow: 0 0 8px 2px var(--emas); transform: scale(var(--s)); animation: god-percik 3.2s linear var(--l) infinite; }
.god-mode.lawan { background: radial-gradient(ellipse at 50% 55%, rgba(255, 70, 70, .45), rgba(50, 0, 0, .92) 55%, rgba(10, 0, 0, .97) 85%); --emas: #ff7a7a; --emas2: #ff2a2a; }
.god-mode.lawan .gm-tajuk { background-image: linear-gradient(100deg, #5a0000 0%, #ffb3b3 22%, #fff 30%, #ff6b6b 38%, #8a0000 60%, #ffb3b3 80%, #5a0000 100%);
    filter: drop-shadow(0 0 14px rgba(255, 60, 60, .8)) drop-shadow(0 3px 0 #400); }
.god-mode.lawan .gm-cahaya { background: linear-gradient(to top, rgba(255, 110, 110, .7), rgba(255, 110, 110, .12) 60%, transparent); }
@keyframes god-masuk { 0% { opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes god-mahkota { from { transform: translateY(-60vh) rotate(-20deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes god-apung { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes god-tajuk { from { transform: scale(2.4); opacity: 0; letter-spacing: .6em; } to { transform: none; opacity: 1; } }
@keyframes god-kilau { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes god-tiang { from { transform: translateX(-50%) scaleY(0); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(-50%) scaleY(1); opacity: .85; } }
@keyframes god-kad-naik { from { transform: translateY(30vh) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes god-naik { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes god-rantai { to { transform: scaleX(1); } }
@keyframes god-satu { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .35; } }
@keyframes god-percik { from { transform: translateY(0) scale(var(--s)); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(105vh) scale(var(--s)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .god-mode *, .god-mode::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }
.timbunan.pakar-kira { color: #ffd76a; }
.timbunan.pakar-kira.hampir { animation: god-denyut .7s ease-in-out infinite alternate; color: #fff1b0; text-shadow: 0 0 8px #ffb800; }


/* ---------- Tangan pemain di telefon: kad penuh (tidak bertindih), boleh dileret ---------- */
@media (max-width: 640px), (max-height: 560px) {
    .tangan { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; padding-left: 4px; padding-right: 4px; gap: 6px; }
    .tangan .kad { margin-left: 0 !important; scroll-snap-align: start; }
    .tangan .kad:hover { transform: none; }
    .tangan::before, .tangan::after { content: ''; flex: 0 0 2px; }   /* tengahkan bila muat; ruang di hujung leretan */
    .tangan::before { margin-left: auto; } .tangan::after { margin-right: auto; }
    .tangan.boleh-leret { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
/* Potret: kad di tangan lebih besar daripada kad di medan supaya teks boleh dibaca */
@media (max-width: 640px) and (min-height: 561px) {
    .tangan { --kh: clamp(100px, 16dvh, 150px); --kw: calc(var(--kh) * .71); height: calc(var(--kh) + 12px); }
    .tangan .kad .k-teks { height: 4.4em; }
}

/* ---------- Zon Dek & Kuburan setiap pemain ---------- */
body.papan-permainan { --zon-w: calc(var(--kh) * .74 + 6px); }
.zon { flex: 0 0 auto; width: var(--zon-w); height: calc(var(--kh) + 6px); position: relative; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; }
.zon-kosong { visibility: hidden; }
.medan-lawan .baris:first-child .zon, .medan-saya .baris:last-child .zon { height: calc(var(--kh) * .78); }
.zon-dek, .zon-kubur { border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .28); cursor: pointer; }
.zon-dek:hover, .zon-kubur:hover { border-color: var(--emas); }
.zon { --kz: calc(var(--kh) * .9); }
.medan-lawan .baris:first-child .zon, .medan-saya .baris:last-child .zon { --kz: calc(var(--kh-m) * .95); }
.zon .kad { --kh: var(--kz); --kw: calc(var(--kz) * .71); pointer-events: none; }
.zon-dek .kad.lapis { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + var(--l) * 1.5px), calc(-50% - var(--l) * 2px));
    box-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
.zon-dek .kad.lapis .logo { font-size: 1.1em; }
.zon-kubur .kad { filter: grayscale(.55) brightness(.75); transform: rotate(-4deg); }
.zon-kira { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: .62rem; font-weight: 700;
    padding: 0 6px; border-radius: 10px; background: #0d1020; border: 1px solid rgba(255, 255, 255, .25); color: var(--teks); }
.zon-label { font-size: .65rem; color: var(--redup); text-align: center; line-height: 1.2; }
.zon-label:first-line { font-size: 1.3rem; }
.medan-lawan .zon-dek { border-color: rgba(255, 107, 129, .35); } .medan-saya .zon-dek { border-color: rgba(226, 184, 74, .4); }
/* Ruang zon diambil kira dalam saiz kad (5 lajur termasuk zon) */
body.papan-permainan { --kh: max(46px, min(calc((100vh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 110px) / 5.1), 150px)); }
@supports (height: 100dvh) {
    body.papan-permainan { --kh: max(46px, min(calc((100dvh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 110px) / 5.1), 150px)); }
}
@media (max-width: 640px) {
    body.papan-permainan { --kh: max(40px, min(calc((100dvh - var(--tetap)) / var(--pekali)), calc((100vw - 40px) / 5.15), 150px)); }
    .baris { gap: 4px; }
    .zon-kosong { display: none; }
}
@media (max-height: 560px) {
    body.papan-permainan { --kh: max(34px, min(calc((100dvh - var(--tetap)) / var(--pekali)), calc((100vw - var(--log-w) - 110px) / 5.1), 150px)); }
    .zon-kira { font-size: .55rem; bottom: -4px; }
}

/* ---------- Pilih kad untuk dibuang (had tangan) ---------- */
.pilih-buang { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 22px; }
.pb-item { position: relative; cursor: pointer; transition: transform .2s ease; border-radius: 10px; }
.pb-item .kad { --kw: 92px; --kh: 130px; font-size: 8px; }
.pb-item:hover { transform: translateY(-4px); }
.pb-item .pb-tanda { position: absolute; top: -8px; right: -8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: none;
    align-items: center; justify-content: center; background: #e5484d; box-shadow: 0 0 0 2px #fff; font-size: .8rem; }
.pb-item.dipilih { transform: translateY(-12px) rotate(-3deg); animation: pb-goyang .5s ease-in-out infinite alternate; }
.pb-item.dipilih .kad { box-shadow: 0 0 0 3px #e5484d, 0 0 18px rgba(229, 72, 77, .8); filter: saturate(.6); }
.pb-item.dipilih .pb-tanda { display: flex; }
@keyframes pb-goyang { from { rotate: -3deg; } to { rotate: 3deg; } }
.pb-item.terbuang { animation: pb-terbuang .45s ease-in forwards; }
@keyframes pb-terbuang { to { transform: translateY(60px) rotate(25deg) scale(.4); opacity: 0; } }

/* =====================================================================
   PANEL TINDAKAN DI ATAS KAD & MOD SASARAN (anak panah)
   ===================================================================== */
.aksi-kad { position: fixed; z-index: 1060; width: min(300px, calc(100vw - 12px)); background: rgba(12, 15, 36, .97);
    border: 1px solid rgba(226, 184, 74, .55); border-radius: 12px; padding: 8px; color: var(--teks);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4); animation: ak-masuk .18s ease-out; }
.aksi-kad .ak-ekor { position: absolute; left: var(--ekor, 50%); bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: inherit; border-right: 1px solid rgba(226, 184, 74, .55); border-bottom: 1px solid rgba(226, 184, 74, .55); }
.aksi-kad.di-bawah .ak-ekor { bottom: auto; top: -7px; border: 0; border-left: 1px solid rgba(226, 184, 74, .55); border-top: 1px solid rgba(226, 184, 74, .55); }
@keyframes ak-masuk { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.ak-ikon { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ak-btn { flex: 1 1 0; min-width: 52px; max-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 1px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; padding: 5px 4px 4px; cursor: pointer;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.ak-btn .ak-sym { font-size: 1.35rem; line-height: 1.1; }
.ak-btn small { font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.ak-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ak-btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.8); }
.ak-btn.merah { background: linear-gradient(160deg, #d9483b, #8e2219); border-color: #ff8a7a; }
.ak-btn.biru  { background: linear-gradient(160deg, #3f6fd1, #1f3a7a); border-color: #8fb0ff; }
.ak-btn.hijau { background: linear-gradient(160deg, #23a36b, #0d5a39); border-color: #7de0b0; }
.ak-btn.emas  { background: linear-gradient(160deg, #e2b84a, #8a6612); border-color: #ffe39a; color: #1b1300; }
.ak-btn.cyan  { background: linear-gradient(160deg, #2ab3c2, #0e5560); border-color: #8ce9f2; }
.ak-btn.kelabu { background: rgba(255, 255, 255, .08); }
.ak-teks { margin-top: 6px; font-size: .78rem; line-height: 1.35; }
.ak-nama { font-weight: 700; color: var(--emas); }
.ak-nama span { font-weight: 400; color: var(--redup); font-size: .72rem; }
.ak-kesan { opacity: .92; }
.ak-nota { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .1); color: #d8dcf5; }

/* Kad yang dipilih terangkat */
.kad.kad-dipilih { outline: 2px solid var(--emas); outline-offset: 2px; box-shadow: 0 0 18px rgba(226, 184, 74, .8), 0 6px 14px rgba(0, 0, 0, .6); z-index: 5; }
.tangan .kad.kad-dipilih { transform: translateY(-16px) scale(1.04) !important; }

/* Mod sasaran */
body.mod-sasar .slot:not(.calon-sasar) .kad, body.mod-sasar .tangan .kad:not(.kad-dipilih) { filter: brightness(.6); }
.calon-sasar { position: relative; cursor: crosshair !important; animation: calon-denyut 1s ease-in-out infinite; }
.calon-sasar.w-merah { box-shadow: 0 0 0 2px #ff5a4a, 0 0 22px rgba(255, 90, 74, .75) !important; }
.calon-sasar.w-hijau { box-shadow: 0 0 0 2px #39d98a, 0 0 22px rgba(57, 217, 138, .75) !important; }
@keyframes calon-denyut { 50% { filter: brightness(1.25); } }
.penanda-sasar { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); z-index: 6; pointer-events: none;
    font-size: 1.3rem; font-weight: 900; color: #ff5a4a; text-shadow: 0 0 8px #000, 0 0 12px rgba(255, 90, 74, .9); animation: penanda-lompat .7s ease-in-out infinite; }
.w-hijau > .penanda-sasar { color: #39d98a; text-shadow: 0 0 8px #000, 0 0 12px rgba(57, 217, 138, .9); }
.pemain-bar .penanda-sasar { top: 50%; left: auto; right: 12px; transform: translateY(-50%); }
@keyframes penanda-lompat { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
.panah-sasar { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1055; overflow: visible; }
.panah-sasar .garis-panah { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 9; animation: panah-alir .5s linear infinite;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.panah-sasar.merah .garis-panah { stroke: #ff5a4a; } .panah-sasar.merah .mata { fill: #ff5a4a; }
.panah-sasar.hijau .garis-panah { stroke: #39d98a; } .panah-sasar.hijau .mata { fill: #39d98a; }
@keyframes panah-alir { to { stroke-dashoffset: -21; } }

/* Pilih Watak untuk berundur */
.calon-korban { cursor: pointer; box-shadow: 0 0 0 2px #b48cff, 0 0 16px rgba(180, 140, 255, .55) !important; position: relative; }
.korban-dipilih::after { content: '↩'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6;
    font-size: 2rem; font-weight: 900; color: #fff; background: rgba(120, 70, 220, .55); border-radius: 8px; text-shadow: 0 2px 6px #000; }
@media (prefers-reduced-motion: reduce) { .calon-sasar, .penanda-sasar, .panah-sasar .garis-panah { animation: none; } }
.lencana.magic-set { background: #23a36b; color: #eafff4; }
@media (max-width: 640px), (max-height: 560px) { .tangan .kad.kad-dipilih { transform: none !important; } }

/* =====================================================================
   KUIZ PAKAR — soalan & jawapan dalam bentuk kad
   Setiap jawapan: warna berbeza + simbol bentuk berbeza (mesra rabun warna; palet Okabe-Ito)
   ===================================================================== */
.kuiz-kad { position: relative; border-radius: 14px; padding: 14px 16px 12px; color: #fff;
    background: linear-gradient(160deg, #3b2a7a, #171041); border: 2px solid #e2b84a;
    box-shadow: 0 0 0 4px rgba(226, 184, 74, .15), 0 10px 26px rgba(0, 0, 0, .5); }
.kuiz-kad::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(226, 184, 74, .35); border-radius: 9px; pointer-events: none; }
.kuiz-kad .kk-kepala { display: flex; justify-content: space-between; align-items: center; font-family: var(--fon-tajuk); font-weight: 800;
    letter-spacing: .12em; color: var(--emas); font-size: .85rem; margin-bottom: 8px; }
.kuiz-kad .kk-masa { font-family: var(--fon-teks); letter-spacing: 0; background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 1px 8px; color: #fff; }
.kuiz-kad .kk-soalan { font-size: 1.12rem; line-height: 1.5; min-height: 3em; margin-bottom: 10px; }
.kuiz-kad .pemasa { height: 8px; border-radius: 4px; }
.kuiz-kad.belakang-kuiz { width: 180px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 42%, rgba(226, 184, 74, .25) 0 22%, transparent 23%),
        repeating-conic-gradient(from 0deg at 50% 42%, #2a1f63 0 9deg, #36287a 9deg 18deg);
    animation: kuiz-goyang 2.4s ease-in-out infinite; }
.belakang-kuiz .kk-logo { font-size: 3rem; filter: drop-shadow(0 0 10px rgba(226, 184, 74, .8)); }
.belakang-kuiz .kk-tajuk { font-family: var(--fon-tajuk); font-weight: 800; letter-spacing: .14em; color: var(--emas); margin-top: 6px; }
.belakang-kuiz .kk-sub { font-size: .72rem; color: #cfc6ff; }
@keyframes kuiz-goyang { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
.dedah-kuiz { animation: dedah-kuiz .6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes dedah-kuiz { from { transform: perspective(800px) rotateY(90deg); filter: brightness(2); } to { transform: none; filter: none; } }

.kuiz-jawapan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kuiz-jawapan.n2 { grid-template-columns: 1fr 1fr; }
.kuiz-jawapan.satu { grid-template-columns: minmax(0, 360px); justify-content: center; margin-top: 4px; }
@media (max-width: 520px) { .kuiz-jawapan { grid-template-columns: 1fr; } }
.kuiz-pilihan { --w: #555; --t: #fff; position: relative; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 64px;
    padding: 10px 34px 10px 10px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .55); color: var(--t);
    background: linear-gradient(160deg, color-mix(in srgb, var(--w) 100%, #fff 12%), color-mix(in srgb, var(--w) 75%, #000)); background-color: var(--w);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--w) 60%, #000), 0 8px 16px rgba(0, 0, 0, .35); font-weight: 600; line-height: 1.3;
    animation: kuiz-masuk .45s cubic-bezier(.2, 1.2, .4, 1) calc(.35s + var(--i, 0) * .09s) both; transition: transform .12s ease, box-shadow .12s ease, opacity .2s; }
button.kuiz-pilihan { cursor: pointer; width: 100%; }
button.kuiz-pilihan:hover:not(:disabled) { transform: translateY(-3px); }
button.kuiz-pilihan:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--w) 60%, #000); }
button.kuiz-pilihan:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes kuiz-masuk { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
.kp-bentuk { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; line-height: 1; background: rgba(0, 0, 0, .22); color: var(--t); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.kp-teks { flex: 1; font-size: .95rem; }
.kp-huruf { position: absolute; top: 6px; right: 9px; font-size: .72rem; font-weight: 800; opacity: .8; }
.kp-tanda { position: absolute; bottom: 6px; right: 9px; font-size: 1.1rem; font-weight: 900; }
.kuiz-pilihan.p0 { --w: #B84E00; }               /* ▲ jingga-merah */
.kuiz-pilihan.p1 { --w: #0072B2; }               /* ◆ biru */
.kuiz-pilihan.p2 { --w: #E69F00; --t: #1d1200; } /* ● kuning */
.kuiz-pilihan.p3 { --w: #009E73; --t: #00170f; } /* ■ hijau */
.kuiz-pilihan.p4 { --w: #CC79A7; --t: #26061a; } /* ★ merah jambu */
.kuiz-pilihan.p5 { --w: #56B4E9; --t: #04202f; } /* ⬢ biru langit */
.kuiz-pilihan.dipilih { outline: 4px solid #fff; outline-offset: 2px; transform: scale(1.03); }
.kuiz-jawapan:has(.dipilih) .kuiz-pilihan:not(.dipilih) { opacity: .4; }
.kuiz-pilihan.betul { box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(125, 255, 161, .8); animation: none; }
.kuiz-pilihan.salah { opacity: .85; animation: none; text-decoration: line-through; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .kuiz-pilihan, .dedah-kuiz, .belakang-kuiz { animation: none !important; } }
.calon-sasar.tanpa-panah > .penanda-sasar { top: 50%; transform: translate(-50%, -50%); font-size: 2rem; animation: penanda-denyut .9s ease-in-out infinite; text-shadow: 0 0 10px #000; }
@keyframes penanda-denyut { 0%, 100% { opacity: .95; scale: 1; } 50% { opacity: .6; scale: .82; } }

/* =====================================================================
   NPC BERCAKAP & BEREAKSI
   ===================================================================== */
.papan { position: relative; }
.npc-sembang.ns-tetap { position: fixed; z-index: 1058; }
.npc-sembang { position: absolute; z-index: 30; top: 40px; right: 8px; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 8px; pointer-events: none; max-width: min(420px, 70%); }
.ns-avatar { pointer-events: auto; cursor: pointer; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; background: radial-gradient(circle at 40% 35%, #2f377a, #10143a); border: 2px solid rgba(255, 107, 129, .7);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6); overflow: hidden; transition: transform .2s; }
.ns-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ns-gelembung { position: relative; background: #fff8e6; color: #1d1708; border-radius: 14px; padding: 8px 13px; font-size: .95rem; font-weight: 600; line-height: 1.4;
    border: 2px solid rgba(0, 0, 0, .35); box-shadow: 0 6px 22px rgba(0, 0, 0, .6);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55); opacity: 0; transform: translateX(8px) scale(.9); transform-origin: right center; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.ns-gelembung::before { content: ''; position: absolute; right: -7px; top: 16px; border: 7px solid transparent; border-right: 0; border-left-color: #fff8e6; }
.ns-nama { display: block; font-size: .68rem; color: #a5381f; letter-spacing: .04em; }
.npc-sembang.papar .ns-gelembung { opacity: 1; transform: none; }
.npc-sembang:not(.papar) .ns-avatar { opacity: .8; }
.ns-avatar.reaksi { animation: ns-yakin .6s ease; }
.emosi-gembira .ns-avatar.reaksi { animation: ns-lompat .7s ease 2; border-color: #7dffa1; }
.emosi-marah .ns-avatar.reaksi { animation: ns-gegar .45s ease 2; border-color: #ff4d4d; box-shadow: 0 0 20px rgba(255, 77, 77, .8); }
.emosi-sedih .ns-avatar.reaksi { animation: ns-sedih 1.2s ease forwards; filter: grayscale(.6); }
.emosi-terkejut .ns-avatar.reaksi { animation: ns-terkejut .5s ease; border-color: #ffd76a; }
.emosi-licik .ns-avatar.reaksi { animation: ns-licik .9s ease; border-color: #c084fc; }
.emosi-risau .ns-avatar.reaksi { animation: ns-gegar .6s ease 1; border-color: #fbbf24; }
.emosi-fikir .ns-avatar.reaksi { animation: ns-sedih .8s ease alternate 2; }
.emosi-marah .ns-gelembung { background: #ffe9e6; } .emosi-gembira .ns-gelembung { background: #ecffe9; } .emosi-licik .ns-gelembung { background: #f3e9ff; }
.emosi-marah .ns-gelembung::before { border-left-color: #ffe9e6; } .emosi-gembira .ns-gelembung::before { border-left-color: #ecffe9; } .emosi-licik .ns-gelembung::before { border-left-color: #f3e9ff; }
@keyframes ns-yakin { 50% { transform: scale(1.12); } }
@keyframes ns-lompat { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
@keyframes ns-gegar { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-5deg); } 40% { transform: translateX(5px) rotate(5deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ns-sedih { to { transform: translateY(4px) rotate(-8deg) scale(.95); } }
@keyframes ns-terkejut { 0% { transform: scale(1); } 30% { transform: scale(1.3) translateY(-6px); } 100% { transform: scale(1); } }
@keyframes ns-licik { 30% { transform: rotate(-12deg) scale(1.05); } 60% { transform: rotate(10deg) scale(1.05); } }
@media (max-width: 640px), (max-height: 560px) {
    .npc-sembang { top: 34px; max-width: 86%; }
    .npc-sembang.ns-tetap { max-width: calc(100vw - 16px); left: 8px; justify-content: flex-start; }
    .ns-avatar { width: 40px; height: 40px; font-size: 1.4rem; }
    .ns-gelembung { font-size: .9rem; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) { .ns-avatar.reaksi { animation: none !important; } }

/* ---------- Rantai (Chain Reaction) ---------- */
.kilat.ungu { background: radial-gradient(circle, rgba(170, 110, 255, .45), rgba(170, 110, 255, .06)); }
.rantai-tengah { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; animation: kad-tengah var(--t, 2000ms) ease forwards; }
.rantai-tengah .rt-label { font-family: var(--fon-tajuk); font-weight: 800; letter-spacing: .18em; font-size: clamp(1.3rem, 4vw, 2rem); color: #d9b8ff;
    text-shadow: 0 0 18px rgba(170, 110, 255, .9), 0 2px 8px #000; margin-bottom: 10px; }
.rantai-tengah.lawan .rt-label { color: #ffb3c4; text-shadow: 0 0 18px rgba(255, 70, 110, .9), 0 2px 8px #000; }
.rantai-tengah .rt-kad { position: relative; display: flex; justify-content: center; align-items: center; }
.rantai-tengah .rt-dibalas { opacity: .55; transform: rotate(-8deg) translateX(18%); filter: grayscale(.4); }
.rantai-tengah .rt-balas { margin-left: -12%; transform: rotate(6deg); animation: rt-hentak .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.rantai-tengah .rt-balas .kad { box-shadow: 0 0 50px rgba(170, 110, 255, .95), 0 0 0 3px #c9a2ff; }
.rantai-tengah .rt-sub { margin-top: 10px; color: #fff; font-weight: 700; text-shadow: 0 2px 6px #000; }
@keyframes rt-hentak { from { transform: rotate(30deg) translate(60%, -30%) scale(1.4); opacity: 0; } }
.batal-rantai { animation: kad-tengah var(--t, 1300ms) ease forwards; }
.batal-rantai .kad { filter: grayscale(.85) brightness(.7); }
.batal-rantai .kt-label { color: #ff8f8f; }
.batal-cop { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-18deg); font-family: var(--fon-tajuk); font-weight: 800;
    font-size: clamp(1.6rem, 6vw, 2.6rem); color: #ff4d4d; border: 4px solid #ff4d4d; border-radius: 10px; padding: 0 14px; letter-spacing: .15em;
    background: rgba(20, 0, 0, .55); animation: batal-cop .35s cubic-bezier(.3, 1.8, .5, 1) .25s both; }
@keyframes batal-cop { from { transform: translate(-50%, -50%) rotate(-18deg) scale(2.4); opacity: 0; } }
/* Modal Rantai */
.rantai-baris { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.rantai-pautan { position: relative; text-align: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.rantai-pautan.lawan { box-shadow: inset 0 0 0 1px rgba(255, 90, 120, .5); }
.rantai-pautan.saya { box-shadow: inset 0 0 0 1px rgba(110, 200, 255, .5); }
.rantai-pautan:last-child { box-shadow: 0 0 0 2px #c9a2ff, 0 0 18px rgba(170, 110, 255, .6); }
.rantai-pautan .rp-no { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: #7c4dff; color: #fff; font-weight: 800; font-size: .75rem;
    display: flex; align-items: center; justify-content: center; z-index: 3; }
.rantai-pautan .rp-label { font-size: .7rem; margin-top: 4px; color: var(--redup); }
.rantai-sambung { font-size: 1.3rem; color: #c9a2ff; }
/* Pencetus & Magic Berterusan */
.anim-cetus { animation: anim-cetus var(--t, 650ms) ease; }
@keyframes anim-cetus { 30% { filter: brightness(1.6) drop-shadow(0 0 12px #ffd76a); transform: scale(1.06); } }
.slot.kekal .kad { box-shadow: 0 0 0 2px #ffd76a, 0 0 16px rgba(255, 215, 106, .55); }
.lencana.kekal { background: #ffd76a; color: #2a1d00; }

/* ---------- Teka-teki (HUD) ---------- */
.teka-hud { border: 1px solid rgba(160, 120, 255, .6); background: rgba(124, 77, 255, .18); color: #e8dcff; border-radius: 999px; padding: 2px 12px; font-size: .78rem; white-space: nowrap; }
.teka-hud:hover { background: rgba(124, 77, 255, .32); }
.teka-hud .th-akhir { color: #ffb3b3; font-weight: 700; animation: denyut 1.2s ease-in-out infinite; }

/* v22: Lagenda & kunci */
.sepanduk.lagenda { border-color: rgba(255, 214, 102, .9); background: linear-gradient(90deg, transparent, rgba(46, 10, 70, .95) 15%, rgba(46, 10, 70, .95) 85%, transparent); }
.sepanduk.lagenda .sp-tajuk { color: #ffe08a; letter-spacing: .12em; text-shadow: 0 0 18px rgba(255, 210, 90, .9), 0 0 42px rgba(200, 90, 255, .6); }
.anim-lagenda { filter: drop-shadow(0 0 14px rgba(255, 214, 102, .95)) drop-shadow(0 0 26px rgba(190, 90, 255, .6)); }
.timbunan.kunci-lencana { background: rgba(229, 72, 77, .25); border: 1px solid rgba(229, 72, 77, .6); color: #ffb3b8; }

/* v18.3: pilih Watak berundur — pita arahan & pengesahan seruan (tidak menutup medan) */
.pita-korban { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 1060; display: flex; align-items: center; gap: 10px;
    width: min(620px, calc(100vw - 16px)); padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(20, 16, 44, .96); border: 1px solid rgba(180, 140, 255, .6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: .85rem; color: #ece6ff; animation: pita-masuk .25s ease-out; }
.pita-korban .pk-teks { flex: 1; line-height: 1.3; }
.pita-korban .pk-kira { color: #ffd76a; }
.pita-korban .pk-batal { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: .85rem; }
@keyframes pita-masuk { from { opacity: 0; transform: translate(-50%, -10px); } }
.sahkan-seru { position: fixed; inset: 0; z-index: 1065; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(5, 6, 15, .45); }
.sahkan-seru .ss-kotak { width: min(460px, 100%); background: #151a36; border: 1px solid rgba(226, 184, 74, .55); border-radius: 18px; padding: 16px; text-align: center;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .55); animation: ss-naik .22s ease-out; margin-bottom: max(0px, env(safe-area-inset-bottom)); }
@keyframes ss-naik { from { transform: translateY(30px); opacity: 0; } }
.sahkan-seru .ss-tajuk { font-size: 1.05rem; margin-bottom: 10px; }
.sahkan-seru .ss-kad { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sahkan-seru .ss-undur { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sahkan-seru .ss-undur .kad { width: 74px; font-size: .5rem; pointer-events: none; }
.sahkan-seru .ss-undur small { color: #aab3c8; font-size: .7rem; }
.sahkan-seru .ss-anak { color: #e2b84a; font-size: 1.3rem; }
.sahkan-seru .ss-butang { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 8px; }
.sahkan-seru .ss-butang .btn { padding: 10px 6px; font-size: .9rem; }
body.mod-korban .calon-korban { position: relative; z-index: 5; }