:root{
  /* Token sistem desain SIPANDAI — dipakai bersama Pustaka, panel, dan halaman masuk. */
  --tinta:#12233A; --tinta-lembut:#3B4E68; --tinta-samar:#6E7F96;
  --kertas:#F5F1E8; --kertas-tua:#EBE4D6; --krem:#FFFDF8; --putih:#FFFFFF;
  --teal:#0F7A8C; --teal-terang:#17A2B8; --teal-samar:#E3F1F3;
  --amber:#C2571A; --amber-samar:#FBEDE2;
  --hijau:#2E7D5B; --hijau-samar:#E4F1EA;
  --merah:#A8322B; --merah-samar:#F8E7E5;
  --ungu:#5B4B8A; --ungu-samar:#ECE8F5;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --garis:1px solid var(--kertas-tua);
  --garis-tinta:1px solid rgba(18,35,58,.14);
  --bayang-1:0 1px 2px rgba(18,35,58,.06),0 2px 6px rgba(18,35,58,.04);
  --bayang-2:0 6px 24px -12px rgba(18,35,58,.28);

  /* nama lama tetap dikenali supaya seluruh berkas ikut berubah warna */
  --putih-lama:#FFFFFF;
  --krem-2:var(--kertas-tua);
  --tosca:var(--teal); --tosca-tua:#0C6675; --tosca-muda:var(--teal-samar);
  --mangga:var(--amber); --mangga-muda:var(--amber-samar);
  --koral:var(--merah); --koral-muda:var(--merah-samar);
  --tinta-2:var(--tinta-lembut); --tinta-3:var(--tinta-samar);
  --garis-warna:var(--kertas-tua);
  --bayang:var(--bayang-1); --bayang-stiker:var(--bayang-1);
  --r:10px; --r-kecil:6px;
  --ground:var(--kertas); --ground-2:var(--krem); --surface:var(--putih); --surface-2:var(--kertas-tua);
  --ink:var(--tinta); --ink-2:var(--tinta-lembut); --ink-3:var(--tinta-samar);
  --line:var(--kertas-tua); --line-soft:var(--kertas-tua);
  --glaze:var(--teal); --glaze-soft:var(--teal-samar);
  --kencana:var(--amber); --kencana-soft:var(--amber-samar);
  --oxide:var(--merah); --jatiluhur:#22617F; --fog:#F1EFE7; --radius:6px; --shadow:var(--bayang-1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--kertas);color:var(--tinta);
  font-family:var(--sans);
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.005em;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--tosca-tua)}
img,svg{max-width:100%}
::selection{background:var(--mangga);color:var(--tinta)}
:focus-visible{outline:3px solid var(--tosca);outline-offset:3px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.narrow{max-width:820px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:"Plus Jakarta Sans",sans-serif}

/* ── label ── */
.label{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
}
.label.mangga{color:var(--amber)}
.label.koral{color:var(--merah)}
.label.ungu{color:var(--ungu)}
.label.putih{color:rgba(255,255,255,.72)}

/* ── tombol ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:6px;border:1px solid var(--teal);
  background:var(--teal);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;transition:background .15s;
}
.btn:hover{background:#0C6675}
.btn.mangga{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.mangga:hover{background:#A84812}
.btn.koral{background:var(--merah);border-color:var(--merah);color:#fff}
.btn.koral:hover{background:#8E2A24}
.btn.putih{background:#fff;color:var(--teal);border-color:#fff}
.btn.garis{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn.garis:hover{background:var(--teal-samar)}
.btn.kecil{padding:10px 18px;font-size:14px}

/* ── kepala ── */
.top{position:sticky;top:0;z-index:80;background:var(--krem);border-bottom:var(--garis)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.brand .mark{width:38px;height:38px;border-radius:9px;background:var(--teal);display:grid;place-items:center;flex:none}
/* ── lambang dinas ── */
.brand .logo-dinas{height:38px;width:auto;flex:none;display:block}
.brand .pemisah{width:1px;height:26px;background:var(--kertas-tua);flex:none;margin:0 2px}
@media (max-width:560px){.brand .logo-dinas{height:34px}.brand .pemisah{display:none}}
.kaki-logo{height:74px;width:auto;display:block;margin-bottom:16px}
.brand b{font-family:var(--serif);font-weight:600;font-size:19px;display:block;line-height:1.15;letter-spacing:.02em}
.brand small{font-size:10.5px;color:var(--tinta-samar);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:2px;align-items:center}
.nav a{font-family:var(--sans);font-size:14.5px;font-weight:500;text-decoration:none;color:var(--tinta-lembut);padding:8px 12px;border-radius:5px}
.nav a:hover{background:var(--teal-samar);color:var(--teal)}
.nav a.cta{border:var(--garis-tinta);color:var(--tinta);font-weight:600}
.nav a.cta:hover{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:940px){.nav a:not(.cta){display:none}}

/* ── hero + perjalanan ── */
.scrolly{position:relative;background:linear-gradient(180deg,#E7EFF0 0%,var(--kertas) 100%)}
.stage{position:sticky;top:0;height:100svh;z-index:0}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 55% 42%,transparent 40%,rgba(245,241,232,.94) 96%)}
.steps{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.step{min-height:100svh;display:flex;align-items:center;padding:10vh 0}
.step > .wrap{width:100%;display:flex}
.step:nth-child(even) > .wrap{justify-content:flex-end}
.step .kartu{
  pointer-events:auto;max-width:530px;background:var(--krem);border-radius:var(--r);
  padding:30px 32px;box-shadow:var(--bayang-2);border:var(--garis);
  display:flex;flex-direction:column;gap:14px;
  opacity:.25;transform:translateY(20px);transition:opacity .5s,transform .5s;
}
.step.on .kartu{opacity:1;transform:none}
.step h2{font-size:clamp(26px,3.6vw,42px)}
.step p{font-size:16.5px;color:var(--tinta-2)}
.step .h1{font-size:clamp(44px,7.6vw,84px);font-weight:600;line-height:.94;letter-spacing:-.02em}
.step .h1 em{font-style:normal;color:var(--tosca)}
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  background:var(--krem);border:var(--garis-tinta);border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:600;color:var(--tinta-lembut);box-shadow:var(--bayang-1);
  animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.melayang{position:absolute;pointer-events:none;z-index:2;animation:apung 6s ease-in-out infinite}
.melayang.b{animation-delay:-2s;animation-duration:7.5s}
.melayang.c{animation-delay:-4s;animation-duration:8.5s}
@keyframes apung{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@media (max-width:800px){.melayang{display:none}}

/* ── pita berjalan ── */
.pita{background:var(--tinta);color:rgba(255,255,255,.9);overflow:hidden;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.pita .jalan{display:flex;gap:38px;white-space:nowrap;animation:geser 26s linear infinite;font-family:var(--sans);font-size:17px;font-weight:500}
.pita span{display:inline-flex;align-items:center;gap:38px}
.pita i{color:var(--teal-terang);font-style:normal}
@keyframes geser{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── blok ── */
.blk{padding:clamp(56px,7vw,96px) 0;position:relative;z-index:3;background:var(--kertas)}
.blk.krem{background:var(--krem)}
.blk.tosca{background:var(--tinta);color:#fff}
.blk.tosca h2,.blk.tosca h3{color:#fff}
.blk.tosca p{color:rgba(255,255,255,.82)}
.kepala{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;align-items:flex-start}
.kepala.tengah{align-items:center;text-align:center}
.kepala h2{font-size:clamp(30px,4.6vw,54px)}
.lead{max-width:64ch;font-size:clamp(17px,1.5vw,19.5px);color:var(--tinta-2)}
.blk.tosca .lead{color:rgba(255,255,255,.85)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.kotak{background:var(--putih);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;border:var(--garis);box-shadow:var(--bayang-1)}
.kotak.stiker{border:var(--garis);box-shadow:var(--bayang-1)}
.kotak h3{font-size:21px}
.kotak p{font-size:15.5px;color:var(--tinta-2);line-height:1.6}
.ikon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex:none}
.ikon.t{background:var(--tosca-muda)} .ikon.m{background:var(--mangga-muda)}
.ikon.k{background:var(--koral-muda)} .ikon.u{background:var(--ungu-muda)}

/* ── angka besar ── */
.angka{display:flex;flex-direction:column;gap:4px}
.angka b{font-family:var(--sans);font-size:clamp(40px,5.4vw,64px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.angka span{font-size:14.5px;color:var(--tinta-2);line-height:1.5}
.blk.tosca .angka span{color:rgba(255,255,255,.8)}

/* ── topik ── */
.topik{border-radius:var(--r);overflow:hidden;background:var(--putih);border:var(--garis);box-shadow:var(--bayang-1);margin-bottom:24px}
.topik .kep{display:flex;gap:22px;align-items:center;padding:24px 28px;flex-wrap:wrap}
.topik.t1 .kep{background:var(--tosca-muda)}
.topik.t2 .kep{background:var(--mangga-muda)}
.topik.t3 .kep{background:var(--koral-muda)}
.topik.t4 .kep{background:var(--ungu-muda)}
.topik .kep svg{width:96px;height:auto;flex:none;margin-bottom:-24px}
.topik .kep h3{font-size:clamp(22px,2.8vw,30px)}
.topik .kep p{font-size:15.5px;color:var(--tinta-2);max-width:60ch;margin-top:5px}
.materi{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:880px){.materi{grid-template-columns:1fr}}
.materi article{padding:24px 28px;border-right:1px solid var(--garis);display:flex;flex-direction:column;gap:10px}
.materi article:last-child{border-right:0}
@media (max-width:880px){.materi article{border-right:0;border-bottom:1px solid var(--garis)}}
.materi h4{font-size:17.5px}
.materi p{font-size:15px;color:var(--tinta-2);line-height:1.6}
.no{width:30px;height:30px;border-radius:10px;background:var(--tinta);color:#fff;display:grid;place-items:center;
  font-family:var(--sans);font-size:14px;font-weight:600}

/* ── kuis ── */
.kuis{padding:24px 28px;background:var(--krem);border-top:var(--garis);display:flex;flex-direction:column;gap:14px}
.kuis .t{font-family:var(--sans);font-weight:600;font-size:19px}
.opsi{display:flex;flex-direction:column;gap:10px;max-width:640px}
.opsi button{
  text-align:left;padding:14px 18px;border:2px solid var(--tinta);background:#fff;border-radius:var(--r-kecil);
  cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif;font-size:15.5px;font-weight:500;color:var(--tinta);
  box-shadow:3px 3px 0 rgba(18,33,30,.10);transition:transform .1s,box-shadow .1s;
}
.opsi button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(18,33,30,.10)}
.opsi button.benar{background:var(--hijau-samar);color:var(--hijau);border-color:var(--hijau)}
.opsi button.salah{background:var(--merah-samar);border-color:var(--merah);color:var(--merah)}
.umpan{font-size:15px;color:var(--tinta-2);line-height:1.6;font-weight:500}

/* ── linimasa ── */
.linimasa{position:relative;display:grid;gap:0}
.tahap{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:22px 0;position:relative}
.tahap::before{content:"";position:absolute;left:47px;top:0;bottom:0;width:3px;background:var(--garis)}
.tahap:first-child::before{top:52px}
.tahap:last-child::before{bottom:calc(100% - 52px)}
.tahap .bulat{width:94px;height:94px;border-radius:50%;background:#fff;border:3px solid var(--tinta);
  display:grid;place-items:center;position:relative;z-index:2;box-shadow:var(--bayang-stiker);font-size:36px}
.tahap .isi{padding-top:8px}
.tahap h3{font-size:22px;margin-bottom:6px}
.tahap p{font-size:15.5px;color:var(--tinta-2)}
.tahap .umur{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--tosca-tua);
  background:var(--tosca-muda);padding:4px 12px;border-radius:999px;display:inline-block;margin-bottom:8px}
@media (max-width:640px){.tahap{grid-template-columns:64px 1fr;gap:16px}.tahap .bulat{width:62px;height:62px;font-size:26px}.tahap::before{left:31px}}

/* ── permainan ── */
.main-kartu{border-radius:var(--r);overflow:hidden;border:var(--garis);box-shadow:var(--bayang-1);background:var(--putih);display:flex;flex-direction:column}
.main-kartu .atas{height:150px;display:grid;place-items:center;font-size:64px;position:relative;overflow:hidden}
.main-kartu.g1 .atas{background:linear-gradient(135deg,#FFD98A,#FF9F45)}
.main-kartu.g2 .atas{background:linear-gradient(135deg,#8FD9F5,#3E8FD0)}
.main-kartu.g3 .atas{background:linear-gradient(135deg,#B7EBD3,#38B08A)}
.main-kartu .bawah{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.main-kartu h3{font-size:22px}
.main-kartu p{font-size:15px;color:var(--tinta-2);line-height:1.6}

/* ── simulator ── */
.sim{display:grid;grid-template-columns:1.05fr 1fr;border-radius:var(--r);overflow:hidden;border:var(--garis);box-shadow:var(--bayang-1);background:var(--putih)}
@media (max-width:960px){.sim{grid-template-columns:1fr}}
.sim .panggung{position:relative;background:linear-gradient(180deg,#EAF7F4,#FFF6E9);min-height:430px}
#simCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sim .tag{position:absolute;left:20px;top:18px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
.sim .anak{position:absolute;right:20px;top:14px;z-index:2;text-align:right;font-family:var(--sans);font-weight:600;font-size:40px;line-height:1}
.sim .anak small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tinta-3);text-transform:uppercase;font-family:"Plus Jakarta Sans",sans-serif}
.panel{padding:28px;display:flex;flex-direction:column;gap:20px;border-left:var(--garis)}
@media (max-width:960px){.panel{border-left:0;border-top:2px solid var(--tinta)}}
.ctrl{display:flex;flex-direction:column;gap:8px}
.ctrl .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ctrl label{font-family:var(--sans);font-size:16px;font-weight:500}
.ctrl .val{font-weight:800;font-size:14px;color:var(--tosca-tua);background:var(--tosca-muda);padding:3px 11px;border-radius:999px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--garis);border-radius:9px}
input[type=range]::-moz-range-track{height:8px;background:var(--garis);border-radius:9px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--tosca);margin-top:-8px;border:3px solid #fff;box-shadow:0 2px 0 var(--tosca-tua)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--tosca);border:3px solid #fff;box-shadow:0 2px 0 var(--tosca-tua)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:110px;padding:11px 8px;background:#fff;border:2px solid var(--tinta);border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--tinta-2)}
.seg button[aria-pressed="true"]{background:var(--tosca);color:#fff;border-color:var(--tosca-tua)}
.hasil{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hasil div{background:var(--krem);border-radius:var(--r-kecil);padding:14px 16px}
.hasil b{display:block;font-family:var(--sans);font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.hasil span{font-size:12.5px;color:var(--tinta-3);font-weight:600;display:block;margin-top:3px}
.pemandu{display:flex;gap:14px;align-items:flex-start;background:var(--mangga-muda);border-radius:var(--r-kecil);padding:16px}
.pemandu svg{width:66px;height:66px;flex:none}
.kata{font-size:15px;line-height:1.6;color:#5B4514;font-weight:500}

/* ── kecamatan ── */
.kecs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.kecs div{background:var(--putih);border:var(--garis);border-radius:6px;padding:14px 16px}
.kecs b{font-family:var(--sans);font-size:16px;font-weight:500;display:block}
.kecs span{font-size:12px;color:var(--tinta-3);font-weight:600}

/* ── karakter ── */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.cast{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cast{grid-template-columns:1fr}}
.toonCard{background:var(--putih);border:var(--garis);border-radius:var(--r);overflow:hidden;box-shadow:var(--bayang-1);display:flex;flex-direction:column}
.toonCard .panggung{display:flex;justify-content:center;align-items:flex-end;padding:18px 12px 0;min-height:186px}
.toonCard:nth-child(4n+1) .panggung{background:var(--tosca-muda)}
.toonCard:nth-child(4n+2) .panggung{background:var(--mangga-muda)}
.toonCard:nth-child(4n+3) .panggung{background:var(--koral-muda)}
.toonCard:nth-child(4n+4) .panggung{background:var(--ungu-muda)}
.toonCard .panggung svg{width:100%;max-width:160px;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.toonCard:hover .panggung svg{transform:translateY(-8px) rotate(-2deg)}
.toonCard .isi{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px}
.toonCard h3{font-size:19px}
.toonCard p{font-size:14px;color:var(--tinta-2);line-height:1.55}
.toonCard .peran{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tosca-tua)}

/* ── mitra ── */
.mitra{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.mitra span{background:var(--putih);border:var(--garis-tinta);border-radius:999px;padding:9px 18px;
  font-size:14px;font-weight:500;color:var(--tinta-lembut)}

/* ── ajakan besar ── */
.ajakan{background:var(--tinta);border-radius:12px;padding:clamp(32px,5vw,56px);color:#fff;
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.ajakan h2{font-size:clamp(28px,4vw,46px);max-width:18ch}
.ajakan p{color:rgba(255,255,255,.88);max-width:52ch;margin-top:10px}
.ajakan .bola{position:absolute;border-radius:50%;background:rgba(255,255,255,.09)}

/* ── tabel ── */
.tblwrap{overflow-x:auto;border:2px solid var(--tinta);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--garis);vertical-align:top}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);font-weight:800;background:var(--krem);white-space:nowrap}
td{font-size:14.5px;color:var(--tinta-2)}
tr:last-child td{border-bottom:0}

/* ── kaki ── */
footer{background:var(--tinta);color:rgba(255,255,255,.78);padding:64px 0 74px;position:relative;z-index:3}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:32px}
@media (max-width:820px){footer .cols{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:16px;margin-bottom:12px}
footer p,footer li{font-size:14.5px;line-height:1.7}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
footer a{color:#fff;text-decoration:none;opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .step .kartu{opacity:1;transform:none}
  .hint,.melayang,.pita .jalan{animation:none}
}

/* ── kompatibilitas halaman permainan & dasbor ── */
:root{
  --ground:var(--putih); --ground-2:var(--krem); --surface:#FFFFFF; --surface-2:var(--krem-2);
  --ink:var(--tinta); --ink-2:var(--tinta-2); --ink-3:var(--tinta-3);
  --line:var(--garis); --line-soft:var(--garis);
  --glaze:var(--tosca); --glaze-soft:var(--tosca-muda);
  --kencana:var(--mangga); --kencana-soft:var(--mangga-muda);
  --oxide:var(--koral); --jatiluhur:#22617F;
  --fog:#F1F7F3; --radius:var(--r-kecil);
  --shadow:var(--bayang-stiker);
}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;align-items:flex-start}
.head h2{font-size:clamp(28px,4.2vw,48px)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
  background:var(--tosca-muda);color:var(--tosca-tua);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;width:fit-content}
.card{background:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;
  border:2px solid var(--tinta);box-shadow:var(--bayang-stiker)}
.card h3{font-size:21px}
.card p{font-size:15.5px;color:var(--tinta-2);line-height:1.6}
.btn.ghost{background:transparent;color:var(--tosca-tua);box-shadow:inset 0 0 0 2px var(--tosca)}
.btn.ghost:hover{transform:none;box-shadow:inset 0 0 0 2px var(--tosca-tua)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  background:var(--krem-2);color:var(--tinta-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pill.hot{background:var(--tosca-muda);color:var(--tosca-tua)}

/* ═══════════ TABLET & SENTUH ═══════════ */
button,a,input[type=range],.opsi button,.seg button{touch-action:manipulation}
.opsi button,.seg button,.btn,.nav a{min-height:48px}

/* menu bisa digeser mendatar, tidak lagi disembunyikan */
@media (max-width:1040px){
  .top .bar{height:auto;flex-direction:column;align-items:stretch;gap:0;padding-top:10px;padding-bottom:8px}
  .brand{padding-bottom:8px}
  /* Butir lentur bawaannya tidak boleh menyusut di bawah isinya; tanpa dua baris
     min-width ini menu yang seharusnya digeser malah melebarkan seluruh halaman. */
  .top .bar > *{min-width:0;max-width:100%}
  .nav{overflow-x:auto;gap:6px;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    min-width:0;max-width:100%}
  .nav::-webkit-scrollbar{display:none}
  .nav a{display:inline-flex!important;align-items:center;white-space:nowrap;flex:none;
    background:var(--krem);border:1.5px solid var(--garis)}
  /* tombol kembali didahulukan supaya jalan keluar selalu terlihat tanpa menggeser */
  .nav a.cta{border-color:var(--amber);order:-1;background:var(--krem);position:sticky;left:0;z-index:2;
    box-shadow:8px 0 10px -6px rgba(18,35,58,.18)}
  .stage{top:0;height:100svh}
  .steps{margin-top:-100svh}
}

/* tablet tegak: satu kolom yang lega */
@media (max-width:1024px){
  body{font-size:17.5px}
  .materi{grid-template-columns:repeat(2,1fr)}
  .materi article:nth-child(2){border-right:0}
  .cast{grid-template-columns:repeat(3,1fr)}
  .sim{grid-template-columns:1fr}
  .panel{border-left:0;border-top:2px solid var(--tinta)}
  .step .kartu{max-width:min(560px,86vw);padding:26px}
  .topik .kep svg{width:82px}
  .kecs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:820px){
  .materi{grid-template-columns:1fr}
  .materi article{border-right:0;border-bottom:1px solid var(--garis)}
  .cast{grid-template-columns:repeat(2,1fr)}
  .step > .wrap,.step:nth-child(even) > .wrap{justify-content:center}
  .step .kartu{max-width:100%}
  .ajakan{flex-direction:column;align-items:flex-start}
}
/* tablet mendatar: jaga tinggi panggung tetap masuk layar */
@media (max-height:820px) and (orientation:landscape){
  .step{min-height:100svh;padding:6vh 0}
  .step .kartu{padding:22px 24px;gap:10px}
  .step .h1{font-size:clamp(36px,5.4vw,58px)}
  .step h2{font-size:clamp(22px,3vw,32px)}
  .step p{font-size:15.5px}
}

/* ── mode gerai (kios) ── */
body.gerai .top .nav a:not(.gerai-ok){display:none!important}
body.gerai footer .cols{grid-template-columns:1fr}
body.gerai footer ul{display:none}
.balik{
  position:fixed;right:18px;bottom:18px;z-index:90;display:none;
  background:var(--tinta);color:#fff;border:0;border-radius:999px;padding:16px 24px;
  font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px rgba(18,33,30,.3);align-items:center;gap:9px;
}
body.gerai .balik{display:inline-flex}
.gerai-info{
  position:fixed;left:0;right:0;top:0;z-index:95;background:var(--mangga);color:#3B2600;
  text-align:center;padding:7px 14px;font-size:13px;font-weight:700;display:none;
}
body.gerai .gerai-info{display:block}
body.gerai .top{top:32px}

body.gerai{padding-top:32px}

@media (max-width:1100px){.melayang:not(.b):not(.c){display:none}}
@media (max-width:900px){.melayang.c{display:none}}

/* ═══════════ RANGKA PERMAINAN (dipakai 3 halaman) ═══════════ */
.arena{position:relative;height:calc(100svh - var(--tajuk, 78px));min-height:420px;background:linear-gradient(180deg,#EAF7F4,#FFF6E9);overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;inset:0;pointer-events:none;padding:16px;display:flex;flex-direction:column;gap:12px}
.hud .atas{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chipbox{background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border:2px solid var(--tinta);
  border-radius:var(--r-kecil);padding:10px 16px;display:flex;gap:18px;align-items:center;box-shadow:3px 3px 0 rgba(18,33,30,.12)}
.chipbox b{font-family:var(--sans);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;display:block}
.chipbox span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);display:block;margin-bottom:3px}
.gizi{display:flex;gap:8px;flex-wrap:wrap}
.gz{background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border:2px solid var(--tinta);border-radius:var(--r-kecil);padding:8px 12px;min-width:104px;box-shadow:3px 3px 0 rgba(18,33,30,.12)}
.gz i{display:block;width:100%;height:6px;border-radius:4px;background:var(--garis);margin-top:6px;overflow:hidden}
.gz i u{display:block;height:100%;text-decoration:none;transition:width .25s}
.gz b{font-family:var(--sans);font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.pesan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:auto;
  background:#fff;border:2px solid var(--tinta);border-radius:var(--r);padding:30px 32px;max-width:min(480px,90vw);
  box-shadow:6px 7px 0 rgba(18,33,30,.14);display:flex;flex-direction:column;gap:14px;align-items:center}
.pesan h2{font-size:clamp(24px,3.4vw,34px)}
.pesan p{font-size:15.5px;color:var(--tinta-2);line-height:1.6}
.pesan.sembunyi{display:none}
.bawah{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.kunci{background:var(--mangga);border:2px solid var(--tinta);color:#3B2600;border-radius:var(--r-kecil);
  padding:10px 14px;font-family:var(--sans);font-size:14px;font-weight:600;box-shadow:3px 3px 0 rgba(18,33,30,.12)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--tinta-2);
  background:rgba(255,255,255,.85);border-radius:999px;padding:8px 14px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:block}
.bintang{font-size:34px;letter-spacing:5px;color:var(--mangga)}
.setir{position:absolute;left:0;right:0;bottom:0;height:34%;display:flex;pointer-events:auto;z-index:4}
.setir button{flex:1;background:transparent;border:0;font-size:0;cursor:pointer}
@media (min-width:900px){.setir{display:none}}
.pilihan{position:absolute;left:0;right:0;top:26%;display:flex;justify-content:space-between;padding:0 6%;
  pointer-events:none;z-index:4;gap:14px}
.pilihan div{background:#fff;border:2px solid var(--tinta);border-radius:var(--r-kecil);padding:12px 16px;
  max-width:230px;box-shadow:4px 4px 0 rgba(18,33,30,.14);opacity:0;transition:opacity .3s,transform .3s;transform:translateY(-10px)}
.pilihan.tampil div{opacity:1;transform:none}
.pilihan b{font-family:var(--sans);font-size:16px;font-weight:600;display:block}
.pilihan span{font-size:13px;color:var(--tinta-2);line-height:1.4;display:block;margin-top:3px}
.jarakbar{position:relative;width:min(340px,52vw);height:16px;border-radius:9px;background:#fff;border:2px solid var(--tinta);overflow:hidden}
.jarakbar .aman{position:absolute;top:0;bottom:0;background:var(--tosca-muda)}
.jarakbar .tanda{position:absolute;top:-3px;bottom:-3px;width:6px;border-radius:3px;background:var(--tinta);transition:left .08s}

/* ── panel Mode 4D ── */
.empat-d{
  position:fixed;left:14px;bottom:14px;z-index:70;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:2px solid var(--tinta);
  border-radius:999px;padding:8px 14px;box-shadow:4px 4px 0 rgba(18,33,30,.14);max-width:calc(100vw - 28px);
}
.empat-d b{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--tinta);padding-right:2px}
.empat-d button{
  border:2px solid var(--garis);background:#fff;border-radius:999px;padding:7px 13px;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--tinta-2);min-height:40px;
}
.empat-d button[aria-pressed="true"]{background:var(--tosca);border-color:var(--tosca-tua);color:#fff}
.empat-d button.tak-ada{opacity:.4}
.empat-d span{font-size:11.5px;color:var(--tinta-3);font-weight:600;letter-spacing:.02em}
@media (max-width:720px){.empat-d span{display:none}.empat-d{left:10px;bottom:10px;padding:7px 11px;gap:6px}}
body.gerai .balik{bottom:74px}

/* ── kartu pendampingan TPK ── */
.kartu-kasus{
  position:absolute;left:50%;bottom:18px;transform:translate(-50%,120%);z-index:6;
  width:min(560px,92vw);background:#fff;border:2px solid var(--tinta);border-radius:var(--r);
  box-shadow:6px 7px 0 rgba(18,33,30,.14);padding:20px 22px;display:flex;flex-direction:column;gap:12px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);pointer-events:auto;max-height:76%;overflow-y:auto;
}
.kartu-kasus.tampil{transform:translate(-50%,0)}
.kk-atas{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kk-atas button{border:0;background:var(--krem);border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:15px;color:var(--tinta-2)}
.kk-cerita{font-size:16px;line-height:1.55;color:var(--tinta)}
.kk-fakta{font-size:14px;line-height:1.55;color:var(--tosca-tua);background:var(--tosca-muda);border-radius:var(--r-kecil);padding:12px 14px}
.kartu-kasus .opsi button{font-size:14.5px;padding:12px 15px}

/* ── stik penggerak ── */
.stik{
  position:absolute;right:20px;bottom:20px;z-index:7;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.55);border:3px solid var(--tinta);box-shadow:4px 5px 0 rgba(18,33,30,.14);
  touch-action:none;cursor:grab;display:grid;place-items:center;backdrop-filter:blur(6px);
}
.stik:active{cursor:grabbing}
.stik i{
  display:block;width:58px;height:58px;border-radius:50%;background:var(--tosca);
  border:3px solid #fff;box-shadow:0 3px 0 var(--tosca-tua);transition:transform .06s linear;
}
.stik::after{
  content:"jalan";position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--tinta-3);
}
@media (max-width:520px){.stik{width:112px;height:112px;right:14px;bottom:16px}.stik i{width:50px;height:50px}}
body.gerai .balik{bottom:170px}


/* ── ajakan ke Pustaka ── */
.pustaka-blok{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
@media (max-width:860px){.pustaka-blok{grid-template-columns:1fr}}
.pustaka-daftar{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:520px){.pustaka-daftar{grid-template-columns:1fr}}
.pustaka-daftar a{display:block;background:var(--putih);border:var(--garis);border-radius:8px;
  padding:16px 18px;text-decoration:none;color:var(--tinta);box-shadow:var(--bayang-1);transition:border-color .15s}
.pustaka-daftar a:hover{border-color:var(--teal)}
.pustaka-daftar b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600}
.pustaka-daftar span{display:block;font-size:13px;color:var(--tinta-2);line-height:1.45;margin-top:3px}
.brand .logo-sip{width:34px;height:34px;flex:none;display:block;border-radius:9px}
@media (max-width:560px){.brand .logo-sip{width:32px;height:32px}}

/* ══════════════════════════════════════════════════════════════════
   Layar sentuh — ponsel, tablet, iPad
   Sasaran sentuh minimal 44px dan huruf yang masih terbaca sambil
   berdiri di posyandu. Tampilan di komputer tidak diubah.
   ══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 900px) {
  /* penggeser Mesin Konsekuensi: batangnya tetap tipis, area sentuhnya dilebarkan */
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-11px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}

  /* tautan di dalam daftar dan kaki halaman jadi cukup tinggi untuk jempol */
  footer li a, .kaki-tautan a, nav.nav a, .daftar-tautan a{
    display:inline-block;padding:11px 0;line-height:1.25;min-height:44px;box-sizing:border-box
  }
  footer li{margin:0}

  /* label kecil dinaikkan sedikit supaya masih terbaca di layar genggam */
  .label{font-size:12.5px}
  .kecs span{font-size:13px}
  .brand small{font-size:11.5px;letter-spacing:.1em}
  .tag{font-size:13px}
  .toonCard .peran{font-size:12.5px}
  nav.nav a, footer li a{padding-left:6px;padding-right:6px;margin-left:-6px}
  .chipbox span{font-size:11.5px}
  small{font-size:12px}
}

/* Ruang aman iPhone berponi dan bilah beranda: kendali permainan tidak
   tertimpa garis geser bawah, dan isi tidak masuk ke bawah poni. */
@supports (padding: max(0px)) {
  .stik{right:max(20px, calc(env(safe-area-inset-right) + 12px));
        bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px))}
  .hud{padding-left:max(16px, env(safe-area-inset-left));
       padding-right:max(16px, env(safe-area-inset-right));
       padding-bottom:max(16px, env(safe-area-inset-bottom))}
  footer{padding-bottom:max(74px, calc(env(safe-area-inset-bottom) + 74px))}
  /* JANGAN memakai max(0px, …): itu menghapus padding tepi bawaan .wrap dan
     membuat isi tajuk menempel ke pinggir layar. Pakai padding aslinya sebagai dasar. */
  .top .bar{padding-left:max(clamp(18px,4vw,44px), env(safe-area-inset-left));
            padding-right:max(clamp(18px,4vw,44px), env(safe-area-inset-right))}
}

/* ══════════════════════════════════════════════════════════════════
   Permainan di layar sentuh: sudut kanan-bawah disediakan untuk stik,
   dan tepi bawah disediakan untuk bilah Mode 4D, supaya tidak ada
   kendali yang tertimpa keterangan.
   ══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 1040px) {
  .hud{padding-bottom:calc(16px + var(--bilah4d, 56px))}
  .hud .bawah{padding-right:calc(var(--stik, 132px) + 18px)}
  .legend{font-size:12px;padding:7px 12px;max-width:100%}
  /* bilah Mode 4D berhenti sebelum wilayah stik */
  .empat-d{max-width:calc(100vw - 28px - var(--stik, 132px) - 12px)}
}
@media (max-width: 520px) {
  .empat-d{max-width:calc(100vw - 28px)}
  /* di ponsel bilah 4D memakai baris sendiri di atas stik */
  .empat-d{bottom:calc(14px + var(--stik, 112px) + 10px)}
  .hud{padding-bottom:16px}
  .hud .bawah{padding-right:0;padding-bottom:calc(var(--stik, 112px) + var(--bilah4d, 56px) + 14px)}
}

/* ── Ponsel: papan permainan dipadatkan supaya arena tetap terlihat ── */
@media (max-width: 560px) {
  .hud{padding:10px;gap:8px}
  .chipbox{padding:7px 12px;gap:14px}
  .chipbox b{font-size:18px}
  .chipbox span{font-size:9.5px;margin-bottom:2px}
  .gizi{gap:5px;width:100%}
  .gz{flex:1 1 calc(50% - 3px);min-width:0;padding:5px 9px}
  .gz b{font-size:11px;gap:5px}
  .gz i{height:5px;margin-top:4px}
  .legend{font-size:10.5px;gap:8px;padding:5px 11px;row-gap:4px}
  .legend i{width:9px;height:9px}
  .kunci{font-size:12.5px;padding:7px 11px}
  .empat-d{padding:5px 9px;gap:5px}
  .empat-d b{font-size:12.5px}
  .empat-d button{font-size:12.5px;padding:0 11px;min-height:40px}
  .empat-d span{display:none}   /* keterangan "3D + getaran…" tidak perlu di ponsel */
}

/* Di ponsel, halaman permainan memakai tajuk satu baris: layar sempit lebih
   berharga untuk arenanya. Tautan lain tetap ada di halaman kampung. */
@media (max-width: 560px), (max-height: 560px) {
  body.permainan .top .bar{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px;
    padding-top:8px;padding-bottom:8px}
  body.permainan .brand{min-width:0;flex:1 1 auto;min-height:44px;align-items:center}
  body.permainan .brand span{min-width:0}
  /* judul permainan dipangkas bila kepanjangan, supaya tajuk tetap satu baris */
  body.permainan .brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.permainan .nav{flex:0 0 auto}
  body.permainan .brand{padding-bottom:0}
  body.permainan .brand small{display:none}
  body.permainan .brand .logo-dinas{height:28px}
  body.permainan .brand .logo-sip{width:26px;height:26px}
  body.permainan .brand b{font-size:15px}
  body.permainan .nav{overflow:visible;padding-bottom:0}
  body.permainan .nav a:not(.cta){display:none!important}
  body.permainan .nav a.cta{font-size:13px;padding:0 12px;min-height:40px;box-shadow:none}
}

/* Saat kartu kasus terbuka di layar sempit, kendali disingkirkan: pemain sedang
   memilih tindakan, bukan berjalan — dan kartunya butuh seluruh ruang bawah. */
@media (max-width: 900px) {
  body.kartu-buka .stik, body.kartu-buka .empat-d{display:none}
  .kartu-kasus{bottom:14px;max-height:82%;padding:16px 16px}
  .kartu-kasus .kk-cerita{font-size:15px}
  .kartu-kasus .opsi button{font-size:14px;padding:11px 13px}
}

/* Keterangan di bawah nama tetap satu baris di layar sempit; kalau kepanjangan
   dipangkas, bukan dibungkus — supaya tinggi tajuk tidak membengkak. */
@media (max-width: 620px) {
  .brand span{min-width:0}
  .brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;letter-spacing:.09em}
  .brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}

/* ══════════════════════════════════════════════════════════════════
   Tombol kendali layar sentuh — dipakai di ponsel dan tablet.
   Dua rumpun di kiri dan kanan supaya terjangkau kedua ibu jari.
   ══════════════════════════════════════════════════════════════════ */
.pad-kendali{
  position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:space-between;
  align-items:flex-end;gap:12px;padding:0 14px 14px;pointer-events:none;
}
.pad-kendali .pad-kiri,.pad-kendali .pad-kanan{display:flex;gap:10px;pointer-events:auto}
.pad-kendali .pad-kanan{justify-content:flex-end}
.tk{
  width:74px;height:74px;border-radius:20px;border:2.5px solid var(--tinta);
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  box-shadow:0 4px 0 rgba(18,33,30,.18);cursor:pointer;touch-action:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:var(--tinta);transition:transform .06s linear,background .12s;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.tk i{font-style:normal;font-size:24px;line-height:1}
.tk span{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-samar)}
.tk.tekan,.tk:active{transform:translateY(3px);background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 1px 0 rgba(18,33,30,.18)}
.tk.tekan span,.tk:active span{color:rgba(255,255,255,.85)}
.pad-kendali.sembunyi{display:none}
/* stik lama tidak dipakai bila sudah ada tombol */
.stik.stik-lepas{display:none}
/* separuh layar tak terlihat pada Perahu digantikan tombol yang jelas */
body[data-kendali] .setir{display:none}

/* di layar lebar tombol tetap ada tapi lebih kecil dan samar */
@media (min-width:1041px) and (pointer:fine){
  .tk{width:60px;height:60px;border-radius:16px;opacity:.72}
  .tk i{font-size:20px}
  .tk span{font-size:9.5px}
}
@media (max-width:400px){
  .tk{width:66px;height:66px;border-radius:18px}
  .tk i{font-size:21px}
  .pad-kendali{padding:0 10px 10px;gap:8px}
  .pad-kendali .pad-kiri,.pad-kendali .pad-kanan{gap:8px}
}

/* Bilah Mode 4D dan keterangan tepi bawah naik ke atas pad kendali.
   Lebih khusus daripada aturan sebelumnya, jadi berlaku di semua lebar layar. */
body[data-kendali] .empat-d{bottom:calc(var(--pad, 90px) + 12px)}
body[data-kendali] .hud{padding-bottom:calc(var(--pad, 90px) + var(--bilah4d, 56px) + 18px)}
body[data-kendali] .hud .bawah{padding-right:0;padding-bottom:0}
body[data-kendali] .kartu-kasus{bottom:calc(var(--pad, 90px) + 12px)}

/* Tombol masuk rumah pada Tim Pendamping Keluarga — muncul begitu sampai di
   halaman rumah, supaya pemain tidak perlu berhenti tepat di ambang pintu. */
.tombol-masuk{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--pad, 0px) + var(--stik, 132px) + var(--bilah4d, 56px) + 24px);
  z-index:9;border:2.5px solid var(--tinta);border-radius:999px;cursor:pointer;
  background:var(--amber);color:#fff;font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.02em;padding:0 22px;min-height:52px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 0 rgba(18,33,30,.2);animation:denyutMasuk 1.6s ease-in-out infinite;
}
.tombol-masuk::before{content:"⌂";font-size:19px}
.tombol-masuk:active{transform:translateX(-50%) translateY(3px);box-shadow:0 1px 0 rgba(18,33,30,.2)}
.tombol-masuk[hidden]{display:none}
@keyframes denyutMasuk{0%,100%{box-shadow:0 4px 0 rgba(18,33,30,.2)}50%{box-shadow:0 4px 0 rgba(18,33,30,.2),0 0 0 7px rgba(194,87,26,.22)}}
@media (prefers-reduced-motion:reduce){.tombol-masuk{animation:none}}

/* ══════════════════════════════════════════════════════════════════
   Kartu pengantar permainan tidak boleh lebih tinggi daripada arenanya.
   Di ponsel isinya panjang, dan dulu tombol "Mulai bermain" terdorong
   ke luar layar sehingga permainan tak bisa dimulai sama sekali.
   Judul dan tombol tetap terlihat; hanya uraiannya yang digulir.
   ══════════════════════════════════════════════════════════════════ */
.pesan{max-height:calc(100% - 20px);min-height:0}
.pesan [data-isi="papan-teks"]{overflow-y:auto;min-height:0;flex:1 1 auto;
  display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-right:2px}
.pesan [data-isi="papan-teks"] p{margin:0}
.pesan > p:last-of-type,.pesan > button{flex:none}

@media (max-width: 620px) {
  .pesan{padding:18px 18px 16px;gap:10px;max-width:min(480px,94vw)}
  .pesan h2{font-size:clamp(20px,5.6vw,26px)}
  .pesan p{font-size:14.5px;line-height:1.5}
  .pesan .eyebrow,.pesan .label{font-size:11px}
}
@media (max-height: 620px) {
  .pesan{padding:14px 16px 14px;gap:8px}
  .pesan h2{font-size:20px}
  .pesan p{font-size:13.5px;line-height:1.45}
}

/* Kartu pengantar dan kartu kasus harus di atas bilah Mode 4D (lapis 70),
   kalau tidak tombolnya tertutup dan tidak bisa ditekan. */
.pesan{z-index:80}
.kartu-kasus{z-index:76}

/* Layar pendek (ponsel melintang): arena tidak boleh dipaksa setinggi 420px,
   karena layarnya sendiri lebih pendek dan kartu pengantar jadi terdorong keluar. */
@media (max-height: 620px) {
  .arena{min-height:0}
}

/* Anak yang bisa digulir tidak menyumbang lebar, sehingga kartu menciut jadi
   selebar judulnya saja. Lebarnya karena itu ditetapkan, bukan mengikuti isi. */
.pesan{width:min(480px, 92vw)}
@media (max-height: 620px){ .pesan{width:min(560px, 88vw)} }