:root{
--pxcircle:polygon(31% 0,69% 0,69% 6%,81% 6%,81% 12%,88% 12%,88% 19%,94% 19%,94% 31%,100% 31%,100% 69%,94% 69%,94% 81%,88% 81%,88% 88%,81% 88%,81% 94%,69% 94%,69% 100%,31% 100%,31% 94%,19% 94%,19% 88%,12% 88%,12% 81%,6% 81%,6% 69%,0 69%,0 31%,6% 31%,6% 19%,12% 19%,12% 12%,19% 12%,19% 6%,31% 6%);
}
@font-face{
font-family:'Press Start 2P';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('PressStart2P.ttf') format('truetype');
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Segoe UI',system-ui,sans-serif;color:#e8e6d8;user-select:none}
/* PERF: saat resolusi dinamis aktif (GPU kewalahan), blur HUD dimatikan —
itu efek kompositor termahal. Murni kosmetik, gameplay tak tersentuh. */
body.perf-hud *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* FPS meter (PC, toggle F3) */
#fps-hud{display:none;position:fixed;left:8px;bottom:8px;z-index:99;font-family:'Press Start 2P',monospace;
font-size:10px;color:#8fe07a;background:rgba(0,0,0,.55);border:1px solid rgba(143,224,122,.35);
padding:5px 8px;border-radius:6px;pointer-events:none}
#game{position:fixed;inset:0}
#game canvas{display:block}
.hidden{display:none!important}
/* ==== overlay fx ==== */
#vignette{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(180,0,0,.75) 100%);transition:opacity .25s;z-index:20}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:#dfe9ff;z-index:21}
/* fade transisi panorama main menu: menutupi scene 3D (di bawah #start) agar
perpindahan antar desa tidak terlihat pop-in */
#menu-fade{position:fixed;inset:0;pointer-events:none;opacity:0;background:#000;transition:opacity .6s ease;z-index:15}
/* Crosshair mode FPP Minecraft */
#fpp-crosshair{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
width:16px;height:16px;pointer-events:none;z-index:12;
opacity:0;transition:opacity .18s ease;
}
#fpp-crosshair::before, #fpp-crosshair::after{
content:'';position:absolute;background:rgba(255,255,255,0.9);
box-shadow:0 0 2px rgba(0,0,0,0.85);border-radius:1px;
}
#fpp-crosshair::before{top:7px;left:0;width:16px;height:2px;}
#fpp-crosshair::after{top:0;left:7px;width:2px;height:16px;}
#fpp-crosshair.show{opacity:1;}
/* ==== HUD ==== */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#stats{position:absolute;top:12px;left:12px;display:inline-flex;align-items:flex-start;pointer-events:none;z-index:11}
/* ============ KONSEP 2 : PIXEL QUEST HUD (ORANGE THEME FORECRAFT) ============ */
.hud-pixel{font-family:'Press Start 2P',monospace;pointer-events:none}
.px-frame{position:relative;padding:12px 14px 14px;
background:linear-gradient(160deg,#24140c,#160b06);
border:4px solid #541c08;
box-shadow:0 6px 0 rgba(0,0,0,.5),inset 0 0 0 2px #ea580c,inset 0 4px 0 rgba(255,255,255,.18);
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
pointer-events:auto}
.px-frame::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.px-frame.hitflash::after{animation:flashHit .35s}
.px-body{display:flex;gap:12px;align-items:center}
.px-left{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:68px}
.px-name-box{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:2px}
#player-hud-name{font-family:'Press Start 2P',monospace;font-size:7.5px;color:#fed7aa;letter-spacing:0.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68px;text-shadow:0 1px 2px #000;display:block}
/* potret pixel terpadu dengan 3D canvas Forecraft */
#portrait.px-portrait{position:relative;width:68px;border:none;background:none;padding:0;cursor:pointer;outline:none;display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;pointer-events:auto;transition:transform .12s}
#portrait.px-portrait:hover .px-pframe{filter:brightness(1.1)}
#portrait.px-portrait:active{transform:scale(.94)}
.px-pframe{position:relative;width:68px;height:68px;background:linear-gradient(#ffe08a,#c9932e);
clip-path:var(--pxcircle);animation:pxBob 1.6s steps(2) infinite}
.px-pinner{position:absolute;inset:5px;background:radial-gradient(circle at 40% 30%,#3d2114,#1a0c06 75%);
clip-path:var(--pxcircle);overflow:hidden;display:grid;place-items:center}
#portrait-cv{display:block;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;transition:filter .4s}
.px-pflash{position:absolute;inset:5px;clip-path:var(--pxcircle);background:#fff;opacity:0;pointer-events:none}
.px-pflash.dmg{background:rgba(255,60,80,.7)}
.px-pflash.go{animation:flashHit .4s}
#portrait.px-portrait.hurt .px-pframe{animation:pxShake .35s steps(4)}
.px-lvl{font-family:'Press Start 2P',monospace;font-size:7px;color:#3a2604;background:linear-gradient(#ffe08a,#d9a53c);padding:4px 7px;letter-spacing:1px;line-height:1;
clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));pointer-events:none}
#portrait-lv{font-family:'Press Start 2P',monospace;font-size:7px;color:#3a2604;pointer-events:none}
.hud-pixel.ko .px-pinner canvas{filter:grayscale(1) brightness(.7)}
/* baris kanan: HP hati, stamina, hunger */
.px-right{display:flex;flex-direction:column;gap:8px;width:214px}
.px-row{display:flex;align-items:center;gap:8px}
.px-row.hearts{gap:3px;justify-content:center;position:relative}
.px-ico{width:16px;height:16px;flex:none}
.px-ico svg{width:100%;height:100%;display:block}
.heart{position:relative;width:18px;height:16px;display:inline-block}
.heart .hb{position:absolute;left:0;top:0;width:18px;height:16px}
.heart .base path{fill:#2e140d}
.heart .fillpart{position:absolute;left:0;top:0;height:16px;width:0;overflow:hidden;transition:width .22s steps(4)}
.heart .fillpart .top path{fill:#ff5470;filter:drop-shadow(0 0 3px rgba(255,84,112,.55))}
.heart.full .fillpart{width:100%}
.heart.half .fillpart{width:10px}
.heart.pop{animation:heartPop .35s cubic-bezier(.3,1.8,.4,1)}
.pxbar{flex:1;display:flex;gap:2px;height:16px;padding:2px;background:#140a06;border:1px solid #451a03;position:relative}
.pxbar i{flex:1;background:#2d170e;transform-origin:bottom}
.pxbar.st i.on{background:#45d6ff;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.3)}
.pxbar.hg i.on{background:#ffb703;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.3)}
.pxbar.low i.on{background:#ffd23f!important}
.pxbar.crit i.on{background:#ff4d4d!important;animation:blinkHard .5s steps(2) infinite}
.hud-pixel.crit .px-row.hearts{animation:blinkHard .55s steps(2) infinite}
.hud-pixel.lowhg .hg-ico{animation:wiggleY .7s ease-in-out infinite}
/* floating numbers & sparkle */
.fl{position:absolute;left:50%;top:-6px;z-index:30;pointer-events:none;font:800 9px 'Press Start 2P',monospace;
animation:flUp .95s ease-out forwards;text-shadow:0 0 8px currentColor}
.fl.bad{color:#ff5d75}.fl.good{color:#7dff9b}.fl.info{color:#7ce7ff}
.sp{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:26;
background:var(--spc,#aef7c8);animation:spGo .7s ease-out forwards}
/* keyframes juicy */
@keyframes flashHit{0%{opacity:.85}100%{opacity:0}}
@keyframes flUp{0%{opacity:0;transform:translate(-50%,8px) scale(.5)}18%{opacity:1;transform:translate(-50%,-4px) scale(1.18)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}
@keyframes heartPop{40%{transform:scale(1.35) rotate(-7deg)}}
@keyframes blockPop{0%{transform:scaleY(.2);filter:brightness(2.2)}70%{transform:scaleY(1.25)}100%{transform:scaleY(1)}}
@keyframes blinkHard{50%{opacity:.3}}
@keyframes pxBob{50%{transform:translateY(-2px)}}
@keyframes pxShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-3px,1px)}}
@keyframes spGo{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
@keyframes wiggleY{50%{transform:translateY(-3px) rotate(-8deg)}}
/* Fallback & compatibility styles */
.bar{display:flex;align-items:center;gap:6px;background:rgba(24,16,10,.82);border:1.5px solid #7c2d12;border-radius:8px;padding:3px 6px;backdrop-filter:blur(4px)}
.bar .ico{display:flex;align-items:center;justify-content:center;font-size:13px;width:18px}
.bar .track{position:relative;width:154px;background:rgba(0,0,0,.68);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.bar .track div{height:100%;width:100%;border-radius:5px;transition:width .15s}
.bar-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;color:#fff;text-shadow:0 1px 2px #000, 0 0 4px #000;pointer-events:none;z-index:2;line-height:1}
#hp-fill{background:linear-gradient(90deg,#b91c1c,#ef4444,#f87171)}
#st-fill{background:linear-gradient(90deg,#d97706,#f59e0b,#fbbf24)}
#hu-fill{background:linear-gradient(90deg,#9a3412,#ea580c,#fb923c)}
/* BAR EXP: di bagian paling bawah layar full ujung ke ujung tipis kuning */
#xp-bar-bottom{position:fixed;bottom:0;left:0;width:100vw;height:4px;background:rgba(0,0,0,.7);z-index:50;pointer-events:none}
#xp-fill{height:100%;width:0%;background:linear-gradient(90deg,#ca8a04,#eab308,#fde047);box-shadow:0 0 6px rgba(250,204,21,.85);transition:width .2s ease-out}
#xp-pct{position:fixed;bottom:6px;left:8px;font-family:'Press Start 2P',monospace;font-size:7.5px;color:#fef08a;text-shadow:0 1px 3px #000, 0 0 4px rgba(0,0,0,.8);z-index:51;pointer-events:none;letter-spacing:.04em}
#topright{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center;
background:linear-gradient(160deg,rgba(36,20,12,.95),rgba(20,10,6,.92));
border:4px solid #541c08;border-radius:0;
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
box-shadow:0 6px 0 rgba(0,0,0,.5), inset 0 0 0 2px #ea580c, inset 0 4px 0 rgba(255,255,255,.18);
padding:8px 16px 7px;backdrop-filter:blur(6px);z-index:12}
#clock{font-size:14px;font-weight:700;color:#fff}
#daynum{font-size:10px;opacity:.85;color:#fed7aa}
/* ====== KOMPAS ARAH MATA ANGIN (di atas jam) ==============================
Strip horizontal berisi label N/E/S/W + garis derajat yang bergeser sesuai
arah pandang kamera. Penanda ▼ di tengah menunjukkan arah hadap saat ini. */
#compass{position:relative;width:168px;height:20px;margin:0 auto 3px;
overflow:hidden;border:1px solid #7c2d12;background:#140a06;border-radius:3px}
#compass-coords{font-family:'Press Start 2P',monospace;font-size:7px;color:#fed7aa;letter-spacing:.04em;margin:1px auto 3px;text-shadow:0 1px 2px #000;line-height:1.2}
#compass-strip{position:absolute;top:0;left:0;height:100%;white-space:nowrap;
will-change:transform}
#compass-strip span{display:inline-block;text-align:center;font-size:10.5px;
font-weight:700;letter-spacing:.04em;color:#dbe9d0;line-height:20px}
#compass-strip span.card{color:#ffe08a;font-size:12px}
#compass-strip span.tick{color:rgba(255,255,255,.35);font-size:9px}
#compass-mark{position:absolute;left:50%;top:0;transform:translateX(-50%);
font-size:9px;color:#8cd86a;text-shadow:0 1px 2px #000;line-height:20px}
#compass:before,#compass:after{content:'';position:absolute;top:0;width:26px;
height:100%;z-index:2;pointer-events:none}
#compass:before{left:0;background:linear-gradient(90deg,rgba(10,14,10,.9),transparent)}
#compass:after{right:0;background:linear-gradient(270deg,rgba(10,14,10,.9),transparent)}
/* ------ KETERANGAN ARAH LOG PASS (di atas frame kompas) ------
Satu baris sangat kecil: nama tanda, jarak, dan panah tren.
⯆ hijau = jarak mengecil (arah benar) · ⯅ merah = menjauh · 📍 = sudah sampai.
Ini yang membuat penanda arah bisa dipakai bernavigasi, bukan hanya menebak. */
#compass-info{font-size:9px;font-weight:700;line-height:12px;margin-bottom:1px;
color:#ffd0cc;text-shadow:0 1px 2px #000;white-space:nowrap;
max-width:168px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#compass-info.near{color:#8fe07a}
#compass-info.far{color:#ff8a80}
#compass-info.here{color:#ffe08a}
/* ------ PENANDA LOG PASS: garis merah arah tanda lokasi ------
#compass punya overflow:hidden, jadi penanda otomatis terpotong di tepi
jendela kompas. z-index di atas gradien tepi supaya tetap terlihat.
Tidak ada label di dalam frame: overflow:hidden akan memotongnya, jadi
seluruh keterangan (nama/jarak/tren) ditaruh di #compass-info di atas frame. */
#compass-target{position:absolute;top:0;height:100%;z-index:3;
transform:translateX(-50%);pointer-events:none}
#compass-target .ct-line{position:absolute;left:50%;top:0;width:2px;height:100%;
margin-left:-1px;background:#ff3b30;
box-shadow:0 0 5px rgba(255,59,48,.95),0 0 2px #000}
#compass-target.edge .ct-line{opacity:.5;width:3px}
/* pemain sudah menghadap tepat ke tanda: garis jadi hijau = "jalan lurus" */
#compass-target.aim .ct-line{background:#8fe07a;
box-shadow:0 0 7px rgba(143,224,122,.95),0 0 2px #000}
#combo{position:absolute;top:26%;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:22px;color:#ffd24d;text-shadow:0 0 12px rgba(255,170,0,.8),0 2px 0 #000;opacity:0;transition:opacity .2s}
#combo.pop{animation:cpop .18s}
@keyframes cpop{0%{transform:translateX(-50%) scale(1.6)}100%{transform:translateX(-50%) scale(1)}}
#hotbar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none;z-index:25}
.hslot{
width:52px;height:52px;background:rgba(24,16,10,.86);border:2px solid #7c2d12;border-radius:9px;
position:relative;display:flex;align-items:center;justify-content:center;font-size:26px;
backdrop-filter:blur(4px);pointer-events:auto;cursor:pointer;
touch-action:none;user-select:none;-webkit-user-select:none;
transition:transform .12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s, border-color .15s, background .15s;
}
.hslot:hover{transform:translateY(-2px);border-color:#ea580c}
.hslot.sel{
border:2.5px solid #ff7a00 !important;
box-shadow:0 0 16px #ff7a00, 0 0 32px rgba(255,122,0,0.5), 0 0 6px #ffd24d, inset 0 0 12px rgba(255,122,0,0.7) !important;
background:linear-gradient(160deg,rgba(70,30,12,.96),rgba(32,14,6,.94)) !important;
transform:translateY(-4px) scale(1.08);
}
.hslot.equip-pop{
animation:hslotPop .32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hslotPop{
0%{transform:translateY(0) scale(0.92);filter:brightness(1.8)}
45%{transform:translateY(-8px) scale(1.22);filter:brightness(1.5)}
100%{transform:translateY(-4px) scale(1.08);filter:brightness(1)}
}
.hslot.dragging{
opacity:0.35;transform:scale(0.92);
}
.hslot.drop-target{
border-color:#ffd24d !important;
box-shadow:0 0 18px rgba(255,210,77,0.85) !important;
transform:scale(1.12);
}
.slot-ghost{
position:fixed;z-index:99999;pointer-events:none;
width:48px;height:48px;display:flex;align-items:center;justify-content:center;
filter:drop-shadow(0 6px 14px rgba(0,0,0,0.7));
transform:scale(1.15);
}
.slot-ghost .iico{width:42px;height:42px;object-fit:contain}
.hslot .cnt{position:absolute;bottom:1px;right:4px;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}
.hslot .key{position:absolute;top:1px;left:4px;font-size:8px;opacity:.55}
#toast{display:none!important;position:fixed;top:132px;left:14px;pointer-events:none;z-index:12}
.toast-item{display:inline-flex;align-items:center;gap:6px;background:rgba(8,12,8,.82);border:1px solid rgba(255,255,255,.18);padding:4px 12px;border-radius:12px;font-size:12px;backdrop-filter:blur(4px);animation:tin 2.4s forwards}
.toast-item .iico{width:18px;height:18px;flex:0 0 auto}
@keyframes tin{0%{opacity:0;transform:translateX(-10px)}15%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
#hint{display:none!important}
/* ==== Panels ==== */
.panel{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(560px,94vw);max-height:86vh;
display:flex;flex-direction:column;overflow:hidden;padding:0;
background:linear-gradient(160deg,rgba(32,18,10,.98),rgba(18,10,6,.96));
border:4px solid #541c08;
border-radius:0;
box-shadow:0 8px 0 rgba(0,0,0,.55), inset 0 0 0 2px #ea580c, inset 0 4px 0 rgba(255,255,255,.18);
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
z-index:30;backdrop-filter:blur(6px);
}
.panel h2{
flex:0 0 auto;position:relative;top:auto;z-index:3;margin:0;
padding:14px 20px 12px;border-radius:0;
background:linear-gradient(rgba(36,20,12,.99),rgba(22,12,7,.95));
border-bottom:2px solid #7c2d12;
font-family:'Press Start 2P',monospace;font-size:13px;color:#ffd24d;
display:flex;justify-content:space-between;align-items:center;
}
.panel .x{
position:relative;z-index:4;
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;padding:0;
border-radius:4px;
background-color:#ea580c;
border:2px solid #541c08;
color:#ffffff;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
font-size:16px;font-weight:900;line-height:1;
cursor:pointer;
box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,0.4);
transition:transform .12s,background .15s,border-color .15s;
margin-left:auto;
}
.panel .x:hover{
background-color:#f97316;border-color:#9a3412;transform:scale(1.08);
}
.panel .x:active{
transform:scale(.92);background-color:#c2410c;
}
.panel .x .x-ico{width:14px;height:14px;display:block;pointer-events:none}
.sub{font-size:11px;opacity:.7;margin:10px 0 6px;text-transform:uppercase;letter-spacing:1px}
.grid{display:grid;grid-template-columns:repeat(7,56px);gap:6px;justify-content:center}
.slot{width:56px;height:56px;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.14);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:26px;position:relative;cursor:pointer}
.slot:hover{border-color:#9fd77f}
.slot.picked{border-color:#ffd24d;box-shadow:0 0 10px rgba(255,210,77,.6)}
.slot .cnt{position:absolute;bottom:1px;right:4px;font-size:10px;font-weight:700}
/* ---- drag & drop item: slot asal diredupkan, slot tujuan disorot ---- */
.slot.dragging{opacity:.35}
.slot.drop-hint{border-color:#8fe07a!important;box-shadow:0 0 12px rgba(143,224,122,.65)}
/* ikon yang mengikuti kursor / jari; pointer-events off agar slot di bawahnya terdeteksi */
.drag-ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
font-size:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
/* ghost yang mengangkat item bergambar (PNG kustom) — ukuran pas satu ikon */
.drag-ghost img.iico{width:44px;height:44px}
/* cegah scroll & seleksi teks saat menarik item di layar sentuh */
#panel-bag .grid{touch-action:pan-y}
#panel-bag.drag-lock, #panel-bag.drag-lock *{touch-action:none !important}
.slot.press{border-color:#ffd24d;box-shadow:0 0 10px rgba(255,210,77,.35)}
/* tooltip nama & stat item saat hover (PC) atau tap biasa (mobile) */
.slot-tip{position:fixed;z-index:9999;pointer-events:none;
background:linear-gradient(160deg,rgba(32,18,10,.98),rgba(18,10,6,.96));
border:2px solid #ea580c;border-radius:4px;
padding:8px 12px;font-size:12px;color:#efe8ff;white-space:nowrap;
box-shadow:0 6px 18px rgba(0,0,0,.7), inset 0 0 0 1px #541c08;
animation:tipIn .12s ease-out;display:flex;flex-direction:column;gap:4px}
.slot-tip .st-head{display:flex;align-items:center;gap:6px;font-weight:700}
.slot-tip .st-head .iico{width:20px;height:20px;object-fit:contain}
.slot-tip .st-name{color:#ffd76b}
.slot-tip .st-lvl{color:#8fe07a;font-style:normal;margin-left:auto;font-size:11px}
.slot-tip .st-rarity{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.slot-tip .st-stat{font-size:11px;color:#cbd5e1;display:flex;align-items:center;gap:5px}
.slot-tip .st-stat .st-ico{width:13px;height:13px;object-fit:contain}
.slot-tip .st-fx{font-size:10.5px;color:#fed7aa;display:flex;align-items:center;gap:5px}
.slot-tip .st-fx .eff-ico{width:13px;height:13px;object-fit:contain}
.chip-ico{width:12px;height:12px;object-fit:contain;vertical-align:middle;margin-right:3px;display:inline-block}
.slot-tip b{color:#ffd76b}
.slot-tip i{color:#8fe07a;font-style:normal;margin-left:4px}
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* panel tas mobile lebih ringkas; PC memakai ukuran asli */
body.touch #panel-bag .grid{grid-template-columns:repeat(auto-fill,40px);gap:4px}
body.touch #panel-bag .slot{width:40px;height:40px;font-size:18px;border-radius:7px}
body.touch #panel-bag .slot .cnt{font-size:9px}
body.touch #panel-bag .grid.equip{grid-template-columns:repeat(4,40px)}
body.touch #panel-bag .sub{font-size:11px;margin:8px 0 4px}
body.touch #panel-bag .tip{font-size:10px}
@media (max-width:600px){
body.touch #panel-bag .grid{grid-template-columns:repeat(auto-fill,34px);gap:3px}
body.touch #panel-bag .slot{width:34px;height:34px;font-size:15px}
body.touch #panel-bag .grid.equip{grid-template-columns:repeat(4,34px)}
}
@media (max-width:380px){
body.touch #panel-bag .grid{grid-template-columns:repeat(auto-fill,30px)}
body.touch #panel-bag .slot{width:30px;height:30px;font-size:13px}
body.touch #panel-bag .grid.equip{grid-template-columns:repeat(4,30px)}
}
/* ---- warna rarity: bingkai + aura sesuai tingkat kelangkaan item ---- */
.slot.r-common{background:rgba(184,192,204,.10)}
.slot.r-uncommon{background:rgba(99,212,113,.12);box-shadow:inset 0 0 10px rgba(99,212,113,.20)}
.slot.r-rare{background:rgba(77,163,255,.12);box-shadow:inset 0 0 12px rgba(77,163,255,.28)}
.slot.r-epic{background:rgba(180,107,255,.14);box-shadow:inset 0 0 14px rgba(180,107,255,.34)}
.slot.r-legendary{background:rgba(255,162,39,.16);box-shadow:inset 0 0 16px rgba(255,162,39,.42),0 0 10px rgba(255,162,39,.35);animation:rarePulse 1.8s ease-in-out infinite}
.slot.r-mythic{background:rgba(255,56,56,.20);border-color:#ff3838;box-shadow:inset 0 0 18px rgba(255,56,56,.5),0 0 12px rgba(255,56,56,.45);animation:mythicPulse 1.5s ease-in-out infinite}
@keyframes rarePulse{
0%,100%{box-shadow:inset 0 0 14px rgba(255,162,39,.34),0 0 8px rgba(255,162,39,.25)}
50%{box-shadow:inset 0 0 20px rgba(255,162,39,.55),0 0 16px rgba(255,162,39,.5)}
}
@keyframes mythicPulse{
0%,100%{box-shadow:inset 0 0 16px rgba(255,56,56,.4),0 0 10px rgba(255,56,56,.35)}
50%{box-shadow:inset 0 0 24px rgba(255,56,56,.65),0 0 18px rgba(255,56,56,.6)}
}
/* ---- slot perlengkapan (senjata + armor: 4 slot) ---- */
.grid.equip{grid-template-columns:repeat(4,56px)}
.slot.eq{border-color:rgba(159,215,127,.35);background:rgba(20,40,20,.5)}
.slot.eq.filled{border-color:#ffd24d;box-shadow:inset 0 0 12px rgba(255,210,77,.25)}
.slot.eq .lbl{position:absolute;top:-2px;left:4px;font-size:9px;opacity:.55}
.slot.eq .ghost{opacity:.28;font-size:22px}
#def-num{color:#9fd7ff;font-weight:700}
.tip{font-size:12px;opacity:.75;margin-top:12px;line-height:1.5}
/* ==== Rekan tim: ikon HUD kanan atas ====
Ditaruh di bawah panel jam (#topright) dan diberi pointer-events sendiri
karena #hud secara umum tidak menerima klik. */
#team{position:absolute;top:78px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:13;pointer-events:auto}
.tmate{position:relative;width:52px;padding:4px 2px 6px;background:rgba(24,16,10,.82);border:1.5px solid #7c2d12;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;backdrop-filter:blur(4px)}
/* AREA SENTUH ikon rekan diperlebar sedikit melampaui kotaknya (tak terlihat).
Besarnya sengaja lebih kecil dari jarak antar ikon (gap) supaya area sentuh
dua ikon bertetangga tidak saling menimpa. Pseudo-element ikut menjadi
sasaran hit-test dan event-nya tetap dialamatkan ke .tmate. */
.tmate::before{content:'';position:absolute;inset:-4px;border-radius:12px}
.tmate:hover{border-color:#ea580c}
.tmate.busy{border-color:#c2410c}
.tmate .tface{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.tface .tico{width:28px;height:28px;object-fit:contain;vertical-align:middle;display:inline-block}
.pc-face .tico{width:34px;height:34px;object-fit:contain;vertical-align:middle;display:inline-block}
.npc-face .tico{width:46px;height:46px;object-fit:contain;vertical-align:middle;display:inline-block}
.pc-ico .tico{width:38px;height:38px;object-fit:contain;vertical-align:middle;display:inline-block}
.prof-ico{width:20px;height:20px;object-fit:contain;vertical-align:middle;display:inline-block;margin-right:5px}
.eff-ico{width:18px;height:18px;object-fit:contain;vertical-align:middle;display:inline-block;margin-right:4px}
.sk-ico{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto 2px}
.branch-ico{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-right:5px}
.q-ico{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:3px}
.menu-ico{width:22px;height:22px;object-fit:contain;vertical-align:middle}
.t-ico .sk-ico{margin:0 auto}
.cs-ic .iico{width:20px;height:20px;object-fit:contain;vertical-align:middle}
.cs-ic .cs-ico{width:18px;height:18px;object-fit:contain;vertical-align:middle}
.st-nm .sk-ico{display:inline-block;width:20px;height:20px;margin:0 4px 0 0;vertical-align:middle}
.hud-ico{width:14px;height:14px;object-fit:contain;vertical-align:-2px;display:inline-block}
.ph-ico{width:22px;height:22px;object-fit:contain;vertical-align:-4px;display:inline-block;margin-right:4px}
.tab-ico{width:16px;height:16px;object-fit:contain;vertical-align:-3px;display:inline-block;margin-right:3px}
.craft-tab{display:inline-flex;align-items:center;gap:3px}
.panel h2{display:flex;align-items:center}
.panel h2 .x{margin-left:auto}
.tmate .tlv{font-size:9px;opacity:.85;font-weight:700}
.tmate .thp{width:40px;height:4px;background:rgba(0,0,0,.55);border-radius:3px;overflow:hidden}
.tmate .thp i{display:block;height:100%;background:linear-gradient(90deg,#ff5d5d,#ff9d6b)}
.tmate .tst{width:40px;height:3px;background:rgba(0,0,0,.55);border-radius:2px;overflow:hidden;margin-top:1px}
.tmate .tst i{display:block;height:100%;background:linear-gradient(90deg,#ffd24d,#ff9d47)}
.tmate .tord{position:absolute;top:-4px;right:-4px;font-size:11px;background:rgba(8,12,8,.9);border-radius:50%;padding:1px 2px}
.tmate .tmode{position:absolute;bottom:-4px;right:-4px;font-size:11px;background:rgba(8,12,8,.9);border-radius:50%;padding:1px 2px}
/* ==== Panel rekan ==== */
.npc-head{display:flex;gap:12px;align-items:center}
.npc-face{font-size:34px}
.npc-meta{flex:1}
.npc-lv{font-size:11px;color:#ffe066;font-weight:700}
.npc-bar{position:relative;height:14px;margin-top:4px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);border-radius:7px;overflow:hidden}
.npc-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff5d5d,#ff9d6b)}
.npc-bar.st i{background:linear-gradient(90deg,#ffd24d,#ff9d47)}
.npc-bar.xp i{background:linear-gradient(90deg,#4da3ff,#9fd7ff)}
.npc-bar span{position:absolute;inset:0;font-size:9px;line-height:14px;text-align:center;text-shadow:0 1px 2px #000}
.npc-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;margin-top:8px;opacity:.9}
.npc-skill{margin-top:8px;font-size:12px;line-height:1.5;background:rgba(90,140,80,.16);border-left:3px solid #9fd77f;border-radius:0 8px 8px 0;padding:6px 10px}
.npc-gear{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ngear{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 2px;text-align:center;cursor:pointer;transition:all .15s}
.ngear:hover{border-color:#9fd77f}
.ngear .ge{display:block;font-size:22px}
.ngear .gn{display:block;font-size:9px;opacity:.6}
.ngear.empty{background:rgba(6,8,12,.85);border:1px dashed rgba(255,255,255,.12)}
.ngear.empty .ge{opacity:.22}
.ngear.empty .gn{opacity:.35}
.ngear.filled{box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
.ngear.r-common{background:rgba(184,192,204,.12);border-color:#b8c0cc}
.ngear.r-uncommon{background:rgba(99,212,113,.15);border-color:#63d471;box-shadow:inset 0 0 10px rgba(99,212,113,.25)}
.ngear.r-rare{background:rgba(77,163,255,.15);border-color:#4da3ff;box-shadow:inset 0 0 12px rgba(77,163,255,.32)}
.ngear.r-epic{background:rgba(180,107,255,.16);border-color:#b46bff;box-shadow:inset 0 0 14px rgba(180,107,255,.4)}
.ngear.r-legendary{background:rgba(255,162,39,.18);border-color:#ffa227;box-shadow:inset 0 0 16px rgba(255,162,39,.45),0 0 8px rgba(255,162,39,.35);animation:rarePulse 1.8s ease-in-out infinite}
.ngear.r-mythic{background:rgba(255,56,56,.22);border-color:#ff3838;box-shadow:inset 0 0 18px rgba(255,56,56,.5),0 0 10px rgba(255,56,56,.45);animation:mythicPulse 1.5s ease-in-out infinite}
.coin-ico{display:inline-block;vertical-align:middle;object-fit:contain;pointer-events:none}
.npc-cmd{display:flex;flex-wrap:wrap;gap:6px}
.npc-cmd button{background-color:#ea580c;border:1.5px solid #7c2d12;color:#fff;font-size:12px;padding:7px 11px;border-radius:8px;cursor:pointer;transition:background-color .15s,border-color .15s}
.npc-cmd button:hover{background-color:#f97316;border-color:#9a3412}
.npc-cmd button.on{background-color:#c2410c;border-color:#7c2d12}
.npc-cmd button.danger{margin-left:auto;border-color:rgba(255,120,110,.5);color:#ffb0a8}
/* tas rekan & daftar pemberian dibuat lebih rapat agar muat di layar ponsel */
.grid.npc-bag,.grid.npc-give{grid-template-columns:repeat(auto-fill,48px);gap:5px;justify-content:start}
.grid.npc-bag .slot,.grid.npc-give .slot{width:48px;height:48px;font-size:22px}
.grid.npc-bag .slot.nb{border-style:dashed}
.grid.npc-give .slot.ng:hover{border-color:#ffd24d}
@media(max-width:760px){
#team{top:70px;right:8px}
.tmate{width:44px}
.tmate .tface{font-size:17px}
.tmate .thp{width:32px}
}
#sp-info{font-size:14px;margin-bottom:0}
#sp-info b{color:#ffd24d;font-size:18px}
/* ---- HEADER PANEL SKILL MENEMPEL (tetap di atas) ----
#sp-info dikecualikan dari wadah scroll .panel-body (bersama h2) sehingga
menjadi baris tetap di bawah judul panel — tidak pernah ikut ter-scroll
ke bawah saat menjelajah pohon skill. */
#panel-skills>#sp-info{
flex:0 0 auto;
position:relative;top:auto;z-index:3;
margin:0;
padding:6px 22px 10px;
background:linear-gradient(rgba(20,28,20,.99),rgba(14,20,14,.95));
border-bottom:1px solid rgba(140,200,120,.25);
}
body.touch #panel-skills>#sp-info{padding:4px 14px 8px;font-size:12px}
body.touch #panel-skills>#sp-info b{font-size:16px}
/* ============ SKILL TREE (pohon akar menyambung) ============ */
#branches{display:flex;flex-direction:column;gap:16px}
.branch.tree{background:rgba(0,0,0,.28);border-radius:12px;padding:12px;width:100%;box-sizing:border-box}
.branch.tree h3{font-size:13px;text-align:center;margin-bottom:10px;color:#cfe8b8;letter-spacing:1px}
.tree-body{position:relative;padding:4px 0 2px}
.tree-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:30px;position:relative;z-index:1}
.tree-row:last-child{margin-bottom:4px}
/* overlay garis penghubung antar node */
.tree-svg{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.tree-svg path.lk{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2}
.tree-svg path.lk.avail{stroke:rgba(159,215,127,.65);stroke-width:2.5}
.tree-svg path.lk.on{stroke:#ffd24d;stroke-width:3}
.tree-svg path.lk.prof{stroke:rgba(170,130,255,.55);stroke-width:2}
/* kartu node */
.tnode{position:relative;z-index:1;width:122px;box-sizing:border-box;
background:rgba(22,30,22,.92);border:2px solid rgba(255,255,255,.16);
border-radius:11px;padding:9px 6px 8px;text-align:center;
transition:transform .12s,border-color .12s,box-shadow .12s}
.tnode .t-ico{font-size:24px;line-height:1}
.tnode .t-nm{font-size:10px;font-weight:700;color:#e8f0d8;margin:5px 0 2px;min-height:26px;line-height:1.25}
.tnode .t-rk{font-size:10px;color:#ffd24d}
.tnode .t-badge{margin:6px auto 0;display:inline-block;font-size:9px;font-weight:700;
padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);color:#cfd8c8;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bisa dipelajari */
.tnode.can{cursor:pointer;border-color:#9fd77f;box-shadow:0 0 0 1px rgba(159,215,127,.35)}
.tnode.can:hover{transform:translateY(-3px);box-shadow:0 4px 14px rgba(159,215,127,.45)}
.tnode.can .t-badge{background:rgba(107,196,90,.2);border-color:#6da55f;color:#c8f0b0}
/* sudah maksimal */
.tnode.max{border-color:#ffd24d;background:rgba(255,210,77,.1)}
.tnode.max .t-badge{background:rgba(255,210,77,.18);border-color:#ffd24d;color:#ffe9a8}
/* terkunci */
.tnode.locked{opacity:.5}
.tnode.locked .t-badge{color:#aab3a6}
/* terkunci khusus oleh proficiency */
.tnode.proflock{border-color:rgba(170,130,255,.6)}
.tnode.proflock .t-badge{background:rgba(170,130,255,.16);border-color:#aa82ff;color:#d6c2ff}
/* skill aktif punya ikon jurus yang menyala */
.tnode.active .t-ico{filter:drop-shadow(0 0 5px rgba(255,179,60,.85))}
/* toggle slot button di kartu node skill tree */
.t-slot-btn{margin:5px auto 0;display:inline-block;font-size:8.5px;font-weight:700;
padding:2px 7px;border-radius:4px;cursor:pointer;transition:all .15s}
.t-slot-btn.equipped{background:rgba(34,197,94,.25);border:1px solid #22c55e;color:#86efac;box-shadow:0 0 6px rgba(34,197,94,.4)}
.t-slot-btn.unequipped{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#cfd8c8}
.t-slot-btn:hover{transform:scale(1.05)}
/* active slots bar modular di header skill tree */
.active-slots-bar{background:rgba(0,0,0,.45);border:1px solid rgba(56,189,248,.35);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.asb-title{font-size:11px;font-weight:700;color:#38bdf8;margin-bottom:6px;text-align:center}
.asb-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.asb-slot{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .15s}
.asb-slot.filled{background:rgba(34,197,94,.18);border:1.5px solid #22c55e;color:#fff}
.asb-slot.filled:hover{background:rgba(239,68,68,.25);border-color:#ef4444}
.asb-slot.empty{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.25);color:#94a3b8;cursor:default}
.asb-num{font-weight:700;color:#ffd54f;font-size:10px}
.asb-ico{display:flex;align-items:center}
.asb-name{font-weight:600}
.asb-rem{font-size:10px;color:#f87171;margin-left:2px}
/* ---------- tooltip skill (panel keterangan lengkap) ----------
Muncul saat hover node (desktop) atau tekan-lama (mobile), menampilkan
efek, syarat skill & proficiency, biaya, dan status tanpa terpotong. */
#skill-tip{position:fixed;z-index:60;max-width:270px;background:rgba(14,20,14,.97);
border:1px solid rgba(159,215,127,.4);border-radius:10px;padding:10px 12px;
box-shadow:0 8px 24px rgba(0,0,0,.6);backdrop-filter:blur(6px);
pointer-events:none;font-size:12px;line-height:1.45;color:#e8f0d8}
#skill-tip .st-nm{font-weight:700;color:#cfe8b8;margin-bottom:2px}
#skill-tip .st-rk{font-size:11px;color:#ffd24d;margin-bottom:4px}
#skill-tip .st-desc{opacity:.92;margin-bottom:6px}
#skill-tip .st-line{font-size:11px;margin:2px 0}
#skill-tip .st-line.ok{color:#8fe07a}
#skill-tip .st-line.no{color:#ff8f7a}
#skill-tip .st-status{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);font-weight:700}
#skill-tip .st-type{font-size:9px;font-weight:700;padding:1px 5px;border-radius:20px;margin-left:4px}
#skill-tip .st-type.act{background:rgba(255,179,60,.18);border:1px solid #ffb33c;color:#ffcf85}
#skill-tip .st-type.pas{background:rgba(143,212,255,.14);border:1px solid #6fb6dd;color:#a9dcf5}
/* ============ PROFICIENCY (belajar dengan melakukan) ============ */
#prof-wrap{margin-top:14px;background:rgba(0,0,0,.3);border-radius:10px;padding:10px 12px}
.prof-title{font-size:12px;text-align:center;color:#cfe8b8;margin-bottom:4px}
#prof-wrap .sub{font-size:10px;opacity:.7;text-align:center;margin-bottom:8px}
.prof-row{margin:7px 0;font-size:11px}
.prof-nm{display:flex;justify-content:space-between;align-items:center;color:#e8f0d8}
.prof-nm b{color:#ffd24d;font-size:10px}
.prof-track{height:8px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);border-radius:5px;overflow:hidden;margin-top:3px}
.prof-track div{height:100%;background:linear-gradient(90deg,#9fd77f,#ffd24d);border-radius:5px;transition:width .2s}
#recipes{display:flex;flex-direction:column;gap:8px}
.recipe{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 12px}
.recipe .out{font-size:28px}
.recipe .info{flex:1}
.recipe .nm{font-weight:700;font-size:13px}
.recipe .need{font-size:11px;opacity:.85}
/* chip stat hasil craft: atk/def/efek/makanan */
.recipe .stats{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 4px}
.recipe .chip{font-size:10px;padding:1px 6px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.recipe .chip.atk{color:#ffb0a0;border-color:#c96b58}
.recipe .chip.def{color:#a9dcf5;border-color:#5f9dbd}
.recipe .chip.fx{color:#e2b4ff;border-color:#a06fc9}
.recipe .chip.food{color:#ffe08a;border-color:#c9a648}
.recipe .chip.hp{color:#8fe07a;border-color:#5f9e4f}
.recipe .chip.bad{color:#ff7b6b;border-color:#b5493c}
.recipe .need .ok{color:#8fe07a}
.recipe .need .no{color:#ff7b6b}
.recipe button{background-color:#ea580c;border:1.5px solid #7c2d12;color:#fff;border-radius:7px;padding:7px 14px;cursor:pointer;font-weight:700;transition:background-color .15s,border-color .15s}
.recipe button:hover:not(:disabled){background-color:#f97316;border-color:#9a3412}
.recipe button:disabled{opacity:.35;cursor:not-allowed}
/* header kategori crafting */
.craft-cat{font-size:12px;font-weight:700;color:#ea580c;text-transform:uppercase;
letter-spacing:1px;margin:12px 0 6px;padding-bottom:4px;
border-bottom:1px solid rgba(234,88,12,.3)}
.craft-cat:first-child{margin-top:0}
/* input jumlah di samping tombol Buat */
.craft-qty{width:52px;background:#04140a;color:#eaffea;border:1px solid rgba(143,224,122,.4);
border-radius:7px;padding:6px 4px;font-size:14px;text-align:center;outline:none}
.craft-qty:focus{border-color:#8fe07a}
.help-t{width:100%;font-size:13px;border-collapse:collapse}
.help-t td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.help-t td:first-child{font-weight:700;color:#bfe6a0;white-space:nowrap}
/* ==== Mobile Responsive Controls ==== */
/* ---------- bar skill aktif versi PC ----------
Muncul di atas hotbar dengan label tombol keyboard (Q/E/R/T). Di perangkat
sentuh bar ini disembunyikan karena sudah ada tombol bundar #m-active. */
#skillbar{
position:absolute;left:50%;transform:translateX(-50%);
bottom:104px;display:flex;gap:10px;pointer-events:auto;z-index:13;
}
body.touch #skillbar{display:none}
#skillbar .sk-btn{
position:relative;width:52px;height:52px;font-size:22px;cursor:pointer;
border-radius:12px;border:2px solid #7c2d12;
background:#ea580c;color:#fff;line-height:1;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.3);transition:transform .08s,filter .12s,border-color .15s;
}
#skillbar .sk-btn:hover{transform:translateY(-2px);border-color:#9a3412}
#skillbar .sk-btn:active{transform:translateY(1px)}
#skillbar .sk-btn .key{
position:absolute;top:-8px;left:-6px;font-size:9px;padding:2px 4px;
border-radius:5px;background:#2f4c33;border:1px solid rgba(255,255,255,.3);
font-family:'Press Start 2P',monospace;
}
#skillbar .sk-btn .cd{
position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;font-size:14px;font-weight:bold;color:#ffd34d;
text-shadow:0 2px 3px #000;
}
#skillbar .sk-btn.cooling{filter:grayscale(.8) brightness(.65)}
#mobile{display:none;position:fixed;inset:0;pointer-events:none;z-index:15}
body.touch #mobile{display:block}
body.touch #hint{display:none}
/* Hotbar di tengah bawah pada mobile, aman dari joystick (kiri) & tombol aksi (kanan) */
body.touch #hotbar{
bottom: 14px;
left: 50%;
transform: translateX(-50%);
gap: 4px;
pointer-events: auto;
z-index: 18;
}
body.touch .hslot{
width: 42px;
height: 42px;
font-size: 20px;
pointer-events: auto;
cursor: pointer;
}
body.touch .hslot:active{
transform: scale(0.93);
background: rgba(90, 120, 50, 0.8);
}
@media (orientation:landscape){
body.touch #hotbar{bottom: 12px;}
}
/* ==== Analog Stick (kiri bawah) ====
Selalu terlihat agar pemain langsung tahu area gerak.
Base dipusatkan di dalam zone (bukan mengikuti titik sentuh) supaya stabil. */
#joy-zone{
position:fixed;
left: 18px;
bottom: 18px;
width: 132px;
height: 132px;
pointer-events:auto;
touch-action: none;
display:flex;
align-items:center;
justify-content:center;
z-index:16;
}
#joy-base{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:126px;
height:126px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:.5;
transition:opacity .18s ease, box-shadow .18s ease;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 55%, rgba(0,0,0,.28) 100%);
border:2px solid rgba(255,255,255,.28);
box-shadow:inset 0 2px 12px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
backdrop-filter:blur(3px);
}
/* cincin dalam sebagai panduan jarak */
#joy-base::before{
content:'';
position:absolute;
width:62%;
height:62%;
border-radius:50%;
border:1px dashed rgba(255,255,255,.20);
}
/* penanda 4 arah */
#joy-base::after{
content:'';
position:absolute;
inset:10px;
border-radius:50%;
background:
linear-gradient(to bottom, rgba(255,255,255,.30) 0 8px, transparent 8px) top center/2px 8px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,.30) 0 8px, transparent 8px) bottom center/2px 8px no-repeat,
linear-gradient(to right, rgba(255,255,255,.30) 0 8px, transparent 8px) center left/8px 2px no-repeat,
linear-gradient(to right, rgba(255,255,255,.30) 0 8px, transparent 8px) center right/8px 2px no-repeat;
pointer-events:none;
}
/* aktif saat disentuh */
#joy-zone.active #joy-base{
opacity:1;
box-shadow:inset 0 2px 12px rgba(0,0,0,.45), 0 0 20px rgba(143,224,122,.45);
border-color:rgba(143,224,122,.65);
}
#joy-knob{
position:relative;
width:54px;
height:54px;
border-radius:50%;
background:radial-gradient(circle at 35% 30%, #f2f7ee 0%, #c8d8bc 45%, #7f9a72 100%);
border:2px solid rgba(255,255,255,.6);
box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 -3px 8px rgba(0,0,0,.25);
transition:transform .06s linear, box-shadow .18s ease;
will-change:transform;
}
#joy-zone.active #joy-knob{
box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 16px rgba(143,224,122,.75), inset 0 -3px 8px rgba(0,0,0,.25);
}
/* indikator sprint saat stick ditarik penuh */
#joy-knob.sprint{
background:radial-gradient(circle at 35% 30%, #fff6d0 0%, #ffd97a 45%, #d99b22 100%);
border-color:#ffe9a8;
}
/* Secondary buttons - right top
PENTING: KOTAK WADAH tidak boleh menangkap sentuhan, hanya tombolnya.
#mobile ber-z-index 15 sementara #hud (isi ikon rekan & pelacak quest)
ber-z-index 10 — karena keduanya membuat stacking context terpisah, SELURUH
isi #mobile selalu berada di atas seluruh isi #hud, berapa pun z-index
dalamnya. Dulu #m-buttons memakai pointer-events:auto pada wadahnya, jadi
kotak grid 3 kolom × 2 baris di kanan atas menelan semua sentuhan di
daerahnya — termasuk sentuhan yang ditujukan ke ikon rekan (#team) yang
berada tepat di bawah/di belakangnya. Itulah sebabnya ikon tim hanya bisa
ditekan di bagian yang menyembul keluar dari kotak itu. */
#m-buttons{
position:fixed;
right: 15px;
top: calc(50% - 110px);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
touch-action: none;
}
#m-buttons > button{pointer-events:auto}
/* Main action buttons - Kluster Busur (Arc Cluster) di sudut kanan bawah */
#m-main{
position: fixed;
right: 16px;
bottom: 16px;
width: 165px;
height: 165px;
pointer-events: none;
touch-action: none;
z-index: 16;
}
/* Active skills container - tepat di atas tombol roll.
Wadahnya tembus sentuhan (lihat catatan di #m-buttons): hanya tombol
skill-nya yang menerima sentuhan, sehingga kolom kosong di sisi kanan tidak
ikut menelan ketukan yang ditujukan ke ikon rekan / HUD di belakangnya. */
#m-active{
position:fixed;
right:110px;
bottom:92px;
display:flex;
flex-direction:column-reverse;
gap:8px;
pointer-events:none;
/* tombol Hantam Bumi dibidik dengan menahan+menyeret jari; tanpa ini
browser bisa mengklaim geseran sebagai scroll/pull-to-refresh dan
touchmove berhenti terkirim sehingga indikator tidak mau digeser. */
touch-action:none;
z-index:16;
}
#m-active > button{pointer-events:auto}
#mobile .m-active-btn{
width:48px;height:48px;border-radius:50%;
position:relative;
background:#ea580c;
border:2px solid #7c2d12;
color:#fff;font-size:22px;
backdrop-filter:blur(4px);
box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.3);
touch-action:none;
}
.m-active-btn span{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:800;
text-shadow:0 2px 4px #000;
}
#mobile .m-active-btn.cooling{
filter:grayscale(.8) brightness(.7);
background:rgba(20,25,30,.9);
border-color:#888;
}
.m-active-btn.has-charges, #skillbar .sk-btn.has-charges{
border-color:#ffd54f !important;
box-shadow:0 0 16px rgba(250,204,21,.8), inset 0 0 8px rgba(255,255,255,.6) !important;
animation:pulse-charge 1s infinite alternate;
}
@keyframes pulse-charge{
0%{transform:scale(1);filter:brightness(1)}
100%{transform:scale(1.06);filter:brightness(1.25)}
}
.m-active-btn span.sk-charge, #skillbar .sk-btn .cd.charge-num{
position:absolute;top:-4px;right:-4px;inset:auto;
min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;
border-radius:10px;background:#facc15;color:#000;
font-size:11px;font-weight:900;display:flex;align-items:center;
justify-content:center;border:1.5px solid #000;box-shadow:0 0 8px #fde047;
text-shadow:none;
}
#mobile button{
pointer-events: auto;
position: absolute;
border-radius:50%;
border:2px solid rgba(255,255,255,.3);
background:rgba(15,22,15,.65);
color:#fff;
backdrop-filter:blur(4px);
cursor:pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
user-select:none;
-webkit-user-select:none;
}
#mobile button:active{
background-color:rgba(120,180,110,.55);
transform: scale(0.94);
}
/* ---------- tombol bergambar (PNG dari folder Button UI) ----------
Gambar dipakai sebagai background-image. Aturan :active di atas hanya
mengubah background-color (bukan shorthand `background`) sehingga gambar
tidak ikut terhapus saat ditekan. Efek mengecil saat ditekan ditangani
class .pressed (dipasang JS pada touchstart) karena preventDefault() di
touchstart membuat pseudo-class :active tidak konsisten di layar sentuh. */
#mobile button.btn-img{
background-color:transparent;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border:none;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
#m-attack.btn-img{ background-image:url('../buttons/attack.png'); }
#m-jump.btn-img{ background-image:url('../buttons/jump.png'); }
#m-roll.btn-img{ background-image:url('../buttons/dash.png'); }
/* ---------- IKON ITEM BERGAMBAR (bag, hotbar, crafting, peti, toko) ----------
Item yang punya PNG khusus dirender sebagai ![]()
. Ukurannya
mengikuti kotak slot/ikon induknya supaya sejajar dengan ikon emoji. */
img.iico{
width:1.15em;height:1.15em;
object-fit:contain;
display:inline-block;
vertical-align:middle;
pointer-events:none;
image-rendering:auto;
}
img.block-3d-ico,img.furni-3d-ico{
width:88%!important;height:88%!important;
object-fit:contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.slot img.iico,.hslot .emo img.iico{width:82%;height:82%}
/* .emo pada hotbar & slot NPC dijadikan kotak penuh agar ![]()
bisa mengisi */
.hslot .emo,.slot .emo{display:flex;align-items:center;justify-content:center;
width:100%;height:100%;line-height:1}
.slot .emo img.iico{width:82%;height:82%}
.recipe .out img.iico{width:1.05em;height:1.05em}
.shop-row .s-ico img.iico{width:1.1em;height:1.1em}
.recipe .need img.iico{width:1.05em;height:1.05em;margin-right:1px}
/* umpan balik tekan: mengecil sedikit (dipicu JS, andal di layar sentuh) */
#mobile button.pressed,
.m-active-btn.pressed,
.sk-btn.pressed{
transform: scale(0.88);
filter: brightness(1.12);
}
#mobile button, .m-active-btn, .sk-btn{
transition: transform 0.06s ease, filter 0.06s ease;
}
/* gambar di tombol skill aktif (mobile) & bar skill (PC) */
.m-active-btn img, .sk-btn img{
width:100%; height:100%;
object-fit:cover;
border-radius:inherit;
display:block;
pointer-events:none;
}
/* tombol skill yang memakai gambar: buang latar & border default biar art
PNG terlihat penuh; filter cooling (grayscale) tetap berlaku lewat button */
.m-active-btn.has-img{
background:transparent;
border:none;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
/* bar skill PC bergambar: dibundarkan mengikuti art PNG (tidak lagi kotak),
tanpa latar/border; efek tekan mengecil via :active (klik mouse) */
#skillbar .sk-btn.has-img{
background:transparent;
border:none;
border-radius:50%;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
#skillbar .sk-btn.has-img:active{
transform:scale(0.88);
filter:brightness(1.12);
}
/* Tombol Serang Utama (Kanan Bawah) */
#m-attack.m-l{
right: 0;
bottom: 0;
width: 82px;
height: 82px;
font-size: 32px!important;
}
/* Tombol Lompat (Atas Tombol Serang) */
#m-jump.m-m{
right: 4px;
bottom: 94px;
width: 56px;
height: 56px;
font-size: 24px!important;
}
/* Tombol Roll / Dodge (Kiri Tombol Serang) */
#m-roll.m-m{
right: 94px;
bottom: 4px;
width: 56px;
height: 56px;
font-size: 24px!important;
}
.m-s{
position: relative!important;
width:46px;
height:46px;
font-size:18px!important;
border-radius:14px!important;
border:2px solid #7c2d12!important;
background-color:#ea580c!important;
box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.35)!important;
background-size:72% 72%!important;
background-position:center!important;
background-repeat:no-repeat!important;
backdrop-filter:blur(4px);
transition:transform .12s ease-out, box-shadow .15s, border-color .15s;
}
.m-s:hover{
border-color:#9a3412!important;
box-shadow:0 6px 16px rgba(0,0,0,0.6), 0 0 10px rgba(234,88,12,0.45)!important;
transform:translateY(-2px);
}
.m-s:active, .m-s.pressed{
transform:scale(0.92)!important;
box-shadow:0 2px 6px rgba(0,0,0,0.6), inset 0 2px 5px rgba(0,0,0,0.5)!important;
}
/* Tablet landscape */
@media (max-width: 900px) and (orientation: landscape) {
#joy-zone {
left: 12px;
bottom: 12px;
width: 110px;
height: 110px;
}
#m-buttons {
top: 12px;
right: 12px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
#m-main {
right: 12px;
bottom: 12px;
width: 155px;
height: 155px;
}
#m-attack.m-l { width: 76px; height: 76px; font-size: 28px!important; }
#m-jump.m-m { right: 2px; bottom: 86px; width: 52px; height: 52px; font-size: 22px!important; }
#m-roll.m-m { right: 86px; bottom: 2px; width: 52px; height: 52px; font-size: 22px!important; }
#m-active { right: 98px; bottom: 84px; }
}
/* Small screens */
@media (max-width: 600px) {
.bar .track{width:100px}
body.touch .hslot{ width: 38px; height: 38px; font-size: 18px; }
#joy-zone {
width: 100px;
height: 100px;
left: 8px;
bottom: 8px;
}
#m-buttons {
top: calc(50% - 100px);
}
#m-main {
right: 8px;
bottom: 8px;
width: 145px;
height: 145px;
}
#m-attack.m-l { width: 72px; height: 72px; font-size: 26px!important; }
#m-jump.m-m { right: 2px; bottom: 80px; width: 48px; height: 48px; font-size: 20px!important; }
#m-roll.m-m { right: 80px; bottom: 2px; width: 48px; height: 48px; font-size: 20px!important; }
#m-active { right: 90px; bottom: 78px; }
.m-s{width:40px;height:40px;font-size:15px!important}
}
/* Very small screens */
@media (max-width: 400px) {
body.touch .hslot{ width: 34px; height: 34px; font-size: 16px; }
#joy-zone {
width: 90px;
height: 90px;
left: 4px;
bottom: 4px;
}
#m-buttons {
top: calc(50% - 90px);
gap: 5px;
}
#m-main {
right: 4px;
bottom: 4px;
width: 135px;
height: 135px;
}
#m-attack.m-l{width:66px;height:66px;font-size:24px!important}
#m-jump.m-m{right: 2px; bottom: 72px; width:44px;height:44px;font-size:18px!important}
#m-roll.m-m{right: 72px; bottom: 2px; width:44px;height:44px;font-size:18px!important}
#m-active{right: 80px; bottom: 70px;}
.m-s{width:36px;height:36px;font-size:13px!important}
}
/* ==== Overlays ==== */
#loading,#start,#death{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#16281a 0%,#060a06 100%);text-align:center}
.loader{width:46px;height:46px;border:4px solid rgba(255,255,255,.15);border-top-color:#8fe07a;border-radius:50%;animation:spin .9s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
#start h1,#death h1{font-family:'Press Start 2P',monospace;font-size:clamp(18px,4vw,34px);color:#bfe6a0;text-shadow:0 0 24px rgba(120,220,100,.4),0 3px 0 #000;margin-bottom:16px;line-height:1.5}
#death h1{color:#ff8577}
.tagline{opacity:.8;margin-bottom:18px;font-size:14px}
.feats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.feats span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);padding:6px 12px;border-radius:16px;font-size:12px}
.big{
font-family:'Press Start 2P',monospace;font-size:12px;
background:linear-gradient(180deg,#f97316 0%,#ea580c 55%,#c2410c 100%);
border:2px solid #541c08;color:#ffffff;
padding:14px 24px;border-radius:4px;cursor:pointer;margin:4px 0;
box-shadow:0 4px 0 #541c08, inset 0 1px 2px rgba(255,255,255,0.45);
text-shadow:0 2px 3px rgba(0,0,0,0.65);
transition:transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s, background 0.15s;
outline:none;position:relative;
}
.big:hover{
background:linear-gradient(180deg,#fb923c 0%,#f97316 55%,#ea580c 100%);
border-color:#ffd24d;
transform:translateY(-2px);
box-shadow:0 8px 16px rgba(234,88,12,0.5), 0 5px 0 #541c08, inset 0 1px 2px rgba(255,255,255,0.6);
}
.big:active{
transform:translateY(2px) scale(0.97);
box-shadow:0 1px 0 #541c08, inset 0 2px 4px rgba(0,0,0,0.4);
}
#start-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#death-stats{opacity:.85;margin-bottom:18px;font-size:14px}
#levelup{position:fixed;top:34%;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:26px;color:#ffd24d;text-shadow:0 0 20px rgba(255,200,60,.9);opacity:0;pointer-events:none;z-index:35}
#levelup.show{animation:lup 2s}
@keyframes lup{0%{opacity:0;transform:translateX(-50%) scale(.5)}15%{opacity:1;transform:translateX(-50%) scale(1.15)}30%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
/* ===================================================================
CENTER ALERT — Notifikasi penting di tengah layar (Tas Penuh, dll)
=================================================================== */
#center-alert{
position:fixed;top:44%;left:50%;transform:translate(-50%,-50%) scale(.85);
display:flex;align-items:center;justify-content:center;gap:10px;
opacity:0;pointer-events:none;z-index:95;text-align:center;
padding:14px 26px;border-radius:14px;
background:rgba(20,12,12,.94);
border:2px solid #ef4444;
color:#fee2e2;font-family:'Press Start 2P',monospace;font-size:14px;
text-shadow:0 0 16px rgba(239,68,68,.75);
box-shadow:0 12px 40px rgba(0,0,0,.75);
backdrop-filter:blur(4px);
transition:opacity .2s ease-out, transform .2s ease-out;
}
#center-alert.show{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
/* ===================================================================
BANNER DUNGEON — "DUNGEON LV n" besar di tengah layar
-------------------------------------------------------------------
Muncul sekali saat pemain memasuki area dungeon (Dungeon.update →
UI.dungeonBanner). Tembus klik (pointer-events:none) dan hilang sendiri
setelah ~3 detik. Warna judul menandai kesesuaian level:
putih-kuning = sepadan · merah = dungeon terlalu tinggi · hijau = di bawah
=================================================================== */
#dgbanner{
position:fixed;top:26%;left:50%;transform:translateX(-50%) scale(.85);
display:flex;flex-direction:column;align-items:center;gap:6px;
opacity:0;pointer-events:none;z-index:36;text-align:center;
padding:14px 26px;border-radius:14px;
background:linear-gradient(180deg,rgba(8,10,16,.72),rgba(8,10,16,.38));
border:1px solid rgba(255,210,77,.35);
box-shadow:0 10px 40px rgba(0,0,0,.55);
backdrop-filter:blur(3px);
}
#dgbanner b{
font-family:'Press Start 2P',monospace;
font-size:clamp(18px,4.6vw,34px);letter-spacing:2px;
color:#ffd24d;text-shadow:0 0 22px rgba(255,190,50,.9),0 3px 0 #000;
}
#dgbanner i{font-style:normal;font-size:clamp(11px,2.6vw,15px);color:#e8f0d8;opacity:.92}
#dgbanner u{text-decoration:none;font-size:clamp(10px,2.3vw,13px);color:#bfe6a0;opacity:.9}
#dgbanner.hard b{color:#ff8577;text-shadow:0 0 22px rgba(255,90,70,.9),0 3px 0 #000}
#dgbanner.hard u{color:#ffb0a8}
#dgbanner.easy b{color:#9fe08a;text-shadow:0 0 22px rgba(120,220,100,.85),0 3px 0 #000}
/* DUNGEON CLEAR: hijau-emas kemenangan, bingkai lebih terang dari biasanya */
#dgbanner.clear{border-color:rgba(150,240,150,.55)}
#dgbanner.clear b{color:#8ff0a6;text-shadow:0 0 26px rgba(110,240,150,.95),0 3px 0 #000}
#dgbanner.clear i{color:#dff6e2}
#dgbanner.clear u{color:#bfe6a0}
#dgbanner.show{animation:dgb 3.2s ease-out}
@keyframes dgb{
0%{opacity:0;transform:translateX(-50%) scale(.7)}
10%{opacity:1;transform:translateX(-50%) scale(1.06)}
18%{transform:translateX(-50%) scale(1)}
78%{opacity:1;transform:translateX(-50%) scale(1)}
100%{opacity:0;transform:translateX(-50%) scale(1.02)}
}
/* ===================================================================
POPUP NOTIFIKASI PETI HARTA KARUN DI TENGAH LAYAR
=================================================================== */
#chest-popup{
position:fixed;top:32%;left:50%;transform:translateX(-50%) scale(.85);
display:flex;flex-direction:column;align-items:center;gap:10px;
opacity:0;pointer-events:none;z-index:90;text-align:center;
padding:18px 32px 20px;border-radius:16px;
background:linear-gradient(180deg,rgba(18,22,32,.95),rgba(10,12,18,.90));
border:2px solid rgba(255,210,77,.75);
box-shadow:0 14px 50px rgba(0,0,0,.8),0 0 28px rgba(255,200,60,.35);
backdrop-filter:blur(4px);
max-width:90vw;
min-width:320px;
}
#chest-popup .cp-title{
font-family:'Press Start 2P',monospace;
font-size:clamp(13px,2.8vw,18px);letter-spacing:1.5px;
color:#ffd24d;text-shadow:0 0 20px rgba(255,190,50,.9),0 2px 0 #000;
}
#chest-popup .cp-sub{
font-family:'Rajdhani',sans-serif;
font-size:clamp(12px,2.4vw,15px);font-weight:600;
color:#9fe08a;margin-top:-4px;letter-spacing:.5px;
}
#chest-popup .cp-items{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:6px;max-width:540px;
}
#chest-popup .cp-chip{
font-family:'Rajdhani',sans-serif;
font-size:clamp(13px,2.4vw,16px);font-weight:700;letter-spacing:.5px;
color:#f8f4eb;background:rgba(255,255,255,.08);
border:1px solid rgba(255,210,77,.35);border-radius:8px;
padding:6px 14px;display:inline-flex;align-items:center;gap:6px;
box-shadow:0 2px 8px rgba(0,0,0,.4);
}
#chest-popup.show{animation:cpop-anim 4.2s ease-out}
@keyframes cpop-anim{
0%{opacity:0;transform:translateX(-50%) scale(.7)}
8%{opacity:1;transform:translateX(-50%) scale(1.04)}
14%{transform:translateX(-50%) scale(1)}
80%{opacity:1;transform:translateX(-50%) scale(1)}
100%{opacity:0;transform:translateX(-50%) scale(1.02) translateY(-10px)}
}
@media(max-width:700px){.grid{grid-template-columns:repeat(7,44px)}.slot{width:44px;height:44px;font-size:20px}.hslot{width:42px;height:42px;font-size:21px}}
/* ===================================================================
PERABOT, DIALOG NPC & TOMBOL AKSI
=================================================================== */
/* layar menggelap sesaat ketika pemain tidur */
#sleepfade{position:fixed;inset:0;background:#05070d;opacity:0;pointer-events:none;
z-index:60;transition:opacity .45s ease;}
#sleepfade.on{opacity:1;}
/* balon dialog yang menempel di atas kepala NPC */
#npcbubble{position:fixed;z-index:42;transform:translate(-50%,-100%);
max-width:min(320px,72vw);padding:10px 12px;border-radius:14px;
background:linear-gradient(180deg,rgba(24,30,42,.97),rgba(14,18,26,.97));
border:1px solid rgba(255,225,150,.35);color:#f2ecdd;font-size:13px;
line-height:1.45;box-shadow:0 10px 26px rgba(0,0,0,.5);pointer-events:auto;}
#npcbubble:after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-8px;
border:8px solid transparent;border-top-color:rgba(14,18,26,.97);border-bottom:0;}
#npcbubble.pop{animation:bubpop .22s cubic-bezier(.2,1.5,.4,1);}
@keyframes bubpop{from{transform:translate(-50%,-90%) scale(.86);opacity:0}
to{transform:translate(-50%,-100%) scale(1);opacity:1}}
#npcbubble b{color:#ffe08a;display:inline-flex;align-items:center;gap:4px;}
#npcbubble .tico, #npcbubble .bubble-npc-ico{width:22px;height:22px;vertical-align:-4px;object-fit:contain;display:inline-block;margin-right:2px;}
#npcbubble .inline-ico, .npcsay .inline-ico{width:18px;height:18px;vertical-align:-3px;object-fit:contain;display:inline-block;margin:0 2px;}
#npcbubble i{color:#9fb7d0;font-style:normal;font-size:11px;}
#npcbubble .bq{color:#c9dcff;font-size:12px;}
#npcbubble .bbtn{display:flex;gap:8px;margin-top:9px;}
#npcbubble .bch{flex:1;padding:8px 6px;border-radius:10px;border:0;cursor:pointer;
font-size:13px;font-weight:700;color:#10141c;background:#d8dee8;}
#npcbubble .bch.yes{background:linear-gradient(180deg,#8fe07a,#5cbf4a);}
#npcbubble .bch.yes.dim{background:linear-gradient(180deg,#b9c4b4,#8f9b8c);}
#npcbubble .bch.no{background:linear-gradient(180deg,#f0a08a,#d8624a);}
#npcbubble .bch:active{transform:scale(.95);}
/* tombol aksi kontekstual */
#actbtn{position:fixed;left:50%;bottom:calc(20% + 34px);transform:translateX(-50%);
z-index:41;display:flex;align-items:center;gap:8px;padding:9px 15px;
border-radius:999px;cursor:pointer;user-select:none;white-space:nowrap;
background:linear-gradient(180deg,rgba(30,38,52,.94),rgba(16,21,30,.94));
border:1px solid rgba(255,224,138,.45);color:#f6f0e2;font-size:13px;
font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.45);}
#actbtn .k{display:inline-grid;place-items:center;min-width:20px;height:20px;
padding:0 5px;border-radius:6px;background:#ffe08a;color:#1b1f26;font-size:11px;}
#actbtn.pop{animation:actpop .2s ease;}
@keyframes actpop{from{transform:translateX(-50%) scale(.9);opacity:.5}
to{transform:translateX(-50%) scale(1);opacity:1}}
#actbtn:active{transform:translateX(-50%) scale(.95);}
/* bar skill dipindah ke kanan bawah pada layar besar (PC) */
@media (min-width:820px){
body #skillbar{left:auto;right:16px;bottom:104px;transform:none;
flex-direction:row;justify-content:flex-end;}
#actbtn{left:auto;right:16px;bottom:186px;transform:none;}
#actbtn.pop{animation:actpopr .2s ease;}
@keyframes actpopr{from{transform:scale(.9);opacity:.5}to{transform:scale(1);opacity:1}}
#actbtn:active{transform:scale(.95);}
}
@media (max-width:819px){ #actbtn .k{display:none;} }
/* label aksi yang menempel di atas objek/NPC sasaran */
#actbtn.world{left:0;top:0;bottom:auto;right:auto;
transform:translate(-50%,-100%);padding:6px 12px;font-size:12px;}
#actbtn.world.pop{animation:actpopw .2s ease;}
@keyframes actpopw{from{transform:translate(-50%,-90%) scale(.9);opacity:.4}
to{transform:translate(-50%,-100%) scale(1);opacity:1}}
#actbtn.world:active{transform:translate(-50%,-100%) scale(.95);}
/* celetukan singkat NPC (lapar, terima kasih, dll) */
.npcsay{position:fixed;z-index:40;transform:translate(-50%,-100%);
padding:5px 10px;border-radius:11px;pointer-events:none;white-space:nowrap;
background:rgba(18,23,32,.92);border:1px solid rgba(255,255,255,.18);
color:#e9e2d2;font-size:12px;box-shadow:0 6px 14px rgba(0,0,0,.4);
transition:opacity .25s linear;}
.npcsay:after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-6px;
border:6px solid transparent;border-top-color:rgba(18,23,32,.92);border-bottom:0;}
/* ====== HEADER PANEL: benar-benar di atas panel (bukan menutupi isi) ======
PERBAIKAN: dulu `.panel` sendiri yang di-scroll dan `h2` hanya sticky, jadi
saat isi digulir judulnya menumpuk di atas item (isi lewat di baliknya, ada
sisa terlihat di tepi). Sekarang panel memakai FLEX COLUMN:
- `.panel` tidak lagi scroll (overflow hidden)
- `h2` (header) & `#craft-tabs` menjadi baris tetap paling atas
- sisa isi panel masuk ke area scroll sendiri (flex:1, overflow-y:auto)
Dengan begitu header selalu berada PALING ATAS panel dan tidak pernah
menutupi item apa pun saat scroll. */
/* semua anak panel SELAIN header dibungkus area scroll oleh JS (.panel-body).
Fallback: bila belum dibungkus, beri padding & scroll pada anak langsung. */
.panel>.panel-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
padding:14px 22px 18px;min-height:0;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none}
.panel>.panel-body::-webkit-scrollbar{width:0;height:0;display:none}
/* ====== MENU BAG / BLOK / FURNITUR / PET (ICON ONLY) ====================
Elemen ini saudara #panel-bag (BUKAN anaknya) supaya tidak terpotong oleh
overflow:hidden panel. Posisi final dihitung JS (UI.positionBagMenu):
- Desktop: vertikal melayang dempet di sisi kiri panel Tas (icon kotak 50px).
- Mobile / layar pendek: bar horizontal tepat di ATAS panel Tas. */
#bag-float-menu{position:fixed;left:0;top:0;
display:none;flex-direction:column;gap:8px;z-index:35}
#bag-float-menu.show{display:flex}
#bag-float-menu .bag-menu-btn{width:48px;height:48px;border-radius:4px;
border:2px solid #541c08;background-color:#ea580c;
color:#ffffff;line-height:1;
cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 0 0 1.5px #ffd24d;backdrop-filter:blur(4px);
transition:transform .12s, border-color .15s, box-shadow .15s;
display:flex;align-items:center;justify-content:center;padding:0}
#bag-float-menu .bag-menu-btn:hover{
border-color:#ffd24d;
box-shadow:0 6px 12px rgba(0,0,0,.6), 0 0 10px rgba(234,88,12,0.45);
transform:translateY(-2px);
}
#bag-float-menu .menu-ico{width:28px;height:28px;object-fit:contain;display:block}
#bag-float-menu .bag-menu-btn.active{border-color:#ffd24d;color:#ffffff;
background-color:#c2410c;
box-shadow:0 6px 20px rgba(194,65,12,0.5), inset 0 2px 4px rgba(0,0,0,0.4)}
/* Mobile & layar sempit: bar tab horizontal di atas panel Tas */
@media (max-width:768px), (max-height:520px){
#bag-float-menu{
flex-direction:row;gap:8px;
padding:6px 10px;background:rgba(20,16,12,.97);
border:1.5px solid #7c2d12;border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.5);
box-sizing:border-box;max-width:96vw;
justify-content:center;
}
#bag-float-menu .bag-menu-btn{
width:42px;height:42px;border-radius:10px;flex:0 0 auto;
padding:0;transform:none !important;
}
#bag-float-menu .bag-menu-btn:hover{transform:none !important}
#bag-float-menu .menu-ico{width:24px;height:24px}
}
@media (max-width:420px){
#bag-float-menu{padding:4px 6px;gap:6px}
#bag-float-menu .bag-menu-btn{width:36px;height:36px}
#bag-float-menu .menu-ico{width:20px;height:20px}
}
/* ====== TAB KATEGORI CRAFTING (1 baris horizontal rapi) ============== */
#craft-tabs{flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;
justify-content:space-between;gap:6px;overflow-x:auto;overflow-y:hidden;
padding:10px 16px;background:rgba(20,16,12,.96);
border-bottom:1px solid #7c2d12;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#craft-tabs::-webkit-scrollbar{display:none}
.craft-tab{flex:1 1 0;min-width:0;white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;gap:4px;
font-size:11px;font-weight:700;letter-spacing:.01em;
padding:7px 6px;border-radius:4px;cursor:pointer;
background-color:#ea580c;color:#ffffff;
border:1.5px solid #7c2d12;
box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.25);
transition:.15s}
.craft-tab:hover:not(:disabled){background-color:#f97316;color:#ffffff;border-color:#9a3412}
.craft-tab.active{background-color:#c2410c;
color:#ffffff;border-color:#ffd24d;box-shadow:0 0 10px rgba(234,88,12,.5), inset 0 1px 2px rgba(255,255,255,.4)}
.craft-tab:disabled{opacity:.35;cursor:default}
.craft-tab i{font-style:normal;opacity:.8;font-size:9.5px;margin-left:2px}
.craft-tab .tab-ico{width:16px;height:16px;object-fit:contain;flex-shrink:0}
/* ====== TAB KATEGORI KANTONG / TAS ====================================== */
#bag-cat-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0 9px}
.bag-cat-tab{font-size:11px;font-weight:700;letter-spacing:.02em;
padding:5px 9px;border-radius:8px;cursor:pointer;
background-color:#ea580c;color:#ffffff;
border:1.5px solid #7c2d12;transition:.15s;display:inline-flex;align-items:center;gap:3px}
.bag-cat-tab:hover{background-color:#f97316;color:#ffffff;border-color:#9a3412}
.bag-cat-tab.active{background-color:#c2410c;
color:#ffffff;border-color:#7c2d12;box-shadow:0 2px 8px rgba(194,65,12,.4)}
body.touch #bag-cat-tabs{gap:4px;margin:4px 0 7px}
body.touch .bag-cat-tab{font-size:9.5px;padding:4px 7px}
/* ====== tombol simpan manual ============================================
Diletakkan sebagai anak #stats sehingga menempel persis di kanan bar HP &
stamina, dengan ukuran kecil agar tidak menutupi pandangan. #hud memakai
pointer-events:none, jadi tombolnya harus mengaktifkan kembali sendiri. */
#btn-save{position:absolute;left:100%;top:0;margin-left:8px;
pointer-events:auto;z-index:26;width:30px;height:30px;border-radius:9px;
cursor:pointer;background-color:#ea580c;
border:1.5px solid #7c2d12;color:#ffffff;font-size:14px;
line-height:1;padding:0;backdrop-filter:blur(4px);
transition:transform .12s,background .2s,border-color .2s}
#btn-save:hover{border-color:#9a3412}
#btn-save:active{transform:scale(.88)}
#btn-save.ok{background-color:#c2410c;border-color:#7c2d12}
/* ---------- tombol & panel pengaturan musik ---------- */
#btn-music{pointer-events:auto;z-index:26;width:30px;height:30px;border-radius:9px;
cursor:pointer;background-color:#ea580c;
border:1.5px solid #7c2d12;color:#ffffff;font-size:14px;
line-height:1;padding:0;backdrop-filter:blur(4px);margin-left:8px;
transition:transform .12s,background .2s,border-color .2s,opacity .2s}
#btn-music:hover{border-color:#9a3412}
#btn-music:active{transform:scale(.88)}
#btn-music.off{opacity:.45}
#music-panel{width:min(340px,92vw)}
/* tombol gear (settings) di #stats — menempel di kanan bar HP.
#hud memakai pointer-events:none, jadi tombolnya mengaktifkan kembali sendiri. */
#btn-gear{position:absolute;left:100%;top:0;margin-left:8px;
pointer-events:auto;z-index:26;width:34px;height:34px;border-radius:10px!important;
cursor:pointer;
background-color:#ea580c!important;
background-image:url("../buttons/gear.png")!important;
background-size:20px 20px!important;
background-position:center, center!important;
background-repeat:no-repeat, no-repeat!important;
border:2px solid #7c2d12!important;color:#ffffff;font-size:14px;
line-height:1;padding:0;backdrop-filter:blur(4px);box-shadow:0 3px 10px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.4)!important;
display:flex;align-items:center;justify-content:center;
transition:transform .12s,background .2s,border-color .2s,opacity .2s}
#btn-gear:active{transform:scale(.88)}
#btn-gear:hover{border-color:#9a3412!important;box-shadow:0 0 10px rgba(234,88,12,0.45)!important}
body.touch #btn-gear{width:36px;height:36px;font-size:16px}
/* tombol pesan / mailbox di #stats (khusus multiplayer, di samping tombol gear) */
#btn-mail{position:absolute;left:100%;top:0;margin-left:48px;
pointer-events:auto;z-index:26;width:34px;height:34px;border-radius:10px!important;
cursor:pointer;
background-color:#ea580c!important;
background-image:url("../buttons/ui_scroll.png")!important;
background-size:20px 20px!important;
background-position:center, center!important;
background-repeat:no-repeat, no-repeat!important;
border:2px solid #7c2d12!important;color:#ffffff;font-size:14px;
line-height:1;padding:0;backdrop-filter:blur(4px);box-shadow:0 3px 10px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.4)!important;
display:flex;align-items:center;justify-content:center;
transition:transform .12s,background .2s,border-color .2s,opacity .2s}
#btn-mail:active{transform:scale(.88)}
#btn-mail:hover{border-color:#9a3412!important;box-shadow:0 0 10px rgba(234,88,12,0.45)!important}
body.touch #btn-mail{left:100%;margin-left:50px;width:36px;height:36px;font-size:16px}
/* panel settings */
#panel-settings{width:min(420px,94vw)}
.set-sec{border-bottom:1px solid rgba(255,255,255,.1);padding:10px 2px}
.set-sec:last-of-type{border-bottom:none}
.set-h{font-weight:700;font-size:14px;margin-bottom:6px;color:#ffe08a}
.set-lang-row{display:flex;flex-wrap:wrap;gap:8px}
.set-lang{padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#d8e8c8}
.set-lang:hover{background:rgba(255,255,255,.12)}
.set-lang.active{background:rgba(107,196,90,.25);border-color:#6da55f;color:#c8f0b0}
.mus-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:8px 2px;font-size:13px;color:#e8f0d8}
.mus-tg{pointer-events:auto;min-width:64px;padding:6px 10px;border-radius:20px;
cursor:pointer;font-weight:700;font-size:12px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#cfd8c8}
.mus-tg.on{background:rgba(107,196,90,.25);border-color:#6da55f;color:#c8f0b0}
#mus-vol{flex:1;pointer-events:auto;accent-color:#9fd77f;cursor:pointer}
/* =========================================================================
TATA LETAK MOBILE — ZONA ANTI-TUMPANG-TINDIH
-------------------------------------------------------------------------
Layar sentuh dibagi menjadi zona tetap supaya tidak ada dua elemen yang
saling menutupi:
┌───────────────────────────────────────────┐
│ bar HP/ST/HU + 💾 | jam | tombol menu │ ← atas
│ toast ikon rekan│ ← rekan di KANAN
│ │
│ tombol aksi │
│ [jurus] (lompat) │ ← kluster kanan
│ [ hotbar ] [dash] (serang) │
│ (area analog dinamis) │ ← pita kontrol
└───────────────────────────────────────────┘
Semua posisi vertikal di zona bawah dihitung dari satu variabel --ctrl
(tinggi pita kontrol) sehingga tidak mungkin bertabrakan.
========================================================================= */
body.touch{--ctrl:170px;--pad:12px}
/* ---- zona atas: rekan di KANAN (bar HP/stamina/XP di kiri tetap bebas).
Ditaruh di bawah deretan tombol menu (#m-buttons) supaya keduanya tidak
bertumpuk, dan tidak lagi menutupi bar HP/stamina/XP di kiri. ---- */
body.touch #team{
right:var(--pad);left:auto;top:176px;
flex-direction:column;gap:6px;flex-wrap:nowrap;
}
body.touch #toast{top:120px;left:var(--pad);max-width:52vw}
body.touch #m-buttons{
top:64px;right:var(--pad);left:auto;
flex-direction:row;flex-wrap:wrap;justify-content:flex-end;
gap:6px;max-width:172px;
}
body.touch #topright{padding:5px 10px;font-size:12px}
body.touch #btn-save{width:34px;height:34px;font-size:16px}
/* ---- pita kontrol bawah: AREA analog kiri (dinamis), kluster serang kanan ----
#joy-zone bukan lagi kotak kecil di pojok, melainkan area sentuh lebar &
tak terlihat. Ring analognya (#joy-base) diposisikan absolut oleh JS tepat
di bawah jari, persis seperti game MOBA. */
body.touch #joy-zone{
left:0;bottom:0;width:min(52vw,320px);
height:max(150px,calc(var(--ctrl) + 4px));
display:block;background:none;
}
body.touch #joy-base{
width:124px;height:124px;left:auto;top:auto;
transform:translate(-50%,-50%);opacity:.34;
transition:opacity .18s ease,box-shadow .18s ease,width .1s,height .1s;
}
body.touch #joy-zone.active #joy-base{opacity:1}
body.touch #m-main{right:10px;bottom:10px;width:156px;height:156px}
/* ---- hotbar mobile: TENGAH bawah (di atas pita kontrol), bukan kiri ---- */
body.touch #hotbar{
left:50%;right:auto;transform:translateX(-50%);
bottom:calc(var(--ctrl) + 6px);
max-width:calc(100vw - 16px);flex-wrap:nowrap;gap:4px;
}
body.touch .hslot{width:min(42px,calc((100vw - 44px)/7));height:42px}
/* ---- tombol jurus: kolom vertikal di sisi KANAN, tepat di atas kluster
serang/dash sehingga semua kendali tempur ada dalam jangkauan jempol
kanan (sebelumnya melayang di tengah, jauh dari tombol serang) ---- */
body.touch #m-active{
right:14px;left:auto;transform:none;
bottom:calc(var(--ctrl) + 6px);
flex-direction:column-reverse;gap:8px;align-items:center;
}
/* dua jurus terakhir dibungkus ke kolom kedua bila skill > 3 */
body.touch #m-active{flex-wrap:wrap-reverse;max-height:190px}
/* ---- tombol aksi kontekstual: di atas kolom jurus ---- */
body.touch #actbtn:not(.world){
right:14px;left:auto;transform:none;
bottom:calc(var(--ctrl) + 200px);
}
/* ---- layar pendek / landscape: pita kontrol dikecilkan ---- */
@media (orientation:landscape){
body.touch{--ctrl:140px}
body.touch #team{top:164px}
body.touch #toast{top:112px;max-width:38vw}
body.touch #m-buttons{top:56px;max-width:190px}
body.touch #joy-zone{width:min(44vw,340px)}
body.touch #joy-base{width:112px;height:112px}
body.touch #m-main{width:140px;height:140px}
body.touch #m-active{max-height:150px}
body.touch #actbtn:not(.world){bottom:calc(var(--ctrl) + 160px)}
}
@media (max-width:400px){
body.touch{--ctrl:156px;--pad:8px}
body.touch #team{top:168px}
body.touch .hslot{height:38px}
body.touch #m-main{width:138px;height:138px}
body.touch #joy-base{width:110px;height:110px}
body.touch #hotbar{max-width:calc(100vw - 12px)}
body.touch .hslot{width:min(38px,calc((100vw - 40px)/7))}
}
/* layar sangat pendek (misal ponsel landscape 360px): rapatkan lagi */
@media (max-height:420px){
body.touch{--ctrl:126px}
body.touch #m-active{max-height:120px}
body.touch #actbtn:not(.world){bottom:calc(var(--ctrl) + 132px)}
}
/* panel digeser sedikit ke atas & dipendekkan supaya bagian bawahnya tidak
tertutup joystick/tombol serang (panel memakai position:fixed + translate,
jadi yang digeser adalah titik pusatnya) */
body.touch .panel{max-height:72vh;top:42%}
/* =========================================================================
BATAS TINGGI ZONA HUD (mobile)
-------------------------------------------------------------------------
Toast dan ikon tim adalah daftar yang TUMBUH ke bawah. Sebelumnya
keduanya hanya diberi titik awal (top) tanpa batas akhir, jadi begitu
notifikasi menumpuk atau tim terisi penuh, ujung bawahnya masuk ke area
hotbar dan kluster tombol — itulah tumpang tindih yang terlihat di layar
kecil.
--hb = tinggi baris hotbar (slot + jarak). Semua batas di bawah dihitung
dari tinggi layar dikurangi pita kontrol (--ctrl) dan hotbar, sehingga
daftar berhenti tepat sebelum menyentuhnya. Kelebihannya dipotong
(overflow:hidden) — notifikasi terbaru selalu yang paling atas dan
terbaca, bukan menutupi tombol.
========================================================================= */
body.touch{--hb:64px}
body.touch #toast{
max-height:calc(100vh - 120px - var(--ctrl) - var(--hb) - 16px);
overflow:hidden;
}
body.touch #team{
max-height:calc(100vh - 176px - var(--ctrl) - var(--hb) - 16px);
overflow:hidden;
}
/* kluster tombol kanan atas tidak boleh terpotong: semua ikon menu
(tas/craft/skill/makan/chat/bicara) harus selalu terlihat */
body.touch #m-buttons{max-height:none;overflow:visible}
/* hotbar selalu di atas lapis notifikasi bila keduanya berdekatan */
body.touch #hotbar{z-index:19}
body.touch #toast{z-index:11}
@media (orientation:landscape){
body.touch{--hb:52px}
}
@media (max-width:400px){
body.touch{--hb:48px}
/* layar sempit: ikon tim dipendekkan lagi supaya notifikasi & tim
tidak berebut ruang kolom kanan */
body.touch #team{max-height:calc(100vh - 168px - var(--ctrl) - var(--hb) - 12px)}
body.touch #m-buttons{max-height:none}
}
@media (max-height:420px){
body.touch{--hb:44px}
body.touch #m-buttons{max-height:72px}
}
/* =============================================================================
TOMBOL KECIL (.mini)
Dipakai panel Peti (titip semua) & panel Quest (ambil/lepas quest).
Sebelumnya class ini belum punya style sehingga tampil sebagai tombol
default browser yang bertabrakan dengan tema HUD.
============================================================================= */
.mini{
font-family:inherit;font-size:11px;letter-spacing:.3px;cursor:pointer;
padding:6px 10px;border-radius:8px;color:#e8f2e0;
background:rgba(60,92,52,.55);border:1px solid rgba(160,230,150,.38);
transition:background .15s,border-color .15s,transform .1s;
}
.mini:hover{background:rgba(78,120,66,.72);border-color:rgba(190,245,175,.6)}
.mini:active{transform:translateY(1px)}
.mini.dim{opacity:.5;cursor:default;background:rgba(40,48,40,.5);
border-color:rgba(255,255,255,.14)}
.mini.dim:hover{background:rgba(40,48,40,.5);border-color:rgba(255,255,255,.14)}
/* =============================================================================
PANEL QUEST
============================================================================= */
#panel-quest{width:min(600px,94vw)}
/* satu kartu quest: judul, tujuan, bar progres, hadiah, tombol */
.qcard{
background:rgba(10,16,10,.6);border:1px solid rgba(255,255,255,.13);
border-left:3px solid rgba(160,200,140,.5);
border-radius:10px;padding:10px 12px;margin-bottom:8px;
}
/* quest yang tujuannya sudah terpenuhi diberi aksen emas */
.qcard.ok{border-left-color:#ffd24d;background:rgba(40,34,10,.55)}
/* tawaran dari papan dibedakan dengan aksen biru & latar lebih redup */
.qcard.offer{border-left-color:#6fa8dc;background:rgba(10,14,20,.5)}
.qh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qh b{font-size:13px;color:#dfeecf}
.qlv{font-size:10px;opacity:.6;white-space:nowrap}
.qdesc{font-size:11px;opacity:.72;margin:4px 0;line-height:1.5;font-style:italic}
.qgoal{font-size:11px;margin:5px 0 4px;color:#cfe0c0}
.qcard.ok .qgoal{color:#ffd24d}
.qrew{font-size:11px;opacity:.8;margin-top:5px;color:#ffdf9a}
.qbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
/* ---- RARITY QUEST (4 tingkat) ----
Warna aksen kartu mengikuti rarity; badge kecil di bawah judul menyebut
namanya. Kelas r-* dipasang Quest.renderPanel dari d.rar. */
.qmeta{margin:3px 0 2px}
.qrar{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.4px;
padding:1px 7px;border-radius:9px;border:1px solid currentColor;
background:rgba(255,255,255,.05)}
.qcard.r-common {border-left-color:#b8c0cc}
.qcard.r-uncommon{border-left-color:#63d471}
.qcard.r-rare {border-left-color:#4da3ff;background:rgba(10,18,30,.55)}
.qcard.r-epic {border-left-color:#b46bff;background:rgba(22,12,32,.6);
box-shadow:inset 0 0 18px rgba(180,107,255,.12)}
/* quest siap klaim tetap memakai aksen emas (menimpa warna rarity) */
.qcard.ok{border-left-color:#ffd24d!important}
/* bar progres tujuan quest, dipakai panel & pelacak HUD */
.qbar{height:5px;border-radius:3px;overflow:hidden;
background:rgba(255,255,255,.12)}
.qbar>i{display:block;height:100%;border-radius:3px;
background:linear-gradient(90deg,#7fc35f,#bfe6a0);transition:width .25s}
.qcard.ok .qbar>i{background:linear-gradient(90deg,#e8a52c,#ffd24d)}
/* =============================================================================
PELACAK QUEST DI HUD (kanan layar, di bawah ikon rekan)
HANYA PENAMPIL PROGRES — tidak bisa diklik. `pointer-events:none` membuat
klik/sentuhan menembus ke game, sehingga menekan pelacak tidak lagi membuka
Papan Quest (dulu ini celah untuk mengambil quest dari mana saja).
Otomatis disembunyikan bila tidak ada quest aktif (Quest.renderTracker).
============================================================================= */
#questtrack{
position:fixed;right:12px;top:50%;transform:translateY(-50%);
width:184px;z-index:13;
pointer-events:none;cursor:default;user-select:none;
padding:7px 9px;border-radius:10px;
background:rgba(24,16,10,.82);border:1.5px solid #7c2d12;
backdrop-filter:blur(4px);
}
#questtrack *{pointer-events:none}
#questtrack::-webkit-scrollbar{width:0}
.qt-h{font-size:10px;letter-spacing:1px;text-transform:uppercase;
color:#ea580c;margin-bottom:5px;font-weight:700}
.qt-row{margin-bottom:7px}
.qt-row:last-child{margin-bottom:0}
.qt-n{display:block;font-size:11px;line-height:1.35;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-c{display:block;font-size:10px;opacity:.7;margin:1px 0 3px}
.qt-row.ok .qt-n,.qt-row.ok .qt-c{color:#ffd24d;opacity:1}
/* mobile: pelacak dikecilkan & digeser agar tidak menabrak tombol kontrol.
Tanpa batas tinggi — isinya paling banyak 3 baris quest (Quest.MAX). */
body.touch #questtrack{
width:148px;right:var(--pad);
top:auto;bottom:calc(var(--ctrl) + var(--hb) + 18px);transform:none;
}
@media (max-width:400px){
body.touch #questtrack{width:132px}
}
/* =========================================================================
CHAT (ENTER)
-------------------------------------------------------------------------
Kotak chat muncul di kiri, tepat di bawah bar Lv (#stats). Tersembunyi
sampai pemain menekan ENTER; selama terbuka, kelas .show dipasang dan
body mendapat kelas chat-open (dipakai untuk menggeser toast).
========================================================================= */
#chat{position:absolute;top:154px;left:12px;width:min(300px,62vw);
display:none;flex-direction:column;gap:4px;z-index:14;pointer-events:auto}
#chat.show{display:flex}
#chat.peek{display:flex !important;pointer-events:none !important}
#chat.peek #chat-row, #chat.peek #chat-tabs{display:none !important}
/* Tab Chat & Notifikasi */
#chat-tabs{display:flex;gap:4px;margin-bottom:2px}
.chat-tab{font-family:inherit;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;
border:1.5px solid #7c2d12;background-color:#ea580c;color:#ffffff;cursor:pointer;transition:.15s}
.chat-tab:hover{background-color:#f97316;color:#fff;border-color:#9a3412}
.chat-tab.active{border-color:#7c2d12;background-color:#c2410c;color:#ffffff;box-shadow:0 0 8px rgba(234,88,12,0.4)}
.notif-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px #ef4444;display:inline-block;margin-left:4px;vertical-align:middle}
#chat-log{display:flex;flex-direction:column;gap:3px;
max-height:148px;overflow:hidden}
#notif-log{display:flex;flex-direction:column;gap:3px;
max-height:148px;overflow-y:auto;overflow-x:hidden}
.notif-line{background:rgba(14,16,22,0.82);border:1px solid rgba(255,255,255,0.16);
border-radius:8px;padding:3px 8px;font-size:10.5px;line-height:1.35;color:#f1f5f9;
backdrop-filter:blur(4px);word-break:break-word;animation:tin .2s;display:flex;align-items:center;gap:4px}
.notif-line.r-mythic{border-color:#ef4444;background:rgba(48,10,10,0.92);color:#fee2e2;box-shadow:0 0 10px rgba(239,68,68,0.38)}
.notif-line.r-legendary{border-color:#f59e0b;background:rgba(45,30,8,0.88);color:#fef08a;box-shadow:0 0 8px rgba(245,158,11,0.28)}
.notif-line.r-epic{border-color:#a855f7;background:rgba(35,16,48,0.88);color:#f3e8ff;box-shadow:0 0 8px rgba(168,85,247,0.28)}
.notif-line.r-rare{border-color:#38bdf8;background:rgba(10,30,48,0.88);color:#e0f2fe}
.chat-line{background:rgba(8,12,8,.74);border:1px solid rgba(255,255,255,.14);
border-radius:8px;padding:3px 9px;font-size:11px;line-height:1.4;
backdrop-filter:blur(4px);word-break:break-word;animation:tin .25s}
.chat-line.sys{color:#ea580c;font-family:Consolas,'Courier New',monospace}
.chat-line.me b{color:#ffe066}
#chat-row{display:flex;align-items:center;gap:6px;background:rgba(20,16,12,.88);
border:1.5px solid #7c2d12;border-radius:9px;padding:5px 9px;
box-shadow:0 0 10px rgba(234,88,12,.2)}
#chat-row .cico{font-size:13px}
#chat-input{flex:1;min-width:0;background:none;border:none;outline:none;
color:#ffedd5;font-size:12px;font-family:inherit}
#chat-input::placeholder{color:rgba(232,230,216,.35)}
/* tombol kirim berada tepat di samping teks yang diketik */
#chat-send{
flex:0 0 auto;border:1.5px solid #7c2d12;border-radius:8px;
background-color:#ea580c;color:#ffffff;font-size:13px;line-height:1;
padding:5px 10px;cursor:pointer;transition:background .15s,transform .08s,border-color .15s;
}
#chat-send:hover{background-color:#f97316;border-color:#9a3412}
#chat-send:active{transform:scale(.93);background-color:#c2410c}
body.touch #chat-send{padding:8px 13px;font-size:15px}
/* saat chat terbuka, notifikasi toast digeser turun agar tidak menutupinya */
body.chat-open #toast{top:300px}
body.touch.chat-open #toast{top:auto}
/* =========================================================================
TERMINAL RAHASIA
-------------------------------------------------------------------------
Panel konsol dev bergaya terminal (hijau-di-hitam). Isi dibangun dinamis
oleh Chat.renderTerm(): tombol item/NPC/monster dikelompokkan per kategori.
========================================================================= */
#panel-term{background:rgba(20,16,12,.96);border:2px solid #7c2d12;
box-shadow:0 12px 50px rgba(0,0,0,.8),0 0 24px rgba(234,88,12,.2)}
#panel-term h2{color:#ea580c;font-family:Consolas,'Courier New',monospace;
text-shadow:0 0 10px rgba(234,88,12,.55)}
#panel-term .x{color:#ea580c}
.term-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
background:rgba(234,88,12,.10);border:1.5px solid #7c2d12;
border-radius:8px;padding:8px 12px;font-size:12px;color:#fed7aa}
.term-ctl label{display:flex;gap:6px;align-items:center;cursor:pointer}
.term-ctl input[type=number]{width:56px;background:#2a1205;
border:1.5px solid #7c2d12;color:#ffedd5;border-radius:6px;
padding:4px 6px;font-family:Consolas,monospace;font-size:13px;outline:none}
.term-ctl input[type=checkbox]{accent-color:#ea580c;width:15px;height:15px}
.term-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 8px}
.term-tab{background-color:#ea580c;border:1.5px solid #7c2d12;color:#ffffff;
border-radius:6px;padding:4px 9px;font-size:11px;font-family:Consolas,monospace;cursor:pointer;transition:.15s}
.term-tab:hover{background-color:#f97316;border-color:#9a3412;color:#fff}
.term-tab.active{background-color:#c2410c;border-color:#7c2d12;color:#fff;font-weight:700;box-shadow:0 0 8px rgba(234,88,12,.4)}
.term-cat-wrap{display:flex;flex-direction:column}
.term-sub{margin:12px 0 6px;font-family:Consolas,'Courier New',monospace;
font-size:11px;color:#ea580c;letter-spacing:1.5px;text-transform:uppercase;
border-bottom:1px dashed rgba(234,88,12,.35);padding-bottom:4px}
.term-grid{display:flex;flex-wrap:wrap;gap:6px}
.tbtn{display:flex;align-items:center;gap:7px;background:rgba(234,88,12,.15);
border:1.5px solid #7c2d12;color:#ffedd5;border-radius:6px;
padding:5px 8px;font-size:11px;font-family:Consolas,monospace;cursor:pointer;
transition:background .12s,border-color .12s}
.tbtn:hover,.tbtn:active{border-color:#7c2d12;background-color:#ea580c;color:#fff;
box-shadow:0 0 9px rgba(234,88,12,.35)}
.tbtn .te{font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.tbtn .te img{width:18px;height:18px;vertical-align:middle;display:inline-block;object-fit:contain}
.tbtn small{opacity:.6;font-size:9px;margin-left:2px}
#term-log{margin-top:14px;background:#020804;border:1px solid rgba(125,255,157,.25);
border-radius:8px;padding:8px 10px;min-height:52px;max-height:112px;
overflow-y:auto;font-family:Consolas,'Courier New',monospace;font-size:11px}
#term-log div{color:#7dff9d;line-height:1.55;word-break:break-word}
#term-log div:last-child{color:#eaffea}
.term-tip{font-size:11px;opacity:.65;margin-top:10px;line-height:1.5;
font-family:Consolas,monospace}
/* =========================================================================
KOIN (HUD)
========================================================================= */
#coinbox{margin-top:3px;font-size:13px;color:#ffe08a;font-weight:700;
text-shadow:0 1px 2px #000;letter-spacing:.3px}
#coinbox b{color:#ffd24d;font-size:14px}
/* =========================================================================
PANEL TOKO / PEDAGANG
========================================================================= */
.shop-coin{font-size:14px;margin-bottom:8px;background:rgba(255,210,77,.1);
border:1px solid rgba(255,210,77,.3);border-radius:8px;padding:7px 12px;
display:inline-block}
.shop-coin b{color:#ffd24d;font-size:17px}
#shop-buy{display:flex;flex-direction:column;gap:6px}
/* TOKO DUNGEON MASTER: 10 baris changer + judul + catatan bisa melewati tinggi
panel di layar ponsel. Daftarnya diberi tinggi maksimum & scroll sendiri,
sehingga judul panel dan tombol tutup tetap terlihat. */
#shop-buy.dm-list{max-height:52vh;overflow-y:auto;padding-right:4px}
#shop-buy.dm-list::-webkit-scrollbar{width:6px}
#shop-buy.dm-list::-webkit-scrollbar-thumb{background:rgba(180,150,255,.45);border-radius:3px}
.shop-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 11px}
.shop-row .s-ico{font-size:24px}
.shop-row .s-info{flex:1;font-size:13px}
.shop-row .s-info i{font-size:11px;opacity:.9}
.shop-row .s-buy{background-color:#ea580c;border:1.5px solid #7c2d12;color:#fff;
border-radius:7px;padding:7px 13px;cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap;transition:background-color .15s,border-color .15s}
.shop-row .s-buy:disabled{opacity:.35;cursor:not-allowed}
.shop-row .s-buy:not(:disabled):hover{background-color:#f97316;border-color:#9a3412}
#shop-sell-bag{display:flex;flex-wrap:wrap;gap:6px}
.slot.sell{position:relative;cursor:pointer}
.slot.sell:hover{border-color:#ffd24d}
.slot.sell .pr{position:absolute;bottom:-1px;left:3px;font-size:9px;color:#ffd24d;
text-shadow:0 1px 1px #000;font-weight:700}
/* =========================================================================
MODAL KONFIRMASI (buang item / jumlah)
Overlay gelap + kotak dialog kecil dgn tombol OK & Cancel.
========================================================================= */
#modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;
display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#modal-box{background:rgba(16,24,16,.96);border:1px solid rgba(140,200,120,.4);
border-radius:12px;padding:18px 22px;width:min(320px,88vw);
box-shadow:0 10px 40px rgba(0,0,0,.6);text-align:center}
#modal-box .m-ico{font-size:34px;display:block;margin-bottom:6px}
#modal-box .m-txt{font-size:14px;line-height:1.5;margin-bottom:6px}
#modal-box .m-count{font-size:13px;color:#ffd24d;margin-bottom:12px}
#modal-box input[type=number]{width:90px;background:#04140a;color:#eaffea;
border:1px solid rgba(143,224,122,.45);border-radius:7px;padding:6px 8px;
font-size:15px;text-align:center;outline:none;margin-bottom:12px}
/* kotak TEKS (mis. nama tanda Log Pass) — lebih lebar & rata kiri */
#modal-box input[type=text].m-text{width:min(240px,72vw);background:#04140a;
color:#eaffea;border:1px solid rgba(143,224,122,.45);border-radius:7px;
padding:7px 10px;font-size:14px;text-align:left;outline:none;margin-bottom:12px}
#modal-box input[type=text].m-text:focus{border-color:#8fe07a;
box-shadow:0 0 0 2px rgba(143,224,122,.18)}
#modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#modal-btns button{padding:9px 20px;border-radius:8px;font-weight:700;font-size:14px;
cursor:pointer;border:1.5px solid #7c2d12}
#modal-ok{background-color:#ea580c;color:#fff}
#modal-ok:hover{background-color:#f97316;border-color:#9a3412}
#modal-all{background-color:#c2410c;color:#fff}
#modal-all:hover{background-color:#ea580c}
#modal-cancel{background:rgba(80,40,20,.6);color:#ffedd5;border-color:#7c2d12}
#modal-cancel:hover{background:rgba(120,50,20,.7);border-color:#9a3412}
/* highlight slot saat drag di atas zona buang */
.slot.drop-out{border-color:#ff7b6b!important;box-shadow:0 0 10px rgba(255,123,107,.5)}
/* =========================================================================
MODE PENEMPATAN PERABOT — bar Putar / Pasang / Batal di atas hotbar
========================================================================= */
#place-bar{position:fixed;bottom:118px;left:50%;transform:translateX(-50%);
display:flex;gap:10px;z-index:32;background:rgba(20,16,12,.92);
border:2px solid #7c2d12;border-radius:12px;padding:10px 14px;
backdrop-filter:blur(4px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#place-bar button{padding:9px 16px;border-radius:8px;font-weight:700;font-size:14px;
cursor:pointer;border:1.5px solid #7c2d12;color:#fff}
#place-bar #pb-rot{background-color:#ea580c}
#place-bar #pb-rot:hover{background-color:#f97316;border-color:#9a3412}
#place-bar #pb-ok{background-color:#c2410c}
#place-bar #pb-ok:hover{background-color:#ea580c}
#place-bar #pb-x{background:rgba(80,40,20,.65);border-color:#7c2d12}
#place-bar #pb-x:hover{background:rgba(120,50,20,.75);border-color:#9a3412}
@media(max-width:700px){#place-bar{bottom:150px;padding:8px 10px}
#place-bar button{padding:9px 13px;font-size:13px}}
/* =========================================================================
ATUR PINTU — bar ◀ ▶ / Terapkan / Batal
-------------------------------------------------------------------------
Memakai gaya & posisi yang sama dengan #place-bar supaya pemain langsung
mengenalinya. Tombol ◀ ▶ dibuat lebar minimal 44px: itu ukuran sasaran
sentuh minimum yang nyaman untuk jempol, dan sekaligus membuat mode ini
tetap terpakai penuh di mobile tanpa perlu membidik dinding.
========================================================================= */
#door-bar{position:fixed;bottom:118px;left:50%;transform:translateX(-50%);
display:flex;gap:8px;align-items:center;z-index:32;background:rgba(20,16,12,.92);
border:2px solid #7c2d12;border-radius:12px;padding:10px 14px;
backdrop-filter:blur(4px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#door-bar button{min-width:44px;padding:9px 14px;border-radius:8px;font-weight:700;
font-size:14px;cursor:pointer;border:1.5px solid #7c2d12;color:#fff}
#door-bar #db-prev,#door-bar #db-next{background-color:#ea580c;
font-size:17px;line-height:1}
#door-bar #db-prev:hover,#door-bar #db-next:hover{background-color:#f97316;border-color:#9a3412}
#door-bar #db-info{min-width:46px;text-align:center;color:#ffedd5;font-size:13px;
font-weight:700;font-variant-numeric:tabular-nums}
#door-bar #db-ok{background-color:#c2410c}
#door-bar #db-ok:hover{background-color:#ea580c}
#door-bar #db-x{background:rgba(80,40,20,.65);border-color:#7c2d12}
#door-bar #db-x:hover{background:rgba(120,50,20,.75);border-color:#9a3412}
@media(max-width:700px){#door-bar{bottom:150px;padding:8px 10px;gap:6px}
#door-bar button{padding:10px 12px;font-size:13px}}
/* =========================================================================
UI POLISH — menjamin tidak ada elemen tumpang tindih (PC & mobile)
-------------------------------------------------------------------------
Prinsip: setiap zona HUD punya batas jelas.
PC : stats(kiri-atas) · topright(tengah-atas) · team(kanan-atas)
toast(kiri, di bawah stats) · chat(kiri, di bawah toast)
hotbar(bawah-tengah) · skillbar(di atas hotbar)
Mobile : m-buttons(kanan-atas) · team(di bawahnya) · toast(kiri)
kontrol(bawah) · hotbar(di atas kontrol)
========================================================================= */
/* --- mobile: tombol menu kini 6 (tas/craft/skill/makan/chat/bicara).
Besarkan batas tinggi agar baris ketiga tidak terpotong, lalu geser ikon
tim ke bawahnya supaya keduanya tidak bertumpuk. Tim diberi scroll bila
layar pendek (landscape) agar tidak menutupi kontrol bawah. --- */
body.touch #m-buttons{max-height:none;overflow:visible}
body.touch #team{top:224px;overflow-y:auto;
max-height:max(56px, 100vh - 224px - var(--ctrl) - var(--hb) - 16px)}
/* --- mobile: toast jangan menutupi tombol menu di kanan --- */
body.touch #toast{max-width:54vw}
/* --- mobile kecil: kecilkan HUD agar semua muat tanpa overlap --- */
@media (max-width:600px){
#stats{left:8px;top:8px;gap:4px}
.bar{padding:3px 6px}
.bar .track{height:10px}
.bar b{font-size:7px}
#xpwrap{height:13px;width:180px}
#lvl{font-size:7px}
#topright{font-size:11px;padding:4px 9px}
#coinbox{font-size:11px;margin-top:2px}
#coinbox b{font-size:12px}
body.touch #m-buttons{max-width:138px;gap:5px;top:56px}
body.touch #team{top:200px}
body.touch #toast{top:112px}
body.touch #chat{top:132px;width:min(230px,56vw)}
}
@media (max-width:400px){
#xpwrap{width:150px}
.bar .track{width:88px}
body.touch #team{top:192px}
}
/* --- chat di mobile: cukup lebar untuk input + tombol kirim --- */
body.touch #chat{width:min(280px,74vw)}
body.touch #chat-log{max-height:92px}
body.touch #chat-input{font-size:14px}
/* --- PC: chat & toast di kolom kiri yang sama; saat chat terbuka toast
digeser turun (body.chat-open), saat tertutup toast di bawah stats. --- */
#chat{z-index:14}
/* --- panel harus selalu muat di layar & tidak tertutup kontrol mobile --- */
.panel{max-height:88vh}
body.touch .panel{max-height:82vh;top:50%;width:min(560px,96vw)}
body.touch .panel>.panel-body{padding:8px 10px 14px}
@media (max-height:560px){
body.touch .panel{max-height:88vh;top:50%}
.panel{max-height:92vh}
}
/* --- grid slot mengecil bertahap di layar sempit agar tetap muat --- */
@media (max-width:480px){
.grid{grid-template-columns:repeat(auto-fill,42px)}
.slot{width:42px;height:42px;font-size:19px}
.grid.equip{grid-template-columns:repeat(4,42px)}
}
@media (max-width:380px){
.grid{grid-template-columns:repeat(auto-fill,38px)}
.slot{width:38px;height:38px;font-size:17px}
.grid.equip{grid-template-columns:repeat(4,38px)}
}
/* --- panel tas di mobile: perlengkapan 4 slot harus muat sejajar --- */
@media (max-width:600px){
#panel-bag .grid{justify-content:flex-start}
}
/* --- skill PC & hotbar: pastikan jarak vertikal tetap jelas --- */
#skillbar{z-index:13}
#hotbar{z-index:12}
/* --- hint (PC) jangan melebar di bawah hotbar --- */
#hint{max-width:230px}
/* =========================================================================
UI STUDIO
========================================================================= */
#btn-uistudio{position:absolute;left:100%;top:38px;margin-left:8px;
pointer-events:auto;z-index:26;width:30px;height:30px;border-radius:9px;
cursor:pointer;background:rgba(10,14,10,.55);
border:1px solid rgba(255,255,255,.12);color:#eaffd8;font-size:14px;
line-height:1;padding:0;backdrop-filter:blur(4px);
transition:transform .12s,background .2s,border-color .2s}
#btn-uistudio:active{transform:scale(.88)}
body.touch #btn-uistudio{width:34px;height:34px;font-size:16px}
#uistudio{position:fixed;inset:0;z-index:220;display:none;
background:rgba(0,0,0,.28);backdrop-filter:blur(1px)}
.us-bar{position:fixed;top:0;left:0;right:0;z-index:223;
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
padding:7px 9px;background:rgba(8,12,8,.94);
border-bottom:1px solid rgba(255,255,255,.18);
color:#eaffea;font-size:12px}
.us-bar button{background:rgba(255,255,255,.08);color:#fff;
border:1px solid rgba(255,255,255,.22);border-radius:8px;
padding:6px 10px;font-size:12px;cursor:pointer}
.us-bar button.on{background:rgba(143,224,122,.24);border-color:#8fe07a}
.us-bar button:active{transform:scale(.96)}
.us-lab{display:flex;align-items:center;gap:5px}
.us-lab input[type=range]{width:92px}
.us-sel{min-width:92px;color:#ffd24d;font-weight:700}
.us-handles{position:fixed;inset:0;z-index:222;pointer-events:none}
.us-handle{position:absolute;box-sizing:border-box;
border:2px dashed rgba(255,224,138,.9);
background:rgba(255,224,138,.08);
pointer-events:auto;cursor:move;touch-action:none}
.us-handle.sel{border-color:#7dff9d;background:rgba(125,255,157,.14)}
.us-handle span{position:absolute;left:0;top:-17px;
font-size:10px;line-height:1;padding:2px 5px;border-radius:5px;
background:rgba(8,12,8,.92);color:#ffe08a;white-space:nowrap;
border:1px solid rgba(255,255,255,.16)}
@media (max-width:700px){
.us-bar{font-size:11px;gap:6px}
.us-lab input[type=range]{width:70px}
.us-sel{min-width:70px}
}
/* UI Studio edit mode: area yang biasanya kosong/tersembunyi dibuat terlihat */
.us-edit #chat{display:flex !important;opacity:.92}
.us-edit #skillbar{display:flex !important}
.us-edit #hotbar{display:flex !important;pointer-events:auto !important;min-width:120px;min-height:42px}
/* Saat mode edit UI: matikan SEMUA transisi transform pada tombol HUD.
Tanpa ini tombol "mengejar" posisi baru dengan animasi 0.06s sementara
kotak garis putus-putus langsung dipindah ke posisi akhir → tombol terlihat
bergetar / keluar dari frame (glitch saat garis align muncul). */
.us-edit #mobile button,
.us-edit .m-active-btn,
.us-edit .sk-btn,
.us-edit #hotbar .hslot,
.us-edit #hotbar *{
transition:none !important;
}
.us-edit #mobile button.pressed,
.us-edit #mobile button:active,
.us-edit .m-active-btn.pressed,
.us-edit .sk-btn.pressed{
filter:none;
}
.us-ghost{opacity:.65;border:1px dashed rgba(255,255,255,.35);
padding:6px 8px;font-size:11px;color:#eaffea;
background:rgba(255,255,255,.05);border-radius:6px;text-align:center}
#team .us-ghost{min-width:70px}
#hotbar .us-ghost{min-width:120px;min-height:42px;display:flex;align-items:center;justify-content:center}
#m-active .us-ghost,#skillbar .us-ghost{
min-width:48px;min-height:48px;
display:flex;align-items:center;justify-content:center}
.us-guidelines{position:fixed;inset:0;pointer-events:none;z-index:221}
.us-guidelines line{filter:drop-shadow(0 0 2px rgba(0,229,255,.8))}
/* UI Studio mobile/APK: hanya tombol lokal, tanpa tab & Save JS */
.us-mobile-only{display:none}
body.us-real-mobile .us-mobile-only{display:inline-block}
body.us-real-mobile .us-desktop-only{display:none !important}
/* bar UI Studio dibuat kecil & tidak menutupi seluruh layar */
#uistudio{background:transparent}
.us-bar{top:auto;bottom:8px;left:50%;right:auto;transform:translateX(-50%);
max-width:calc(100vw - 12px);border-radius:14px;opacity:.94;
box-shadow:0 6px 24px rgba(0,0,0,.4);z-index:224}
body.us-real-mobile .us-bar{bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
body.us-real-mobile .us-sel{display:none}
body.us-real-mobile .us-lab input[type=range]{width:76px}
.us-bar.min{padding:0;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;gap:0}
.us-bar.min > *:not(#us-min){display:none}
#us-min{min-width:34px;padding:6px 8px}
/* =========================================================================
MAIN MENU FORECRAFT + PANORAMA BACKGROUND
========================================================================= */
body.in-menu #hud,
body.in-menu #mobile,
body.in-menu #btn-save,
body.in-menu #btn-gear,
body.in-menu #btn-mail,
body.in-menu #btn-uistudio{display:none !important}
#start{background:rgba(20,22,25,.58);backdrop-filter:blur(3px);
/* layar pendek/kecil: menu bisa digulir agar tombol tidak tertutup/terpotong */
overflow-y:auto;justify-content:flex-start;padding:22px 0;overscroll-behavior:contain}
.menu-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;
width:min(480px,94vw);margin:auto}
.menu-wrap.mm-root{
background:none !important;
border:none !important;
box-shadow:none !important;
clip-path:none !important;
padding:20px 0 !important;
backdrop-filter:none !important;
}
.menu-wrap.mm-subpanel{
background:linear-gradient(160deg,rgba(36,20,12,.98),rgba(18,10,6,.96));
border:4px solid #541c08;border-radius:0;
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
box-shadow:0 12px 0 rgba(0,0,0,.6), inset 0 0 0 2px #ea580c, inset 0 4px 0 rgba(255,255,255,.18);
padding:26px 24px;backdrop-filter:blur(8px);
}
.menu-title{font-family:'Press Start 2P',monospace;
font-size:clamp(26px,5.5vw,46px);color:#ffd24d;
text-shadow:0 0 20px rgba(234,88,12,.5),0 4px 0 #541c08;
letter-spacing:2px;margin-bottom:2px}
.menu-sub{font-size:11px;letter-spacing:3px;text-transform:uppercase;
color:#fed7aa;opacity:.85;margin-bottom:14px}
.menu-head{font-family:'Press Start 2P',monospace;font-size:clamp(13px,2.5vw,18px);
color:#ffd24d;text-shadow:0 2px 0 #000;margin-bottom:10px}
.menu-btns{display:flex;flex-direction:column;gap:10px;width:min(320px,88vw)}
.slot-list{display:flex;flex-direction:column;gap:8px;width:100%}
.slot-btn{display:flex;flex-direction:column;gap:4px;text-align:left;
background:rgba(20,10,6,.85);border:2px solid #7c2d12;
border-radius:4px;padding:12px 14px;color:#fed7aa;cursor:pointer;
box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(234,88,12,.25);
transition:transform .12s cubic-bezier(0.34,1.56,0.64,1), border-color .15s, background .15s, box-shadow .15s}
.slot-btn:hover:not(:disabled){background:rgba(234,88,12,.2);border-color:#ffd24d;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.5), 0 0 10px rgba(234,88,12,.4)}
.slot-btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.slot-btn:disabled{opacity:.45;cursor:not-allowed}
.slot-btn .s-title{font-family:'Press Start 2P',monospace;font-size:11px;color:#ffd24d;letter-spacing:1px}
.slot-btn .s-info{font-size:11px;color:#e2e8f0;opacity:.95}
.slot-btn.empty .s-info{opacity:.5}
.s-char-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.s-char-badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(0,0,0,0.5);border:1px solid rgba(234,88,12,0.5);
padding:3px 8px;border-radius:3px;font-size:11px;
}
.scb-name{color:#fff;font-weight:700}
.scb-lvl{color:#ffd24d;font-family:'Press Start 2P',monospace;font-size:8px}
.s-meta-row{font-size:10px;color:#fed7aa;opacity:.8;margin-top:2px}
.mm-back{margin-top:12px}
/* kotak pengaturan musik di main menu */
.mus-box{width:min(340px,88vw);background:linear-gradient(160deg,rgba(36,20,12,.98),rgba(18,10,6,.96));
border:4px solid #541c08;border-radius:0;
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
box-shadow:0 8px 0 rgba(0,0,0,.6), inset 0 0 0 2px #ea580c;
padding:16px 18px;display:flex;flex-direction:column;gap:8px;text-align:left}
.mus-box .tip{font-size:11px;opacity:.8;color:#fed7aa;margin-top:4px}
.mus-row input[type="range"]{flex:1;pointer-events:auto;accent-color:#ea580c;cursor:pointer}
/* tombol Musik & Karakter & Multi di menu utama konsisten oranye */
.mm-music, .mm-char, .mm-multi{background:linear-gradient(180deg,#f97316 0%,#ea580c 55%,#c2410c 100%);border-color:#541c08}
/* ---------- optimasi layar pendek / kecil ----------
Menu dibuat lebih ringkas supaya semua tombol (termasuk slot & kembali)
muat dan tidak tertutup di perangkat kecil. */
@media (max-height:700px),(max-width:480px){
#start{padding:14px 0}
.menu-title{font-size:clamp(20px,5.5vw,36px)}
.menu-sub{margin-bottom:8px;letter-spacing:3px}
.menu-wrap{gap:10px;padding:18px 16px}
.menu-btns{gap:8px}
.big{padding:11px 18px;font-size:11px;margin:3px 0}
.slot-list{gap:6px}
.slot-btn{padding:8px 10px;gap:2px}
.slot-btn .s-title{font-size:10px}
.slot-btn .s-info{font-size:10px}
.mm-back{margin-top:8px}
.mus-box{padding:10px 12px}
}
.mm-confirm{position:absolute;inset:0;z-index:5;display:flex;
align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
.mm-confirm-box{background:linear-gradient(160deg,rgba(36,20,12,.98),rgba(18,10,6,.96));
border:4px solid #541c08;border-radius:0;
clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
box-shadow:0 8px 0 rgba(0,0,0,.6), inset 0 0 0 2px #ea580c;
padding:20px;width:min(360px,88vw);text-align:center}
.mm-msg{font-size:13.5px;line-height:1.5;margin-bottom:14px;color:#fff}
.mm-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* =========================================================================
TUTORIAL (sekali saat new game)
========================================================================= */
#tutorial-ov{position:fixed;inset:0;z-index:80;display:flex;
align-items:center;justify-content:center;background:rgba(5,7,9,.72);
backdrop-filter:blur(3px)}
.tutorial-box{width:min(430px,92vw);background:rgba(12,15,18,.95);
border:1px solid rgba(255,255,255,.18);border-radius:16px;
padding:20px 22px;box-shadow:0 16px 50px rgba(0,0,0,.6);color:#eef2f5}
.tutorial-box h2{font-family:'Press Start 2P',monospace;font-size:14px;
color:#dfe6ea;margin-bottom:12px}
.tutorial-box ul{list-style:none;display:flex;flex-direction:column;gap:8px;
font-size:13px;line-height:1.5;margin:0 0 16px;padding:0}
.tutorial-box li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
border-radius:10px;padding:8px 10px}
#tutorial-ok{width:100%;padding:10px;border-radius:10px;border:1px solid #8fe07a;
background:rgba(143,224,122,.18);color:#eaffea;font-weight:800;cursor:pointer}
#tutorial-ok:active{transform:scale(.98)}
/* =========================================================================
CHARACTER CUSTOMIZER (New Game)
========================================================================= */
.char-custom-ov{position:fixed;inset:0;z-index:9990;display:flex;
align-items:center;justify-content:center;background:rgba(8,11,16,.85);
backdrop-filter:blur(6px);padding:14px}
.char-custom-box{background:rgba(18,22,30,.97);border:1px solid rgba(220,170,70,.45);
border-radius:18px;padding:22px 24px;width:min(520px,95vw);max-height:calc(100vh - 28px);
overflow-y:auto;box-shadow:0 16px 50px rgba(0,0,0,.85);color:#e8dcc2;text-align:center}
.char-custom-box h2{font-family:'Press Start 2P',monospace;font-size:13px;
color:#f0c060;letter-spacing:1px;margin-bottom:6px}
.char-custom-sub{font-size:10px;color:#a89c82;margin-bottom:8px;line-height:1.4}
.char-custom-body{display:flex;gap:18px;align-items:center;justify-content:center;
margin-top:8px;flex-wrap:wrap}
.char-preview-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.char-preview-canvas{width:160px;height:240px;border-radius:14px;
background:radial-gradient(circle at 50% 30%, #283749 0%, #10141b 100%);
border:1px solid rgba(212,168,56,.4);box-shadow:0 6px 24px rgba(0,0,0,.6);
cursor:grab;touch-action:none}
.char-preview-canvas:active{cursor:grabbing}
.char-preview-hint{font-size:9px;color:#a89c82;letter-spacing:.3px}
.char-controls-col{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px;text-align:left}
.char-field-row{width:100%;margin-bottom:4px;text-align:left}
.char-field-row label{font-size:10px;font-weight:700;color:#f0c060;letter-spacing:.5px;
display:block;margin-bottom:4px}
.char-name-input{width:100%;padding:9px 12px;box-sizing:border-box;
font-family:'Press Start 2P',monospace;font-size:11px;background:#12151b;
border:1px solid #4a4438;border-radius:8px;color:#fff;text-align:center;
outline:none;transition:border-color .15s}
.char-name-input:focus{border-color:#f0c060}
.char-hair-nav{display:flex;align-items:center;justify-content:space-between;
gap:8px;background:#141820;border:1px solid #4a4438;border-radius:8px;padding:4px}
.char-nav-btn{width:34px;height:32px;background:#2a2620;border:1px solid #c89a40;
border-radius:6px;color:#f0c060;font-size:14px;font-weight:700;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.12s}
.char-nav-btn:hover{background:#3d3628}
.char-nav-btn:active{transform:scale(.94)}
.char-style-name{flex:1;font-size:11px;font-weight:600;color:#e8dcc2;text-align:center}
.char-color-swatches{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;margin-top:4px}
.char-swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
cursor:pointer;transition:.15s;padding:0;outline:none}
.char-swatch.active{border:2px solid #f0c060;box-shadow:0 0 8px #f0c060;transform:scale(1.18)}
.char-action-btns{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.char-btn-start{width:100%;padding:11px;font-family:'Press Start 2P',monospace;font-size:11px;
background:#c89a40;color:#1a1204;border:1px solid #f0c060;border-radius:9px;
cursor:pointer;font-weight:700;letter-spacing:.5px;transition:.15s}
.char-btn-start:hover{background:#dbab4d;transform:translateY(-1px)}
.char-btn-start:active{transform:scale(.98)}
.char-btn-cancel{width:100%;padding:8px;font-size:11px;background:#22262e;color:#a89c82;
border:1px solid #3d434d;border-radius:8px;cursor:pointer;transition:.15s}
.char-btn-cancel:hover{background:#2c323c;color:#e8dcc2}
/* =========================================================================
FINAL MOBILE LAYOUT — hotbar benar-benar tengah bawah, tombol responsif,
tidak ada elemen HUD yang saling menutupi.
-----------------------------------------------------------------------
Zona:
bawah-tengah : hotbar (paling bawah)
kiri-bawah : joystick (di atas hotbar)
kanan-bawah : attack/jump/roll (di atas hotbar)
kanan-atas : tombol menu (bag/craft/skill/makan/chat/bicara)
kiri-atas : toast/chat
kiri-tengah : quest tracker (tidak tertutup tombol menu)
========================================================================= */
body.touch{
--pad: clamp(6px, 1.4vw, 12px);
--hb-gap: clamp(3px, 0.8vw, 5px);
--hb-slot: clamp(26px, min(calc((100vw - 34px)/7), 9vmin), 44px);
--hb: calc(var(--hb-slot) + var(--hb-gap) + 6px);
--act: clamp(48px, 12.5vmin, 84px);
--act-sub: clamp(36px, 9vmin, 58px);
--act-gap: clamp(6px, 1.5vmin, 12px);
--main-w: calc(var(--act) + var(--act-sub) + var(--act-gap)*2);
--main-h: var(--main-w);
--joy: clamp(84px, 19vmin, 128px);
--joy-knob: clamp(36px, 9.5vmin, 54px);
--joy-zone-w: clamp(100px, 30vw, 240px);
--menu: clamp(34px, 7.6vmin, 46px);
--menu-gap: clamp(4px, 1vmin, 7px);
--bottom-ui: calc(var(--hb) + 6px);
--ctrl: calc(var(--bottom-ui) + var(--main-h) + 10px);
}
/* hotbar: tengah, benar-benar mentok bawah layar */
body.touch #hotbar{
left:50%;right:auto;transform:translateX(-50%);
bottom:calc(env(safe-area-inset-bottom, 0px) + 3px);
display:flex;gap:var(--hb-gap);flex-wrap:nowrap;
max-width:calc(100vw - 10px);
pointer-events:auto;z-index:30;
}
body.touch .hslot{
width:var(--hb-slot);height:var(--hb-slot);
font-size:clamp(14px, calc(var(--hb-slot)*0.48), 21px);
pointer-events:auto;cursor:pointer;
}
/* skillbar PC tidak perlu tampil di mobile; skill mobile lewat #m-active */
body.touch #skillbar{display:none}
/* joystick kiri: berada di atas hotbar supaya tidak menutupi hotbar */
body.touch #joy-zone{
left:var(--pad);bottom:var(--bottom-ui);
width:var(--joy-zone-w);height:calc(var(--joy) + 12px);
display:block;background:none;z-index:16;
}
body.touch #joy-base{width:var(--joy);height:var(--joy);opacity:.42}
body.touch #joy-knob{width:var(--joy-knob);height:var(--joy-knob)}
/* kluster attack/jump/roll kanan: ukuran & posisi dihitung dari variabel
sehingga tidak mungkin tumpang tindih dan selalu mengikuti besar layar */
body.touch #m-main{
right:var(--pad);bottom:var(--bottom-ui);
width:var(--main-w);height:var(--main-h);
pointer-events:none;z-index:22;
}
body.touch #m-main button{position:absolute;pointer-events:auto}
body.touch #m-attack.m-l{
right:0;bottom:0;width:var(--act);height:var(--act);
font-size:calc(var(--act)*0.38)!important;
}
body.touch #m-jump.m-m{
right:calc((var(--act) - var(--act-sub))/2);
bottom:calc(var(--act) + var(--act-gap));
width:var(--act-sub);height:var(--act-sub);
font-size:calc(var(--act-sub)*0.42)!important;
}
body.touch #m-roll.m-m{
right:calc(var(--act) + var(--act-gap));
bottom:calc((var(--act) - var(--act-sub))/2);
width:var(--act-sub);height:var(--act-sub);
font-size:calc(var(--act-sub)*0.42)!important;
}
/* skill aktif mobile: di atas kluster serangan */
body.touch #m-active{
right:var(--pad);left:auto;transform:none;
bottom:calc(var(--bottom-ui) + var(--main-h) + 8px);
display:flex;flex-direction:column-reverse;flex-wrap:wrap-reverse;
gap:clamp(5px,1.2vmin,8px);align-items:center;justify-content:flex-end;
max-height:min(30vh,160px);z-index:21;pointer-events:none;
}
body.touch #m-active > button{pointer-events:auto}
body.touch #m-active .m-active-btn{
width:clamp(38px,9vmin,50px);height:clamp(38px,9vmin,50px);
font-size:clamp(16px,4vmin,22px);
}
/* tombol menu (bag/craft/skill/makan/chat/bicara): grid 3 kolom kanan atas */
body.touch #m-buttons{
top:calc(env(safe-area-inset-top, 0px) + 54px);
right:var(--pad);left:auto;
display:grid;grid-template-columns:repeat(3, var(--menu));
gap:var(--menu-gap);justify-content:end;
max-width:none;max-height:none;overflow:visible;z-index:26;
}
body.touch #m-buttons .m-s{
width:var(--menu);height:var(--menu);
font-size:calc(var(--menu)*0.42)!important;
border-radius:12px!important;position:relative!important;
}
/* ikon tim: tepat di bawah tombol menu, tidak menabrak quest */
body.touch #team{
right:var(--pad);left:auto;
top:calc(env(safe-area-inset-top, 0px) + 54px + var(--menu)*2 + var(--menu-gap) + 10px);
max-height:calc(100vh - 180px - var(--ctrl));
overflow-y:auto;z-index:12;
}
/* toast kiri: dibatasi agar tidak menutupi quest/kontrol bawah */
body.touch #toast{
top:calc(env(safe-area-inset-top, 0px) + 110px);
left:var(--pad);right:auto;
max-width:min(58vw,320px);
max-height:calc(100vh - 150px - var(--ctrl));
overflow:hidden;z-index:11;
}
/* quest tracker dipindah ke KIRI agar tidak tertutup tombol menu kanan.
TINGGI TIDAK DIBATASI LAGI: quest aktif maksimum 3 (Quest.MAX), jadi tinggi
kotaknya sudah terbatas dengan sendirinya. Dulu ada max-height 24vh/20vh/16vh
+ overflow:hidden, sehingga di layar ponsel kecil hanya satu baris quest yang
terlihat dan sisanya terpotong. Kotak ini tumbuh ke ATAS (bottom-anchored)
dan pointer-events:none, jadi memanjang sedikit tidak menghalangi apa pun. */
body.touch #questtrack{
left:var(--pad);right:auto;top:auto;transform:none;
bottom:calc(var(--bottom-ui) + var(--joy) + 18px);
width:min(170px,44vw);
max-height:none;overflow:visible;
z-index:12;pointer-events:none;
}
/* tombol aksi kontekstual & bar penempatan perabot: tidak menabrak hotbar */
body.touch #actbtn:not(.world){
left:auto;right:var(--pad);transform:none;
bottom:calc(var(--bottom-ui) + var(--main-h) + 72px);
z-index:27;
}
body.touch #place-bar,body.touch #door-bar{
left:50%;right:auto;transform:translateX(-50%);
bottom:calc(var(--bottom-ui) + var(--main-h) + 16px);
z-index:31;
}
/* landscape / layar pendek: semua tombol mengecil mengikuti vmin */
@media (orientation:landscape){
body.touch{
--hb-slot: clamp(24px, min(calc((100vw - 34px)/7), 7.5vmin), 38px);
--act: clamp(44px, 10.5vmin, 70px);
--act-sub: clamp(34px, 8vmin, 50px);
--joy: clamp(74px, 16vmin, 108px);
--menu: clamp(32px, 6.8vmin, 40px);
}
}
/* layar sangat sempit */
@media (max-width:400px){
body.touch{
--act: clamp(44px, 14vw, 62px);
--act-sub: clamp(34px, 11vw, 48px);
--menu: clamp(32px, 9vw, 38px);
}
body.touch #questtrack{width:min(140px,46vw)}
}
/* layar sangat pendek */
@media (max-height:420px){
body.touch{
--hb-slot: clamp(22px, min(calc((100vw - 34px)/7), 7vmin), 32px);
--act: clamp(40px, 9.5vmin, 58px);
--act-sub: clamp(30px, 7.5vmin, 44px);
--joy: clamp(64px, 14vmin, 92px);
--menu: clamp(28px, 6.5vmin, 36px);
}
body.touch #m-active{max-height:min(24vh,110px)}
}
/* =========================================================================
OPTIMASI MOBILE: ikon tim/hewan, panel crafting, pelacak quest
========================================================================= */
/* ---- ikon rekan & pet: TOMBOL, jadi jangan terlalu kecil ----
Dulu dikecilkan ke 44px dengan gap 1px; digabung dengan skala UI Studio
(mis. 0.65) sasaran ketuknya tinggal ~28px dan ketukan sering jatuh di sela
antar ikon. Sekarang ukuran dasar & jaraknya sedikit dinaikkan, ditambah
`overflow:visible` supaya area sentuh tambahan (.tmate::before) tidak
terpotong. Jumlah ikon maksimum hanya 4 (3 rekan + 1 pet), jadi kolomnya
tidak mungkin memanjang sampai menutupi kontrol bawah. */
body.touch #team{gap:8px;padding:2px 4px;overflow:visible;max-height:none}
body.touch .tmate{width:50px;padding:5px 3px 6px;gap:2px}
body.touch .tmate .tface{font-size:18px}
body.touch .tmate .tlv{font-size:8.5px}
body.touch .tmate .thp{width:38px;height:4px}
body.touch .tmate .tord,body.touch .tmate .tmode{font-size:10px;padding:0 3px}
/* landscape / layar pendek: ruang vertikal sempit, jadi ikon tim disusun
mendatar (baris) ke arah kiri alih-alih dipotong secara vertikal */
@media (orientation:landscape){
body.touch #team{
flex-direction:row;flex-wrap:wrap;justify-content:flex-end;
max-width:min(240px,42vw);
max-height:none;overflow:visible;
}
}
/* ---- panel crafting: list & kategori lebih ringkas di layar sempit ---- */
body.touch #craft-tabs{padding:6px 8px;gap:3px;flex-wrap:nowrap;overflow-x:auto}
body.touch .craft-tab{font-size:8.5px;padding:5px 4px;gap:2px}
body.touch .craft-tab i{font-size:7.5px}
body.touch .craft-tab .tab-ico{width:13px;height:13px}
body.touch .panel>.panel-body{padding:8px 10px 12px}
body.touch #recipes{gap:5px}
body.touch .recipe{padding:5px 8px;gap:7px;border-radius:7px}
body.touch .recipe .out{font-size:20px}
body.touch .recipe .nm{font-size:11px}
body.touch .recipe .need{font-size:9px}
body.touch .recipe .stats{margin:2px 0 3px;gap:3px}
body.touch .recipe .chip{font-size:8px;padding:1px 4px}
body.touch .recipe button{padding:5px 9px;font-size:11px}
body.touch .craft-qty{width:42px;font-size:11px;padding:4px 5px}
/* ---- pelacak quest: baris ringkas agar SEMUA quest aktif terlihat ----
Tanpa pemotongan tinggi: tiga baris quest (batas Quest.MAX) harus berjejer
rapi ke bawah bahkan di ponsel layar kecil. */
body.touch #questtrack{padding:5px 7px}
body.touch .qt-h{font-size:8.5px;margin-bottom:3px}
body.touch .qt-row{margin-bottom:5px}
body.touch .qt-row:last-child{margin-bottom:0}
body.touch .qt-n{font-size:10px;line-height:1.25}
body.touch .qt-c{font-size:9px;margin:0 0 2px}
body.touch .qbar{height:3px}
/* =========================================================================
BADGE LEVEL TEMPA (Landasan Tempa) — angka kecil "+n" di sudut slot
========================================================================= */
.hslot .lvl,.slot .lvl{position:absolute;top:1px;right:4px;font-size:10px;font-weight:700;
color:#ffd24d;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}
.slot.eq .lvl{top:auto;bottom:1px;right:4px}
/* ------ LOG PASS BERTANDA: bingkai merah + titik penanda ------
Warnanya senada dengan garis penanda di kompas supaya pemain langsung
mengaitkan slot ini dengan arah yang ditunjuk. */
.hslot.marked,.slot.marked{border-color:#ff3b30;
box-shadow:0 0 10px rgba(255,59,48,.45)}
.hslot.marked:after,.slot.marked:after{content:'';position:absolute;
left:3px;bottom:3px;width:6px;height:6px;border-radius:50%;
background:#ff3b30;box-shadow:0 0 5px rgba(255,59,48,.9);pointer-events:none}
/* slot terpilih tetap memakai sorot kuning agar "sedang dipegang" jelas */
.hslot.marked.sel{border-color:#ffd24d;
box-shadow:0 0 12px rgba(255,210,77,.5),0 0 10px rgba(255,59,48,.4)}
/* =========================================================================
PANEL LANDASAN TEMPA (ANVIL)
========================================================================= */
#anvil-body{display:flex;flex-direction:column;gap:12px}
.anvil-list{display:flex;flex-wrap:wrap;gap:8px}
.anvil-item{display:flex;align-items:center;gap:8px;padding:7px 10px;min-width:170px;
background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.14);border-radius:8px;
cursor:pointer;transition:border-color .12s,background .12s}
.anvil-item:hover{border-color:#9fd77f}
.anvil-item.sel{border-color:#ffd24d;background:rgba(255,210,77,.10);
box-shadow:0 0 10px rgba(255,210,77,.25)}
.anvil-item .ai-ico{font-size:22px}
.anvil-item .ai-nm{font-size:12px;line-height:1.25}
.anvil-item .ai-nm i{font-size:10px;opacity:.6;font-style:normal}
.ai-lv{display:inline-block;font-size:10px;font-weight:700;color:#ffd24d;
background:rgba(255,210,77,.14);border:1px solid rgba(255,210,77,.4);
border-radius:6px;padding:0 5px;margin-left:3px}
.anvil-detail{background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.12);
border-radius:8px;padding:12px}
.anvil-detail .ad-head{font-size:15px;margin-bottom:6px}
.anvil-detail .ad-stat{font-size:13px;color:#8fe0ff;margin-bottom:8px}
.anvil-detail .ad-cost{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-bottom:10px}
.anvil-detail .ad-cost .ok{color:#8fe07a}
.anvil-detail .ad-cost .no{color:#ff7b6b}
.anvil-go{font-size:14px;padding:8px 18px}
/* ================= PANEL PANGGANG API UNGGUN ================= */
#campfire-body{display:flex;flex-direction:column;gap:10px;padding:2px}
.cf-empty-note{text-align:center;color:#94a3b8;font-size:12px;padding:20px}
.cf-panel-grid{
display:grid;
grid-template-columns:120px 1fr;
gap:12px;
}
@media(max-width:440px){
.cf-panel-grid{grid-template-columns:100px 1fr;gap:8px}
}
.cf-sec-title{
font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.5px;
margin-bottom:6px;text-transform:uppercase;
}
/* Sisi Kiri: Bahan Tas (Bag-Style Slots) */
.cf-col-left{
display:flex;flex-direction:column;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
border-radius:8px;padding:8px;
}
.cf-ings-wrap{
display:flex;flex-direction:column;gap:8px;
}
.cf-ing-item{
display:flex;flex-direction:column;align-items:center;gap:3px;
cursor:pointer;user-select:none;-webkit-user-select:none;
}
.cf-ing-item.empty{opacity:.4;cursor:default}
.cf-ing-box{
position:relative;width:52px;height:52px;
background:rgba(20,26,34,.7);
border:1.5px solid rgba(255,255,255,.16);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
transition:border-color .15s,transform .1s,box-shadow .15s;
}
.cf-ing-item.available:hover .cf-ing-box,
.cf-ing-item.selected .cf-ing-box{
border-color:#f59e0b;
box-shadow:0 0 10px rgba(245,158,11,.35);
transform:scale(1.04);
}
.cf-ing-item:active .cf-ing-box{transform:scale(0.96)}
.cf-ing-ico{font-size:26px;line-height:1}
.cf-ing-count{
position:absolute;right:3px;bottom:2px;
font-size:10px;font-weight:800;color:#fde047;
text-shadow:0 1px 2px #000;
}
.cf-ing-name{
font-size:10.5px;color:#cbd5e1;font-weight:600;
text-align:center;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Sisi Kanan: 4 Slot Panggangan Kompak */
.cf-col-right{
display:flex;flex-direction:column;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);
border-radius:8px;padding:8px;
}
.cf-slots-wrap{
display:grid;grid-template-columns:repeat(2, 1fr);gap:8px;
}
@media(max-width:380px){
.cf-slots-wrap{grid-template-columns:1fr;}
}
.cf-roast-slot{
background:rgba(15,20,28,.8);border:1.5px solid rgba(255,255,255,.12);
border-radius:8px;padding:6px 8px;min-height:76px;
display:flex;flex-direction:column;justify-content:space-between;
cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
user-select:none;
}
.cf-roast-slot.empty{
border-style:dashed;border-color:rgba(255,255,255,.18);
}
.cf-roast-slot.empty:hover{
border-color:#f59e0b;background:rgba(245,158,11,.08);
}
.cf-roast-slot.cooking{
border-color:#f59e0b;background:rgba(245,158,11,.07);
box-shadow:0 0 10px rgba(245,158,11,.2);cursor:default;
}
.cf-roast-slot.done{
border-color:#22c55e;background:rgba(34,197,94,.12);
box-shadow:0 0 12px rgba(34,197,94,.3);cursor:pointer;
}
.cf-roast-slot.done:hover{
filter:brightness(1.15);transform:translateY(-1px);
}
.cf-rs-top{
display:flex;justify-content:space-between;align-items:center;
font-size:9.5px;font-weight:700;color:#94a3b8;
}
.cf-rs-state.cooking{color:#f59e0b}
.cf-rs-state.done{color:#4ade80;font-weight:800}
.cf-rs-center{
display:flex;align-items:center;justify-content:center;
padding:2px 0;
}
.cf-rs-plus{font-size:18px;color:#64748b}
.cf-rs-ico{font-size:24px;line-height:1}
.cf-rs-ico.done{filter:drop-shadow(0 0 6px rgba(74,222,128,.6))}
.cf-rs-foot{
font-size:9.5px;color:#64748b;text-align:center;
}
.cf-prog-bar{
height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;
}
.cf-prog-fill{
height:100%;background:linear-gradient(90deg,#ea580c,#f59e0b);
box-shadow:0 0 6px rgba(245,158,11,.6);transition:width .15s linear;
}
.cf-prog-fill.done{
background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 6px rgba(34,197,94,.6);
}
/* ================= PANEL SMELTER INDUSTRI ================= */
#smelter-body{display:flex;flex-direction:column;gap:12px}
.smelter-container{display:flex;flex-direction:column;gap:12px}
.smelter-status-card{
background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);
border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;
transition:border-color .2s,background .2s;
}
.smelter-status-card.active{
border-color:#ff841a;background:rgba(255,132,26,.12);
box-shadow:0 0 14px rgba(255,132,26,.25);
}
.ssc-left{display:flex;align-items:center;gap:12px}
.ssc-fire-ico{font-size:26px;filter:drop-shadow(0 0 8px rgba(255,140,40,.6))}
.ssc-info{display:flex;flex-direction:column;gap:2px}
.ssc-info b{font-size:13px;color:#fff;letter-spacing:.3px}
.smelter-status-card.active .ssc-info b{color:#ffb02e}
.ssc-info span{font-size:11px;color:#9aa4b0}
.ssc-fuel-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
#sm-fuel-fill{height:100%;background:linear-gradient(90deg,#ff4d3d,#ffd23e);transition:width .2s}
.smelter-work-grid{
display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;
}
@media(max-width:520px){
.smelter-work-grid{grid-template-columns:1fr;}
}
.sm-card{
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);
border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;
}
.sm-card-title{font-size:11px;font-weight:700;color:#9fd77f;letter-spacing:.5px;text-align:center}
.sm-slot{
background:rgba(0,0,0,.45);border:2px dashed rgba(255,255,255,.18);
border-radius:8px;padding:10px 6px;display:flex;flex-direction:column;
align-items:center;justify-content:center;min-height:90px;text-align:center;
}
.sm-slot.has-item{border-style:solid;border-color:#ffd24d;background:rgba(255,210,77,.08)}
.sm-slot-ico{font-size:32px;line-height:1}
.sm-slot-ico.empty{opacity:.35}
.sm-slot-qty{font-size:14px;font-weight:800;color:#fff;margin-top:4px}
.sm-slot-sub{font-size:11px;color:#9aa4b0;margin-top:2px}
.sm-slot-sub.empty{opacity:.5}
.sm-progress-wrap{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.sm-progress-label{font-size:10.5px;color:#ffd23e;text-align:center;font-weight:600}
.sm-progress-track{height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
#sm-prog-fill{height:100%;background:linear-gradient(90deg,#ff7b24,#ffd23e);box-shadow:0 0 8px #ff7b24;transition:width .1s linear}
.sm-btn-group{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.sm-btn{
background:#26303c;border:1px solid rgba(255,255,255,.16);color:#fff;
border-radius:6px;padding:6px 8px;font-size:11.5px;font-weight:600;
cursor:pointer;transition:.12s;text-align:center;
}
.sm-btn:hover:not(:disabled){background:#364354;border-color:#9fd77f;transform:translateY(-1px)}
.sm-btn:disabled{opacity:.4;cursor:default}
.sm-btn-all{background:#2e4432;border-color:#4a7a54;color:#a8e6b0}
.sm-btn-warn{background:#442828;border-color:#7a3e3e;color:#e6a8a8}
.sm-btn-take{
background:linear-gradient(135deg,#367a3e,#265e30);border:1px solid #54a860;
color:#fff;font-size:12.5px;font-weight:700;border-radius:8px;padding:9px 12px;
cursor:pointer;margin-top:auto;box-shadow:0 4px 12px rgba(40,120,50,.3);
}
.sm-btn-take:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.sm-btn-take:disabled{opacity:.4;filter:none;box-shadow:none;cursor:default}
.sm-empty-ore-hint{font-size:11px;color:#8fe0ff;text-align:center;margin:4px 0}
.sm-ore-pick-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto;padding-right:4px}
.sm-ore-pick-item{
display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 8px;
}
.opi-ico{font-size:18px}
.opi-info{display:flex;flex-direction:column;flex:1;line-height:1.2}
.opi-info b{font-size:11px;color:#fff}
.opi-info span{font-size:10px;color:#9aa4b0}
.opi-btns{display:flex;gap:4px}
.sm-btn.mini{padding:3px 7px;font-size:10.5px}
.sm-no-ore{font-size:11px;color:#8a939e;text-align:center;padding:12px 6px;line-height:1.4}
/* ================= PANEL PARTY (daftar rekan tim) =================
Grid responsif: auto-fill kartu min 190px → 1 kolom di HP kecil, banyak
kolom di layar lebar. Tidak ada lebar tetap yang memecah di layar sempit. */
.party-count{font-size:13px;color:#cfe6bf;margin-bottom:10px}
.party-count b{color:#fff}
.party-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:10px;
}
.party-card{
background:rgba(0,0,0,.28);border:1px solid rgba(140,200,120,.28);
border-radius:10px;padding:10px 11px;cursor:pointer;
transition:transform .08s,border-color .15s,box-shadow .15s;
}
.party-card:hover{border-color:#9fd77f;transform:translateY(-2px);
box-shadow:0 6px 18px -6px rgba(120,200,110,.5)}
.party-card:active{transform:translateY(0)}
.party-card.pet{border-color:rgba(127,216,255,.45)}
.party-card.pet:hover{border-color:#7fd8ff;box-shadow:0 6px 18px -6px rgba(90,190,255,.55)}
.party-card .pc-top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.party-card .pc-face{font-size:26px;line-height:1;flex:0 0 auto}
.party-card .pc-id{display:flex;flex-direction:column;min-width:0}
.party-card .pc-id b{font-size:13px;color:#fff;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.party-card .pc-lv{font-size:10px;color:#bfe6a0}
.party-card .pc-role{font-size:11px;color:#9fb0c4;margin-bottom:7px}
.party-card .pc-bar{position:relative;height:14px;border-radius:7px;
background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:4px}
.party-card .pc-bar i{position:absolute;inset:0;border-radius:7px;
background:linear-gradient(90deg,#4fd06a,#8fe07a)}
.party-card .pc-bar.st i{background:linear-gradient(90deg,#ffd24d,#ff9d47)}
.party-card .pc-bar.xp i{background:linear-gradient(90deg,#4da3ff,#7fd8ff)}
.party-card .pc-bar span{position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;font-size:9px;color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.8)}
.party-card .pc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.party-card .pc-tags span{font-size:10px;color:#dfe8d8;
background:rgba(255,255,255,.07);border-radius:6px;padding:2px 7px}
@media (max-width:420px){
.party-grid{grid-template-columns:1fr}
}
/* =========================================================================
BINGKAI POTRET PEMAIN (#portrait) + PANEL KARAKTER (#panel-char)
-------------------------------------------------------------------------
#stats sekarang berbentuk BARIS: potret di kiri, kolom bar HP/ST/HU/XP di
kanannya. Potret adalah