/* Kampung Fiqh UI: follows GAME-STANDARD.md Bahagian C (one font, text colour by surface, thin borders, centred buttons). Landscape first.
   Arabic/Jawi text uses Amiri (decision K3: Lilita One has no Arabic letters); everything else is Lilita One. */
@font-face{font-family:Lilita;src:url(../assets/fonts/lilita.woff2) format('woff2');font-display:block}
@font-face{font-family:Amiri;src:url(../assets/fonts/amiri-ar.woff2) format('woff2');font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:AmiriQ;src:url(../assets/fonts/amiriquran-ar.woff2) format('woff2');font-display:block;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
:root{--ink:#1f1208;--brown:#5a3418;--paper:#fbf1da;--paper2:#f1dfb8;--blue:#2f7fe0;--red:#e0392f;
 --outline:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink),0 2px 1px rgba(0,0,0,.35);--hdr:56px;--xbtn:40px;
 --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right);--rfmin:14px}
*,*::before,*::after,button,input,textarea{box-sizing:border-box;font-family:Lilita,sans-serif!important;font-weight:400!important;font-synthesis:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#3a7a3a;color:#fff;touch-action:none}
#cv,#ov{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}#ov{pointer-events:none;z-index:2}
.hidden{display:none!important}
button{color:#fff;cursor:pointer}
.o,b,h2,.btn,.cost,.pill b,.tag{text-shadow:var(--outline)}
p,li{letter-spacing:.3px;line-height:1.35}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 115%,#9af0b8 0%,#2fb47a 38%,#0f5a3e 100%)}
.screen.clear{background:linear-gradient(rgba(0,0,0,0) 30%,rgba(10,20,40,.55))}
.logo{text-align:center;line-height:.85;filter:drop-shadow(0 7px 0 rgba(0,0,0,.35));animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
.logo .l1{font-size:clamp(38px,9vw,80px);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.logo .l2{font-size:clamp(58px,14vw,124px);background:linear-gradient(#fff6a8 10%,#ffc928 45%,#e0601a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.logo .l3{font-size:16px;margin-top:10px;color:#e8f6ff;text-shadow:0 2px 3px #000;letter-spacing:1px}
.logo.small .l1{font-size:34px}.logo.small .l2{font-size:52px}.logo.small{margin-bottom:10px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bar{width:min(420px,80vw);height:22px;border:2px solid var(--ink);border-radius:13px;background:#0e2440;overflow:hidden;margin-top:24px}
#loadbar{height:100%;width:0;background:linear-gradient(#fff3a0,#ffc928 50%,#e08a00);border-radius:11px;transition:width .2s}
#loadtxt,#matchLoadTxt{margin-top:10px;font-size:18px;text-shadow:var(--outline)}
.card{background:linear-gradient(var(--paper),var(--paper2));border:3px solid var(--ink);border-radius:22px;padding:18px;width:min(380px,90vw);text-align:center;box-shadow:inset 0 0 0 2px #fff7e2,0 8px 0 rgba(0,0,0,.3)}
.card h2{color:var(--brown);text-shadow:none;font-size:26px;margin:0 0 6px}.card p{color:var(--brown);margin:4px 0}
input{width:100%;padding:11px;font-size:20px;border-radius:14px;border:2px solid var(--ink);margin:8px 0;background:#fff;color:var(--ink);text-align:center;user-select:text}
#namebtn{font-size:22px;padding:10px 44px 12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.1;vertical-align:middle;border:2px solid var(--ink);border-radius:14px;padding:9px 16px 11px;font-size:17px;margin:3px;
 background:linear-gradient(#b8b8b8,#8a8a8a);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.18),0 3px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.18),0 1px 0 var(--ink)}
.btn.green{background:linear-gradient(#b4f05a,#5fb31a 60%,#4a9a10)}.btn.red{background:linear-gradient(#ff8a6a,#ef3e25 60%,#c92a14)}
.btn.gold{background:linear-gradient(#ffd34d,#f5a300 55%,#dd8800)}.btn.blue{background:linear-gradient(#8fd0ff,#2f8be8 60%,#1f6ec4)}.btn.purple{background:linear-gradient(#e0a8ff,#a052e0 60%,#7d33bf)}
.btn:disabled{filter:grayscale(1) brightness(.85)}
.btn img,.cost img{width:22px;height:22px}
.cost{display:inline-flex;align-items:center;gap:4px;font-size:17px;color:#fff;margin:0}
.btn .cost.bad{background:#d9342a;border-radius:8px;padding:0 6px 0 3px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35)}
.plus{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:8px;border:1.5px solid var(--ink);font-size:17px;background:linear-gradient(#b4f05a,#5fb31a);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--ink);text-shadow:var(--outline)}
.badge{position:absolute;right:6px;top:-2px;min-width:20px;height:20px;border-radius:10px;background:#ff3b30;border:1.5px solid #fff;font-size:12px;font-style:normal;line-height:17px;padding:0 4px;box-shadow:0 1px 3px rgba(0,0,0,.4);color:#fff}
.smallbtn{width:40px;height:40px;flex:0 0 40px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(#b08a5a,#7a5430);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
.smallbtn i{display:block;width:20px;height:3.5px;border-radius:2px;background:#fff;box-shadow:0 1px 0 var(--ink)}
.bigbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--ink);border-radius:20px;background:linear-gradient(#ffe36a,#f5a300 55%,#dd7a00);
 box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.18),0 5px 0 var(--ink),0 10px 18px rgba(0,0,0,.3);padding:0 18px}
.bigbtn span{font-size:34px;letter-spacing:1px;line-height:1;text-shadow:var(--outline)}.bigbtn small{font-size:13px;margin-top:2px;text-shadow:var(--outline)}
.bigbtn:active{transform:translateY(3px)}

/* ---------- top bar ---------- */
#app{position:fixed;inset:0;z-index:10;pointer-events:none}#app>*{pointer-events:auto}
#topbar{position:absolute;left:0;right:0;top:0;height:calc(52px + var(--sat));padding:calc(6px + var(--sat)) calc(8px + var(--sar)) 6px calc(8px + var(--sal));display:flex;align-items:center;gap:8px;background:linear-gradient(rgba(14,60,36,.86),rgba(14,60,36,0));z-index:11}
.lvbadge{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#8ff0b8,#1f9d6b);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.lvbadge b{font-size:18px}
#pinfo{flex:1;min-width:0;max-width:200px}#pname{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xpbar{position:relative;height:13px;border-radius:7px;background:rgba(10,8,20,.7);border:1px solid rgba(0,0,0,.6);overflow:hidden;margin-top:2px}
#xpfill{height:100%;width:0;background:linear-gradient(#9ad8ff,#3a8ae0)}#xptxt{position:absolute;inset:0;text-align:center;font-size:10px;line-height:12px}
.pill{position:relative;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px 0 4px;border-radius:15px;background:rgba(14,10,24,.72);border:1px solid rgba(0,0,0,.55)}
.pill img{width:28px;height:28px}.pill b{font-size:15px}
.cur{position:relative;display:flex;align-items:center;gap:4px;height:30px;padding:0 8px 0 28px;border-radius:15px;background:rgba(18,10,4,.72);border:1px solid rgba(0,0,0,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cur img{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:34px;height:34px}.cur b{font-size:15px;min-width:30px;text-align:right}
.cur .plus{margin-left:4px;margin-right:-4px}
.store{position:absolute;left:24px;right:8px;bottom:-5px;height:6px;border-radius:3px;background:rgba(10,8,4,.85);border:1px solid rgba(0,0,0,.6);overflow:hidden}
#storefill{height:100%;width:max(var(--rfmin),40%);border-radius:3px;background:linear-gradient(#fff3a0,#ffc928 60%,#e08a00)}
#rankpill b{font-size:14px}
#topbar .spacer{flex:1}

/* ---------- screens area ---------- */
#screens{position:absolute;left:0;right:0;top:calc(52px + var(--sat));bottom:calc(58px + var(--sab));pointer-events:none}
.scr{position:absolute;inset:0;pointer-events:auto;overflow-y:auto;overflow-x:hidden;padding:6px calc(10px + var(--sar)) 14px calc(10px + var(--sal));scrollbar-width:none;overscroll-behavior:contain}
.scr::-webkit-scrollbar{display:none}
.panel{background:linear-gradient(var(--paper),var(--paper2));border:2px solid var(--ink);border-radius:18px;padding:12px;margin:0 auto 12px;max-width:900px;box-shadow:inset 0 0 0 2px #fff7e2,0 4px 0 rgba(0,0,0,.3);color:var(--brown);content-visibility:auto;contain-intrinsic-size:auto 300px}
.ptitle{margin:-12px -12px 12px;padding:9px 14px;border-radius:16px 16px 0 0;background:linear-gradient(#2fb47a,#17805a);border-bottom:2px solid var(--ink);font-size:19px;color:#fff;text-shadow:var(--outline);display:flex;align-items:center;justify-content:space-between;gap:8px}
.ptitle small{font-size:13px}
.muted{color:#7a5a32}

/* home */
#scr-home{pointer-events:none;overflow:hidden}#scr-home>*{pointer-events:auto}
#modeCard{position:absolute;left:calc(10px + var(--sal));top:6px;width:min(300px,40vw);display:flex;flex-direction:column;gap:8px}
#modeTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mtab{height:34px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(#4a6ac8,#2e4a9a);font-size:15px;box-shadow:0 2px 0 var(--ink);text-shadow:var(--outline);display:inline-flex;align-items:center;justify-content:center;padding:0}
.mtab.on{background:linear-gradient(#ffd34d,#f5a300 60%,#dd8800)}
#mapCard{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:14px;background:rgba(8,30,60,.78);border:1px solid rgba(0,0,0,.5);cursor:pointer}
#mapCard img{width:62px;height:62px;flex:0 0 62px}#mapCard .mn{font-size:18px;text-shadow:var(--outline)}#mapCard .md{font-size:12px;color:#d8ecff;line-height:1.2}#mapCard .chg{font-size:11px;color:#ffe36a}
#heroTag{position:absolute;right:calc(14px + var(--sar));bottom:94px;min-width:min(230px,32vw);text-align:center;padding:4px 14px;border-radius:12px;background:rgba(8,30,60,.7);border:1px solid rgba(0,0,0,.5)}
#heroTag b{display:block;font-size:18px}#heroTag span{font-size:12px;color:#cfe8ff}
#passMini{position:absolute;left:calc(10px + var(--sal));bottom:8px;width:min(300px,40vw);padding:6px 10px;border-radius:12px;background:rgba(8,30,60,.78);border:1px solid rgba(0,0,0,.5);cursor:pointer}
#passMini .pt{display:flex;justify-content:space-between;font-size:13px}#passMini .pb{position:relative;height:12px;margin-top:4px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.6);overflow:hidden}
#passMini .pb div{height:100%;width:max(var(--rfmin),10%);border-radius:6px;background:linear-gradient(#ffe36a,#f0a000)}
#playBtn{position:absolute;right:calc(14px + var(--sar));bottom:10px;width:min(230px,32vw);height:74px}

/* bottom nav */
#tabs{position:absolute;left:0;right:0;bottom:0;height:calc(58px + var(--sab));padding:4px calc(6px + var(--sar)) calc(4px + var(--sab)) calc(6px + var(--sal));display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
 background:linear-gradient(#17805a,#0f5a3e);border-top:2px solid var(--ink);z-index:11}
#tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:0;border-radius:12px;background:transparent;padding:0}
#tabs button img{width:34px;height:34px;transition:transform .15s}#tabs button span{font-size:12px;text-shadow:var(--outline)}
#tabs button.on{background:linear-gradient(#3fc48a,#1f9d6b);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}#tabs button.on img{transform:scale(1.12) translateY(-2px)}

/* grids & cards (shared card component: picture box -> name -> info -> price at the bottom) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:radial-gradient(circle at 50% 35%,#fffdf4,#f6e6c2);border:2px solid #b58a52;border-radius:16px;padding:8px;text-align:center;cursor:pointer;box-shadow:0 3px 0 #8a6534}
.item .picbox{width:100%;height:92px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#c8f5d8,#5fc88a 60%,#2a9a5a);border:1.5px solid var(--ink)}
.item .picbox img{width:86px;height:86px;object-fit:contain}
.item img.pic{flex:0 0 92px;height:92px;width:100%;object-fit:contain}.item .nm{color:var(--brown);font-size:16px;line-height:1.1}.item .meta{font-size:12px;color:#7a5a32;line-height:1.15}
.item>.btn{margin-top:auto}.item.done{filter:grayscale(1);opacity:.6}.item.sel{border-color:#5fb31a;box-shadow:0 3px 0 #3a7a10,0 0 0 2px #b4f05a}
.item.locked .picbox{filter:grayscale(.85) brightness(.75)}
.lvtag{position:absolute;left:12px;top:12px;font-size:12px;padding:1px 7px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;text-shadow:var(--outline)}
.rar{display:inline-block;padding:1px 9px;border-radius:8px;font-size:13px;color:#fff;text-shadow:var(--outline);border:1.5px solid var(--ink)}
.tabsRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin-bottom:10px}
.tabsRow button{height:34px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(#a8743f,#7a4f28);font-size:clamp(13px,1.6vw,16px);white-space:nowrap;text-shadow:var(--outline);display:inline-flex;align-items:center;justify-content:center}
.tabsRow button.on{background:linear-gradient(#ffd34d,#f5a300 60%,#dd8800)}

/* stats in dialogs */
.stat{background:#fff8e6;border:1.5px solid #c9a36d;border-radius:10px;padding:6px 12px;margin:5px 0;display:flex;justify-content:space-between;gap:10px;color:var(--brown)}
.stat b{color:var(--brown);text-shadow:none}.stat b span{color:#3a8a10}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.row>*{min-width:0}.row>div{flex:1 1 200px}
.warn{color:#c8281e;text-shadow:none}
.heroPic{width:150px;height:150px;flex:0 0 150px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#c8f5d8,#5fc88a 60%,#2a9a5a);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.heroPic img{width:140px;height:140px;object-fit:contain}

/* quests / pass / daily */
.quest{display:flex;align-items:center;gap:10px;background:#fff8e6;border:2px solid #c9a36d;border-radius:14px;padding:9px;margin:8px 0}
.quest .qt{flex:1;min-width:0;color:var(--brown)}.qbar{position:relative;height:17px;background:#5a3a1c;border-radius:9px;overflow:hidden;margin-top:5px;border:1px solid var(--ink)}
.qbar div{height:100%;width:max(var(--rfmin),0%);border-radius:9px;background:linear-gradient(#b4f05a,#5fb31a)}.qbar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:15px}
.road{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.rstep{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff8e6;border:2px solid #c9a36d;border-radius:14px;padding:6px;color:var(--brown);text-align:center}
.rstep img{width:58px;height:58px}.rstep .tt{font-size:13px;width:100%;border-radius:8px;color:#fff;background:linear-gradient(#2fb47a,#17805a);text-shadow:var(--outline)}.rstep .rw{font-size:13px;line-height:1.1}
.rstep.got{opacity:.5}.rstep.now{border-color:#5fb31a;box-shadow:0 0 0 2px #b4f05a}.rstep.boss .tt{background:linear-gradient(#ff8a6a,#c92a14)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:6px 0}
.day{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:4px;padding:6px 4px 8px;background:linear-gradient(#fffaf0,#f3e2bd);border:2px solid #b58a52;border-radius:12px}
.day .dl{width:100%;font-size:13px;text-align:center;color:#fff;background:linear-gradient(#a8743f,#7a4f28);border-radius:8px;text-shadow:var(--outline)}
.day img{width:72%;aspect-ratio:1;object-fit:contain}.day .da{width:92%;text-align:center;font-size:13px;color:#fff;border-radius:8px;border:1.5px solid var(--ink);background:linear-gradient(#ffcf3f,#e39400);text-shadow:var(--outline);white-space:nowrap;overflow:hidden}
.day.today{background:linear-gradient(#fff6b8,#ffd34a);box-shadow:0 0 0 3px #e8a100}.day.got{filter:grayscale(.7);opacity:.6}

/* ---------- modal (standard) ---------- */
#modal{position:fixed;inset:0;background:rgba(5,10,24,.66);z-index:40;display:flex;align-items:center;justify-content:center;padding:calc(8px + var(--sat)) calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal))}
body.modal-open #modal{padding-top:calc(52px + var(--sat))}   /* the top strip stays free for toasts: a toast never covers the dialog */
#mbox{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;background:linear-gradient(var(--paper),var(--paper2));border:3px solid var(--ink);border-radius:20px;width:min(600px,96vw);max-height:100%;
 box-shadow:inset 0 0 0 2px #fff7e2,0 8px 0 rgba(0,0,0,.35);animation:pop .3s cubic-bezier(.2,1.5,.4,1);color:var(--brown)}
#mcontent{overflow-y:auto;overflow-x:hidden;padding:0 14px 14px;min-height:0;scrollbar-width:none;overscroll-behavior:contain}#mcontent::-webkit-scrollbar{display:none}
#mbox h2{position:sticky;top:0;z-index:2;height:var(--hdr);display:flex;align-items:center;margin:0 -14px 12px;padding:0 calc(var(--xbtn) + 20px) 0 16px;line-height:1;font-size:23px;color:#fff;
 background:linear-gradient(#2fb47a,#17805a);border-bottom:2px solid var(--ink)}
#mclose{position:absolute;top:calc((var(--hdr) - var(--xbtn)) / 2);right:calc((var(--hdr) - var(--xbtn)) / 2 + 2px);width:var(--xbtn);height:var(--xbtn);z-index:5;padding:0;font-size:0;border:2px solid var(--ink);border-radius:12px;
 background:linear-gradient(#ff8a6a,#e83a22);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--ink)}
#mclose::before,#mclose::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:5px;margin:-2.5px 0 0 -11px;background:#fff;border-radius:3px;box-shadow:0 0 0 1.2px rgba(31,18,8,.85)}
#mclose::before{transform:rotate(45deg)}#mclose::after{transform:rotate(-45deg)}
#toast{position:fixed;left:50%;top:calc(58px + var(--sat));transform:translateX(-50%) scale(.9);background:rgba(20,12,4,.92);border:2px solid var(--ink);padding:9px 18px;border-radius:14px;font-size:17px;
 z-index:60;opacity:0;transition:all .25s;pointer-events:none;text-align:center;text-shadow:var(--outline);max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) scale(1)}
body.modal-open #toast{top:calc(6px + var(--sat))}
.btn.big{display:flex;margin:12px auto 0;font-size:21px;padding:11px 38px}

/* chest open + result */
.open{text-align:center}.open .chestImg{width:150px;height:150px;animation:shake .5s 2}@keyframes shake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}.rewards .item{width:118px;animation:pop .4s backwards}
.goldline{display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px;color:var(--brown);flex-wrap:wrap}.goldline img{width:32px;height:32px}.goldline span{display:inline-flex;align-items:center;gap:4px}
.result{text-align:center;color:var(--brown)}.result .place{font-size:54px;line-height:1;color:var(--brown)}.result .rtitle{font-size:30px;color:var(--brown)}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.rgrid div{background:#fff8e6;border:1.5px solid #c9a36d;border-radius:10px;padding:6px}.rgrid small{display:block;font-size:12px;color:#7a5a32}.rgrid b{font-size:20px;color:var(--brown);text-shadow:none}
.big2{font-size:24px}

/* rule 2: anything sitting on a dark or coloured surface is explicitly white (never inherits the brown panel colour) */
.camBtn span,.lvtag,.rar,.day .dl,.day .da,.xpbar span,#tabs span,.cur b,.lvbadge b,.rstep .tt,.qbar span,.pill b,.hbar span,.slot b,.act b,#mapCard .mn,#heroTag b,#passMini .pt{color:#fff}
.qbar span,.xpbar span,.hbar span{text-shadow:var(--outline)}
/* rule 1: text on cream panels is solid brown without outline */
.panel .o,.panel b.o,#mcontent .o,#mcontent p b,.rstep .rw,.quest .qt,.item .nm,.stat b,.result b.o{color:var(--brown)!important;text-shadow:none!important}

/* laptop / wide landscape: the bottom tab bar becomes a left side rail (standard) */
@media (min-width:900px) and (min-aspect-ratio:4/3){
 #tabs{left:0;right:auto;top:0;bottom:0;width:calc(96px + var(--sal));height:auto;padding:calc(64px + var(--sat)) 8px 14px calc(8px + var(--sal));display:flex;flex-direction:column;justify-content:center;gap:8px;
  background:linear-gradient(90deg,rgba(12,64,40,.96),rgba(20,96,62,.9));border-top:0;border-right:2px solid rgba(0,0,0,.45);box-shadow:2px 0 0 rgba(255,255,255,.08)}
 #tabs button{width:100%;height:min(74px,calc((100vh - 110px) / 6 - 8px));flex:0 0 auto}#tabs button img{width:38px;height:38px}#tabs button span{font-size:13px}
 #topbar{padding-left:calc(106px + var(--sal))}
 #screens{left:calc(96px + var(--sal));bottom:0}
 body:not(.inmatch) #toast{left:calc(50% + 48px)}
 #modeCard,#passMini{width:320px}
 #playBtn{width:250px;height:84px}
 #mapWrap{width:150px;height:150px}
}
/* short phone screens (landscape 360px): tighter HUD */
@media (max-height:420px){
 #mapCard img{width:50px;height:50px;flex-basis:50px}#mapCard .md{display:none}
 #heroTag{bottom:78px}#heroTag span{display:none}
 #playBtn{height:62px}.bigbtn span{font-size:28px}
 .item .picbox{height:78px}.item .picbox img{width:72px;height:72px}
 :root{--hdr:48px;--xbtn:36px}#mbox h2{font-size:20px}
}
/* camera hole in the top strip (Android app): keep the bar flush to the top, leave the hole free */
.hole-top #pinfo{flex:0 1 var(--pinfoMax);max-width:var(--pinfoMax)}

/* mouse + keyboard (laptop): no on-screen move stick (WASD), the action buttons stay clickable */
@media (hover:hover) and (pointer:fine){ #joyBase{display:none} }
/* big screens (1080p): the HUD and menus grow with the screen instead of staying phone-sized */
@media (min-height:800px) and (min-width:1200px) and (pointer:fine){ #app,#mhud,#modal,#toast{zoom:1.35} }

.stbl{width:100%;border-collapse:separate;border-spacing:0;margin:6px 0;background:#fff8e6;border:2px solid #c9a36d;border-radius:10px;overflow:hidden;color:var(--brown);font-size:14px}
.stbl th{background:#f0d9a8;color:var(--brown);font-weight:400;padding:5px 8px;text-align:left}.stbl td{padding:4px 8px;border-top:1px solid #ead2a0}.stbl td:not(:first-child),.stbl th:not(:first-child){text-align:right}
.stbl td span{color:#3a8a10}.sdmg{font-size:13px;color:var(--brown)}.sdmg span{color:#3a8a10}
.liveStats{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:center;margin:0 0 6px;font-size:13px;color:var(--brown)}.liveStats span{background:#fff8e6;border:2px solid #c9a36d;border-radius:8px;padding:2px 8px}.liveStats b,.liveStats span{color:var(--brown);text-shadow:none}
#slogan{position:fixed;transform:translate(0,-100%) scale(.6);transform-origin:0 100%;opacity:0;pointer-events:none!important;max-width:min(260px,60vw);padding:8px 14px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown);text-shadow:none;font-size:16px;text-align:center;line-height:1.15;transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:3}
#slogan::after{content:'';position:absolute;left:14px;bottom:-9px;border:8px solid transparent;border-bottom:0;border-top-color:#c9a36d}
#slogan.show{opacity:1;transform:translate(0,-100%) scale(1)}
#mcontent .slogan{color:var(--brown);font-style:italic;margin:4px 0}

/* title / loading screen (standard rule 45): the game's own world, rendered from our models and blurred, under a tint, vignette and slow light rays */
#loading,#matchLoad{background:#120a06;overflow:hidden}
#loading::before,#matchLoad::before{content:'';position:absolute;inset:-40px;background:url(../assets/img/ui/title_bg.jpg) center/cover;filter:blur(9px) saturate(1.25)}
#loading::after,#matchLoad::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%),rgba(10,50,30,.3);pointer-events:none}
#loading .rays{position:absolute;left:50%;top:40%;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;background:repeating-conic-gradient(rgba(255,240,200,.10) 0 6deg,rgba(255,240,200,0) 6deg 18deg);mix-blend-mode:screen;z-index:1;animation:titleRays 60s linear infinite}
#loading>*:not(.rays),#matchLoad>*{position:relative;z-index:2}
@keyframes titleRays{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#loading .rays{animation:none}}
/* title logo (standard rule 45): a rendered wordmark image in the game's own display style; the UI keeps Lilita One */
.logoImg{display:block;width:min(64vw,560px);height:auto;max-height:min(42vh,320px);object-fit:contain;margin:0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.logo.small .logoImg{width:min(40vw,300px);max-height:22vh}

/* top bar + hero tag fixes (owner screenshot): the resource pills and the menu button sit at the RIGHT edge on every width,
   the gold storage gauge fills the pill itself instead of hanging under it, and the hero name never touches the PLAY button */
#rankpill{margin-left:auto}
.cur{overflow:visible}.cur img{left:-6px;z-index:2}.cur b,.cur .plus{position:relative;z-index:1}
.store{left:30px;right:10px;top:auto;bottom:3px;height:4px;border-radius:2px;background:rgba(0,0,0,.55);border:0;z-index:0}
#storefill{border-radius:2px;background:linear-gradient(#fff3a0,#ffc928 60%,#e08a00)}
.cur[data-r="gold"] b{margin-top:-3px}
#heroTag{bottom:96px}
@media (min-width:900px) and (min-aspect-ratio:4/3){#heroTag{bottom:108px}}
@media (max-height:420px){#heroTag{bottom:82px}}
/* v1.2 content pack: store tabs, role filter, drop rates, name-card banner */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}.chip{height:32px;padding:0 12px;border-radius:16px;border:2px solid #6a4a2a;background:#f6e6c2;color:#5a3418;font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-shadow:none}
.chip.on{background:#f0a018 linear-gradient(#ffd23a,#f0a018);color:#fff;text-shadow:var(--outline)}
.ratesCard{background:#fff8e6;border:2px solid #c9a36d;border-radius:12px;padding:10px;color:var(--brown)}.ratesCard b,.ratesCard td,.ratesCard p{color:var(--brown);text-shadow:none}.ratesCard table{width:100%}.ratesCard td:last-child{text-align:right}
.btn.rt{height:28px;font-size:12px;padding:0 10px;margin-top:4px}
#scr-locker .item,#scr-shop .item,#mcontent .item{content-visibility:auto;contain-intrinsic-size:auto 200px}
#pinfo.bannered{border-radius:10px;padding:2px 8px;border:2px solid rgba(0,0,0,.45)}

/* ================= KAMPUNG FIQH ================= */
:root{--tk:1}
body{font-size:calc(16px * var(--tk))}
.card.wide{width:min(560px,94vw);max-height:92vh;overflow:auto}
.row2{display:flex;gap:8px;justify-content:center;margin:6px 0}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin:6px 0 10px}.tgrid .btn{margin:0;font-size:15px;padding:8px 6px 9px}
textarea{width:100%;padding:10px;font-size:17px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);user-select:text;resize:vertical}
.pill.tahap{cursor:pointer;border:1px solid rgba(0,0,0,.55);background:linear-gradient(#3fc48a,#1f9d6b);padding:0 12px;margin-left:auto}.pill.tahap b{font-size:14px;color:#fff}
.cur[data-r="kunci"] b,.cur[data-r="mutiara"] b{min-width:22px}
/* hub */
#scr-home{pointer-events:none;overflow:hidden}#scr-home>*{pointer-events:auto}
#misiCard{position:absolute;left:calc(10px + var(--sal));top:6px;width:min(330px,42vw);display:flex;gap:8px;align-items:center;padding:6px 10px 8px;border-radius:14px;background:rgba(14,60,36,.82);border:1px solid rgba(0,0,0,.5);cursor:pointer}
#misiCard img{width:58px;height:58px;flex:0 0 58px}#misiCard>div{min-width:0;flex:1}#misiCard .mn{font-size:16px;line-height:1.1;color:#fff;text-shadow:var(--outline)}#misiCard .md{font-size:12px;color:#d8f5e0;line-height:1.2;margin-top:2px}
#misiCard .pb{position:relative;height:8px;margin-top:5px;border-radius:4px;background:rgba(0,0,0,.55);overflow:hidden}#misiCard .pb div{height:100%;width:max(var(--rfmin),10%);border-radius:4px;background:linear-gradient(#ffe36a,#f0a000)}
#bosCard{position:absolute;left:calc(10px + var(--sal));top:94px;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:14px;border:2px solid var(--ink);background:linear-gradient(#ff8a6a,#e0392f);box-shadow:0 3px 0 var(--ink);animation:glow 1.4s infinite}
#bosCard img{width:40px;height:40px}#bosCard span{display:flex;flex-direction:column;align-items:flex-start;text-shadow:var(--outline)}#bosCard b{font-size:15px;color:#fff}#bosCard small{font-size:12px;color:#fff}
@keyframes glow{50%{box-shadow:0 3px 0 var(--ink),0 0 18px #ffe36a}}
#playBtn{position:absolute;right:calc(14px + var(--sar));bottom:10px;width:min(240px,34vw);height:74px;background:linear-gradient(#8af06a,#3fae2a 55%,#2a8a1a)}
#playBtn small{max-width:96%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tabs{grid-template-columns:repeat(6,1fr)}
/* stars / tp */
.stars{display:inline-flex;gap:2px;vertical-align:middle}.stars i{width:16px;height:16px;display:inline-block;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#c9b89a}.stars i.on{background:linear-gradient(#fff39a,#ffc928 60%,#e08a00)}
.bigstars .stars i{width:58px;height:58px;margin:0 4px}.bigstars{margin:4px 0 8px}
.tp{display:inline-block;padding:0 7px;border-radius:8px;background:#2f7fe0;color:#fff;font-size:12px;border:1.5px solid var(--ink);text-shadow:var(--outline)}
.item.done2{border-color:#5fb31a}
/* hukum chips: coloured pill, white text + 1px outline (rule: coloured pills) */
.hk{display:inline-flex;align-items:center;padding:1px 9px;border-radius:9px;background:var(--hk);color:#fff!important;font-size:13px;border:1.5px solid rgba(0,0,0,.45);text-shadow:var(--outline)!important;white-space:nowrap;vertical-align:middle}
.bk{display:inline-block;color:var(--brown);font-size:15px;line-height:1.15}
/* chapter dialog: mission rows */
.mlist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.mrow{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;border-radius:14px;border:2px solid #c9a36d;background:#fff8e6;text-align:left;color:var(--brown);box-shadow:0 2px 0 #b58a52}
.mrow img{width:44px;height:44px;flex:0 0 44px}.mrow .t{flex:1;min-width:0;display:flex;flex-direction:column}.mrow .t b{color:var(--brown);text-shadow:none;font-size:14px}.mrow .t span{color:#7a5a32;font-size:13px;line-height:1.15}
.mrow .go{padding:3px 12px;border-radius:10px;background:linear-gradient(#b4f05a,#4a9a10);color:#fff;border:1.5px solid var(--ink);text-shadow:var(--outline)}.mrow.lock{opacity:.55}.mrow .lk{width:18px;height:22px;border-radius:4px;background:#9a8a72}
details.spd{margin-top:8px;color:var(--brown)}details.spd summary{cursor:pointer;color:var(--brown);font-size:15px;padding:4px 0}
.big3{font-size:20px}
/* explore bar */
#exploreBar{position:fixed;left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(8px + var(--sab));z-index:12;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;justify-content:space-between;pointer-events:none}
#exploreBar>*{pointer-events:auto}#exploreBar .eb{max-width:min(420px,60vw);padding:8px 12px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown)}#exploreBar .eb b{display:block;color:var(--brown);text-shadow:none;font-size:18px}#exploreBar .eb span{font-size:13px;color:#7a5a32}
#exploreBar .ebb{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:60vw}
/* ---------- simulation HUD ---------- */
#sim{position:fixed;inset:0;z-index:20;pointer-events:none}#sim>*{pointer-events:auto}
#simTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(6px + var(--sat)) calc(8px + var(--sar)) 6px calc(8px + var(--sal));background:linear-gradient(rgba(14,60,36,.86),rgba(14,60,36,0));pointer-events:none}
#simTop>*{pointer-events:auto}#simTop .st{flex:1;min-width:0;max-width:520px}#simT{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.pbar{height:10px;border-radius:5px;background:rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.6);overflow:hidden;margin-top:3px}#simProg{height:100%;width:max(var(--rfmin),0%);border-radius:5px;background:linear-gradient(#b4f05a,#5fb31a);transition:width .3s}
.smallbtn.x{background:linear-gradient(#ff8a6a,#e83a22);position:relative}.smallbtn.x::before,.smallbtn.x::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:4.5px;margin:-2.25px 0 0 -10px;background:#fff;border-radius:3px;box-shadow:0 0 0 1.2px rgba(31,18,8,.85)}.smallbtn.x::before{transform:rotate(45deg)}.smallbtn.x::after{transform:rotate(-45deg)}
.hintbtn{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 10px 0 4px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(#ffe36a,#f5a300 60%,#dd8800);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--ink);margin-left:auto}
.hintbtn img{width:32px;height:32px}.hintbtn b{font-size:15px;color:#fff;text-shadow:var(--outline);min-width:8px}
#simBody{position:absolute;right:calc(8px + var(--sar));top:calc(56px + var(--sat));bottom:calc(8px + var(--sab));width:min(430px,46vw);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-end}
#simBody::-webkit-scrollbar{display:none}
#sim.lebar #simBody{width:min(640px,62vw);justify-content:flex-start}
#simBubble{position:absolute;left:calc(10px + var(--sal));top:calc(58px + var(--sat));max-width:min(420px,calc(100vw - 48vw - 30px));max-height:calc(100vh - 80px);overflow:auto;padding:9px 12px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown);font-size:15px;line-height:1.3;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none!important;scrollbar-width:none}
#simBubble.show{opacity:1;transform:none}#simBubble b{color:var(--brown);text-shadow:none}#simBubble.no{border-color:#e0392f}#simBubble.ok{border-color:#5fb31a}
#sim.lebar #simBubble{max-width:min(320px,34vw)}
#kira{position:absolute;left:50%;top:calc(58px + var(--sat));transform:translateX(-50%);padding:6px 18px;border-radius:14px;background:rgba(14,60,36,.88);border:2px solid var(--ink);font-size:22px;color:#fff;text-shadow:var(--outline)}
.sheet{background:linear-gradient(var(--paper),var(--paper2));border:2px solid var(--ink);border-radius:16px;padding:10px 12px 12px;color:var(--brown);box-shadow:inset 0 0 0 2px #fff7e2,0 4px 0 rgba(0,0,0,.3)}
.sheet h3{margin:0 0 6px;font-size:19px;color:var(--brown)}.sheet h3 small{font-size:13px;color:#7a5a32}.sheet p{margin:4px 0 8px}.sheet .lead{font-size:16px}
.sheet .sps div{font-size:13px;margin:2px 0;color:#7a5a32}.sheet .sps b{color:var(--brown);text-shadow:none}
.nav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}.nav span{color:#7a5a32}
.qhead{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:#7a5a32;margin-bottom:6px}.qhead b{color:var(--brown);text-shadow:none}
.qs{font-size:17px;line-height:1.3}
.opts{display:flex;flex-direction:column;gap:6px}.opts.two{flex-direction:row}.opts.two .opt{flex:1}
.opt,.kbtn,.scard,.bkt{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:8px 12px;border-radius:13px;border:2px solid #b58a52;background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);font-size:15px;line-height:1.2;text-align:center;box-shadow:0 3px 0 #8a6534}
.opt:active,.kbtn:active,.scard:active,.bkt:active{transform:translateY(2px);box-shadow:0 1px 0 #8a6534}
.opt.good,.kbtn.good,.bkt.good{border-color:#3a9a10;background:linear-gradient(#efffd8,#c8f0a0)}.opt.bad,.kbtn.bad,.bkt.bad{border-color:#d9342a;background:linear-gradient(#ffe8e4,#ffc8c0)}
.opt.off{opacity:.35}.opt.tog.on,.kbtn.sel{border-color:#2f7fe0;background:linear-gradient(#e8f4ff,#bfe0ff)}.kbtn.flash{border-color:#3a9a10}
.shake{animation:shake .35s}.pulse{animation:pulse .9s infinite}@keyframes pulse{50%{box-shadow:0 3px 0 #8a6534,0 0 0 4px #ffc928}}
.fb{margin-top:8px}.fb .ok,.fb .no{padding:8px 10px;border-radius:12px;margin-bottom:6px;font-size:15px;line-height:1.3}.fb .ok{background:#efffd8;border:2px solid #5fb31a}.fb .no{background:#fff0ec;border:2px solid #e0392f}.fb b{color:var(--brown);text-shadow:none}.fb .btn{display:flex;margin:6px auto 0}
.padan{display:grid;grid-template-columns:1fr 1fr;gap:8px}.padan>div{display:flex;flex-direction:column;gap:6px}
.susunOut{margin:4px 0 8px;padding-left:22px;color:var(--brown)}.susunOut li{margin:2px 0}
.kcard{min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border-radius:14px;background:#fff;border:2px dashed #c9a36d;font-size:17px;margin:4px 0 10px;color:var(--brown)}.kcard.big{font-size:19px;min-height:70px}
.bakul{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}.bkt{flex-direction:column;min-height:58px}.bkt small{font-size:11px;color:#7a5a32;line-height:1.15}
.kads{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.kad{position:relative;min-height:86px;padding:8px;border-radius:12px;border:2px solid #b58a52;background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);box-shadow:0 3px 0 #8a6534;font-size:14px}
.kad .j{display:none}.kad.flip{background:linear-gradient(#efffd8,#d8f5b0);border-color:#5fb31a}.kad.flip .d{display:none}.kad.flip .j{display:block}
.mnem{display:flex;gap:10px;align-items:center;margin:6px 0;padding:6px 10px;border-radius:12px;background:#fff8e6;border:2px solid #c9a36d}.mnem b{font-size:22px;color:#c8601a!important;text-shadow:none}.mnem span{color:var(--brown)}
.alir{counter-reset:a;list-style:none;padding:0;margin:0}.alir li{position:relative;padding:6px 8px 6px 40px;margin:4px 0;border-radius:10px;background:#fff8e6;border:1.5px solid #c9a36d}.alir li::before{counter-increment:a;content:counter(a);position:absolute;left:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:12px;background:#1f9d6b;color:#fff;text-align:center;line-height:24px;font-size:14px}
.buih{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}.buih b{width:100%;text-align:center;color:var(--brown);text-shadow:none;font-size:17px}.buih span{padding:6px 12px;border-radius:16px;background:#e8f8ee;border:1.5px solid #5fc88a}
.bb{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.bb>div{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:10px;background:#fff8e6;border:1.5px solid #c9a36d}.bb b{color:var(--brown);text-shadow:none}.bb span{font-size:13px}.bb .sama{background:#eef6ff;border-color:#7ab0e0}
.pokok>b{display:block;text-align:center;color:var(--brown);text-shadow:none;font-size:17px;margin-bottom:6px}.pokok>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}.pokok>div>div{padding:6px;border-radius:10px;background:#fff8e6;border:1.5px solid #c9a36d;display:flex;flex-direction:column;gap:3px}.pokok i{font-style:normal;color:#17805a}.pokok span{font-size:13px}
.tahu{padding:8px 10px;border-radius:12px;background:#eef6ff;border:2px solid #7ab0e0}
.tblw{overflow-x:auto}
/* Arabic: Amiri, right to left, generous line height, never outlined (decision K3) */
.arbox{margin:8px 0 2px;padding:8px 10px;border-radius:12px;background:#fffef8;border:2px solid #d8c08a}
.ar{font-family:Amiri,'Traditional Arabic',serif!important;font-size:calc(23px * var(--tk));line-height:1.95;color:#2a1a08!important;text-shadow:none!important;direction:rtl;text-align:right}
.ar.arq{font-family:AmiriQ,Amiri,serif!important}
.rumi{font-style:italic;color:#7a5a32;font-size:14px;margin-top:2px}.mak{font-size:14px;color:var(--brown);margin-top:3px}.semak{font-size:11px;color:#a8642c;margin-top:4px}
/* procedure */
.proc{display:flex;flex-direction:column;gap:6px;min-height:0}
.panel2{max-height:34vh;overflow:auto;scrollbar-width:none;border-radius:14px;background:rgba(255,248,230,.94);border:2px solid #c9a36d;padding:4px 6px}.panel2::-webkit-scrollbar{display:none}
.steps .st{display:flex;align-items:center;gap:6px;padding:3px 2px;font-size:13px;color:var(--brown);border-bottom:1px dashed #e0cfa8}.steps .st:last-child{border-bottom:0}.steps .st.skip{opacity:.55;text-decoration:line-through}
.steps:empty::before{content:'Pilih perbuatan pertama di bawah.';font-size:13px;color:#7a5a32}
.cards{display:flex;flex-direction:column;gap:6px}.scard{flex-direction:column;gap:3px;min-height:52px;font-size:15px}.scard b{color:var(--brown);text-shadow:none}.scard.fin{background:linear-gradient(#efffd8,#c8f0a0);border-color:#5fb31a}.scard small{font-size:12px;color:#7a5a32}
.doing{padding:10px;border-radius:13px;background:#fff8e6;border:2px solid #5fb31a;text-align:center;color:var(--brown)}.doing b{color:var(--brown);text-shadow:none}
.saf .orang{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.saf .orang .kbtn{min-height:40px;font-size:14px}.saf .rows{display:flex;flex-direction:column;gap:6px}
.det .btn.big{font-size:26px;padding:10px 40px}
.result .rumus{margin:8px 0;padding:8px 10px;border-radius:12px;background:#eef6ff;border:2px solid #7ab0e0;color:var(--brown);text-align:left}.result .rumus b{color:var(--brown)}
.slogan{color:var(--brown);font-style:italic}
#slogan{position:fixed;transform:translate(0,-100%) scale(.6);transform-origin:0 100%;opacity:0;pointer-events:none!important;max-width:min(260px,60vw);padding:8px 14px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown);text-shadow:none;font-size:16px;text-align:center;line-height:1.15;transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:9}
#slogan::after{content:'';position:absolute;left:14px;bottom:-9px;border:8px solid transparent;border-bottom:0;border-top-color:#c9a36d}#slogan.show{opacity:1;transform:translate(0,-100%) scale(1)}
body.modal-open #slogan,body.insim #slogan{display:none}
.kurang *{animation-duration:0s!important;transition-duration:0s!important}
/* white text on coloured surfaces (rule 21) */
#misiCard .mn,#bosCard b,#bosCard small,.mrow .go,.tp,.hk,#simT,#kira,.hintbtn b,.pill.tahap b{color:#fff}
.sheet b,.sheet td,.sheet th,.mrow b,.kad,.opt,.kbtn,.scard,.bkt{text-shadow:none}
/* laptop rail */
@media (min-width:900px) and (min-aspect-ratio:4/3){ #misiCard{width:340px} #playBtn{width:260px;height:84px} #exploreBar{left:calc(106px + var(--sal))} }
@media (max-height:420px){ #misiCard img{width:46px;height:46px;flex-basis:46px} #misiCard .md{display:none} #bosCard{top:72px} .qs{font-size:15px} .opt,.kbtn,.scard,.bkt{min-height:40px;padding:6px 10px;font-size:14px} .ar{font-size:calc(20px * var(--tk));line-height:1.8} #simBody{top:calc(50px + var(--sat))} .panel2{max-height:28vh} .sheet{padding:8px 10px} }

/* rule 1: bold text on cream surfaces is solid brown without outline */
#mcontent p b,#mcontent li b,#mcontent .rumus b,#mcontent .stat span,#mcontent summary,#simBubble b,.sheet b,.rumus b,#exploreBar .eb b{color:var(--brown)!important;text-shadow:none!important}

.rwc{display:inline-flex;align-items:center;gap:3px;color:var(--brown)!important;text-shadow:none!important;margin-right:8px}.rwc img{width:24px;height:24px}

#simBody{justify-content:flex-start}#simBody>*:first-child{margin-top:auto}#sim.lebar #simBody>*:first-child{margin-top:0}

/* ===== v1.1 AMALI: walking, stations, hotspots, hukum stamp, Kutip / Tangkap mini games ===== */
#jalanBtn{position:absolute;right:calc(14px + var(--sar));bottom:94px;width:min(240px,34vw);height:50px;background:linear-gradient(#8ae0ff,#2f8ad0 55%,#1a5a9a)}
#jalanBtn span{font-size:20px}#jalanBtn small{font-size:12px}
@media (max-height:420px){ #jalanBtn{bottom:80px;height:42px} #jalanBtn small{display:none} }
@media (min-width:900px) and (min-aspect-ratio:4/3){ #jalanBtn{width:260px;bottom:104px} }
#amTags{position:absolute;inset:0;pointer-events:none!important;overflow:hidden}
.amtag{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;padding:3px 10px;border-radius:12px;font-size:14px;line-height:1.2;color:#fff;text-shadow:var(--outline);background:rgba(14,60,36,.85);border:2px solid var(--ink)}
button.amtag{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.amtag small{display:block;font-size:11px;color:#fff;opacity:.9}
.amtag.sttag{display:inline-flex;align-items:center;gap:6px;font-size:15px;background:rgba(10,40,70,.88)}.amtag.sttag .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#ffc928;color:#fff;border:1.5px solid var(--ink);font-size:13px}
.amtag.sttag.ok{opacity:.6;background:rgba(30,110,60,.85)}
.amtag.hot{padding:6px 12px;font-size:15px;border-radius:16px;background:linear-gradient(#5ad8ff,#1a8ad0);min-width:60px;flex-direction:column}
.amtag.pick{padding:7px 12px;font-size:14px;border-radius:14px;background:linear-gradient(#5ad8ff,#1a8ad0);white-space:normal;width:150px}
.amtag.pick.bad{background:linear-gradient(#ff8a7a,#c0392f);opacity:.75}
.amtag.bin{white-space:normal;width:170px;text-align:center;background:var(--hk);font-size:14px}.amtag.bin b{color:#fff}
.amtag.item{font-size:13px;background:rgba(80,40,10,.88);white-space:normal;width:150px;text-align:center}.amtag.item.ok{display:none!important}
.amtag.tok{font-size:13px;white-space:normal;width:160px;text-align:center;background:rgba(90,50,0,.9);border-color:#ffd23a}
.amtag.npc{font-size:13px;text-align:center;background:rgba(70,30,110,.85)}
.amtag.pulse,.amtag.hot.pulse{animation:glow 1s infinite;border-color:#fff}
#amHud{position:absolute;left:50%;top:calc(52px + var(--sat));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none!important;max-width:min(560px,60vw)}
#amHud .dots{display:flex;gap:5px}#amHud .dots i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:14px;color:#fff;text-shadow:var(--outline);background:rgba(14,40,60,.8);border:2px solid var(--ink)}
#amHud .dots i.now{background:linear-gradient(#ffe36a,#f0a000);animation:glow 1.4s infinite}#amHud .dots i.ok{background:linear-gradient(#8af06a,#3fae2a)}
#amHud .goal,#amHud .ko{padding:4px 14px;border-radius:12px;background:rgba(14,60,36,.85);border:2px solid var(--ink);color:#fff;text-shadow:var(--outline);font-size:15px;text-align:center}
#amHud .kh{display:flex;align-items:center;gap:12px;padding:4px 14px;border-radius:14px;background:rgba(60,30,0,.88);border:2px solid var(--ink);color:#fff;font-size:20px;text-shadow:var(--outline)}
#amHud .kh b,#amHud .kh span{color:#fff}#amHud .cb{color:#ffe36a!important}
.hearts{display:inline-flex;gap:3px}.hearts i{width:18px;height:16px;border-radius:50% 50% 45% 45%;background:#5a3a3a;transform:rotate(0)}.hearts i.on{background:#ff4a5a;box-shadow:0 0 6px #ff8a9a}
#joy{position:absolute;left:calc(18px + var(--sal));bottom:calc(18px + var(--sab));width:132px;height:132px;border-radius:50%;background:radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.08));border:2px solid rgba(255,255,255,.55);touch-action:none}
#joy i{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:linear-gradient(#fffdf4,#d8c8a0);border:2px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35)}
#joy.hidden,#amGo.hidden{display:none}
#amGo{position:absolute;left:50%;bottom:calc(22px + var(--sab));transform:translateX(-50%);min-width:240px;height:60px;font-size:20px;animation:glow 1.2s infinite}
#stamp{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.4) rotate(-8deg);opacity:0;pointer-events:none!important;padding:8px 26px;border-radius:16px;border:2px solid #fff;background:var(--hk,#1f9d6b);color:#fff;font-size:40px;text-shadow:var(--outline);text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .25s}
#stamp small{display:block;font-size:16px;color:#fff}#stamp.small{font-size:28px;top:30%}
#stamp.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
#sim.proc #stamp{left:calc((100vw - min(430px,46vw)) / 2)}
.proc.am .amq{padding:6px 10px;border-radius:12px;background:rgba(14,60,36,.85);color:#fff;text-shadow:var(--outline);font-size:14px;text-align:center}
.cards.pic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.cards.pic .doing,.cards.pic .sheet{grid-column:1/-1}
.scard.pc{flex-direction:column;justify-content:flex-start;padding:5px 6px 7px;min-height:0}.scard.pc img{width:74px;height:74px;object-fit:contain}.scard.pc b{font-size:13px;line-height:1.15}
.scard.fin{grid-column:1/-1}
.steps .st em{margin-left:auto;font-size:11px;color:#a05a20;font-style:normal}
.sheet.am .cnt{display:flex;gap:8px;justify-content:center;margin:6px 0}.sheet.am .cnt i{width:26px;height:26px;border-radius:50%;background:#e8dcc0;border:2px solid #b58a52}.sheet.am .cnt i.on{background:radial-gradient(#bff0ff,#2fa8e8);border-color:#1a6aa0}
.sheet.am.hold #hold{position:relative;overflow:hidden;width:100%;height:64px;touch-action:none;user-select:none}.sheet.am.hold #hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.35)}
.sheet.am.verdict.ok{border-color:#5fb31a}.sheet.am.verdict.no{border-color:#e0392f}.sheet.am.verdict h3{margin:0 0 6px}
.msec{margin-bottom:8px;padding:6px 8px 2px;border-radius:14px;border:2px solid #c9a36d;background:#fbefd2}.msec.amali{background:#e2f6ea;border-color:#5fb31a}
.msec .mh{display:flex;align-items:center;gap:8px;margin:0 0 6px}.msec .mh i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-style:normal;background:linear-gradient(#ffe36a,#f0a000);border:1.5px solid var(--ink);color:#fff;text-shadow:var(--outline)}
.msec .mh b{color:var(--brown);text-shadow:none;font-size:17px}.msec .mh small{color:#3a7a4a;font-size:13px}
.mrow.hero{border-color:#3fae2a;background:linear-gradient(#f2fff0,#d8f5c8);box-shadow:0 3px 0 #2a8a1a}.mrow.hero img{width:56px;height:56px;flex-basis:56px}.mrow .t em{font-style:normal;font-size:12px;color:#2a7a3a}
#tkWrap{position:absolute;inset:0;pointer-events:none!important}
#tkWrap .tkTop{position:absolute;left:50%;top:calc(52px + var(--sat));transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:4px 16px;border-radius:14px;background:rgba(14,60,36,.88);border:2px solid var(--ink);color:#fff;font-size:20px;text-shadow:var(--outline)}
#tkWrap .tkTop b,#tkWrap .tkTop span{color:#fff}#tkC{color:#ffe36a!important}
#tkCard{position:absolute;left:50%;top:calc(96px + var(--sat));transform:translate(-50%,0);width:min(360px,70vw);text-align:center;font-size:18px}
#tkCard.caught{transition:opacity .4s;opacity:0}#tkCard.miss{background:#ffd8d0;border-color:#e0392f}
#tkWrap .tkB{position:absolute;left:calc(10px + var(--sal));right:calc(10px + var(--sar));bottom:calc(10px + var(--sab));display:flex;gap:8px;pointer-events:auto}
.tkb{flex:1;min-height:64px;border-radius:16px;border:3px solid var(--ink);background:var(--hk);color:#fff;font-size:16px;line-height:1.15;text-shadow:var(--outline);box-shadow:0 4px 0 rgba(0,0,0,.35);display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:4px 8px}
.tkb b{color:#fff}.tkb.flash{filter:brightness(1.35)}.tkb.pulse{animation:glow .8s infinite}
#sim.tk #simBody{display:none}
@media (max-height:420px){ .amtag{font-size:11px;padding:2px 7px}.amtag.pick,.amtag.item,.amtag.tok{width:118px;font-size:11px}.amtag.bin{width:130px;font-size:12px}.amtag.hot{font-size:13px;padding:4px 9px}
  #amHud{top:calc(44px + var(--sat))}#amHud .dots i{width:20px;height:20px;font-size:11px}#amHud .goal,#amHud .ko{font-size:12px;padding:2px 10px}#amHud .kh{font-size:15px}
  #sim:not(.proc):not(.tk) #amHud{left:auto;right:calc(8px + var(--sar));transform:none;align-items:flex-end;max-width:46vw}#sim.proc #amHud,#sim.lebar #amHud{display:none}
  #simBubble{max-width:min(340px,48vw)}#joy{width:108px;height:108px}#joy i{width:48px;height:48px;margin:-24px 0 0 -24px}#amGo{height:48px;font-size:16px;min-width:200px}
  #stamp{font-size:28px;padding:5px 18px}#stamp small{font-size:12px}.scard.pc img{width:56px;height:56px}.tkb{min-height:50px;font-size:13px}#tkCard{font-size:15px} }

/* ===== v1.2 LIHAT DEKAT: close-up viewer of the real forms (rule 53) ===== */
#dekat{position:fixed;inset:0;z-index:45;touch-action:none;user-select:none}
#dekat .dkTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(12px + var(--sal));background:linear-gradient(rgba(14,60,36,.9),rgba(14,60,36,0))}
#dekat .dkTop b{font-size:20px;color:#fff;text-shadow:var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#dekat .dkTop span{color:#fff;text-shadow:var(--outline);font-size:14px;margin-right:auto}
#dkTags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dktag{position:absolute;left:0;top:0;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;max-width:220px;padding:4px 10px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#5ad8ff,#1a8ad0);color:#fff;font-size:14px;line-height:1.15;text-shadow:var(--outline);box-shadow:0 2px 0 rgba(0,0,0,.35);white-space:normal;text-align:center}
.dkInfo{position:absolute;right:calc(10px + var(--sar));top:calc(58px + var(--sat));width:min(330px,40vw);max-height:calc(100% - 200px);overflow:auto;padding:10px 12px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown)}
.dkInfo b{color:var(--brown);text-shadow:none;font-size:16px}.dkInfo p{margin:4px 0 0;font-size:14px;line-height:1.3;color:var(--brown)}
.dkNav{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(#ffe36a,#f0a000);box-shadow:0 3px 0 var(--ink)}
.dkNav.l{left:calc(10px + var(--sal))}.dkNav.r{right:calc(10px + var(--sar) + min(330px,40vw) + 10px)}
.dkNav::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;border-top:4px solid #fff;border-right:4px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}.dkNav.l::after{transform:translate(-35%,-50%) rotate(-135deg)}
.dkChips{position:absolute;left:calc(8px + var(--sal));right:calc(8px + var(--sar));bottom:calc(8px + var(--sab));display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.dkChips button{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:96px;padding:4px;border-radius:12px;border:2px solid #b58a52;background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);font-size:12px;line-height:1.1}
.dkChips button span{color:var(--brown);text-shadow:none;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dkChips button img{width:54px;height:54px;object-fit:contain}.dkChips button.on{border-color:#3fae2a;background:linear-gradient(#f2fff0,#c8f0b0)}
.dkHint{position:absolute;left:50%;bottom:calc(98px + var(--sab));transform:translateX(-50%);padding:3px 12px;border-radius:10px;background:rgba(14,60,36,.75);color:#fff;font-size:12px;text-shadow:var(--outline);pointer-events:none;white-space:nowrap}
.dekatBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dkGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:8px 0}.dkGrid button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;border-radius:12px;border:2px solid #b58a52;background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);font-size:13px}
.dkGrid button span{color:var(--brown);text-shadow:none}.dkGrid img{width:70px;height:70px;object-fit:contain}
@media (max-height:420px){ #dekat .dkTop b{font-size:16px} .dkInfo{width:min(280px,38vw);top:calc(46px + var(--sat));max-height:calc(100% - 150px)} .dkInfo p{font-size:12px} .dkChips button{width:78px}.dkChips button img{width:38px;height:38px} .dkHint{display:none} .dktag{font-size:12px;padding:3px 8px} .dkNav.r{right:calc(10px + var(--sar) + min(280px,38vw) + 8px)} }
body.dekat-on #app,body.dekat-on #sim,body.dekat-on #modal,body.dekat-on #exploreBar,body.dekat-on #slogan{visibility:hidden!important}

/* ===== v1.4 LIHAT DEKAT multi-scale (rule 55): arrows in the bottom bar (never over the model), zoom buttons, zoom level, place labels ===== */
#dekat .dkBar{position:absolute;left:calc(8px + var(--sal));right:calc(8px + var(--sar));bottom:calc(8px + var(--sab));display:flex;align-items:center;gap:6px}
#dekat .dkBar .dkChips{position:static;flex:1;min-width:0}
#dekat .dkNav{position:static;flex:0 0 auto;top:auto;margin:0;width:42px;height:42px}
#dekat .dkNav.l,#dekat .dkNav.r{left:auto;right:auto}
#dekat .dkZoom{position:absolute;right:calc(10px + var(--sar));bottom:calc(110px + var(--sab));display:flex;flex-direction:column;gap:6px}
#dekat .dkZoom button{width:46px;height:46px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);font-size:28px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#dekat .dkZ{padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.6);color:#fff;font-size:13px;text-shadow:var(--outline);white-space:nowrap}
.dktag.far{background:linear-gradient(#ffd86a,#e0a020);font-size:13px}
#dekat .dkHint{bottom:calc(112px + var(--sab))}
@media (max-height:420px){ #dekat .dkZoom{bottom:calc(84px + var(--sab))} #dekat .dkZoom button{width:38px;height:38px;font-size:22px} #dekat .dkNav{width:34px;height:34px} #dekat .dkZ{font-size:11px} }

/* ===== v1.5 JAM DUNIA (rule 58): clock chip, Jadual panel; FIKIRAN NPC (rule 56); travel card between holy places ===== */
#jamChip{position:fixed;right:calc(8px + var(--sar));top:calc(60px + var(--sat));z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:4px 10px;min-width:150px;max-width:250px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);box-shadow:0 3px 0 rgba(0,0,0,.3);text-align:right}
#jamChip b{font-size:18px;line-height:1.05;color:var(--brown);text-shadow:none}#jamChip span{font-size:11px;line-height:1.15}#jamChip small{font-size:11px;line-height:1.15;color:#7a4a20;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jamChip.malam{background:linear-gradient(#2a3a6a,#18234a);color:#fff}#jamChip.malam b,#jamChip.malam span,#jamChip.malam small{color:#fff;text-shadow:var(--outline)}
body.insim #jamChip{top:calc(62px + var(--sat))}
@media (max-height:420px){#jamChip{min-width:120px;padding:2px 8px;top:calc(50px + var(--sat))}#jamChip b{font-size:15px}#jamChip small{display:none}body.insim #jamChip{top:calc(52px + var(--sat))}}
.jamTop{display:flex;align-items:center;gap:14px;color:var(--brown)}.jamTop>b{font-size:34px;color:var(--brown);text-shadow:none}.jamNow{color:var(--brown);background:#fff7e0;border:2px solid #e8cf98;border-radius:12px;padding:8px 10px}
.jamT{width:100%;border-collapse:collapse;color:var(--brown);font-size:14px}.jamT td{padding:5px 8px;border-bottom:1px solid #e8d4a8;vertical-align:top}.jamT tr.on td{background:#d8f5c8}.jamT.haji td:first-child{white-space:nowrap;width:1%}
#mcontent h3{color:var(--brown);font-size:17px;margin:14px 0 6px;text-shadow:none}.row.wrap{flex-wrap:wrap;gap:6px}
#fikir{position:fixed;left:0;top:0;z-index:45;max-width:min(300px,80vw);padding:8px 11px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);box-shadow:0 4px 0 rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s;font-size:13px;line-height:1.25}
#fikir.show{opacity:1;pointer-events:auto}#fikir b{color:var(--brown);text-shadow:none;font-size:15px}#fikir i{font-style:normal;font-size:11px;color:#fff;background:#2f7fe0;border-radius:7px;padding:0 6px;border:1px solid var(--ink)}
#fikir .fk{margin-top:3px;color:#1f6a3a}#fikir p{margin:4px 0}#fikir small{display:block;color:#7a4a20}#fikir .fj{margin-top:2px;opacity:.85}
#jalanKad{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(10,20,30,.55)}
#jalanKad .jk{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(440px,90vw);padding:16px 18px;border-radius:16px;border:3px solid var(--ink);background:linear-gradient(#fffdf4,#f6e6c2);color:var(--brown);text-align:center}
#jalanKad .jk b{font-size:22px;color:var(--brown);text-shadow:none}#jalanKad .jk small{font-size:13px}#jalanKad .jkT{font-size:17px;color:#1f6a3a}#jalanKad p{margin:0;font-size:14px}
.jamT b,.jamNow b,#jalanKad b{text-shadow:none;color:var(--brown)}

/* ===== v1.6 DUNIA MISI (rule 59): minimap, PETA button, full map ===== */
#miniPeta{position:absolute;right:calc(10px + var(--sar));top:calc(124px + var(--sat));width:118px;height:118px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35);background:#5a7a4a;z-index:22;cursor:pointer}
#amPeta{position:absolute;right:calc(26px + var(--sar));top:calc(232px + var(--sat));z-index:23;height:32px;padding:0 12px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
@media (max-height:420px){#miniPeta{top:calc(96px + var(--sat));width:92px;height:92px}#amPeta{top:calc(182px + var(--sat));right:calc(14px + var(--sar));height:28px;font-size:13px}}
#petaBesar{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(10,20,14,.82);padding:calc(8px + var(--sat)) calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal))}
#petaBesar .pbTop{position:relative;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}#petaBesar .pbTop b{font-size:20px;color:#fff;text-shadow:var(--outline)}#petaBesar .pbTop .x{position:absolute;right:0;top:2px}
#petaBesar .pbBody{flex:1;min-height:0;display:flex;gap:8px}#petaBesar canvas{flex:1;min-width:0;width:100%;height:100%;border-radius:12px;border:2px solid var(--ink);cursor:crosshair}
#petaBesar .pbList{flex:0 0 min(300px,36vw);overflow:auto;display:flex;flex-direction:column;gap:4px;background:linear-gradient(#fffdf4,#f6e6c2);border:2px solid var(--ink);border-radius:12px;padding:6px}
#petaBesar .pbI{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:8px;color:var(--brown);font-size:13px;cursor:pointer}#petaBesar .pbI.now{background:#d8f5c8}#petaBesar .pbI.ok{opacity:.55}
#petaBesar .pbI i{flex:0 0 24px;height:24px;border-radius:50%;background:var(--c);border:2px solid var(--ink);color:#fff;font-style:normal;display:inline-flex;align-items:center;justify-content:center;font-size:12px;text-shadow:var(--outline)}
#petaBesar .pbBot{flex:0 0 auto;display:flex;align-items:center;gap:10px;justify-content:center;padding-top:6px}#petaBesar .pbBot small{color:#fff;font-size:12px;text-shadow:var(--outline)}
@media (max-width:760px),(max-height:420px){#petaBesar .pbList{flex-basis:34vw;font-size:12px}}

/* G108 jambatan SistemGuru.My (js/jambatan.js): butang Ranking Laman Kampung, joystick kamera hub di atas bar tab, tanda topik akaun, baris ranking keputusan */
#rankBtn{position:absolute;right:calc(14px + var(--sar));bottom:152px;width:min(240px,34vw);height:44px;flex-direction:row;gap:8px}
#rankBtn img{width:30px;height:30px}#rankBtn span{font-size:20px}
@media (max-height:420px){ #rankBtn{bottom:130px;height:38px} #rankBtn img{width:26px;height:26px} #rankBtn span{font-size:18px} }
@media (min-width:900px) and (min-aspect-ratio:4/3){ #rankBtn{width:260px;bottom:162px} }
body .sgj-joy{bottom:calc(72px + var(--sab,0px))}
@media (min-width:900px) and (min-aspect-ratio:4/3){ body .sgj-joy{left:calc(110px + var(--sal,0px));bottom:calc(18px + var(--sab,0px))} }
.kfjNota{font-size:14px}
.kfjTag{display:inline-block;margin-left:2px;padding:1px 6px;border-radius:8px;background:#5a3418;color:#fff;font-size:11px;white-space:nowrap}
.kfjKunci{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:6px 0 10px;padding:8px 10px;border-radius:12px;background:#fff4d8;border:2px solid #e8b04a;color:var(--brown);font-size:14px;text-align:center}
.kfjRk{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;color:var(--brown)}
.kfjRk img{width:30px;height:30px}.kfjRk .btn{min-height:36px}
#kfjMasuk{display:block;margin:8px auto 0;font-size:14px}
/* 26 Okt: telefon potret sempit - butang stesen (#amGo) di KANAN kayu bedik, bukan di tengah (dahulu menutup separuh #joy: sentuhan pada kayu bedik terkena butang, avatar tidak bergerak) */
@media (max-width:600px){ #amGo{left:calc(160px + var(--sal));right:calc(10px + var(--sar));transform:none;min-width:0;font-size:17px;padding-left:8px;padding-right:8px} }
/* 26 Okt: #simBody kosong (semasa berjalan) tidak menangkap sentuhan - dahulu ia menutup separuh kanan skrin, jadi seret kamera & ketik tanah di situ tidak berfungsi */
#simBody:empty{pointer-events:none}