/* Lunelia Studio HUD: dark navy glass + gold rings (Thai MMORPG style), crisp DOM text over a true-pixel canvas.
   Sections: tokens · world labels · frames · menu/currency · minimap · chat · hotbar · attack/auto · windows ·
   studio panel · warp/toast/loading · phone landscape · phone portrait · short portrait */
:root {
  --bg0: #08102a;
  --navy0: rgba(6, 12, 32, 0.92);
  --navy1: #0c1736;
  --navy2: #13244c;
  --navy3: #1c3466;
  --line: #34548c;
  --line-dim: rgba(70, 104, 168, 0.45);
  --gold: #d9a945;
  --gold-hi: #f6d98a;
  --gold-dk: #7a5414;
  --gold-dim: rgba(217, 169, 69, 0.5);
  --cyan: #8fe6ff;
  --text: #f2f5ff;
  --muted: #8f9cc4;
  --gap: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --mm: 172px;
  --slot: 54px;
  --pf: 96px;
  --mb: 54px;
  --font: 'Kanit', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --outline: 0 1px 0 #000, 0 0 3px #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  --panel-bg: linear-gradient(180deg, rgba(18, 34, 72, 0.94), rgba(7, 14, 36, 0.95));
  --panel-edge: 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(150, 190, 255, 0.10), 0 8px 26px rgba(0, 0, 0, 0.5);
  --ring-gold: linear-gradient(160deg, #fff1b8 0%, #e2b04a 30%, #a8761c 62%, #f3cf72 100%);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--text);
  font-family: var(--font); font-weight: 400;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
svg { fill: currentColor; }
input, select { font-family: inherit; }
.hidden { display: none !important; }
.ico { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }

#game { position: fixed; left: 0; top: 0; z-index: 1; }
#game canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ================= world-anchored DOM ================= */
#world-ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.nameplate {
  position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); translate: -50% -100%; text-align: center; white-space: nowrap; will-change: transform;
  text-shadow: var(--outline);
}
.np-guild-tag {
  display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 11px; color: #ffe9a8; text-shadow: none;
  background: linear-gradient(180deg, rgba(28, 52, 104, 0.92), rgba(10, 20, 50, 0.92)); border: 1px solid var(--gold-dim);
}
.np-name { font-size: 14px; font-weight: 600; color: #fff; }
.np-lv { font-size: 10.5px; font-weight: 500; color: var(--cyan); margin-right: 4px; vertical-align: 1px; }
.np-hp { width: 56px; height: 5px; margin: 2px auto 0; border-radius: 3px; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85); overflow: hidden; }
.np-hp i { display: block; height: 100%; width: 80%; background: linear-gradient(180deg, #8dffa0, #22b04a); }

#labels { position: absolute; inset: 0; }
/* building label: gold-ringed icon chip + navy pill with gold border */
.blabel {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; white-space: nowrap; will-change: transform;
  translate: -50% -100%; pointer-events: auto; cursor: pointer;
}
.blabel .chip {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; z-index: 1; padding: 3px;
  background: var(--ring-gold); box-shadow: 0 0 0 1.5px #1a1004, 0 3px 6px rgba(0, 0, 0, 0.55);
}
.blabel .chip i {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi);
  background: radial-gradient(circle at 50% 35%, #233e7a, #0a1430 75%); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.6);
}
.blabel .chip svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); }
.blabel.warp .chip i { color: #7ff0ff; }
.blabel .bt {
  margin-left: -16px; padding: 0 16px 0 22px; height: 34px; line-height: 31px; font-size: 16.5px; font-weight: 600; color: #fff; border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, rgba(24, 42, 86, 0.95), rgba(8, 16, 42, 0.95));
  border: 1.5px solid var(--gold); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.45); text-shadow: 0 1px 0 #000;
}
.blabel:hover .bt { border-color: var(--gold-hi); }
.blabel.sel .bt { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 12px rgba(246, 217, 138, 0.6); }
.npcname { position: absolute; left: 0; top: 0; translate: -50% -100%; text-align: center; white-space: nowrap; will-change: transform; }
.npcname .nn { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; text-shadow: var(--outline); }
.npcname .nn::before { content: "NPC"; margin-right: 4px; padding: 0 4px; border-radius: 3px; font-size: 9px; vertical-align: 1px; color: #1a1004; background: var(--gold-hi); text-shadow: none; }
.npcname.sel .nn { color: var(--gold-hi); }
.bubble {
  position: absolute; left: calc(50% + var(--bx, 0px)); bottom: 100%; margin-bottom: 8px; transform: translateX(-50%) scale(0.6); opacity: 0;
  max-width: 200px; width: max-content; white-space: normal; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #16203e; text-align: center;
  background: #fff; border: 1.5px solid #1a2546; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); transition: opacity .2s, transform .2s;
}
.bubble::before { content: ""; position: absolute; left: calc(50% - var(--bx, 0px)); top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #1a2546; }
.bubble::after { content: ""; position: absolute; left: calc(50% - var(--bx, 0px)); top: 100%; margin-left: -5px; margin-top: -1px; border: 5px solid transparent; border-top-color: #fff; }
.npcname.talk .bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.bubble.hero { left: 0; top: 0; bottom: auto; margin: 0; transform: translate(-9999px, 0); translate: -50% -100%; transition: opacity .2s; }
.bubble.hero.show { opacity: 1; }

#dmg-layer { position: absolute; inset: 0; }
.dmg { position: absolute; left: 0; top: 0; display: none; text-align: center; white-space: nowrap; will-change: transform, opacity; font-weight: 700; line-height: 1; }
.dmg .num { display: block; font-size: 24px; color: #fff; -webkit-text-stroke: 1px #2a0f04; text-shadow: 0 2px 0 #3a1608, 0 0 6px rgba(255, 120, 60, 0.7); }
.dmg .lbl { display: none; font-size: 14px; letter-spacing: 0.04em; color: #ffe9a6; -webkit-text-stroke: 1px #3a2000; }
.dmg.crit .lbl { display: block; margin-bottom: 2px; }
.dmg.crit .num { font-size: 38px; color: #ffd75e; -webkit-text-stroke: 1.5px #4a2400; text-shadow: 0 3px 0 #6b3300, 0 0 14px rgba(255, 196, 64, 0.95); }
.dmg.heal .num { color: #8dffa8; -webkit-text-stroke: 1px #063a16; text-shadow: 0 2px 0 #063a16, 0 0 8px rgba(80, 255, 140, 0.7); }
.dmg.mana .num { color: #9fd8ff; -webkit-text-stroke: 1px #06223a; text-shadow: 0 2px 0 #06223a, 0 0 8px rgba(80, 180, 255, 0.7); }

/* ================= shared ================= */
.glass, .panel {
  background: var(--panel-bg); border: 1px solid var(--line); box-shadow: var(--panel-edge);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 12px;
}
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud-el { position: absolute; pointer-events: auto; }
/* round gold-ringed button base */
.rbtn {
  border-radius: 50%; padding: 3px; border: 0; background: var(--ring-gold); box-shadow: 0 0 0 1.5px #1a1004, 0 4px 10px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
}
.rbtn > .in, .mbtn .ring > .in {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #2a4a8e 0%, #142a5c 50%, #08122e 100%); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.65), inset 0 3px 8px rgba(140, 180, 255, 0.25);
}

/* ================= player frame (top-left) ================= */
#pframe { left: calc(var(--gap) + var(--safe-l)); top: var(--gap); display: flex; align-items: flex-start; }
.pf-portrait { position: relative; width: var(--pf); height: var(--pf); flex: none; z-index: 2; }
.pf-ring {
  width: 100%; height: 100%; border-radius: 50%; padding: 4px; background: var(--ring-gold);
  box-shadow: 0 0 0 2px #0b1430, 0 0 0 3.5px #b98a32, 0 6px 16px rgba(0, 0, 0, 0.55);
}
.pf-ring img, .tf-ring img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 30%, #3c5aa8, #142552 60%, #0a1430); box-shadow: inset 0 0 0 2px #0b1430;
}
.pf-crest {
  position: absolute; left: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi);
  background: radial-gradient(circle at 50% 35%, #2a4a8e, #0a1430 75%); border: 2px solid var(--gold); box-shadow: 0 0 0 1.5px #000;
}
.pf-crest svg { width: 19px; height: 19px; }
.pf-panel {
  position: relative; margin-left: -34px; margin-top: 8px; padding: 6px 16px 9px 44px; width: 340px;
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: 0 16px 16px 0; box-shadow: var(--panel-edge);
}
.pf-panel::after { content: ""; position: absolute; right: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.pf-top { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pf-name { font-size: 19px; font-weight: 600; color: #fff; text-shadow: 0 1px 0 #000; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pf-lv { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: #fff; }
.pf-lv svg { width: 15px; height: 15px; color: #dfe6ff; }
.pf-class { font-size: 15px; font-weight: 500; color: #fff; }
.pbar { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.pb-ic { width: 20px; height: 18px; flex: none; text-align: center; }
svg.pb-ic { filter: drop-shadow(0 1px 0 #000); }
.pbar.hp .pb-ic { color: #ff4a5a; }
.pbar.mp .pb-ic { color: #4ab4ff; }
b.pb-ic { font-size: 12px; font-weight: 700; line-height: 18px; color: var(--gold-hi); letter-spacing: 0.02em; width: 30px; }
.pb-track {
  position: relative; flex: 1; height: 18px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(180deg, #050a1a, #111c38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(110, 150, 220, 0.35);
}
.pb-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; transition: width .25s; }
.pb-track i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 35%; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); }
.pbar.hp i { background: linear-gradient(180deg, #ff9a9a, #f23a46 48%, #a8101c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.pbar.mp i { background: linear-gradient(180deg, #9ad8ff, #2c8cf0 48%, #134ab0); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.pbar.exp i { background: linear-gradient(180deg, #fbff9a, #c8e03a 48%, #6a9a10); }
.pbar.exp .pb-track { height: 15px; }
.pb-track span { position: relative; display: block; text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; color: #fff; text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
.pbar.exp .pb-track span { line-height: 15px; font-size: 12px; }
.studio-btn {
  position: absolute; left: 6px; top: calc(100% + 6px); display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px 0 8px; border-radius: 13px;
  font-size: 12.5px; font-weight: 500; background: linear-gradient(180deg, rgba(28, 52, 104, 0.95), rgba(10, 20, 50, 0.95)); border: 1px solid var(--gold-dim); color: var(--gold-hi);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.studio-btn svg { width: 14px; height: 14px; }
.studio-btn.on { border-color: var(--gold-hi); box-shadow: 0 0 10px rgba(246, 217, 138, 0.45); }

/* ================= target frame (top-centre) ================= */
#tframe { left: calc(var(--gap) + var(--safe-l) + var(--pf) + 340px); top: var(--gap); display: flex; align-items: flex-start; animation: tfIn .18s ease-out; cursor: pointer; }
@keyframes tfIn { from { opacity: 0; transform: translateY(-6px); } }
.tf-portrait { position: relative; width: 72px; height: 72px; flex: none; z-index: 2; }
.tf-ring { width: 100%; height: 100%; border-radius: 50%; padding: 3px; background: var(--ring-gold); box-shadow: 0 0 0 1.5px #0b1430, 0 0 0 3px #b98a32, 0 5px 12px rgba(0, 0, 0, 0.5); }
.tf-ring img { image-rendering: pixelated; object-fit: contain; }
.tf-badge {
  position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #1d3468, #0a1430); border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px #000;
}
.tf-badge svg { width: 16px; height: 16px; }
.tf-panel {
  margin-left: -26px; margin-top: 6px; padding: 5px 14px 7px 34px; width: 290px; min-height: 60px;
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: 0 14px 14px 0; box-shadow: var(--panel-edge);
}
.tf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.tf-name { font-size: 16.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.tf-lv { font-size: 14px; color: #dfe6ff; flex: none; }
.tbar { position: relative; height: 16px; margin-top: 3px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #050a1a, #111c38); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(110, 150, 220, 0.35); }
.tbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, #ff9a9a, #f23a46 48%, #a8101c); transition: width .2s; }
.tbar.friendly i { background: linear-gradient(180deg, #a8ffb8, #34c060 48%, #126a2c); }
.tbar span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
.tf-sub { margin-top: 3px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-sub b { color: var(--gold-hi); font-weight: 500; }

/* ================= menu row + currency (top-right) ================= */
#topright { right: calc(var(--mm) + var(--gap) * 2 + var(--safe-r)); top: var(--gap); display: flex; align-items: flex-start; gap: 12px; }
#menuRow { display: flex; gap: 8px; }
.mbtn { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; width: calc(var(--mb) + 8px); }
.mbtn .ring {
  width: var(--mb); height: var(--mb); border-radius: 50%; padding: 3px; display: grid; place-items: center;
  background: var(--ring-gold); box-shadow: 0 0 0 1.5px #1a1004, 0 4px 10px rgba(0, 0, 0, 0.5); transition: transform .1s, box-shadow .2s;
}
.mbtn .ring .in img { width: 62%; height: 62%; }
.mbtn.art .ring { padding: 0; background: none; box-shadow: none; }
.mbtn.art .ring .in { background: none; box-shadow: none; }
.mbtn.art .ring .in img { width: 100%; height: 100%; }
.mbtn:hover .ring { box-shadow: 0 0 0 1.5px #1a1004, 0 0 14px rgba(246, 217, 138, 0.55); }
.mbtn:active .ring { transform: scale(0.93); }
.mbtn.on .ring { box-shadow: 0 0 0 1.5px #1a1004, 0 0 16px rgba(143, 230, 255, 0.75); }
.mbtn .ml { font-size: 13px; font-weight: 600; color: #fff; text-shadow: var(--outline); white-space: nowrap; margin-top: -3px; }
#currency {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 12px;
  background: var(--panel-bg); border: 1px solid var(--line); box-shadow: var(--panel-edge);
}
.cur-rows { display: flex; flex-direction: column; gap: 3px; }
.cur { display: flex; align-items: center; gap: 7px; height: 22px; font-size: 15px; font-weight: 500; color: #fff; min-width: 108px; }
.cur svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.cur b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cur-plus {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, #2a4a8e, #0a1430 75%); border: 2px solid var(--gold); box-shadow: 0 0 0 1px #000;
}
.cur-plus svg { width: 16px; height: 16px; }

/* ================= minimap (top-right corner) ================= */
#mmBox { right: calc(var(--gap) + var(--safe-r)); top: var(--gap); width: var(--mm); display: flex; flex-direction: column; align-items: stretch; transition: width .2s; }
.mm-title {
  height: 26px; margin: 0 0 -2px; border-radius: 9px 9px 0 0; text-align: center; font-size: 14px; font-weight: 500; line-height: 24px; color: #fff; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #1d3468, #0c1838); border: 1.5px solid var(--gold); border-bottom: 0; position: relative; z-index: 1; text-shadow: 0 1px 0 #000;
}
.mm-frame {
  position: relative; width: var(--mm); height: var(--mm); border-radius: 4px 4px 10px 10px; overflow: hidden; padding: 0;
  border: 3px solid transparent; background: linear-gradient(#0a1230, #0a1230) padding-box, var(--ring-gold) border-box;
  box-shadow: 0 0 0 1.5px #1a1004, 0 6px 18px rgba(0, 0, 0, 0.6);
}
#minimap { width: 100%; height: 100%; display: block; cursor: crosshair; image-rendering: pixelated; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8); }
.mm-coords { position: absolute; left: 7px; bottom: 5px; font-size: 12.5px; font-weight: 500; color: #fff; text-shadow: var(--outline); font-variant-numeric: tabular-nums; pointer-events: none; }
.mm-side { position: absolute; right: 5px; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.mm-side button {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, #2a4a8e, #0a1430 75%); border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.mm-side button svg { width: 14px; height: 14px; }
.mm-side button b { font-size: 18px; line-height: 1; font-weight: 600; margin-top: -2px; }
.mm-side button.on { border-color: var(--gold-hi); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(246, 217, 138, 0.7); }
#mmBox.big { --mm: 280px; }
.zoompill {
  align-self: flex-end; margin-top: 6px; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 15px;
  background: rgba(8, 16, 40, 0.88); border: 1px solid var(--line);
}
.zoompill button { width: 24px; height: 24px; border-radius: 50%; padding: 0; font-size: 16px; line-height: 1; color: #fff; background: linear-gradient(180deg, #1d3468, #0c1838); border: 1px solid var(--gold-dim); }
.zoompill span { min-width: 34px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ================= chat (bottom-left) ================= */
#chat { left: calc(var(--gap) + var(--safe-l)); bottom: calc(var(--gap) + var(--safe-b)); width: 400px; }
.chat-toggle { display: none; }
.chat-box {
  position: relative; display: flex; flex-direction: column; height: 214px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(8, 16, 40, 0.70), rgba(6, 12, 32, 0.84)); border: 1px solid var(--line); box-shadow: var(--panel-edge);
}
.chat-box::before { content: ""; position: absolute; left: -1px; top: 26px; bottom: 50px; width: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.chat-tabs { display: flex; gap: 3px; padding: 0 6px; margin-top: -1px; flex: none; transform: translateY(-14px); margin-bottom: -14px; }
.chat-tabs button {
  flex: 1; height: 30px; padding: 0; font-size: 14px; font-weight: 500; border-radius: 8px 8px 0 0; color: #c8d2f0;
  background: linear-gradient(180deg, rgba(20, 36, 76, 0.95), rgba(8, 16, 40, 0.95)); border: 1px solid var(--line); border-bottom-color: transparent;
}
.chat-tabs button.on { color: #fff; font-weight: 600; background: linear-gradient(180deg, #2a56a8, #13306a); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.chat-tabs .chat-min { flex: 0 0 30px; font-size: 18px; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 10px 4px; font-size: 14px; line-height: 1.6; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--line) transparent; -webkit-user-select: text; user-select: text; }
.cl { text-shadow: 0 1px 0 #000; word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctag { margin-right: 6px; }
.cname { font-weight: 500; }
.csep { color: #c8d2f0; margin: 0 5px 0 3px; }
.ctext { color: #f2f5ff; }
.ch-world .ctag { color: #d8ec6a; } .ch-guild .ctag { color: #5ee08a; } .ch-party .ctag { color: #e48aff; } .ch-system .ctag { color: #ff8a7a; } .ch-all .ctag { color: #9fd0ff; }
.ch-system .ctext { color: #ffd0c8; }
.cl.mine .cname { color: var(--gold-hi) !important; }
.chat-input { display: flex; gap: 6px; padding: 6px; flex: none; border-top: 1px solid var(--line-dim); }
.chat-input input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; color: #fff; outline: none;
  background: rgba(2, 6, 18, 0.65); border: 1px solid var(--line); -webkit-user-select: text; user-select: text;
}
.chat-input input::placeholder { color: #7f8bb0; }
.chat-input input:focus { border-color: var(--gold); }
.emoji-btn, .send-btn {
  width: 40px; height: 38px; border-radius: 8px; padding: 0; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(180deg, #1d3468, #0c1838); border: 1px solid var(--line);
}
.emoji-btn svg { width: 24px; height: 24px; color: #f4f6ff; }
.send-btn { width: 50px; border-color: var(--gold-dim); }
.send-btn svg { width: 20px; height: 20px; }
.emoji-pop {
  position: absolute; left: 6px; bottom: 52px; display: grid; grid-template-columns: repeat(6, 34px); gap: 4px; padding: 8px; border-radius: 10px;
  background: var(--panel-bg); border: 1px solid var(--gold-dim); box-shadow: var(--panel-edge); z-index: 3;
}
.emoji-pop button { width: 34px; height: 34px; padding: 0; font-size: 20px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.06); }
.emoji-pop button:hover { background: rgba(255, 255, 255, 0.16); }

#chat.collapsed .chat-box { display: none; }
#chat.collapsed .chat-toggle {
  display: flex; align-items: center; gap: 8px; max-width: 320px; height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13.5px; overflow: hidden; white-space: nowrap;
  background: rgba(6, 12, 32, 0.84); border: 1px solid var(--line); color: #e8edff;
}
#chat.collapsed .chat-toggle svg { width: 17px; height: 17px; flex: none; color: var(--gold-hi); }
#chat.collapsed .chat-toggle span { overflow: hidden; text-overflow: ellipsis; }

/* ================= hotbar (bottom-centre) ================= */
#hotbar {
  left: 50%; bottom: calc(var(--gap) + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 6px; padding: 12px 8px 7px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 30, 64, 0.88), rgba(6, 12, 32, 0.92)); border: 1px solid var(--line); box-shadow: var(--panel-edge);
}
#hotbar::before, #hotbar::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
#hotbar::before { left: -2px; } #hotbar::after { right: -2px; }
.hb-sep { width: 2px; margin: 4px 1px; border-radius: 1px; background: linear-gradient(180deg, transparent, var(--line), transparent); }
.slot {
  position: relative; width: var(--slot); height: var(--slot); padding: 0; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #1d3266, #0a1430 80%);
  border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 2px #b88a34, 0 0 0 3px #1a1004, inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.slot .face { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.slot .face .ico { width: 100%; height: 100%; }
.slot.item .face .ico { width: 100%; height: 100%; }
.slot .key {
  position: absolute; left: -7px; top: -10px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; z-index: 2;
  font-size: 12.5px; line-height: 18px; font-weight: 700; color: #fff; text-align: center; background: #0a1430; border: 1px solid #50689c; text-shadow: 0 1px 0 #000;
}
.slot .cnt { position: absolute; right: 3px; bottom: 0; z-index: 2; font-size: 13px; font-weight: 700; color: #fff; text-shadow: var(--outline); }
.slot .nm { display: none; }
.slot .cd { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 1; background: conic-gradient(rgba(2, 4, 14, 0.74) calc(var(--cd, 0) * 1turn), transparent 0); }
.slot .cdt { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; font-size: 16px; font-weight: 700; color: #fff; text-shadow: var(--outline); pointer-events: none; }
.slot.cooling .cdt { display: grid; }
.slot.on { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 3px #1a1004, 0 0 14px rgba(143, 230, 255, 0.85); }
.slot:hover { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 3px #1a1004; }
.slot.empty .face::after { content: ""; width: 40%; height: 40%; border-radius: 50%; border: 1.5px dashed rgba(143, 160, 210, 0.35); }
.slot.press { animation: press .25s; }
.slot.drop { box-shadow: 0 0 0 2px #7ff0ff, 0 0 0 3px #1a1004, 0 0 16px rgba(127, 240, 255, 0.9); animation: dropPulse 0.9s infinite; }
@keyframes dropPulse { 50% { box-shadow: 0 0 0 2px #7ff0ff, 0 0 0 3px #1a1004, 0 0 4px rgba(127, 240, 255, 0.4); } }
@keyframes press { 0% { transform: scale(0.88); } 100% { transform: scale(1); } }

/* ================= attack / auto (bottom-right) ================= */
#actionPad { right: calc(var(--gap) + 4px + var(--safe-r)); bottom: calc(var(--gap) + var(--safe-b)); width: 190px; height: 120px; }
.attack-btn {
  position: absolute; left: 0; bottom: 0; width: 116px; height: 116px; border-radius: 50%; padding: 5px; border: 0;
  background: var(--ring-gold); box-shadow: 0 0 0 2px #1a1004, 0 0 0 5px rgba(10, 20, 48, 0.85), 0 0 0 6.5px #b88a34, 0 8px 22px rgba(0, 0, 0, 0.6);
}
.attack-btn .atk-in {
  width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(circle at 50% 30%, #2a4a8e 0%, #13285a 55%, #070f28 100%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), inset 0 4px 14px rgba(140, 180, 255, 0.28);
}
.attack-btn img { width: 54px; height: 54px; margin-top: 4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.attack-btn .atk-l { font-size: 17px; font-weight: 600; color: #fff; text-shadow: var(--outline); margin-top: -2px; }
.attack-btn:active { transform: scale(0.95); }
.attack-btn .cd { position: absolute; inset: 5px; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(2, 4, 14, 0.6) calc(var(--cd, 0) * 1turn), transparent 0); }
.auto-btn {
  position: absolute; right: 0; bottom: 6px; width: 68px; height: 68px; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #063a20, 0 0 2px #063a20;
  background: radial-gradient(circle at 50% 30%, #3a5a6a, #1a2e3e 60%, #0a141e); border: 3px solid #a8823a; box-shadow: 0 0 0 1.5px #1a1004, 0 4px 10px rgba(0, 0, 0, 0.5);
}
.auto-btn img { width: 20px; height: 20px; margin-bottom: 1px; opacity: 0.6; }
.auto-btn .au-a { font-size: 14px; letter-spacing: 0.02em; }
.auto-btn .au-s { font-size: 13px; color: #b8c4d0; }
.auto-btn.on { background: radial-gradient(circle at 50% 30%, #6af0a0, #1ea860 55%, #0a5a30); border-color: var(--gold-hi); box-shadow: 0 0 0 1.5px #1a1004, 0 0 18px rgba(80, 240, 150, 0.75); animation: autoPulse 1.4s infinite; }
.auto-btn.on img { opacity: 1; animation: spin 2.4s linear infinite; }
.auto-btn.on .au-s { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes autoPulse { 50% { box-shadow: 0 0 0 1.5px #1a1004, 0 0 6px rgba(80, 240, 150, 0.35); } }

/* ================= joystick (touch only) ================= */
#joystick { display: none; left: calc(18px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); width: 128px; height: 128px; touch-action: none; }
body.touch #joystick { display: block; }
.js-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(30, 54, 110, 0.35), rgba(6, 12, 32, 0.6)); border: 2px solid rgba(246, 217, 138, 0.5); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5); }
.js-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4a76d8, #142a5c 70%); border: 2px solid var(--gold-hi); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); pointer-events: none; }
#joystick.active .js-base { border-color: var(--gold-hi); }
body.touch #chat { bottom: calc(160px + var(--safe-b)); }

#fps { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 10px; color: rgba(200, 210, 240, 0.55); text-shadow: 0 1px 0 #000; pointer-events: none; font-variant-numeric: tabular-nums; }

/* ================= game windows ================= */
#winLayer { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.win {
  position: absolute; right: calc(var(--gap) + var(--safe-r)); top: calc(var(--gap) + var(--mm) + 72px); bottom: calc(var(--gap) + 130px + var(--safe-b));
  width: 590px; max-height: 620px; display: flex; flex-direction: column; pointer-events: auto; border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.96), rgba(6, 12, 32, 0.97));
  border: 1.5px solid #b88a34; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #050a1c, inset 0 0 0 2.5px rgba(70, 104, 168, 0.55), 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: winIn .16s ease-out;
}
@keyframes winIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.win::before, .win::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold-hi); pointer-events: none; }
.win::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.win::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.win.center { left: 50%; right: auto; transform: translateX(-50%); animation: none; }
.win-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 8px 14px; flex: none; }
.win-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 3px; background: var(--ring-gold); box-shadow: 0 0 0 1.5px #1a1004; }
.win-ic i { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #233e7a, #0a1430 75%); }
.win-ic img { width: 72%; height: 72%; }
.win-ic svg { width: 24px; height: 24px; color: var(--gold-hi); }
.win-title { flex: 1; min-width: 0; }
.win-title h2 { margin: 0; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.1; text-shadow: 0 1px 0 #000; }
.win-title small { display: block; font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.win-x { width: 38px; height: 38px; padding: 0; border: 0; background: none; color: #f2f5ff; display: grid; place-items: center; border-radius: 8px; }
.win-x svg { width: 26px; height: 26px; }
.win-x:hover { color: var(--gold-hi); background: rgba(255, 255, 255, 0.06); }
.win-tabs { display: flex; gap: 4px; padding: 0 10px; flex: none; }
.win-tabs button {
  flex: 1; min-width: 0; height: 42px; padding: 0 4px; font-size: 16px; font-weight: 500; color: #e8edff; border-radius: 8px 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(22, 40, 84, 0.95), rgba(10, 20, 48, 0.95)); border: 1px solid var(--line); border-bottom: 0;
}
.win-tabs button.on { color: #fff; font-weight: 600; background: linear-gradient(180deg, #2c64c8, #133a86); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.win-body { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px 10px 8px; border-top: 1.5px solid var(--gold-dim); margin: 0 6px; }
.win-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 10px; margin: 0 6px; border-top: 1px solid var(--line-dim); }
.mk-main, .bag-wrap, .sk-wrap, .form, .stats { min-height: 0; }
.rows, .bag-grid, .sk-grid, .stat-list { min-height: 0; }
.scroll { overflow-y: auto; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--line) transparent; -webkit-overflow-scrolling: touch; }

/* category list */
.cats { width: 136px; flex: none; display: flex; flex-direction: column; gap: 5px; }
.cats button {
  position: relative; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; text-align: left; color: #e8edff;
  background: linear-gradient(180deg, rgba(20, 36, 76, 0.9), rgba(8, 16, 40, 0.9)); border: 1px solid var(--line-dim);
}
.cats button svg { width: 18px; height: 18px; flex: none; color: #dfe6ff; }
.cats button.on { color: #fff; font-weight: 600; background: linear-gradient(180deg, #2c64c8, #133a86); border-color: #6aa0ff; }
.cats button.on::after { content: ""; position: absolute; right: -8px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: #8ab8ff; }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.searchbox { position: relative; flex: none; }
.searchbox svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #c8d2f0; pointer-events: none; }
.searchbox input {
  width: 100%; height: 38px; padding: 0 12px 0 38px; border-radius: 8px; font-size: 14.5px; color: #fff; outline: none;
  background: rgba(2, 6, 18, 0.6); border: 1px solid var(--line); -webkit-user-select: text; user-select: text;
}
.searchbox input:focus { border-color: var(--gold); }
.searchbox input::placeholder { color: #7f8bb0; }
.filters { display: flex; gap: 8px; flex: none; }
.dd { position: relative; flex: 1; min-width: 0; }
.dd select {
  width: 100%; height: 36px; padding: 0 30px 0 12px; border-radius: 8px; font-size: 14px; color: #fff; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(20, 36, 76, 0.95), rgba(8, 16, 40, 0.95)); border: 1px solid var(--line);
}
.dd select option { background: #0c1736; color: #fff; }
.dd::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -3px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; pointer-events: none; }
.rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; border-radius: 8px; border: 1px solid var(--line-dim); background: rgba(2, 6, 18, 0.35); }
.row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line-dim); }
.row:last-child { border-bottom: 0; }
.row:hover { background: rgba(60, 100, 180, 0.12); }
.itile {
  position: relative; width: 52px; height: 52px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #233a72, #0a1430 80%); border: 2px solid var(--rc, #4a6aa8); box-shadow: 0 0 0 1px #000, inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.itile .ico { width: 100%; height: 100%; }
.itile .n { position: absolute; right: 2px; bottom: -1px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: var(--outline); }
.r-common { --rc: #5eae4c; } .r-special { --rc: #3a86e8; } .r-rare { --rc: #a65ae8; } .r-legend { --rc: #f0a030; }
.r-legend .itile, .itile.r-legend { box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 180, 60, 0.55); }
.ri-info { flex: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-name { font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtag { align-self: flex-start; padding: 0 7px; border-radius: 4px; font-size: 11.5px; line-height: 18px; font-weight: 500; color: #fff; background: color-mix(in srgb, var(--rc) 55%, #0a1430); border: 1px solid var(--rc); }
.price { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.price svg, .coin { width: 17px; height: 17px; flex: none; }
.ri-meta { flex: 1; min-width: 0; font-size: 13.5px; color: #dfe6ff; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-meta em { font-style: normal; color: var(--muted); }
.btn-buy {
  flex: none; min-width: 68px; height: 36px; padding: 0 12px; border-radius: 7px; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #4a9cff, #1d64d0 55%, #1550b0); border: 1px solid #8ac0ff; box-shadow: 0 0 0 1px #04102c, inset 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.btn-buy:hover { filter: brightness(1.12); }
.btn-buy:active { transform: translateY(1px); }
.btn-buy.added { background: linear-gradient(180deg, #4ad08a, #1a9a52); border-color: #9affc8; }
.btn-buy:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.btn-gold {
  height: 42px; padding: 0 22px; border-radius: 8px; font-size: 16px; font-weight: 600; color: #3a2200;
  background: linear-gradient(180deg, #ffe680, #f6c23a 50%, #e0a018); border: 1px solid #fff0b0; box-shadow: 0 0 0 1px #3a2200, inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-gold:disabled { filter: grayscale(0.6) brightness(0.75); cursor: default; }
.btn-ghost { height: 34px; padding: 0 14px; border-radius: 7px; font-size: 14px; color: #e8edff; background: linear-gradient(180deg, rgba(22, 40, 84, 0.95), rgba(10, 20, 48, 0.95)); border: 1px solid var(--line); }
.btn-ghost.on { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, #2c64c8, #133a86); }
.cart { display: flex; align-items: center; gap: 10px; min-width: 136px; }
.cart svg { width: 34px; height: 34px; color: #fff; }
.cart-t { font-size: 13.5px; line-height: 1.25; }
.cart-t b { display: block; font-weight: 600; color: var(--gold-hi); font-size: 15px; }
.cart-total { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 500; }
.empty-note { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
.cart-list { display: flex; gap: 4px; flex-wrap: wrap; }

/* bag */
.bag-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; padding: 4px 2px; align-content: start; }
.bag-grid .itile { width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; }
.bag-grid .itile.emptyc { --rc: rgba(70, 104, 168, 0.35); background: rgba(6, 12, 32, 0.5); cursor: default; }
.bag-grid .itile:hover:not(.emptyc) { filter: brightness(1.15); }
.bag-grid .itile.sel { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold-hi); }
.bag-foot { display: flex; align-items: center; gap: 16px; font-size: 14px; color: #dfe6ff; }
.bag-foot .grow { flex: 1; }
.tip {
  position: fixed; z-index: 12; max-width: 260px; padding: 9px 12px 10px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 30, 64, 0.98), rgba(6, 12, 32, 0.98)); border: 1px solid var(--rc, var(--gold)); box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, 0.6);
}
.tip.touchable { pointer-events: auto; }
.tip h4 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; color: #fff; }
.tip p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: #dfe6ff; }
.tip .en { font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; }
.tip .tip-acts { display: flex; gap: 6px; margin-top: 8px; }
.tip .tip-acts button { height: 32px; padding: 0 12px; font-size: 13.5px; }

/* character */
.char-body { flex-direction: row; }
.doll { flex: 1.35; min-width: 0; display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: 1fr auto; gap: 8px; }
.doll-col { display: flex; flex-direction: column; justify-content: space-between; gap: 5px; }
.doll-bot { grid-column: 1 / 4; display: flex; justify-content: center; gap: 8px; }
.eq {
  position: relative; width: 62px; height: 62px; padding: 0; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 35%, #1d3266, #0a1430 80%); border: 2px solid var(--rc, #3a5288); box-shadow: 0 0 0 1px #000;
}
.eq .ico { width: 82%; height: 82%; }
.eq > svg { width: 28px; height: 28px; color: #9fb4e8; }
.eq .eqn { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 9.5px; line-height: 1.1; color: #dfe6ff; text-shadow: var(--outline); text-align: center; white-space: nowrap; overflow: hidden; }
.eq.off .ico, .eq.off > svg { opacity: 0.3; filter: grayscale(1); }
.eq.tog::after { content: ""; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #3a4a70; box-shadow: 0 0 0 1px #000; }
.eq.tog.onx::after { background: #6dff9a; box-shadow: 0 0 0 1px #000, 0 0 6px #6dff9a; }
.eq:hover { filter: brightness(1.15); }
.doll-stage {
  position: relative; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; min-height: 260px;
  background: radial-gradient(ellipse at 50% 85%, rgba(127, 240, 255, 0.28), transparent 45%), radial-gradient(circle at 50% 40%, #213a78, #0a1430 75%);
  border: 1px solid var(--line-dim);
}
.doll-stage::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 14px; height: 22px; border-radius: 50%; border: 2px solid rgba(127, 240, 255, 0.55); box-shadow: 0 0 14px rgba(127, 240, 255, 0.45); }
.doll-stage img { position: relative; height: 78%; max-height: 330px; width: auto; max-width: 96%; object-fit: contain; margin-bottom: 4px; image-rendering: pixelated; }
.win.char-win { width: 680px; max-height: 640px; }
.doll-name { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 600; text-shadow: var(--outline); }
.doll-name small { display: block; font-size: 11.5px; font-weight: 400; color: var(--gold-hi); }
.doll-rot { position: absolute; bottom: 8px; display: flex; gap: 6px; }
.doll-rot.l { left: 8px; } .doll-rot.r { right: 8px; }
.doll-rot button { width: 30px; height: 30px; border-radius: 50%; padding: 0; color: #fff; background: rgba(8, 16, 40, 0.85); border: 1px solid var(--gold-dim); }
.doll-rot button svg { width: 16px; height: 16px; }
.stats { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.power { padding: 8px 10px; border-radius: 9px; text-align: center; background: linear-gradient(180deg, rgba(60, 40, 8, 0.6), rgba(20, 12, 2, 0.6)); border: 1px solid var(--gold-dim); }
.power small { display: block; font-size: 12px; color: var(--gold-hi); }
.power b { font-size: 24px; font-weight: 600; color: #ffe69a; text-shadow: 0 0 10px rgba(255, 200, 80, 0.5); font-variant-numeric: tabular-nums; }
.stat-list { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 9px; border: 1px solid var(--line-dim); background: rgba(2, 6, 18, 0.35); }
.stat { display: flex; justify-content: space-between; padding: 5px 10px; font-size: 13.5px; border-bottom: 1px solid var(--line-dim); }
.stat:last-child { border-bottom: 0; }
.stat span { color: var(--muted); }
.stat b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.hint2 { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* skills */
.sk-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; }
.sk {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 10px; cursor: grab;
  background: linear-gradient(180deg, rgba(20, 36, 76, 0.9), rgba(8, 16, 40, 0.9)); border: 1px solid var(--line-dim); touch-action: none;
}
.sk .skic { width: 54px; height: 54px; border-radius: 10px; box-shadow: 0 0 0 2px #b88a34, 0 0 0 3px #1a1004; overflow: hidden; }
.sk .skn { font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.2; color: #fff; min-height: 30px; display: flex; align-items: center; }
.sk .skl { position: absolute; right: 6px; top: 5px; font-size: 11px; font-weight: 600; color: var(--gold-hi); text-shadow: var(--outline); }
.sk.sel { border-color: var(--gold); background: linear-gradient(180deg, #2c64c8, #133a86); }
.sk.onbar .skic { box-shadow: 0 0 0 2px #7ff0ff, 0 0 0 3px #1a1004; }
.sk-detail { flex: none; display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-dim); background: rgba(2, 6, 18, 0.4); min-height: 76px; }
.sk-detail .skic { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #b88a34, 0 0 0 3px #1a1004; }
.sk-detail h4 { margin: 0; font-size: 16px; font-weight: 600; }
.sk-detail h4 small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.sk-detail p { margin: 2px 0 0; font-size: 13px; color: #dfe6ff; line-height: 1.4; }
.sk-detail .meta { font-size: 12px; color: var(--cyan); }
.drag-ghost { position: fixed; z-index: 30; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--gold-hi), 0 8px 20px rgba(0, 0, 0, 0.6); opacity: 0.92; }

/* guild + settings */
.form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fgroup { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-dim); background: rgba(2, 6, 18, 0.35); }
.fgroup h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--gold-hi); display: flex; align-items: baseline; gap: 8px; }
.fgroup h4 small { font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.frow { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; }
.frow > span { width: 110px; flex: none; color: #dfe6ff; }
.frow .seg { display: flex; gap: 5px; flex-wrap: wrap; }
.frow input[type=range] { flex: 1; accent-color: var(--gold); }
.frow output { width: 38px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.g-head { display: flex; align-items: center; gap: 14px; }
.g-crest { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; color: var(--gold-hi); background: radial-gradient(circle at 50% 35%, #2a4a8e, #0a1430 80%); border: 2px solid var(--gold); }
.g-crest svg { width: 40px; height: 40px; }
.g-name { font-size: 20px; font-weight: 600; }
.g-sub { font-size: 13px; color: var(--muted); }
.member { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-dim); font-size: 14px; }
.member .dot { width: 8px; height: 8px; border-radius: 50%; background: #50607e; }
.member .dot.on { background: #6dff9a; box-shadow: 0 0 6px #6dff9a; }
.member .mn { flex: 1; }
.member .mr { color: var(--muted); font-size: 12.5px; }

/* ================= studio panel ================= */
#studio {
  position: fixed; z-index: 7; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--pf) + var(--gap) + 44px); bottom: calc(var(--gap) + var(--safe-b)); width: 340px;
  display: flex; flex-direction: column;
}
#studio.hidden { display: none; }
body.studio-open #chat { display: none; }
.st-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px 14px; flex: none; }
.st-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--gold-hi); }
.st-title svg { width: 16px; height: 16px; }
.st-close { width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 18px; line-height: 1; color: #fff; background: rgba(8, 16, 40, 0.9); border: 1px solid var(--gold-dim); }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 2px 10px 6px; flex: none; }
.tabs button { min-height: 40px; border-radius: 9px; border: 1px solid var(--line-dim); background: rgba(8, 16, 40, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.tabs button .th { font-size: 12.5px; font-weight: 500; line-height: 1.1; }
.tabs button .en { font-size: 8.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.tabs button.on { border-color: var(--gold); background: linear-gradient(180deg, #2c64c8, #133a86); color: #fff; }
.panel-body { overflow-y: auto; padding: 0 12px 12px; flex: 1; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.panel-body section { display: none; }
.panel-body section.active { display: block; }
h3 { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 7px; font-size: 14px; font-weight: 500; color: var(--gold-hi); }
h3 .en { font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
h3::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, var(--gold-dim), transparent); }
.grid { display: grid; gap: 7px; }
.grid + .grid { margin-top: 7px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.btn {
  position: relative; min-height: 58px; padding: 6px 4px 5px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, rgba(22, 40, 84, 0.95), rgba(8, 16, 40, 0.95)); border: 1px solid var(--line-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.35); transition: border-color .15s, box-shadow .15s, background .15s;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn svg { width: 20px; height: 20px; color: #b8c8f0; margin-bottom: 2px; }
.btn .th { font-size: 13.5px; font-weight: 500; line-height: 1.15; }
.btn .en { font-size: 9px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }
.btn:hover:not(:disabled) { border-color: var(--gold-dim); }
.btn.on { border-color: var(--gold); background: linear-gradient(180deg, #2c64c8, #133a86); box-shadow: inset 0 0 0 1px rgba(246, 217, 138, 0.3), 0 0 12px rgba(143, 230, 255, 0.22); }
.btn.on svg { color: var(--gold-hi); }
.btn.tog::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; transform: rotate(45deg); background: #1c2a50; border: 1px solid var(--line); }
.btn.tog.on::after { background: var(--cyan); border-color: #e9fbff; box-shadow: 0 0 8px var(--cyan); }
.btn.wide { flex-direction: row; gap: 9px; min-height: 46px; justify-content: flex-start; padding-left: 12px; text-align: left; }
.btn.wide svg { margin: 0; flex: none; }
.btn.wide .th + .en { margin-left: auto; padding-right: 6px; }
.btn.round { width: 48px; height: 48px; min-height: 0; border-radius: 50%; padding: 0; flex: none; }
.dir-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.compass { position: relative; width: 116px; height: 116px; flex: none; }
.compass::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid var(--gold-dim); background: radial-gradient(circle, rgba(40, 70, 150, 0.35), rgba(8, 16, 40, 0.2) 70%); }
.compass .cdot { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10, 20, 48, 0.92); font-size: 9.5px; color: var(--muted); display: grid; place-items: center; padding: 0; }
.compass .cdot.on { background: radial-gradient(circle, #3a74e0, #133a86); color: #fff; border-color: var(--gold-hi); box-shadow: 0 0 10px rgba(143, 230, 255, 0.5); }
.compass .cfig { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; color: var(--gold-hi); }
.compass .cfig svg { width: 28px; height: 28px; transition: transform .2s; }
.dir-label { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.hint { font-size: 11.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.45; }
.ed-info { margin: 8px 0; padding: 8px 10px; min-height: 52px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-dim); }
.ed-info b { color: var(--gold-hi); font-weight: 500; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
.tag { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; }
.tag.red { background: rgba(255, 60, 90, 0.2); color: #ff9ab0; border: 1px solid rgba(255, 80, 110, 0.5); }
.tag.green { background: rgba(60, 220, 120, 0.15); color: #8dffa8; border: 1px solid rgba(60, 220, 120, 0.45); }
.keep { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; border-radius: 8px; background: rgba(8, 16, 40, 0.9); border: 1px solid var(--line-dim); }
.pal img { width: 56px; height: 56px; image-rendering: pixelated; }
.pal span { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.1; }
.pal.on { border-color: #7fffd0; box-shadow: 0 0 10px rgba(127, 255, 208, 0.5); }
body.editing #game canvas { cursor: crosshair; }
body.hovering #game canvas { cursor: pointer; }

/* ================= warp menu ================= */
#warpMenu { position: fixed; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 260px; padding: 12px; border-color: #b88a34; }
#warpMenu.hidden { display: none; }
.wm-title { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.wm-title svg { width: 22px; height: 22px; color: var(--cyan); }
.wm-list { display: flex; flex-direction: column; gap: 6px; }
.wm-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 9px; font-size: 14.5px; text-align: left; background: linear-gradient(180deg, rgba(22, 40, 84, 0.95), rgba(8, 16, 40, 0.95)); border: 1px solid var(--line); }
.wm-item svg { width: 18px; height: 18px; color: var(--gold-hi); }
.wm-item:hover { border-color: var(--gold); }
.wm-close { margin-top: 8px; width: 100%; height: 36px; border-radius: 9px; font-size: 13.5px; color: var(--muted); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-dim); }

/* ================= toast / loading ================= */
#toast {
  position: fixed; z-index: 13; left: 50%; top: 150px; transform: translate(-50%, -10px); opacity: 0; padding: 8px 18px; border-radius: 20px; font-size: 14px;
  pointer-events: none; white-space: nowrap; background: rgba(6, 12, 32, 0.92); border: 1px solid var(--gold-dim); color: #fff; transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1a3266, #08102a 70%); transition: opacity .4s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-box { padding: 18px 26px; min-width: 260px; }
.ld-title { font-size: 18px; color: var(--gold-hi); margin-bottom: 10px; text-align: center; }
.ld-title span { font-size: 11px; color: var(--muted); margin-left: 8px; letter-spacing: 0.14em; text-transform: uppercase; }
.ld-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--gold-hi)); transition: width .2s; }
.ld-step { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; min-height: 16px; }

/* ================= medium desktop (narrow windows) ================= */
@media (max-width: 1280px) and (min-height: 541px) {
  :root { --pf: 84px; --mb: 48px; --mm: 156px; --slot: 50px; }
  .pf-panel { width: 300px; }
  .pf-name { font-size: 17px; } .pf-lv, .pf-class { font-size: 13.5px; }
  .mbtn .ml { font-size: 12px; }
  #chat { width: 340px; }
  .chat-box { height: 190px; }
  .tf-panel { width: 240px; }
}
@media (max-width: 1100px) and (min-height: 541px) {
  #tframe { top: calc(var(--gap) + 150px); left: calc(var(--gap) + var(--safe-l)); }
}

/* ================= phone landscape / short screens ================= */
@media (max-height: 540px) and (orientation: landscape) {
  :root { --gap: 7px; --mm: 106px; --slot: 38px; --pf: 58px; --mb: 36px; }
  .pf-ring { padding: 3px; }
  .pf-crest { width: 22px; height: 22px; } .pf-crest svg { width: 13px; height: 13px; }
  .pf-panel { width: 214px; margin-left: -22px; margin-top: 4px; padding: 3px 10px 5px 28px; }
  .pf-name { font-size: 13.5px; } .pf-lv, .pf-class { font-size: 11px; } .pf-lv svg { width: 11px; height: 11px; }
  .pf-top { gap: 6px; }
  .pbar { margin-top: 2px; gap: 4px; }
  .pb-ic { width: 13px; height: 12px; } b.pb-ic { font-size: 8.5px; line-height: 11px; width: 19px; }
  .pb-track { height: 12px; } .pb-track span { font-size: 9.5px; line-height: 12px; }
  .pbar.exp .pb-track { height: 10px; } .pbar.exp .pb-track span { font-size: 8.5px; line-height: 10px; }
  .studio-btn { height: 22px; font-size: 11px; padding: 0 8px 0 6px; top: calc(100% + 3px); left: 2px; }
  #tframe { top: calc(var(--gap) + 58px); left: 50%; transform: translateX(-50%); animation: none; }
  .tf-portrait { width: 46px; height: 46px; } .tf-badge { width: 18px; height: 18px; border-radius: 5px; } .tf-badge svg { width: 11px; height: 11px; }
  .tf-panel { width: 168px; min-height: 0; margin-left: -18px; padding: 2px 8px 4px 22px; }
  .tf-name { font-size: 12.5px; } .tf-lv { font-size: 10.5px; } .tbar { height: 11px; } .tbar span { font-size: 9px; line-height: 11px; } .tf-sub { display: none; }
  #topright { gap: 6px; }
  #menuRow { gap: 3px; }
  .mbtn { width: calc(var(--mb) + 6px); }
  .mbtn .ring { padding: 2px; }
  .mbtn .ml { font-size: 10px; margin-top: -2px; }
  #currency { padding: 3px 4px 3px 7px; gap: 4px; border-radius: 9px; }
  .cur { height: 16px; font-size: 11px; min-width: 76px; gap: 4px; } .cur svg { width: 14px; height: 14px; }
  .cur-plus { width: 22px; height: 22px; } .cur-plus svg { width: 12px; height: 12px; }
  .mm-title { height: 19px; line-height: 17px; font-size: 11px; }
  .mm-side { right: 3px; gap: 3px; } .mm-side button { width: 19px; height: 19px; } .mm-side button svg { width: 10px; height: 10px; } .mm-side button b { font-size: 13px; }
  .mm-coords { font-size: 10px; left: 5px; bottom: 3px; }
  #mmBox.big { --mm: 170px; }
  .zoompill { margin-top: 3px; } .zoompill button { width: 20px; height: 20px; font-size: 14px; } .zoompill span { font-size: 10.5px; min-width: 28px; }
  #hotbar { gap: 4px; padding: 9px 5px 5px; }
  .slot { border-radius: 8px; } .slot .face, .slot .cd { border-radius: 6px; }
  .slot .key { font-size: 9.5px; height: 15px; min-width: 15px; line-height: 13px; left: -5px; top: -8px; }
  .slot .cnt { font-size: 10px; }
  #actionPad { width: 126px; height: 82px; }
  .attack-btn { width: 78px; height: 78px; padding: 4px; } .attack-btn img { width: 36px; height: 36px; } .attack-btn .atk-l { font-size: 12px; } .attack-btn .cd { inset: 4px; }
  .auto-btn { width: 46px; height: 46px; border-width: 2px; } .auto-btn img { width: 13px; height: 13px; } .auto-btn .au-a { font-size: 10px; } .auto-btn .au-s { font-size: 9.5px; }
  #chat { width: 280px; }
  .chat-box { height: 136px; }
  .chat-tabs button { height: 22px; font-size: 11px; } .chat-tabs { transform: translateY(-10px); margin-bottom: -10px; }
  .chat-log { font-size: 11.5px; line-height: 1.5; padding: 3px 8px; }
  .chat-input { padding: 4px; gap: 4px; } .chat-input input { height: 28px; font-size: 12px; } .emoji-btn, .send-btn { height: 28px; width: 30px; } .send-btn { width: 36px; } .emoji-btn svg { width: 18px; height: 18px; } .send-btn svg { width: 15px; height: 15px; }
  body.touch #chat { bottom: auto; top: calc(var(--gap) + var(--pf) + 52px); width: 250px; }  /* below the สตูดิโอ button (was covering it) */
  body.touch .chat-toggle { display: flex; }
  body.touch #chat:not(.open) .chat-box { display: none; }
  .chat-toggle {
    align-items: center; gap: 6px; max-width: 230px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11.5px; overflow: hidden; white-space: nowrap;
    background: rgba(6, 12, 32, 0.82); border: 1px solid var(--line); color: #e8edff; margin-bottom: 14px;
  }
  .chat-toggle svg { width: 14px; height: 14px; flex: none; color: var(--gold-hi); }
  .chat-toggle span { overflow: hidden; text-overflow: ellipsis; }
  #joystick { width: 104px; height: 104px; }
  .js-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #studio { top: var(--gap); bottom: var(--gap); left: calc(var(--gap) + var(--safe-l)); width: 300px; }
  .btn { min-height: 48px; } .btn .th { font-size: 12.5px; }
  #toast { top: 64px; font-size: 12.5px; }
  .blabel .chip { width: 30px; height: 30px; padding: 2px; } .blabel .chip svg { width: 15px; height: 15px; }
  .blabel .bt { height: 25px; line-height: 22px; font-size: 12.5px; margin-left: -12px; padding: 0 10px 0 16px; border-width: 1px; }
  .bubble { font-size: 11.5px; padding: 4px 9px; }
  .npcname .nn { font-size: 10.5px; }
  /* windows: centred, full height */
  .win { top: var(--gap); bottom: var(--gap); left: 50%; right: auto; transform: translateX(-50%); width: min(660px, calc(100vw - 2 * var(--gap))); max-height: none; animation: none; }
  .win.char-win { width: min(700px, calc(100vw - 2 * var(--gap))); max-height: none; }
  .win-body { overflow-y: auto; }
  .doll { grid-template-rows: auto auto; }
  .win-head { padding: 5px 8px 4px 10px; gap: 8px; } .win-ic { width: 32px; height: 32px; padding: 2px; } .win-ic svg { width: 17px; height: 17px; }
  .win-title h2 { font-size: 16px; } .win-title small { display: none; } .win-x { width: 30px; height: 30px; } .win-x svg { width: 20px; height: 20px; }
  .win-tabs button { height: 30px; font-size: 12.5px; }
  .win-body { padding: 6px 8px; } .win-foot { padding: 5px 10px 6px; }
  .cats { width: 112px; gap: 3px; } .cats button { height: 30px; font-size: 12px; gap: 6px; padding: 0 7px; } .cats button svg { width: 14px; height: 14px; }
  .searchbox input { height: 30px; font-size: 12.5px; } .dd select { height: 30px; font-size: 12px; }
  .row { padding: 4px 8px; gap: 8px; } .itile { width: 40px; height: 40px; } .ri-name { font-size: 13px; } .ri-meta { font-size: 11.5px; line-height: 1.4; } .rtag { font-size: 10px; line-height: 15px; } .price { font-size: 12px; }
  .btn-buy { height: 30px; min-width: 54px; font-size: 13px; } .btn-gold { height: 32px; font-size: 13.5px; padding: 0 14px; }
  .cart svg { width: 26px; height: 26px; } .cart-t { font-size: 11.5px; } .cart-t b { font-size: 12.5px; }
  .doll-stage { min-height: 0; } .eq { width: 46px; height: 46px; } .doll { grid-template-columns: 46px 1fr 46px; } .eq .eqn { font-size: 8px; } .eq > svg { width: 20px; height: 20px; }
  .doll-col { gap: 3px; } .stats { min-width: 150px; } .stat { font-size: 12px; padding: 3px 8px; } .power b { font-size: 18px; }
  .sk-grid { grid-template-columns: repeat(8, 1fr); gap: 5px; } .sk { padding: 5px 2px 3px; } .sk .skic { width: 40px; height: 40px; } .sk .skn { font-size: 10px; min-height: 24px; }
  .sk-detail { min-height: 0; padding: 5px 8px; } .sk-detail .skic { width: 42px; height: 42px; } .sk-detail h4 { font-size: 14px; } .sk-detail p { font-size: 12px; }
  .bag-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
}

/* ================= phone portrait ================= */
@media (orientation: portrait) and (max-width: 720px) {
  :root { --gap: 8px; --mm: 100px; --slot: 44px; --pf: 60px; --mb: 38px; }
  .pf-ring { padding: 3px; }
  .pf-crest { width: 22px; height: 22px; } .pf-crest svg { width: 13px; height: 13px; }
  .pf-panel { width: calc(100vw - var(--mm) - var(--pf) - 22px); max-width: 250px; margin-left: -22px; margin-top: 4px; padding: 3px 9px 5px 28px; }
  .pf-name { font-size: 14px; } .pf-lv, .pf-class { font-size: 11px; } .pf-lv svg { width: 11px; height: 11px; } .pf-class { display: none; }
  .pf-top { gap: 6px; }
  .pbar { margin-top: 2px; gap: 4px; }
  .pb-ic { width: 13px; height: 12px; } b.pb-ic { font-size: 8.5px; line-height: 12px; width: 19px; }
  .pb-track { height: 13px; } .pb-track span { font-size: 10px; line-height: 13px; }
  .pbar.exp .pb-track { height: 10px; } .pbar.exp .pb-track span { font-size: 8.5px; line-height: 10px; }
  .studio-btn { height: 24px; font-size: 11.5px; top: calc(100% + 4px); left: 0; }
  #tframe { top: calc(var(--gap) + var(--pf) + 58px); left: var(--gap); transform: none; animation: none; }  /* below the สตูดิโอ button */
  .tf-portrait { width: 46px; height: 46px; } .tf-badge { width: 18px; height: 18px; border-radius: 5px; } .tf-badge svg { width: 11px; height: 11px; }
  .tf-panel { width: 190px; min-height: 0; margin-left: -18px; padding: 2px 8px 4px 22px; }
  .tf-name { font-size: 13px; } .tf-lv { font-size: 11px; } .tbar { height: 12px; } .tbar span { font-size: 9.5px; line-height: 12px; } .tf-sub { font-size: 10px; }
  #topright { right: calc(var(--gap) + var(--safe-r)); top: calc(var(--gap) + var(--mm) + 56px); flex-direction: column; align-items: flex-end; gap: 6px; }
  #menuRow { flex-direction: column; gap: 2px; }
  .mbtn { width: calc(var(--mb) + 12px); } .mbtn .ring { padding: 2px; } .mbtn .ml { font-size: 10px; margin-top: -2px; }
  #currency { position: fixed; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 58px); padding: 3px 4px 3px 7px; gap: 4px; border-radius: 9px; }
  body.has-target #currency { top: calc(var(--gap) + var(--pf) + 132px); }
  .cur { height: 17px; font-size: 11.5px; min-width: 80px; gap: 4px; } .cur svg { width: 14px; height: 14px; }
  .cur-plus { width: 22px; height: 22px; } .cur-plus svg { width: 12px; height: 12px; }
  .mm-title { height: 19px; line-height: 17px; font-size: 10.5px; }
  .mm-side { right: 3px; gap: 3px; } .mm-side button { width: 19px; height: 19px; } .mm-side button svg { width: 10px; height: 10px; } .mm-side button b { font-size: 13px; }
  .mm-coords { font-size: 10px; left: 4px; bottom: 2px; }
  #mmBox.big { --mm: 200px; }
  .zoompill { margin-top: 4px; } .zoompill button { width: 22px; height: 22px; font-size: 15px; } .zoompill span { font-size: 11px; }
  #hotbar { display: grid; grid-template-columns: repeat(5, var(--slot)); gap: 10px 6px; bottom: calc(144px + var(--safe-b)); padding: 12px 8px 7px; }
  .hb-sep { display: none; }
  .slot .key { font-size: 10px; height: 16px; min-width: 16px; line-height: 14px; left: -5px; top: -8px; }
  #actionPad { right: calc(var(--gap) + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 150px; height: 116px; }
  .attack-btn { width: 100px; height: 100px; } .attack-btn img { width: 44px; height: 44px; } .attack-btn .atk-l { font-size: 14px; }
  .auto-btn { width: 54px; height: 54px; } .auto-btn .au-a { font-size: 11.5px; } .auto-btn .au-s { font-size: 10.5px; } .auto-btn img { width: 15px; height: 15px; }
  #joystick { left: calc(16px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); width: 120px; height: 120px; }
  #chat, body.touch #chat { width: auto; left: calc(var(--gap) + var(--safe-l)); right: calc(var(--gap) + var(--safe-r)); bottom: calc(272px + var(--safe-b)); }
  .chat-toggle { display: flex; }
  #chat:not(.open) .chat-box { display: none; }
  #chat:not(.open) { right: auto; }
  .chat-box { height: 170px; }
  .chat-tabs button { height: 26px; font-size: 12px; }
  .chat-log { font-size: 12.5px; }
  .chat-input input { height: 32px; font-size: 13px; } .emoji-btn, .send-btn { height: 32px; width: 34px; } .send-btn { width: 40px; }
  .chat-toggle {
    align-items: center; gap: 6px; max-width: 64vw; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; overflow: hidden; white-space: nowrap;
    background: rgba(6, 12, 32, 0.82); border: 1px solid var(--line); color: #e8edff; margin-bottom: 16px;
  }
  .chat-toggle svg { width: 15px; height: 15px; flex: none; color: var(--gold-hi); }
  .chat-toggle span { overflow: hidden; text-overflow: ellipsis; }
  #studio { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 56vh; border-radius: 16px 16px 0 0; padding-bottom: var(--safe-b); }
  .tabs button { min-height: 44px; }
  .btn { min-height: 56px; }
  #toast { top: auto; bottom: calc(350px + var(--safe-b)); }
  #warpMenu { width: min(78vw, 300px); top: 42%; }
  .wm-item { height: 44px; }
  .blabel .chip { width: 30px; height: 30px; padding: 2px; } .blabel .chip svg { width: 15px; height: 15px; }
  .blabel .bt { height: 25px; line-height: 22px; font-size: 12.5px; margin-left: -12px; padding: 0 10px 0 16px; border-width: 1px; }
  .bubble { font-size: 12px; padding: 4px 9px; }
  /* windows: full-screen sheets */
  .win.char-win { width: auto; max-height: none; }
  .win-body { overflow-y: auto; }
  .char-body .doll-stage { min-height: 230px; }
  .win { inset: 0; top: 0; width: auto; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: var(--safe-b); animation: sheetIn .2s ease-out; }
  @keyframes sheetIn { from { transform: translateY(30px); opacity: 0; } }
  .win::before, .win::after { display: none; }
  .win-head { padding: 8px 8px 6px 12px; } .win-ic { width: 38px; height: 38px; } .win-title h2 { font-size: 19px; }
  .win-tabs { overflow-x: auto; scrollbar-width: none; } .win-tabs button { flex: 0 0 auto; min-width: 72px; height: 38px; font-size: 14px; padding: 0 10px; }
  .win-body { flex-direction: column; padding: 8px; margin: 0; }
  .win-foot { margin: 0; flex-wrap: wrap; }
  .cats { width: auto; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 5px; flex: none; }
  .cats button { flex: 0 0 auto; height: 36px; font-size: 13px; }
  .cats button.on::after { display: none; }
  .row { flex-wrap: nowrap; } .ri-meta { display: none; }
  .ri-info .sub { display: block; }
  .doll { grid-template-columns: 56px 1fr 56px; flex: none; } .eq { width: 54px; height: 54px; } .doll-stage { min-height: 250px; }
  .stats { min-width: 0; }
  .sk-grid { grid-template-columns: repeat(4, 1fr); }
  .frow > span { width: 90px; }
}
.ri-info .sub { display: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= short portrait (small windows, older phones) ================= */
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) {
  :root { --slot: min(38px, calc((100vw - 72px) / 10)); --mm: 88px; --mb: 34px; }  /* 10 slots in one row must fit 375-px phones */
  #hotbar { display: flex; gap: 4px; padding: 10px 5px 5px; bottom: calc(104px + var(--safe-b)); }
  .attack-btn { width: 76px; height: 76px; } .attack-btn img { width: 34px; height: 34px; } .attack-btn .atk-l { font-size: 11.5px; }
  .auto-btn { width: 44px; height: 44px; } .auto-btn .au-a { font-size: 9.5px; } .auto-btn .au-s { font-size: 9px; } .auto-btn img { width: 12px; height: 12px; }
  #actionPad { width: 124px; height: 90px; bottom: calc(8px + var(--safe-b)); }
  #joystick { width: 92px; height: 92px; bottom: calc(10px + var(--safe-b)); }
  .js-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  #chat, body.touch #chat { bottom: calc(156px + var(--safe-b)); }
  .chat-box { height: 128px; }
  #toast { bottom: calc(210px + var(--safe-b)); }
}

/* ================= small landscape phones (iPhone SE/8 667x375): the class line ran under the menu buttons ================= */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 740px) {
  .pf-class { display: none; }
  .pf-panel { width: 196px; }
}

/* ================= draggable windows (drag.js) ================= */
.drag-handle { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.dragging, .dragging .drag-handle, body.win-dragging { cursor: grabbing; }
.dragging { animation: none !important; transition: none !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-hi), 0 20px 50px rgba(0, 0, 0, 0.7); }
body.win-dragging * { user-select: none; -webkit-user-select: none; }

/* ================= paper-doll item picker (outfit tab) ================= */
.item-picker.hidden { display: none; }
.ip-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ip-slot { flex: none; width: 56px; font-size: 13px; color: var(--gold-hi); }
.ip-opts { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.ip-opt { min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: #e8eeff; border: 1px solid var(--line-dim); background: rgba(8, 16, 40, 0.85); }
.ip-opt.on { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, #2c64c8, #133a86); box-shadow: inset 0 0 0 1px rgba(246, 217, 138, 0.3); }
.class-sel { width: 100%; min-height: 38px; border-radius: 9px; border: 1px solid var(--line-dim); background: rgba(8, 16, 40, 0.9); color: #eef2ff; font: inherit; font-size: 13px; padding: 4px 8px; }
#animBtns2.hidden { display: none; }
.chips-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.chip-btn { min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: #e8eeff; border: 1px solid var(--line-dim); background: rgba(8, 16, 40, 0.85); }
.chip-btn.mount { border-color: rgba(246, 217, 138, 0.35); }
.chip-btn.on { border-color: var(--gold); color: #fff; background: linear-gradient(180deg, #2c64c8, #133a86); }

/* ================= Lunelia UI kit (assets/ui/kit, 9-slice frames from the ChatGPT UI sheet) =================
   Frames are drawn with border-image (no `fill` on panels: the translucent navy background still shows the map).
   Buttons use the 5-state button frame with fill; coloured call-to-action buttons (buy / gold) keep their colour
   inside the kit frame. Frame widths shrink on phones so content keeps its room. */
:root { --kit-panel: 13px; --kit-btn: 6px; --kit-slot: 5px; }
.win, #studio, #warpMenu {
  border-style: solid; border-width: var(--kit-panel); border-radius: 0;
  border-image: url(../assets/ui/kit/panel-navy-9slice.png) 24 / var(--kit-panel) / 0 stretch;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.93), rgba(6, 12, 32, 0.95)) padding-box;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
}
.win::before, .win::after { display: none; }
.tip {
  border-style: solid; border-width: 8px; border-radius: 0;
  border-image: url(../assets/ui/kit/panel-navy-9slice.png) 24 / 8px / 0 stretch;
  background: rgba(10, 20, 48, 0.97) padding-box; image-rendering: pixelated;
}
.btn, .win-tabs button, .chip-btn, .ip-opt, .class-sel, .wm-item, .btn-ghost, .tabs button {
  border-style: solid; border-width: var(--kit-btn); border-radius: 0;
  border-image: url(../assets/ui/kit/button-normal-9slice.png) 12 fill / var(--kit-btn) / 0 stretch;
  background: none; box-shadow: none; image-rendering: pixelated;
}
.btn:hover:not(:disabled), .win-tabs button:hover, .chip-btn:hover, .ip-opt:hover, .wm-item:hover, .btn-ghost:hover, .tabs button:hover { border-image-source: url(../assets/ui/kit/button-hover-9slice.png); }
.btn:active:not(:disabled), .win-tabs button:active, .chip-btn:active, .ip-opt:active, .wm-item:active, .btn-ghost:active, .tabs button:active { border-image-source: url(../assets/ui/kit/button-pressed-9slice.png); }
.btn.on, .win-tabs button.on, .chip-btn.on, .ip-opt.on, .btn-ghost.on, .tabs button.on { border-image-source: url(../assets/ui/kit/button-selected-9slice.png); background: none; box-shadow: 0 0 10px rgba(143, 230, 255, 0.22); }
.btn:disabled, .btn-ghost:disabled { border-image-source: url(../assets/ui/kit/button-disabled-9slice.png); opacity: 0.85; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; }
.btn-buy, .btn-gold {
  border-style: solid; border-width: var(--kit-btn); border-radius: 0;
  border-image: url(../assets/ui/kit/button-normal-9slice.png) 12 / var(--kit-btn) / 0 stretch;
  background-clip: padding-box; box-shadow: none; image-rendering: pixelated;
}
.btn-buy:hover, .btn-gold:hover:not(:disabled) { border-image-source: url(../assets/ui/kit/button-hover-9slice.png); filter: brightness(1.08); }
.win-tabs button { border-bottom-width: var(--kit-btn); }
.tabs button.on { color: #fff; }
.class-sel { appearance: none; -webkit-appearance: none; padding-right: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f6d98a'/%3E%3C/svg%3E") no-repeat right 6px center; }
.itile {
  border-style: solid; border-width: var(--kit-slot); border-radius: 0;
  border-image: url(../assets/ui/kit/inventory-slot-9slice.png) 12 fill / var(--kit-slot) / 0 stretch;
  background: none; box-shadow: inset 0 0 0 1.5px var(--rc, transparent), inset 0 0 8px color-mix(in srgb, var(--rc, transparent) 45%, transparent);
  image-rendering: pixelated;
}
@media (max-height: 540px) and (orientation: landscape), (orientation: portrait) and (max-width: 720px) {
  :root { --kit-panel: 9px; --kit-btn: 5px; --kit-slot: 4px; }
}
/* full-screen sheets on phones: no frame on the outer edges that touch the screen */
@media (orientation: portrait) and (max-width: 720px) {
  .win { border-image: none; border-width: 0; border-top: 3px solid #b88a34; }
}
/* short desktop / tablet-landscape screens: windows use the full height beside the HUD instead of a thin strip
   under the minimap (they sit above the minimap layer while open) */
@media (max-height: 860px) and (min-height: 541px) and (orientation: landscape) {
  .win { top: calc(var(--gap) + 6px); bottom: calc(var(--gap) + 118px + var(--safe-b)); max-height: none; }
}

/* ================= HUD from the UI kit (tools/build_hud_kit.py) ================= */
/* portrait: kit ring overlay (inner disk Ø182 of 240x237 art, centre 121,117) + level plate with live text */
.pf-portrait { --k: calc(var(--pf) / 182); margin: calc(var(--k) * 24) 0 0 calc(var(--k) * 28); }
.pf-ring { padding: 0; background: none; box-shadow: none; }
.pf-ring img { box-shadow: none; }
.pf-kitring { position: absolute; left: calc(var(--k) * -30); top: calc(var(--k) * -26); width: calc(var(--k) * 240); height: calc(var(--k) * 237);
  pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.pf-plate { position: absolute; left: 50%; top: calc(var(--k) * 185); transform: translate(-50%, -50%); font-size: calc(var(--k) * 26); font-weight: 600;
  color: #fff; text-shadow: var(--outline); white-space: nowrap; pointer-events: none; }
.pf-crest { left: calc(var(--k) * -30); right: auto; bottom: auto; top: calc(var(--k) * 168); width: 26px; height: 26px; z-index: 3; }
.pf-crest svg { width: 15px; height: 15px; }
.pf-lv { display: none; }
.pf-panel {
  margin-left: calc(var(--pf) * -0.1 + 4px); margin-top: 6px; padding: 4px 12px 7px 26px;
  border-style: solid; border-width: 10px; border-radius: 0;
  border-image: url(../assets/ui/kit/panel-navy-9slice.png) 24 / 10px / 0 stretch;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.9), rgba(6, 12, 32, 0.92)) padding-box; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}
.pf-panel::after { display: none; }
/* bars: gold tube frame (9-slice) + live fill */
.pbar { gap: 0; margin-top: 3px; }
img.pb-ic { width: auto; height: 26px; margin-right: -9px; position: relative; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.pbar.exp img.pb-ic { height: 24px; margin-right: -8px; }
.pb-track {
  height: 20px; border-radius: 0; overflow: visible; box-shadow: none;
  border-style: solid; border-width: 3px 14px 3px 4px;
  border-image: url(../assets/ui/kit/bar_frame.png) 7 34 7 8 / 3px 14px 3px 4px stretch;
  background: linear-gradient(180deg, #050a1a, #121d3c) padding-box; image-rendering: pixelated;
}
.pb-track i { border-radius: 0; }
.pb-track i::after { left: 2px; right: 2px; top: 1px; border-radius: 0; }
.pb-track span { line-height: 14px; font-size: 12.5px; }
.pbar.exp .pb-track { height: 18px; }
.pbar.exp .pb-track span { line-height: 12px; font-size: 11.5px; }
/* currency: kit pill + coin / gem icons + kit plus button */
#currency { border-style: solid; border-width: 9px; border-radius: 0; padding: 0 2px 0 4px;
  border-image: url(../assets/ui/kit/panel-navy-9slice.png) 24 / 9px / 0 stretch;
  background: linear-gradient(180deg, rgba(14, 28, 62, 0.9), rgba(6, 12, 32, 0.92)) padding-box; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.cur img { width: 22px; height: 22px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.cur-plus { width: 32px; height: 32px; border: 0; background: none; box-shadow: none; }
.cur-plus img { width: 100%; height: 100%; image-rendering: pixelated; }
.cur-plus:active { transform: scale(0.92); }
@media (max-height: 540px) and (orientation: landscape), (orientation: portrait) and (max-width: 720px) {
  img.pb-ic { height: 18px; margin-right: -6px; } .pbar.exp img.pb-ic { height: 17px; }
  .pb-track { height: 15px; border-width: 2px 10px 2px 3px; border-image-width: 2px 10px 2px 3px; }
  .pb-track span { line-height: 11px; font-size: 10.5px; } .pbar.exp .pb-track { height: 13px; } .pbar.exp .pb-track span { line-height: 9px; font-size: 9.5px; }
  .pf-panel { border-width: 7px; border-image-width: 7px; padding: 2px 8px 4px 20px; }
  #currency { border-width: 7px; border-image-width: 7px; }
  .cur img { width: 15px; height: 15px; } .cur-plus { width: 24px; height: 24px; }
  .pf-crest { width: 20px; height: 20px; } .pf-crest svg { width: 12px; height: 12px; }
}

/* ================= player HUD v2 (assets/ui/hud2/player-status-frame.png, 2172x724 source) =================
   One fixed-proportion frame; every slot is placed in source pixels (--u = 1 source px). Portrait, name, class,
   level and live HP / MP / EXP fills sit on top of the frame's empty sockets. */
:root { --hw: 430px; --pf: calc(var(--hw) / 3); }
@media (max-width: 1280px) and (min-height: 541px) { :root { --hw: 396px; } }
@media (max-height: 540px) and (orientation: landscape) { :root { --hw: 300px; } }
@media (orientation: portrait) and (max-width: 720px) { :root { --hw: min(calc(100vw / var(--hz, 1) - var(--mm) - 3 * var(--gap)), 330px); } }
#pframe { display: block; }
.h2 { --u: calc(var(--hw) / 2172); position: relative; width: var(--hw); height: calc(var(--u) * 724); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
.h2 > * { position: absolute; }
.h2-frame { left: 0; top: 0; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; }
.h2-portrait { left: calc(var(--u) * 150); top: calc(var(--u) * 72); width: calc(var(--u) * 460); height: calc(var(--u) * 460); border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3c5aa8, #142552 60%, #0a1430); }
.h2-portrait img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.h2-lv { left: calc(var(--u) * 229); top: calc(var(--u) * 538); width: calc(var(--u) * 308); height: calc(var(--u) * 81); display: grid; place-items: center;
  font-size: calc(var(--u) * 54); font-weight: 600; color: #fff; text-shadow: var(--outline); white-space: nowrap; }
.h2-crest { left: calc(var(--u) * 58); top: calc(var(--u) * 521); width: calc(var(--u) * 104); height: calc(var(--u) * 104); border: 0; background: none; box-shadow: none;
  display: grid; place-items: center; color: var(--gold-hi); bottom: auto; right: auto; }
.h2-crest svg { width: 62%; height: 62%; }
.h2-name, .h2-class { top: calc(var(--u) * 167); height: calc(var(--u) * 79); display: flex; align-items: center; padding: 0 calc(var(--u) * 34);
  font-size: calc(var(--u) * 52); font-weight: 600; color: #fff; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.h2-name { left: calc(var(--u) * 790); width: calc(var(--u) * 626); }
.h2-class { left: calc(var(--u) * 1518); width: calc(var(--u) * 486); justify-content: center; color: var(--gold-hi); font-weight: 500; font-size: calc(var(--u) * 46); }
.h2-bar { left: calc(var(--u) * 924); width: calc(var(--u) * 1064); height: calc(var(--u) * 58); border-radius: calc(var(--u) * 29); overflow: hidden; }
.h2-bar.hp { top: calc(var(--u) * 292); } .h2-bar.mp { top: calc(var(--u) * 409); } .h2-bar.exp { top: calc(var(--u) * 525); }
.h2-bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .25s; border-radius: inherit; }
.h2-bar i::after { content: ""; position: absolute; left: 3%; right: 3%; top: 12%; height: 30%; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04)); }
.h2-bar.hp i { background: linear-gradient(180deg, #ff9a9a, #f23a46 48%, #a8101c); }
.h2-bar.mp i { background: linear-gradient(180deg, #9ad8ff, #2c8cf0 48%, #134ab0); }
.h2-bar.exp i { background: linear-gradient(180deg, #fff3a0, #f2c43a 48%, #b07a10); }
.h2-bar span { position: relative; display: grid; place-items: center; height: 100%; font-size: calc(var(--u) * 42); font-weight: 600; color: #fff;
  text-shadow: var(--outline); font-variant-numeric: tabular-nums; white-space: nowrap; }
#pframe .studio-btn { left: calc(var(--hw) * 0.37); top: calc(100% + 4px); }
#tframe { left: calc(var(--gap) + var(--safe-l) + var(--hw) + 12px); }
@media (orientation: portrait) and (max-width: 720px) {
  #pframe .studio-btn { left: 0; }
  #currency { top: calc(var(--gap) + var(--pf) + 36px); }
  body.has-target #currency { top: calc(var(--gap) + var(--pf) + 110px); }
  #tframe { left: var(--gap); top: calc(var(--gap) + var(--pf) + 36px); }
}
@media (max-height: 540px) and (orientation: landscape) {
  #pframe .studio-btn { top: calc(100% + 2px); }
}
/* keep HUD text readable when the frame is small (phones) */
.h2-bar span { font-size: max(calc(var(--u) * 42), 8.5px); }
.h2-name { font-size: max(calc(var(--u) * 52), 10.5px); }
.h2-class { font-size: max(calc(var(--u) * 46), 9.5px); }
.h2-lv { font-size: max(calc(var(--u) * 54), 10px); }
.h2-bar { overflow: visible; }            /* fill keeps its own rounded clip; the value text may overhang thin tracks */
.h2-bar span { line-height: 1; }

/* ================= currency panel v2 + minimap frame v2 (assets/ui/hud2/) =================
   Both frames are single fixed-proportion images; live values and hitboxes are placed in TRIMMED source pixels
   (currency 2013x671 -> --cu, minimap 1013x1083 -> --u). --cw = currency width, --mm = minimap width,
   --mmB = expanded minimap width, --mmw = the minimap width in use (body.mm-big switches it). */
:root { --cw: 270px; --mm: 224px; --mmB: 320px; --mmr: 1.0691; --cwr: 0.3333; }   /* --mmr / --cwr = frame height / width (theme-royal overrides) */
@media (max-width: 1280px) and (min-height: 541px) { :root { --cw: 236px; --mm: 200px; --mmB: 280px; } }
@media (max-height: 540px) and (orientation: landscape) { :root { --cw: 168px; --mm: 132px; --mmB: min(190px, calc(100vh - 2 * var(--gap) - 150px)); } }
@media (orientation: portrait) and (max-width: 720px) { :root { --cw: 172px; --mm: 124px; --mmB: min(280px, calc(100vw - 2 * var(--gap) - var(--mb) - 26px), calc(100vh - 470px)); } }
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) { :root { --mm: 116px; } }
body { --mmw: var(--mm); }
body.mm-big { --mmw: var(--mmB); }

/* currency */
#currency { display: block; position: relative; width: var(--cw); height: calc(var(--cw) * var(--cwr)); padding: 0; gap: 0;
  border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
#currency > * { position: absolute; }
#currency { --cu: calc(var(--cw) / 2013); }
.c2-frame { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }
.c2-val { left: calc(var(--cu) * 560); width: calc(var(--cu) * 880); display: flex; align-items: center; justify-content: flex-end;
  font-size: max(9.5px, calc(var(--cu) * 96)); font-weight: 600; color: #fff; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; }
.c2-val b { font-weight: 600; font-variant-numeric: tabular-nums; }
.c2-coin { top: calc(var(--cu) * 230); height: calc(var(--cu) * 134); color: #ffe7a0; }
.c2-gem { top: calc(var(--cu) * 437); height: calc(var(--cu) * 141); color: #f0d8ff; }
.c2-plus { --s: max(26px, calc(var(--cu) * 270)); left: calc(var(--cu) * 1675.5 - var(--s) / 2); top: calc(var(--cu) * 411.5 - var(--s) / 2); width: var(--s); height: var(--s);
  padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; transition: background .12s, box-shadow .12s; }
.c2-plus:hover { background: radial-gradient(circle, rgba(255, 236, 170, 0.22), rgba(255, 236, 170, 0) 70%); }
.c2-plus:active { background: radial-gradient(circle, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 70%); }

/* minimap */
#mmBox { display: block; width: var(--mmw); right: calc(var(--gap) + var(--safe-r)); top: var(--gap); transition: none; }
.m2 { --u: calc(var(--mmw) / 1013); position: relative; width: var(--mmw); height: calc(var(--mmw) * var(--mmr)); filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55)); }
.m2 > * { position: absolute; }
.m2 #minimap { left: calc(var(--u) * 44); top: calc(var(--u) * 248); width: calc(var(--u) * 777); height: calc(var(--u) * 705); box-shadow: none; border-radius: calc(var(--u) * 10); }
.m2-frame { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }
.m2-title { left: calc(var(--u) * 150); top: calc(var(--u) * 108); width: calc(var(--u) * 670); height: calc(var(--u) * 101); display: flex; align-items: center; justify-content: center;
  font-size: max(9px, calc(var(--u) * 60)); font-weight: 600; color: #fff; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; pointer-events: none; }
.m2-coords { left: calc(var(--u) * 90); top: calc(var(--u) * 985); width: calc(var(--u) * 350); height: calc(var(--u) * 77); display: flex; align-items: center; justify-content: center;
  font-size: max(8.5px, calc(var(--u) * 54)); font-weight: 500; color: #fff; text-shadow: var(--outline); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.m2-zval { left: calc(var(--u) * 662); top: calc(var(--u) * 987); width: calc(var(--u) * 161); height: calc(var(--u) * 81); display: flex; align-items: center; justify-content: center;
  font-size: max(8.5px, calc(var(--u) * 52)); font-weight: 600; color: #ffe7a0; text-shadow: var(--outline); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m2-btn { padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; transition: background .12s, box-shadow .12s; }
.m2-btn:hover { background: radial-gradient(circle, rgba(255, 236, 170, 0.25), rgba(255, 236, 170, 0) 70%); }
.m2-btn:active { background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%); }
.m2-side { --w: max(24px, calc(var(--u) * 140)); --h: calc(var(--u) * 150); left: calc(var(--u) * 924.5 - var(--w) / 2); top: calc(var(--u) * (var(--y) + 51.5) - var(--h) / 2); width: var(--w); height: var(--h); }
.m2-zoom { --s: max(22px, calc(var(--u) * 110)); left: calc(var(--u) * (var(--x) + 41) - var(--s) / 2); top: calc(var(--u) * 1027.5 - var(--s) / 2); width: var(--s); height: var(--s); }
.m2-btn.on { box-shadow: 0 0 0 2px rgba(255, 236, 170, 0.9), 0 0 12px rgba(246, 217, 138, 0.8); }

/* layout around the frames */
#topright { right: calc(var(--mmw) + var(--gap) * 2 + var(--safe-r)); }
@media (min-height: 861px) { .win { top: calc(var(--gap) + var(--mmw) * var(--mmr) + 12px); } }   /* shorter screens keep their own window placement */
@media (max-height: 540px) and (orientation: landscape) {
  #topright { flex-direction: column; align-items: flex-end; gap: 4px; }
}
@media (orientation: portrait) and (max-width: 720px) {
  #topright { right: calc(var(--gap) + var(--safe-r)); top: calc(var(--gap) + var(--mm) * var(--mmr) + 8px); }
  .win { top: calc(var(--gap) + var(--mm) * var(--mmr) + 12px); }
  /* expanded map: drops below the player HUD on the left so it never covers the HUD or the menu column */
  body.mm-big #mmBox { left: calc(var(--gap) + var(--safe-l)); right: auto; top: calc(var(--gap) + var(--pf) + 36px); }
  body.mm-big #currency, body.mm-big #tframe { top: calc(var(--gap) + var(--pf) + 44px + var(--mmB) * var(--mmr)); }
  body.mm-big.has-target #currency { top: calc(var(--gap) + var(--pf) + 118px + var(--mmB) * var(--mmr)); }
}
/* target frame sits under the menu row on desktop so it never covers the menu buttons */
@media (min-height: 541px) and (orientation: landscape), (min-height: 541px) and (min-width: 721px) {
  #tframe { top: calc(var(--gap) + var(--mb) + 26px); }
}
/* narrower desktop / tablet-landscape windows: the menu row + currency + minimap no longer fit beside the player HUD,
   so the currency stacks under the menu row and the target frame drops below the player HUD */
@media (max-width: 1220px) and (min-height: 541px) and (orientation: landscape) {
  #topright { flex-direction: column; align-items: flex-end; gap: 6px; }
  #tframe { left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 44px); }
}
@media (max-width: 980px) and (min-height: 541px) and (orientation: landscape) {
  :root { --hw: 300px; --mm: 160px; --mmB: 230px; --mb: 42px; --cw: 200px; }
}
/* tablet portrait (wider than a phone): menu column under the minimap, currency + target under the player HUD */
@media (orientation: portrait) and (min-width: 721px) {
  #topright { right: calc(var(--gap) + var(--safe-r)); top: calc(var(--gap) + var(--mmw) * var(--mmr) + 10px); flex-direction: column; align-items: flex-end; }
  #menuRow { flex-direction: column; gap: 4px; }
  #currency { position: fixed; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 44px); }
  #tframe { left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 52px + var(--cw) * var(--cwr)); }
}
/* phones: the v2 currency rule above resets position, so re-pin it where each phone layout wants it */
@media (orientation: portrait) and (max-width: 720px) {
  #currency { position: fixed; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 36px); }
  body.has-target #currency { top: calc(var(--gap) + var(--pf) + 110px); }
  body.mm-big #currency { top: calc(var(--gap) + var(--pf) + 44px + var(--mmB) * var(--mmr)); }
  body.mm-big.has-target #currency { top: calc(var(--gap) + var(--pf) + 118px + var(--mmB) * var(--mmr)); }
}
@media (orientation: portrait) and (min-width: 721px) { #currency { position: fixed; } }
/* phone landscape: target frame under the player HUD (left), expanded map only as wide as the free space allows */
@media (max-height: 540px) and (orientation: landscape) {
  #tframe { left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--pf) + 32px); transform: none; }
  :root { --mmB: max(var(--mm), min(190px, calc(100vh - 2 * var(--gap) - 150px), calc(100vw - var(--hw) - 262px))); }
}
/* expanded-map width limited by the free space (measured against chat / player HUD in each layout) */
@media (orientation: portrait) and (max-width: 720px) { :root { --mmB: max(var(--mm), min(280px, calc(100vw - 2 * var(--gap) - var(--mb) - 26px), calc(100vh - 604px))); } }
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) { :root { --mmB: max(var(--mm), min(280px, calc(100vw - 2 * var(--gap) - var(--mb) - 26px), calc(100vh - 482px))); } }
@media (max-width: 1220px) and (min-height: 541px) and (orientation: landscape) { :root { --mmB: max(var(--mm), min(280px, calc(100vw - var(--hw) - 360px))); } }
@media (max-width: 980px) and (min-height: 541px) and (orientation: landscape) { :root { --mmB: max(var(--mm), min(230px, calc(100vw - var(--hw) - 330px))); } }
/* phone landscape: target frame right of the player HUD, below the menu + currency stack (clear of the chat) */
@media (max-height: 540px) and (orientation: landscape) {
  #tframe { left: calc(var(--gap) + var(--safe-l) + var(--hw) + 10px); top: calc(var(--gap) + 118px); }
}

/* ================= bottom row: hotbar never under the chat or the attack pad =================
   The hotbar is centred in the free band left of the attack pad; where that band is too narrow next to the chat,
   the chat sits above the hotbar row (desktop) or under the studio button (short landscape, like touch phones). */
@media (min-width: 1281px) and (min-height: 541px) {
  #hotbar { left: max(50%, calc(var(--gap) + var(--safe-l) + 400px + var(--gap) + 5 * var(--slot) + 40px)); }
}
@media (max-width: 1280px) and (min-height: 541px) and (orientation: landscape) {
  #hotbar { left: calc((100vw - var(--padw, 190px) - 2 * var(--gap) - var(--safe-r)) / 2); }
  #chat { bottom: calc(var(--gap) + var(--safe-b) + var(--slot) + 30px); }
}
@media (max-width: 980px) and (min-height: 541px) and (orientation: landscape) {
  :root { --slot: 40px; }
  #actionPad { width: 150px; height: 104px; }
  #hotbar { gap: 5px; left: calc((100vw - var(--padw, 150px) - 2 * var(--gap) - var(--safe-r)) / 2); }
}
@media (max-height: 540px) and (orientation: landscape) {
  #hotbar { left: calc((100vw - var(--padw, 126px) - 2 * var(--gap) - var(--safe-r)) / 2); }
  #chat { bottom: auto; top: calc(var(--gap) + var(--pf) + 52px); width: 250px; }
}
@media (orientation: portrait) and (min-width: 721px) {
  #hotbar { display: grid; grid-template-columns: repeat(5, var(--slot)); gap: 10px 6px; left: calc((100vw - var(--padw, 190px) - 2 * var(--gap) - var(--safe-r)) / 2); }
  #hotbar .hb-sep { display: none; }
  #chat, body.touch #chat { top: auto; bottom: calc(var(--gap) + var(--safe-b) + 2 * var(--slot) + 44px); }
}
/* target portrait fallback: NPC / building icon on the ring when there is no portrait image */
.tf-ring { position: relative; }
.tf-ring img[hidden] { display: none; }
.tf-fb { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); padding: 22%; box-sizing: border-box; border-radius: 50%; color: var(--gold-hi); pointer-events: none;
  background: radial-gradient(circle at 50% 35%, #233e7a, #0a1430 75%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.theme-royal .tf-fb { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38 75%); }

/* the real game page (index.html) has no studio tools: they live on studio.html */
html[data-mode=game] #studio, html[data-mode=game] #studioBtn { display: none !important; }