/* Penjaga Masa — tema "arkib masa" gelap ungu-emas (menindih token enjin sg_game.css) */
html,*{-webkit-tap-highlight-color:transparent}
:root{--g-latar:#120f2e;--g-latar2:#1e1b4b;--g-panel:#1c1a3f;--g-panel2:#2a2660;--g-garis:rgba(253,230,138,.18);--g-teks:#f8f5ff;--g-redup:#c4bde8;
  --g-utama:#0d9488;--g-utama2:#115e59;--g-emas:#fbbf24;--g-emas2:#b45309;--g-permata:#38bdf8;--g-nav-penanda:#fbbf24;color-scheme:dark}
body{background:var(--g-latar)}
.g-panel,.g-kad{background:linear-gradient(180deg,#25215a,#1a1740);border:1px solid var(--g-garis)}
.g-nav button{color:#c4bde8}.g-nav button.aktif{color:#fff;background:linear-gradient(180deg,#0d9488,#115e59);box-shadow:0 3px 0 #0b3f3b}
body.g-sentuh .g-nav,body:not(.g-sentuh) .g-nav{background:linear-gradient(180deg,#2a2660,#161338);border:2px solid rgba(253,230,138,.25)}
.pm-hal{display:none;padding:12px max(12px,env(safe-area-inset-left)) 24px}.pm-hal.aktif{display:block}

/* ---------- lapisan adegan 2D ---------- */
.pm-latar{position:absolute;inset:0;overflow:hidden;background:#0b0a1f}
.pm-latar img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;animation:pm-kb 38s ease-in-out infinite alternate;will-change:transform}
@keyframes pm-kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.5%,1%)}}
.pm-latar::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,30,.35),rgba(10,8,30,0) 25%,rgba(10,8,30,0) 55%,rgba(10,8,30,.55))}
.pm-hidup{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pm-watak{position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none}
.pm-watak img{position:absolute;bottom:0;max-height:100%;max-width:62%;object-fit:contain;transition:opacity .35s,transform .35s,filter .35s;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));transform-origin:50% 100%}
#ad-kiri{left:-4%}#ad-kanan{right:-4%}
.pm-watak img.redup{filter:brightness(.55) saturate(.7) drop-shadow(0 8px 18px rgba(0,0,0,.45));transform:scale(.94)}
.pm-watak img.cakap{animation:pm-nafas 3.2s ease-in-out infinite}
.pm-watak img.terbang{animation:pm-apung 3s ease-in-out infinite}
@keyframes pm-nafas{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012) translateY(-2px)}}
@keyframes pm-apung{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.pm-watak img:not([src]),.pm-watak img[src=""]{display:none}

.pm-hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:8px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));z-index:6}
.pm-hud-t{background:rgba(18,15,46,.82);border:1px solid var(--g-garis);border-radius:14px;padding:6px 12px;min-width:0}
.pm-hud-t b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fde68a}
.pm-hud-t span{font-size:.72rem;color:var(--g-redup)}
.pm-hud-k{display:flex;align-items:center;gap:8px}
.pm-titik{display:flex;gap:4px}.pm-titik i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}.pm-titik i.on{background:#fbbf24;box-shadow:0 0 6px #fbbf24}

.pm-dialog{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:8;
  background:linear-gradient(180deg,rgba(30,27,75,.96),rgba(17,14,44,.97));border:2px solid rgba(253,230,138,.45);border-radius:20px;padding:22px 16px 10px;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer}
.pm-nama{position:absolute;top:-15px;left:16px;background:linear-gradient(180deg,#fbbf24,#d97706);color:#2a1300;font-weight:800;padding:3px 14px;border-radius:999px;font-size:.92rem;box-shadow:0 3px 0 #92400e}
.pm-nama.kenyalang{background:linear-gradient(180deg,#5eead4,#0d9488);color:#042f2e;box-shadow:0 3px 0 #115e59}
.pm-nama.pemadam{background:linear-gradient(180deg,#a78bfa,#6d28d9);color:#fff;box-shadow:0 3px 0 #4c1d95}
.pm-nama.narator{background:#475569;color:#fff;box-shadow:0 3px 0 #1e293b}
.pm-dialog p{margin:0;min-height:3.3em;font-size:1.06rem;line-height:1.5;color:#fff}
.pm-dialog p.narator{font-style:italic;color:#e0d9ff}
.pm-dialog-k{display:flex;align-items:center;gap:8px;margin-top:6px}
.pm-dialog-k button{border:0;background:rgba(255,255,255,.1);color:#fde68a;border-radius:999px;padding:5px 12px;font:700 .8rem var(--g-fon);cursor:pointer}
.pm-dialog-k button:hover{background:rgba(255,255,255,.2)}
.pm-seterus{flex:1;text-align:center;font-size:.75rem;color:var(--g-redup);animation:pm-kelip 1.4s infinite}
@keyframes pm-kelip{50%{opacity:.35}}

/* pentas cabaran (atas latar, di bawah HUD) */
.pm-pentas{position:absolute;left:0;right:0;top:calc(max(10px,env(safe-area-inset-top)) + 56px);bottom:0;z-index:7;display:none;overflow:auto;padding:8px max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));touch-action:pan-y}
.pm-pentas.aktif{display:block}
.pm-kad{background:linear-gradient(180deg,rgba(37,33,90,.97),rgba(22,19,56,.98));border:2px solid rgba(253,230,138,.35);border-radius:20px;padding:16px;max-width:640px;margin:0 auto 12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pm-kad h2{margin:0 0 6px;font-size:1.2rem;color:#fde68a;display:flex;align-items:center;gap:8px}
.pm-kad .pm-jenis{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5eead4;margin-bottom:6px}
.pm-soal{font-size:1.08rem;font-weight:700;line-height:1.45;margin:6px 0 12px}
.pm-petikan{background:#f5ecd7;color:#3b2a14;border-radius:12px;padding:12px 14px;font-family:Georgia,serif;font-size:.98rem;line-height:1.55;border-left:6px solid #b45309;margin:8px 0 12px;box-shadow:inset 0 0 30px rgba(120,80,20,.18)}
.pm-pil{display:grid;gap:9px}
.pm-pil button{border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;border-radius:14px;padding:12px 14px;text-align:left;font:700 1rem var(--g-fon);cursor:pointer;line-height:1.35;min-height:52px}
.pm-pil button:hover{background:rgba(253,230,138,.14);border-color:rgba(253,230,138,.5)}
.pm-pil button.betul{background:#0d9488;border-color:#5eead4}.pm-pil button.salah{background:#9f1239;border-color:#fb7185}.pm-pil button.buang{opacity:.25;pointer-events:none}
.pm-pil button[disabled]{cursor:default}
.pm-terang{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.35);font-size:.95rem}
.pm-terang.salah{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.35)}
.pm-aksi{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
.pm-bantu{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pm-bantu button{border:1px solid rgba(253,230,138,.35);background:rgba(253,230,138,.08);color:#fde68a;border-radius:999px;padding:5px 11px;font:700 .8rem var(--g-fon);cursor:pointer}
.pm-bantu button[disabled]{opacity:.4;cursor:not-allowed}
/* kronologi: ketik kad mengikut urutan */
.pm-krono-slot{display:grid;gap:7px;margin:8px 0}
.pm-krono-slot div{min-height:46px;border:2px dashed rgba(253,230,138,.4);border-radius:12px;display:flex;align-items:center;gap:10px;padding:6px 10px;color:var(--g-redup);font-weight:700}
.pm-krono-slot div b{width:26px;height:26px;border-radius:50%;background:#fbbf24;color:#2a1300;display:grid;place-items:center;flex:none}
.pm-krono-slot div.isi{border-style:solid;background:rgba(253,230,138,.1);color:#fff;cursor:pointer}
.pm-krono-slot div.betul{border-color:#5eead4;background:rgba(13,148,136,.35)}.pm-krono-slot div.salah{border-color:#fb7185;background:rgba(159,18,57,.35)}
.pm-krono-kad{display:flex;flex-wrap:wrap;gap:7px}
.pm-krono-kad button{border:0;border-radius:12px;background:#f5ecd7;color:#3b2a14;padding:9px 12px;font:700 .92rem var(--g-fon);cursor:pointer;box-shadow:0 3px 0 #b45309;text-align:left}
.pm-krono-kad button[disabled]{opacity:.3}
/* bukti: kilauan di atas latar */
.pm-bukti{position:absolute;inset:0;z-index:5;pointer-events:none}
.pm-bukti button{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;
  background:radial-gradient(circle,rgba(253,230,138,.95) 0 14%,rgba(251,191,36,.45) 30%,rgba(251,191,36,0) 68%);animation:pm-denyut 1.5s ease-in-out infinite}
.pm-bukti button::after{content:'';position:absolute;inset:18px;border:2px solid #fff;border-radius:50%;opacity:.8}
.pm-bukti button.dapat{display:none}
@keyframes pm-denyut{0%,100%{transform:scale(.85)}50%{transform:scale(1.12)}}
/* bos */
.pm-bos{text-align:center}
.pm-bos img{width:auto;max-width:60vw;max-height:24vh;filter:drop-shadow(0 0 24px rgba(167,139,250,.8));animation:pm-apung 2.6s ease-in-out infinite}
.pm-bos img.kena{animation:pm-kena .45s}
@keyframes pm-kena{0%{transform:translateX(0);filter:brightness(3)}30%{transform:translateX(-12px)}60%{transform:translateX(10px)}100%{transform:none}}
.pm-hp{height:14px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden;margin:6px 0}.pm-hp i{display:block;height:100%;background:linear-gradient(90deg,#a78bfa,#6d28d9);transition:width .4s}
.pm-hati{display:flex;gap:4px;justify-content:center;color:#fb7185;font-size:1.3rem}.pm-hati .g-svg.hilang{opacity:.2}
.pm-masa{height:8px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin:8px 0}.pm-masa i{display:block;height:100%;background:linear-gradient(90deg,#fbbf24,#f97316)}
.pm-sinar{position:fixed;left:50%;bottom:20%;width:10px;height:0;background:linear-gradient(0deg,rgba(253,230,138,0),#fde68a);transform:translateX(-50%);z-index:20;pointer-events:none;animation:pm-sinar .5s ease-out forwards}
@keyframes pm-sinar{0%{height:0;opacity:1}70%{height:55vh;opacity:1}100%{height:60vh;opacity:0}}
/* kad pembuka */
.pm-pembuka{position:absolute;inset:0;z-index:9;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(30,27,75,.75),rgba(10,8,30,.95));animation:pm-pudar 2.6s forwards;pointer-events:none}
.pm-pembuka small{display:block;color:#5eead4;font-weight:800;letter-spacing:.12em}
.pm-pembuka h2{font-family:'Cinzel Decorative',var(--g-fon);font-size:clamp(1.5rem,6vw,2.4rem);margin:6px 16px;color:#fde68a;text-shadow:0 3px 0 #78350f}
@keyframes pm-pudar{0%,70%{opacity:1}100%{opacity:0}}

/* ---------- tajuk ---------- */
#s-tajuk{cursor:pointer}
.pm-tajuk-watak{position:absolute;left:0;right:0;bottom:16%;height:52%;pointer-events:none}
.pm-tajuk-watak img{position:absolute;bottom:0;max-height:100%;max-width:48%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
#tw-aina{left:2%;animation:pm-nafas 3.4s ease-in-out infinite}#tw-raka{right:2%;animation:pm-nafas 3s ease-in-out infinite}
#tw-kenyalang{left:50%;bottom:58%;max-width:34%;max-height:44%;transform:translateX(-50%);animation:pm-apung2 3s ease-in-out infinite}
@keyframes pm-apung2{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-16px)}}
.pm-logo{position:absolute;top:max(7%,env(safe-area-inset-top));left:0;right:0;text-align:center;padding:0 12px}
.pm-logo h1{margin:0;font-family:'Cinzel Decorative',var(--g-fon);font-size:clamp(2.2rem,10vw,3.6rem);color:#fde68a;text-shadow:0 4px 0 #78350f,0 0 24px rgba(251,191,36,.6);line-height:1.05}
.pm-logo p{margin:8px auto 0;display:inline-block;background:rgba(18,15,46,.75);border:1px solid var(--g-garis);border-radius:999px;padding:4px 14px;font-weight:700;color:#e0d9ff;font-size:.9rem}
.pm-ketik{position:absolute;left:50%;bottom:max(6%,env(safe-area-inset-bottom));transform:translateX(-50%);background:linear-gradient(180deg,#14b8a6,#0f766e);color:#fff;font-weight:800;font-size:1.2rem;padding:12px 30px;border-radius:999px;box-shadow:0 5px 0 #115e59;animation:pm-denyut2 1.6s infinite;white-space:nowrap}
@keyframes pm-denyut2{50%{transform:translateX(-50%) scale(1.06)}}

/* ---------- Laluan Masa ---------- */
.pm-ting{margin:0 auto 18px;max-width:760px}
.pm-ting-k{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 2px 10px}
.pm-ting-k h2{margin:0;font-size:1.25rem;color:#fde68a}
.pm-bab{position:relative;border-radius:20px;overflow:hidden;margin-bottom:12px;border:2px solid rgba(253,230,138,.25);background:#14112f}
.pm-bab-k{position:relative;height:118px;display:flex;align-items:flex-end;padding:10px 12px;background-size:cover;background-position:center 40%}
.pm-bab-k::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,30,.05),rgba(10,8,30,.85))}
.pm-bab-k div{position:relative}.pm-bab-k small{color:#5eead4;font-weight:800;font-size:.72rem;letter-spacing:.08em}.pm-bab-k h3{margin:0;font-size:1.08rem;color:#fff;text-shadow:0 2px 6px #000}
.pm-ep{display:grid;gap:6px;padding:10px}
.pm-ep button{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;border-radius:14px;padding:9px 10px;text-align:left;font:700 .95rem var(--g-fon);cursor:pointer}
.pm-ep button:hover{background:rgba(253,230,138,.1)}
.pm-ep button.kunci{opacity:.45}
.pm-ep button.semasa{border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.35);animation:pm-semasa 2s infinite}
@keyframes pm-semasa{50%{box-shadow:0 0 0 5px rgba(251,191,36,.15)}}
.pm-ep .no{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#2a2660;color:#fde68a;font-size:.8rem}
.pm-ep .t{flex:1;min-width:0}.pm-ep .t small{display:block;color:var(--g-redup);font-weight:600;font-size:.74rem}
.pm-ep .b{color:#fbbf24;white-space:nowrap;font-size:.85rem}.pm-ep .b .g-svg.off{color:rgba(255,255,255,.2)}
.pm-kunci-t{padding:16px;text-align:center;color:var(--g-redup)}
/* Muzium */
.pm-muzium{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.pm-muzium button{border:2px solid rgba(253,230,138,.3);background:#1a1740;border-radius:14px;padding:6px;cursor:pointer;color:#fff;font:700 .74rem var(--g-fon);text-align:center}
.pm-muzium img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;margin-bottom:4px}
.pm-muzium button.tiada img{filter:brightness(0) opacity(.35)}
.pm-muzium .bk-emas{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.45)}.pm-muzium .bk-jed{border-color:#5eead4}.pm-muzium .bk-ungu{border-color:#a78bfa}.pm-muzium .bk-merah{border-color:#fb7185}.pm-muzium .bk-pelangi{border-image:linear-gradient(90deg,#fb7185,#fbbf24,#5eead4,#a78bfa) 1}
.pm-misi{display:grid;gap:8px}
.pm-misi div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:12px;padding:8px 10px}
.pm-misi div span{flex:1}.pm-misi div em{font-style:normal;color:#fde68a;font-weight:800}
.pm-misi div.siap{opacity:.55}
.pm-bar{height:8px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}.pm-bar i{display:block;height:100%;background:#fbbf24}
.pm-ganjaran{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.pm-ganjaran span{background:rgba(255,255,255,.08);border-radius:999px;padding:5px 12px;font-weight:800}
.pm-bintang-besar{display:flex;gap:8px;justify-content:center;font-size:2.6rem;color:rgba(255,255,255,.2)}.pm-bintang-besar .on{color:#fbbf24;filter:drop-shadow(0 0 8px rgba(251,191,36,.7))}
.pm-kad-artifak{width:min(62vw,240px);border-radius:14px;box-shadow:0 0 30px rgba(251,191,36,.45);animation:pm-putar 1.1s ease-out}
@keyframes pm-putar{from{transform:rotateY(90deg) scale(.6)}to{transform:none}}
@media (max-width:600px){.pm-dialog p{font-size:.98rem}.pm-pil button{font-size:.95rem;padding:11px 12px}}
/* tema Muzium (Kedai) */
#h-muzium[data-tema=kayu]{background:linear-gradient(180deg,#3b2414,#24160c)}
#h-muzium[data-tema=marmar]{background:linear-gradient(180deg,#3a3f4b,#1f232b)}
#h-muzium[data-tema=malam]{background:radial-gradient(circle at 30% 10%,#312e81,#0b0a1f 70%)}
#h-muzium[data-tema=istana]{background:linear-gradient(180deg,#5b3a0a,#2a1300)}
#h-muzium[data-tema=arkib]{background:url(aset/latar/arkib.webp) center/cover fixed}
#h-muzium[data-tema]{border-radius:18px}
/* pembetulan paparan: Muzium & Kedai kosmetik */
.pm-muzium{grid-template-columns:repeat(auto-fill,minmax(104px,150px))}
.pm-muzium button.tiada img{filter:brightness(.28) saturate(.2) blur(2px)}
#h-kedai .g-barang-visual{height:150px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
#h-kedai .g-barang-visual img{width:auto!important;height:100%!important;max-width:100%;object-fit:contain!important;position:static!important}