:root {
    --bg: #0d1020;
    --bg2: #151a33;
    --garis: rgba(255, 255, 255, .08);
    --emas: #e2b84a;
    --teks: #e9ecf5;
    --redup: #8b93b3;
    --serang: #ff7a59;
    --tahan: #5aa9ff;
    --kw: 104px;
    --kh: 146px;
}
@media (max-width: 640px) { :root { --kw: 58px; --kh: 80px; } .label-baris { display: none; } }

html { background: var(--bg); }
body {
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at 50% 40%, #1d2550 0%, var(--bg) 65%);
    background-attachment: fixed;
    color: var(--teks);
    font-family: Inter, system-ui, sans-serif;
    min-height: 100vh;
}
.bar-atas { background: rgba(0, 0, 0, .35); border-bottom: 1px solid var(--garis); }
.jenama { font-family: Cinzel, serif; font-size: 1.3rem; letter-spacing: .08em; }
.jenama b { color: var(--emas); }
.jenama small { font-family: Inter, sans-serif; font-size: .7rem; color: var(--redup); letter-spacing: 0; margin-left: .5rem; }
.arena { padding-top: 12px; padding-bottom: 24px; }

/* ---------- Bar pemain ---------- */
.pemain-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 12px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--garis); border-radius: 10px; }
.pemain-bar .nama { font-weight: 700; min-width: 90px; }
.pemain-bar .giliran-aktif { color: var(--emas); }
.tabung { flex: 1; min-width: 180px; }
.tabung .progress { height: 14px; background: rgba(255, 255, 255, .08); border-radius: 8px; }
.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(--redup); }
.timbunan { font-size: .8rem; color: var(--redup); cursor: pointer; user-select: none; }
.timbunan:hover { color: var(--teks); }

/* ---------- Medan ---------- */
.medan { padding: 8px 0; }
.baris { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
.label-baris { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .65rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--redup); }
.slot-grid { display: grid; grid-template-columns: repeat(4, calc(var(--kh) + 6px)); gap: 8px; }
@media (max-width: 640px) { .slot-grid { gap: 4px; } }
.slot { width: calc(var(--kh) + 6px); height: calc(var(--kh) + 6px); border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 10px; 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); }

.tengah { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 10px;
    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 { width: calc(var(--kw) + 12px); min-height: calc(var(--kh) + 12px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; border: 1px dashed rgba(64, 196, 210, .35); border-radius: 10px; gap: 4px; }
.zon-fenomena .kosong { font-size: .7rem; color: var(--redup); text-align: center; padding: 6px; }
.zon-fasa { flex: 1; text-align: center; }
.fasa-langkah { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.fasa-langkah span { font-size: .75rem; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--garis); color: var(--redup); }
.fasa-langkah span.aktif { background: var(--emas); color: #1a1400; border-color: var(--emas); font-weight: 700; }
.arahan { font-size: .85rem; color: var(--redup); margin-top: 6px; min-height: 1.3em; }

/* ---------- Tangan ---------- */
.tangan { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px 0 4px; min-height: calc(var(--kh) + 20px); }
.tangan .kad { cursor: pointer; transition: transform .15s ease; }
.tangan .kad:hover { transform: translateY(-8px); }
.tangan .kad.malap { opacity: .55; }
.tangan-lawan { display: flex; justify-content: center; gap: -10px; padding: 6px 0; }
.tangan-lawan .kad { --kw: 40px; --kh: 56px; margin-left: -12px; }

/* ---------- Kad ---------- */
.kad { width: var(--kw); height: var(--kh); border-radius: 8px; padding: 4px; position: relative; flex: 0 0 auto;
    display: flex; flex-direction: column; font-size: calc(var(--kw) * .085); line-height: 1.15; color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45); border: 2px solid rgba(255, 255, 255, .25); overflow: hidden;
    transition: transform .3s ease; }
.kad .k-nama { font-family: Cinzel, serif; font-weight: 800; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kad .k-sub { display: flex; justify-content: space-between; font-size: .8em; opacity: .85; }
.kad .k-seni { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 2.8em;
    background: rgba(0, 0, 0, .25); border-radius: 4px; margin: 3px 0; }
.kad .k-teks { font-size: .72em; opacity: .9; height: 3.5em; overflow: hidden; }
.kad .k-stat { display: flex; justify-content: space-between; font-weight: 700; font-size: .95em; margin-top: 2px;
    background: rgba(0, 0, 0, .35); border-radius: 3px; padding: 1px 4px; }
.kad .naik { color: #7dffa1; } .kad .turun { color: #ff8a8a; }

.jenis-watak.tahap-asas        { background: linear-gradient(160deg, #a06a35, #5b3a1c); }
.jenis-watak.tahap-pertengahan { background: linear-gradient(160deg, #4b7fb3, #213c5c); }
.jenis-watak.tahap-pakar       { background: linear-gradient(160deg, #d8b23a, #7a5a0c); border-color: #ffe9a3; }
.jenis-magic     { background: linear-gradient(160deg, #23a36b, #0d4a31); }
.jenis-perangkap { background: linear-gradient(160deg, #a83a5c, #4c1426); }
.jenis-fenomena  { background: linear-gradient(160deg, #2ab3c2, #0e4c56); }

.kad.belakang { background: repeating-linear-gradient(45deg, #2a2f63 0 6px, #232858 6px 12px);
    border-color: var(--emas); align-items: center; justify-content: center; }
.kad.belakang .logo { font-family: Cinzel, serif; font-weight: 800; color: var(--emas); font-size: 1.6em;
    border: 2px solid var(--emas); border-radius: 50%; width: 2.6em; height: 2.6em; display: flex; align-items: center; justify-content: center; }
.tangan-lawan .kad.belakang .logo { display: none; }

.kad.mod-bertahan { transform: rotate(-90deg); }
.kad.dah-guna { filter: saturate(.4) brightness(.8); }
.lencana { position: absolute; top: -6px; right: -6px; font-size: .62rem; padding: 1px 6px; 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; }

.kad.besar { --kw: 200px; --kh: 280px; font-size: 17px; }
.kad.besar .k-teks { height: auto; font-size: .78em; }

/* ---------- Log ---------- */
.panel-log { background: rgba(0, 0, 0, .3); border: 1px solid var(--garis); border-radius: 10px; height: calc(100vh - 90px);
    position: sticky; top: 12px; display: flex; flex-direction: column; }
@media (max-width: 1199px) { .panel-log { height: 320px; position: static; } }
.panel-tajuk { font-family: Cinzel, serif; padding: 8px 12px; border-bottom: 1px solid var(--garis); color: var(--emas); }
#log { overflow-y: auto; padding: 8px 12px; font-size: .8rem; flex: 1; }
#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; }

/* ---------- 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: Cinzel, serif; 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; }