/* Bina Tamadun — tema terakota & emas (menindih token enjin sg_game.css). Landskap tepi ke tepi (G45). */
html,*{-webkit-tap-highlight-color:transparent}
:root{--g-latar:#1c1208;--g-latar2:#2a1b0c;--g-panel:#33210f;--g-panel2:#432b13;--g-garis:rgba(253,230,138,.22);--g-teks:#fff8eb;--g-redup:#e3cfae;
  --g-utama:#c2410c;--g-utama2:#7c2d12;--g-emas:#fbbf24;--g-emas2:#b45309;--g-permata:#38bdf8;--g-nav-penanda:#fbbf24;color-scheme:dark}
body{background:var(--g-latar)}
.g-nav button.aktif{color:#fff;background:linear-gradient(180deg,#f59e0b,#b45309);box-shadow:0 3px 0 #78350f}
.bt-hal{display:none;padding:12px max(12px,env(safe-area-inset-left)) 24px}.bt-hal.aktif{display:block}
#kanvas{position:absolute;inset:0;display:block;touch-action:none}
#s-main{touch-action:none}
#tajuk{position:absolute;inset:0;z-index:5;cursor:pointer;background:linear-gradient(180deg,rgba(28,18,8,.55),rgba(28,18,8,0) 35%,rgba(28,18,8,0) 65%,rgba(28,18,8,.7))}
#tajuk[hidden]{display:none}
.bt-logo{position:absolute;top:max(7%,env(safe-area-inset-top));left:0;right:0;text-align:center;padding:0 12px}
.bt-logo h1{margin:0;font-size:clamp(2.2rem,7vw,4rem);font-weight:800;color:#fde68a;letter-spacing:.02em;line-height:1;text-shadow:0 4px 0 #b45309,0 8px 0 #78350f,0 0 30px rgba(251,191,36,.5);transform:rotate(-2deg)}
.bt-logo p{display:inline-block;margin:12px 0 0;background:rgba(28,18,8,.72);border:1px solid var(--g-garis);border-radius:999px;padding:5px 14px;font-weight:700}
.bt-ketik{position:absolute;left:50%;bottom:max(7%,env(safe-area-inset-bottom));transform:translateX(-50%);background:linear-gradient(180deg,#f59e0b,#b45309);color:#fff;font-weight:800;font-size:1.2rem;padding:12px 30px;border-radius:999px;box-shadow:0 5px 0 #78350f;animation:bt-denyut 1.4s infinite;white-space:nowrap}
@keyframes bt-denyut{50%{transform:translateX(-50%) scale(1.07)}}
/* HUD kota (G43: tidak menutup bahagian tengah kota) */
#hud{position:absolute;inset:0;z-index:6;pointer-events:none}
#hud[hidden]{display:none}
#hud button,#hud .bt-laci{pointer-events:auto}
.bt-atas{display:flex;align-items:flex-start;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
.bt-info{min-width:0;max-width:34%;background:rgba(28,18,8,.8);border:1px solid var(--g-garis);border-radius:14px;padding:4px 10px}
.bt-info b{display:block;font-size:.84rem;color:#fde68a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bt-info span{display:block;font-size:.66rem;color:var(--g-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-stat{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.bt-stat>span{display:inline-flex;align-items:center;gap:4px;background:rgba(28,18,8,.8);border:1px solid var(--g-garis);border-radius:999px;padding:3px 10px;font-weight:800;font-size:.8rem;white-space:nowrap}
.bt-stat small{color:var(--g-redup);font-weight:600}.bt-stat .bt-emas{color:#fde68a}.bt-stat .g-svg{width:15px;height:15px}
.bt-kanan{position:absolute;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.bt-kanan .g-btn{font-size:1.3rem;font-weight:800}
.bt-cermin .g-svg{transform:scaleX(-1)}
.bt-bawah{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(64px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:8px}
.bt-besar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:74px;height:66px;border:0;border-radius:18px;color:#fff;font:800 .8rem var(--g-fon);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.bt-besar .g-svg{width:28px;height:28px}
.bt-besar.bina{background:linear-gradient(180deg,#f97316,#c2410c)}.bt-besar.bina.aktif{background:linear-gradient(180deg,#fbbf24,#b45309)}
.bt-besar.kutip{background:linear-gradient(180deg,#facc15,#ca8a04);color:#422006}.bt-besar.kutip:disabled{filter:saturate(.2) brightness(.7);cursor:default}
.bt-besar:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.bt-mercu{margin-left:auto;max-width:min(46%,380px);text-align:left;border:2px solid #fbbf24;background:rgba(28,18,8,.86);color:#fff;border-radius:16px;padding:6px 12px;cursor:pointer;font:600 .8rem var(--g-fon);animation:bt-cahaya 2s infinite}
.bt-mercu b{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-mercu-t{display:flex;align-items:center;gap:4px;color:#fde68a;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.bt-mercu-t .g-svg{width:14px;height:14px}
@keyframes bt-cahaya{50%{box-shadow:0 0 0 4px rgba(251,191,36,.25)}}
.bt-amaran{position:absolute;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 52px);transform:translateX(-50%);background:rgba(190,18,60,.88);color:#fff;border-radius:999px;padding:4px 12px;font-weight:700;font-size:.78rem;white-space:nowrap}
.bt-amaran[hidden]{display:none}.bt-amaran .g-svg{width:14px;height:14px;vertical-align:-2px}
/* laci binaan */
.bt-laci{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:8px;background:linear-gradient(180deg,rgba(51,33,15,.97),rgba(28,18,8,.98));border-top:2px solid #b45309;border-radius:18px 18px 0 0;padding:6px max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));animation:bt-naik .2s ease-out}
.bt-laci[hidden]{display:none}
.bt-laci-k{flex-direction:column;justify-content:center!important;gap:6px;margin:0!important}.bt-laci-k b{writing-mode:horizontal-tb;font-size:.85rem}
@keyframes bt-naik{from{transform:translateY(100%)}}
.bt-laci-k{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.bt-laci-k b{display:flex;align-items:center;gap:6px;color:#fde68a}
.bt-laci-k .g-btn{width:34px;height:34px;min-height:0}
.bt-laci-isi{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.bt-bina{flex:none;width:112px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto auto;column-gap:6px;align-items:center;text-align:left;border:2px solid rgba(253,230,138,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:14px;padding:5px 6px;cursor:pointer;font:600 .7rem var(--g-fon)}
.bt-bina b{font-size:.78rem;line-height:1.15}.bt-bina small{color:var(--g-redup);font-size:.64rem;line-height:1.2}.bt-bina em{font-style:normal;font-weight:800;color:#fde68a;display:flex;align-items:center;gap:3px}
.bt-bina .g-svg{width:15px;height:15px}
.bt-bina-k{grid-row:1/4;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}.bt-bina-k .g-svg{width:18px;height:18px}
.bt-bina-k.kediaman{background:#2563eb}.bt-bina-k.ekonomi{background:#ca8a04}.bt-bina-k.hiasan{background:#16a34a}
.bt-bina.aktif{border-color:#fbbf24;background:rgba(251,191,36,.2)}.bt-bina.mahal{opacity:.55}.bt-bina.kunci{opacity:.4}
/* kuiz landskap */
#kuiz{position:absolute;inset:0;z-index:20;background:rgba(20,12,4,.72);display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#kuiz[hidden]{display:none}
.bt-kuiz{width:min(100%,980px);max-height:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.bt-kuiz-kiri{background:linear-gradient(180deg,#fef3c7,#fde68a);color:#1c1917;border:3px solid #b45309;border-radius:20px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-height:calc(100dvh - 24px);overflow:auto}
.bt-kuiz-k{display:flex;gap:6px;flex-wrap:wrap}.bt-kuiz-k .g-cip{color:#fff}
.bt-kuiz-sub{display:block;margin-top:4px;color:#78350f;font-weight:700;font-size:.74rem}
.bt-tp{display:block;font-size:.68rem;font-weight:800;color:#0f766e;letter-spacing:.05em;margin-top:6px}
.bt-kuiz-s{font-size:1.08rem;font-weight:800;line-height:1.35;margin:4px 0 8px}
.bt-kuiz-bantu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.bt-kuiz-bantu .g-btn{min-height:36px;padding:4px 10px;font-size:.8rem}.bt-kuiz-bantu [data-b=keluar]{margin-left:auto;width:36px;height:36px}
.bt-kuiz-bantu .g-btn.aktif{background:#0ea5e9;color:#fff}
.bt-pilihan{display:grid;gap:8px}
.bt-pilihan button{display:flex;align-items:center;gap:10px;text-align:left;border:3px solid rgba(255,255,255,.18);background:rgba(28,18,8,.9);color:#fff;border-radius:16px;padding:12px 14px;font:700 .95rem var(--g-fon);cursor:pointer;min-height:54px;transition:transform .1s}
.bt-pilihan button:active{transform:scale(.98)}
.bt-pilihan button i{font-style:normal;flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#b45309;color:#fde68a;font-weight:800}
.bt-pilihan button.betul{border-color:#22c55e;background:#14532d}.bt-pilihan button.salah{border-color:#f43f5e;background:#7f1d1d}.bt-pilihan button.buang{opacity:.25}
.bt-pilihan button:disabled{cursor:default}
.bt-kuiz-h{margin-top:8px;border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.6)}.bt-kuiz-h.ok b{color:#15803d}.bt-kuiz-h.no b{color:#be123c}.bt-kuiz-h p{margin:4px 0 8px;font-size:.88rem}
.bt-kuiz-h b{display:flex;align-items:center;gap:5px}
/* peristiwa (modal) */
.bt-pst-k{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.bt-pst-k>span:first-child{display:flex;align-items:center;gap:6px;font-weight:800;color:#c4b5fd}
.bt-pst blockquote{margin:0 0 8px;padding:8px 12px;border-left:4px solid #a78bfa;background:rgba(167,139,250,.12);border-radius:8px;font-style:italic}
.bt-pst-s{font-weight:800;margin:4px 0 8px}
.bt-pst .bt-pilihan{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.bt-pst-h{margin-top:8px}.bt-pst-h b{display:flex;align-items:center;gap:5px}.bt-pst-h .ok{color:#4ade80}.bt-pst-h .no{color:#fb7185}.bt-pst-h p{margin:4px 0}
.bt-kron-urut{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.bt-kron-urut span{flex:1 1 120px;min-height:34px;border:2px dashed rgba(253,230,138,.35);border-radius:10px;padding:5px 8px;font-weight:700;font-size:.82rem;color:#fde68a}
.bt-kron button:disabled{opacity:.35}
/* popup landskap */
.g-popup.bt-popup-l{flex-direction:row;gap:16px;align-items:flex-start;text-align:left}.bt-popup-l>div{flex:1;min-width:0}.bt-popup-l .g-kad-aksi{justify-content:flex-start}
.bt-kad-artifak{width:min(26vw,170px);max-height:62vh;object-fit:contain;flex:none;border-radius:14px;box-shadow:0 0 30px rgba(251,191,36,.45)}
.bt-fakta{margin:6px 0;padding-left:18px;font-size:.86rem}
.bt-bintang{display:flex;gap:4px;color:rgba(255,255,255,.2);font-size:1.4rem}.bt-bintang .on{color:#fbbf24}.bt-bintang.besar{font-size:2.4rem;justify-content:flex-start}
.bt-ganjaran{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.bt-ganjaran span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.08);border-radius:999px;padding:5px 11px;font-weight:800;font-size:.9rem}
/* menu */
.bt-ting{max-width:1100px;margin:0 auto 18px}.bt-ting-k{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 10px}.bt-ting-k h2{margin:0;color:#fde68a;font-size:1.22rem}
.bt-kota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.bt-kota{display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;text-align:left;border:2px solid rgba(253,230,138,.25);border-radius:18px;background-size:cover;background-position:center 30%;color:#fff;padding:10px 12px;cursor:pointer;font:600 .8rem var(--g-fon)}
.bt-kota small{color:#fdba74;font-weight:800;font-size:.66rem;letter-spacing:.04em}.bt-kota b{font-size:1rem;text-shadow:0 2px 6px #000}
.bt-kota-st{display:flex;align-items:center;gap:4px;color:#fde68a;font-weight:700;font-size:.78rem;margin-top:2px}.bt-kota-st .g-svg{width:14px;height:14px}
.bt-kota.semasa{border-color:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.3)}.bt-kota.lengkap{border-color:#34d399}.bt-kota.kunci{filter:grayscale(.85) brightness(.6)}
.bt-kunci-t{grid-column:1/-1;padding:16px;text-align:center;color:var(--g-redup);background:rgba(28,18,8,.8);border-radius:16px}
.bt-kad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,140px));gap:10px}
.bt-kad-grid button{border:2px solid rgba(253,230,138,.3);background:#2a1b0c;border-radius:14px;padding:6px;cursor:pointer;color:#fff;font:700 .74rem var(--g-fon)}
.bt-kad-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;margin-bottom:4px}
.bt-kad-grid button.tiada img{filter:brightness(.28) saturate(.2) blur(2px)}
.bt-kad-grid .bk-emas{border-color:#fbbf24}.bt-kad-grid .bk-jed{border-color:#34d399}.bt-kad-grid .bk-ungu{border-color:#a78bfa}.bt-kad-grid .bk-merah{border-color:#fb7185}.bt-kad-grid .bk-pelangi{border-color:#f472b6}
.bt-misi{display:grid;gap:8px}.bt-misi div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:12px;padding:8px 10px}.bt-misi div span{flex:1}.bt-misi div em{font-style:normal;color:#fde68a;font-weight:800}.bt-misi div.siap{opacity:.55}
.bt-bar{height:8px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}.bt-bar i{display:block;height:100%;background:#fbbf24}
@media (max-height:430px){
  .bt-kuiz-s{font-size:.98rem}.bt-pilihan button{min-height:44px;padding:8px 10px;font-size:.86rem}
  .bt-besar{width:62px;height:56px}.bt-besar .g-svg{width:22px;height:22px}
  .bt-kanan .g-btn{width:38px;height:38px;min-height:0}
  .bt-stat>span{padding:2px 8px;font-size:.74rem}
}
@media (max-width:700px){ .bt-kuiz{grid-template-columns:1fr} .g-popup.bt-popup-l{flex-direction:column;align-items:center} }
.bt-popup-l>.bt-kad-kol{flex:none;text-align:center;max-width:180px}.bt-popup-l>.bt-kad-kol .bt-kad-artifak{width:100%}