* { box-sizing: border-box; touch-action: manipulation; } /* no double-tap zoom anywhere (the canvas and joystick use none) */
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0f14; color: #f3ead6;
  font-family: "Segoe UI", system-ui, sans-serif; user-select: none; }
#app { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; }
/* Phone held upright: turn the whole game sideways so it always plays in landscape. */
body.rotated #app { transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- world-space labels ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; }
.label .nm { font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.label.monster .nm { color: #ffd1c4; }
.label.monster .nm b { color: #ffb347; font-weight: 700; margin-left: 2px; }
.label.npc .nm { color: #9fe3ff; }
.label.npc .nm::before { content: "! "; color: #ffd84a; }
.label.player .nm { color: #fff7c2; }
.label.pet .nm { color: #c6ff9a; font-size: 11px; }
.label .hpb { width: 54px; height: 5px; margin: 2px auto 0; background: #000a; border: 1px solid #0008; border-radius: 2px; overflow: hidden; }
.label .hpf { height: 100%; background: linear-gradient(#ff6a55, #c4241a); }
.label.player .hpf { background: linear-gradient(#7dff7a, #2aa52a); }
.label.monster { opacity: .8; }
.label.hot { opacity: 1; }
.label.hot .nm { color: #fff; }

.float { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 20px; pointer-events: none;
  text-shadow: 0 2px 0 #000, 0 0 6px #000; will-change: transform, opacity; }
.float.dealt { color: #fff3a8; }
.float.crit { color: #ffae2b; font-size: 26px; }
.float.taken { color: #ff5a4a; }
.float.heal { color: #7dff8a; }
.float.lvl { color: #ffd84a; font-size: 24px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#portrait { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; align-items: center;
  padding: 8px 14px 8px 8px; background: linear-gradient(#2a2118e6, #15110ce6); border: 1px solid #8a6a3a;
  border-radius: 10px; box-shadow: 0 4px 14px #0008; }
#portrait .face { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(#7a2a1a, #3a120b); border: 2px solid #c9a24a; border-radius: 50%; }
#pname { font-weight: 700; color: #ffe6a6; }
#plevel { font-size: 13px; color: #d8c49a; }

#minimap { position: absolute; top: 14px; right: 14px; width: 180px; height: 180px; border-radius: 50%;
  border: 3px solid #b8924a; box-shadow: 0 4px 14px #0009, inset 0 0 0 2px #0006; background: #3c5a2a; }

#chat { position: absolute; left: 14px; bottom: 34px; width: min(380px, 60vw); padding: 8px 10px; font-size: 13px;
  background: #0008; border-radius: 8px; line-height: 1.45; min-height: 30px; }
#chat .line { text-shadow: 0 1px 1px #000; }
#chat .sys { color: #e8dcbc; }
#chat .exp { color: #9cf28f; }
#chat .dmg { color: #ff8a7a; }
#chat .npc { color: #9fe3ff; }
#chat .lvl { color: #ffd84a; font-weight: 700; }

#bars { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(420px, 90vw);
  display: flex; justify-content: center; }
.bar { position: relative; height: 18px; background: #000b; border: 1px solid #6b5430; border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; transition: width .15s; }
.bar.hp .fill { background: linear-gradient(#ff6a55, #a3180f); }
.bar.mp .fill { background: linear-gradient(#5aa8ff, #1a4aa3); }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#skills { display: flex; gap: 6px; pointer-events: auto; }
.slot { position: relative; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; cursor: pointer;
  background: linear-gradient(#3a2e20, #1a140d); border: 2px solid #b8924a; border-radius: 8px; overflow: hidden; }
.slot .k { position: absolute; top: 1px; left: 4px; font-size: 11px; font-weight: 700; color: #ffe6a6; z-index: 2; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #000b; }

#exp { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #000c; border-top: 1px solid #6b5430; }
#exp .fill { height: 100%; background: linear-gradient(#ffe27a, #c48a14); transition: width .25s; }
#exp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }

#help { position: absolute; top: 122px; left: 14px; font-size: 12px; color: #fffc; background: #0007; padding: 4px 8px; border-radius: 6px; }

#dialog { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(560px, 70vw); display: none;
  padding: 14px 18px 12px; border-radius: 10px; border: 2px solid #c9a24a; color: #f6ecd2;
  background: linear-gradient(#1d2240f2, #10132af2); box-shadow: 0 8px 24px #000c; z-index: 5; }
#dialog.show { display: block; }
#dialog .dn { font-weight: 800; color: #ffd98a; font-size: 16px; margin-bottom: 6px; }
#dialog .dt { font-size: 15px; line-height: 1.5; min-height: 44px; }
#dialog .db { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#dialog button { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  color: #fff3d0; background: linear-gradient(#4a3f78, #241d44); border: 1px solid #c9a24a; }
body.touch #dialog { bottom: 24px; width: min(460px, 52vw); }
#death { position: fixed; inset: 0; display: none; place-items: center; align-content: center; gap: 8px; text-align: center;
  background: radial-gradient(#0000, #400a0acc); font-size: 34px; font-weight: 800; color: #ff7a6a; text-shadow: 0 3px 8px #000; pointer-events: none; }
#death small { font-size: 15px; color: #f3ead6; font-weight: 500; }
#death.show { display: grid; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #0d0f14; font-size: 18px; color: #d8c49a; transition: opacity .5s; }
#loading.hide { opacity: 0; pointer-events: none; }

@media (max-width: 1100px) {
  #chat { bottom: 110px; }
}
@media (max-width: 640px) {
  #minimap { width: 120px; height: 120px; }
  #help { display: none; }
  #chat { bottom: 120px; font-size: 12px; }
}

/* ---------- full screen button ---------- */
#btn-full { position: absolute; top: 14px; right: 204px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 18px; color: #ffe6a6; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }

/* ---------- touch controls ---------- */
#touch { display: none; }
body.touch #touch { display: block; }
body.touch #help, body.touch #skills { display: none; }

#joystick { position: fixed; left: calc(24px + env(safe-area-inset-left)); bottom: calc(40px + env(safe-area-inset-bottom));
  width: 130px; height: 130px; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, #ffffff14 0 55%, #ffffff26 56% 100%); border: 2px solid #ffffff40; }
#joystick .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e0, #c9a24a 60%, #7a5a22); box-shadow: 0 3px 10px #0008; pointer-events: none; }

/* Action cluster: attack button in the corner, skills on an arc around it.
   --cx/--cy is the attack button centre inside #actions. */
#actions { --cx: 214px; --cy: 204px; position: fixed; right: calc(10px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom)); width: 280px; height: 270px; pointer-events: none; }
#actions .arc { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0;
  transform: rotate(var(--a)) translateX(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
#actions button { position: absolute; display: grid; place-items: center; border-radius: 50%; overflow: hidden; padding: 0;
  color: #fff3d0; touch-action: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: scale .08s, filter .08s; }
#actions button:active { scale: .9; filter: brightness(1.35); }
#actions .arc button { transform: translate(-50%, -50%); }

#btn-attack { left: var(--cx); top: var(--cy); width: 108px; height: 108px; transform: translate(-50%, -50%); font-size: 46px;
  background: radial-gradient(circle at 40% 30%, #7fc4ff 0%, #2f6fd0 45%, #143066 100%);
  border: 3px solid #e8d08a; box-shadow: 0 0 0 3px #0006, 0 6px 16px #000a, inset 0 -8px 18px #0006; text-shadow: 0 2px 4px #000; }
.tbtn { width: 68px; height: 68px; font-size: 28px;
  background: radial-gradient(circle at 40% 30%, #8a7fb8 0%, #4a3f78 45%, #1e1838 100%);
  border: 2px solid #c9a24a; box-shadow: 0 0 0 2px #0005, 0 4px 10px #0009, inset 0 -6px 12px #0007; }
.tbtn.empty { background: radial-gradient(circle at 40% 30%, #6a6290 0%, #352d58 50%, #17122b 100%); opacity: .75; }
.sbtn { width: 50px; height: 50px; font-size: 22px; font-weight: 700;
  background: radial-gradient(circle at 40% 30%, #6d6a8e 0%, #2d2a48 60%, #15132a 100%);
  border: 2px solid #b8a06a; box-shadow: 0 3px 8px #0009; }
#actions .ico { position: relative; z-index: 1; filter: drop-shadow(0 2px 2px #000a); }
/* Radial cooldown sweep + remaining seconds. */
#actions .cd { position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: conic-gradient(#000c calc(var(--p, 0) * 360deg), transparent 0); }
#actions .cdt { position: absolute; z-index: 3; font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }

/* ---------- player status frame ---------- */
#unitframe { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left));
  display: flex; align-items: flex-start; pointer-events: none; transform-origin: top left; }
.uf-avatar { position: relative; z-index: 2; width: 84px; height: 84px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4a5a8a, #141826 75%); border: 3px solid #e2cc84;
  box-shadow: 0 0 0 2px #0009, 0 4px 14px #000a; }
#avatar { display: block; width: 100%; height: 100%; border-radius: 50%; }
.uf-lv { position: absolute; left: -6px; bottom: -6px; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(#34488a, #121a36); border: 1px solid #e2cc84; box-shadow: 0 2px 4px #0009; }
.uf-main { margin-left: -16px; padding-top: 3px; }
.uf-name { display: flex; align-items: center; gap: 10px; width: 236px; height: 24px; padding: 0 16px 0 26px;
  font-size: 15px; font-weight: 700; color: #fff3c8; text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, #18203ff0, #2c3f78d0 70%, #2c3f7800);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.uf-mode { margin-left: auto; padding: 1px 9px; font-size: 11px; font-weight: 700; border-radius: 3px;
  background: linear-gradient(#4b9aa6, #2a6670); color: #eafffb; transform: skewX(-12deg); }
.uf-mode.combat { background: linear-gradient(#d0503f, #8a2018); }
.uf-bar { position: relative; height: 14px; margin: 2px 0 0 18px; background: #050814d0; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.uf-bar.hp { width: 222px; } .uf-bar.ar { width: 208px; } .uf-bar.mp { width: 194px; }
.uf-bar .fill { height: 100%; transition: width .2s; }
.uf-bar.hp .fill { background: linear-gradient(#ff8a78, #d23a2a 55%, #8e1a12); }
.uf-bar.ar .fill { background: linear-gradient(#fff0a8, #e0b83a 55%, #9a7414); }
.uf-bar.mp .fill { background: linear-gradient(#9ad2ff, #3f7fdc 55%, #1c3f8a); }
.uf-bar span { position: absolute; inset: 0; padding-right: 16px; text-align: right; font-size: 11px; line-height: 14px;
  font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.uf-buffs { display: flex; gap: 4px; margin: 4px 0 0 20px; }
.uf-buffs .buff { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  background: radial-gradient(#3a4a3a, #111); border: 1px solid #e2cc84; }

/* Compact HUD on touch devices */
body.touch #unitframe { transform: scale(.82); }
body.touch #minimap { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 110px; height: 110px; }
body.touch #btn-full { top: calc(10px + env(safe-area-inset-top)); right: calc(128px + env(safe-area-inset-right)); }
#btn-music { position: absolute; top: 14px; right: 246px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 17px; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
#btn-music.off { opacity: .45; }
body.touch #btn-music { top: calc(10px + env(safe-area-inset-top)); right: calc(170px + env(safe-area-inset-right)); }
body.touch #chat { top: calc(104px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left));
  width: min(300px, 46vw); font-size: 11px; padding: 5px 8px; background: #0006; max-height: 92px; overflow: hidden; }
body.touch #exp { height: 10px; }
body.touch #exp span { font-size: 8px; }
body.touch .label .nm { font-size: 11px; }


/* ---- Skill slots without a skill, gold, skill book shop and skill window ---- */
.slot.empty { opacity: .45; cursor: default; }
#actions button.empty { opacity: .55; }
#actions .sbtn[data-key="6"] { width: 56px; height: 56px; font-size: 24px; }
.uf-gold { margin-left: 8px; font-size: 12px; color: #ffe08a; text-shadow: 0 1px 2px #000; }
#dialog .shop { display: none; }
#dialog.has-shop .shop { display: inline-block; }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 86vw); max-height: 80%;
  display: none; flex-direction: column; z-index: 30; pointer-events: auto; color: #f3e6c8;
  background: linear-gradient(180deg, #2a2016f2, #17110bf2); border: 1px solid #c9a35a; border-radius: 10px;
  box-shadow: 0 10px 40px #000c, inset 0 0 0 1px #00000080; }
.panel.show { display: flex; }
.panel .ph { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #c9a35a55;
  background: linear-gradient(90deg, #5a1e14cc, #2a2016cc); border-radius: 10px 10px 0 0; }
.panel .pt { flex: 1; font-weight: 800; color: #ffd98a; font-size: 16px; }
.panel .pg { font-size: 13px; color: #ffe08a; }
.panel .x { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #c9a35a88; background: #0006; color: #fff; cursor: pointer; }
.panel .sub { padding: 6px 12px; font-size: 12px; color: #cbb991; }
.panel .list { overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.panel .row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; background: #0000004d; border: 1px solid #ffffff14; }
.panel .row.owned { opacity: .6; }
.panel .row.end { border-color: #ffcf5a; box-shadow: inset 0 0 12px #ffcf5a33; }
.panel .row.real { border-color: #ff6a4a; box-shadow: inset 0 0 14px #ff6a4a40; }
.panel .ic { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; border-radius: 8px;
  background: radial-gradient(circle at 40% 30%, #6d5a3a, #2b2013); border: 1px solid #c9a35a88; }
.panel .ic .key { position: absolute; top: -6px; left: -6px; font-size: 11px; font-weight: 800; background: #c9a35a; color: #1a1208;
  border-radius: 4px; padding: 0 4px; }
.panel .info { flex: 1; min-width: 0; font-size: 14px; }
.panel .info b { color: #fff2cf; }
.panel .tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #c9a35a33; color: #ffd98a; margin-left: 4px; }
.panel .desc { font-size: 12px; color: #d8c8a4; margin: 2px 0; }
.panel .meta { font-size: 11px; color: #a99a7a; }
.panel .meta em { color: #ff9a7a; font-style: normal; }
.panel .buy { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.panel .price { font-size: 12px; color: #ffe08a; }
.panel .buy button { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: #1a1208; font-weight: 700;
  border: 1px solid #ffe2a0; background: linear-gradient(180deg, #ffd98a, #c9933a); display: flex; flex-direction: column; align-items: center; }
.panel .buy button small { font-size: 10px; font-weight: 600; }
.panel .buy button:disabled { cursor: default; filter: grayscale(1) brightness(.7); }
.panel .xbar { position: relative; height: 14px; margin: 4px 0 2px; border-radius: 7px; background: #0008; overflow: hidden; border: 1px solid #ffffff22; }
.panel .xbar .fill { height: 100%; background: linear-gradient(90deg, #3a8a3a, #9ae05a); }
.panel .row.end .xbar .fill { background: linear-gradient(90deg, #c9933a, #ffe08a); }
.panel .row.real .xbar .fill { background: linear-gradient(90deg, #a8321e, #ff8a5a); }
.panel .xbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.panel .empty { padding: 18px; text-align: center; color: #cbb991; font-size: 14px; }
body.touch .panel { width: min(600px, 74vw); max-height: 88%; }
body.touch .panel .desc { display: none; }
#btn-skills { position: absolute; top: 14px; right: 288px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 17px; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
body.touch #btn-skills { top: calc(10px + env(safe-area-inset-top)); right: calc(212px + env(safe-area-inset-right)); }

/* ---- GM tool ---- */
#btn-gm { position: absolute; top: 14px; right: 330px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 12px; font-weight: 800; color: #ff9a7a; background: #000a; border: 1px solid #a8321e; border-radius: 8px; }
body.touch #btn-gm { top: calc(10px + env(safe-area-inset-top)); right: calc(254px + env(safe-area-inset-right)); }
#gmtool { width: min(680px, 92vw); max-height: 88%; z-index: 40; }
#gmtool .gm-body { overflow-y: auto; padding: 6px 12px 12px; }
#gmtool section { margin-top: 8px; padding: 8px; border-radius: 8px; background: #0000004d; border: 1px solid #ffffff14; }
#gmtool h4 { margin: 0 0 6px; font-size: 13px; color: #ffd98a; }
#gmtool .gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; }
#gmtool .gm-row:not(.gm-toggles) > label:first-child { width: 44px; color: #cbb991; }
#gmtool input[type=number], #gmtool select { font: inherit; font-size: 13px; width: 90px; padding: 4px 6px; border-radius: 5px;
  border: 1px solid #c9a35a88; background: #0008; color: #fff; }
#gmtool select { width: auto; }
#gmtool button { font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 5px; cursor: pointer; color: #1a1208; font-weight: 700;
  border: 1px solid #ffe2a0; background: linear-gradient(180deg, #ffd98a, #c9933a); }
#gmtool .ph .x { color: #fff; background: #0006; border-color: #c9a35a88; }
#gmtool button:disabled { cursor: default; filter: grayscale(1) brightness(.6); }
#gmtool button.danger { color: #fff; background: linear-gradient(180deg, #d0482c, #8a2412); border-color: #ff8a6a; }
#gmtool .gm-toggles label { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; background: #ffffff10; cursor: pointer; }
#gmtool .gm-skill { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid #ffffff10; }
#gmtool .gm-skill .ic { font-size: 20px; width: 26px; text-align: center; }
#gmtool .gm-skill .nm { flex: 1; min-width: 120px; display: flex; flex-direction: column; font-size: 13px; }
#gmtool .gm-skill small { font-size: 10px; color: #a99a7a; }

/* ---- Shops and bag ---- */
#btn-bag { position: absolute; top: 14px; right: 372px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 17px; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
body.touch #btn-bag { top: calc(10px + env(safe-area-inset-top)); right: calc(296px + env(safe-area-inset-right)); }
.slot .cnt, #actions .cnt, .panel .ic .cnt, #bag .cell .cnt { position: absolute; right: 2px; bottom: 1px; z-index: 3; font-size: 11px; font-weight: 800;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
#actions .cnt { right: 8px; bottom: 6px; }
.panel .tabs { display: flex; align-items: center; gap: 6px; padding: 8px 12px 2px; }
.panel .tabs button, .panel .pages button { font: inherit; font-size: 13px; padding: 5px 14px; border-radius: 6px 6px 0 0; cursor: pointer;
  border: 1px solid #c9a35a66; background: #0006; color: #cbb991; }
.panel .tabs button.on, .panel .pages button.on { background: #c9a35a; color: #1a1208; font-weight: 800; }
.panel .pages { display: flex; gap: 4px; margin-left: 10px; }
.panel .pages button { padding: 3px 9px; border-radius: 5px; }
.panel .bagfree { margin-left: auto; font-size: 12px; color: #a99a7a; }
.panel .row.low { opacity: .55; }
.panel .qty { display: flex; gap: 4px; }
#bag { width: min(660px, 92vw); }
#bag .bagbody { display: flex; gap: 10px; padding: 10px 12px 12px; min-height: 0; }
#bag .grid { display: grid; grid-template-columns: repeat(8, 44px); grid-auto-rows: 44px; gap: 4px; flex: none; }
#bag .cell { position: relative; display: grid; place-items: center; font-size: 24px; border-radius: 6px; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #4a3c26, #1e170e); border: 1px solid #c9a35a55; }
#bag .cell.empty { background: #00000059; border-color: #ffffff12; cursor: default; }
#bag .cell.sel { outline: 2px solid #ffd98a; }
#bag .detail { flex: 1; min-width: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
#bag .detail .dh { display: flex; gap: 8px; align-items: center; }
#bag .detail .dh .ic { font-size: 30px; }
#bag .detail .desc { color: #d8c8a4; font-size: 12px; }
#bag .detail .meta { color: #a99a7a; font-size: 12px; }
#bag .detail .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
#bag .detail button { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; color: #1a1208;
  border: 1px solid #ffe2a0; background: linear-gradient(180deg, #ffd98a, #c9933a); }
#bag .detail button:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
#bag .detail button.danger { color: #fff; background: linear-gradient(180deg, #d0482c, #8a2412); border-color: #ff8a6a; }
body.touch #bag .grid { grid-template-columns: repeat(8, 36px); grid-auto-rows: 36px; }
body.touch #bag .cell { font-size: 20px; }

/* ---- Original icons (40px cells, 16 per row) ---- */
.ii, .si { --s: 40px; display: block; width: var(--s); height: var(--s); flex: none; background-repeat: no-repeat;
  background-size: calc(var(--s) * 16) auto; background-position: calc(var(--ix) * var(--s) * -1) calc(var(--iy) * var(--s) * -1);
  image-rendering: auto; border-radius: 4px; }
.ii { background-image: url(assets/ui/item_icons.png); }
.si { background-image: url(assets/ui/skill_icons.png); }
.slot .ii, .slot .si { --s: 42px; }
#actions .tbtn .ii, #actions .tbtn .si { --s: 50px; border-radius: 50%; }
#actions .sbtn .ii, #actions .sbtn .si { --s: 38px; border-radius: 50%; }
.panel .ic .ii, .panel .ic .si { --s: 42px; }
#bag .cell .ii { --s: 40px; }
#bag .detail .dh .ii { --s: 44px; }
#gmtool .gm-skill .ic .si { --s: 26px; }
body.touch #bag .cell .ii { --s: 34px; }

/* ---- Character window ---- */
#btn-char { position: absolute; top: 14px; right: 414px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 17px; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
body.touch #btn-char { top: calc(10px + env(safe-area-inset-top)); right: calc(338px + env(safe-area-inset-right)); }
#charwin { width: min(640px, 92vw); }
#charwin .charbody { display: flex; gap: 12px; padding: 10px 12px 12px; overflow-y: auto; }
#charwin .equip { flex: 1.3; display: flex; flex-direction: column; gap: 5px; }
#charwin .eslot { display: flex; gap: 8px; align-items: center; padding: 5px; border-radius: 7px; background: #0000004d; border: 1px solid #c9a35a44; cursor: pointer; }
#charwin .eslot.empty { cursor: default; opacity: .6; }
#charwin .eslot:not(.empty):hover { border-color: #ffd98a; }
#charwin .eslot .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #00000080; border: 1px solid #c9a35a55; }
#charwin .eslot .ic .ii { --s: 40px; }
#charwin .eslot small { display: block; font-size: 10px; color: #a99a7a; }
#charwin .eslot b { font-size: 13px; color: #fff2cf; }
#charwin .eslot .meta { font-size: 11px; color: #a99a7a; }
#charwin .stats { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#charwin .st { padding: 6px 8px; border-radius: 6px; background: #0000004d; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
#charwin .st span { color: #cbb991; flex: 1; }
#charwin .st b { color: #fff2cf; }
#charwin .st small { width: 100%; text-align: right; font-size: 10px; color: #8f8166; }

/* ---- Loot labels ---- */
.label.loot .nm { color: #ffe08a; font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.float.loot { color: #ffe08a; font-size: 15px; }
#chat .loot { color: #ffe08a; }

/* ---- Item tooltip ---- */
.ii { background-image: none; }
#itemtip { position: absolute; left: 0; top: 0; z-index: 60; width: 250px; padding: 9px 11px; display: none; pointer-events: none;
  background: linear-gradient(180deg, #14100cf0, #0a0806f0); border: 1px solid #a8844a; border-radius: 6px;
  box-shadow: 0 6px 24px #000c; color: #e9dcc0; font-size: 12px; line-height: 1.45; }
#itemtip.show { display: block; }
.tt-name { font-size: 14px; font-weight: 800; color: #fff; }
.tt-name.tt-refine { color: #7fd0ff; }
.tt-name.tt-high { color: #ffb84a; }
.tt-kind { color: #b9a77f; font-size: 11px; }
.tt-req { color: #cfe8a8; font-size: 11px; }
.tt-req.bad { color: #ff6a5a; }
.tt-stats { margin: 6px 0; padding: 5px 0; border-top: 1px solid #ffffff1a; border-bottom: 1px solid #ffffff1a; }
.tt-stats b { color: #fff; }
.tt-elem { font-size: 11px; color: #b9a77f; }
.tt-elem .e0 { color: #ff7a5a; } .tt-elem .e1 { color: #6ab8ff; } .tt-elem .e2 { color: #7ed36a; }
.tt-elem .e3 { color: #e8e8f0; } .tt-elem .e4 { color: #d8b06a; }
.tt-dur { font-size: 11px; color: #b9a77f; }
.tt-desc { margin-top: 5px; color: #cdbf9d; font-style: italic; font-size: 11px; }
.tt-price { margin-top: 5px; color: #ffe08a; font-size: 11px; }
#bag .detail .tt { font-size: 12px; line-height: 1.45; }
#bag .detail .dh { align-items: flex-start; }

/* ---- Bag in the original inventory layout (equipment + 6x5 pages) ---- */
#bag { width: auto; max-width: 96%; }
#bag .bagbody { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
#bag .equiparea { position: relative; width: 232px; height: 140px; margin: 0 auto; }
#bag .eq { position: absolute; width: 42px; height: 42px; border-radius: 6px; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #4a3c26, #1e170e); border: 1px solid #c9a35a88; box-shadow: inset 0 0 6px #000; }
#bag .eq.empty { cursor: default; border-color: #c9a35a33;
  background: url(assets/ui/equip_slots.png) calc(var(--sx) * -42px) 0 / auto 42px no-repeat, #1a140d; opacity: .75; }
#bag .eq:not(.empty):hover { border-color: #ffd98a; }
#bag .eq .ii { --s: 40px; }
#bag .bagmid { display: flex; gap: 6px; align-items: flex-start; justify-content: center; }
#bag .grid { grid-template-columns: repeat(6, 44px); grid-auto-rows: 44px; }
#bag .bagtabs { display: flex; flex-direction: column; gap: 5px; }
#bag .bagtabs button { width: 22px; height: 34px; padding: 0; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  border: 1px solid #c9a35a66; background: #0007; color: #cbb991; }
#bag .bagtabs button.on { background: linear-gradient(180deg, #ffd98a, #c9933a); color: #1a1208; }
#bag .selbar { min-height: 30px; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: #0000004d; font-size: 12px; }
#bag .selbar .nm { flex: 1; color: #fff2cf; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bag .selbar .hint { color: #8f8166; }
#bag .selbar button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: 700; color: #1a1208;
  border: 1px solid #ffe2a0; background: linear-gradient(180deg, #ffd98a, #c9933a); }
#bag .selbar button.danger { color: #fff; background: linear-gradient(180deg, #d0482c, #8a2412); border-color: #ff8a6a; }
#bag .bagfoot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
#bag .bagfoot .wl { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #0007; border: 1px solid #c9a35a55; color: #cbb991; }
#bag .bagfoot .wallet { min-width: 110px; text-align: right; padding: 3px 8px; border-radius: 4px; background: #000a; color: #ffe08a; font-size: 13px; }
body.touch #bag .grid { grid-template-columns: repeat(6, 38px); grid-auto-rows: 38px; }
body.touch #bag .equiparea { transform: scale(.9); transform-origin: top center; height: 128px; }
#charwin { width: min(360px, 92vw); }
#bag .equiparea { flex: none; }
/* Phones (landscape, little height): equipment on the left, the bag page on the right. */
body.touch #bag .bagbody { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; gap: 6px 10px; align-items: start; }
body.touch #bag .equiparea { grid-column: 1; grid-row: 1 / span 2; transform: none; height: 140px; margin: 0; }
body.touch #bag .bagmid { grid-column: 2; grid-row: 1 / span 2; }
body.touch #bag .selbar { grid-column: 1 / span 2; }
body.touch #bag .bagfoot { grid-column: 1 / span 2; }
body.touch #bag .grid { grid-template-columns: repeat(6, 36px); grid-auto-rows: 36px; gap: 3px; }
body.touch #bag .cell .ii { --s: 32px; }
/* left: 50% leaves only half the screen for shrink-to-fit, so size the bag to its content. */
#bag { width: max-content; }
body.touch #bag { width: max-content; max-height: 94%; }
body.touch #bag .ph { padding: 5px 10px; }
body.touch #bag .bagbody { padding: 6px 10px 8px; }
/* ---- Compact bag docked on the right (PC); --k scales the original 42 px cells ---- */
#bag { --k: .8; --c: 34px; left: auto; right: 14px; top: 54%; transform: translateY(-50%); }
#bag .ph { padding: 6px 10px; }
#bag .ph .pt { font-size: 14px; }
#bag .ph .x { width: 24px; height: 24px; }
#bag .bagbody { gap: 6px; padding: 8px 10px 10px; }
#bag .equiparea { width: calc(232px * var(--k)); height: calc(140px * var(--k)); }
#bag .eq { left: calc(var(--x) * var(--k) * 1px); top: calc(var(--y) * var(--k) * 1px);
  width: calc(42px * var(--k)); height: calc(42px * var(--k)); }
#bag .eq.empty { background-size: auto calc(42px * var(--k)); background-position: calc(var(--sx) * -42px * var(--k)) 0; }
#bag .eq .ii { --s: calc(40px * var(--k)); }
#bag .grid { grid-template-columns: repeat(6, var(--c)); grid-auto-rows: var(--c); gap: 3px; }
#bag .cell { font-size: 18px; }
#bag .cell .ii { --s: calc(var(--c) - 2px); }
#bag .bagtabs button { width: 18px; height: 28px; font-size: 11px; }
#bag .selbar { min-height: 26px; font-size: 11px; padding: 3px 5px; }
#bag .selbar button { font-size: 11px; padding: 3px 8px; }
#bag .bagfoot .wallet { font-size: 12px; min-width: 90px; }
body.touch #bag { --c: 34px; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); }
body.touch #bag .equiparea { height: calc(140px * var(--k)); }

/* ---- Status window (C), original layout ---- */
#charwin { width: 300px; left: 14px; top: 54%; transform: translateY(-50%); }
body.touch #charwin { left: 50%; transform: translate(-50%, -50%); max-height: 94%; }
#charwin .ph { padding: 6px 10px; }
#charwin .ph .pt { font-size: 14px; }
#charwin .ph .x { width: 24px; height: 24px; }
#charwin .charbody { padding: 8px 10px 10px; display: block; overflow-y: auto; }
#charwin .stats { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
#charwin .sv { display: inline-block; min-width: 46px; padding: 2px 6px; border-radius: 3px; background: #000a; border: 1px solid #ffffff1a;
  color: #fff2cf; text-align: right; font-weight: 700; }
#charwin span { color: #cbb991; }
#charwin .st-id { display: flex; gap: 8px; }
#charwin .idbox { width: 46px; height: 46px; flex: none; display: grid; place-items: center; align-content: center; border-radius: 5px;
  background: #000a; border: 1px solid #c9a35a66; }
#charwin .idbox small { font-size: 10px; color: #a99a7a; } #charwin .idbox b { font-size: 16px; color: #ffe08a; }
#charwin .idrows { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#charwin .idrows > div { display: flex; align-items: center; gap: 6px; } #charwin .idrows .sv { flex: 1; text-align: left; }
#charwin .st-exp { display: flex; align-items: center; gap: 6px; }
#charwin .xb { position: relative; flex: 1; height: 15px; border-radius: 3px; background: #000a; border: 1px solid #ffffff1a; overflow: hidden; }
#charwin .xb i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3a7a2a, #8ad05a); }
#charwin .xb b { position: relative; display: block; text-align: center; font-size: 10px; line-height: 15px; color: #fff; text-shadow: 0 1px 2px #000; }
#charwin .st-misc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
#charwin .st-misc > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
#charwin .st-misc .sv { min-width: 60px; }
#charwin .st-h { text-align: center; color: #7fc8ff; font-weight: 800; font-size: 13px; margin-top: 2px; }
#charwin .st-cp { display: flex; gap: 10px; }
#charwin .cp-l { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
#charwin .sp { display: flex; align-items: center; gap: 5px; } #charwin .sp > span { width: 28px; font-weight: 700; }
#charwin .sp .sv { min-width: 30px; }
#charwin .sp button { width: 18px; height: 18px; padding: 0; border-radius: 3px; cursor: pointer; font-weight: 900; line-height: 1;
  color: #fff; background: linear-gradient(180deg, #4a9aff, #1e5aa8); border: 1px solid #8ac4ff; }
#charwin .sp button:disabled { filter: grayscale(1) brightness(.5); cursor: default; }
#charwin .cp-r { flex: 1; display: flex; flex-direction: column; gap: 3px; }
#charwin .cp-r > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
#charwin .cp-r .sv { min-width: 70px; }
#charwin .st-pt { display: flex; align-items: center; gap: 6px; } #charwin .st-pt > span { color: #7fc8ff; font-weight: 800; }
#charwin .st-pt small { color: #8f8166; font-size: 10px; }
#charwin .st-res { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
#charwin .rs { display: flex; align-items: center; gap: 4px; } #charwin .rs > span { width: 38px; font-size: 11px; }
#charwin .rb { position: relative; flex: 1; height: 13px; border-radius: 3px; background: #000a; overflow: hidden; }
#charwin .rb i { position: absolute; inset: 0 auto 0 0; opacity: .7; }
#charwin .rb b { position: relative; display: block; text-align: center; font-size: 10px; line-height: 13px; color: #fff; }
#charwin .e0 .rb i { background: #c0402a; } #charwin .e1 .rb i { background: #2a6ac0; } #charwin .e2 .rb i { background: #3a9a3a; }
#charwin .e3 .rb i { background: #9a9aa8; } #charwin .e4 .rb i { background: #9a7a3a; }

/* ---- Passive abilities (Kemahiran Khas) ---- */
.ai { --s: 40px; display: block; width: var(--s); height: var(--s); background: url(assets/ui/ability_icons.png) no-repeat;
  background-size: calc(var(--s) * 16) auto; background-position: calc(var(--ix) * var(--s) * -1) calc(var(--iy) * var(--s) * -1); border-radius: 4px; }
.panel .ic .ai { --s: 42px; }
.panel .tag.bad { background: #a8321e55; color: #ff9a7a; }
.panel .meta b { color: #cfe8a8; }

/* ---- Auto hunt button ---- */
#btn-auto { position: absolute; top: 14px; right: 456px; height: 36px; padding: 0 8px; pointer-events: auto; cursor: pointer;
  font-size: 11px; font-weight: 900; letter-spacing: .5px; color: #cbb991; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
body.touch #btn-auto { display: none; }
#btn-auto.on, #actions .sbtn.auto.on { color: #1a1208; background: linear-gradient(180deg, #9aff7a, #3aa83a); border-color: #c8ffb0;
  box-shadow: 0 0 12px #6aff5a88; animation: autoPulse 1.4s ease-in-out infinite; }
#actions .sbtn.auto { font-size: 10px; font-weight: 900; }
@keyframes autoPulse { 50% { box-shadow: 0 0 2px #6aff5a44; } }

/* ---- Skill window (S), original layout ---- */
#skillwin { width: 262px; left: 14px; top: 54%; transform: translateY(-50%); max-height: 92%; }
body.touch #skillwin { left: 50%; transform: translate(-50%, -50%); }
#skillwin .ph { padding: 6px 10px; } #skillwin .ph .pt { font-size: 14px; } #skillwin .ph .x { width: 24px; height: 24px; }
#skillwin .swbody { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; overflow-y: auto; }
#skillwin .swtabs, #skillwin .swsub { display: flex; gap: 6px; justify-content: center; }
#skillwin .swtabs button, #skillwin .swsub button { font: inherit; font-size: 12px; padding: 3px 12px; border-radius: 4px; cursor: pointer;
  color: #e9dcc0; background: linear-gradient(180deg, #2a3a5a, #172238); border: 1px solid #5a7ab0; }
#skillwin .swsub button { padding: 2px 8px; font-size: 11px; }
#skillwin .swtabs button.on, #skillwin .swsub button.on { color: #ffe066; border-color: #ffd98a; }
#skillwin .swinfo { display: flex; gap: 8px; align-items: center; }
#skillwin .swicon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #000a; border: 1px solid #5a7ab0; }
#skillwin .swicon .si { --s: 42px; }
#skillwin .swrows { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
#skillwin .swrows > div { display: flex; align-items: center; gap: 5px; }
#skillwin span { color: #cbb991; }
#skillwin .sv { display: inline-block; min-width: 26px; padding: 1px 5px; border-radius: 3px; background: #000a; border: 1px solid #ffffff1a; color: #fff2cf; text-align: center; }
#skillwin .sv.wide { flex: 1; text-align: left; }
#skillwin .xbar { position: relative; flex: 1; height: 13px; border-radius: 3px; background: #000a; overflow: hidden; }
#skillwin .xbar .fill { height: 100%; background: linear-gradient(90deg, #3a7a2a, #8ad05a); }
#skillwin .xbar span { position: absolute; inset: 0; text-align: center; font-size: 9px; line-height: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
#skillwin .swgrid { display: grid; grid-template-columns: repeat(5, 44px); grid-auto-rows: 44px; gap: 3px; justify-content: center; }
#skillwin .swc { position: relative; display: grid; place-items: center; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #1e2a40, #0e1420); border: 1px solid #3a4a6a; box-shadow: inset 0 0 6px #000; }
#skillwin .swc.empty { cursor: default; }
#skillwin .swc.sel { outline: 2px solid #ffd98a; }
#skillwin .swc.low { filter: grayscale(.8) brightness(.6); }
#skillwin .swc .si, #skillwin .swc .ai { --s: 40px; }
#skillwin .swc .lv { position: absolute; left: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#skillwin .swc .key { position: absolute; top: -5px; left: -5px; font-size: 10px; font-weight: 800; background: #c9a35a; color: #1a1208; border-radius: 3px; padding: 0 3px; }
#skillwin .swfoot { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
#skillwin .swsel { padding: 4px 6px; border-radius: 4px; background: #0006; color: #fff2cf; }
#skillwin .swsel span { color: #cfe8a8; }
#skillwin .swrow { display: flex; align-items: center; gap: 6px; } #skillwin .swrow > span { width: 62px; text-align: right; }
#skillwin .swrow .hl { color: #7fc8ff; }
#skillwin .train { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer; color: #e9dcc0;
  background: linear-gradient(180deg, #2a3a5a, #172238); border: 1px solid #5a7ab0; }
#skillwin .train:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
body.touch #skillwin .swgrid { grid-template-columns: repeat(5, 38px); grid-auto-rows: 38px; }
body.touch #skillwin .swc .si, body.touch #skillwin .swc .ai { --s: 34px; }

/* ---- Ten-slot bar, drag and drop ---- */
#skills { gap: 4px; }
#skills .slot { width: 42px; height: 42px; touch-action: none; user-select: none; }
#skills .slot .ii, #skills .slot .si { --s: 38px; }
#skills .slot.drop { outline: 2px solid #9aff7a; }
.drag-ghost { position: absolute; left: 0; top: 0; z-index: 80; width: 40px; height: 40px; pointer-events: none; opacity: .85;
  display: grid; place-items: center; filter: drop-shadow(0 4px 6px #000a); }
.drag-ghost .ii, .drag-ghost .si { --s: 40px; }
#bag .cell, #skillwin .swc { touch-action: none; user-select: none; -webkit-user-drag: none; }
/* ---- Beta build label ---- */
#beta { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #ffe08a99; text-shadow: 0 1px 2px #000; }
body.touch #beta { bottom: 12px; }

/* ---- Start screen: login, characters, create ---- */
#auth { position: absolute; inset: 0; z-index: 100; display: none; place-items: center; overflow-y: auto; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #3a2a18ee, #0c0906f8 70%), #0c0906; color: #f3e6c8; }
#auth.show { display: grid; }
.au-box { width: min(380px, 92vw); padding: 22px 22px 18px; border-radius: 12px; background: linear-gradient(180deg, #2a2016f4, #17110bf4);
  border: 1px solid #c9a35a; box-shadow: 0 16px 50px #000c; display: flex; flex-direction: column; gap: 12px; }
.au-logo { text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 6px; color: #ffd98a; text-shadow: 0 2px 0 #6a3a10, 0 0 18px #ffb84a55; }
.au-logo small { display: block; font-size: 10px; letter-spacing: 3px; color: #cbb991; font-weight: 700; }
.au-tabs { display: flex; gap: 6px; }
.au-tabs button { flex: 1; font: inherit; font-weight: 700; padding: 8px; border-radius: 6px; cursor: pointer; border: 1px solid #c9a35a66; background: #0006; color: #cbb991; }
.au-tabs button.on { background: linear-gradient(180deg, #ffd98a, #c9933a); color: #1a1208; }
.au-form { display: flex; flex-direction: column; gap: 10px; }
.au-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #cbb991; }
.au-form input { font: inherit; font-size: 15px; padding: 9px 10px; border-radius: 6px; border: 1px solid #c9a35a88; background: #000a; color: #fff; }
.au-form input:focus { outline: 2px solid #ffd98a88; }
.au-main { font: inherit; font-size: 15px; font-weight: 800; padding: 10px; border-radius: 7px; cursor: pointer; color: #1a1208;
  border: 1px solid #ffe2a0; background: linear-gradient(180deg, #ffd98a, #c9933a); }
.au-main:disabled, .au-tabs button:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }
.au-err { display: none; padding: 7px 9px; border-radius: 6px; background: #a8321e44; border: 1px solid #ff6a4a88; color: #ffb4a0; font-size: 13px; }
.au-err.on { display: block; }
.au-note { font-size: 12px; color: #a99a7a; text-align: center; }
.au-head { font-size: 16px; font-weight: 800; color: #ffd98a; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.au-head span { font-size: 11px; font-weight: 400; color: #a99a7a; overflow: hidden; text-overflow: ellipsis; }
.au-chars { display: flex; flex-direction: column; gap: 8px; }
.au-char { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: #0006; border: 1px solid #c9a35a55; }
.au-el { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 900; color: #1a1208;
  background: radial-gradient(circle at 40% 30%, #fff8, var(--c)); border: 2px solid #0008; }
.au-ci { flex: 1; display: flex; flex-direction: column; min-width: 0; } .au-ci b { color: #fff2cf; font-size: 15px; } .au-ci small { color: #a99a7a; }
.au-play { font: inherit; font-weight: 800; padding: 7px 14px; border-radius: 6px; cursor: pointer; color: #1a1208; border: 1px solid #ffe2a0;
  background: linear-gradient(180deg, #9aff7a, #3aa83a); }
.au-del { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 1px solid #ff6a4a66; background: #0006; color: #ff9a7a; }
.au-new { font: inherit; padding: 14px; border-radius: 8px; cursor: pointer; border: 1px dashed #c9a35a88; background: #0004; color: #ffd98a; font-weight: 700; }
.au-row { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.au-row .au-main { flex: 1; }
.au-link { font: inherit; font-size: 13px; padding: 8px 10px; border: none; background: none; color: #cbb991; cursor: pointer; text-decoration: underline; }
.au-lab { font-size: 12px; color: #cbb991; margin-bottom: -4px; }
.au-els { display: flex; flex-wrap: wrap; gap: 5px; }
.au-els button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid #ffffff22; background: #0006; color: var(--c, #e9dcc0); }
.au-els button.on { border-color: var(--c, #ffd98a); box-shadow: inset 0 0 10px color-mix(in srgb, var(--c, #ffd98a) 40%, transparent); }
.au-els button:disabled { opacity: .35; cursor: default; }
.au-weapons button.on { color: #ffd98a; border-color: #ffd98a; }

/* ---- multiplayer */
.label.remote .nm { color: #b8f0ff; }
.label.remote .nm b { color: #ffd84a; font-weight: 700; margin-left: 2px; }
.bubble { position: absolute; left: 0; top: 0; max-width: 220px; padding: 4px 8px; font-size: 12px; color: #2a1d0b;
  background: #fff8e6ee; border: 1px solid #8a6a2a; border-radius: 8px; white-space: normal; text-align: center;
  word-wrap: break-word; will-change: transform; }
#chat .say { color: #fff; }
#chat .whisper { color: #ff9ff0; }
#chatin { position: absolute; left: 50px; bottom: 6px; width: min(344px, 52vw); display: none; padding: 5px 8px; font-size: 13px; font-family: inherit;
  color: #fff; background: #000c; border: 1px solid #c9a55a; border-radius: 4px; outline: none; z-index: 30; pointer-events: auto; }
#chatin.show { display: block; }
#btn-chat { position: absolute; left: 14px; bottom: 6px; width: 30px; height: 26px; padding: 0;
  font-size: 15px; background: #000a; border: 1px solid #c9a55a88; border-radius: 4px; cursor: pointer; z-index: 30; pointer-events: auto; }
body.touch #chatin { top: calc(70px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); width: min(320px, 55vw); }
body.touch #btn-chat { top: calc(70px + env(safe-area-inset-top)); bottom: auto; left: calc(16px + min(320px, 55vw) + env(safe-area-inset-left)); }

/* ---- party, invitations, player menu, trade, duel */
#chat .party { color: #8fd8ff; }
.label.remote.party .nm { color: #8fd8ff; }
.label.remote.foe .nm { color: #ff7a6a; }
.label.remote .hpb { width: 46px; height: 4px; }
.label.remote .hpf { background: linear-gradient(#7dff7a, #2aa52a); }
.label.remote.foe .hpf { background: linear-gradient(#ff6a55, #c4241a); }
#party { position: absolute; left: 12px; top: 132px; width: 170px; display: none; padding: 5px 7px; font-size: 12px;
  background: #0008; border: 1px solid #c9a55a55; border-radius: 5px; pointer-events: auto; z-index: 15; }
#party.show { display: block; }
#party .pt-h { display: flex; justify-content: space-between; align-items: center; color: #ffd84a; font-weight: 700; margin-bottom: 3px; }
#party button { font-size: 10px; padding: 1px 5px; background: #3a2a10; color: #f0dca8; border: 1px solid #c9a55a88; border-radius: 3px; cursor: pointer; }
#party .pt-m { position: relative; margin: 3px 0; color: #e8f4ff; }
#party .pt-m.me .pt-n { color: #fff7c2; }
#party .pt-m b { color: #ffd84a; font-weight: 600; font-size: 10px; }
#party .pt-m button { position: absolute; right: 0; top: 0; padding: 0 4px; }
#party .pt-bar { height: 4px; margin-top: 2px; background: #000a; border-radius: 2px; overflow: hidden; }
#party .pt-bar div { height: 100%; background: linear-gradient(#7dff7a, #2aa52a); }
#invite { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); display: none; z-index: 60; padding: 12px 16px; min-width: 240px;
  text-align: center; color: #f6ead0; background: #1d1408f0; border: 1px solid #c9a55a; border-radius: 6px; box-shadow: 0 4px 18px #000a; }
#invite.show { display: block; }
#invite div { margin-bottom: 10px; font-size: 14px; }
#invite button, #pmenu button, #trade button { margin: 0 4px; padding: 5px 12px; font: inherit; font-size: 13px; color: #f6ead0;
  background: linear-gradient(#5a4220, #3a2a10); border: 1px solid #c9a55a; border-radius: 4px; cursor: pointer; }
#invite button[data-n], #trade button[data-x] { background: linear-gradient(#4a2a22, #2e1712); }
#pmenu { position: fixed; display: none; z-index: 60; min-width: 150px; padding: 6px; background: #1d1408f0; border: 1px solid #c9a55a;
  border-radius: 6px; box-shadow: 0 4px 18px #000a; }
#pmenu.show { display: block; }
#pmenu .pm-h { padding: 2px 4px 6px; color: #b8f0ff; font-weight: 700; }
#pmenu .pm-h b { color: #ffd84a; font-size: 11px; }
#pmenu button { display: block; width: 100%; margin: 3px 0; text-align: left; }
#trade { position: fixed; left: 50%; top: 50%; transform: translate(-60%, -50%); display: none; z-index: 55; width: min(420px, 94%);
  padding: 10px 12px; color: #f6ead0; background: #1d1408f2; border: 1px solid #c9a55a; border-radius: 6px; box-shadow: 0 6px 24px #000c; }
#trade.show { display: block; }
#trade .tr-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #ffd84a; margin-bottom: 8px; }
#trade .tr-h button { padding: 1px 7px; margin: 0; }
#trade .tr-side { padding: 6px; margin-bottom: 6px; background: #0006; border: 1px solid #c9a55a44; border-radius: 4px; }
#trade .tr-t { font-size: 12px; margin-bottom: 4px; }
#trade .tr-items { display: flex; flex-wrap: wrap; gap: 4px; min-height: 36px; }
#trade .cell { position: relative; width: 34px; height: 34px; background: #0008; border: 1px solid #c9a55a66; border-radius: 3px; }
#trade .cell[data-rm] { cursor: pointer; }
#trade .cell .cnt { position: absolute; right: 1px; bottom: 0; font-size: 10px; text-shadow: 0 1px 1px #000; }
#trade .tr-g { margin-top: 4px; font-size: 12px; }
#trade .tr-g input { width: 110px; padding: 2px 4px; color: #fff; background: #000a; border: 1px solid #c9a55a88; border-radius: 3px; }
#trade .tr-b { display: flex; justify-content: center; gap: 4px; margin: 8px 0 4px; }
#trade button:disabled { opacity: .45; cursor: default; }
#trade .ok { color: #9cf28f; } #trade .lk { color: #ffd84a; } #trade .hint { color: #b9a887; font-size: 11px; }
body.touch #party { top: calc(150px + env(safe-area-inset-top)); left: auto; right: calc(10px + env(safe-area-inset-right)); }

/* ---- server restart countdown */
#restart { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); z-index: 80; padding: 12px 22px; text-align: center;
  color: #ffe9a8; background: #2a0d08ee; border: 1px solid #ffb347; border-radius: 6px; box-shadow: 0 4px 22px #000c; font-size: 15px; }
#restart b { color: #ffd84a; font-size: 17px; }
#restart span { color: #fff; }
#restart small { color: #e8cfa0; }

/* ---- GM world announcement */
#chat .announce { color: #ffb347; font-weight: 700; }
#announce { position: fixed; left: 50%; top: 140px; transform: translate(-50%, -12px); z-index: 75; max-width: min(620px, 92%); padding: 10px 22px;
  text-align: center; color: #fff4d6; background: linear-gradient(#3a1a08ee, #22100aee); border: 1px solid #ffb347; border-radius: 6px;
  box-shadow: 0 4px 22px #000c; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; }
#announce.show { opacity: 1; transform: translate(-50%, 0); }
#announce b { display: block; color: #ffd84a; font-size: 13px; letter-spacing: .5px; margin-bottom: 3px; }
#announce div { font-size: 16px; white-space: pre-wrap; word-wrap: break-word; }

/* ================= mobile tidy-up (v0.7) ================= */
/* UI size setting: scales the HUD and the touch controls. */
#hud, #touch { zoom: var(--ui, 1); }

/* 1. Skill arc: five slots + page / switch-target / auto on an outer ring that stays clear of the minimap. */
body.touch .tbtn { width: 62px; height: 62px; }
#actions .tbtn .ii, #actions .tbtn .si { --s: 46px; }
#actions .sbtn.page { font-size: 12px; font-weight: 900; color: #ffe9a8; }
#actions button.empty { opacity: .4; }
#actions button.empty .ico { display: none; }
@media (max-height: 430px) {
  body.touch #actions { transform: scale(.88); transform-origin: bottom right; }
  body.touch #joystick { transform: scale(.88); transform-origin: bottom left; }
}

/* 2. Chat: three lines, tap to expand; the chat button and input sit right beside it. */
body.touch #chat { top: calc(104px + env(safe-area-inset-top)); width: min(280px, 40vw); max-height: 50px; overflow: hidden;
  pointer-events: auto; transition: max-height .2s; display: flex; flex-direction: column; justify-content: flex-end; }
body.touch #chat.open { max-height: 190px; background: #000a; }
body.touch #btn-chat { top: calc(104px + env(safe-area-inset-top)); left: calc(18px + min(280px, 40vw) + env(safe-area-inset-left));
  width: 38px; height: 34px; font-size: 18px; }
body.touch #chatin { top: calc(104px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); width: min(280px, 40vw); font-size: 14px; }
body.touch #party { top: calc(160px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: auto; width: 150px; }

/* 3. Top buttons: bigger, evenly spaced, settings included. */
#btn-settings { position: absolute; top: 14px; right: 520px; width: 36px; height: 36px; pointer-events: auto; cursor: pointer;
  font-size: 18px; color: #f3e6c8; background: #000a; border: 1px solid #8a6a3a; border-radius: 8px; }
body.touch #btn-full, body.touch #btn-music, body.touch #btn-skills, body.touch #btn-bag, body.touch #btn-char,
body.touch #btn-settings, body.touch #btn-gm { top: calc(8px + env(safe-area-inset-top)); width: 40px; height: 40px; font-size: 19px; border-radius: 10px; }
body.touch #btn-full { right: calc(128px + env(safe-area-inset-right)); }
body.touch #btn-music { right: calc(172px + env(safe-area-inset-right)); }
body.touch #btn-settings { right: calc(216px + env(safe-area-inset-right)); }
body.touch #btn-skills { right: calc(260px + env(safe-area-inset-right)); }
body.touch #btn-bag { right: calc(304px + env(safe-area-inset-right)); }
body.touch #btn-char { right: calc(348px + env(safe-area-inset-right)); }
body.touch #btn-gm { right: calc(392px + env(safe-area-inset-right)); }

/* 4. Windows on a phone: one at a time, fit the screen, big close button. */
body.touch .panel { max-height: calc(100% - 16px); }
body.touch .panel .ph .x { width: 40px; height: 34px; font-size: 18px; }
body.touch #trade { max-height: calc(100% - 16px); overflow-y: auto; }

/* 5. Target frame */
#tframe { position: absolute; left: 50%; top: calc(58px + env(safe-area-inset-top)); transform: translateX(-50%); width: 220px;
  display: none; padding: 4px 10px 6px; text-align: center; background: #000a; border: 1px solid #c9a55a88; border-radius: 6px; }
#tframe.show { display: block; }
#tframe .tf-n { font-size: 13px; font-weight: 700; color: #ffd1c4; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tframe.player .tf-n { color: #b8f0ff; }
#tframe .tf-lv { color: #ffd84a; font-size: 11px; }
#tframe .tf-bar { position: relative; height: 10px; margin-top: 3px; background: #200; border-radius: 3px; overflow: hidden; }
#tframe .tf-bar .fill { height: 100%; background: linear-gradient(#ff6a55, #c4241a); transition: width .15s; }
#tframe.player .tf-bar .fill { background: linear-gradient(#7dff7a, #2aa52a); }
#tframe .tf-bar span { position: absolute; inset: 0; font-size: 9px; line-height: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #000; }
body.touch #tframe { width: 190px; top: calc(56px + env(safe-area-inset-top)); }

/* 6. Joystick / attack: a little smaller and further into the corners. */
body.touch #joystick { width: 120px; height: 120px; left: calc(18px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); }
body.touch #btn-attack { width: 100px; height: 100px; font-size: 42px; }

/* 7. Settings window */
#settings { width: min(380px, 92%); }
#settings .st-body { padding: 10px 14px 14px; }
#settings .st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
#settings .st-row > span { font-weight: 700; color: #ffd84a; }
#settings .st-opts { display: flex; gap: 4px; }
#settings .st-opts button { min-width: 48px; padding: 6px 9px; font: inherit; font-size: 13px; color: #f3e6c8; cursor: pointer;
  background: #2a2016; border: 1px solid #c9a55a66; border-radius: 5px; }
#settings .st-opts button.on { color: #1a1208; background: linear-gradient(#ffe08a, #c9a24a); border-color: #ffe9a8; font-weight: 700; }
#settings .st-hint { font-size: 11px; color: #b9a887; margin: -4px 0 6px; }

/* ---- v0.7.1: roomier skill arc, player menu from the target frame */
body.touch .tbtn { width: 56px; height: 56px; }
#actions .tbtn .ii, #actions .tbtn .si { --s: 42px; }
body.touch #actions { width: 300px; height: 290px; --cx: 232px; --cy: 222px; }
body.touch .sbtn { width: 48px; height: 48px; }
#tframe .tf-more { display: none; margin-left: 6px; font-style: normal; color: #ffe9a8; font-weight: 900; }
#tframe.player { pointer-events: auto; cursor: pointer; }
#tframe.player .tf-more { display: inline; }