:root{
  --bg:#fff7e8; --kartu:#ffffff; --teks:#3b2a1a; --redup:#8a7560;
  --utama:#ff7a3d; --utama2:#e0601f; --garis:#f0dfc4; --kayu:#8b5a2b;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--teks);font-family:Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input{font:inherit;color:inherit}
[hidden]{display:none!important}
#app{max-width:1100px;margin:0 auto;padding:0 16px calc(16px + env(safe-area-inset-bottom))}

.bar{display:flex;align-items:center;gap:8px;padding:12px 0}
.bar h1{font-size:19px;font-weight:900;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;flex:1;min-width:0}
.logo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikonbtn{flex:none;width:44px;height:44px;border-radius:14px;background:#fff;border:2px solid var(--garis);font-size:19px;display:grid;place-items:center}
.ikonbtn:active{background:#fff0dc}

/* ---------- Beranda ---------- */
.kolom-setup{max-width:560px;margin:0 auto}
.intro{margin:0 0 14px;color:var(--redup);font-weight:700;line-height:1.45}
.kartu{background:var(--kartu);border:2px solid var(--garis);border-radius:20px;padding:14px 14px 12px;margin-bottom:14px}
.kartu h2{font-size:17px;font-weight:900;margin:0 0 10px}
.catatan{font-size:13px;color:var(--redup);margin:8px 0 0;font-weight:700}

.seg{display:flex;gap:6px;background:#fff3e2;padding:5px;border-radius:14px;margin-bottom:10px}
.seg button{flex:1;padding:9px 0;border-radius:10px;font-weight:800;color:var(--redup)}
.seg button.on{background:var(--utama);color:#fff}

.pemain{display:flex;align-items:center;gap:10px;margin-top:8px}
.ava{flex:none;width:50px;height:50px;border-radius:50%;font-size:28px;display:grid;place-items:center;border:4px solid}
.pemain input{flex:1;min-width:0;height:48px;border:2px solid var(--garis);border-radius:14px;padding:0 12px;font-weight:800;font-size:16px;background:#fffdf8}
.pemain input:focus{outline:none;border-color:var(--utama)}

.pilih-papan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opsi-papan{border:3px solid var(--garis);border-radius:16px;padding:6px 6px 8px;text-align:center;background:#fffdf8}
.opsi-papan.on{border-color:var(--utama);background:#fff1e6}
.opsi-papan svg{display:block;width:100%;height:auto;border-radius:8px}
.opsi-papan b{display:block;font-size:14px;margin-top:6px;line-height:1.15}
.opsi-papan small{display:block;font-size:11px;color:var(--redup);font-weight:700;line-height:1.2;margin-top:2px}

.saklar{display:flex;align-items:flex-start;gap:12px;padding:8px 0;cursor:pointer}
.saklar input{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:99px;background:#e6d8c3;position:relative;margin:2px 0 0;cursor:pointer}
.saklar input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff}
.saklar input:checked{background:var(--utama)}
.saklar input:checked::after{left:23px}
.saklar b{display:block;font-size:15px}
.saklar small{display:block;font-size:13px;color:var(--redup);font-weight:700;line-height:1.35}

.cta{display:block;width:100%;padding:16px;border-radius:18px;background:var(--utama);color:#fff;font-size:19px;font-weight:900;box-shadow:0 5px 0 var(--utama2)}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--utama2)}
.btn2{display:block;width:100%;padding:13px;border-radius:16px;background:#fff;border:2px solid var(--garis);font-size:16px;font-weight:800}

.lanjut{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#2fa84f;color:#fff;border-radius:18px;padding:12px 14px;margin-bottom:14px;box-shadow:0 4px 0 #20803a}
.lanjut-ikon{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:17px}
.lanjut-teks b{display:block;font-size:17px}
.lanjut-teks small{display:block;font-size:13px;font-weight:700;opacity:.9}

/* ---------- Aktivasi ---------- */
.kunci-hero{display:flex;justify-content:center;gap:10px;font-size:44px;margin:10px 0 6px}
.kunci-judul{text-align:center;font-size:22px;font-weight:900;margin:0 0 6px}
#kunci .intro{text-align:center}
.form-kunci label{display:block;font-weight:800;font-size:14px;margin-bottom:12px}
.form-kunci input{display:block;width:100%;height:50px;margin-top:6px;border:2px solid var(--garis);border-radius:14px;padding:0 12px;font-weight:800;font-size:17px;letter-spacing:.5px;background:#fffdf8}
.form-kunci input:focus{outline:none;border-color:var(--utama)}
.err{color:#c62828;font-weight:800;font-size:14px;min-height:1px;margin:0 0 10px}
.kotak-info{background:#fff3cd;border:2px solid #f3d27a;border-radius:14px;padding:10px 12px;font-weight:700;font-size:14px;margin:0 0 14px}
.beli{text-align:center;text-decoration:none;color:var(--teks)}
.tengah{text-align:center}
.catatan a{color:var(--utama2)}

/* ---------- Main ---------- */
.papan-wrap{width:min(100%, calc((100dvh - 250px) * var(--rasio,1)));min-width:260px;margin:0 auto;aspect-ratio:var(--rasio,1);border-radius:14px;overflow:hidden;border:5px solid var(--kayu);background:#fff}
.papan-wrap svg{display:block;width:100%;height:100%}
.panel{max-width:560px;margin:12px auto 0}
.giliran-baris{display:flex;align-items:center;gap:10px}
.giliran{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--garis);border-radius:18px;padding:8px 10px}
.giliran .ava{width:48px;height:48px;font-size:27px}
.giliran small{display:block;font-size:12px;color:var(--redup);font-weight:800}
.giliran b{display:block;font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.giliran > span:last-child{min-width:0}
.dadu-btn{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--utama);color:#fff;border-radius:18px;padding:8px 14px 6px;box-shadow:0 5px 0 var(--utama2);font-weight:900}
.dadu-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--utama2)}
.dadu-btn:disabled{opacity:.6;cursor:default}
.dadu-btn b{font-size:14px}
.dadu{display:block;width:48px;height:48px}
.dadu svg{display:block;width:100%;height:100%}
.pesan{min-height:24px;margin:10px 2px 8px;font-weight:800;font-size:16px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--garis);border-radius:99px;padding:4px 10px 4px 4px;font-size:13px;font-weight:800}
.chip .ava{width:28px;height:28px;font-size:16px;border-width:3px}
.chip.aktif{border-color:var(--utama);background:#fff1e6}
.chip.selesai{opacity:.75}

@media (min-width:760px) and (min-aspect-ratio:1/1){
  .main-grid{display:grid;grid-template-columns:auto minmax(280px,340px);gap:20px;align-items:start;justify-content:center}
  .papan-wrap{width:calc((100dvh - 100px) * var(--rasio,1));max-width:680px;margin:0}
  .panel{margin:0}
  .giliran-baris{flex-direction:column;align-items:stretch}
  .dadu-btn{flex-direction:row;justify-content:center;gap:12px;padding:12px;font-size:18px}
  .dadu-btn b{font-size:20px}
  .dadu{width:56px;height:56px}
  .chips{flex-direction:column;align-items:stretch}
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(40,25,10,.55);display:grid;place-items:center;padding:16px;z-index:10}
.modal-box{width:100%;max-width:380px;background:#fff;border-radius:24px;padding:20px 18px 18px;text-align:center}
.modal-box h3{font-size:22px;font-weight:900;margin:4px 0 6px}
.modal-box p{margin:0 0 14px;color:var(--redup);font-weight:700;line-height:1.4}
.modal-box .besar{font-size:64px;line-height:1}
.modal-box .aksi-teks{font-size:20px;color:var(--teks);font-weight:900}
.seg button{font-size:14px}
.modal-box .tombol{display:grid;gap:10px;margin-top:6px}
.peringkat{list-style:none;padding:0;margin:0 0 14px;text-align:left}
.peringkat li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;font-weight:800;font-size:16px}
.peringkat li:nth-child(odd){background:#fff6ea}
.peringkat .medal{width:30px;text-align:center;font-size:22px}
.peringkat .ava{width:38px;height:38px;font-size:21px;border-width:3px}