/* Hikayat Arena UI: follows GAME-STANDARD.md Bahagian C (one font, text colour by surface, thin borders, centred buttons). Landscape first. */
@font-face{font-family:Lilita;src:url(../assets/fonts/lilita.woff2) format('woff2');font-display:block}
: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{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:#123a5a;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%,#6fe0ff 0%,#2a8ad0 38%,#173a7a 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(8,30,60,.86),rgba(8,30,60,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%,#8fd0ff,#2f6fd0);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(#2f8ad0,#1f5a9a);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(#1f5a9a,#123a6e);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(#3f8ae0,#2462b0);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%,#9ad8ff,#3f8ae0 60%,#1f5aa8);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%,#9ad8ff,#3f8ae0 60%,#1f5aa8);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(#2f8ad0,#1f5a9a);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(#2f8ad0,#1f5a9a);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}

/* ---------- match HUD ---------- */
#mhud{position:fixed;inset:0;z-index:10;pointer-events:none}#mhud>*{pointer-events:auto}
#zoneTint{position:absolute;inset:0;pointer-events:none!important;background:radial-gradient(ellipse at center,rgba(150,60,220,0) 40%,rgba(150,60,220,.55));opacity:0;transition:opacity .4s}
#hurtTint{position:absolute;inset:0;pointer-events:none!important;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 50%,rgba(255,30,20,.5));opacity:0;transition:opacity .25s}
#mTop{position:absolute;left:calc(8px + var(--sal));top:calc(6px + var(--sat));display:flex;gap:6px;pointer-events:none!important}
#zonePill.danger{background:rgba(150,30,170,.85)}
#feed{position:absolute;left:calc(134px + var(--sal));top:calc(6px + var(--sat));display:flex;flex-direction:column;gap:3px;pointer-events:none!important}
#feed div{font-size:13px;padding:2px 8px;border-radius:8px;background:rgba(10,8,20,.6);color:#fff;text-shadow:var(--outline);white-space:nowrap}#feed div.me{background:rgba(200,120,0,.8)}
#banner{position:absolute;left:50%;top:calc(44px + var(--sat));transform:translateX(-50%);padding:6px 16px;border-radius:12px;background:rgba(90,30,140,.85);border:1px solid rgba(0,0,0,.5);font-size:17px;text-shadow:var(--outline);opacity:0;transition:opacity .3s;pointer-events:none!important;white-space:nowrap;color:#fff}
#banner.show{opacity:1}
#itemPop{position:absolute;left:50%;bottom:calc(112px + var(--sab));transform:translateX(-50%);font-size:16px;padding:3px 12px;border-radius:10px;background:rgba(10,8,20,.7);text-shadow:var(--outline);opacity:0;transition:opacity .25s;pointer-events:none!important;color:#fff}
#itemPop.show{opacity:1}
#mapWrap{position:absolute;left:calc(8px + var(--sal));top:calc(6px + var(--sat));width:118px;height:118px;border-radius:14px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35);background:#1a5a8a}
#minimap{width:100%;height:100%;display:block}
#mExit{position:absolute;right:calc(134px + var(--sar));top:calc(6px + var(--sat))}
.camBtn{position:absolute;right:calc(180px + var(--sar));top:calc(6px + var(--sat));height:40px;display:inline-flex;align-items:center;gap:4px;padding:0 10px 0 4px;border-radius:11px;border:2px solid var(--ink);
 background:linear-gradient(#4a8ae0,#2462b0);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--ink);font-size:14px;text-shadow:var(--outline)}
.camBtn img{width:32px;height:32px}
#cross{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none!important;z-index:3}
#cross i{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(20,10,4,.8);border-radius:1px}
#cross i:nth-child(1){left:-13px;top:-1.5px;width:9px;height:3px}#cross i:nth-child(2){left:4px;top:-1.5px;width:9px;height:3px}#cross i:nth-child(3){left:-1.5px;top:-13px;width:3px;height:9px}#cross i:nth-child(4){left:-1.5px;top:4px;width:3px;height:9px}
#lookZone{position:absolute;right:0;top:22%;bottom:0;width:55%;display:none}
body.nearcam #lookZone{display:block}
#moveZone{position:absolute;left:0;top:30%;bottom:0;width:45%}
#joyBase{position:absolute;left:calc(70px + var(--sal));bottom:calc(60px + var(--sab));width:112px;height:112px;margin:-56px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4);pointer-events:none}
#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#cfe2f0);border:2px solid var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.4)}
#mBottom{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(6px + var(--sab));display:flex;flex-direction:column;align-items:center;gap:4px;width:min(330px,42vw)}
#bars{width:100%;display:flex;flex-direction:column;gap:3px}
.hbar{position:relative;height:9px;border-radius:5px;background:rgba(10,8,20,.75);border:1px solid rgba(0,0,0,.6);overflow:hidden}
.hbar.hp{height:16px;border-radius:8px}.hbar div{height:100%;width:max(var(--rfmin),50%);border-radius:8px}
#hpFill{background:linear-gradient(#9af06a,#3fb31a)}#armorFill{background:linear-gradient(#9ad8ff,#2f8be8)}#boostFill{background:linear-gradient(#ffe36a,#f0a000)}
.hbar span{position:absolute;inset:0;text-align:center;font-size:12px;line-height:14px;color:#fff;text-shadow:var(--outline)}
#slots{display:flex;gap:6px}
.slot{position:relative;width:86px;height:46px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(rgba(30,40,70,.9),rgba(14,20,40,.9));display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.slot img{width:42px;height:42px}.slot b{position:absolute;right:5px;bottom:1px;font-size:13px;color:#fff}.slot.on{background:linear-gradient(#3f8ae0,#2462b0);box-shadow:0 0 0 2px #fff}
.slot .tierbar{position:absolute;left:4px;right:4px;top:2px;height:3px;border-radius:2px}
.slot.empty{opacity:.6}.slot.mel{width:52px}
#actions{position:absolute;right:calc(8px + var(--sar));bottom:calc(6px + var(--sab));width:220px;height:200px;pointer-events:none!important}
.act{position:absolute;pointer-events:auto;border:2px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;background:radial-gradient(circle at 45% 35%,rgba(255,255,255,.35),rgba(30,40,70,.85));box-shadow:0 3px 0 rgba(0,0,0,.45)}
.act img{width:62%;height:62%}.act b{position:absolute;right:-2px;bottom:-4px;font-size:13px;padding:0 5px;border-radius:8px;background:#1a1028;border:1.5px solid var(--ink);color:#fff}
.act.fire{right:8px;bottom:10px;width:96px;height:96px;border-width:3px;background:radial-gradient(circle at 45% 35%,#ff9a7a,#e0392f 60%,#a8201a)}
.act.fire #aimKnob{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid var(--ink);display:none}
.act.fire.aiming #aimKnob{display:block}
.act.skill{right:112px;bottom:22px;width:62px;height:62px;background:radial-gradient(circle at 45% 35%,#e0a8ff,#8a3ad8 60%,#5a1fa0);overflow:hidden}
.act.skill span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(10,8,20,.6);border-radius:50%;color:#fff;text-shadow:var(--outline)}
.act.skill span:empty{display:none}
.act.small{width:46px;height:46px}
#healBtn{right:120px;bottom:96px}#throwBtn{right:66px;bottom:118px}#reloadBtn{right:10px;bottom:120px}
.act.pick{right:180px;bottom:150px;width:auto;height:38px;border-radius:12px;padding:0 14px;white-space:nowrap;background:linear-gradient(#b4f05a,#4a9a10);font-size:16px;text-shadow:var(--outline)}
.act.big{right:30px;bottom:30px;width:140px;height:70px;border-radius:18px;border-width:3px;background:linear-gradient(#ffe36a,#f5a300 55%,#dd7a00);font-size:28px;text-shadow:var(--outline)}
.act:active{transform:translateY(2px)}

/* 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(14,40,80,.96),rgba(22,60,110,.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} }

/* ================= MOBA HUD (Hikayat Arena) ================= */
#scoreBox{position:absolute;left:50%;top:calc(4px + var(--sat));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:2px 10px;border-radius:12px;background:rgba(10,14,30,.78);border:1px solid rgba(0,0,0,.6);cursor:pointer}
#scoreBox b{font-size:22px;min-width:26px;text-align:center}#scoreBox .sb{color:#8fd0ff}#scoreBox .sr{color:#ff9a8a}#scoreBox span{display:flex;flex-direction:column;align-items:center;line-height:1.05}#scoreBox small{font-size:12px;color:#fff;text-shadow:var(--outline)}
#mRight{position:absolute;right:calc(8px + var(--sar));top:calc(6px + var(--sat));display:flex;gap:6px;align-items:center}
#mRight .camBtn,#mRight .smallbtn{position:static}
.goldBtn{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 4px;border-radius:11px;border:2px solid var(--ink);background:linear-gradient(#ffd34d,#f5a300 55%,#dd8800);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--ink)}
.goldBtn img{width:30px;height:30px}.goldBtn b{font-size:17px;min-width:40px;text-align:right}
.qb{position:absolute;left:calc(8px + var(--sal));top:calc(130px + var(--sat));display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(rgba(40,50,80,.92),rgba(20,26,50,.92));box-shadow:0 3px 0 rgba(0,0,0,.4);max-width:170px}
.qb img{width:40px;height:40px;flex:0 0 40px}.qb>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.qb b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}.qb small{font-size:13px;color:#ffe36a;text-shadow:var(--outline);display:inline-flex;align-items:center;gap:3px}
.qb.can{background:linear-gradient(#7ed321,#3f8a10);animation:glow 1.2s infinite}@keyframes glow{50%{box-shadow:0 3px 0 rgba(0,0,0,.4),0 0 16px #ffe36a}}
.gi{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff3a0,#ffc928 60%,#c88a00);border:1px solid #7a4a00}
#spells{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(8px + var(--sab));display:flex;gap:10px;pointer-events:none!important}
#spells .act{position:relative;pointer-events:auto;width:48px;height:48px}
.act b:empty{display:none}
#actions{width:260px;height:230px}
.act.fire{right:14px;bottom:14px;width:104px;height:104px}
.act.fire img{width:58%;height:58%}
.lvRing{position:absolute;left:-10px;top:-10px;width:34px;height:34px;border-radius:50%;background:#1a1028;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal}
.lvRing b{position:static;font-size:15px;padding:0;background:none;border:0;line-height:1}.xpb{width:22px;height:4px;border-radius:2px;background:#000;overflow:hidden}.xpb span{display:block;height:100%;width:0;background:#7fe0ff}
.act.skill{width:64px;height:64px}.act.skill img{width:86%;height:86%}
.act.skill.s0{right:128px;bottom:12px}.act.skill.s1{right:118px;bottom:86px}.act.skill.s2{right:46px;bottom:132px;width:72px;height:72px;border-color:#7a4a00;background:radial-gradient(circle at 45% 35%,#ffe9a0,#c8962a 60%,#7a5410)}
.act.skill span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(10,8,20,.6);border-radius:50%;color:#fff;text-shadow:var(--outline)}.act.skill span:empty{display:none}
#deathBox{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;padding:10px 24px;border-radius:14px;background:rgba(40,10,10,.8);border:1px solid rgba(0,0,0,.6);pointer-events:none!important}
#deathBox>b{font-size:26px;color:#ff8a7a}#deathBox span{font-size:16px;color:#fff;text-shadow:var(--outline)}
#hurtTint{position:absolute;inset:0;pointer-events:none!important;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 55%,rgba(255,30,20,.45));opacity:0;transition:opacity .25s}
.skillRow{display:flex;align-items:center;gap:10px;background:#fff8e6;border:1.5px solid #c9a36d;border-radius:12px;padding:6px 10px;margin:5px 0;color:var(--brown)}.skillRow img{width:46px;height:46px;flex:0 0 46px}
.slotsRow{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}.islot{aspect-ratio:1;border-radius:10px;border:1.5px dashed #b58a52;background:#fff8e6;display:flex;align-items:center;justify-content:center}.islot img{width:86%;height:86%}
.board{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.board .stat{font-size:13px;padding:4px 8px}.meRow{border-color:#5fb31a!important;background:#efffd8!important}
.ptitle.red{background:linear-gradient(#e0603a,#a8241a)}
#feed div.b{background:rgba(30,90,180,.75)}#feed div.r{background:rgba(180,40,30,.75)}#feed div.me{box-shadow:0 0 0 1.5px #ffe36a}
#lookZone{right:0;left:auto;top:28%;width:52%}
#zoneTint{display:none}
.rgrid b{font-size:18px}
.qb b,.qb small,#scoreBox small,.goldBtn b,#deathBox span{color:#fff}
@media (max-height:420px){ .act.fire{width:92px;height:92px} .act.skill{width:56px;height:56px} .act.skill.s0{right:112px;bottom:8px} .act.skill.s1{right:104px;bottom:74px} .act.skill.s2{right:40px;bottom:114px;width:64px;height:64px} #mapWrap{width:108px;height:108px} .qb{top:calc(118px + var(--sat))} #feed{left:calc(122px + var(--sal))} }
@media (min-width:900px) and (min-aspect-ratio:4/3){ .qb{top:calc(162px + var(--sat))} #feed{left:calc(166px + var(--sal))} }

.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(30,0,50,.35);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)}

/* ---------- v1.3 rules 53-58: world clock chip + panel, NPC thought card, Lihat Dekat close-up viewer ---------- */
#jamChip{position:absolute;right:calc(10px + var(--sar));top:calc(60px + var(--sat));z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:4px 10px;min-width:150px;max-width:260px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(var(--paper),var(--paper2));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;color:var(--brown)}#jamChip small{font-size:11px;line-height:1.15;color:#7a4a20;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jamChip.malam{background:linear-gradient(#2a3a6a,#18234a)}#jamChip.malam b,#jamChip.malam span,#jamChip.malam small{color:#fff;text-shadow:var(--outline)}
@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}}
.jamTop{display:flex;align-items:center;gap:14px;color:var(--brown)}.jamTop>b{font-size:34px;color:var(--brown);text-shadow:none}.jamTop div,.jamTop small{color:var(--brown)}
.jamNow{color:var(--brown);background:#fff7e0;border:2px solid #e8cf98;border-radius:12px;padding:8px 10px}
#mcontent h3{color:var(--brown);text-shadow:none;margin:12px 0 6px;font-size:17px}
.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;color:var(--brown)}.jamT tr.on td{background:#d8f5c8}.jamT.haji td:first-child{white-space:nowrap;width:1%}
.jamT b,.jamNow b,.jamT small{text-shadow:none;color:var(--brown)}.jamBtns{gap:6px;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}
#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(var(--paper),var(--paper2));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;text-shadow:var(--outline);background:#2f7fe0;border-radius:7px;padding:0 6px;border:1.5px solid var(--ink)}
#fikir .fk{margin-top:3px;color:#1f6a3a}#fikir p{margin:4px 0;color:var(--brown)}#fikir small{display:block;color:#7a4a20}#fikir .fj{margin-top:2px}
body.inmatch #fikir{max-width:min(280px,60vw)}
.dekatRow{justify-content:center;margin:0 0 8px}.dekatBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.dekatBtn img{width:30px;height:30px;object-fit:contain}
.matchAi{justify-content:center;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap}.matchAi .muted{font-size:12px;max-width:380px;text-align:center}
#dekat{position:fixed;inset:0;z-index:60;touch-action:none;user-select:none}
#dekat .dkTop{position:absolute;left:0;right:0;top:0;height:calc(54px + var(--sat));display:flex;align-items:center;gap:10px;padding:calc(6px + var(--sat)) calc(10px + var(--sar)) 6px calc(12px + var(--sal));background:linear-gradient(rgba(8,30,60,.9),rgba(8,30,60,0))}
#dekat .dkTop b{font-size:20px;color:#fff;text-shadow:var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#dekat .dkTop #dkN{color:#fff;text-shadow:var(--outline);font-size:14px;margin-right:auto}
#dekat .dkTop .x{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#ff7a6a,#d8342a)}
#dekat .dkTop .x::before,#dekat .dkTop .x::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:4px;margin:-2px 0 0 -10px;border-radius:2px;background:#fff;transform:rotate(45deg)}#dekat .dkTop .x::after{transform:rotate(-45deg)}
#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}
.dktag.far{background:linear-gradient(#ffd86a,#e0a020);font-size:13px}
.dkInfo{position:absolute;right:calc(10px + var(--sar));top:calc(60px + var(--sat));width:min(330px,38vw);max-height:calc(100% - 210px);overflow:auto;padding:10px 12px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:var(--brown);scrollbar-width:none}
.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)}
#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}
.dkChips{flex:1;min-width:0;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)}
.dkNav{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:linear-gradient(#ffe36a,#f0a000);box-shadow:0 3px 0 var(--ink)}
.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)}
#dekat .dkZoom{position:absolute;right:calc(10px + var(--sar));bottom:calc(112px + 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(#5ad8ff,#1a8ad0);color:#fff;text-shadow:var(--outline);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(8,30,60,.55);border:1.5px solid rgba(255,255,255,.6);color:#fff;font-size:13px;text-shadow:var(--outline);white-space:nowrap}
.dkHint{position:absolute;left:50%;bottom:calc(112px + var(--sab));transform:translateX(-50%);padding:3px 12px;border-radius:10px;background:rgba(8,30,60,.75);color:#fff;font-size:12px;text-shadow:var(--outline);pointer-events:none;white-space:nowrap}
@media (max-height:420px){ #dekat .dkTop b{font-size:16px} .dkInfo{width:min(260px,34vw);top:calc(50px + var(--sat));max-height:calc(100% - 150px)} .dkInfo p{font-size:12px} .dkChips button{width:74px}.dkChips button img{width:36px;height:36px} .dkHint{display:none} .dktag{font-size:12px;padding:3px 8px} #dekat .dkZoom{bottom:calc(84px + var(--sab))} #dekat .dkZoom button{width:38px;height:38px;font-size:22px} .dkNav{width:34px;height:34px} #dekat .dkZ{font-size:11px} }
body.dekat-on #app,body.dekat-on #modal,body.dekat-on #slogan,body.dekat-on #fikir,body.dekat-on #ov{visibility:hidden!important}
/* SistemGuru.My bridge (js/jambatan.js, G108): rank pill opens the standard ranking, result row with ranking points */
#rankpill.sgjKlik{cursor:pointer}
#rankpill.sgjKlik:hover{filter:brightness(1.15)}
.sgjHasil{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:16px;color:var(--brown)}
/* bridge joystick (.sgj-joy, touch only) on the home lobby: in the free gap between the pass bar and PLAY, above the bottom tabs; the close-up viewer keeps its own drag */
.sgj-joy{left:calc((10px + var(--sal,0px) + min(300px,40vw) + 100vw - 14px - var(--sar,0px) - min(230px,32vw)) / 2 - 59px);bottom:calc(64px + var(--sab,0px))}
@media (orientation:portrait){.sgj-joy{left:max(18px,env(safe-area-inset-left));bottom:calc(150px + var(--sab,0px))}}
@media (min-width:900px) and (min-aspect-ratio:4/3){.sgj-joy{left:calc((106px + var(--sal,0px) + 320px + 100vw - 14px - var(--sar,0px) - 250px) / 2 - 59px);bottom:max(18px,env(safe-area-inset-bottom))}}
body.dekat-on .sgj-joy{display:none!important}