:root{--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right)}
@font-face{font-family:Lilita;src:url(../assets/fonts/lilita.woff2) format('woff2');font-display:block}
:root{--ink:#1f1208;--wood:#6b4423;--woodL:#9a6a3c;--paper:#fbf1da;--paper2:#f1dfb8;--gold:#ffcf3f;--green:#7ed321;--red:#ff4f3a;--blue:#3aa0ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#7ec8e8;font-family:Lilita,sans-serif;font-weight:400;color:#fff}
#cv,#ov{position:fixed;inset:0;width:100%;height:100%;display:block}
#cv{touch-action:none}#ov{pointer-events:none;z-index:2}
.hidden{display:none!important}
.out,b,h2,h3,.bigbtn span,.btn,.res b,.pill b,#btimer,#bpct{font-family:Lilita;font-weight:400;letter-spacing:.5px;
 text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),0 4px 0 rgba(0,0,0,.35)}
/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;
 background:radial-gradient(ellipse at 50% 120%,#ffd27a 0%,#ff9a4a 30%,#c4513a 60%,#4a1f3a 100%)}
.screen.clear{background:linear-gradient(rgba(0,0,0,0) 40%,rgba(20,10,0,.55))}
.logo{text-align:center;font-family:Lilita;line-height:.85;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
.logo .l1{font-size:clamp(46px,10vw,96px);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.logo .l2{font-size:clamp(58px,13vw,128px);background:linear-gradient(#fff6a8 10%,#ffc928 45%,#e07b00 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.logo .l3{font-family:Lilita;font-size:16px;margin-top:14px;color:#fff3d0;text-shadow:0 2px 3px #000;letter-spacing:1px}
.logo.small .l1{font-size:40px}.logo.small .l2{font-size:56px}.logo.small{margin-bottom:14px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bar{width:min(440px,80vw);height:26px;border:4px solid var(--ink);border-radius:16px;background:#2a1a10;overflow:hidden;margin-top:34px;box-shadow:0 4px 0 rgba(0,0,0,.4)}
#loadbar{height:100%;width:0;background:linear-gradient(#fff3a0,#ffc928 50%,#e08a00);border-radius:10px;transition:width .2s}
#loadtxt{margin-top:10px;font-family:Lilita;font-size:18px;text-shadow:0 2px 0 #000}
.card{background:linear-gradient(var(--paper),var(--paper2));color:var(--wood);border:4px solid var(--ink);border-radius:22px;padding:22px;width:min(400px,90vw);text-align:center;
 box-shadow:inset 0 0 0 4px #fff7e2,0 10px 0 rgba(0,0,0,.35);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.card h2{color:#fff;margin:0 0 6px;font-size:30px}
.card p{font-weight:800;margin:6px 0}
input{width:100%;padding:14px;font:20px Lilita;border-radius:14px;border:3px solid var(--ink);margin:10px 0;background:#fff;color:var(--ink);text-align:center;user-select:text}
/* ---------- buttons ---------- */
.btn{position:relative;border:3px solid var(--ink);border-radius:14px;padding:10px 18px 12px;font-size:18px;color:#fff;cursor:pointer;margin:3px;
 background:linear-gradient(#b8b8b8,#8a8a8a);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.22),0 4px 0 var(--ink);transition:transform .06s}
.btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.22),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(#ffe680,#ffbf1f 60%,#e89a00)}.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:24px;height:24px;vertical-align:middle;margin:-4px 0}
/* ---------- HUD ---------- */
#hud,#bhud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*,#bhud>*{pointer-events:auto}
#topleft{position:absolute;left:calc(10px + var(--sal));top:calc(10px + var(--sat));display:flex;flex-direction:column;gap:8px}
.pill{background:linear-gradient(rgba(30,18,8,.82),rgba(20,12,4,.72));border:2px solid rgba(255,255,255,.18);border-radius:22px;padding:3px 14px 3px 3px;display:flex;align-items:center;gap:6px;font-size:17px;min-height:38px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.pill img{width:36px;height:36px;margin:-4px 0 -4px -4px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
#pname{padding-left:14px;font-family:Lilita;font-size:18px;text-shadow:0 2px 0 #000}
#topright{position:absolute;right:calc(10px + var(--sar));top:calc(10px + var(--sat));display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.res{position:relative;display:flex;align-items:center;justify-content:flex-end;width:210px;height:34px}
.res .rb{position:absolute;left:0;right:22px;top:2px;bottom:2px;border-radius:16px;overflow:hidden;background:rgba(20,12,4,.78);border:2px solid rgba(255,255,255,.2);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.res[data-r=pearl]{width:160px}.res[data-r=pearl]::before{content:'';position:absolute;left:28px;right:22px;top:2px;bottom:2px;border-radius:16px;background:rgba(20,12,4,.78);border:2px solid rgba(255,255,255,.2)}
.rf{height:100%;width:0;border-radius:14px;transition:width .4s}
.rf.gold{background:linear-gradient(#fff2a0,#ffc928 50%,#d98e00)}.rf.nira{background:linear-gradient(#ffc2ec,#ff5ec0 50%,#c0168a)}
.res b{position:relative;z-index:2;font-size:20px;margin-right:52px}
.res img{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:50px;height:50px;z-index:3;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.res small{position:absolute;left:12px;top:-12px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;z-index:2}
.plus{position:absolute;left:0;z-index:3;width:32px;height:32px;padding:0;border-radius:10px;border:3px solid var(--ink);font:22px Lilita;color:#fff;
 background:linear-gradient(#b4f05a,#5fb31a);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--ink);text-shadow:0 2px 0 var(--ink)}
.bigbtn{position:absolute;bottom:calc(14px + var(--sab));left:calc(14px + var(--sal));width:104px;height:104px;border-radius:24px;border:4px solid var(--ink);padding:0;
 background:linear-gradient(#ffe680,#ffb71f 55%,#e08a00);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:pointer;
 box-shadow:inset 0 4px 0 rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.2),0 6px 0 var(--ink),0 10px 16px rgba(0,0,0,.35);transition:transform .06s}
.bigbtn:active{transform:translateY(4px) scale(.97)}
.bigbtn img{width:70px;height:70px;margin:-14px 0 -6px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}.bigbtn span{font-size:20px}
.bigbtn.right{left:auto;right:14px;background:linear-gradient(#c6f57a,#6cc322 55%,#4a9a10)}
.bigbtn.right2{left:auto;right:130px;width:84px;height:84px;background:linear-gradient(#a8dcff,#3a96f0 55%,#1f6ec4)}
.bigbtn.right2 img{width:54px;height:54px}.bigbtn.right2 span{font-size:16px}
.smallbtn{position:absolute;left:130px;bottom:calc(18px + var(--sab));width:58px;height:58px;border-radius:16px;border:3px solid var(--ink);
 background:linear-gradient(#b08a5a,#7a5430);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 4px 0 var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.smallbtn i{display:block;width:28px;height:5px;border-radius:3px;background:#fff;box-shadow:0 2px 0 var(--ink)}
#placebar,#selbar{position:absolute;bottom:calc(132px + var(--sab));left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94vw;animation:rise .25s ease-out}
@keyframes rise{from{transform:translate(-50%,30px);opacity:0}}
#selbar .title2{width:100%;text-align:center;font:24px Lilita;text-shadow:0 2px 0 #000,0 0 6px #000}
/* ---------- modal ---------- */
#modal{position:fixed;inset:0;background:rgba(10,5,0,.62);z-index:40;display:flex;align-items:center;justify-content:center}
#mbox{position:relative;background:linear-gradient(var(--paper),var(--paper2));color:var(--wood);border:5px solid var(--ink);border-radius:24px;width:min(820px,96vw);max-height:92vh;overflow:auto;
 padding:0 16px 16px;box-shadow:inset 0 0 0 4px #fff7e2,0 12px 0 rgba(0,0,0,.4);animation:pop .3s cubic-bezier(.2,1.5,.4,1)}
#mbox h2{margin:0 -16px 14px;padding:14px 60px 14px 20px;font-size:28px;color:#fff;background:linear-gradient(#a8743f,#7a4f28);border-bottom:4px solid var(--ink);border-radius:18px 18px 0 0;
 box-shadow:inset 0 3px 0 rgba(255,255,255,.25)}
#mbox p,#mbox li{font-weight:800;color:#5a3a1c}
#mclose{position:absolute;right:10px;top:9px;width:44px;height:44px;border-radius:12px;border:3px solid var(--ink);z-index:2;font:22px Lilita;color:#fff;
 background:linear-gradient(#ff8a6a,#e83a22);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 3px 0 var(--ink);text-shadow:0 2px 0 var(--ink)}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{flex:1;min-width:96px;background:linear-gradient(#c9a36d,#9a7442)}
.tabs .on{background:linear-gradient(#ffe680,#ffb71f 60%,#e08a00)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{background:radial-gradient(circle at 50% 35%,#fffdf4,#f6e6c2);border:3px solid #b58a52;border-radius:16px;padding:8px;text-align:center;position:relative;cursor:pointer;
 box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 3px 0 #8a6534;transition:transform .08s}
.item:active{transform:scale(.96)}
.item img.pic{width:100%;height:118px;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.item .nm{font:18px Lilita;color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}
.item .meta{font-size:12px;font-weight:800;color:#7a5a32;min-height:16px}
.item.locked{filter:grayscale(.85);opacity:.7}
.cost{display:inline-flex;align-items:center;gap:4px;font:19px Lilita;color:#fff;text-shadow:0 2px 0 var(--ink),1.5px 0 0 var(--ink),-1.5px 0 0 var(--ink),0 -1.5px 0 var(--ink)}
.cost.bad{color:#ff6b55}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stat{background:#fff8e6;border:2px solid #c9a36d;border-radius:10px;padding:7px 12px;margin:5px 0;display:flex;justify-content:space-between;gap:10px;font-weight:800;color:#5a3a1c}
.stat b{font-size:17px}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
.lvl{background:radial-gradient(circle at 50% 30%,#fffdf4,#f0dcb0);border:3px solid #b58a52;border-radius:14px;padding:8px;text-align:center;cursor:pointer;box-shadow:0 3px 0 #8a6534}
.lvl b{font-size:15px}.lvl.lock{background:#e4ddd0;border-color:#b0a898;pointer-events:none}.lvl.lock .lnum,.lvl.lock .lloot{background:#b8b0a4}.lvl.lock .lname{color:#6b5a48!important}
.lvl .st img{width:24px}
#toast{position:fixed;top:24%;left:50%;transform:translateX(-50%) scale(.9);background:linear-gradient(rgba(40,24,10,.92),rgba(20,12,4,.92));border:3px solid var(--ink);
 padding:12px 22px;border-radius:16px;font:20px Lilita;z-index:60;opacity:0;transition:all .25s;pointer-events:none;text-align:center;text-shadow:0 2px 0 #000;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) scale(1)}
/* ---------- battle ---------- */
#btop{position:absolute;top:calc(10px + var(--sat));left:50%;transform:translateX(-50%);text-align:center}
#bname{font:18px Lilita;text-shadow:0 2px 0 #000}#btimer{font-size:36px;line-height:1}
#bstats{position:absolute;right:calc(12px + var(--sar));top:calc(10px + var(--sat));text-align:right;background:linear-gradient(rgba(30,18,8,.8),rgba(20,12,4,.65));padding:8px 14px;border-radius:16px;border:2px solid rgba(255,255,255,.18)}
#bpct{font-size:38px;line-height:1}
#bstars img{width:34px}
#bloot{font:18px Lilita;text-shadow:0 2px 0 #000}#bloot img{width:26px;vertical-align:middle}
#bEnd{position:absolute;left:calc(12px + var(--sal));top:calc(10px + var(--sat))}
#troopbar{position:absolute;bottom:calc(10px + var(--sab));left:0;right:0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 8px}
.tslot{width:84px;height:98px;border-radius:16px;border:3px solid var(--ink);background:linear-gradient(#fff6dc,#e8cf98);position:relative;padding:0;cursor:pointer;
 box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),0 4px 0 var(--ink);transition:transform .1s}
.tslot img{width:80px;height:80px;margin-top:10px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3))}
.tslot b{position:absolute;left:6px;top:2px;font-size:20px;z-index:2}
.tslot.sel{background:linear-gradient(#fff9b0,#ffcf3f);transform:translateY(-10px);box-shadow:0 0 0 3px #fff,0 4px 0 var(--ink),0 0 18px #ffe36a}
.tslot.empty{filter:grayscale(1);opacity:.55}
.result{text-align:center;padding-top:6px}
.result .stars img{width:96px;margin:0 -6px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.3));animation:pop .5s cubic-bezier(.2,1.6,.4,1) backwards}
.result .stars img:nth-child(2){width:120px;margin-bottom:-10px;animation-delay:.2s}.result .stars img:nth-child(3){animation-delay:.4s}
.bigstat{font:26px Lilita;color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink)}
.bigstat img{width:34px;vertical-align:middle}
.trainq{display:flex;gap:8px;flex-wrap:wrap;min-height:72px;background:#e6cf9c;border:3px solid #b58a52;border-radius:14px;padding:6px;margin:6px 0}
.trainq .q{position:relative;width:64px;text-align:center;font:14px Lilita;color:#fff;text-shadow:0 2px 0 #000;background:#fff4d6;border-radius:10px;border:2px solid #b58a52;cursor:pointer}
.trainq img{width:58px}
.lb td,.lb th{padding:8px 10px;text-align:left;font-weight:800;color:#5a3a1c}.lb{width:100%;border-collapse:collapse}.lb tr:nth-child(odd){background:#fff8e6}
@media (max-height:520px){.bigbtn{width:84px;height:84px}.bigbtn img{width:54px;height:54px}.bigbtn span{font-size:16px}.bigbtn.right2{right:108px;width:70px;height:70px}.bigbtn.right2 img{width:42px;height:42px}
 .smallbtn{left:108px;width:50px;height:50px}#placebar,#selbar{bottom:calc(104px + var(--sab))}.tslot{width:72px;height:84px}.tslot img{width:66px;height:66px}}

/* v1.2 */
.lbl{color:#5a3a1c;text-shadow:none;font-family:Lilita}
.lvtag{position:absolute;left:6px;top:6px;background:linear-gradient(#8fd0ff,#2f8be8);border:2px solid var(--ink);border-radius:8px;padding:0 6px;font:13px Lilita;color:#fff;text-shadow:0 1px 0 #000;z-index:2}
.questbtn{position:absolute;left:10px;top:calc(160px + var(--sat));width:58px;height:58px;border-radius:16px;border:3px solid var(--ink);padding:0;
 background:linear-gradient(#e0a8ff,#a052e0 60%,#7d33bf);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 4px 0 var(--ink)}
.questbtn img{width:44px;height:44px}
.badge{position:absolute;right:-8px;top:-8px;min-width:24px;height:24px;border-radius:12px;background:#ff3b30;border:2px solid #fff;font:14px Lilita;color:#fff;line-height:20px;padding:0 4px}
.quest{display:flex;align-items:center;gap:10px;background:#fff8e6;border:3px solid #c9a36d;border-radius:14px;padding:10px;margin:8px 0}
.quest .qt{flex:1}
.qbar{position:relative;height:20px;background:#5a3a1c;border-radius:10px;overflow:hidden;margin-top:6px;border:2px solid var(--ink)}
.qbar div{height:100%;background:linear-gradient(#b4f05a,#5fb31a)}.qbar span{position:absolute;inset:0;text-align:center;font:13px Lilita;color:#fff;text-shadow:0 1px 0 #000;line-height:17px}
.btn.big{display:block;margin:10px auto;font-size:24px;padding:12px 40px}
.tslot.hero{background:linear-gradient(#ffe9a8,#e8b84a)}.tslot.spell{background:linear-gradient(#e8d4ff,#b48ae0)}
.tslot.power{animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 3px #fff,0 4px 0 var(--ink),0 0 24px #ffd23a}}
.tslot b{font-size:16px}
.lvl.boss{background:radial-gradient(circle at 50% 30%,#ffe0d0,#e8a080);border-color:#a8341a}
#toast{top:auto;bottom:calc(150px + var(--sab))}
/* daily reward cards: fixed three-row structure so every card lines up */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:12px 0 4px;align-items:stretch}
.day{position:relative;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:4px;padding:6px 4px 8px;
 background:linear-gradient(#fffaf0,#f3e2bd);border:3px solid #b58a52;border-radius:14px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),0 3px 0 #8a6534}
.day .dl{width:100%;font:15px Lilita;color:#fff;background:linear-gradient(#a8743f,#7a4f28);border-radius:8px;padding:2px 0;
 text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.day .di{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.day .di img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.day .da{min-width:80%;font:16px Lilita;color:#fff;border:2px solid var(--ink);border-radius:10px;padding:1px 6px;
 text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.day.gold .da{background:linear-gradient(#ffe680,#e8a100)}.day.nira .da{background:linear-gradient(#ffb0e6,#d0309a)}.day.pearl .da{background:linear-gradient(#e8ecff,#8a94c8)}
.day.today{background:linear-gradient(#fff6b8,#ffd34a);border-color:#fff;box-shadow:0 0 0 3px #e8a100,0 0 16px #ffe36a;transform:translateY(-4px)}
.day.today .dl{background:linear-gradient(#7ed321,#4a9a10)}
.day.got{filter:grayscale(.7);opacity:.6}
.day .dc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:40px Lilita;color:#5fb31a;text-shadow:0 2px 0 #fff}
@media (max-width:560px){.days{grid-template-columns:repeat(4,minmax(0,1fr))}}
.day .dl,.day .da{text-align:center;box-sizing:border-box}
.day .da{width:88%}
.day .dc{font-size:44px;color:#4a9a10;text-shadow:0 2px 0 #fff,0 0 6px #fff}
/* while a dialog is open, toasts move to the top so they never cover dialog content */
#modal:not(.hidden) ~ #toast{top:calc(8px + var(--sat));bottom:auto}

/* ===== v1.2.1 consistency pass ===== */
/* HUD: "max" label sits inside the bar, icons stay inside their pills */
.res small{left:14px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.9}
.res[data-r=pearl] small{display:none}
.pill img{margin:0;width:30px;height:30px}
.pill{padding:3px 14px 3px 5px}
/* shared card: picture box, title, meta, footer pinned to bottom */
.item{display:flex;flex-direction:column;align-items:center;gap:3px}
.item img.pic{flex:0 0 110px;height:110px;width:100%;object-fit:contain;transform-origin:center}
.item>.cost,.item>.btn{margin-top:auto}
.item .meta{text-align:center}
/* queues: picture + readable counter pill */
.trainq{align-items:flex-start}
.trainq .q{display:flex;flex-direction:column;align-items:center;width:70px;padding:3px 3px 5px;gap:2px}
.trainq .q img{width:58px;height:58px;object-fit:contain}
.qn{display:block;min-width:52px;font:14px Lilita;color:#fff;background:linear-gradient(#8fd0ff,#2f8be8);border:2px solid var(--ink);border-radius:8px;padding:0 4px;text-align:center;
 text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.qn.wait{background:linear-gradient(#d8c8a8,#a8916a)}
/* stats: dark readable values, new value in green */
.stat b{font-family:Lilita;color:#3b2414;text-shadow:none;font-size:15px}
.stat b span{color:#3a8a10!important}
/* campaign cards */
.levels{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.lvl{position:relative;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:4px;padding:10px 6px 8px;min-height:132px}
.lvl .lnum{position:absolute;left:-6px;top:-6px;width:30px;height:30px;border-radius:50%;background:linear-gradient(#ffe680,#e8a100);border:2px solid var(--ink);
 font:15px Lilita;color:#fff;line-height:26px;text-align:center;text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.lvl .lname{font:15px Lilita;color:#5a3a1c;text-align:center;line-height:1.1;align-self:center;padding:0 4px}
.lboss{display:block;margin:3px auto 0;width:max-content;font-size:11px;color:#fff;background:#a8341a;border-radius:6px;padding:0 6px}
.lvl .st{display:flex;gap:2px}.lvl .st img{width:26px;height:26px}
.lvl .lloot{display:flex;align-items:center;gap:3px;font:14px Lilita;color:#fff;background:linear-gradient(#ffe680,#e8a100);border:2px solid var(--ink);border-radius:8px;padding:0 8px;
 text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.lvl .lloot img{width:18px;height:18px}
.lvl{min-width:0;padding-left:10px;padding-right:10px}.lvl .lname{max-width:100%;overflow-wrap:anywhere;font-size:14px}
/* tabs: always fit their buttons, wrap into a tidy grid on narrow screens */
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.tabs button{min-width:0;margin:0;padding:8px 6px 10px;white-space:nowrap;font-size:clamp(13px,1.9vw,17px)}
/* dialog rows never overflow */
.row>*{min-width:0}
.row>img{flex:0 0 auto;width:min(180px,32vw)!important}
.row>div{flex:1 1 220px!important;min-width:0!important}
.stat{flex-wrap:wrap}
@media (max-height:520px){#mbox{max-height:96vh;padding:0 10px 10px}#mbox h2{font-size:22px;padding:10px 54px 10px 14px;margin:0 -10px 10px}
 .item img.pic{flex-basis:84px;height:84px}.grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}#mclose{width:38px;height:38px;top:6px}}

.item .desc{font-size:11px;font-weight:600;color:#7a5a32;margin-bottom:4px}
.item>.foot{margin-top:auto;font-weight:800}
#doUp,.row .btn{margin-left:0;margin-right:0;box-sizing:border-box}
/* battle bar: one scrollable row, never covers the battlefield */
#troopbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;justify-content:safe center;padding:12px 8px 2px;scrollbar-width:none}
#troopbar::-webkit-scrollbar{display:none}
.tslot{flex:0 0 auto}
@media (max-height:520px){.tslot{width:62px;height:74px;border-radius:12px}.tslot img{width:56px;height:56px;margin-top:8px}.tslot b{font-size:14px}}
/* ===== edge-to-edge: 3D world fills the whole screen, HUD stays clear of notches ===== */
html,body{width:100vw;height:100vh;height:100dvh;background:#000}
#cv,#ov{width:100vw;height:100vh;height:100dvh}
#topleft,#btnQuest{left:calc(10px + var(--sal))}
#btnAttack,#bEnd{left:calc(14px + var(--sal))}
#btnMenu{left:calc(130px + var(--sal))}
#topright,#bstats{right:calc(10px + var(--sar))}
#btnShop{right:calc(14px + var(--sar))}
#btnArmy{right:calc(130px + var(--sar))}
#troopbar{padding-left:calc(8px + var(--sal));padding-right:calc(8px + var(--sar))}
#modal{padding-left:var(--sal);padding-right:var(--sar)}
@media (max-height:520px){#btnMenu{left:calc(108px + var(--sal))}#btnArmy{right:calc(108px + var(--sar))}}

/* ===== one font everywhere: Lilita One ===== */
*,*::before,*::after,button,input,textarea,select,table{font-family:Lilita,sans-serif!important;font-weight:400!important;font-synthesis:none}
p,li,.meta,.desc,.stat span,.lb td,.lb th,#mbox p,#mbox li{letter-spacing:.4px;line-height:1.35}
.item .meta,.item .desc{font-size:12.5px}
.stat span{color:#5a3a1c}

/* quest button: bright gold star on deep royal blue (complementary = high contrast), thin clean badge */
.questbtn{background:radial-gradient(circle at 50% 35%,#5a7cff,#2a3a9f 75%);border:2px solid #14183f;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #14183f}
.questbtn img{width:42px;height:42px;filter:drop-shadow(0 0 6px rgba(255,214,60,.55))}
.badge{border:1.5px solid #fff;right:-6px;top:-6px;min-width:20px;height:20px;line-height:17px;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.4);text-shadow:none}
/* buttons never fall back to the browser's default black text */
button{color:#fff}
/* battle bar counters: same pill style as the Army screen */
.tslot b{left:50%;top:auto;bottom:-9px;transform:translateX(-50%);min-width:38px;padding:0 6px;font-size:14px;line-height:18px;color:#fff;
 background:linear-gradient(#8fd0ff,#2f8be8);border:2px solid var(--ink);border-radius:9px;white-space:nowrap;
 text-shadow:0 1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink)}
.tslot.hero b{background:linear-gradient(#ffe680,#e8a100)}
.tslot.spell b{background:linear-gradient(#e0a8ff,#a052e0)}
.tslot.power b{background:linear-gradient(#ff8a6a,#e83a22)}
.tslot.empty b{background:linear-gradient(#bbb,#888)}
.tslot img{margin-top:2px}
#troopbar{padding-bottom:12px}
@media (max-height:520px){.tslot b{font-size:12px;line-height:15px;min-width:32px;bottom:-8px}}

/* ================= v1.2.6 visual consistency rules =================
   1. Text on light cream panels  -> solid dark brown, no outline.
   2. Text on buttons / coloured pills / dark HUD -> white with a THIN outline.
   3. Borders: dialogs/cards 3px, buttons & cards 2px, small pills 1.5px.
   4. Button contents are always vertically centred on one line. */
:root{--brown:#5a3418;--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)}
.out,b,h2,h3,.bigbtn span,.btn,.res b,.pill b,#btimer,#bpct,.cost,.item .nm,.bigstat,.qn,.lvtag,.da,.lloot,.lnum,.tslot b,.badge{text-shadow:var(--outline)}
/* rule 1: on cream */
.item .nm,.bigstat,.card h2,.lbl,.lvl .lname,.stat b,.item>.cost,.quest>.cost,#mbox p .cost,.lb td,.lb th{color:var(--brown)!important;text-shadow:none!important}
.item>.cost.bad,#mbox p .cost.bad{color:#d9342a!important}
.bigstat{font-size:24px}.bigstat img{width:30px;height:30px}
.result .bigstat+.bigstat,.result p.bigstat{display:flex;align-items:center;justify-content:center;gap:8px}
.card h2{font-size:30px}
/* rule 2: on buttons; a cost you cannot afford becomes a red pill instead of red-on-yellow text */
.btn .cost{color:#fff;text-shadow:var(--outline);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)}
.btn.gold,.tabs .on,.bigbtn:not(.right):not(.right2){background:linear-gradient(#ffd34d,#f5a300 55%,#dd8800)}
.lloot,.lvl .lnum,.day.gold .da{background:linear-gradient(#ffcf3f,#e39400)}
/* rule 3: borders */
#mbox{border-width:3px;box-shadow:inset 0 0 0 2px #fff7e2,0 10px 0 rgba(0,0,0,.35)}
#mbox h2{border-bottom-width:3px}
.card{border-width:3px;box-shadow:inset 0 0 0 2px #fff7e2,0 8px 0 rgba(0,0,0,.3)}
.bigbtn{border-width:3px;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.18),0 4px 0 var(--ink),0 8px 14px rgba(0,0,0,.3)}
.btn{border-width:2px;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{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)}
.item,.lvl,.quest,.day,.trainq,.tslot,.smallbtn,.questbtn,#mclose,.plus{border-width:2px}
.stat,.trainq .q{border-width:1.5px}
.qn,.lvtag,.lloot,.lvl .lnum,.da,.tslot b{border-width:1.5px}
input{border-width:2px}
/* rule 4: button contents centred */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.1;vertical-align:middle}
.btn .cost,.btn img{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.btn.big{display:flex}
.plus{text-shadow:var(--outline)}
#namebtn{font-size:22px;padding:12px 44px 14px;margin-top:4px}
.warn{color:#c8281e!important;text-shadow:none!important;font-size:17px}
/* ===== dialog header + close button =====
   The box itself does not scroll; only #mcontent scrolls. The header is sticky inside it and the X sits at a fixed spot,
   vertically centred on the header and drawn with CSS bars (font glyphs sit off-centre). */
:root{--hdr:60px;--xbtn:42px}
#mbox{display:flex;flex-direction:column;overflow:hidden;padding:0}
#mcontent{overflow-y:auto;overflow-x:hidden;padding:0 16px 16px;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#mbox h2{position:sticky;top:0;z-index:2;height:var(--hdr);display:flex;align-items:center;padding:0 calc(var(--xbtn) + 22px) 0 20px;margin:0 -16px 14px;box-sizing:border-box;line-height:1;border-radius:0}
#mclose{position:absolute;top:calc((var(--hdr) - var(--xbtn)) / 2);right:12px;width:var(--xbtn);height:var(--xbtn);z-index:5;font-size:0;padding:0;margin:0}
#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)}
#mclose:active{transform:translateY(2px)}
.result{padding-top:0}
@media (max-height:520px){:root{--hdr:50px;--xbtn:36px}#mcontent{padding:0 10px 10px}#mbox h2{margin:0 -10px 10px;padding-left:14px}
 #mclose::before,#mclose::after{width:18px;height:4px;margin:-2px 0 0 -9px}}
#mcontent{scrollbar-width:none}#mcontent::-webkit-scrollbar{display:none}
#mclose{right:calc((var(--hdr) - var(--xbtn)) / 2 + 2px)}

/* ===== HUD resource bars v2: smooth track, 1px edges, fill is always a clean pill (never a crescent) ===== */
.res{height:36px;--rfmin:26px}
.res .rb{left:0;right:22px;top:2px;bottom:2px;padding:3px;border-radius:999px;background:rgba(18,10,4,.72);border:1px solid rgba(0,0,0,.55);
 box-shadow:inset 0 2px 3px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.rf{height:100%;border-radius:999px;position:relative;transition:width .4s ease}
.rf::after{content:'';position:absolute;left:8px;right:8px;top:2px;height:30%;border-radius:999px;background:rgba(255,255,255,.45)}
.rf.gold{background:linear-gradient(#ffe36a,#f5b315 55%,#d98a00);box-shadow:inset 0 -2px 0 rgba(120,60,0,.35)}
.rf.nira{background:linear-gradient(#ff9fdc,#ef4cb4 55%,#c41c8a);box-shadow:inset 0 -2px 0 rgba(110,0,60,.35)}
.res small{left:16px;font-size:11px;letter-spacing:.3px;text-shadow:0 1px 0 rgba(0,0,0,.8),1px 0 0 rgba(0,0,0,.6),-1px 0 0 rgba(0,0,0,.6)}
.res b{margin-right:56px;font-size:20px}
.res[data-r=pearl]::before{left:28px;right:22px;top:2px;bottom:2px;border-radius:999px;background:rgba(18,10,4,.72);border:1px solid rgba(0,0,0,.55);
 box-shadow:inset 0 2px 3px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.12)}
.plus{width:30px;height:30px;border-width:1.5px;border-radius:9px;font-size:20px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--ink);left:2px}
/* left HUD pills: same thin, soft edge */
.pill{border:1px solid rgba(0,0,0,.55);background:rgba(18,10,4,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.25)}

/* campaign list icons are CSS backgrounds sharing ONE decoded image each (no per-row <img> swapping) */
.lvl .st .si{display:inline-block;width:26px;height:26px;background:var(--ico-star0) center/contain no-repeat}.lvl .st .si.on{background-image:var(--ico-star)}
.lvl .lloot .gi{display:inline-block;width:18px;height:18px;background:var(--ico-gold) center/contain no-repeat}
.lvl,.grid .item{content-visibility:auto;contain-intrinsic-size:auto 70px}   /* long lists: rows off screen are not laid out or painted */

/* long campaign list (rule 37): off-screen cards are skipped while scrolling; no CSS filters on the cards */
.levels .lvl{content-visibility:auto;contain-intrinsic-size:auto 132px}

.item .tstat{color:var(--brown);text-shadow:none;font-size:12px}.item .tstat .up{color:#2f7a10}
#slogan{position:fixed;transform:translate(-50%,-100%) scale(.6);opacity:0;pointer-events:none;max-width:min(280px,70vw);padding:8px 14px;border-radius:14px;background:#fff8e6;border:2px solid #c9a36d;color:#5a3418;text-shadow:none;font-family:inherit;font-size:15px;text-align:center;line-height:1.15;transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:5}
#slogan::after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#c9a36d}
#slogan.show{opacity:1;transform:translate(-50%,-100%) scale(1)}

/* 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(60,25,5,.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}

/* content pack v1.7: filter chips, campaign regions, kampung themes, long lists stay smooth (rule 37) */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}.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)}
.grid .item{content-visibility:auto;contain-intrinsic-size:auto 190px}
.levels .reg{grid-column:1/-1;display:flex;flex-direction:column;padding:8px 12px;border-radius:12px;border:2px solid #3a1c08;background:#2a3a20 linear-gradient(90deg,var(--sky),var(--gr));margin-top:6px}
.levels .reg b{color:#fff;text-shadow:1.5px 1.5px 0 #000,-1.5px 1.5px 0 #000,0 -1.5px 0 #000,0 2px 0 #000;font-size:18px}.levels .reg span{color:#fff;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,0 -1px 0 #000;font-size:13px}.levels .reg{content-visibility:auto;contain-intrinsic-size:auto 58px}.levels .reg.lock{background:#4a4e54 linear-gradient(90deg,#7a8088,#555a60)}
.item.theme .swatch{width:100%;height:72px;border-radius:10px;border:2px solid #3a1c08;margin-bottom:6px}.item.theme.sel{outline:3px solid #2f9a3a}
.note{color:#5a3418;font-size:13px;margin:4px 0 8px}.card.rates{background:#fff8e6;border:2px solid #c9a36d;border-radius:12px;padding:10px;color:#5a3418}.card.rates b,.card.rates td{color:#5a3418;text-shadow:none}.card.rates table{width:100%}.card.rates td:last-child{text-align:right}
.item .rateBtn{height:30px;font-size:13px;margin:4px 0}
.grid>.chips{grid-column:1/-1}

.levels .reg{position:relative;cursor:pointer;padding-right:40px}.levels .reg .chev{position:absolute;right:14px;top:50%;width:12px;height:12px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-70%) rotate(45deg);filter:drop-shadow(0 1px 0 #000)}.levels .reg.open .chev{transform:translateY(-30%) rotate(-135deg)}
.levels .lvl,.levels .reg{content-visibility:visible}
/* ---------- v1.8: world clock chip + schedule panel (rule 58) ---------- */
#jamChip{position:fixed;left:50%;top:calc(8px + var(--sat));transform:translateX(-50%);z-index:30;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:3px 12px 4px;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:center;font-family:Lilita,sans-serif;cursor:pointer}
#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:230px;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 9px}#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);font-weight:400}
.jamNow{color:var(--brown);background:#fff7e0;border:2px solid #e8cf98;border-radius:12px;padding:8px 10px}
#mcontent h3.dk{color:var(--brown);text-shadow:none;font-size:17px;margin:12px 0 6px}
.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.sch td:first-child{white-space:nowrap;width:1%}
.jrow{display:flex;flex-wrap:wrap;gap:4px}.jrow .btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;padding:7px 12px 9px}
/* ---------- why-card: tap an NPC (rule 56) ---------- */
#fikir{position:fixed;left:0;top:0;z-index:35;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;font-family:Lilita,sans-serif}
#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);text-shadow:var(--outline)}
#fikir .fk{margin-top:3px;color:#1f6a3a}#fikir .fk small{color:#1f6a3a}#fikir p{margin:4px 0;color:var(--brown);font-weight:400}#fikir small{display:block;color:#7a4a20}#fikir .fj{margin-top:2px}
#bThink{position:absolute;left:calc(14px + var(--sal));top:calc(64px + var(--sat));display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:6px 12px 8px;font-size:16px}
#bThink.on{background:linear-gradient(#b4f05a,#5fb31a 60%,#4a9a10)}
/* ---------- Lihat Dekat viewer (rules 53 + 55) ---------- */
#dekat{position:fixed;inset:0;z-index:45;touch-action:none;user-select:none;font-family:Lilita,sans-serif}
#dekat .dkTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;height:56px;padding:calc(6px + var(--sat)) calc(10px + var(--sar)) 6px calc(12px + var(--sal));background:linear-gradient(rgba(40,24,10,.88),rgba(40,24,10,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}#dekat .dkTop #dkN{margin-right:auto}
#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}
#dekat .dkX{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#ff8a6a,#ef3e25 60%,#c92a14);box-shadow:0 3px 0 var(--ink);padding:0}
#dekat .dkX i{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)}#dekat .dkX i:first-child{transform:rotate(45deg)}#dekat .dkX i:last-child{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;font-family:Lilita,sans-serif}
.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,40vw);max-height:calc(100% - 230px);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);font-weight:400}
#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;font-family:Lilita,sans-serif}
.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);padding:0}
.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(110px + var(--sab));display:flex;flex-direction:column;gap:6px}
#dekat .dkZoom button{position:relative;width:46px;height:46px;border-radius:12px;border:2px solid var(--ink);background:linear-gradient(#8fd0ff,#2f8be8 60%,#1f6ec4);box-shadow:0 3px 0 rgba(0,0,0,.35);padding:0}
#dekat .dkZoom button i{position:absolute;left:50%;top:50%;width:20px;height:5px;margin:-2.5px 0 0 -10px;background:#fff;border-radius:3px;box-shadow:0 0 0 1.2px rgba(31,18,8,.85)}#dekat .dkZoom #dkZin i:last-child{transform:rotate(90deg)}
.dkHint{position:absolute;left:50%;bottom:calc(112px + var(--sab));transform:translateX(-50%);padding:3px 12px;border-radius:10px;background:rgba(40,24,10,.78);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;width:100%;margin-top: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;font-family:Lilita,sans-serif}
.dkGrid button span{color:var(--brown);text-shadow:none}.dkGrid img{width:70px;height:70px;object-fit:contain}
body.dekat-on #hud,body.dekat-on #modal,body.dekat-on #slogan,body.dekat-on #fikir,body.dekat-on #jamChip,body.dekat-on #ov{visibility:hidden!important}
@media (max-height:420px){#dekat .dkTop{height:46px}#dekat .dkTop b{font-size:16px}.dkInfo{width:min(280px,38vw);top:calc(48px + var(--sat));max-height:calc(100% - 150px)}.dkInfo p{font-size:12px}.dkChips button{width:78px}.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}.dkNav{width:34px;height:34px}#dekat .dkZ{font-size:11px}#dekat .dkX{width:36px;height:36px}}