@font-face{font-family:'Lilita One';src:url('fonts/lilita-one-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Jakarta';src:url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --ink:#17131f;
  --panel:rgba(22,24,44,.84);
  --panel2:#232a52;
  --edge:#0c0d1a;
  --hi:rgba(255,255,255,.16);
  --yellow:#ffd23f;--green:#58d04f;--red:#ff5d5d;--blue:#4aa8ff;
  --text:#fff;--muted:#b8c0e2;--dim:#8f98c4;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --ctl:1;
  --tg-top:0px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#64c8ff;font-family:'Jakarta',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#world{position:fixed;inset:0;width:100%;height:100%;display:block}
.lil{font-family:'Lilita One','Jakarta',sans-serif;letter-spacing:.3px;font-weight:400}
.out{text-shadow:-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 2.5px 0 var(--ink)}
.chunk{background:var(--panel);border:2.5px solid var(--edge);border-radius:14px;box-shadow:inset 0 2px 0 var(--hi),0 3px 0 rgba(0,0,0,.28)}
svg.i{width:22px;height:22px;display:block;flex:none}
[hidden]{display:none!important}

/* ------------------------------------------------ HUD */
.hud{position:fixed;inset:0;pointer-events:none}
.hud .pe,.hud button{pointer-events:auto}
#who{display:flex;align-items:center;gap:8px;padding:4px 12px 5px 4px;text-align:left;position:relative}
#who.hasach::after{content:'🏅';position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--yellow);border:2px solid var(--edge);font-size:11px;line-height:16px;text-align:center;animation:giftpulse 1.4s ease-in-out infinite}
.topleft{position:absolute;top:calc(8px + var(--st) + var(--tg-top));left:calc(10px + var(--sl));display:flex;align-items:center;gap:8px}
.micbtn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.micbtn svg{width:23px;height:23px}
.micbtn.on{background:linear-gradient(#2f7a3a,#1f5a2a);border-color:#0d2a12}
.lv{width:34px;height:34px;border-radius:11px;background:linear-gradient(#ffe36b,#f6b500);border:2.5px solid #6e4b00;display:grid;place-items:center;font-size:18px;color:#5a3a00;box-shadow:inset 0 2px 0 #fff6;flex:none}
.me-name{display:flex;align-items:center;gap:6px;font-size:15px;line-height:1.1;max-width:180px;white-space:nowrap}
.me-name span:first-child{overflow:hidden;text-overflow:ellipsis}
.tierb{display:inline-flex;align-items:center;gap:3px;font-family:'Jakarta';font-weight:800;font-size:10px;padding:2px 6px;border-radius:7px;border:1.5px solid var(--ink);text-shadow:none}
.tierb.vip{background:linear-gradient(#ffe36b,#f2a900);color:#4a2e00;--gl:255,200,60}.tierb.vvip{background:linear-gradient(#d8fbff,#4fd1ff);color:#0d3a52;--gl:120,230,255}
.tierb.vip,.tierb.vvip{position:relative;overflow:hidden;animation:tierglow 1.6s ease-in-out infinite alternate}
.tierb.vip::after,.tierb.vvip::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));animation:shine 2.4s linear infinite}
@keyframes tierglow{from{box-shadow:0 0 0 0 rgba(var(--gl),0)}to{box-shadow:0 0 0 3px rgba(var(--gl),.35),0 0 12px rgba(var(--gl),.6)}}
@keyframes shine{to{left:120%}}
.tierb svg{width:11px;height:11px}
.xp{margin-top:4px;width:120px;height:7px;border-radius:5px;background:#0b0d1d;border:1.5px solid #000;overflow:hidden}
.xp i{display:block;height:100%;width:0;background:linear-gradient(#8ef06a,#3fbf3a);border-radius:4px;transition:width .4s}
.chatbox{position:absolute;top:calc(58px + var(--st) + var(--tg-top));left:calc(10px + var(--sl));width:min(40vw,300px);border-radius:12px;background:rgba(10,12,26,.55);border:1.5px solid rgba(0,0,0,.4);overflow:hidden;transition:background .2s,border-color .2s}
.cb-head{display:flex;align-items:center;gap:4px;padding:4px 6px 0}
.cb-tab{padding:2px 9px 3px;border-radius:8px;font-size:10.5px;font-weight:800;color:var(--muted);background:transparent}
.cb-tab.on{background:rgba(255,255,255,.14);color:#fff}
.cb-online{margin-left:auto;display:flex;align-items:center;gap:4px;padding:2px 7px 3px;border-radius:8px;background:rgba(0,0,0,.3);font-size:10.5px;font-weight:800;color:#dfe5ff}
.cb-online i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.cb-min{width:24px;height:20px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.cb-min svg{width:14px;height:14px;transition:transform .2s}
.console{padding:3px 9px 4px;font-size:11px;line-height:1.38;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.8);min-height:16px}
.console .sm{color:#c9b6ff}
/* chat ringkas (default): tanpa kotak, cuma 2 baris terakhir + pil online; ketuk buat membesarkan */
.chatbox.min{background:transparent;border-color:transparent;width:min(36vw,300px)}
.chatbox.min .cb-head{padding:0 6px}
.chatbox.min .cb-tab{display:none}
.chatbox.min .cb-online{margin-left:0;background:rgba(10,12,26,.55)}
.chatbox.min .cb-min{background:rgba(10,12,26,.55);margin-left:0}
.chatbox.min .cb-min svg{transform:rotate(180deg)}
.chatbox.min .cb-row{display:none}
.chatbox.min .console{padding:2px 6px 3px;text-shadow:-1px -1px 0 rgba(0,0,0,.85),1px -1px 0 rgba(0,0,0,.85),-1px 1px 0 rgba(0,0,0,.85),1px 1px 0 rgba(0,0,0,.85),0 2px 2px rgba(0,0,0,.6)}
.chatbox.min .console:empty{display:none}
.chatbox.min .console p{animation:tin .25s}
.cb-row{display:flex;gap:4px;padding:0 5px 5px}
.cb-in{flex:1;min-width:0;padding:4px 8px;border-radius:9px;border:1.5px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-weight:700;font-size:11.5px;-webkit-user-select:text;user-select:text}
.cb-in::placeholder{color:#8f9bd0}
.cb-send{width:28px;height:26px;border-radius:9px;background:linear-gradient(#8ef06a,#3fbf3a);border:1.5px solid var(--ink);display:grid;place-items:center}
.cb-send svg{width:16px;height:16px}
.console p{margin:0;white-space:normal;overflow-wrap:break-word}
.console .sys{color:#7ef0a0}.console .gold{color:#ffd84a}.console .nm{color:#7fd3ff}.console .bad{color:#ff9aa8}.console .vip{color:#ffd84a}.console .vvip{color:#9ff3ff}

.topc{position:absolute;top:calc(8px + var(--st) + var(--tg-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;max-width:44vw}
.wx{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;white-space:nowrap;text-align:left;max-width:100%}
.wxic{width:28px;height:28px;flex:none}
.wx-t{min-width:0}
.wx b{display:block;font-family:'Lilita One';font-weight:400;font-size:15px;line-height:1.05}
.wx small{display:block;font-size:10.5px;font-weight:800;color:#ffe9a6;overflow:hidden;text-overflow:ellipsis}
.wx .tm{margin-left:2px;padding:3px 7px;border-radius:8px;background:#0b0d1d;font-size:10.5px;font-weight:800;color:var(--muted);flex:none}
.bossbar{width:min(44vw,320px);padding:5px 10px 6px}
.bb-top{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.bb-top span{font-weight:800;font-size:12px;color:#ffd7dd}
.bb-track{position:relative;height:10px;margin-top:4px;border-radius:6px;background:#0b0d1d;border:1.5px solid #000;overflow:hidden}
.bb-track i{position:absolute;left:0;top:0;bottom:0}
.bb-track .lag{background:#ffb3bf;transition:width .6s .2s}
.bb-track .fill{background:linear-gradient(#ff7b8a,#e5484d);transition:width .15s}
.bossbar small{display:block;margin-top:2px;font-size:10px;font-weight:800;color:var(--muted);text-align:center}
.frenzy{padding:4px 10px 6px;text-align:center}
.frenzy b{font-size:13px;color:#ffe36b}
.fz-track{height:5px;margin-top:3px;border-radius:4px;background:#0b0d1d;overflow:hidden}
.fz-track i{display:block;height:100%;background:#ffd23f}

.wallet{position:absolute;top:calc(8px + var(--st) + var(--tg-top));right:calc(10px + var(--sr));display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 6px;font-size:16px;line-height:1}
.pill small{font-family:'Jakarta';font-weight:800;font-size:10px;color:var(--muted)}
.pill.bump{animation:bump .4s}
.pill.streak{background:linear-gradient(#5a2a10,#3a1a0a);border-color:#2a0d05;color:#ffe36b;padding-left:8px;animation:streakglow 1.2s ease-in-out infinite alternate}
.pill.streak small{color:#ffb86b}
@keyframes streakglow{to{box-shadow:inset 0 2px 0 var(--hi),0 3px 0 rgba(0,0,0,.28),0 0 14px rgba(255,140,40,.7)}}
@keyframes bump{40%{transform:scale(1.15)}}
.side-btns{position:absolute;top:calc(56px + var(--st) + var(--tg-top));right:calc(10px + var(--sr));display:flex;gap:7px}
/* pelacak misi: satu misi harian yang paling dekat selesai, di bawah tombol kanan atas */
.misitrack{position:absolute;top:calc(104px + var(--st) + var(--tg-top));right:calc(10px + var(--sr));display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center;padding:4px 9px 5px;border-radius:11px;max-width:min(34vw,250px);text-align:left}
.misitrack .mt-l{font-size:10.5px;font-weight:800;color:#dfe5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.misitrack .mt-p{font-size:11px;color:var(--yellow)}
.misitrack .mt-bar{grid-column:1/3;display:block;height:4px;border-radius:3px;background:#0b0d1d;overflow:hidden}
.misitrack .mt-bar b{display:block;height:100%;width:0;background:linear-gradient(#8ef06a,#3fbf3a);transition:width .4s}
.misitrack.done{background:linear-gradient(#ffe36b,#f2a900);border-color:#6e4b00;animation:giftpulse 1.4s ease-in-out infinite}
.misitrack.done .mt-l,.misitrack.done .mt-p{color:#4a2e00}
.misitrack.done .mt-bar{background:rgba(0,0,0,.25)}
.sq{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;position:relative}
.sq svg{width:23px;height:23px}
.sq.gift{background:linear-gradient(#ff8aa3,#e23f6a);border-color:#4a0d20;animation:giftpulse 1.4s ease-in-out infinite}
#devBtn{background:#7f1d1d;border-color:#ef4444;color:#fecaca}
.dev-lbl{font-size:10px;font-weight:800;letter-spacing:.5px}
.dev-sec{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.dev-sec:first-child{border-top:none;padding-top:0}
.dev-sec .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.dev-sec select,.dev-sec input[type=number]{min-width:0;flex:1 1 90px;padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:#101828;color:#e5e7eb}
.dev-sec .mut{color:#9ca3af;font-size:11px}
@keyframes giftpulse{50%{transform:scale(1.08);box-shadow:inset 0 2px 0 var(--hi),0 3px 0 rgba(0,0,0,.28),0 0 0 6px rgba(255,120,160,.35)}}
.dot{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:var(--red);border:2.5px solid var(--edge)}
/* banner naik level (tengah layar, 2,6 detik) */
.levelup{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6;padding-bottom:26vh} /* agak ke atas: di langit, tidak menutupi karakter */
.lu-card{text-align:center;animation:lupop 2.6s cubic-bezier(.2,1.4,.4,1) both}
.lu-t{font-size:22px;color:#ffe36b;letter-spacing:2px}
.lu-n{font-size:72px;line-height:1;color:#fff;margin:2px 0 6px;text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 5px 0 var(--ink),0 0 30px rgba(255,210,63,.8)}
.lu-s{display:inline-block;padding:6px 14px;border-radius:12px;background:rgba(18,20,40,.92);border:2px solid var(--edge);font-size:13px;font-weight:800;color:#ffe9a6;max-width:min(70vw,460px)}
@keyframes lupop{0%{opacity:0;transform:scale(.5)}12%{opacity:1;transform:scale(1.05)}18%{transform:scale(1)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}

.zone{display:none;text-align:center;pointer-events:none;max-width:100%}
.zone.show{display:block;animation:zin 2.8s ease both}
@keyframes zin{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
.zone .z1{font-size:24px;line-height:1}
.zone .z2{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(10,12,26,.6);border:1.5px solid rgba(0,0,0,.4)}
.toasts{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;pointer-events:none}
.toasts:empty{display:none}
.toast{padding:6px 12px 7px;border-radius:12px;background:rgba(18,20,40,.92);border:2px solid var(--edge);font-size:12.5px;font-weight:700;line-height:1.35;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.3);animation:tin .25s}
.toast.good{border-color:#2b8f2f;background:rgba(20,52,26,.94)}
.toast.bad{border-color:#b02f3a;background:rgba(60,18,26,.94)}
.toast.gold{border-color:#c78f0b;background:rgba(66,46,6,.95);color:#ffe9a6}
.toast.legend{border-color:#ff9f43;background:linear-gradient(90deg,rgba(90,30,10,.95),rgba(70,20,70,.95));color:#ffe36b}
.toast.ach{border-color:#ffd23f;background:linear-gradient(90deg,rgba(70,40,0,.96),rgba(40,30,70,.96));color:#ffe9a6}
.toast.out{opacity:0;transform:translateY(-6px);transition:.3s}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}
/* petunjuk kecil: ikut tumpukan tengah-atas (langit), jadi tidak menutupi air & pelampung */
.hint{max-width:min(60vw,440px);padding:4px 11px 5px;border-radius:11px;background:rgba(10,12,26,.68);border:1.5px solid rgba(0,0,0,.4);font-size:12px;font-weight:700;text-align:center;line-height:1.3;pointer-events:none;transition:opacity .25s}
.hint:empty,.hint.fade{opacity:0}
.hint:empty{display:none}
.hint.hot{background:rgba(120,30,20,.85);color:#ffe9a6}
.hint.tut{max-width:min(70vw,520px);padding:9px 16px 10px;z-index:3;border-radius:14px;background:linear-gradient(#ffd54a,#f2a900);border:3px solid var(--ink);color:#4a2e00;font-size:15px;font-weight:800;box-shadow:0 4px 0 rgba(0,0,0,.3);animation:tin .3s}
.hint.tut b{display:block;font-family:'Lilita One';font-weight:400;font-size:12px;letter-spacing:.5px;color:#8a5a00}
.hint.tut.hot{background:linear-gradient(#ffd54a,#f2a900);color:#4a2e00}
.act.pulse{animation:actpulse 1s infinite alternate}
@keyframes actpulse{to{box-shadow:inset 0 -6px 0 rgba(150,90,0,.45),inset 0 3px 0 rgba(255,255,255,.55),0 4px 0 rgba(0,0,0,.3),0 0 0 12px rgba(255,210,63,.45)}}
.dir.pulse{animation:dirpulse 1s infinite alternate}
@keyframes dirpulse{to{box-shadow:0 4px 0 rgba(0,0,0,.25),0 0 0 10px rgba(255,210,63,.5);border-color:#ffd23f}}
.arrow{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-46px 0 0 30px;pointer-events:none;animation:arrowgo 1.1s infinite;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.arrow.l{margin-left:-84px;animation-name:arrowgoL}
@keyframes arrowgo{0%{transform:translateX(0)}50%{transform:translateX(26px)}100%{transform:translateX(0)}}
@keyframes arrowgoL{0%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(26px)}100%{transform:scaleX(-1) translateX(0)}}

/* hotbar & kontrol */
.hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--sb));display:flex;gap:5px;padding:4px;border-radius:15px}
.slot{width:calc(50px * var(--ctl));height:calc(46px * var(--ctl));border-radius:10px;background:rgba(8,10,22,.6);border:2px solid #05060e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.slot svg{width:50%;height:50%}
.slot .lb{font-size:9.5px;font-weight:800;color:#dfe5ff;letter-spacing:.2px}
.slot.sel{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,210,63,.35),inset 0 0 12px rgba(255,210,63,.25)}
.slot.off{opacity:.45}
.slot .cnt{position:absolute;right:-5px;top:-6px;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--yellow);color:#4a2e00;border:2px solid var(--ink);font-size:10.5px;line-height:1.2;text-align:center}
.slot.more{color:var(--muted);font-size:17px}
.slot .dot{top:-3px;right:-3px;width:11px;height:11px}
.rodglow{position:absolute;inset:-2px;border-radius:11px;pointer-events:none;opacity:0}
.rodglow.vip{opacity:1;box-shadow:0 0 0 2px #ffc928,0 0 12px rgba(255,201,40,.6)}
.rodglow.premium{opacity:1;box-shadow:0 0 0 2px #b48bff,0 0 12px rgba(180,139,255,.65)}
.rodglow.legend{opacity:1;box-shadow:0 0 0 2px #ff7a2f,0 0 14px rgba(255,122,47,.75);animation:glow 1.6s infinite}
@keyframes glow{50%{box-shadow:0 0 0 2px #ffd23f,0 0 18px rgba(255,210,63,.8)}}
.pad-r{position:absolute;right:calc(12px + var(--sr));bottom:calc(12px + var(--sb));display:flex;gap:10px;align-items:flex-end}
/* joystick: dasar tetap di kiri bawah; seluruh separuh kiri bawah layar bisa dipakai buat menggeser */
.joyzone{position:absolute;left:0;top:34%;bottom:0;width:52%;touch-action:none;-webkit-user-select:none;user-select:none}
.joy{--js:calc(118px * var(--ctl));position:absolute;left:calc(14px + var(--sl));bottom:calc(14px + var(--sb));width:var(--js);height:var(--js);pointer-events:none}
.joy-ring{position:absolute;inset:0;border-radius:50%;background:rgba(14,16,32,.42);border:2.5px solid rgba(255,255,255,.45);box-shadow:0 4px 0 rgba(0,0,0,.25),inset 0 0 0 10px rgba(255,255,255,.04)}
.joy .ja{position:absolute;width:22px;height:22px;opacity:.55}
.joy .ju{left:50%;top:5px;margin-left:-11px}.joy .jd{left:50%;bottom:5px;margin-left:-11px}.joy .jl{left:5px;top:50%;margin-top:-11px}.joy .jr{right:5px;top:50%;margin-top:-11px}
.joy-knob{position:absolute;left:50%;top:50%;width:calc(var(--js) * .46);height:calc(var(--js) * .46);margin:calc(var(--js) * -.23) 0 0 calc(var(--js) * -.23);border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffffff,#d9dcee 70%);border:3px solid var(--ink);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 4px 0 rgba(0,0,0,.3);transition:transform .08s}
.joy.on .joy-ring{background:rgba(14,16,32,.55);border-color:rgba(255,255,255,.8)}
.joy.on .joy-knob{transition:none;background:radial-gradient(circle at 50% 35%,#ffe783,#ffc21a 70%)}
.joy.pulse .joy-ring{animation:dirpulse 1s infinite alternate}
.dir svg{width:46%;height:46%}
.jump svg{width:48%;height:48%}
.dir.on,.jump.on{background:rgba(255,255,255,.28);transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.act{width:calc(84px * var(--ctl));height:calc(84px * var(--ctl));border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffe783,#ffc21a 60%,#f0a300);border:3px solid var(--ink);box-shadow:inset 0 -6px 0 rgba(150,90,0,.45),inset 0 3px 0 rgba(255,255,255,.55),0 4px 0 rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#4a2e00;touch-action:none}
.act svg{width:38%;height:38%}
.act span{font-size:calc(13px * var(--ctl));line-height:1}
.act.pressed{transform:translateY(3px) scale(.97)}
.act.bite{background:radial-gradient(circle at 50% 35%,#ff9a8a,#ff4d4d 60%,#d92f3b);color:#fff;animation:pulse .5s infinite alternate}
.act.wait{background:radial-gradient(circle at 50% 35%,#a9c8ff,#5b8de8 60%,#3d68c4);color:#fff}
.act.boss{background:radial-gradient(circle at 50% 35%,#ffb0c0,#ff4d6d 60%,#b8203f);color:#fff}
.act.talk{background:radial-gradient(circle at 50% 35%,#b8f7a8,#58d04f 60%,#2f9a35);color:#0f3a10}
.act.off{filter:grayscale(.7) brightness(.85)}
.jump{width:calc(60px * var(--ctl));height:calc(60px * var(--ctl));border-radius:50%;background:radial-gradient(circle at 50% 35%,#bfe3ff,#5aa9ff 60%,#2f7fe0);border:3px solid var(--ink);box-shadow:inset 0 -5px 0 rgba(20,60,140,.45),inset 0 3px 0 rgba(255,255,255,.55),0 4px 0 rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#0a2a55;touch-action:none}
.jump svg{width:38%;height:38%}
.jump span{font-size:calc(11px * var(--ctl));line-height:1}
.jump.pressed{transform:translateY(3px) scale(.97)}
@keyframes pulse{to{box-shadow:inset 0 -6px 0 rgba(120,0,20,.45),inset 0 3px 0 rgba(255,255,255,.45),0 4px 0 rgba(0,0,0,.3),0 0 0 10px rgba(255,80,80,.3)}}

/* minigame tarik: strip ramping di tempat hotbar, air & ikan tetap kelihatan */
.reel{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--sb));width:min(50vw,440px);padding:6px 12px 7px;border-radius:16px;background:rgba(22,24,44,.92)}
.reel-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:1.1}
.pips{display:flex;gap:4px}
.pips i{width:11px;height:11px;border-radius:50%;background:#ffb23f;border:2px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.pips i.gone{background:#3a3f63;box-shadow:none}
.track{position:relative;margin-top:5px;height:32px;border-radius:11px;background:repeating-linear-gradient(90deg,#10132a 0 22px,#151935 22px 44px);border:3px solid var(--ink);overflow:hidden;box-shadow:inset 0 3px 0 rgba(0,0,0,.4)}
.track.miss{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.track .zn{position:absolute;top:3px;bottom:3px;border-radius:8px;background:linear-gradient(#7bf27a,#34c24a);border:2.5px solid #0d4a1c;box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.track .zn.flash{background:linear-gradient(#e6ffd8,#9ff07a)}
.track .nd{position:absolute;top:-2px;bottom:-2px;width:8px;margin-left:-4px;border-radius:4px;background:#fff;border:2px solid var(--ink)}
.reel-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;font-size:11px;font-weight:800;color:var(--muted)}
.reel-bot .rh{flex:1;text-align:center;font-weight:700;font-size:10.5px;color:var(--dim)}
.lives{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
.lives i{width:12px;height:11px;background:#ff5d73;clip-path:path('M6 11S0 7 0 3.4C0 1.5 1.4 0 3.1 0 4.4 0 5.4.8 6 1.7 6.6.8 7.6 0 8.9 0 10.6 0 12 1.5 12 3.4 12 7 6 11 6 11z')}
.lives i.gone{background:#3a3f63}
.tbar{display:inline-block;width:84px;height:8px;border-radius:6px;background:#0b0d1d;border:1.5px solid #000;vertical-align:middle;overflow:hidden}
.tbar i{display:block;height:100%;background:linear-gradient(#cfe0ff,#7aa7ff)}

/* kartu tangkapan: melebar (gambar kiri, teks kanan) supaya pendek di layar landscape */
.catch{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto;animation:fadein .2s;padding-bottom:calc(70px + var(--sb))}
.catch.premium .card{border-color:#b48bff;box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 26px rgba(180,139,255,.7)}
.catch.legend .card{border-color:#ffb347;box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 30px rgba(255,160,60,.8)}
.catch.legend .rays{opacity:.6;background:repeating-conic-gradient(from 0deg,#ffb347 0deg 10deg,transparent 10deg 22deg)}
@keyframes fadein{from{opacity:0}}
.rays{position:absolute;width:620px;height:620px;left:50%;top:50%;margin:-345px 0 0 -310px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--rc,#5aa9ff) 0deg 10deg,transparent 10deg 22deg);opacity:.42;-webkit-mask:radial-gradient(circle,#000 0 25%,transparent 66%);mask:radial-gradient(circle,#000 0 25%,transparent 66%);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card{position:relative;width:min(92vw,440px);padding:22px 14px 12px;display:flex;align-items:center;gap:12px;text-align:left;border-radius:22px;background:linear-gradient(#2c3466,#1e2347);border:3px solid var(--ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.ribbon{position:absolute;top:-16px;left:50%;transform:translateX(-50%);padding:4px 18px 5px;border-radius:12px;background:var(--rc,#3b8cf0);border:3px solid var(--ink);font-size:17px;white-space:nowrap;box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.card-l{flex:none;width:160px;height:96px;display:grid;place-items:center;border-radius:14px;background:rgba(0,0,0,.22);box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.card-r{flex:1;min-width:0}
.card .ttl{font-size:13px;color:var(--yellow);margin-bottom:1px}
.card .fimg{width:150px;height:88px;display:block;object-fit:contain}
.card .fname{font-size:22px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .fmeta{margin-top:2px;font-size:11.5px;font-weight:700;color:var(--muted)}
.rew{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;margin-top:8px}
.chip{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:11px;background:#12152c;border:2px solid var(--ink);font-size:14px;white-space:nowrap}
.chip svg.i{width:18px;height:18px}
.chip.cxp{color:#9ff07a}
.chip.cstreak{color:#ffb86b}
.chip.share{background:linear-gradient(#5aa9ff,#2f6fe0);color:#fff;pointer-events:auto}
.misi{display:flex;flex-direction:column;gap:6px}
.misi .m{padding:8px 10px;border-radius:12px;background:#151935;border:2px solid var(--ink);display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.misi .m b{font-size:13px}
.misi .m .bar{grid-column:1;height:9px;border-radius:6px;background:#0b0d1d;border:1.5px solid #000;overflow:hidden}
.misi .m .bar i{display:block;height:100%;background:linear-gradient(#8ef06a,#3fbf3a);transition:width .3s}
.misi .m small{font-size:10.5px;color:var(--muted);font-weight:800}
.misi .m .btn{grid-row:1/3;grid-column:2;padding:6px 12px}
.misi .m.done{border-color:#ffd23f}
.misi .m.claimed{opacity:.55}
.reflink{display:flex;gap:6px;margin:8px 0}
.reflink .input{flex:1;min-width:0;font-size:12px}
.sticker{position:absolute;top:18px;right:-12px;transform:rotate(12deg);padding:4px 9px;border-radius:9px;background:var(--yellow);color:#4a2e00;border:2.5px solid var(--ink);font-size:12px}

/* ------------------------------------------------ panel & modal */
.layer{position:fixed;inset:0;display:grid;place-items:center;background:rgba(8,10,24,.5);z-index:20;padding:calc(8px + var(--st) + var(--tg-top)) 10px calc(8px + var(--sb))}
#modal{z-index:30;height:100dvh} /* dvh: modal mengecil pas keyboard HP kebuka, jadi panel tidak ketutupan */
.dlg{position:relative;width:min(94vw,640px);max-height:100%;display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(#2a3163,#1d2246);border:3px solid var(--ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.16),0 8px 0 rgba(0,0,0,.35);overflow:hidden;animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
.dlg.small{width:min(92vw,420px)}
.dlg-head{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 12px;background:linear-gradient(#ffd54a,#f2a900);border-bottom:3px solid var(--ink);color:#4a2e00;flex:none}
.dlg-head.plain{padding:10px 14px}
.dlg-head .t{flex:1;font-size:19px;line-height:1.1;min-width:0}
.dlg-head .t small{display:block;font-family:'Jakarta';font-weight:800;font-size:11px;color:#6b4a00;margin-top:1px}
.npc-ava{width:40px;height:40px;border-radius:11px;background:#fff3c4;border:2.5px solid var(--ink);flex:none;image-rendering:pixelated}
.npc-ava.ico{padding:7px;background:#2a3163;color:#ffd23f;box-sizing:border-box}
.x{width:36px;height:36px;border-radius:11px;background:linear-gradient(#ff7b7b,#e23f48);border:2.5px solid var(--ink);display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.4);flex:none}
.x svg{width:16px;height:16px}
.tabs{display:flex;gap:6px;padding:8px 12px 2px;flex:none;overflow-x:auto;scrollbar-width:none}
.tabs:empty{display:none}
.tab{flex:1;min-width:max-content;text-align:center;padding:6px 10px 7px;border-radius:11px;background:#151935;border:2px solid var(--ink);font-size:14px;color:var(--muted)}
.tab.on{background:linear-gradient(#4f8ef5,#2f63c9);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.dlg-body{padding:8px 12px 12px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text;font-size:13px;line-height:1.45}
.dlg-body p{margin:6px 0;color:#dfe5ff}
.dlg-body h4{margin:4px 0 2px;font-family:'Lilita One';font-weight:400;font-size:16px;letter-spacing:.3px}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;padding:0 12px 12px;flex:none}
.sec{margin:12px 0 6px;font-family:'Lilita One';font-weight:400;font-size:15px;color:var(--yellow);letter-spacing:.3px}
.fine{font-size:11.5px;color:var(--dim);font-weight:700}
.rows{display:flex;flex-direction:column;gap:7px}
.row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:14px;background:#151935;border:2px solid var(--ink)}
.ri{width:44px;height:44px;border-radius:11px;background:#232a52;border:2px solid #0a0b18;display:grid;place-items:center;flex:none;overflow:hidden}
.ri svg{width:28px;height:28px}
.ri img,.ri canvas{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.rt{flex:1;min-width:0}
.rt b{display:block;font-family:'Lilita One';font-weight:400;font-size:15px;letter-spacing:.2px}
.rt span{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:1px}
.rr{flex:none;display:flex;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:2.5px solid var(--ink);border-radius:12px;font-family:'Lilita One';font-size:15px;color:#fff;padding:7px 14px 9px;background:linear-gradient(#7be36e,#3cb53d);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.4);text-decoration:none;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn:active{transform:translateY(2px)}
.btn:disabled,.btn.off{background:linear-gradient(#7a8099,#565b74);color:#d9dcea;cursor:default}
.btn.ghost{background:#151935;color:#dfe5ff;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.btn.gold{background:linear-gradient(#ffe36b,#f2a900);color:#4a2e00}
.btn.purple{background:linear-gradient(#c9a6ff,#8a5cf0)}
.btn.fire{background:linear-gradient(#ffb36b,#ff5a2f)}
.btn.blue{background:linear-gradient(#7cc0ff,#3b8cf0)}
.btn.wide{width:100%}
.tag{display:inline-flex;align-items:center;gap:4px;font-family:'Jakarta';font-weight:800;font-size:10.5px;padding:3px 7px;border-radius:7px;border:1.5px solid var(--ink);background:#2c3466;color:#dfe5ff;white-space:nowrap}
.tag svg{width:12px;height:12px}
.tag.ok{background:#2b8f2f;color:#fff}.tag.wait{background:#c78f0b;color:#fff}.tag.no{background:#b02f3a;color:#fff}
.tag.vip{background:#ffc928;color:#4a2e00}.tag.premium{background:#b48bff;color:#24104a}.tag.legend{background:linear-gradient(90deg,#ff7a2f,#ffd23f);color:#4a1a00}
.box{padding:10px 12px;border-radius:14px;background:#151935;border:2px solid var(--ink);margin:8px 0}
.box .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.price{display:inline-flex;align-items:center;gap:4px;font-family:'Lilita One';font-size:16px}
.price svg{width:18px;height:18px}
dl.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0 0;font-size:12px}
dl.stats dt{color:var(--dim);font-weight:700}
dl.stats dd{margin:0;font-weight:800}
dl.stats em{color:#9ff07a;font-style:normal}
.perks{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.perks span{font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.35);color:#e6ebff}
.rod-card{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:14px;border:2.5px solid var(--ink);position:relative;overflow:hidden}
.rod-card.vip{background:linear-gradient(100deg,#4a3a10,#2a2440 60%)}
.rod-card.premium{background:linear-gradient(100deg,#3c2468,#1f2450 60%)}
.rod-card.legend{background:linear-gradient(100deg,#6a2a10,#3a1a3a 55%,#1f2246);box-shadow:inset 0 0 0 2px rgba(255,170,60,.45)}
.rod-card.base{background:#151935}
.rod-card .ri{width:48px;height:48px;background:rgba(0,0,0,.3)}
.rod-card .rt b{display:flex;align-items:center;gap:6px}
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{padding:6px 11px 7px;border-radius:10px;background:#151935;border:2px solid var(--ink);font-weight:800;font-size:12px;color:var(--muted)}
.seg button.on{background:linear-gradient(#4f8ef5,#2f63c9);color:#fff}
.set{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1.5px solid rgba(255,255,255,.06)}
.set>span{font-weight:700;font-size:12.5px}
.tgl{position:relative;width:46px;height:26px;flex:none}
.tgl input{opacity:0;width:0;height:0}
.tgl i{position:absolute;inset:0;border-radius:14px;background:#3a3f63;border:2px solid var(--ink);transition:.2s}
.tgl i::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.tgl input:checked+i{background:#3cb53d}
.tgl input:checked+i::after{left:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px}
.cell{padding:6px;border-radius:12px;background:#151935;border:2px solid var(--ink);text-align:center;box-shadow:inset 0 -3px 0 var(--rc,#333);position:relative}
.cell img{width:84px;height:46px;object-fit:contain;display:block;margin:0 auto}
.cell b{display:block;font-size:11.5px;margin-top:2px}
.cell span{display:block;font-size:10px;color:var(--dim);font-weight:700}
.cell .gl{color:#9ab0ff;font-size:9px;margin-top:1px}
.cell .rl{position:absolute;top:4px;left:4px;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:6px;background:var(--rc,#333);color:#17131f;letter-spacing:.3px}
.cell.unk{background:#111530;border-style:dashed;border-color:#2b3160}
.cell.unk b{color:var(--dim)}
.cell.unk img{opacity:.85}
.cell .cnt{position:absolute;top:4px;right:4px;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.45);color:#dfe5ff}
.zprog{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin:6px 0 8px}
.zprog div{padding:6px 8px;border-radius:10px;background:#151935;border:2px solid var(--ink)}
.zprog b{display:flex;justify-content:space-between;font-size:11px}
.zprog b span{color:var(--muted);font-weight:800}
.zprog i{display:block;height:6px;margin-top:4px;border-radius:4px;background:#0b0d1d;overflow:hidden}
.zprog i::after{content:'';display:block;height:100%;width:var(--p,0%);background:linear-gradient(#8ef06a,#3fbf3a)}
.zprog .done{border-color:#ffd23f}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
/* roda: di layar lebar roda di kiri, kontrol di kanan (PUTAR selalu kelihatan tanpa scroll) */
.wheel-wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;text-align:left}
.wheel-wrap canvas{max-width:100%;height:auto;grid-row:1/4}
.wheel-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.wheel-side .big{font-family:'Lilita One';font-size:18px}
.wheel-side .btn.fire{font-size:17px;padding:9px 16px 11px}
.wheel-res{padding:7px 10px;border-radius:11px;background:#151935;border:2px solid var(--ink);font-size:12.5px;font-weight:700}
.wheel-res.win{border-color:#ffd23f;color:#ffe9a6}
.wheel-phase{display:flex;gap:4px;flex-wrap:wrap}
.wheel-phase span{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:7px;background:rgba(0,0,0,.35);color:var(--muted)}
.wheel-phase span.on{background:#2f63c9;color:#fff}
@media (max-width:640px),(orientation:portrait){.wheel-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}.wheel-wrap canvas{grid-row:auto}}
.bet-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bet-btn{padding:5px 12px 7px;font-size:14px}
.bet-btn.on{background:linear-gradient(#ffd23f,#f2a900);color:#4a2e00}
/* pencapaian */
.achlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:6px}
.achlist .a{display:grid;grid-template-columns:36px 1fr auto;gap:2px 8px;align-items:center;padding:6px 8px;border-radius:12px;background:#151935;border:2px solid var(--ink)}
.achlist .a .ic{width:36px;height:36px;border-radius:10px;background:#232a52;border:2px solid #0a0b18;display:grid;place-items:center;font-size:18px;grid-column:1;grid-row:1/-1}
.achlist .a b{font-size:12.5px;grid-column:2}
.achlist .a small{font-size:10px;color:var(--muted);font-weight:700;grid-column:2;line-height:1.3}
.achlist .a .bar{grid-column:2;height:6px;border-radius:5px;background:#0b0d1d;border:1.5px solid #000;overflow:hidden}
.achlist .a .bar i{display:block;height:100%;background:linear-gradient(#8ef06a,#3fbf3a)}
.achlist .a .btn{grid-row:1/-1;grid-column:3;padding:6px 12px}
.achlist .a.done{border-color:#ffd23f;background:linear-gradient(90deg,#2a2440,#151935)}
.achlist .a.claimed{opacity:.6}
.achlist .a.claimed .ic{background:#2b8f2f}
/* kalender hadiah harian */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}
.cal div{padding:6px 2px 5px;border-radius:10px;background:#151935;border:2px solid var(--ink);text-align:center}
.cal div small{display:block;font-size:9.5px;color:var(--dim);font-weight:800}
.cal div b{display:block;font-family:'Lilita One';font-weight:400;font-size:15px;margin-top:2px}
.cal div.got{background:#1f3a24;border-color:#2b8f2f;color:#9ff07a}
.cal div.now{background:linear-gradient(#ffe36b,#f2a900);border-color:#6e4b00;color:#4a2e00;transform:scale(1.06)}
.cal div.now small{color:#6b4a00}
.menu-grid button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px 9px;border-radius:14px;background:#151935;border:2px solid var(--ink);font-family:'Lilita One';font-size:14px;position:relative}
.menu-grid button svg{width:34px;height:34px}
.menu-grid button small{font-family:'Jakarta';font-weight:700;font-size:10px;color:var(--dim)}
.bigmap{width:100%;height:auto;aspect-ratio:232/40;display:block;border-radius:12px;border:2.5px solid var(--ink);background:#96d2fa;image-rendering:pixelated}
.dlg.small.wide{width:min(94vw,760px)}
.boat-head{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:'Lilita One';font-weight:400;font-size:15px}
.boat-head svg{width:18px;height:18px}
.online li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#151935;margin-bottom:4px;font-weight:800;font-size:13px}
.online li .lv{width:auto;height:auto;padding:1px 7px;border-radius:7px;font-size:11px;background:#0b0d1d}
.online li .mic{margin-left:auto;width:16px;height:16px;color:#4ade80}
.boat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin-top:6px}
.boat button{padding:8px 10px;border-radius:12px;background:#151935;border:2px solid var(--ink);font-weight:800;font-size:12.5px;display:flex;align-items:center;gap:6px;justify-content:center}
.boat button.here{opacity:.5}
.boat button svg{width:18px;height:18px;flex:none}
.kabar{padding:8px 10px;border-radius:12px;background:#151935;border:2px solid var(--ink);margin-bottom:6px}
.kabar b{display:block;font-family:'Lilita One';font-weight:400;font-size:15px}
.kabar small{color:var(--muted);font-weight:800;font-size:10.5px}
.kabar p{margin:4px 0 0!important}
.maplegend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:11px;font-weight:700;color:var(--muted)}
.maplegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:1.5px solid var(--ink)}
table.odds,table.tiers{width:100%;border-collapse:collapse;font-size:11.5px;margin:6px 0}
table.odds th,table.odds td,table.tiers th,table.tiers td{padding:4px 5px;border-bottom:1px solid rgba(255,255,255,.07);text-align:right;white-space:nowrap}
table.odds th:first-child,table.odds td:first-child,table.tiers th:first-child,table.tiers td:first-child{text-align:left}
table.tiers td.me,table.tiers th.me{background:rgba(255,210,63,.12);color:#ffe9a6}
.sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.rank li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:12px;background:#151935;border:2px solid var(--ink);margin-bottom:6px}
.rank{list-style:none;margin:0;padding:0}
.rank li.me{border-color:var(--yellow)}
.rank .pos{width:26px;text-align:center;font-family:'Lilita One';font-size:17px;color:var(--yellow)}
.rank .rn{flex:1;min-width:0}
.rank .rn b{display:flex;align-items:center;gap:4px;font-size:13px}
.rank .rn b svg{width:14px;height:14px}
.rank .rn span{display:block;font-size:11px;color:var(--dim);font-weight:700}
.rank .rv{font-family:'Lilita One';font-size:15px}
.chatlog{height:min(42vh,240px);overflow-y:auto;overscroll-behavior:contain;padding:6px 8px;border-radius:12px;background:#0f1229;border:2px solid var(--ink);font-size:13px;line-height:1.4}
.chatlog p{margin:2px 0;word-break:break-word}
.chatlog .t{color:var(--muted);font-size:10.5px;margin-right:4px}
.chatlog .sys{color:#7ef0a0}.chatlog .nm{color:#7fd3ff}.chatlog .vip{color:#ffd84a}.chatlog .vvip{color:#9ff3ff}.chatlog .me{color:#c9d2ff}
.chatlog:empty::before{content:'Belum ada obrolan. Sapa dulu!';color:var(--muted);font-weight:700}
.chatrow{display:flex;gap:6px;margin:8px 0 6px}
.chatrow .input{flex:1;min-width:0;padding:8px 10px;font-size:14px}
.chatrow .btn{padding:0 14px;display:flex;align-items:center}
.chatrow .btn svg{width:20px;height:20px}
.qchat{display:flex;flex-wrap:wrap;gap:6px}
.qchat button{padding:8px 12px;border-radius:12px;background:#151935;border:2px solid var(--ink);font-weight:800;font-size:13px}
.input{width:100%;padding:10px 12px;border-radius:12px;border:2.5px solid var(--ink);background:#0f1229;color:#fff;font:inherit;font-weight:700;font-size:15px;-webkit-user-select:text;user-select:text}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.bslot{padding:8px;border-radius:14px;background:#151935;border:2px solid var(--ink);text-align:center}
.bslot.full{border-color:#3cb53d;box-shadow:0 0 0 2px rgba(60,181,61,.25)}
.bslot.locked{opacity:.65}
.bslot b{display:block;font-family:'Lilita One';font-size:17px;font-weight:400}
.bslot span{display:block;font-size:11px;color:var(--dim);font-weight:700}
.bslot .fill{height:7px;margin-top:6px;border-radius:5px;background:#0b0d1d;overflow:hidden}
.bslot .fill i{display:block;height:100%;background:linear-gradient(#8ef06a,#3fbf3a)}
.bslot svg{width:44px;height:44px;margin:0 auto}
.ex{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0}
.ex .num{min-width:90px;text-align:center}
.ex .num b{display:block;font-family:'Lilita One';font-size:30px;line-height:1}
.ex .num span{font-size:11px;color:var(--dim);font-weight:700}
.capbar{height:10px;border-radius:6px;background:#0b0d1d;border:1.5px solid #000;overflow:hidden;margin-top:5px}
.capbar i{display:block;height:100%;background:linear-gradient(#ffe36b,#f2a900)}
ul.reqs{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px}
ul.reqs li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
ul.reqs li svg{width:15px;height:15px}
ul.reqs li.ok{color:#9ff07a}ul.reqs li.no{color:#ff9aa8}
.profile{display:flex;gap:12px;align-items:center}
.profile canvas{width:76px;height:76px;border-radius:18px;background:radial-gradient(circle at 50% 35%,#8bd468,#5fa947 70%);border:2.5px solid var(--ink);image-rendering:pixelated;flex:none}
.empty{color:var(--dim);font-weight:700;text-align:center;padding:10px}
.fps{position:absolute;left:50%;bottom:calc(64px + var(--sb));transform:translateX(-50%);font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:6px}

/* ------------------------------------------------ layar rotasi & splash */
.rotate,.splash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(40,60,120,.94),rgba(10,12,28,.98));pointer-events:auto;text-align:center}
.splash{z-index:60;background:linear-gradient(#2a9df4 0%,#7fd0ff 45%,#ffe9b0 62%,#2f86d6 62.5%,#153f8a 100%);overflow:hidden}
.sp-scene{position:absolute;inset:0;pointer-events:none}
.sp-scene i{position:absolute;display:block}
.sp-sun{left:68%;top:22%;width:90px;height:90px;border-radius:50%;background:#ffe36b;box-shadow:0 0 0 14px rgba(255,236,120,.35),0 0 60px 20px rgba(255,236,120,.55)}
.sp-cloud{top:18%;left:10%;width:160px;height:54px;border-radius:40px;background:#fff;opacity:.95;animation:spdrift 26s linear infinite}
.sp-cloud::before,.sp-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.sp-cloud::before{left:28px;top:-26px;width:64px;height:64px}
.sp-cloud::after{left:76px;top:-16px;width:52px;height:52px}
.sp-cloud.c2{top:30%;left:48%;width:120px;height:42px;animation-duration:38s;animation-delay:-14s;opacity:.85}
@keyframes spdrift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.sp-isle{left:-6%;right:-6%;top:54%;height:16%;background:radial-gradient(ellipse at 50% 100%,#8be257 0 36%,#4db62f 36% 48%,transparent 48.5%)}
.sp-wave{left:-10%;width:120%;top:62%;height:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 26px,transparent 26px 60px);border-radius:6px;opacity:.75;animation:spwave 3.2s ease-in-out infinite}
.sp-wave.w2{top:70%;opacity:.4;animation-duration:4.6s;animation-delay:-1.4s}
@keyframes spwave{50%{transform:translateX(24px)}}
.sp-fish{top:80%;left:20%;width:44px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(12,40,110,.55);animation:spswim 9s linear infinite}
.sp-fish::after{content:'';position:absolute;right:-10px;top:3px;border:7px solid transparent;border-right:12px solid rgba(12,40,110,.55)}
.sp-fish.f2{top:88%;left:60%;width:30px;height:12px;animation-duration:13s;animation-delay:-5s}
@keyframes spswim{from{transform:translateX(0) scaleX(-1)}50%{transform:translateX(60vw) scaleX(-1)}50.1%{transform:translateX(60vw) scaleX(1)}to{transform:translateX(0) scaleX(1)}}
.rot-card,.sp-card{padding:0 28px;max-width:380px;position:relative}
.sp-card{padding:18px 28px 16px;border-radius:22px;background:rgba(14,18,44,.72);border:3px solid rgba(0,0,0,.45);box-shadow:0 8px 0 rgba(0,0,0,.3);backdrop-filter:blur(3px)}
.rot-logo,.sp-logo{font-size:34px;color:var(--yellow);line-height:1;margin-bottom:22px}
.sp-logo{margin-bottom:16px;font-size:36px}
.rot-logo small,.sp-logo small{display:block;font-family:'Jakarta';font-weight:800;font-size:12px;color:var(--muted);letter-spacing:2px;margin-top:6px;text-shadow:none}
.sp-tip{font-size:11.5px;font-weight:700;color:#bfc8ee;margin:0!important}
.sp-tip:empty{display:none}
.phone{position:relative;width:74px;height:126px;margin:0 auto 24px;border-radius:16px;border:4px solid #fff;background:linear-gradient(#5ec8ff,#3a8fd6);box-shadow:0 0 0 4px var(--ink),0 8px 0 rgba(0,0,0,.35);animation:rot 2.4s ease-in-out infinite}
.phone::after{content:'';position:absolute;left:50%;bottom:6px;width:22px;height:4px;margin-left:-11px;border-radius:3px;background:rgba(255,255,255,.75)}
.phone i{position:absolute;left:8px;right:8px;bottom:24px;height:20px;border-radius:4px;background:#b47b46;border-top:6px solid #4db62f}
@keyframes rot{0%,20%{transform:rotate(0)}45%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rot-t{font-size:25px;color:#fff;margin-bottom:8px}
.rot-s{font-size:14px;font-weight:700;color:#dfe5ff;line-height:1.45}
.rot-tip{margin-top:14px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;color:var(--muted);line-height:1.45}
.rot-skip{margin-top:16px;font-size:12px;font-weight:800;color:#8f9bd0;text-decoration:underline}
.load{width:220px;height:12px;margin:0 auto;border-radius:8px;background:#0b0d1d;border:2px solid #000;overflow:hidden}
.load i{display:block;height:100%;width:5%;background:linear-gradient(#ffe36b,#f2a900);transition:width .3s}
.sp-card p{font-size:13px;font-weight:700;color:var(--muted);margin:12px 0}

/* ------------------------------------------------ ukuran kontrol & mode hemat */
.ctl-s{--ctl:.85}
.ctl-l{--ctl:1.15}
.lowfx .chunk{box-shadow:none}
.lowfx .rays{animation:none}

/* ------------------------------------------------ HP tegak (cadangan) */
@media (orientation:portrait){
  .chatbox{top:calc(56px + var(--st) + var(--tg-top));width:min(64vw,300px)}
  .chatbox.min{width:min(70vw,320px)}
  .topc{top:calc(150px + var(--st) + var(--tg-top));max-width:92vw}
  .wallet{flex-direction:column;align-items:flex-end}
  .side-btns{top:calc(92px + var(--st) + var(--tg-top));flex-direction:column}
  .misitrack{display:none}
  .hotbar{bottom:calc(150px + var(--sb) + 40px * (var(--ctl) - 1))}
  .reel{width:calc(100vw - 20px);bottom:calc(150px + var(--sb) + 40px * (var(--ctl) - 1))}
  .bossbar{width:min(90vw,320px)}
  .card{flex-direction:column;text-align:center;width:min(92vw,300px)}
  .card .fname{white-space:normal}
  .rew{justify-content:center}
  .catch{padding-bottom:0}
}
@media (orientation:landscape) and (max-height:430px){
  #who{padding:3px 10px 4px 3px}
  .lv{width:30px;height:30px;font-size:16px}
  .chatbox{top:calc(50px + var(--st) + var(--tg-top))}
  .console{font-size:10.5px}
  .side-btns{top:calc(52px + var(--st) + var(--tg-top))}
  .misitrack{top:calc(96px + var(--st) + var(--tg-top))}
  .sq{width:38px;height:38px}
  .sq svg{width:21px;height:21px}
  .zone .z1{font-size:21px}
  .chatbox{width:min(38vw,320px)}
  .chatbox.min{width:min(38vw,300px)}
  .card{padding:20px 12px 10px}
  .card-l{width:140px;height:84px}
  .card .fimg{width:132px;height:76px}
  .card .fname{font-size:20px}
  .rays{width:470px;height:470px;margin:-270px 0 0 -235px}
  .lu-n{font-size:60px}
}
@media (max-width:720px){
  .me-name{max-width:104px}
  .topc{max-width:40vw}
  .wx small{display:none} /* efek cuaca tetap ada di panel Info; pil dibikin pendek biar tidak nabrak tombol mic */
  .wx .tm{display:none}
  .wx b{font-size:14px}
  .chatbox{width:min(36vw,290px)}
  .chatbox.min{width:min(38vw,290px)}
  .console{font-size:10px}
  .chatlog{height:min(30vh,170px)}
  /* HP kecil: hotbar & tombol kanan diciutkan supaya LOMPAT tidak menimpa slot Peta */
  .hotbar{gap:3px;padding:3px}
  .slot{width:calc(42px * var(--ctl));height:calc(42px * var(--ctl))}
  .slot .lb{font-size:8.5px}
  .slot .cnt{font-size:9.5px;min-width:16px;padding:0 4px}
  .act{width:calc(74px * var(--ctl));height:calc(74px * var(--ctl))}
  .act span{font-size:calc(11.5px * var(--ctl))}
  .jump{width:calc(52px * var(--ctl));height:calc(52px * var(--ctl))}
  .pad-r{gap:8px}
  .joy{--js:calc(104px * var(--ctl))}
  .reel{width:min(48vw,400px)}
}
@media (min-width:900px) and (min-height:600px){
  .me-name{font-size:16px}
  .chatbox{width:320px}
  .console{font-size:12px}
}

/* ===== ikan Abadi (Naga Samudra): aura cyan-ungu-emas yang "menyala" ===== */
@keyframes abadiHue{to{filter:hue-rotate(360deg)}}
@keyframes abadiGlow{0%,100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 26px rgba(95,247,255,.85),0 0 60px rgba(139,92,246,.5);border-color:#5ff7ff}50%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 40px rgba(192,132,252,.9),0 0 90px rgba(255,216,74,.45);border-color:#ffd84a}}
@keyframes abadiImg{0%,100%{filter:drop-shadow(0 0 10px rgba(95,247,255,.95)) drop-shadow(0 0 26px rgba(139,92,246,.6));transform:scale(1.06)}50%{filter:drop-shadow(0 0 16px rgba(255,216,74,.9)) drop-shadow(0 0 34px rgba(95,247,255,.7));transform:scale(1.1)}}
@keyframes abadiShine{to{background-position:200% 0}}
@keyframes abadiPulse{0%,100%{box-shadow:0 0 0 0 rgba(95,247,255,.0),0 3px 0 rgba(0,0,0,.3)}50%{box-shadow:0 0 18px 2px rgba(95,247,255,.55),0 3px 0 rgba(0,0,0,.3)}}
.abadi-grad,.ribbon.abadi,.tag.abadi{background:linear-gradient(90deg,#5ff7ff,#c084fc,#ffd84a,#5ff7ff);background-size:200% 100%;animation:abadiShine 3s linear infinite;color:#1b0b3a}
.catch.abadi .rays{opacity:.75;background:repeating-conic-gradient(from 0deg,#5ff7ff 0deg 8deg,transparent 8deg 16deg,#c084fc 16deg 24deg,transparent 24deg 32deg,#ffd84a 32deg 40deg,transparent 40deg 48deg);animation:spin 9s linear infinite;width:760px;height:760px;margin:-380px 0 0 -380px}
.catch.abadi .card{background:radial-gradient(ellipse at 50% 0%,#2a3d7a,#1b1f4a 55%,#12102e);animation:pop .35s cubic-bezier(.2,1.6,.4,1),abadiGlow 2.4s ease-in-out infinite}
.catch.abadi .ribbon{background:linear-gradient(90deg,#5ff7ff,#c084fc,#ffd84a,#5ff7ff);background-size:200% 100%;animation:abadiShine 2.5s linear infinite;color:#1b0b3a;font-size:19px;letter-spacing:1px}
.catch.abadi .ttl{color:#9ffcff;text-shadow:0 0 12px rgba(95,247,255,.8)}
.catch.abadi .fimg{animation:abadiImg 2.2s ease-in-out infinite}
.catch.abadi .fname{background:linear-gradient(90deg,#9ffcff,#e9b8ff,#ffe9a6,#9ffcff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(95,247,255,.55));animation:abadiShine 3s linear infinite;font-size:26px}
.catch.abadi .chip.share{background:linear-gradient(90deg,#8b5cf6,#38e8ff);color:#0b1b2c}
.toast.abadi{border-color:#5ff7ff;background:linear-gradient(90deg,rgba(40,12,90,.96),rgba(10,70,100,.96));color:#e6fcff;font-size:13.5px;animation:tin .25s,abadiPulse 1.6s ease-in-out infinite}
.console .abadi,.chatlog .abadi,b.abadi{color:#9ffcff;text-shadow:0 0 8px rgba(95,247,255,.6)}
.wx.naga{background:linear-gradient(90deg,rgba(40,12,90,.95),rgba(10,70,100,.95));border-color:#5ff7ff;animation:abadiPulse 1.8s ease-in-out infinite}
.wx.naga small{color:#9ffcff}
.cell.abadi{border-color:#5ff7ff;background:linear-gradient(#1b2a5a,#151935);animation:abadiPulse 2.4s ease-in-out infinite}
.cell.abadi.unk img{filter:drop-shadow(0 0 6px rgba(95,247,255,.6))}
.row.abadi,.box.abadi{border-color:#5ff7ff;background:linear-gradient(90deg,#1b2a5a,#151935)}
.box.abadi h4{color:#9ffcff}
.reel.abadi{border-color:#5ff7ff;animation:abadiPulse 1.2s ease-in-out infinite}

/* ---- edisi terbatas: Joran Mutiara Hitam (obsidian + kilau nacre pastel). Kelas: lim-*, .pearl, .mutiara ---- */
:root{--nacre:linear-gradient(90deg,#fff3c9,#ffd1f0,#c8fff0,#cfe4ff,#e8d7ff,#fff3c9)}
@keyframes nacreShine{to{background-position:200% 0}}
@keyframes nacreSpin{to{transform:rotate(360deg)}}
@keyframes pearlPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,215,255,0),0 3px 0 rgba(0,0,0,.3)}50%{box-shadow:0 0 16px 2px rgba(232,215,255,.55),0 3px 0 rgba(0,0,0,.3)}}
@keyframes pearlGlow{0%,100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 24px rgba(232,215,255,.7),0 0 56px rgba(255,209,240,.35);border-color:#e8d7ff}50%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 36px rgba(200,255,240,.8),0 0 80px rgba(207,228,255,.4);border-color:#c8fff0}}
@keyframes pearlFloat{50%{transform:translateY(-3px)}}
.nacre-text{background:var(--nacre);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nacreShine 4s linear infinite}
.lim-teaser{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 8px;padding:7px 10px;border-radius:14px;border:2px solid var(--ink);background:linear-gradient(100deg,#1a1526,#2a2140 60%,#1a1526);color:#f3ecff;text-align:left;cursor:pointer;position:relative;overflow:hidden;animation:pearlPulse 3s ease-in-out infinite}
.lim-teaser::before{content:'';position:absolute;inset:0;border-radius:12px;padding:2px;background:var(--nacre);background-size:200% 100%;animation:nacreShine 4s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
.lim-teaser i{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff 0 12%,#e8d7ff 16%,#4a3d5e 42%,#1a1526 100%);box-shadow:0 0 10px rgba(232,215,255,.7);animation:pearlFloat 2.4s ease-in-out infinite}
.lim-teaser .lt-t{flex:1;min-width:0;display:flex;flex-direction:column}
.lim-teaser b{font-family:'Lilita One';font-weight:400;font-size:14px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lim-teaser small{font-size:10.5px;font-weight:800;color:#c9bfe6}
.lim-teaser em{flex:none;font-style:normal;font-family:'Lilita One';font-size:13px;padding:3px 9px 4px;border-radius:9px;background:var(--nacre);background-size:200% 100%;animation:nacreShine 4s linear infinite;color:#1a1526}
.lim-teaser.owned small{color:#c8fff0}.lim-teaser.soldout{animation:none;opacity:.85}.lim-teaser.soldout em{background:#3a3450;color:#c9bfe6;animation:none}
.lim-card{position:relative;margin:6px 0 8px;padding:3px;border-radius:20px;overflow:hidden;isolation:isolate;background:#0f0c1a}
.lim-card::before{content:'';position:absolute;left:50%;top:50%;width:260%;padding-top:260%;margin:-130% 0 0 -130%;background:conic-gradient(from 0deg,#fff3c9,#ffd1f0,#c8fff0,#cfe4ff,#e8d7ff,#fff3c9);animation:nacreSpin 7s linear infinite;z-index:-1}
.lim-card.soldout::before{animation-duration:20s;opacity:.55}
.lim-ribbon{position:relative;text-align:center;font-family:'Lilita One';font-size:12px;letter-spacing:1.2px;padding:4px 10px 3px;border-radius:17px 17px 0 0;background:#1a1526;color:transparent;background-image:var(--nacre);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:nacreShine 4s linear infinite}
.lim-ribbon::before{content:'';position:absolute;inset:0;border-radius:17px 17px 0 0;background:#1a1526;z-index:-1}
.lim-body{display:flex;gap:12px;padding:8px 12px 10px;border-radius:0 0 17px 17px;background:radial-gradient(ellipse at 20% 0%,#2a2140,#13101f 60%,#0d0a16)}
.lim-prev{flex:none;position:relative;width:150px;height:150px;border-radius:16px;overflow:hidden;border:2px solid #3a3450;box-shadow:0 0 24px rgba(232,215,255,.25),inset 0 0 30px rgba(0,0,0,.6);background:#0d0a16}
.lim-prev canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.lim-price{position:absolute;left:7px;top:7px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 4px;border-radius:9px;background:rgba(26,21,38,.92);border:1.5px solid #e8d7ff;color:#fff3c9;font-family:'Lilita One';font-size:14px}
.lim-price svg{width:14px;height:14px}
.lim-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.lim-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lim-head>div:first-child{min-width:0;display:flex;flex-direction:column;gap:4px}
.lim-name{display:block;font-family:'Lilita One';font-weight:400;font-size:22px;line-height:1.05;letter-spacing:.3px;background:var(--nacre);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nacreShine 4s linear infinite;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7))}
.lim-status{display:inline-block;align-self:flex-start;font-family:'Jakarta';font-weight:800;font-size:10.5px;letter-spacing:.6px;padding:3px 8px;border-radius:7px;background:#2a2140;color:#f3ecff;border:1.5px solid #e8d7ff}
.lim-status.ok{background:#1f4d3a;border-color:#c8fff0;color:#c8fff0}.lim-status.out{background:#3a2430;border-color:#ff9bb0;color:#ffb8c8}
.lim-desc{margin:0 !important;font-size:12px;line-height:1.4;color:#d9d0f0 !important}
.lim-perks{margin-top:0}.lim-perks span{background:rgba(232,215,255,.12);color:#f3ecff;border:1px solid rgba(232,215,255,.35)}
.lim-perks span.soft{background:transparent;color:#c9bfe6;border-style:dashed}
.lim-slots{display:flex;gap:6px;margin-top:2px}
.lim-slots .ls{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-radius:11px;background:rgba(0,0,0,.35);border:1.5px solid #3a3450}
.lim-slots .ls i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.35),rgba(60,52,80,.6) 55%,#1a1526);border:1.5px dashed #6b5f8a}
.lim-slots .ls.sold i{border:none;background:radial-gradient(circle at 35% 32%,#fff 0 12%,#e8d7ff 16%,#4a3d5e 42%,#1a1526 100%);box-shadow:0 0 10px rgba(232,215,255,.7)}
.lim-slots .ls b{font-family:'Jakarta';font-weight:800;font-size:10.5px;color:#f3ecff}
.lim-slots .ls span{font-size:9.5px;font-weight:700;color:#8f84ad;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lim-slots .ls.sold span{color:#d9d0f0}.lim-slots .ls.free b{color:#8f84ad}
.lim-slots .ls.mine{border-color:#c8fff0;background:rgba(200,255,240,.12)}.lim-slots .ls.mine span{color:#c8fff0}
.lim-cta{flex:none;display:flex;align-items:center;margin-top:2px}
.btn.pearl{background:linear-gradient(#3a3450,#1a1526);color:#f3ecff;border-color:#e8d7ff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18),0 0 14px rgba(232,215,255,.45);position:relative;overflow:hidden}
.btn.pearl::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 2.6s ease-in-out infinite}
.btn.pearl.big{font-size:17px;padding:9px 16px 11px}
.tag.pearl{background:linear-gradient(#3a3450,#1a1526);color:#f3ecff;border-color:#e8d7ff;box-shadow:0 0 8px rgba(232,215,255,.45)}
.tag.soldout{background:#3a2430;color:#ffb8c8;border-color:#ff9bb0;letter-spacing:1px}
.box.pearl{border-color:#e8d7ff;background:linear-gradient(100deg,#2a2140,#151935)}.box.pearl h4{color:#e8d7ff}
.toast.mutiara{border-color:#e8d7ff;background:linear-gradient(90deg,rgba(26,21,38,.97),rgba(58,52,80,.97));color:#f3ecff;font-size:13.5px;animation:tin .25s,pearlPulse 1.8s ease-in-out infinite}
.console .mutiara,.chatlog .mutiara,b.mutiara{color:#e8d7ff;text-shadow:0 0 8px rgba(232,215,255,.7)}
.catch.mutiara .card{background:radial-gradient(ellipse at 50% 0%,#3a3450,#1a1526 60%,#0d0a16);animation:pop .35s cubic-bezier(.2,1.6,.4,1),pearlGlow 2.6s ease-in-out infinite}
.catch.mutiara .rays{opacity:.5;background:repeating-conic-gradient(from 0deg,#e8d7ff 0deg 8deg,transparent 8deg 18deg,#ffd1f0 18deg 26deg,transparent 26deg 36deg,#c8fff0 36deg 44deg,transparent 44deg 54deg);animation:spin 14s linear infinite}
.catch.mutiara .ttl{color:#e8d7ff;text-shadow:0 0 10px rgba(232,215,255,.7)}
.lim-cert{display:flex;gap:12px;align-items:center}
.lim-cert canvas{flex:none;width:150px;height:150px;border-radius:16px;border:2px solid #e8d7ff;box-shadow:0 0 24px rgba(232,215,255,.45);image-rendering:pixelated}
.lim-cert .lc-r{flex:1;min-width:0}
.lc-serial{display:flex;align-items:baseline;gap:8px;font-family:'Lilita One';font-size:44px;line-height:1;margin-top:4px;background:var(--nacre);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nacreShine 4s linear infinite;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7))}
.lc-serial small{font-size:14px;font-family:'Jakarta';font-weight:800;color:#c9bfe6;-webkit-text-fill-color:#c9bfe6}
@media (orientation:portrait),(max-width:560px){
  .lim-body{flex-direction:column;align-items:center;text-align:center}
  .lim-info{align-items:center;width:100%}
  .lim-status{align-self:center}
  .lim-perks{justify-content:center}
  .lim-head{flex-direction:column;align-items:center}
  .lim-cert{flex-direction:column;text-align:center}
  .lc-serial{justify-content:center}
}

/* ===== trade 2 panel ala Growtopia: tawaran kamu vs tawaran dia, slot + checkmark ===== */
.gtrade{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;padding:calc(6px + var(--st) + var(--tg-top)) calc(8px + var(--sr)) calc(6px + var(--sb)) calc(8px + var(--sl));--gs:52px;background:linear-gradient(rgba(5,9,26,.6),rgba(5,9,26,.12) 30%,rgba(5,9,26,0) 45%,rgba(5,9,26,.12) 60%,rgba(5,9,26,.66));-webkit-user-select:none;user-select:none;touch-action:manipulation}
.gtrade[hidden]{display:none}
.gtrade>*{width:100%;max-width:1040px;margin-left:auto;margin-right:auto}
.gt-on .hud{visibility:hidden}
.gt-on #panel{z-index:27}
.gt-top{display:flex;align-items:stretch;gap:8px;flex:none}
.gt-box{flex:none;display:flex;flex-direction:column;gap:3px;padding:5px;border-radius:7px;background:rgba(30,48,104,.9);border:2px solid #9bbcff;box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.45)}
.gt-box.flash{animation:gtflash .55s 2}
@keyframes gtflash{50%{border-color:#ffd23f;box-shadow:0 0 16px rgba(255,210,63,.85)}}
.gt-slots{display:flex;gap:4px}
.gt-cap{font-size:11px;font-weight:800;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--gs) * 4 + 12px);padding:0 2px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
.gt-stage{flex:1 1 0;min-width:0;position:relative}
.gt-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.gt-s{position:relative;flex:none;width:var(--gs);height:var(--gs);padding:0;border-radius:6px;background:linear-gradient(#2e4a8c,#1d2f62);border:2px solid #6f93dd;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;cursor:pointer}
.gt-s.empty{background:linear-gradient(#233a74,#182852);border-color:#4f6eb0}
.gt-s img{width:80%;height:80%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.gt-s .gt-svg{width:68%;height:68%;pointer-events:none}
.gt-s .gt-emo{font-size:calc(var(--gs) * .5);line-height:1;pointer-events:none}
.gt-n{position:absolute;right:3px;bottom:1px;font-style:normal;font-size:12px;font-weight:800;color:#fff;line-height:1;pointer-events:none;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 0 #000}
.gt-s.on{border-color:#ffd23f;box-shadow:0 0 0 2px rgba(255,210,63,.6),inset 0 0 12px rgba(255,210,63,.4)}
.gt-s:active{transform:translateY(1px)}
.gt-ck{position:absolute;right:-5px;top:-7px;width:64%;height:64%;color:#ffe14d;pointer-events:none;filter:drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.gt-mid{display:flex;align-items:center;gap:8px;margin-top:6px;flex:none}
.gt-b{flex:none;min-width:100px;padding:6px 16px 8px;border-radius:8px;border:2px solid rgba(0,0,0,.7);font-family:'Lilita One';font-size:18px;letter-spacing:.3px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.4)}
.gt-b:active{transform:translateY(2px)}
.gt-b.red{background:linear-gradient(#ff6b6b,#d02b2b)}
.gt-b.green{background:linear-gradient(#7fe873,#2c9c3a)}
.gt-b.green.on{background:linear-gradient(#5f9d58,#2f6630);color:#d6ffcf}
.gt-b.blue{background:linear-gradient(#6f9df6,#2f5fc6);min-width:0;font-size:15px;padding:6px 12px 7px}
.gt-b:disabled{opacity:.55;filter:grayscale(.35)}
.gt-msg{flex:0 1 auto;min-width:0;margin:0 auto;padding:4px 12px 5px;border-radius:10px;background:rgba(10,14,36,.72);text-align:center;font-size:12.5px;font-weight:800;color:#fff;line-height:1.25;text-shadow:0 1px 0 #000}
.gt-msg.ok{color:#a6f796}
.gt-msg.bad{color:#ffa3a3}
.gt-gap{flex:1 1 auto;min-height:4px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.gt-chat{position:absolute;left:0;bottom:4px;max-width:min(46vw,360px);font-size:11px;line-height:1.38;font-weight:700;pointer-events:auto;text-shadow:-1px -1px 0 rgba(0,0,0,.85),1px -1px 0 rgba(0,0,0,.85),-1px 1px 0 rgba(0,0,0,.85),1px 1px 0 rgba(0,0,0,.85)}
.gt-chat p{margin:0;overflow-wrap:break-word}
.gt-chat .sys{color:#7ef0a0}.gt-chat .nm{color:#7fd3ff}.gt-chat .gold{color:#ffd84a}.gt-chat .bad{color:#ff9aa8}
.gt-bot{display:flex;gap:6px;flex:none;padding:5px;border-radius:7px;background:rgba(30,48,104,.92);border:2px solid #9bbcff;box-shadow:0 3px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.45)}
.gt-inv{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gt-sel{font-size:11px;font-weight:800;color:#dfe9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:14px;padding:0 2px;text-shadow:0 1px 0 #000}
.gt-sel b{color:#ffd84a}
.gt-grid{display:grid;grid-template-columns:repeat(auto-fill,var(--gs));gap:4px;max-height:calc(var(--gs) * 2 + 4px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding-right:2px}
.gt-side{flex:none;display:flex;flex-direction:column;justify-content:center;gap:6px}
.gt-qh{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.gt-qh .gt-s{--gs:56px;cursor:default}
.gt-qh b{display:block;font-family:'Lilita One';font-weight:400;font-size:17px}
.gt-qh small{font-size:11.5px;color:var(--dim);font-weight:700}
.gt-qb{display:flex;flex-wrap:wrap;gap:6px}
.gt-qb .btn{font-size:13px;padding:5px 12px 7px}
.gt-conf h4{margin:6px 0 4px !important}
.gt-conf h4.give{color:#ffb36b}
.gt-conf h4.get{color:#8ef06a}
.gt-cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.gt-cl li{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13px}
.gt-cl .gt-s{--gs:38px;cursor:default}
.gt-none{margin:2px 0 !important}
.gt-warn{color:#ffd84a !important;font-weight:800}
.btn.red,.btn.bad{background:linear-gradient(#ff7a7a,#d63a3a)}
.tradeask{display:flex;align-items:center;gap:7px;padding:5px 6px 5px 8px;border-radius:13px;background:rgba(22,40,30,.94);border:2.5px solid var(--ink);box-shadow:0 0 0 2px rgba(255,210,63,.55),0 3px 0 rgba(0,0,0,.3);animation:tin .25s;pointer-events:auto}
.tradeask[hidden]{display:none}
.tradeask .ta-ic svg{width:24px;height:24px;display:block}
.tradeask .ta-t{font-size:12px;font-weight:800;color:#e6ffe0;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.tradeask .ta-t b{color:#ffd84a}
.tradeask .ta-ok{padding:4px 11px 6px;border-radius:9px;border:2px solid var(--ink);background:linear-gradient(#7fe873,#2c9c3a);color:#fff;font-family:'Lilita One';font-size:14px}
.tradeask .ta-no{width:28px;height:28px;border-radius:9px;border:2px solid var(--ink);background:#3a2030;color:#ffb3b3;font-weight:900;font-size:13px}
@media (orientation:landscape) and (max-height:430px){.gtrade{--gs:46px}.gt-b{min-width:86px;font-size:16px;padding:4px 12px 6px}.gt-b.blue{font-size:13px;padding:5px 9px 6px}.gt-cap{font-size:10.5px}.gt-msg{font-size:11.5px}}
@media (orientation:landscape) and (max-height:340px){.gtrade{--gs:40px}.gt-sel{display:none}}
@media (orientation:portrait),(max-width:560px){.gtrade{--gs:min(46px,calc((100vw - 52px) / 8.7))}.gt-top{flex-wrap:wrap;row-gap:6px}.gt-stage{order:-1;flex:1 1 100%;height:84px}.gt-box{flex:1 1 0;min-width:0}.gt-cap{max-width:100%}.gt-grid{max-height:calc(var(--gs) * 3 + 8px)}.gt-b{min-width:84px}.gt-chat{max-width:80vw}}
@media (min-width:900px) and (min-height:600px){.gtrade{--gs:58px}.gt-grid{max-height:calc(var(--gs) * 3 + 8px)}.gt-cap{font-size:12px}}
@media (orientation:portrait){.trade2{flex-direction:column}}

/* ===== Hujan Kerang: banner event di HUD ===== */
.rainpill{padding:4px 10px 6px;text-align:center;background:linear-gradient(180deg,rgba(30,60,110,.92),rgba(16,32,66,.92));border:2px solid #5aa9ff;border-radius:12px}
.rainpill b{font-size:13px;color:#9fd8ff}
.rainpill span{font-size:13px;font-weight:800;color:#fff;margin-left:6px}
.rainpill small{display:block;font-size:10px;color:#cfe8ff;margin-top:1px}

/* ---- khusus developer: Joran Api Merona (pink menyala + merah api merona). Kelas: .dev, .merona ---- */
@keyframes meronaShine{to{background-position:200% 0}}
@keyframes meronaGlow{0%,100%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 26px rgba(255,45,149,.8),0 0 60px rgba(255,59,59,.4);border-color:#ff2d95}50%{box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 8px 0 rgba(0,0,0,.35),0 0 40px rgba(255,59,59,.9),0 0 90px rgba(255,45,149,.45);border-color:#ff3b3b}}
@keyframes meronaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,149,0),0 3px 0 rgba(0,0,0,.3)}50%{box-shadow:0 0 18px 2px rgba(255,45,149,.6),0 3px 0 rgba(0,0,0,.3)}}
.tag.dev{background:linear-gradient(90deg,#ff2d95,#ff3b3b,#ff2d95);background-size:200% 100%;animation:meronaShine 3s linear infinite;color:#fff;border-color:#4a0020;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.row.dev{border-color:#ff2d95;background:linear-gradient(90deg,#4a0a2a,#151935 70%);animation:meronaPulse 2.6s ease-in-out infinite}
.toast.merona{border-color:#ff2d95;background:linear-gradient(90deg,rgba(90,8,46,.97),rgba(120,20,30,.97));color:#ffe3f1;font-size:13.5px;animation:tin .25s,meronaPulse 1.6s ease-in-out infinite}
.console .merona,.chatlog .merona,b.merona{color:#ff8fd0;text-shadow:0 0 8px rgba(255,45,149,.7)}
.catch.merona .card{background:radial-gradient(ellipse at 50% 0%,#7a0f3f,#3a0a22 60%,#1a0612);animation:pop .35s cubic-bezier(.2,1.6,.4,1),meronaGlow 2.2s ease-in-out infinite}
.catch.merona .rays{opacity:.6;background:repeating-conic-gradient(from 0deg,#ff2d95 0deg 8deg,transparent 8deg 18deg,#ff3b3b 18deg 26deg,transparent 26deg 36deg,#ffe066 36deg 42deg,transparent 42deg 54deg);animation:spin 12s linear infinite}
.catch.merona .ttl{color:#ff8fd0;text-shadow:0 0 10px rgba(255,45,149,.8)}
.catch.merona .fname{background:linear-gradient(90deg,#ff8fd0,#ffe066,#ff6a6a,#ff8fd0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7));animation:meronaShine 3s linear infinite}
/* ---- warna karakter, rumah, pesanan ikan, emot ---- */
.tag.gold{background:#ffd23f;color:#4a2e00}
.rt b .tag.jb{display:inline-block;margin:0 0 0 4px;font-family:'Jakarta',sans-serif;vertical-align:2px}
.look-pick{display:flex;gap:12px;align-items:flex-start}
.look-pick canvas{width:96px;height:96px;flex:none;border-radius:18px;background:radial-gradient(circle at 50% 35%,#8bd468,#5fa947 70%);border:2.5px solid var(--ink);image-rendering:pixelated}
.look-rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.look-row>span{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:3px}
.sw-row{display:flex;flex-wrap:wrap;gap:6px}
.swatch{width:28px;height:28px;border-radius:9px;border:2.5px solid var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);padding:0}
.swatch.on{outline:3px solid #ffd23f;outline-offset:1px}
.house-wrap{display:flex;justify-content:center;margin:2px 0 4px}
.house-cv{border-radius:14px;border:2.5px solid var(--ink);display:block;max-width:100%}
.house-foot{display:flex;justify-content:flex-end;margin-top:8px}
.house-foot .btn svg,.profile .btn svg{width:18px;height:18px;vertical-align:-4px;margin-right:4px}
.row.order .rt span.gold{color:#ffd84a;font-weight:800}
.row.order .rdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rc);margin-right:5px}
.row.order.done{opacity:.62}
.qchat.emotes{margin-top:6px}
.qchat.emotes button{background:#2a2350}
.qchat.emotes button.locked{opacity:.7}
/* ---- Kompleks Perumahan: bar mode dekor, Toko Mebel, pilihan ukuran tanah, tema rumah ---- */
.act.decor{background:radial-gradient(circle at 50% 35%,#e6cfff,#a874ff 60%,#7445d6);color:#fff}
.decorbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--sb));display:flex;align-items:center;gap:5px;padding:5px 6px;border-radius:15px;width:max-content;max-width:min(calc(100vw - 330px),660px);background:rgba(22,26,58,.94);border:2.5px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 3px 0 rgba(0,0,0,.3)}
.decorbar .db-head{flex:none;display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:800;color:var(--muted);line-height:1.15;padding:0 2px}
.decorbar .db-head b{font-family:'Lilita One';font-weight:400;font-size:13px;color:#e6cfff;letter-spacing:.3px}
.db-strip{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding:5px 3px 1px;touch-action:pan-x}
.db-strip::-webkit-scrollbar{display:none}
.db-it{position:relative;flex:none;width:46px;height:46px;border-radius:10px;background:linear-gradient(#fff6df,#e6d2aa);border:2px solid #05060e;display:grid;place-items:center;padding:0}
.db-it img{width:38px;height:38px}
.db-it small{position:absolute;right:-5px;top:-6px;min-width:17px;padding:0 4px;border-radius:9px;background:var(--yellow);color:#4a2e00;border:2px solid var(--ink);font-size:9.5px;font-weight:800;line-height:1.3;text-align:center}
.db-it.on{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,210,63,.45),inset 0 0 10px rgba(255,210,63,.3)}
.db-b{flex:none;height:42px;padding:0 10px;border-radius:10px;border:2px solid var(--ink);background:#2f3770;color:#fff;font-family:'Lilita One';font-size:13px;letter-spacing:.2px;white-space:nowrap}
.db-b.on{background:#6a4bc4;border-color:#e6cfff}
.db-b.bad{background:#8a2c3a}
.db-b.done{background:linear-gradient(#7be36e,#3cb53d);color:#0f3a10}
.db-msg{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#dfe5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.db-msg img{width:34px;height:34px;flex:none}
.db-msg b{font-family:'Lilita One';font-weight:400;font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.furn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px}
.fcard{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 5px 8px;border-radius:12px;background:#151935;border:2px solid var(--ink);text-align:center;min-width:0}
.fcard img{width:64px;height:64px}
.fcard b{font-family:'Lilita One';font-weight:400;font-size:13.5px;line-height:1.15;letter-spacing:.2px}
.fcard small{font-size:10px;color:var(--dim);font-weight:700}
.fcard .own{font-size:10px;color:#8ef06a;font-weight:800}
.fcard .fc-r{margin-top:auto;padding-top:5px}
.fcard .btn{font-size:13px;padding:5px 10px 7px}
.fcard .btn svg{width:15px;height:15px}
.size-opts{display:flex;gap:8px;margin:2px 0 4px}
.size-opt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 6px 8px;border-radius:14px;background:#151935;border:2.5px solid var(--ink);color:#dfe5ff;text-align:center}
.size-opt b{font-family:'Lilita One';font-weight:400;font-size:17px;color:#fff}
.size-opt span{font-size:10.5px;font-weight:700;color:var(--muted)}
.size-opt em{font-style:normal;margin-top:4px;font-family:'Lilita One';font-size:15px;color:#ffd84a;display:flex;align-items:center;gap:3px}
.size-opt em svg{width:15px;height:15px}
.size-opt em.no{color:#ff8a8a}
.size-opt.on{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,210,63,.35),inset 0 0 14px rgba(255,210,63,.18)}
.theme-row{display:flex;flex-wrap:wrap;gap:7px}
.theme-it{width:84px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 7px;border-radius:12px;background:#151935;border:2px solid var(--ink);color:#dfe5ff}
.theme-it img{width:56px;height:56px}
.theme-it small{font-size:10px;font-weight:800;line-height:1.15}
.theme-it em{font-style:normal;font-size:10.5px;color:#ffd84a;font-weight:800;display:flex;align-items:center;gap:2px}
.theme-it em.ok{color:#8ef06a}
.theme-it em svg{width:12px;height:12px}
.theme-it.on{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,210,63,.35)}
.theme-it.locked img{opacity:.5;filter:grayscale(.4)}
.est-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.est-btns .btn svg{width:18px;height:18px}
.est-sizes{width:100%;border-collapse:collapse;margin:6px 0;font-size:12px}
.est-sizes th,.est-sizes td{padding:4px 6px;border-bottom:1px solid #2b3160;text-align:center}
.est-sizes th{font-family:'Lilita One';font-weight:400;font-size:13px;color:#fff}
.est-sizes td:first-child{text-align:left;color:var(--muted);font-weight:800}
@media (max-width:720px){.decorbar{max-width:calc(100vw - 290px)}.db-b{height:38px;padding:0 8px;font-size:12px}.db-it{width:42px;height:42px}.db-it img{width:34px;height:34px}}
@media (orientation:portrait){.decorbar{bottom:calc(150px + var(--sb) + 40px * (var(--ctl) - 1));max-width:94vw}}
@media (max-width:420px){.size-opts{flex-direction:column}}
/* dunia sandbox (bar barang, panel Tas/Racik/Toko/Resep, mesin) */
.dunbar .dn-ic{font-size:22px;line-height:1}
.dunbar .db-it{border-radius:6px;background:linear-gradient(#2e4a8c,#1d2f62);border:2px solid #6f93dd;box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.dunbar .db-it.on{background:linear-gradient(#36549c,#22366e);border-color:#ffd23f;box-shadow:0 0 0 2px rgba(255,210,63,.6),inset 0 0 12px rgba(255,210,63,.4)}
.dunbar .db-it small{right:2px;bottom:0;top:auto;min-width:0;padding:0;border:0;background:none;color:#fff;font-size:11px;line-height:1.2;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
.dn-inv{display:flex;flex-direction:column;gap:8px;--gs:52px}
.dn-inv .dn-grid{max-height:none;overflow:visible;padding:6px;border-radius:8px;background:rgba(30,48,104,.6);border:2px solid #4f6eb0}
.dn-det{padding:8px 10px;border-radius:10px;background:#151935;border:2px solid var(--ink);min-height:58px}
.dn-det .gt-qh{margin:0}
.dn-det-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px}
.dn-det-b .btn{font-size:14px;padding:5px 16px 7px}
.dn-det-b .gt-b{min-width:0;font-size:14px;padding:5px 12px 7px}
.dn-head{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted);font-weight:700;margin:0 0 8px}
.dn-head b{color:#ffd84a}
.dn-rc{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:12px;background:#151935;border:2px solid var(--ink);margin-bottom:6px}
.dn-rc-out{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.dn-rc-out img{width:44px;height:44px}
.dn-rc-out b{font-family:'Lilita One';font-weight:400;font-size:12.5px;line-height:1.1}
.dn-rc-in{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;font-weight:800}
.dn-rc-in span{display:flex;align-items:center;gap:3px}
.dn-rc-in img{width:24px;height:24px;flex:none}
.dn-rc-in .ok{color:#8ef06a}
.dn-rc-in .no{color:#ff8a8a}
.dn-rc-b{flex:none;display:flex;flex-direction:column;gap:4px}
.dn-rc-b .btn{font-size:13px;padding:5px 12px 7px}
.dn-sp{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.dn-sp-r{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:10px;background:#151935;border:2px solid var(--ink);font-size:11px;font-weight:800;min-width:0}
.dn-sp-r i{font-style:normal;color:var(--muted);font-family:'Lilita One';font-size:14px}
.dn-chip{display:flex;align-items:center;gap:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-chip img{width:24px;height:24px;flex:none}
.dn-chip b{color:#ffd84a;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.dn-go{display:flex;gap:6px;margin:8px 0 4px}
.dn-go .input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:1px}
.dn-wlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.dn-wchip{display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border-radius:10px;background:#151935;border:2px solid var(--ink);color:#fff;text-align:left}
.dn-wchip b{font-family:'Lilita One';font-weight:400;font-size:14px;letter-spacing:.5px}
.dn-wchip small{font-size:10px;color:var(--dim);font-weight:700}
.dn-wchip.here{border-color:var(--yellow)}
.dn-pick{display:flex;flex-wrap:wrap;gap:6px;max-height:168px;overflow:auto;padding:6px 4px 2px}
.dn-sign{font-size:15px;line-height:1.45;background:#fffdf3;color:#2a2140;padding:10px 12px;border-radius:12px;border:2.5px solid var(--ink);word-break:break-word;font-weight:700}
.dn-info{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0}
.dn-info td{padding:4px 6px;border-bottom:1px solid #2b3160;vertical-align:top}
.dn-info td:first-child{color:var(--muted);font-weight:800;width:38%}
.dn-info-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dn-info-h img{width:52px;height:52px;flex:none}
.dn-info-h b{display:block;font-family:'Lilita One';font-weight:400;font-size:17px}
.dn-info-h small{font-size:11px;color:var(--dim);font-weight:700}
.dn-show{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto;column-gap:10px;align-items:center;padding:7px 10px;border-radius:12px;background:#151935;border:2px solid var(--ink);margin:6px 0}
.dn-show img{width:52px;height:52px;grid-row:1 / span 3}
.dn-show b{font-family:'Lilita One';font-weight:400;font-size:16px;line-height:1.15}
.dn-show small{font-size:10.5px;color:var(--dim);font-weight:700}
.dn-show em{font-style:normal;font-size:12px;color:#ffd84a;font-weight:800}
.dn-field{display:flex;flex-direction:column;gap:4px;margin:7px 0;font-size:11px;font-weight:800;color:var(--muted)}
.dn-field textarea{resize:none;font-size:14px}
.dn-row2{display:flex;gap:8px}
.dn-row2 .dn-field{flex:1;min-width:0}
@media (max-width:720px){.dunbar .dn-ic{font-size:19px}.dn-rc-out{width:80px}.dn-pick{max-height:112px}.dn-info-h img{width:40px;height:40px}}