/* โทน UI: หนังสือนิทานผจญภัย — แผ่นหนังม่วงเข้มขอบทอง บนโลก 3 มิติโทนแดดบ่าย
   ตัวอักษร: Cinzel (หัวเรื่อง) + Kanit (ภาษาไทย/เนื้อหา) — เกมใช้โทนมืดตลอด */
:root {
  --bg: #1a1622;
  --panel: rgba(28, 20, 38, 0.72);
  --panel-solid: #221a2e;
  --edge: rgba(255, 214, 140, 0.32);
  --edge-strong: rgba(255, 214, 140, 0.6);
  --text: #f6efe2;
  --muted: #c4b8cf;
  --gold: #ffd27a;
  --hp: #ec4d63;
  --sp: #4f95f5;
  --sys: #9edcff;
  --npc: #ffe29a;
  --font: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif;
  --display: 'Cinzel', 'Kanit', Georgia, serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1a1622; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #1a1622; color-scheme: dark; }

html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }

#game {
  position: fixed; inset: 0;
  font-family: var(--font); color: var(--text);
  user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

/* ป้ายชื่อ / บอลลูนคำพูด ลอยตามตัวละคร */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font-size: 13px; font-weight: 500; line-height: 1.15; text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.55);
}
.tag small { display: block; font-size: 10px; font-weight: 400; color: #e4d9ee; letter-spacing: 0.04em; }
.tag-npc { color: var(--npc); padding: 2px 9px 3px; border-radius: 9px; background: rgba(20, 14, 28, 0.55); text-shadow: none; }
.tag-player { color: #fff; padding: 1px 8px; border-radius: 10px; background: rgba(20, 14, 28, 0.45); text-shadow: none; }
.bubble {
  position: absolute; left: 0; top: 0; max-width: 220px; width: max-content; will-change: transform;
  padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: #2a2232;
  background: linear-gradient(#fffdf6, #f6efdf); border: 1.5px solid rgba(60, 40, 70, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: opacity 0.2s;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: #f6efdf; border-right: 1.5px solid rgba(60, 40, 70, 0.55); border-bottom: 1.5px solid rgba(60, 40, 70, 0.55);
  transform: rotate(45deg);
}

.hud { position: absolute; inset: 0; pointer-events: none; }
.panel {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10, 5, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

.char { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; padding: 10px 14px 12px 10px; display: flex; gap: 10px; align-items: center; width: 250px; box-sizing: border-box; }
.crest {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 20px; color: #2a1d10;
  background: radial-gradient(circle at 35% 30%, #ffe9b0, #e0a640 60%, #a8701e);
  box-shadow: 0 0 0 2px rgba(255, 214, 140, 0.35), 0 3px 8px rgba(0, 0, 0, 0.4);
}
.char-info { flex: 1; min-width: 0; }
.char .name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: var(--gold); }
.char .job { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-row b { font-weight: 600; color: var(--muted); }
.bar { height: 8px; background: rgba(0, 0, 0, 0.35); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.bar > i { display: block; height: 100%; border-radius: 5px; }
.bar.hp > i { background: linear-gradient(#ff7d8e, var(--hp)); }
.bar.sp > i { background: linear-gradient(#86b8ff, var(--sp)); }
.bar-row span { color: var(--muted); }

.mini { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; padding: 8px; }
.mini-title { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 6px; }
#mapName { font-family: var(--display); font-weight: 600; color: var(--gold); letter-spacing: 0.03em; }
#coords { color: var(--muted); font-variant-numeric: tabular-nums; }
#minimap { display: block; width: 140px; height: 105px; image-rendering: pixelated; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.cam-btns { display: flex; gap: 6px; margin-top: 6px; pointer-events: auto; }
.cam-btns button, .tools button {
  font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--edge);
  border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.cam-btns button { flex: 1; font-size: 16px; padding: 2px 0; }
.cam-btns button:hover, .tools button:hover { border-color: var(--edge-strong); background: rgba(255, 214, 140, 0.12); }
.cam-btns button:focus-visible, .tools button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.banner {
  position: absolute; top: 19%; left: 50%; transform: translate(-50%, 8px);
  font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: 0.08em; text-align: center; white-space: nowrap;
  color: var(--gold); text-shadow: 0 2px 0 #5a3a10, 0 4px 24px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 1s ease, transform 1s ease;
}
.banner small { display: block; margin-top: 2px; font-family: var(--font); font-size: 16px; font-weight: 400; letter-spacing: 0.1em; color: var(--text); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.banner.show { opacity: 1; transform: translate(-50%, 0); }

.chat {
  position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(460px, calc(100% - 24px)); max-height: 128px; overflow: hidden; box-sizing: border-box;
  padding: 8px 12px; font-size: 13px; line-height: 1.5;
  display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px);
}
.chat .sys { color: var(--sys); }
.chat .npc { color: var(--npc); }
.chat .info { color: var(--text); }

.help { position: absolute; right: 12px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; font-size: 12px; color: var(--muted); }
.help kbd { font-family: var(--font); font-size: 11px; color: var(--text); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 0 4px; margin: 0 1px; }

.tools { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); pointer-events: auto; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.tools button { padding: 5px 14px; background: var(--panel); }

.joystick {
  position: absolute; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
  border: 2px solid rgba(255, 214, 140, 0.35);
  display: none; pointer-events: auto; touch-action: none;
}
.joystick.show { display: block; }
.knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 233, 176, 0.75), rgba(224, 166, 64, 0.5)); border: 2px solid rgba(255, 226, 160, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }

body.touch .help { display: none; }
body.touch .chat { left: 160px; right: 12px; width: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); max-height: 92px; font-size: 12px; }

/* มอนสเตอร์: ชื่อ + แถบเลือด */
.tag-mob { color: #ffd7d0; font-size: 12px; padding: 1px 8px 2px; border-radius: 9px; background: rgba(60, 10, 20, 0.6); text-shadow: none; }
.hpbar { position: absolute; left: 0; top: 0; width: 46px; height: 6px; border-radius: 4px; background: rgba(10, 6, 14, 0.75); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); overflow: hidden; will-change: transform; }
.hpbar > i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff8a7a, #e0344a); transition: width 0.15s; }
.hpbar-player { width: 54px; }
.hpbar-player > i { background: linear-gradient(#8af07a, #3aa84a); }
.hpbar-player.low > i { background: linear-gradient(#ffb37a, #e86a2a); }

/* ตัวเลขดาเมจสไตล์ MMORPG ยุคคลาสสิก: ตัวหนาไล่สี ขอบเข้ม เด้งขึ้น */
.dmg {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; isolation: isolate;
  font-family: 'Lilita One', var(--display); font-size: 30px; line-height: 1; white-space: nowrap; letter-spacing: 0.02em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(#ffffff 30%, #c9d6ef);
  -webkit-text-stroke: 1.6px #1c1222;
  filter: drop-shadow(0 2px 0 rgba(10, 4, 16, 0.85)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}
.dmg.crit { font-size: 40px; background-image: linear-gradient(#fffbd0 15%, #ffd23a 55%, #ff9a1a); }
.dmg.crit::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 92px; height: 70px; margin: -35px 0 0 -46px;
  background: radial-gradient(circle, #ff8a3a 0%, #e8282a 55%, rgba(200, 20, 30, 0) 72%);
  clip-path: polygon(50% 0, 60% 30%, 88% 8%, 72% 40%, 100% 46%, 72% 58%, 92% 92%, 60% 70%, 50% 100%, 40% 70%, 8% 92%, 28% 58%, 0 46%, 28% 40%, 12% 8%, 40% 30%);
  opacity: 0.85;
}
.dmg.taken { background-image: linear-gradient(#ffd0d0 15%, #ff5a5a 55%, #c81e2a); }
.dmg.miss { font-size: 22px; background-image: linear-gradient(#e8f6ff, #7fc4ff); }

/* อีโมตเหนือหัว */
.emote {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity;
  min-width: 26px; height: 28px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center;
  font-family: 'Lilita One', var(--display); font-size: 22px; color: #e8283a;
  background: #fffef6; border: 2px solid #2a1d2c; border-radius: 14px;
  box-shadow: 0 3px 0 rgba(20, 10, 30, 0.35);
}
.emote::after { content: ''; position: absolute; bottom: -7px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #2a1d2c; }

/* กรอบเป้าหมาย */
.target { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(260px, calc(100% - 420px)); min-width: 180px; padding: 8px 12px 9px; box-sizing: border-box; }
.target-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 500; color: #ffd7d0; }
#targetLv { font-size: 12px; color: var(--muted); }
.target .bar { margin-top: 6px; height: 9px; }
.target .bar.hp > i { transition: width 0.15s; }
.target-hp { margin-top: 3px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bar.low > i { background: linear-gradient(#ffb37a, #e86a2a); }

/* ปุ่มโจมตี (มือถือ) */
.attack-btn {
  position: absolute; right: 18px; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: 72px; height: 72px; border-radius: 50%; display: none; pointer-events: auto;
  font-size: 30px; line-height: 1; color: #2a1d10; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe9b0, #e0a640 60%, #a8701e);
  border: 2px solid rgba(255, 233, 176, 0.8); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.attack-btn:active { transform: scale(0.94); }
body.touch .attack-btn { display: block; }
body.touch .chat { right: 104px; }

/* จอแดงตอนโดนตี + จอมืดตอนวาร์ป */
.hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(220, 30, 40, 0.45)); }
.hurt.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
.fade { position: absolute; inset: 0; pointer-events: none; background: #0e0a14; opacity: 0; transition: opacity 0.4s ease; }
#game.fading .fade { opacity: 1; }

/* แถบ EXP + ปุ่มสถานะในกรอบตัวละคร */
.exp-row { margin-top: 3px; font-size: 10px; }
.exp-row b { font-size: 10px; }
.bar.exp, .bar.jexp { height: 5px; }
.bar.exp > i { background: linear-gradient(#ffe9a0, #e0a640); }
.bar.jexp > i { background: linear-gradient(#b8e8ff, #4fa8e8); }
.status-btn {
  position: relative; margin-top: 7px; width: 100%; pointer-events: auto; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text); padding: 4px 8px; border-radius: 8px;
  background: rgba(255, 214, 140, 0.1); border: 1px solid var(--edge);
}
.status-btn:hover { border-color: var(--edge-strong); background: rgba(255, 214, 140, 0.18); }
.status-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.status-btn kbd { font-family: var(--font); font-size: 10px; color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.badge {
  position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #2a1d10;
  background: radial-gradient(circle at 35% 30%, #ffe9b0, #e0a640); box-shadow: 0 0 0 2px rgba(20, 12, 30, 0.8);
  animation: badge 1.6s ease-in-out infinite;
}
.badge[hidden] { display: none; }
@keyframes badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* หน้าต่างสถานะ */
.status {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 440px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: auto; box-sizing: border-box; padding: 12px 14px 12px;
  pointer-events: auto; background: rgba(26, 19, 38, 0.9); z-index: 3;
}
.status[hidden] { display: none; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.st-head h2 { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: 0.04em; color: var(--gold); }
.st-head p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.st-close { font: inherit; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; }
.st-close:hover { color: var(--text); border-color: var(--edge); }
.st-levels { display: grid; gap: 8px; margin-top: 10px; }
.lv-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-top b { color: var(--text); font-size: 14px; }
.st-levels .bar { margin-top: 4px; height: 7px; }
.st-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.st-stats { display: grid; gap: 4px; }
.st-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px 26px 16px; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); font-variant-numeric: tabular-nums;
}
.st-key { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--gold); }
.st-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-val { text-align: right; font-size: 14px; }
.st-plus {
  width: 26px; height: 24px; padding: 0; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
  color: #2a1d10; background: linear-gradient(#ffe39a, #e0a640); border: 1px solid rgba(255, 233, 176, 0.8);
}
.st-plus:disabled { cursor: default; color: var(--muted); background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.st-plus:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.st-cost { font-size: 10.5px; color: var(--muted); text-align: center; }
.st-row.affordable .st-cost { color: var(--gold); }
.st-row.bump { animation: bump 0.35s ease-out; }
@keyframes bump { 0% { background: rgba(255, 211, 107, 0.35); } 100% { background: rgba(255, 255, 255, 0.04); } }
.st-derived { margin: 0; display: grid; gap: 3px; align-content: start; }
.st-derived div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; font-variant-numeric: tabular-nums; }
.st-derived dt { color: var(--muted); }
.st-derived dd { margin: 0; color: var(--text); }
.st-hint { margin: 10px 0 0; min-height: 2.9em; font-size: 12px; line-height: 1.45; color: var(--muted); }
.st-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--muted); }
.st-foot b { font-size: 16px; color: var(--text); margin-left: 4px; }
.status.has-points .pts b { color: var(--gold); }

/* ข้อความ EXP / เลเวลอัป */
.dmg.exp { font-size: 17px; background-image: linear-gradient(#f4e2ff, #c08aff); -webkit-text-stroke-width: 1.2px; }
.dmg.lvup { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: 0.06em; background-image: linear-gradient(#fffbe0 10%, #ffd36b 50%, #e08a1a); }
.dmg.lvup.job { font-size: 26px; background-image: linear-gradient(#f0fbff 10%, #8fd8ff 55%, #3a8ae0); }
.chat .exp { color: #d8b8ff; }
.chat .lv { color: var(--gold); font-weight: 500; }
.banner.lv { color: #ffe08a; }

/* ===== v0.4: ไอเทม · กระเป๋า · ปุ่มลัด ===== */
.char-btns { display: flex; gap: 6px; margin-top: 7px; }
.char-btns .status-btn { margin-top: 0; width: auto; flex: 1; padding: 4px 4px; white-space: nowrap; }
.char-btns .badge { top: -12px; right: -8px; }

/* ป้ายชื่อไอเทมบนพื้น */
.tag-item { font-size: 12px; padding: 1px 8px 2px; border-radius: 9px; background: rgba(16, 10, 24, 0.7); text-shadow: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.tag-item[hidden] { display: none; }

/* ตัวเลขฟื้นฟู / เก็บของ */
.dmg.heal { font-size: 24px; background-image: linear-gradient(#eaffe0 15%, #7ff07a 55%, #2fae4a); }
.dmg.heal-sp { font-size: 22px; background-image: linear-gradient(#e8f4ff 15%, #8ac8ff 55%, #3a7ee8); }
.dmg.loot { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: 0; -webkit-text-stroke-width: 0; color: #f2ece0; background: none; text-shadow: 0 1px 0 #1c1222, 0 0 4px rgba(0, 0, 0, 0.8), 0 0 1px #000; filter: none; }
.dmg.loot.r-uncommon { color: #8fe08a; }
.dmg.loot.r-rare { color: #7fc4ff; }
.dmg.loot.r-epic { color: #d49bff; }

/* สีข้อความในแชตตามความหายาก */
.chat .r-common { color: #f2ece0; }
.chat .r-uncommon { color: #8fe08a; }
.chat .r-rare { color: #7fc4ff; font-weight: 500; }
.chat .r-epic { color: #d49bff; font-weight: 600; }

/* ช่องไอเทม (ใช้ทั้งกระเป๋าและช่องสวมใส่) */
.slot {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; box-sizing: border-box;
  font: inherit; color: var(--text); cursor: pointer; border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.slot img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; image-rendering: auto; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45)); }
.slot .qty { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.slot:hover { border-color: var(--edge-strong); background-color: rgba(255, 214, 140, 0.08); }
.slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.slot.empty { cursor: default; background: rgba(0, 0, 0, 0.22); border-style: dashed; border-color: rgba(255, 255, 255, 0.12); }
.slot.empty:hover { border-color: rgba(255, 255, 255, 0.12); background-color: rgba(0, 0, 0, 0.22); }
.slot-name { font-size: 10px; color: rgba(196, 184, 207, 0.7); text-align: center; line-height: 1.1; padding: 0 2px; }
.slot.r-uncommon { border-color: rgba(143, 224, 138, 0.55); }
.slot.r-rare { border-color: rgba(127, 196, 255, 0.7); box-shadow: inset 0 0 10px rgba(127, 196, 255, 0.22); }
.slot.r-epic { border-color: rgba(212, 155, 255, 0.8); box-shadow: inset 0 0 12px rgba(212, 155, 255, 0.3); }
.slot.sel { outline: 2px solid var(--gold); outline-offset: 1px; background-color: rgba(255, 214, 140, 0.14); }

/* หน้าต่างกระเป๋า */
.inv {
  position: absolute; right: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 470px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: auto; box-sizing: border-box; padding: 12px 14px;
  pointer-events: auto; background: rgba(26, 19, 38, 0.92); z-index: 3;
}
.inv[hidden] { display: none; }
.inv .st-head p { font-variant-numeric: tabular-nums; }
.inv-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.inv-equip { display: grid; gap: 4px; align-content: start; padding-top: 2px; }
.eq-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px; align-items: center; }
.eq-label { font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-label small { display: block; font-size: 10px; color: var(--muted); }
.eq-label em { font-style: normal; color: rgba(196, 184, 207, 0.55); }
.inv-bag { min-width: 0; display: flex; flex-direction: column; }
.inv-tabs { display: flex; gap: 4px; margin-bottom: 7px; }
.inv-tabs button {
  flex: 1; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 3px 0; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
}
.inv-tabs button:hover { color: var(--text); }
.inv-tabs button[aria-selected="true"] { color: var(--gold); border-color: var(--edge); background: rgba(255, 214, 140, 0.12); }
.inv-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.inv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; align-content: start; max-height: 196px; min-height: 96px; overflow-y: auto; padding: 2px; }
.inv-empty { grid-column: 1 / -1; margin: 18px 6px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.inv-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); min-height: 64px; font-size: 12.5px; }
.inv-detail .hint { margin: 4px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.d-head { display: flex; gap: 10px; align-items: center; }
.d-head img { width: 40px; height: 40px; flex: none; border-radius: 8px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.d-head b { font-size: 15px; font-weight: 600; }
.d-head small { display: block; font-size: 11px; color: var(--muted); }
.d-desc { margin: 7px 0 0; color: var(--text); line-height: 1.45; }
.d-stats { margin: 5px 0 0; color: #b9f0b0; line-height: 1.5; font-variant-numeric: tabular-nums; }
.d-stats .bad { color: #ff8a8a; }
.d-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.d-actions button, .d-keys button {
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; padding: 4px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}
.d-actions button:hover, .d-keys button:hover { border-color: var(--edge-strong); }
.d-actions button:focus-visible, .d-keys button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.d-actions .primary { color: #2a1d10; font-weight: 600; border-color: rgba(255, 233, 176, 0.8); background: linear-gradient(#ffe9b0, #e0a640); }
.d-actions .ghost { color: var(--muted); background: none; }
.d-actions .danger { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.55); }
.d-keys { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.d-keys[hidden] { display: none; }
.d-keys button { padding: 4px 0; font-size: 11.5px; }
.d-keys button.on { color: #2a1d10; font-weight: 600; background: var(--gold); border-color: var(--gold); }

/* แถบปุ่มลัด */
.hotbar {
  position: absolute; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: max(484px, calc(50% - 222px));
  display: flex; gap: 4px; padding: 5px; border-radius: 12px; pointer-events: auto;
  background: rgba(28, 20, 38, 0.72); border: 1px solid var(--edge);
  box-shadow: 0 8px 24px rgba(10, 5, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hk {
  position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  font: inherit; color: var(--text); border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hk img { width: 34px; height: 34px; pointer-events: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45)); }
.hk .key { position: absolute; left: 3px; top: 1px; font-size: 9.5px; font-weight: 600; color: var(--gold); text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.hk .qty { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.hk .cd { position: absolute; inset: 0; background: rgba(255, 233, 176, 0.55); opacity: 0; pointer-events: none; }
.hk:hover { border-color: var(--edge-strong); }
.hk:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hk.dim img { opacity: 0.35; filter: grayscale(1); }
.hk.eq { border-color: rgba(255, 210, 122, 0.75); box-shadow: inset 0 0 8px rgba(255, 210, 122, 0.35); }
.hk.over { border-color: var(--gold); background-color: rgba(255, 214, 140, 0.2); }
.hk.used .cd { animation: hk-used 0.4s ease-out; }
.hk.used { animation: hk-bump 0.3s ease-out; }
@keyframes hk-used { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes hk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* จอขนาดกลาง: ปุ่มลัดอยู่เหนือกล่องแชต, คำแนะนำแคบลง */
.help { max-width: 330px; line-height: 1.6; }
@media (max-width: 1239px) {
  .hotbar { left: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* มือถือ / จอสัมผัส: ปุ่มลัดล่างกลาง ดันจอยสติ๊ก ปุ่มโจมตี และแชตขึ้น */
body.touch .hotbar { left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); gap: 3px; padding: 4px; border-radius: 10px; }
body.touch .hk { width: 38px; height: 38px; }
body.touch .hk img { width: 29px; height: 29px; }
body.touch .hk .key { font-size: 8.5px; }
body.touch .joystick { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
body.touch .attack-btn { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
body.touch .tools { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
body.touch .chat { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
body.touch .char-btns .status-btn kbd { display: none; }
@media (max-height: 500px) {
  body.touch .chat { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); max-height: 60px; font-size: 11px; line-height: 1.4; padding: 5px 10px; }
  body.touch .joystick { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); width: 112px; height: 112px; }
  body.touch .attack-btn { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.touch .tools { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  body.touch .hk { width: 34px; height: 34px; }
  body.touch .hk img { width: 26px; height: 26px; }
}
@media (max-width: 600px) {
  .inv { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 76%; z-index: 4; padding: 10px 12px; }
  .inv-body { grid-template-columns: 1fr; gap: 8px; }
  .inv-equip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .eq-row { display: block; }
  .eq-label { display: none; }
  .inv-grid { max-height: 30vh; min-height: 0; }
  .d-actions button { padding: 6px 14px; }
  .d-keys button { padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hk.used, .hk.used .cd { animation: none; }
}

/* ===== v0.5: Zeny · กล่องสนทนา NPC · ร้านค้า · คลังเก็บของ ===== */
.zeny-ico {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #f0c040 45%, #b07a18); box-shadow: 0 0 0 1px rgba(60, 36, 0, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}
.inv-foot { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--muted); }
.inv-foot b { margin-left: auto; color: var(--gold); font-size: 14px; font-variant-numeric: tabular-nums; }
.d-price { margin: 4px 0 0; font-size: 11.5px; color: #e8cf8a; font-variant-numeric: tabular-nums; }
.chat .zeny { color: #ffd36b; }
.dmg.zeny { font-family: var(--font); font-weight: 600; font-size: 17px; letter-spacing: 0; -webkit-text-stroke-width: 0; color: #ffe08a; background: none; text-shadow: 0 1px 0 #2a1a00, 0 0 5px rgba(0, 0, 0, 0.85); filter: none; }
.dmg.zeny.spend { color: #ffc2b0; }

/* ปุ่มมาตรฐานของหน้าต่างบริการ */
.shop-btns button, .stor-foot button, .stor-act .go, .stepper button {
  font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; padding: 5px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}
.shop-btns button:hover:not(:disabled), .stor-foot button:hover:not(:disabled), .stor-act .go:hover, .stepper button:hover:not(:disabled) { border-color: var(--edge-strong); }
.shop-btns button:focus-visible, .stor-foot button:focus-visible, .stor-act button:focus-visible, .stepper button:focus-visible, .dlg-opt:focus-visible, .sh-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.shop-btns button:disabled, .stor-foot button:disabled, .stepper button:disabled { opacity: 0.4; cursor: default; }
.shop-btns .primary, .stor-act .go { color: #2a1d10; font-weight: 600; border-color: rgba(255, 233, 176, 0.8); background: linear-gradient(#ffe9b0, #e0a640); }
.shop-btns .ghost, .stor-foot .ghost { color: var(--muted); background: none; }
.shop-btns .danger { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.6); }
.stepper { display: inline-flex; align-items: center; gap: 3px; }
.stepper button { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.stepper .mx { font-size: 12px; }
.stepper .q { min-width: 30px; text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* กล่องสนทนา NPC */
.dlg {
  position: absolute; left: calc(50% + 64px); top: 50%; transform: translateY(-50%);
  width: min(420px, calc(50% - 76px)); max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box; padding: 12px 14px 14px;
  pointer-events: auto; background: rgba(26, 19, 38, 0.94); z-index: 4;
  animation: dlg-in 0.18s ease-out;
}
.dlg[hidden] { display: none; }
@keyframes dlg-in { from { scale: 0.96; } to { scale: 1; } }
@media (max-width: 1000px) and (min-width: 601px) {
  .dlg { left: 50%; top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(460px, calc(100% - 24px)); max-height: 60%; }
}
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dlg-head b { font-family: var(--display); font-size: 16px; color: var(--npc); letter-spacing: 0.03em; }
.dlg-head small { display: block; font-size: 11.5px; color: var(--muted); }
.dlg-text { margin: 6px 0 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
.dlg-opts { display: grid; gap: 6px; }
.dlg-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); padding: 7px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.dlg-opt:hover:not(:disabled) { border-color: var(--edge-strong); background: rgba(255, 214, 140, 0.1); }
.dlg-opt:disabled { opacity: 0.45; cursor: default; }
.dlg-opt .n { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #2a1d10; background: rgba(255, 210, 122, 0.85); }
.dlg-opt .l { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.dlg-opt .l small { display: block; font-size: 11px; color: var(--muted); }
.dlg-opt .r { flex: none; font-size: 12.5px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.dlg-opt.ghost { background: none; }
.dlg-opt.ghost .n { background: rgba(255, 255, 255, 0.18); color: var(--text); }

/* หน้าต่างร้านค้า */
.shop, .stor {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column;
  pointer-events: auto; background: rgba(26, 19, 38, 0.94); z-index: 3;
}
.shop { width: 470px; }
.stor { width: 560px; overflow: auto; }
.shop[hidden], .stor[hidden] { display: none; }
.shop-tabs { margin: 10px 0 8px; }
.shop-list { display: grid; gap: 4px; align-content: start; overflow-y: auto; min-height: 120px; flex: 1 1 auto; padding: 1px; }
.sh-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 9px;
  padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
}
.sh-row:hover { background: rgba(255, 255, 255, 0.07); }
.sh-row.sel { border-color: rgba(255, 210, 122, 0.6); background: rgba(255, 214, 140, 0.1); }
.sh-row img { width: 36px; height: 36px; cursor: pointer; border-radius: 7px; background: rgba(0, 0, 0, 0.22); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35)); }
.sh-info { min-width: 0; cursor: pointer; }
.sh-info b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-info small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-info small .bad { color: #ff8a8a; }
.sh-price { text-align: right; font-variant-numeric: tabular-nums; }
.sh-price b { display: block; font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.sh-price small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.shop-msg { margin: 6px 0 0; min-height: 1.45em; font-size: 12px; color: #ffd27a; }
.shop-msg.bad { color: #ff8a8a; }
.shop-foot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--edge); display: grid; gap: 8px; }
.shop-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-sum b { color: var(--text); font-size: 14px; }
.shop-sum .st b { color: var(--gold); font-size: 16px; }
.shop-btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.shop-btns #shopOk { min-width: 92px; }
.shop-btns [hidden] { display: none; }

/* หน้าต่างคลังเก็บของ */
.stor-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.stor-col h3 { margin: 0 0 6px; font-family: var(--display); font-size: 13px; letter-spacing: 0.03em; color: var(--gold); }
.stor-col h3 small { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.stor-grid { max-height: 232px; min-height: 0; }
.stor-grid .slot.empty { cursor: default; }
.stor-act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--edge); min-height: 44px; }
.stor-act .hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.stor-act img { width: 38px; height: 38px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.sa-info { flex: 1; min-width: 120px; }
.sa-info b { display: block; font-size: 13.5px; font-weight: 500; }
.sa-info small { font-size: 11px; color: var(--muted); }
.stor-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

body.touch .dlg { z-index: 5; }
@media (max-width: 600px) {
  .dlg { left: 8px; right: 8px; width: auto; transform: none; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 70%; z-index: 5; }
  .dlg-opt { padding: 10px 10px; }
  .shop, .stor { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 82%; z-index: 4; padding: 10px 12px; }
  .sh-row { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 4px; }
  .sh-row .stepper { grid-column: 2 / -1; justify-self: end; }
  .stepper button { width: 32px; height: 32px; }
  .stor-body { grid-template-columns: 1fr; gap: 8px; }
  .stor-grid { max-height: 20vh; }
  .shop-btns button, .stor-foot button, .stor-act .go { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) { .dlg { animation: none; } }

/* ===== v0.6: อาชีพ · สกิล · บัฟ ===== */
.char-btns .status-btn kbd { display: none; }
.char-btns { gap: 5px; }
.char-btns .status-btn { padding: 4px 2px; font-size: 11.5px; }
.crest[data-job="swordsman"] { background: radial-gradient(circle at 35% 30%, #ffd0c0, #e0684a 60%, #8a2e1e); }
.crest[data-job="mage"] { background: radial-gradient(circle at 35% 30%, #efe0ff, #9a6ae0 60%, #4a2a8a); }
.crest[data-job="archer"] { background: radial-gradient(circle at 35% 30%, #e6ffd8, #6ac05a 60%, #2a6a2a); }
.crest[data-job="acolyte"] { background: radial-gradient(circle at 35% 30%, #fffbe8, #f0d070 60%, #a87a1e); }
/* v0.31: อาชีพขั้นที่ 2 — ขอบทองคู่ */
.crest[data-job="knight"] { background: radial-gradient(circle at 35% 30%, #e6f0ff, #4a7ad8 60%, #1a2a6a); box-shadow: 0 0 0 2px #ffe08a, 0 0 10px #7ab4ff; }
.crest[data-job="wizard"] { background: radial-gradient(circle at 35% 30%, #f4e8ff, #8a4ae0 60%, #2a0a5a); box-shadow: 0 0 0 2px #ffe08a, 0 0 10px #b07aff; }
.crest[data-job="hunter"] { background: radial-gradient(circle at 35% 30%, #eaffea, #3aa05a 60%, #12401e); box-shadow: 0 0 0 2px #ffe08a, 0 0 10px #6ad08a; }
.crest[data-job="priest"] { background: radial-gradient(circle at 35% 30%, #ffffff, #f8e090 60%, #b08a2a); box-shadow: 0 0 0 2px #ffffff, 0 0 12px #ffe9a0; }

.dlg-text { white-space: pre-line; }
.dlg-opt.primary { border-color: rgba(255, 233, 176, 0.85); background: linear-gradient(rgba(255, 233, 176, 0.28), rgba(224, 166, 64, 0.22)); }
.dlg-opt.primary .l { font-weight: 600; color: #fff3d0; }

.st-bonus { margin-left: 3px; font-size: 11px; font-weight: 500; color: #8fe08a; }

/* ตัวอักษรลอยของสกิล */
.dmg.skillname { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: 0; -webkit-text-stroke-width: 0; color: #fff3c4; background: none; text-shadow: 0 1px 0 #2a1a00, 0 0 6px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 200, 90, 0.6); filter: none; }
.dmg.buff { font-family: var(--font); font-weight: 600; font-size: 16px; letter-spacing: 0; -webkit-text-stroke-width: 0; color: #ffe08a; background: none; text-shadow: 0 1px 0 #2a1a00, 0 0 6px rgba(0, 0, 0, 0.85); filter: none; }
.dmg.hit.magic { background-image: linear-gradient(#ffffff 30%, #efe0ff 60%, #c8a6ff); -webkit-text-stroke-color: #2a1640; }
.dmg.status { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: 0; -webkit-text-stroke-width: 0; background: none; filter: none; text-shadow: 0 1px 0 #10202a, 0 0 6px rgba(0, 0, 0, 0.85); }
.dmg.status.ice { color: #bfeeff; }
.dmg.status.stun { color: #ffe08a; }

/* แถบร่ายสกิลเหนือหัว */
.castbar { position: absolute; left: 0; top: 0; width: 84px; pointer-events: none; will-change: transform; text-align: center; }
.castbar[hidden] { display: none; }
.castbar span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; color: #fff6dc; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.8); }
.castbar b { display: block; height: 7px; border-radius: 4px; background: rgba(10, 6, 14, 0.75); box-shadow: 0 0 0 1px rgba(255, 220, 140, 0.45); overflow: hidden; }
.castbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff1b8, #ffb03a); }

/* บัฟข้างกรอบตัวละคร */
.buffs { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 268px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.buff { position: relative; width: 32px; text-align: center; }
.buff img { display: block; width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 220, 140, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); }
.buff span { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.buff.ending img { animation: buff-blink 0.8s ease-in-out infinite; }
@keyframes buff-blink { 50% { opacity: 0.4; } }

/* ปุ่มลัดสกิล: คูลดาวน์หมุน + SP ไม่พอ */
.hk .cdw { position: absolute; inset: 0; border-radius: 7px; opacity: 0; pointer-events: none; --k: 0; background: conic-gradient(rgba(10, 6, 16, 0.72) calc(var(--k) * 360deg), transparent 0); }
.hk.skill .qty { font-size: 9.5px; color: #ffe9a0; }
.hk.nosp img { filter: grayscale(0.7) brightness(0.7); }
.hk.nosp::after { content: 'SP'; position: absolute; right: 2px; top: 1px; font-size: 8.5px; font-weight: 700; color: #7fb8ff; text-shadow: 0 0 3px #000; }
.hk.casting { border-color: #ffe08a; box-shadow: 0 0 10px rgba(255, 210, 122, 0.6); }
.hk img { border-radius: 6px; }

/* หน้าต่างสกิล */
.skw {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 480px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column;
  pointer-events: auto; background: rgba(26, 19, 38, 0.94); z-index: 3;
}
.skw[hidden] { display: none; }
.skw-tabs { margin: 10px 0 8px; }
.skw-list { display: grid; gap: 6px; overflow-y: auto; min-height: 120px; flex: 1 1 auto; padding: 1px; align-content: start; }
.sk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.sk-row.learned { background: rgba(255, 214, 140, 0.06); border-color: rgba(255, 210, 122, 0.22); }
.sk-row.unlearned .sk-ico { filter: grayscale(0.75) brightness(0.8); }
.sk-ico { width: 44px; height: 44px; border-radius: 10px; }
.sk-row.active.learned .sk-ico { cursor: grab; }
.sk-title { display: flex; align-items: baseline; gap: 8px; }
.sk-title b { font-size: 14px; font-weight: 600; }
.sk-lv { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.sk-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sk-eff, .sk-next, .sk-req { font-size: 12px; line-height: 1.45; margin-top: 3px; }
.sk-eff { color: #b9f0b0; }
.sk-next { color: #e8dcf2; }
.sk-next.max { color: var(--gold); }
.sk-eff em, .sk-next em { font-style: normal; font-size: 10.5px; padding: 0 5px; margin-right: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: var(--muted); }
.sk-req.bad { color: #ff8a8a; }
.sk-req.ok { color: var(--muted); }
.sk-act { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.sk-plus, .sk-key {
  font: inherit; cursor: pointer; color: var(--text); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.07);
}
.sk-plus { width: 40px; height: 32px; font-size: 18px; font-weight: 600; color: #2a1d10; border-color: rgba(255, 233, 176, 0.8); background: linear-gradient(#ffe9b0, #e0a640); }
.sk-plus:disabled { color: var(--muted); background: rgba(255, 255, 255, 0.06); border-color: transparent; cursor: default; }
.sk-key { font-size: 11px; padding: 3px 4px; }
.sk-plus:focus-visible, .sk-key:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sk-free { font-size: 11px; color: var(--gold); text-align: center; padding: 6px 0; }
.sk-keys { grid-column: 1 / -1; }
.skw.has-points .pts b { color: var(--gold); }
.skw-job { font-size: 11.5px; }
.skw .st-hint { min-height: 2.9em; }

@media (max-width: 600px) {
  .buffs { left: 212px; }
  .buff, .buff img { width: 28px; }
  .buff img { height: 28px; }
  .skw { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 80%; z-index: 4; padding: 10px 12px; }
  .sk-plus { width: 44px; height: 38px; }
  .sk-key { padding: 7px 4px; }
}
@media (prefers-reduced-motion: reduce) { .buff.ending img { animation: none; } }

/* ===== v0.7: Whisperwood Forest · บอส MVP ===== */
.bossbar {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(84px + env(safe-area-inset-top, 0px));
  width: min(440px, calc(100% - 560px)); min-width: 260px; box-sizing: border-box; padding: 8px 12px 9px;
  border-color: rgba(255, 120, 120, 0.55); background: rgba(40, 14, 22, 0.78);
}
.bossbar[hidden] { display: none; }
.bb-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.bb-head b { flex: 1; min-width: 0; font-weight: 600; color: #ffd7d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-head span:last-child { font-size: 12px; color: var(--muted); }
.bb-tag { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: #2a1d10; padding: 1px 6px; border-radius: 5px; background: linear-gradient(#ffe9b0, #e0a640); }
.bossbar .bb-bar { margin-top: 6px; height: 11px; }
.bossbar .bb-bar > i { background: linear-gradient(#ff8a7a, #c8243a); transition: width 0.15s; }
.bossbar.enraged { animation: boss-rage 0.9s ease-in-out infinite; }
.bossbar.enraged .bb-bar > i { background: linear-gradient(#ffb36b, #e8401a); }
@keyframes boss-rage { 50% { box-shadow: 0 0 18px rgba(255, 60, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } }
.bb-hp { margin-top: 3px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tag-mvp { color: #ffe08a; background: rgba(70, 14, 24, 0.75); box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.45); }
.hpbar-mvp { width: 96px; height: 8px; }
.dmg.taken.big { font-size: 38px; background-image: linear-gradient(#fff0d0 10%, #ff8a3a 55%, #c81e2a); }
.dmg.mvp { font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: 0.08em; background-image: linear-gradient(#fffbe0 10%, #ffd36b 50%, #e07a1a); }
.dmg.status.root { color: #e8c890; }
@media (max-width: 900px) {
  .bossbar { width: auto; left: 12px; right: 12px; transform: none; min-width: 0; top: calc(276px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 600px) {
  .bossbar { top: calc(234px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; padding: 6px 10px; }
}

/* หน้าจอโหลด — v0.44.6 ภาพเมืองเป็นฉากหลัง · โลโก้ · แถบทอง-น้ำเงินพร้อมปาร์ตี้ 4 อาชีพวิ่งตาม */
.loading {
  position: absolute; inset: 0; z-index: 60; overflow: hidden; text-align: center; color: #f4e9d1;
  background: #120d1c; transition: opacity 0.8s ease, visibility 0.8s;
}
.ld-bg { position: absolute; inset: -3%; background: #1a1026 url('../assets/brand/title_bg.jpg') center 70% / cover no-repeat; animation: ldZoom 24s ease-in-out infinite alternate; }
.ld-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 55% at 50% 38%, rgba(18, 12, 30, 0.15), rgba(10, 8, 20, 0.7) 75%),
  linear-gradient(180deg, rgba(10, 8, 22, 0.55) 0%, rgba(10, 8, 22, 0.05) 30%, rgba(8, 10, 26, 0.35) 62%, rgba(6, 8, 20, 0.92) 100%); }
.ld-sparks { position: absolute; inset: 0; pointer-events: none; }
.ld-sparks i { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 8px 2px rgba(255, 210, 120, 0.7);
  transform: scale(var(--s, 1)); opacity: 0; animation: ldSpark 9s linear infinite; }
.ld-center { position: absolute; left: 50%; top: 34%; translate: -50% -50%; width: min(760px, 88vw); display: grid; justify-items: center; gap: 10px; }
.ld-logo { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(40, 18, 6, 0.55)) drop-shadow(0 0 26px rgba(255, 190, 90, 0.35)); animation: ldGlow 3.2s ease-in-out infinite; }
.ld-tag { margin: 0; padding: 6px 18px; border-radius: 999px; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: 0.04em; color: #fff3d2;
  background: linear-gradient(90deg, rgba(14, 18, 44, 0), rgba(14, 18, 44, 0.78) 18%, rgba(14, 18, 44, 0.78) 82%, rgba(14, 18, 44, 0)); text-shadow: 0 1px 2px #000; }
.ld-foot { position: absolute; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: min(640px, calc(100% - 48px)); display: grid; gap: 8px; }
.ld-track { position: relative; padding-top: 74px; }
.ld-party { position: absolute; top: 4px; left: 0; translate: -100% 0; display: flex; align-items: flex-end; transition: left 0.25s linear; }
.ld-hero { display: block; width: 83px; height: 71px; margin-right: -38px; background: no-repeat 0 0 / 664px 71px; image-rendering: pixelated; animation: ldRun 0.72s steps(8) infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55)); }
.ld-hero:last-child { margin-right: -22px; }
.ld-hero.h-swordsman { background-image: url('../assets/ui/loading/run_swordsman.png'); }
.ld-hero.h-archer { background-image: url('../assets/ui/loading/run_archer.png'); animation-delay: -0.18s; }
.ld-hero.h-mage { background-image: url('../assets/ui/loading/run_mage.png'); animation-delay: -0.36s; }
.ld-hero.h-acolyte { background-image: url('../assets/ui/loading/run_acolyte.png'); animation-delay: -0.54s; }
.ld-bar { position: relative; height: 16px; border-radius: 10px; padding: 3px; box-sizing: border-box;
  background: linear-gradient(#0d1430, #1b2550); border: 2px solid #c99a4a;
  box-shadow: 0 0 0 1px #3a2610, inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 190, 90, 0.18); }
.ld-bar::before, .ld-bar::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; translate: 0 -50%; rotate: 45deg; background: linear-gradient(135deg, #fff1c0, #d9a441 55%, #8a5a1c); border: 1px solid #3a2610; }
.ld-bar::before { left: -11px; } .ld-bar::after { right: -11px; }
.ld-fill { display: block; height: 100%; width: 0; border-radius: 6px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff2b8 0%, #ffcf5a 45%, #e08a1e 100%); box-shadow: 0 0 10px rgba(255, 200, 90, 0.7); }
.ld-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, 0.75) 48%, transparent 60%); background-size: 200% 100%; animation: ldShine 1.6s linear infinite; }
.ld-gem { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffffff 0 18%, rgba(255, 230, 150, 0.9) 30%, rgba(255, 180, 60, 0) 70%); animation: ldPulse 1s ease-in-out infinite; }
.ld-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; }
.ld-step { font-size: 14px; color: #e9dcbf; letter-spacing: 0.03em; text-shadow: 0 1px 3px #000; }
.ld-pct { font-family: var(--display); font-size: 18px; font-weight: 700; color: #ffd982; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #4a2a0a, 0 0 10px rgba(255, 190, 90, 0.4); }
.ld-tip { margin: 2px 0 0; font-size: 13px; color: #cfc4ad; line-height: 1.5; text-shadow: 0 1px 2px #000; min-height: 2.6em; }
.ld-tip b { display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #2a1d10; background: linear-gradient(#ffe9b0, #e0a640); }
@keyframes ldRun { to { background-position: -664px 0; } }
@keyframes ldZoom { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
@keyframes ldGlow { 50% { filter: drop-shadow(0 6px 0 rgba(40, 18, 6, 0.55)) drop-shadow(0 0 40px rgba(255, 200, 110, 0.6)); } }
@keyframes ldShine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes ldPulse { 50% { transform: scale(1.35); opacity: 0.7; } }
@keyframes ldSpark { 0% { opacity: 0; transform: translateY(0) scale(var(--s, 1)); } 12% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-78vh) translateX(30px) scale(var(--s, 1)); } }
@media (max-height: 480px) {
  .ld-center { top: 30%; width: min(520px, 70vw); }
  .ld-foot { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .ld-track { padding-top: 60px; } .ld-hero { transform: scale(0.85); transform-origin: bottom center; }
  .ld-tip { display: none; }
}
/* เก่า: ยังใช้ชื่อคลาสเดิมบางส่วน */
.loading-sub { color: var(--muted); }
#game.ready .loading { opacity: 0; visibility: hidden; }

.fatal { position: absolute; left: 16px; right: 16px; top: 45%; z-index: 5; padding: 16px; background: var(--panel-solid); border: 1px solid var(--hp); border-radius: 10px; text-align: center; }

@media (max-width: 600px) {
  .char { width: 196px; padding: 8px 10px; gap: 8px; }
  .crest { width: 36px; height: 36px; font-size: 16px; }
  .char .name { font-size: 15px; }
  #minimap { width: 104px; height: 78px; }
  .banner { font-size: 30px; }
  .banner small { font-size: 13px; }
  .target { top: calc(170px + env(safe-area-inset-top, 0px)); width: 200px; min-width: 0; }
  .status { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 72%; z-index: 4; }
  .st-body { grid-template-columns: 1fr; }
  .st-derived { grid-template-columns: 1fr 1fr; column-gap: 10px; }
}
@media (max-width: 900px) and (min-width: 601px) { .target { top: calc(210px + env(safe-area-inset-top, 0px)); width: 220px; } }
@media (prefers-reduced-motion: reduce) {
  .banner, .loading { transition: none; }
  .ld-bg, .ld-logo, .ld-fill::after, .ld-gem, .ld-sparks i { animation: none; }
}

/* ================= v0.9 แฟชั่น: กล่องสุ่ม · ตู้แฟชั่น ================= */
/* ปุ่มบนแผงตัวละคร 4 ปุ่ม → 2 แถว */
.char-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.char-btns .status-btn { padding: 3px 4px; }
body:not(.touch) .char-btns .status-btn kbd { display: inline; }
.status-btn.ward-btn { background: linear-gradient(100deg, rgba(255, 138, 216, 0.16), rgba(138, 240, 255, 0.16)); border-color: rgba(255, 200, 240, 0.45); }

/* สีตามระดับแฟชั่น (แชต · ตัวหนังสือลอย) */
.chat .f-common { color: #d8dee8; }
.chat .f-rare { color: #6fc8ff; }
.chat .f-epic { color: #c08aff; font-weight: 500; }
.chat .f-legend { color: #ffb347; font-weight: 600; }
.chat .f-mythic, .chat .f-celestial { font-weight: 600; color: transparent; background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: flow1 4s linear infinite; }
.chat .f-mythic { background-image: linear-gradient(110deg, #ff3a5a, #ffb347, #ff3a5a, #ff7a9a, #ff3a5a); }
.chat .f-celestial { background-image: linear-gradient(110deg, #8af0ff, #fff2b0, #ff9ad8, #b48cff, #8af0ff); }
.dmg.loot.f-legend { color: #ffb347; font-size: 20px; }
.dmg.loot.f-mythic { color: #ff5a78; font-size: 24px; font-family: 'Lilita One', var(--display); letter-spacing: 0.04em; }
.dmg.loot.f-celestial { color: #a8f4ff; font-size: 26px; font-family: 'Lilita One', var(--display); letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(138, 240, 255, 0.9), 0 1px 0 #1c1222; }
@keyframes flow1 { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@keyframes ringflow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } }
@keyframes sheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
@keyframes thumb-wait { from { opacity: 0.35; } to { opacity: 0.8; } }

/* ป้ายระดับ (ใช้ทั้งตู้แฟชั่นและหน้าต่างเปิดกล่อง) */
.g-rar { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5; padding: 0 9px; border-radius: 999px; color: #1a1022; background: var(--rc, #c8d0dc); }
.g-rar[data-rarity="common"] { --rc: #c8d0dc; } .g-rar[data-rarity="rare"] { --rc: #6fc8ff; } .g-rar[data-rarity="epic"] { --rc: #c08aff; } .g-rar[data-rarity="legend"] { --rc: #ffb347; }
.g-rar[data-rarity="mythic"], .g-rar[data-rarity="celestial"] { background-size: 300% 100%; animation: flow1 4s linear infinite; }
.g-rar[data-rarity="mythic"] { background-image: linear-gradient(110deg, #ff3a5a, #ffb347, #ff3a5a, #a81a4a, #ff3a5a); color: #fff; }
.g-rar[data-rarity="celestial"] { background-image: linear-gradient(110deg, #8af0ff, #fff2b0, #ff9ad8, #b48cff, #8af0ff); }

/* ตารางโอกาสในรายละเอียดกล่อง */
.d-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.d-odds span { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--rc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); font-variant-numeric: tabular-nums; }
.d-odds b { font-weight: 500; color: var(--rc); }

/* ---------- ตู้แฟชั่น ---------- */
.ward {
  position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); width: 520px; max-width: calc(100% - 24px);
  max-height: calc(100% - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; box-sizing: border-box; padding: 12px 14px;
  pointer-events: auto; background: rgba(26, 19, 38, 0.96); z-index: 4;
  display: flex; flex-direction: column;
}
.ward > * { flex-shrink: 0; }
.ward > .ward-grid { flex-shrink: 1; }
.ward[hidden] { display: none; }
.ward-worn { display: grid; grid-template-columns: repeat(2, 72px); gap: 5px; margin-top: 10px; }
.wslot { --rc: #a8b4c8; aspect-ratio: 1; padding: 0; cursor: pointer; font: inherit; color: var(--text); display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: rgba(0, 0, 0, 0.25); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); }
.wslot img { width: 100%; height: 100%; object-fit: cover; }
.wslot img:not([src]) { animation: thumb-wait 1.1s ease-in-out infinite alternate; }
.wslot.empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.16); }
.wslot.empty span { font-size: 10px; color: var(--muted); line-height: 1.1; padding: 0 2px; text-align: center; }
.wslot.off img { filter: grayscale(0.85) brightness(0.55); }
.wslot:hover { border-color: var(--gold); }
.wslot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ward-tabs { margin-top: 9px; flex-wrap: wrap; }
.ward-tabs button { flex: 1 0 auto; padding: 3px 7px; }
.ward-bar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin: 0 2px 6px; }
.ward-bar label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.ward-bar input { accent-color: #e0a640; }
.ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 340px; min-height: 104px; overflow-y: auto; padding: 2px; align-content: start; }
.wcell {
  --rc: #a8b4c8; position: relative; cursor: pointer; display: grid; justify-items: center; gap: 1px; padding: 5px 3px; min-width: 0;
  border-radius: 10px; text-align: center; font: inherit; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, transparent), rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
}
.wcell:hover { border-color: var(--rc); }
.wcell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.wcell img { width: 64px; height: 64px; border-radius: 8px; background: radial-gradient(circle at 50% 45%, #4a3c6e, #1b1529 75%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }
.wcell img:not([src]) { animation: thumb-wait 1.1s ease-in-out infinite alternate; }
.wcell b { font-size: 11px; font-weight: 500; line-height: 1.25; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }
.wcell small { font-size: 10px; color: var(--rc); }
.wcell.locked img { filter: grayscale(1) brightness(0.42); }
.wcell.locked b { color: var(--muted); }
.w-lock { position: absolute; top: 5px; right: 6px; font-style: normal; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.w-lock::before { content: '🔒'; }
.w-on { position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 9.5px; font-weight: 600; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #2a1d10; }
.wcell.worn { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.5); }
.wcell.sel { outline: 2px solid var(--gold); outline-offset: 1px; background-color: rgba(255, 214, 140, 0.1); }
.wcell.set.full { box-shadow: inset 0 0 12px color-mix(in srgb, var(--rc) 40%, transparent); }
.wcell[data-rarity="mythic"]:not(.locked), .wcell[data-rarity="celestial"]:not(.locked),
.g-card[data-rarity="mythic"], .g-card[data-rarity="celestial"] {
  border: 1.5px solid transparent; background: linear-gradient(180deg, var(--card-top), #1c1430) padding-box, var(--ring) border-box;
  background-size: 100% 100%, 300% 100%; animation: ringflow 4s linear infinite;
}
.wcell[data-rarity="mythic"], .g-card[data-rarity="mythic"] { --card-top: #3a1424; --ring: linear-gradient(110deg, #ff3a5a, #ffb347, #ff3a5a, #a81a4a, #ff3a5a); }
.wcell[data-rarity="celestial"], .g-card[data-rarity="celestial"] { --card-top: #14304a; --ring: linear-gradient(110deg, #8af0ff, #fff2b0, #ff9ad8, #b48cff, #8af0ff); }
.wcell[data-rarity="mythic"]:not(.locked)::before, .wcell[data-rarity="celestial"]:not(.locked)::before,
.g-card[data-rarity="mythic"]::before, .g-card[data-rarity="celestial"]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 3.2s ease-in-out infinite;
}
.ward-detail { min-height: 70px; }
.wd-head { display: flex; gap: 10px; align-items: center; }
.wd-head img { width: 72px; height: 72px; flex: none; border-radius: 10px; background: radial-gradient(circle at 50% 45%, #4a3c6e, #1b1529 75%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent); }
.wd-head img.locked { filter: grayscale(1) brightness(0.5); }
.wd-name { display: block; font-size: 15px; font-weight: 600; color: var(--rc); }
.wd-en { display: block; font-size: 11px; color: var(--muted); font-family: var(--display); letter-spacing: 0.03em; }
.wd-tags { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.wd-own { margin: 6px 0 0; color: #b9f0b0; font-size: 12px; }
.wd-lock { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.wd-note { margin: 4px 0 0; color: #ffd27a; font-size: 11.5px; }
.wd-set { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12px; }
.wd-set li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 4px; cursor: pointer; color: var(--muted); }
.wd-set li.ok { color: var(--text); }
.wd-set li i { font-style: normal; font-size: 10px; grid-row: span 2; padding-top: 2px; }
.wd-set li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-set li small { font-size: 10px; color: var(--rc); }
.wd-set li:hover span { text-decoration: underline; }
.d-actions button:disabled { opacity: 0.45; cursor: default; }
.ward-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 11.5px; color: var(--muted); }
.ward-foot span { margin-left: auto; }
.ward-foot button { font: inherit; font-size: 12px; color: var(--text); cursor: pointer; padding: 3px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); }
.ward-foot button:hover { border-color: var(--edge-strong); }
.ward-foot button[aria-pressed="true"] { color: var(--gold); border-color: var(--edge-strong); }
@media (max-width: 600px) {
  .ward { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 82%; z-index: 4; padding: 10px 12px; }
  .ward-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); max-height: 190px; }
  .wcell img { width: 54px; height: 54px; }
  .ward-foot span { display: none; }
}
@media (max-height: 560px) {
  .ward { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 16px); z-index: 4; padding: 8px 12px; }
  .ward-worn { grid-template-columns: repeat(2, 56px); margin-top: 6px; }
  .ward-tabs { margin-top: 6px; }
  .ward-grid { max-height: 150px; }
}

/* ---------- หน้าต่างเปิดกล่องแฟชั่น ---------- */
.gacha {
  --gc: #ffffff; --shake: 0.3s;
  position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 42%, rgba(46, 30, 70, 0.8), rgba(8, 4, 14, 0.93) 70%);
  font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none;
}
.gacha[hidden] { display: none; }
.g-rays {
  position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 30%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 42%); mask-image: radial-gradient(circle, #000 0%, transparent 42%);
  opacity: 0.4; animation: g-spin 16s linear infinite; transition: opacity 0.4s;
}
.gacha.reveal .g-rays { opacity: 0.75; }
.gacha.t-mythic .g-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 58, 90, 0.42) 0deg 6deg, transparent 6deg 12deg, rgba(255, 179, 71, 0.32) 12deg 18deg, transparent 18deg 26deg); animation-duration: 9s; }
.gacha.t-celestial .g-rays { background: repeating-conic-gradient(from 0deg, rgba(138, 240, 255, 0.45) 0deg 5deg, transparent 5deg 10deg, rgba(255, 154, 216, 0.4) 10deg 15deg, transparent 15deg 20deg, rgba(255, 242, 176, 0.45) 20deg 25deg, transparent 25deg 30deg, rgba(180, 140, 255, 0.4) 30deg 35deg, transparent 35deg 40deg); animation-duration: 7s; }
.g-stage { position: absolute; left: 50%; top: 42%; width: 200px; height: 200px; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.g-box { position: relative; z-index: 1; width: 180px; height: 180px; filter: drop-shadow(0 0 16px var(--gc)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); animation: g-shake var(--shake) linear infinite; transition: filter 0.25s; }
.gacha[data-lvl="4"] .g-box, .gacha[data-lvl="5"] .g-box, .gacha[data-lvl="6"] .g-box { filter: drop-shadow(0 0 26px var(--gc)) drop-shadow(0 0 8px #fff); }
.gacha.reveal .g-box { animation: g-pop 0.5s ease-out forwards; }
.g-ring { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 55%, transparent) 0%, transparent 62%); animation: g-breathe 0.8s ease-in-out infinite alternate; }
.gacha.pulse .g-ring { animation: g-pulse 0.5s ease-out; }
.gacha.reveal .g-ring { opacity: 0; transition: opacity 0.6s; }
.gacha.t-mythic.suspense .g-stage, .gacha.t-celestial.suspense .g-stage { animation: g-quake 0.12s linear infinite; }
.g-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, #ffffff 0%, color-mix(in srgb, var(--gc) 70%, transparent) 30%, transparent 70%); }
.gacha.reveal .g-flash { animation: g-flash 1s ease-out; }
.gacha.t-celestial.reveal .g-flash, .gacha.t-mythic.reveal .g-flash { animation-duration: 1.6s; }
.g-sparks { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.g-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.55); animation: g-spark 1s ease-out forwards; }
.g-result { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; max-width: 100%; }
.gacha.suspense .g-result, .gacha.suspense .g-actions { display: none; }
.g-hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; font-size: 12.5px; color: var(--muted); letter-spacing: 0.08em; animation: thumb-wait 1s ease-in-out infinite alternate; }
.g-hint[hidden] { display: none; }
.g-card {
  --rc: #c8d0dc; position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 7px; min-width: 0; text-align: center; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, #1c1430), #160f22); border: 1.5px solid var(--rc);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent); animation: g-card-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.g-card[data-rarity="mythic"], .g-card[data-rarity="celestial"] { animation: g-card-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, ringflow 4s linear infinite; }
.g-card.big { width: min(300px, 82vw); padding: 14px 14px 12px; gap: 4px; border-radius: 16px; box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.g-card[data-rarity="mythic"], .g-card[data-rarity="celestial"] { box-shadow: 0 0 46px color-mix(in srgb, var(--rc) 60%, transparent); }
.g-card .g-thumb { width: min(200px, 56vw); height: min(200px, 56vw); border-radius: 12px; background: radial-gradient(circle at 50% 45%, #4a3c6e, #1b1529 75%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
.g-card .g-thumb:not([src]) { animation: thumb-wait 1s ease-in-out infinite alternate; }
.g-name { margin-top: 3px; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--rc); }
.g-card[data-rarity="mythic"] .g-name, .g-card[data-rarity="celestial"] .g-name { color: transparent; background: var(--ring); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: flow1 4s linear infinite; }
.g-en { font-family: var(--display); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.g-slot { font-size: 12px; color: var(--muted); }
.g-dup { margin: 4px 0 0; font-size: 12.5px; color: var(--text); }
.g-dup b { color: var(--gold); }
.g-note { margin: 2px 0 0; font-size: 11.5px; color: #ffd27a; }
.g-new { position: absolute; z-index: 2; top: -10px; right: -8px; padding: 1px 10px; border-radius: 999px; font-family: 'Lilita One', var(--display); font-size: 15px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(#ff7a8a, #e8384f); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); transform: rotate(8deg); animation: g-new 0.9s ease-in-out infinite alternate; }
.g-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 96px)); gap: 8px; width: min(520px, 92vw); justify-content: center; }
.g-grid .g-card img { width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 8px; background: radial-gradient(circle at 50% 45%, #4a3c6e, #1b1529 75%); }
.g-grid .g-card img:not([src]) { animation: thumb-wait 1s ease-in-out infinite alternate; }
.g-grid .g-card small { font-size: 10px; font-weight: 600; color: var(--rc); }
.g-grid .g-card b { font-size: 11px; font-weight: 500; line-height: 1.25; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; }
.g-grid .g-card em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.g-grid .g-new { font-size: 11px; top: -7px; right: -5px; padding: 0 6px; }
.g-sum { margin: 2px 0 0; font-size: 13px; color: var(--text); }
.g-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; }
.g-actions button { font: inherit; font-size: 14px; color: var(--text); cursor: pointer; padding: 7px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.g-actions button:hover { border-color: var(--edge-strong); background: rgba(255, 214, 140, 0.12); }
.g-actions button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.g-actions .primary { color: #2a1d10; font-weight: 600; border-color: rgba(255, 233, 176, 0.85); background: linear-gradient(#ffe9b0, #e0a640); }
.g-actions .again { border-color: rgba(255, 200, 240, 0.55); background: linear-gradient(100deg, rgba(255, 138, 216, 0.2), rgba(138, 240, 255, 0.2)); }
.g-actions .ghost { color: var(--muted); background: none; }
@keyframes g-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes g-shake { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-7deg) translateY(-3px); } 40% { transform: rotate(6deg) translateY(1px); } 60% { transform: rotate(-4deg) translateY(-2px); } 80% { transform: rotate(5deg) translateY(0); } }
@keyframes g-pop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35); opacity: 1; filter: brightness(3) drop-shadow(0 0 30px var(--gc)); } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes g-breathe { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.08); opacity: 1; } }
@keyframes g-pulse { 0% { transform: scale(0.7); opacity: 1; filter: brightness(2); } 100% { transform: scale(1.15); opacity: 0.85; } }
@keyframes g-quake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% + 3px), calc(-50% - 2px)); } 50% { transform: translate(calc(-50% - 3px), calc(-50% + 2px)); } 75% { transform: translate(calc(-50% + 2px), calc(-50% + 3px)); } }
@keyframes g-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes g-spark { 0% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; } }
@keyframes g-card-in { 0% { transform: scale(0.3) rotateY(80deg); opacity: 0; } 100% { transform: scale(1) rotateY(0); opacity: 1; } }
@keyframes g-new { from { transform: rotate(8deg) scale(1); } to { transform: rotate(4deg) scale(1.12); } }
@media (max-width: 600px) {
  .g-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .g-grid .g-card b { font-size: 10px; }
  .g-grid .g-card em { display: none; }
  .g-actions button { font-size: 13px; padding: 6px 12px; }
}
@media (max-height: 560px) {
  .gacha { gap: 8px; }
  .g-card .g-thumb { width: 130px; height: 130px; }
  .g-card.big { padding: 8px 12px 8px; gap: 1px; }
  .g-name { font-size: 16px; }
  .g-grid .g-card img { max-width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-rays, .g-box, .g-ring, .gacha .g-stage { animation: none !important; }
}

/* ================= v0.10 เควส · ตีบวก · การ์ด · รีเซ็ตสเตตัส ================= */
/* ปุ่มบนแผงตัวละคร 5 ปุ่ม */
.status-btn.quest-btn { background: linear-gradient(100deg, rgba(255, 210, 122, 0.2), rgba(255, 160, 90, 0.12)); }
.char-btns { grid-template-columns: repeat(3, 1fr); }
.char-btns .status-btn { font-size: 11.5px; padding: 3px 2px; }
body:not(.touch) .char-btns .status-btn kbd { display: none; }
body.touch .char-btns .status-btn { font-size: 11px; }

/* เครื่องหมายเควสเหนือหัว NPC */
.tag-npc { position: absolute; }
.tag-npc .qm {
  --o: #3a2208;
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px);
  font: 900 30px/1 'Lilita One', 'Arial Black', 'Kanit', sans-serif; color: #ffd23a;
  text-shadow: -2px 0 var(--o), 2px 0 var(--o), 0 -2px var(--o), 0 2px var(--o), -2px -2px var(--o), 2px 2px var(--o), -2px 2px var(--o), 2px -2px var(--o), 0 4px 0 var(--o), 0 0 14px rgba(255, 200, 60, 0.9);
  animation: qm-bob 1.1s ease-in-out infinite alternate; pointer-events: none;
}
.tag-npc .qm[hidden] { display: none; }
.tag-npc .qm[data-m="ready"] { color: #fff27a; font-size: 32px; }
.tag-npc .qm[data-m="daily"] { --o: #0e3a1e; color: #8affb0; }
.tag-npc .qm[data-m="wait"] { --o: #2a2030; color: #c8c0d8; font-size: 22px; animation: none; }
@keyframes qm-bob { from { transform: translate(-50%, -3px); } to { transform: translate(-50%, -9px); } }

/* ตัวเลือกเควสในกล่องสนทนา */
.dlg-opt.q-opt.new { border-color: rgba(255, 210, 60, 0.6); background: rgba(255, 210, 60, 0.1); }
.dlg-opt.q-opt.ready { border-color: rgba(140, 255, 160, 0.65); background: rgba(110, 255, 150, 0.12); }
.dlg-opt.q-opt.new .n { background: #ffd23a; }
.dlg-opt.q-opt.ready .n { background: #8affb0; }

/* แชต · ตัวหนังสือลอย */
.chat .quest { color: #ffe6a8; }
.chat .quest-ok { color: #ffd23a; font-weight: 600; }
.dmg.loot.quest { color: #ffd23a; font-family: 'Lilita One', var(--display); font-size: 22px; letter-spacing: 0.04em; }
.dmg.loot.refine-ok { color: #ffe08a; font-family: 'Lilita One', var(--display); font-size: 22px; letter-spacing: 0.03em; }
.dmg.loot.refine-bad { color: #b8b0c8; font-family: 'Lilita One', var(--display); font-size: 20px; }

/* แถบติดตามเควส (ใต้แผนที่ย่อ) */
.qtrack {
  position: absolute; right: 12px; top: calc(198px + env(safe-area-inset-top, 0px)); width: 246px; box-sizing: border-box;
  padding: 6px 8px 8px; pointer-events: auto; z-index: 2; background: rgba(28, 20, 38, 0.66);
}
.qtrack[hidden] { display: none; }
.qt-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold); background: none; border: 0; cursor: pointer; text-align: left; }
.qt-head span { font-size: 11px; color: var(--muted); font-weight: 400; }
.qt-head i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); transition: transform 0.2s; }
.qtrack.closed .qt-head i { transform: rotate(-90deg); }
.qt-list { display: grid; gap: 4px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.qt-item { --kc: #ffd27a; display: grid; gap: 1px; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); border: 0; border-left: 3px solid var(--kc); }
.qt-item:hover { background: rgba(255, 214, 140, 0.1); }
.qt-item b { font-size: 12px; font-weight: 600; color: var(--kc); }
.qt-goal { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qt-goal.ok { color: #9af0a8; }
.qt-item.ready { background: rgba(110, 255, 150, 0.12); animation: qt-glow 1.4s ease-in-out infinite alternate; }
@keyframes qt-glow { from { box-shadow: 0 0 0 rgba(140, 255, 160, 0); } to { box-shadow: 0 0 10px rgba(140, 255, 160, 0.35); } }

/* หน้าต่างเควส */
.quest {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 470px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column;
  pointer-events: auto; background: rgba(26, 19, 38, 0.95); z-index: 3;
}
.quest[hidden] { display: none; }
.q-tabs { margin: 10px 0 8px; }
.q-list { display: grid; gap: 7px; overflow-y: auto; min-height: 120px; flex: 1 1 auto; align-content: start; padding: 1px; }
.q-card { --kc: #ffd27a; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--kc); }
.q-card header { display: flex; align-items: center; gap: 7px; }
.q-card header b { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.q-kind { flex: none; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 999px; color: #1c1222; background: var(--kc); }
.q-ready { font-size: 11px; font-weight: 600; color: #8affb0; }
.q-done { color: #8affb0; }
.q-where { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.q-desc { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.q-rew { margin: 4px 0 0; font-size: 11.5px; color: #ffe6a8; }
.q-goals { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.q-goals li { position: relative; display: flex; justify-content: space-between; font-size: 12px; padding: 2px 7px 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.q-goals li i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--k); background: linear-gradient(90deg, #e0a640, #ffd27a); }
.q-goals li.ok { color: #9af0a8; }
.q-goals li.ok i { background: #8affb0; }
.q-goals em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.q-act { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.q-act button { font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; padding: 2px 10px; border-radius: 7px; background: none; border: 1px solid rgba(255, 255, 255, 0.14); }
.q-act button.danger { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.55); }
.q-card.s-ready { border-color: rgba(140, 255, 160, 0.45); background: rgba(110, 255, 150, 0.07); }
.q-card.s-done, .q-card.locked { opacity: 0.6; }
.q-card.locked .q-where { color: #ffb0a0; }

/* หน้าต่างตีบวก */
.refine {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 600px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: auto; box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column;
  pointer-events: auto; background: rgba(26, 19, 38, 0.95); z-index: 4;
}
.refine[hidden] { display: none; }
.ref-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; margin-top: 10px; min-height: 0; }
.ref-list { display: grid; gap: 4px; align-content: start; max-height: 300px; overflow-y: auto; padding: 1px; }
.ref-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: var(--text); padding: 4px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.ref-row:hover { border-color: var(--edge-strong); }
.ref-row.sel { border-color: var(--gold); background: rgba(255, 214, 140, 0.12); }
.ref-row img { width: 30px; height: 30px; }
.ref-row .rn { min-width: 0; }
.ref-row b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-row small { font-size: 10.5px; color: var(--muted); }
.ref-row em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #9af0a8; font-variant-numeric: tabular-nums; }
.ref-row em.warn { color: #ffd27a; }
.ref-row em.risk { color: #ff8a8a; }
.ref-detail { min-width: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
.ref-detail > .hint { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.ref-stage { position: relative; width: 120px; height: 130px; border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(255, 140, 60, 0.28), rgba(0, 0, 0, 0.35) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.ref-anvil { position: absolute; left: 50%; bottom: 14px; width: 70px; height: 70px; transform: translateX(-50%); display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#4a4252, #2a2430); box-shadow: 0 6px 0 #1a161e, inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.ref-anvil img { width: 52px; height: 52px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.ref-lv { position: absolute; right: -8px; top: -10px; padding: 0 6px; border-radius: 999px; font-family: 'Lilita One', var(--display); font-size: 15px; color: #2a1d10; background: linear-gradient(#ffe9b0, #e0a640); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.ref-hammer { position: absolute; right: 2px; top: 2px; width: 54px; height: 54px; transform-origin: 85% 85%; transform: rotate(20deg); }
.ref-hammer svg { width: 100%; height: 100%; }
.ref-stage.hit .ref-hammer { animation: ref-hit 0.3s ease-in 3; }
.ref-stage.hit .ref-anvil { animation: ref-shake 0.3s linear 3; }
.ref-stage.hit::after { content: ''; position: absolute; left: 50%; top: 52%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 150, 0.9), rgba(255, 140, 40, 0) 60%); animation: ref-spark 0.3s ease-out 3; }
.ref-stage.win { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 22px rgba(255, 210, 122, 0.6); animation: ref-win 0.8s ease-out; }
.ref-stage.lose { box-shadow: inset 0 0 0 2px #8a7a9a; filter: grayscale(0.4); }
.ref-stage.max .ref-lv { background: linear-gradient(#fff, #8af0ff); }
@keyframes ref-hit { 0% { transform: rotate(20deg); } 60% { transform: rotate(-35deg) translate(-6px, 10px); } 100% { transform: rotate(20deg); } }
@keyframes ref-shake { 0%, 100% { transform: translateX(-50%); } 60% { transform: translateX(calc(-50% + 2px)) translateY(2px); } }
@keyframes ref-spark { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes ref-win { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.ref-info { min-width: 0; font-size: 12.5px; }
.ref-name { display: block; font-size: 15px; font-weight: 600; color: var(--gold); }
.ref-up { margin: 4px 0 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ref-up b { color: var(--gold); }
.ref-rate { position: relative; margin-left: auto; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ref-rate::before { content: ''; position: absolute; inset: 0; width: var(--k); background: rgba(140, 255, 160, 0.25); z-index: -1; }
.ref-bonus { margin: 5px 0 0; line-height: 1.5; color: var(--muted); }
.ref-bonus b { color: #b9f0b0; font-weight: 500; }
.ref-fail { margin: 4px 0 0; font-weight: 500; }
.ref-fail.none { color: #9af0a8; }
.ref-fail.down { color: #ffd27a; }
.ref-fail.break { color: #ff7a7a; }
.ref-cost { margin: 5px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ref-cost img { width: 20px; height: 20px; }
.ref-cost small { color: var(--muted); }
.ref-guard { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: #ffe08a; cursor: pointer; }
.ref-guard input { accent-color: #e0a640; }
.ref-guard small { color: var(--muted); }
.ref-max { color: #8af0ff; font-weight: 600; }
.ref-msg { margin: 4px 0 0; min-height: 1.2em; font-size: 12px; color: #ff9a9a; }
.ref-result { min-height: 26px; margin-top: 8px; text-align: center; }
.ref-result p { margin: 0; font-size: 15px; font-weight: 600; animation: dlg-in 0.2s ease-out; }
.ref-result .ok { color: #ffd23a; text-shadow: 0 0 12px rgba(255, 210, 60, 0.6); }
.ref-result .down { color: #c8c0d8; }
.ref-result .broke { color: #ff6a6a; }
.ref-result .bad { color: #ff9a9a; font-size: 13px; }
.ref-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 11.5px; color: var(--muted); }
.ref-foot .rz { display: inline-flex; align-items: center; gap: 5px; }
.ref-foot b { color: var(--gold); font-size: 13px; }

/* ช่องไอเทม: ระดับตีบวก + ช่องการ์ด */
.slot .ref { position: absolute; left: 2px; top: 1px; font-size: 10.5px; font-weight: 700; color: #ffe08a; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
.slot .cslots { position: absolute; right: 3px; top: 3px; display: flex; gap: 2px; }
.slot .cslots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.slot .cslots i.on { background: #ffd27a; box-shadow: 0 0 0 1px #5a3a10, 0 0 4px #ffd27a; }
.slot.is-card { border-color: rgba(255, 226, 150, 0.7); box-shadow: inset 0 0 10px rgba(255, 210, 122, 0.25); }
.d-stats .ref-line { color: #ffe08a; }
.d-stats .card-line { color: #9adcff; }
.d-stats .muted { color: var(--muted); }
.d-sock { display: grid; gap: 4px; margin-top: 7px; }
.sock-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: var(--text); padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.sock-row img { width: 28px; height: 28px; }
.sock-row b { display: block; font-size: 12.5px; font-weight: 500; }
.sock-row small { font-size: 10.5px; color: var(--muted); }
.sock-row em { font-style: normal; font-size: 12px; color: var(--gold); }
.sock-row.sure { border-color: #ff8a8a; background: rgba(224, 52, 74, 0.25); }
.sock-row.sure em { color: #fff; }

/* ปุ่มรีเซ็ตสเตตัส */
.st-reset-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.st-reset { font: inherit; font-size: 12px; color: var(--text); cursor: pointer; padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); }
.st-reset:hover:not(:disabled) { border-color: var(--edge-strong); }
.st-reset:disabled { opacity: 0.45; cursor: default; }
.st-reset.danger { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.55); }

@media (max-width: 600px) {
  .quest, .refine { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 82%; z-index: 4; padding: 10px 12px; }
  .ref-body { grid-template-columns: 1fr; }
  .ref-list { max-height: 132px; }
  .ref-detail { grid-template-columns: 96px minmax(0, 1fr); }
  .ref-stage { width: 96px; height: 110px; }
  .qtrack { right: 8px; top: calc(170px + env(safe-area-inset-top, 0px)); width: 158px; padding: 4px 6px 6px; }
  .qt-item b { font-size: 11px; }
  .qt-goal { font-size: 10px; }
  .qt-list { max-height: 180px; }
}
@media (max-height: 560px) {
  .qtrack { top: calc(150px + env(safe-area-inset-top, 0px)); }
  .qt-list { max-height: 120px; }
  .quest, .refine { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 16px); z-index: 4; }
}

/* ================= v0.11: หน้าเข้าเกม · ตั้งค่า · ออนไลน์ · แชต · UI มือถือ ================= */
.hud { zoom: var(--ui, 1); }
#game.title .hud, #game.title .labels { visibility: hidden; }
.no-dmg .dmg.hit, .no-dmg .dmg.crit, .no-dmg .dmg.miss, .no-dmg .dmg.taken { display: none; }
.no-fps #fps { display: none; }
.no-help .help { display: none; }

/* ปุ่มทั่วไปของหน้าต่างใหม่ */
.settings button, .online-win button, .title-screen button, .menu-panel button, .chat-form button {
  font: inherit; color: var(--text); cursor: pointer; border-radius: 9px; border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.settings button:hover, .online-win button:hover, .title-screen button:hover:not(:disabled), .menu-panel button:hover { border-color: var(--edge-strong); background: rgba(255, 214, 140, 0.12); }
.settings button:focus-visible, .online-win button:focus-visible, .title-screen button:focus-visible, .menu-panel button:focus-visible, .chat-form :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.settings .primary, .title-screen .primary { color: #2a1d10; font-weight: 600; border-color: rgba(255, 233, 176, 0.85); background: linear-gradient(#ffe9b0, #e0a640); }
.settings .primary:hover, .title-screen .primary:hover:not(:disabled) { background: linear-gradient(#fff2c8, #ecb450); }
.title-screen .ghost { color: var(--muted); background: none; }
.title-screen button:disabled { opacity: 0.45; cursor: default; }
.title-screen button:active:not(:disabled), .menu-panel button:active { transform: scale(0.97); }

/* ---------- หน้าเข้าเกม ---------- */
.title-screen {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: auto; padding: 20px 12px; box-sizing: border-box;
  font-family: var(--font); color: var(--text); user-select: text; -webkit-user-select: text; touch-action: auto;
  background: radial-gradient(ellipse at 50% 20%, #4a3566 0%, #241a36 45%, #110c18 100%);
  transition: opacity 0.6s ease, visibility 0.6s;
}
.title-screen.out { opacity: 0; visibility: hidden; pointer-events: none; }
.tt-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tt-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 120px 80px #ffe9b0, 380px 40px #fff, 640px 120px #b8d8ff, 860px 60px #fff, 1100px 140px #ffe9b0, 220px 260px #fff, 520px 320px #b8d8ff, 980px 300px #fff, 1260px 220px #ffe9b0, 60px 420px #fff, 760px 460px #fff, 1180px 520px #b8d8ff; animation: tw 3s ease-in-out infinite alternate; }
.tt-sky i:nth-child(2) { left: 40px; top: 30px; animation-delay: -1s; opacity: 0.7; }
.tt-sky i:nth-child(3) { left: -60px; top: 90px; animation-delay: -2s; opacity: 0.5; }
@keyframes tw { from { opacity: 0.25; } to { opacity: 1; } }
.tt-box { position: relative; width: min(520px, 100%); text-align: center; }
.tt-logo { margin: 0; font-family: var(--display); font-size: clamp(40px, 9vw, 64px); font-weight: 700; letter-spacing: 0.08em; line-height: 1; color: var(--gold); text-shadow: 0 3px 0 #5a3a10, 0 6px 32px rgba(255, 190, 90, 0.35); }
.tt-logo span { display: block; margin-top: 6px; font-size: 0.32em; letter-spacing: 0.6em; color: #f6efe2; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.tt-sub { margin: 10px 0 18px; font-size: 14px; color: var(--muted); }
.tt-panel { text-align: left; padding: 16px; border-radius: 16px; background: rgba(28, 20, 38, 0.86); border: 1px solid var(--edge); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.tt-foot { margin: 12px 0 0; font-size: 11.5px; color: rgba(196, 184, 207, 0.7); }
.tt-wait { display: grid; justify-items: center; gap: 6px; padding: 18px 0 10px; text-align: center; }
.tt-wait small { color: var(--muted); font-size: 12px; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 214, 140, 0.2); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tt-acc { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tt-acc img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.tt-acc img[src=""] { display: none; }
.tt-acc div { flex: 1; min-width: 0; }
.tt-acc b { display: block; font-size: 15px; }
.tt-acc small { display: block; font-size: 12px; color: var(--muted); }
.tt-dot { flex: none; font-size: 11.5px; padding: 2px 9px 2px 20px; border-radius: 999px; position: relative; color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.tt-dot::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #9a90a8; }
.tt-dot.on { color: #b8ffc8; }
.tt-dot.on::before { background: #4ee07a; box-shadow: 0 0 6px #4ee07a; }
.tt-h { margin: 4px 0 10px; font-family: var(--display); font-size: 16px; letter-spacing: 0.05em; color: var(--gold); }
.tt-slots { display: grid; gap: 8px; }
.tt-slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.tt-slot.empty { border-style: dashed; background: none; }
.ts-crest { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 18px; color: #2a1d10; background: radial-gradient(circle at 35% 30%, #ffe9b0, #e0a640 60%, #a8701e); }
.tt-slot.empty .ts-crest { color: var(--muted); background: rgba(255, 255, 255, 0.06); font-family: var(--font); font-weight: 300; font-size: 24px; }
.ts-info { flex: 1; min-width: 0; }
.ts-info b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-info small { display: block; font-size: 12px; color: var(--muted); }
.ts-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ts-btns button { padding: 8px 14px; min-height: 40px; }
.ts-btns .del.sure { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.55); }
.tt-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tt-actions button { padding: 9px 16px; min-height: 42px; }
.tt-actions button.sure { color: #fff; border-color: #ff8a8a; background: rgba(224, 52, 74, 0.45); }
.tt-warn { margin: 0 0 10px; padding: 8px 10px; font-size: 12.5px; border-radius: 9px; color: #ffe2b0; background: rgba(255, 170, 60, 0.12); border: 1px solid rgba(255, 170, 60, 0.35); }
.tt-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.tt-field { display: grid; gap: 6px; margin-bottom: 12px; }
.tt-field > span { font-size: 13px; color: var(--muted); }
.tt-field input { font: inherit; font-size: 16px; color: var(--text); padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--edge); }
.tt-field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.tt-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-sw button { width: 38px; height: 38px; border-radius: 50%; padding: 0; background: var(--c); border: 2px solid rgba(255, 255, 255, 0.25); }
.tt-sw button:hover { background: var(--c); }
.tt-sw button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--gold); }
.tt-seg { display: flex; gap: 6px; }
.tt-seg button { flex: 1; padding: 8px 0; min-height: 40px; }
.tt-seg button[aria-pressed="true"], .seg button[aria-pressed="true"], .title-screen .tt-seg button[aria-pressed="true"]:hover, .settings .seg button[aria-pressed="true"]:hover { color: #2a1d10; font-weight: 600; border-color: var(--gold); background: var(--gold); }
.tt-err { min-height: 18px; margin: 0; font-size: 12.5px; color: #ffb0a8; }
@media (max-width: 480px) {
  .tt-slot { flex-wrap: wrap; }
  .ts-btns { width: 100%; }
  .ts-btns button { flex: 1; }
}

/* ---------- แถบเครื่องมือ: สถานะออนไลน์ · ตั้งค่า ---------- */
.net { display: inline-flex; align-items: center; gap: 5px; }
.net i { width: 8px; height: 8px; border-radius: 50%; background: #9a90a8; }
.net[data-s="online"] i { background: #4ee07a; box-shadow: 0 0 6px #4ee07a; }
.net[data-s="saving"] i { background: #ffd27a; box-shadow: 0 0 6px #ffd27a; }
.net[data-s="connecting"] i { background: #ffd27a; animation: tw 0.6s ease-in-out infinite alternate; }
.net[data-s="error"] i { background: #ff6a6a; box-shadow: 0 0 6px #ff6a6a; }
.tools #btnOnline, .tools #btnSettings { padding: 5px 10px; }
#game:not(.online) #btnOnline { display: none; }

/* ---------- แชต + ช่องพิมพ์ ---------- */
.chat-wrap { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 4px; }
#chatWrap .chat { position: relative; left: auto; right: auto; bottom: auto; width: auto; }
.chat .net { color: #9af0c0; }
.chat .pc { color: #fff; }
.chat .pc.me { color: #ffe9b0; }
.chat-form { display: flex; gap: 4px; pointer-events: auto; }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text); padding: 5px 10px; border-radius: 9px; background: rgba(20, 14, 28, 0.55); border: 1px solid rgba(255, 214, 140, 0.18); }
.chat-form input::placeholder { color: rgba(196, 184, 207, 0.6); }
.chat-form input:focus { outline: none; border-color: var(--gold); background: rgba(20, 14, 28, 0.85); }
.chat-form button { padding: 4px 12px; font-size: 13px; }
.chat-wrap:not(.typing) .chat-form button { display: none; }
.chat-toggle { display: none; }
.bubble-pc { max-width: 200px; padding: 6px 10px; font-size: 12.5px; }
.tag-remote { color: #bfe8ff; padding: 1px 8px 2px; border-radius: 10px; background: rgba(14, 24, 40, 0.55); text-shadow: none; }
.tag-remote small { font-size: 9.5px; color: #c8d8ec; }
.hpbar-remote { width: 46px; height: 4px; }
.hpbar-remote > i { background: linear-gradient(#8af07a, #3aa84a); }

/* ---------- หน้าต่างตั้งค่า + ผู้เล่นออนไลน์ ---------- */
.settings, .online-win {
  position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%, -50%);
  width: 440px; max-width: calc(100% - 24px); max-height: calc(100% - 40px); box-sizing: border-box; padding: 12px 14px;
  display: flex; flex-direction: column; pointer-events: auto; z-index: 6; background: rgba(26, 19, 38, 0.96);
}
.settings[hidden], .online-win[hidden] { display: none; }
.set-body { overflow-y: auto; margin-top: 8px; padding-right: 2px; }
.set-group { padding: 8px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.set-group:first-child { border-top: 0; }
.set-group h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; }
.set-row small { display: block; font-size: 11px; color: var(--muted); }
.set-row b { font-weight: 500; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.set-row input[type="range"] { width: 100%; accent-color: var(--gold); }
.set-row.set-check { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.set-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.set-check .sw { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.15s; }
.set-check .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e8dff0; transition: transform 0.15s; }
.set-check input:checked + .sw { background: #c8963a; }
.set-check input:checked + .sw::after { transform: translateX(18px); background: #fff3d0; }
.set-check input:focus-visible + .sw { outline: 2px solid var(--gold); outline-offset: 2px; }
.set-row.set-seg { grid-template-columns: 1fr; gap: 6px; margin-bottom: 6px; }
.seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.seg button { padding: 6px 0; font-size: 12px; }
.set-acc { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.set-acc b { display: block; font-size: 13.5px; }
.set-acc b.online::before, .set-acc b.offline::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #9a90a8; vertical-align: 1px; }
.set-acc b.online::before { background: #4ee07a; box-shadow: 0 0 6px #4ee07a; }
.set-acc small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.set-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.set-btns button { padding: 8px 6px; font-size: 12.5px; min-height: 38px; }
.on-tabs { margin: 10px 0 8px; }
.on-list { display: grid; gap: 6px; overflow-y: auto; min-height: 120px; align-content: start; }
.on-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.on-row.me { background: rgba(255, 214, 140, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, 0.3); }
.on-crest, .on-no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: #1c1222; background: var(--jc, var(--gold)); }
.on-no { font-family: var(--font); background: rgba(255, 255, 255, 0.1); color: var(--text); }
.on-row.rank:nth-child(1) .on-no { background: linear-gradient(#fff0b0, #e0a640); color: #2a1d10; }
.on-row.rank:nth-child(2) .on-no { background: linear-gradient(#f4f4ff, #a8aac0); color: #1c1222; }
.on-row.rank:nth-child(3) .on-no { background: linear-gradient(#ffd0a8, #b8703a); color: #1c1222; }
.on-info { flex: 1; min-width: 0; }
.on-info b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-info small { display: block; font-size: 11.5px; color: var(--muted); }
.on-map { font-size: 11.5px; color: var(--muted); text-align: right; }
.on-note { margin: 6px 2px; font-size: 12.5px; color: var(--muted); }
.on-empty { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.on-empty p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ---------- เมนู ☰ (มือถือ) ---------- */
.menu-btn { display: none; }
.menu-panel { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 7; padding: 10px 12px 12px; pointer-events: auto; background: rgba(26, 19, 38, 0.96); max-width: 520px; margin: 0 auto; }
.menu-panel[hidden] { display: none; }
.mp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mp-head b { font-family: var(--display); color: var(--gold); letter-spacing: 0.05em; }
.mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mp-grid button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 2px 8px; min-height: 66px; font-size: 12.5px; }
.mp-ico { font-size: 24px; line-height: 1; }
.mp-grid .badge { top: -6px; right: -4px; }

/* ---------- เค้าโครงจอสัมผัส (แบบเกมมือถือ) ---------- */
body.touch .char-btns { display: none; }
body.touch .menu-btn {
  display: grid; place-items: center; position: absolute; left: 22px; bottom: calc(196px + env(safe-area-inset-bottom, 0px));
  width: 50px; height: 50px; padding: 0; border-radius: 14px; pointer-events: auto; cursor: pointer;
  font: 600 24px/1 var(--font); color: var(--gold); background: rgba(28, 20, 38, 0.82); border: 1px solid var(--edge-strong);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
body.touch .menu-btn.dot::after { content: ''; position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 50%; background: #ff5a6a; box-shadow: 0 0 0 2px rgba(20, 12, 30, 0.9); }
body.touch .menu-btn:active { transform: scale(0.94); }
body.touch .tools { left: 80px; right: auto; bottom: calc(203px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: flex-start; gap: 1px; font-size: 10.5px; pointer-events: none; }
body.touch .tools button, body.touch .tools .ver { display: none; }
body.touch .attack-btn { right: 18px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 80px; height: 80px; font-size: 34px; }
.skill-arc { position: absolute; right: 58px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); width: 0; height: 0; pointer-events: none; }
.skill-arc[hidden] { display: none; }
#skillArc .hk { position: absolute; left: var(--x); top: var(--y); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: auto; background: radial-gradient(circle at 50% 38%, rgba(70, 52, 92, 0.92), rgba(20, 14, 28, 0.9)); border: 2px solid rgba(255, 214, 140, 0.45); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
#skillArc .hk img { width: 38px; height: 38px; }
#skillArc .hk .key { left: 50%; top: 2px; transform: translateX(-50%); font-size: 8.5px; }
#skillArc .hk .qty { right: 50%; bottom: 3px; transform: translateX(50%); font-size: 9.5px; }
#skillArc .hk:nth-child(1) { --x: -95px; --y: 8px; }
#skillArc .hk:nth-child(2) { --x: -82px; --y: -48px; }
#skillArc .hk:nth-child(3) { --x: -40px; --y: -86px; }
#skillArc .hk:nth-child(4) { --x: 16px; --y: -94px; }
body.touch .hotbar { gap: 4px; padding: 4px; }
body.touch .hotbar .hk { width: 44px; height: 44px; }
body.touch .hotbar .hk img { width: 33px; height: 33px; }
body.touch .joystick { left: 20px; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
/* แชตมือถือ: ย่อเหลือ 2 บรรทัด แตะเพื่อขยาย + พิมพ์ */
body.touch .chat-wrap { left: 12px; right: 12px; width: auto; bottom: calc(256px + env(safe-area-inset-bottom, 0px)); }
body.touch #chatWrap .chat { max-height: 44px; font-size: 12px; line-height: 1.45; padding: 4px 40px 4px 10px; pointer-events: auto; }
body.touch .chat-wrap .chat-form { display: none; }
body.touch .chat-toggle { display: grid; place-items: center; position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; padding: 0; border-radius: 10px; pointer-events: auto; font-size: 17px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge); cursor: pointer; }
body.touch #chatWrap.open .chat { max-height: 160px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; background: rgba(28, 20, 38, 0.9); }
body.touch .chat-wrap.open .chat-form { display: flex; }
body.touch .chat-wrap.open .chat-form input { font-size: 16px; padding: 8px 10px; }
body.touch .chat-wrap.open .chat-toggle { bottom: auto; top: 4px; }
body.touch .chat-wrap.open { z-index: 5; }
/* แนวนอน: แชตไปอยู่ล่างกลางระหว่างจอยกับปุ่มสกิล */
@media (orientation: landscape) {
  body.touch .chat-wrap { left: 160px; right: 200px; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.touch .chat-wrap.open { left: 150px; right: 150px; }
}
@media (max-height: 500px) {
  body.touch .attack-btn { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 74px; height: 74px; }
  .skill-arc { right: 55px; bottom: calc(55px + env(safe-area-inset-bottom, 0px)); }
  #skillArc .hk { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  #skillArc .hk img { width: 33px; height: 33px; }
  #skillArc .hk:nth-child(1) { --x: -88px; --y: 8px; }
  #skillArc .hk:nth-child(2) { --x: -76px; --y: -44px; }
  #skillArc .hk:nth-child(3) { --x: -37px; --y: -80px; }
  #skillArc .hk:nth-child(4) { --x: 15px; --y: -87px; }
  body.touch .menu-btn { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; }
  body.touch .tools { left: 76px; bottom: calc(181px + env(safe-area-inset-bottom, 0px)); }
  body.touch .hotbar .hk { width: 40px; height: 40px; }
  body.touch .hotbar .hk img { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  body.touch .hotbar .hk { width: 40px; height: 40px; }
}
/* จอกลาง (คอมพิวเตอร์): ปุ่มลัดอยู่เหนือกล่องแชตที่สูงขึ้นจากช่องพิมพ์ */
@media (max-width: 1239px) {
  body:not(.touch) .hotbar { bottom: calc(186px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .settings, .online-win { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; max-width: none; max-height: 86%; }
  .set-row { grid-template-columns: minmax(0, 1fr) 120px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .spin, .tt-sky i, .net[data-s="connecting"] i { animation: none; }
}

/* ================= v0.12: สมัครสมาชิก / เข้าสู่ระบบ ================= */
.tt-form { display: grid; }
.tt-form .tt-actions { margin-top: 6px; }
.tt-form input[type="password"] { letter-spacing: 0.12em; }
.tt-out { flex: none; padding: 6px 12px; font-size: 12.5px; min-height: 34px; }
.set-btns .danger { color: #ffd0cc; border-color: rgba(255, 138, 138, 0.5); }
.set-btns .danger:hover { background: rgba(224, 52, 74, 0.35); }

/* ================= v0.13: สัตว์เลี้ยง · ไอเทมใช้งาน · แชตมือถือ ================= */
.slot.r-legend { border-color: rgba(255, 179, 71, 0.85); box-shadow: inset 0 0 12px rgba(255, 179, 71, 0.35); }
.chat .r-legend, .dmg.loot.r-legend { color: #ffb347; font-weight: 600; }
.chat .shout { color: #ffe07a; font-weight: 600; text-shadow: 0 0 8px rgba(255, 200, 80, 0.35); }
.buff.item img { background: rgba(20, 14, 28, 0.78); }
.status-btn.pet-btn { color: #ffd0ee; }

/* หน้าต่างสัตว์เลี้ยง */
.petw {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 470px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: auto; box-sizing: border-box; padding: 12px 14px;
  pointer-events: auto; background: rgba(26, 19, 38, 0.95); z-index: 3;
}
.petw[hidden] { display: none; }
.pet-eggs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.pet-noegg { font-size: 12px; color: var(--muted); }
.pet-egg { display: flex; align-items: center; gap: 6px; font: inherit; color: var(--text); cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 10px; background: rgba(255, 184, 232, 0.1); border: 1px solid rgba(255, 184, 232, 0.4); }
.pet-egg:hover { background: rgba(255, 184, 232, 0.2); }
.pet-egg img { width: 32px; height: 32px; }
.pet-egg span { text-align: left; line-height: 1.2; }
.pet-egg b { display: block; font-size: 12.5px; font-weight: 500; }
.pet-egg small { font-size: 10.5px; color: var(--muted); }
.pet-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pet-cell { position: relative; display: grid; justify-items: center; padding: 3px 2px 4px; font: inherit; color: var(--text); cursor: pointer; border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--tc) 22%, transparent), rgba(255, 255, 255, 0.03) 75%); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.pet-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pet-cell .pet-ph { display: block; width: 100%; aspect-ratio: 1; }
.pet-cell.locked img { filter: brightness(0) opacity(0.45); }
.pet-cell.sel { box-shadow: 0 0 0 2px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 45%, transparent); }
.pet-cell.on { border-color: var(--gold); }
.pet-nm { font-size: 11px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-st { font-size: 9.5px; color: var(--gold); letter-spacing: -0.5px; min-height: 12px; }
.pet-q { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font: 600 20px/1 var(--font); color: rgba(255, 255, 255, 0.55); }
.pet-on { position: absolute; top: 2px; left: 2px; font-size: 9px; padding: 0 5px; border-radius: 6px; color: #2a1d10; background: var(--gold); }
.pet-detail .d-head img { width: 56px; height: 56px; }
.pet-detail .d-head img.locked { filter: brightness(0) opacity(0.45); }
.pet-detail .d-desc { margin: 6px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pet-detail .d-stats { margin: 4px 0; font-size: 12.5px; }
.pet-detail .d-skill { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; padding: 6px 9px; border-radius: 8px; background: rgba(255, 214, 140, 0.08); border: 1px solid rgba(255, 214, 140, 0.2); }
.pet-detail .d-skill b { color: var(--gold); font-weight: 500; }
.pet-cd { align-self: center; font-size: 11.5px; color: var(--muted); }
.pet-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.pet-foot select { font: inherit; font-size: 12px; color: var(--text); background: rgba(20, 14, 28, 0.8); border: 1px solid var(--edge); border-radius: 7px; padding: 3px 6px; margin-left: 4px; }

/* หน้าต่างฟักไข่ */
.hatch-modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 16, 0.72); pointer-events: auto; }
.hatch-modal[hidden] { display: none; }
.hatch-card { width: min(380px, 100%); padding: 14px; text-align: center; background: linear-gradient(180deg, #2e2240, #1d1528); border: 1px solid var(--edge-strong); border-radius: 18px; }
.hatch-stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: radial-gradient(60% 60% at 50% 45%, #47355f, #1d1528 80%); }
.hatch-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hatch-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.hatch-text { min-height: 72px; margin: 10px 0 8px; }
.h-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #1a1220; background: var(--tc); }
.h-name { font-size: 22px; font-weight: 600; margin-top: 4px; }
.h-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.h-skill { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.5; opacity: 0.85; }
.hatch-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.hatch-btns[hidden] { display: none; }
.hatch-btns button, .ask-btns button { font: inherit; font-size: 13.5px; cursor: pointer; padding: 7px 14px; border-radius: 9px; color: var(--text); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge); }
.hatch-btns .primary, .ask-btns .primary { color: #2a1d10; font-weight: 600; border-color: rgba(255, 233, 176, 0.8); background: linear-gradient(#ffe9b0, #e0a640); }
.hatch-btns button:disabled { opacity: 0.45; cursor: default; }

/* กล่องพิมพ์ข้อความ (เปลี่ยนชื่อ · โทรโข่ง) */
.ask-modal { position: absolute; inset: 0; z-index: 31; display: grid; place-items: start center; padding: calc(80px + env(safe-area-inset-top, 0px)) 16px 16px; background: rgba(10, 6, 16, 0.6); pointer-events: auto; }
.ask-box { width: min(360px, 100%); padding: 14px; display: grid; gap: 8px; background: rgba(32, 24, 46, 0.97); border-radius: 14px; }
.ask-title { font-size: 15px; color: var(--gold); font-weight: 500; }
.ask-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ask-box input { font: inherit; font-size: 16px; color: var(--text); padding: 8px 10px; border-radius: 9px; background: rgba(20, 14, 28, 0.85); border: 1px solid var(--edge); }
.ask-box input:focus { outline: none; border-color: var(--gold); }
.ask-btns { display: flex; gap: 6px; justify-content: flex-end; }

/* ปุ่มขนนกคืนชีพตอนหมดสติ */
.revive-btn { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; font: inherit; color: #2a1406; cursor: pointer; pointer-events: auto;
  border-radius: 14px; border: 2px solid rgba(255, 233, 176, 0.9); background: linear-gradient(#ffe9b0, #ff9a3a); box-shadow: 0 0 26px rgba(255, 140, 60, 0.6); animation: revivePulse 1.2s ease-in-out infinite; }
.revive-btn img { width: 40px; height: 40px; }
.revive-btn span { font-weight: 600; font-size: 15px; text-align: left; line-height: 1.25; }
.revive-btn small { display: block; font-size: 11px; font-weight: 400; }
@keyframes revivePulse { 50% { box-shadow: 0 0 40px rgba(255, 140, 60, 0.9); } }

@media (max-width: 600px) {
  .petw { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 82%; z-index: 4; padding: 10px 12px; }
  .pet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 560px) {
  .petw { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 16px); z-index: 4; }
}

/* ----- แชตมือถือ v0.13: ย่อเล็ก ไม่บังตัวละคร · ขยายแล้วไปอยู่ด้านบนใต้แถบสถานะ ----- */
body.touch .chat-wrap { left: 12px; right: auto; width: min(62%, 300px); bottom: calc(256px + env(safe-area-inset-bottom, 0px)); }
body.touch #chatWrap .chat { max-height: 42px; font-size: 11px; line-height: 1.6; padding: 3px 34px 3px 8px; background: rgba(20, 14, 28, 0.42); border-color: transparent; box-shadow: none; transition: opacity 0.6s; -webkit-mask-image: linear-gradient(transparent, #000 8px); mask-image: linear-gradient(transparent, #000 8px); }
body.touch #chatWrap .chat > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch #chatWrap.open .chat > div { white-space: normal; }
/* v0.17.1: แก้ข้อความแชตเพี้ยนบนมือถือ — บรรทัดแชต (overflow: hidden) ในกล่องแบบ flex ถูกบีบจนสูงไม่กี่พิกเซล
   (เห็นเป็นเศษตัวอักษรเรียงเป็นแถว) → ห้ามบีบบรรทัด · กล่องที่ขยายแล้วเรียงแบบปกติให้เลื่อนขึ้นอ่านย้อนหลังได้ครบ */
.chat > div { flex-shrink: 0; }
body.touch #chatWrap.open .chat { display: block; overscroll-behavior: contain; }
body.touch .chat-wrap:not(.open):not(.fresh) .chat { opacity: 0.45; }
body.touch .chat-toggle { width: 30px; height: 30px; right: 2px; bottom: 3px; font-size: 15px; }
body.touch .chat-wrap.open { left: 10px; right: 10px; width: auto; bottom: auto; top: var(--chatTop, calc(150px + env(safe-area-inset-top, 0px))); z-index: 8; }
body.touch #chatWrap.open .chat { max-height: min(30vh, 200px); font-size: 12.5px; line-height: 1.5; padding: 6px 40px 6px 10px; }
body.touch .chat-wrap.open .chat-toggle { top: 4px; bottom: auto; }
body.touch .bubble-pc { max-width: 150px; padding: 4px 8px; font-size: 11px; line-height: 1.35; border-radius: 10px; }
body.touch .bubble { font-size: 11.5px; padding: 5px 9px; max-width: 170px; }
@media (orientation: landscape) {
  body.touch .chat-wrap { left: 160px; right: auto; width: min(36%, 320px); bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  body.touch .chat-wrap.open { left: 150px; right: 150px; width: auto; top: calc(10px + env(safe-area-inset-top, 0px)); }
  body.touch #chatWrap.open .chat { max-height: 40vh; }
}

/* ---------- v0.14: ตีมอนออโต้ ---------- */
.auto-dock { position: absolute; left: max(484px, calc(50% - 222px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 2; }
.auto-dock > * { pointer-events: auto; }
.ad-go { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; font: 600 13px/1 var(--font); letter-spacing: 0.06em; color: var(--gold); cursor: pointer;
  border-radius: 999px; background: rgba(28, 20, 38, 0.84); border: 1px solid var(--edge-strong); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.ad-go i { font-style: normal; font-size: 16px; display: inline-block; }
.ad-go:active, .ad-set:active { transform: scale(0.94); }
.ad-set { width: 36px; height: 36px; padding: 0; border-radius: 50%; font: 16px/1 var(--font); color: var(--text); cursor: pointer; background: rgba(28, 20, 38, 0.84); border: 1px solid var(--edge); }
.ad-st { max-width: 280px; padding: 4px 10px; font-size: 12px; border-radius: 999px; color: #d8f6ff; background: rgba(16, 36, 52, 0.8); border: 1px solid rgba(127, 230, 255, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none !important; }
.ad-st[hidden] { display: none; }
.auto-dock.on .ad-go { color: #0e2636; background: linear-gradient(#c6f6ff, #4fc8f0); border-color: #e2fbff; box-shadow: 0 0 18px rgba(80, 210, 255, 0.65); animation: adPulse 1.6s ease-in-out infinite; }
.auto-dock.on .ad-go i { animation: adSpin 2.4s linear infinite; }
.auto-dock.safe:not(.on) .ad-go { opacity: 0.6; }
@keyframes adPulse { 50% { box-shadow: 0 0 30px rgba(80, 210, 255, 0.95); } }
@keyframes adSpin { to { transform: rotate(360deg); } }
@media (max-width: 1239px) { body:not(.touch) .auto-dock { left: 12px; bottom: calc(244px + env(safe-area-inset-bottom, 0px)); } }
/* มือถือ: ปุ่มกลมมุมขวา เหนือปุ่มสกิล (นิ้วโป้งกดถึง) */
body.touch .auto-dock { left: auto; right: 14px; bottom: calc(250px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
body.touch .ad-go { flex-direction: column; justify-content: center; gap: 1px; width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 11px; letter-spacing: 0.04em; }
body.touch .ad-go i { font-size: 20px; }
body.touch .ad-set { position: absolute; right: 64px; bottom: 2px; width: 32px; height: 32px; font-size: 14px; }
body.touch .ad-st { max-width: min(46vw, 190px); font-size: 11px; padding: 3px 8px; }
/* แนวนอน: ไว้ด้านบนข้างแผนที่ย่อ (ล่างขวามีปุ่มสกิลเต็มแล้ว) */
@media (max-height: 500px) {
  body.touch .auto-dock { display: grid; grid-template-columns: auto auto; grid-template-areas: "set go" "st st"; justify-items: end; align-items: center; gap: 4px 6px;
    top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; right: 192px; }
  body.touch .ad-go { grid-area: go; width: 52px; height: 52px; }
  body.touch .ad-set { grid-area: set; position: static; }
  body.touch .ad-st { grid-area: st; max-width: 130px; }
}

.autow {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 490px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: auto; box-sizing: border-box; padding: 12px 14px; pointer-events: auto; background: rgba(26, 19, 38, 0.96); z-index: 3;
}
.autow[hidden] { display: none; }
.aw-run { display: grid; gap: 5px; margin: 10px 0 2px; }
.aw-go { font: inherit; font-size: 15px; font-weight: 600; padding: 10px; border-radius: 11px; cursor: pointer; }
.aw-go.primary { color: #0e2636; background: linear-gradient(#c6f6ff, #4fc8f0); border: 1px solid #e2fbff; }
.aw-go.ghost { color: var(--text); background: rgba(255, 90, 106, 0.16); border: 1px solid rgba(255, 90, 106, 0.6); }
.aw-tip { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.aw-sec { margin-top: 10px; padding: 9px 10px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 214, 140, 0.16); }
.aw-sec h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 500; color: var(--gold); display: flex; align-items: baseline; gap: 8px; }
.aw-sec h3 output { color: var(--text); font-weight: 600; font-size: 13px; }
.aw-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.aw-h h3 { margin: 0; }
.aw-allbtns { display: flex; gap: 4px; }
.aw-allbtns button { font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 7px; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--edge); }
.aw-hint { margin: 4px 0 6px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.aw-chk { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; line-height: 1.4; }
.aw-chk input, .aw-skill input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: #4fc8f0; cursor: pointer; }
.aw-chk small { display: block; font-size: 11px; color: var(--muted); }
.aw-small { font-size: 12px; color: var(--muted); }
.aw-pot { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 2px 10px; align-items: center; padding: 3px 0 7px; margin-bottom: 3px; border-bottom: 1px dashed rgba(255, 214, 140, 0.14); }
.aw-pot .aw-chk { grid-column: 1 / -1; padding-bottom: 2px; }
.aw-pot select { font: inherit; font-size: 12px; color: var(--text); background: rgba(20, 14, 28, 0.85); border: 1px solid var(--edge); border-radius: 7px; padding: 5px 6px; min-width: 0; }
.aw-pot.off .aw-slide, .aw-pot.off select { opacity: 0.45; }
.aw-slide { display: flex; align-items: center; gap: 8px; }
.aw-slide input[type="range"] { flex: 1; min-width: 0; height: 24px; accent-color: #4fc8f0; cursor: pointer; }
.aw-slide output { min-width: 40px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.aw-mobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.aw-mob { position: relative; display: grid; justify-items: center; padding: 4px 3px 5px; border-radius: 10px; cursor: pointer; text-align: center;
  background: radial-gradient(70% 60% at 50% 38%, rgba(127, 230, 255, 0.17), rgba(255, 255, 255, 0.03) 75%); border: 1px solid rgba(127, 230, 255, 0.6); transition: border-color 0.15s, background 0.15s; }
.aw-mob.is-mvp { background: radial-gradient(70% 60% at 50% 38%, rgba(255, 210, 122, 0.2), rgba(255, 255, 255, 0.03) 75%); }
.aw-mob input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.aw-pic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.aw-pic img { width: 100%; height: 100%; object-fit: contain; }
.aw-pic img:not([src]) { visibility: hidden; }
.aw-pic.noimg::before { content: '👾'; font-size: 30px; }
.aw-nm { font-size: 12px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-lv { font-size: 10.5px; color: var(--muted); display: flex; gap: 3px; align-items: center; }
.aw-lv em { font-style: normal; font-size: 9.5px; padding: 0 4px; border-radius: 5px; }
.aw-lv em.agg { color: #ffd6d6; background: rgba(255, 90, 106, 0.32); }
.aw-lv em.mvp { color: #2a1d10; background: var(--gold); }
.aw-ck { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 6px; background: #4fc8f0; box-shadow: 0 0 0 2px rgba(20, 14, 28, 0.85); }
.aw-ck::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font); color: #0e2636; }
.aw-mob.off { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.025); }
.aw-mob.off img { filter: grayscale(1) brightness(0.55); }
.aw-mob.off .aw-nm { color: var(--muted); }
.aw-mob.off .aw-ck { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.aw-mob.off .aw-ck::after { content: ''; }
.aw-mob:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.aw-skills { display: grid; gap: 4px; }
.aw-skill { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.03); }
.aw-skill img { width: 32px; height: 32px; flex: none; }
.aw-skill b { display: block; font-size: 13px; font-weight: 500; }
.aw-skill small { font-size: 11px; color: var(--muted); }
.aw-skill:has(input:checked) { background: rgba(127, 230, 255, 0.12); }
@media (max-width: 600px) {
  .autow { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 84%; z-index: 4; padding: 10px 12px; }
  .aw-mobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aw-pot { grid-template-columns: 1fr; }
}
@media (max-height: 560px) { .autow { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 16px); z-index: 4; } }
@media (prefers-reduced-motion: reduce) { .auto-dock.on .ad-go, .auto-dock.on .ad-go i { animation: none; } }

/* ---------- v0.15: จดหมาย ---------- */
.tools #btnMail { position: relative; padding: 5px 10px; }
.tools #btnMail .badge { top: -9px; right: -9px; }
.mailw {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 680px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: hidden; box-sizing: border-box; padding: 12px 14px; pointer-events: auto; background: rgba(26, 19, 38, 0.96); z-index: 3;
  display: flex; flex-direction: column;
}
.mailw[hidden] { display: none; }
.mailw > .st-head { flex: none; }
.ml-hbtns { display: flex; gap: 6px; align-items: center; }
.ml-gm { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: #ffe9b0; background: rgba(255, 214, 140, 0.12); border: 1px solid var(--edge-strong); }
.ml-gm[hidden] { display: none; }
.ml-del { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: #ffd0d0; background: rgba(255, 120, 120, 0.12); border: 1px solid var(--edge-strong); }
.ml-del:disabled { opacity: 0.45; cursor: default; }
.ml-del[hidden] { display: none; }
.ml-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; margin-top: 10px; flex: 1 1 auto; min-height: 0; }
.ml-body[hidden] { display: none; }
.ml-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; overflow: auto; min-height: 0; }
.ml-item { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 7px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.035); border: 1px solid transparent; }
.ml-item:hover { border-color: var(--edge); }
.ml-item.sel { border-color: var(--gold); background: rgba(255, 214, 140, 0.1); }
.ml-item.got { opacity: 0.68; }
.ml-ico { font-size: 20px; flex: none; }
.ml-txt { min-width: 0; flex: 1; }
.ml-txt b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-txt small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-tag { flex: none; font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 6px; color: var(--muted); background: rgba(255, 255, 255, 0.08); }
.ml-tag.on { color: #2a1d10; background: var(--gold); }
.ml-empty { font-size: 12.5px; color: var(--muted); }
.ml-detail { min-width: 0; min-height: 0; overflow: auto; padding: 4px 6px 2px 10px; border-left: 1px solid rgba(255, 214, 140, 0.14); }
.ml-back { display: none; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0; padding: 0 0 6px; cursor: pointer; }
.ml-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--gold); }
.ml-meta { margin: 2px 0 8px; font-size: 11.5px; color: var(--muted); }
.ml-text { margin: 0 0 10px; font-size: 13px; line-height: 1.6; white-space: pre-line; }
.ml-detail h4, .ml-gmpane h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 500; color: var(--gold); }
.ml-detail h4 small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 9px; font-size: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
.ml-chip img { width: 26px; height: 26px; }
.ml-chip b { font-weight: 600; color: var(--gold); }
.ml-chip.zeny { padding-left: 8px; }
.ml-chip button { font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0 2px; }
.ml-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.ml-opts.pet { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ml-opt { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 4px 6px; font: inherit; color: var(--text); text-align: center; cursor: pointer; border-radius: 11px;
  background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--rc) 20%, transparent), rgba(255, 255, 255, 0.03) 75%); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); }
.ml-opt:disabled { cursor: default; opacity: 0.55; }
.ml-opt.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 210, 122, 0.45); }
.ml-opt.on::after { content: '✓'; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font); color: #2a1d10; background: var(--gold); }
.ml-pic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; overflow: hidden; }
.ml-pic img { width: 100%; height: 100%; object-fit: cover; }
.ml-opts.pet .ml-pic img { object-fit: contain; }
.ml-pic img:not([src]) { visibility: hidden; }
.ml-opt b { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.ml-opt small { font-size: 10.5px; color: var(--muted); }
.ml-opt em { font-style: normal; font-size: 10.5px; color: #ffe9b0; }
.ml-foot { margin-top: 12px; display: grid; gap: 6px; }
.ml-msg { margin: 0; font-size: 12.5px; color: var(--muted); min-height: 1.2em; }
.ml-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ml-acts button, .gm-send button, .gm-add button, .gm-row button { font: inherit; font-size: 13.5px; cursor: pointer; padding: 8px 16px; border-radius: 10px; color: var(--text); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge); }
.ml-acts .primary, .gm-send .primary { font-weight: 600; color: #2a1d10; border-color: rgba(255, 233, 176, 0.8); background: linear-gradient(#ffe9b0, #e0a640); min-width: 140px; }
.ml-acts button:disabled, .gm-send button:disabled { opacity: 0.45; cursor: default; }
/* แอดมิน */
.ml-gmpane { margin-top: 8px; flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; }
.ml-gmpane[hidden] { display: none; }
.gm-note { margin: 0 0 8px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.gm-grid label, .gm-zeny { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.gm-grid label[hidden] { display: none; }
.gm-grid .wide { grid-column: 1 / -1; }
.ml-gmpane input, .ml-gmpane select, .ml-gmpane textarea { font: inherit; font-size: 13px; color: var(--text); background: rgba(20, 14, 28, 0.85); border: 1px solid var(--edge); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.ml-gmpane textarea { resize: vertical; }
.gm-add { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 6px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.gm-none { color: var(--muted); font-size: 12px; }
.gm-zeny { max-width: 220px; margin-top: 4px; }
.gm-det { margin-top: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 214, 140, 0.16); }
.gm-det summary { cursor: pointer; font-size: 12.5px; }
.gm-cks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 8px; margin-top: 6px; }
.gm-ck { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; padding: 2px 0; }
.gm-ck input { accent-color: var(--gold); width: 16px; height: 16px; }
.gm-ck small { color: var(--muted); font-size: 10.5px; }
.gm-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.gm-msg { margin: 0; font-size: 12.5px; color: #ffe9b0; }
.gm-sent { display: grid; gap: 4px; }
.gm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.035); }
.gm-row span { min-width: 0; }
.gm-row b { display: block; font-size: 12.5px; font-weight: 500; }
.gm-row small { font-size: 10.5px; color: var(--muted); }
.gm-row button { padding: 4px 10px; font-size: 12px; flex: none; }
@media (max-width: 760px) {
  .mailw { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 86%; z-index: 4; padding: 10px 12px; }
  .ml-body { grid-template-columns: 1fr; }
  .ml-detail { border-left: 0; padding: 0; display: none; }
  .mailw.detail .ml-detail { display: block; }
  .mailw.detail .ml-list { display: none; }
  .ml-back { display: block; }
  .ml-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-opts.pet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-grid { grid-template-columns: 1fr; }
  .ml-acts .primary { flex: 1; }
}
@media (max-height: 560px) { .mailw { top: calc(8px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 16px); z-index: 4; } }

/* ---------- v0.16: ประสิทธิภาพบนมือถือ ---------- */
/* เบลอพื้นหลังแผง (backdrop-filter) ต้องคำนวณใหม่ทุกเฟรมเพราะฉาก 3 มิติขยับตลอด → ปิดบนจอสัมผัส ใช้พื้นทึบขึ้นแทน */
body.touch .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(26, 19, 38, 0.88); }
body.touch .chat-wrap:not(.open) .chat { background: rgba(20, 14, 28, 0.42); }
/* ตัวเลขดาเมจ: เงาแบบเบา (filter drop-shadow สองชั้นแพงบนมือถือ) */
body.touch .dmg { filter: drop-shadow(0 2px 0 rgba(10, 4, 16, 0.85)); }

/* ---------- v0.16: มือถือแนวนอน (จอเตี้ย) ----------
   หน้าต่างทุกบานใช้ความสูงเต็มจอ อยู่กลางจอ · แผนที่ย่อเล็กลง ซ่อนปุ่มหมุนกล้อง (ใช้สองนิ้วหมุนแทน)
   · ปุ่ม AUTO อยู่ใต้แผนที่ย่อ · กรอบเป้าหมาย/บอสอยู่บนสุดระหว่างแถบสถานะกับแผนที่ย่อ (ไม่บังกลางจอ) */
@media (max-height: 560px) {
  .status, .inv, .skw, .ward, .quest, .refine, .petw, .autow, .mailw, .settings, .online-win, .shop, .stor {
    top: calc(6px + env(safe-area-inset-top, 0px)); bottom: auto; max-height: calc(100% - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    left: 0; right: 0; margin: 0 auto; width: min(640px, calc(100% - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); max-width: none;
    transform: none; z-index: 6; padding: 8px 12px;
  }
  .dlg { z-index: 6; top: calc(6px + env(safe-area-inset-top, 0px)); bottom: auto; left: 0; right: 0; margin: 0 auto; transform: none; width: min(520px, calc(100% - 16px)); max-height: calc(100% - 12px); }
}
@media (max-height: 500px) {
  body.touch .cam-btns { display: none; }
  body.touch #minimap { width: 112px; height: 72px; }
  body.touch .mini { padding: 6px; }
  body.touch .mini-title { font-size: 11px; margin-bottom: 4px; }
  body.touch .auto-dock { display: flex; flex-direction: row-reverse; align-items: center; top: calc(124px + env(safe-area-inset-top, 0px)); right: 14px; bottom: auto; gap: 6px; }
  body.touch .ad-go { width: 48px; height: 48px; }
  body.touch .ad-set { position: static; width: 30px; height: 30px; }
  body.touch .ad-st { max-width: 150px; }
  body.touch .target, body.touch .bossbar { top: calc(8px + env(safe-area-inset-top, 0px)); left: 300px; right: 150px; width: auto; min-width: 0; max-width: 320px; margin: 0 auto; transform: none; padding: 6px 10px; }
  body.touch .qtrack { left: 136px; right: auto; top: auto; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); width: 150px; }
  body.touch .qt-list { max-height: 90px; }
}

/* v0.17: โหมดภาพพิกเซล — ขยายไอคอน/รูปย่อแบบคมไม่เบลอ */
body.pxmode img[src^="data:"], body.pxmode .slot img { image-rendering: pixelated; }

/* ---------- v0.18: สมุดสะสม (สมุดมอนสเตอร์ · ความสำเร็จ/ฉายา · อัลบั้มการ์ด · เช็กอิน) ---------- */
.colw {
  position: absolute; left: 12px; top: calc(196px + env(safe-area-inset-top, 0px)); width: 640px; max-width: calc(100% - 24px);
  max-height: calc(100% - 214px); overflow: hidden; box-sizing: border-box; padding: 12px 14px; pointer-events: auto; background: rgba(26, 19, 38, 0.96); z-index: 3;
  display: flex; flex-direction: column;
}
.colw[hidden] { display: none; }
.colw > .st-head { flex: none; }
.cw-tabs { flex: none; display: flex; gap: 4px; margin: 8px 0 6px; overflow-x: auto; scrollbar-width: none; }
.cw-tabs button { flex: 1 0 auto; font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 9px; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 214, 140, 0.14); white-space: nowrap; }
.cw-tabs button[aria-selected="true"] { color: #1c1222; background: linear-gradient(#ffe9a8, #e8b850); border-color: #fff2c8; font-weight: 600; }
.cw-body { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; overscroll-behavior: contain; }
.cw-sec { margin-top: 8px; padding: 9px 10px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 214, 140, 0.16); }
.cw-sec.full { border-color: rgba(143, 224, 138, 0.5); background: rgba(143, 224, 138, 0.06); }
.cw-sec h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 500; color: var(--gold); }
.cw-sec h3 small { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.cw-hint { margin: 4px 0 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.cw-hint button { padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.cw-bar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cw-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e8b850, #ffe9a8); }
.cw-sum { display: grid; grid-template-columns: 128px 1fr; gap: 8px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); }
.cw-sum b { font-weight: 500; color: var(--text); }
.cw-sum span { color: #bff4c0; }
.cw-sum em { color: var(--muted); font-style: normal; }
.cw-goal { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); }
.cw-goal:last-child { border-bottom: 0; }
.cw-gi { font-size: 18px; text-align: center; }
.cw-goal b { display: block; font-size: 13px; font-weight: 500; }
.cw-goal small { display: block; font-size: 11.5px; color: var(--muted); }
.cw-mobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cw-mob { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 214, 140, 0.12); }
.cw-mob.mvp { border-color: rgba(255, 130, 90, 0.4); }
.cw-mob.full { border-color: rgba(143, 224, 138, 0.55); background: rgba(143, 224, 138, 0.07); }
.cw-pic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 9px; background: rgba(0, 0, 0, 0.25); overflow: hidden; }
.cw-pic img { width: 100%; height: 100%; object-fit: contain; }
.cw-mob.unseen .cw-pic img { filter: brightness(0) opacity(0.45); }
.cw-mi { min-width: 0; }
.cw-mi b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-mi b small { color: var(--muted); font-weight: 400; font-size: 10.5px; }
.cw-mi small { display: block; font-size: 11px; color: var(--muted); }
.cw-mi .cw-next { color: #cfe8ff; }
.cw-pips { display: flex; gap: 3px; margin: 2px 0; }
.cw-pips i { width: 16px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.cw-pips i.on { background: #ffd36b; box-shadow: 0 0 4px rgba(255, 211, 107, 0.6); }
.cw-ach { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); opacity: 0.78; }
.cw-ach:last-child { border-bottom: 0; }
.cw-ach.done { opacity: 1; }
.cw-ach.worn { background: rgba(255, 211, 107, 0.08); border-radius: 8px; }
.cw-at { min-width: 0; }
.cw-at small { display: block; font-size: 11px; color: var(--muted); }
.cw-bonus { color: #bff4c0 !important; font-size: 11px; }
.cw-sh .cw-bonus { color: var(--muted) !important; }
.cw-sh .cw-bonus.on { color: #bff4c0 !important; }
.cw-ach button { padding: 4px 10px; font-size: 12px; }
.cw-on { font-size: 11.5px; color: #1c1222; background: #ffd36b; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.cw-cnt { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cw-honor { font-weight: 600; font-size: 13px; }
.cw-honor.t-common, .tag-honor.t-common { color: #dfe8f4; }
.cw-honor.t-rare, .tag-honor.t-rare { color: #7fc4ff; }
.cw-honor.t-epic, .tag-honor.t-epic { color: #d49bff; }
.cw-honor.t-legend, .tag-honor.t-legend { color: #ffb347; }
.cw-honor.t-mythic { color: #ff9ae6; }
.cw-ach:not(.done) .cw-honor { color: var(--muted); }
.cw-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cw-sh h3 { margin: 0; }
.cw-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cw-card { width: 62px; display: grid; justify-items: center; gap: 2px; padding: 5px 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); }
.cw-card img { width: 38px; height: 38px; image-rendering: pixelated; filter: grayscale(1) brightness(0.45); }
.cw-card.got { border-color: rgba(255, 211, 107, 0.45); }
.cw-card.got img { filter: none; }
.cw-card small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cw-day { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 3px; border-radius: 9px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); min-height: 92px; }
.cw-day b { font-size: 11.5px; font-weight: 500; }
.cw-day > small { font-size: 10.5px; color: #ffd36b; }
.cw-dr { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.cw-dr span { display: grid; justify-items: center; }
.cw-dr img { width: 26px; height: 26px; }
.cw-dr small { font-size: 9.5px; color: var(--muted); line-height: 1; }
.cw-day.big { border-color: rgba(255, 179, 71, 0.6); background: rgba(255, 179, 71, 0.08); }
.cw-day.got { opacity: 0.55; }
.cw-day.now { opacity: 1; border-color: #ffd36b; box-shadow: 0 0 0 1px #ffd36b inset, 0 0 12px rgba(255, 211, 107, 0.35); }
.cw-day i { position: absolute; top: 3px; right: 5px; font-style: normal; color: #8fe08a; font-size: 12px; }
.cw-today { margin: 8px 0 0; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-today button { padding: 4px 10px; font-size: 12px; }
.cw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cw-stats span { display: grid; justify-items: center; padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); font-size: 11px; color: var(--muted); }
.cw-stats b { font-size: 18px; color: var(--gold); font-weight: 600; }
.tools #btnBook { padding: 5px 10px; }
/* ฉายาเหนือหัวตัวละคร — v0.30 ย้ายไป js/ui/TitleFx.js (เอฟเฟ็กตามความหายาก) */
.cw-live { display: flex; justify-content: center; padding: 44px 0 30px; margin-bottom: 4px; border-radius: 10px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 70%); overflow: hidden; }
@media (max-width: 760px) {
  .colw { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 86%; z-index: 4; padding: 10px 12px; }
  .cw-mobs { grid-template-columns: 1fr; }
  .cw-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cw-sum { grid-template-columns: 1fr; gap: 1px; }
}
@media (max-height: 560px) {
  .colw { top: calc(6px + env(safe-area-inset-top, 0px)); bottom: auto; max-height: calc(100% - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    left: 0; right: 0; margin: 0 auto; width: min(640px, calc(100% - 16px)); max-width: none; z-index: 6; padding: 8px 12px; }
}
body.touch .colw { background: rgba(26, 19, 38, 0.97); }

/* v0.20 equipment and card grades */
.slot.r-mythic{border-color:#ffd85e;box-shadow:inset 0 0 12px #ffd85e44}
.slot.r-celestial{border-color:#ff5266;box-shadow:inset 0 0 12px #ff526644}
.chat .r-mythic,.dmg.loot.r-mythic{color:#ffd85e;font-weight:600}
.chat .r-celestial,.dmg.loot.r-celestial{color:#ff5266;font-weight:600}

/* v0.24: desktop also needs access to Events and Wardrobe through the menu. */
body:not(.touch) .menu-btn {display:grid;place-items:center;position:absolute;right:16px;bottom:64px;width:48px;height:48px;z-index:8;pointer-events:auto;cursor:pointer;font-size:24px;color:var(--gold);background:rgba(28,20,38,.92);border:1px solid var(--edge-strong);border-radius:12px;}

/* v0.24.1: ตั้งค่าการเก็บของของสัตว์เลี้ยง */
.pet-pick { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 214, 140, 0.18); font-size: 12.5px; }
.pet-pick[hidden] { display: none; }
.pet-pick h3 { margin: 4px 0 6px; font-size: 13px; font-weight: 500; color: var(--gold); }
.pet-pick h3 small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.pp-cats { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pp-cats label, .pp-row { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pp-row { display: flex; margin-top: 6px; }
.pp-row select { font: inherit; font-size: 12px; color: var(--text); background: rgba(20, 14, 28, 0.8); border: 1px solid var(--edge); border-radius: 7px; padding: 3px 6px; }
.pp-items { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow: auto; }
.pp-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; font: inherit; font-size: 11.5px; color: var(--text); border-radius: 999px; background: rgba(143, 224, 138, 0.12); border: 1px solid rgba(143, 224, 138, 0.4); cursor: pointer; }
.pp-item img { width: 20px; height: 20px; }
.pp-item.off { background: rgba(255, 90, 106, 0.12); border-color: rgba(255, 90, 106, 0.5); color: var(--muted); text-decoration: line-through; }
.pp-item.off img { filter: grayscale(1) opacity(0.6); }
.pp-empty { color: var(--muted); }
.pet-pick-btn { font-size: 12px; padding: 4px 10px; }

/* v0.24.2: พื้นหลังช่องไอเทมตามเกรด ขาว → เขียว → ฟ้า → ม่วง → ส้ม → ทอง → แดง */
.slot[class*=" r-"] {
  --rt: #e9edf3; --rb: #9aa3b0; --re: #ffffff;
  background: radial-gradient(120% 90% at 30% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), linear-gradient(160deg, var(--rt), var(--rb));
  border: 1.5px solid var(--re); border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.5);
}
.slot.r-common    { --rt: #f1f3f6; --rb: #a7aebb; --re: #ffffff; }
.slot.r-uncommon  { --rt: #a6ec8f; --rb: #2f8f3a; --re: #c9ffb8; }
.slot.r-rare      { --rt: #8fd0ff; --rb: #1f5fb8; --re: #c4e6ff; }
.slot.r-epic      { --rt: #d6a6ff; --rb: #6a2fb4; --re: #ead0ff; }
.slot.r-legend    { --rt: #ffc477; --rb: #c25a10; --re: #ffe0b0; }
.slot.r-mythic    { --rt: #fff09a; --rb: #c08a12; --re: #fff6c8; }
.slot.r-celestial { --rt: #ff8a96; --rb: #a8122c; --re: #ffc6cd; }
.slot.r-legend, .slot.r-mythic, .slot.r-celestial { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.25), 0 0 8px color-mix(in srgb, var(--re) 55%, transparent); }
.slot.r-mythic::after, .slot.r-celestial::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: slotShine 3.2s ease-in-out infinite;
}
.slot.r-celestial::after { animation-duration: 2.4s; }
@keyframes slotShine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.slot[class*=" r-"]:hover { filter: brightness(1.12); }
.slot[class*=" r-"].sel { outline: 2px solid #fff; outline-offset: 1px; filter: brightness(1.15); }
.slot[class*=" r-"] img { width: 86%; height: 86%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.slot .ref { color: #fff; background: rgba(20,12,24,.72); border-radius: 4px; padding: 0 3px; left: 2px; top: 2px; }
@media (prefers-reduced-motion: reduce) { .slot.r-mythic::after, .slot.r-celestial::after { animation: none; } }
/* v0.25: รายละเอียดอาวุธชุดใหม่ */
.d-stats .wi-type { color: #e8e2f0; }
.d-stats .wi-style { color: #c8bfd8; font-size: 11.5px; }
.d-stats .wi-style i { color: #ff9a9a; font-style: normal; }
.d-stats .wi-roll { color: #8fe0ff; }
.d-stats .wi-roll small { color: #7a90a8; }
.wi-roll .rgood { color: #9af09a; } .wi-roll .rbad { color: #ff7a7a; }
.wi-roll .rg { padding: 0 6px; border-radius: 5px; font-weight: 600; } .rg.g4 { background: rgba(255, 200, 80, 0.25); color: #ffd86a; } .rg.g3 { background: rgba(120, 220, 255, 0.2); color: #9adcff; } .rg.g2 { background: rgba(140, 230, 140, 0.18); color: #a8f0a8; } .rg.g1 { background: rgba(255, 255, 255, 0.08); color: #ddd; } .rg.g0 { background: rgba(255, 90, 90, 0.2); color: #ff9a9a; }
.d-stats .wi-passive { color: #ffd86a; }
.d-stats .wi-set { color: #ff8a9a; font-size: 11.5px; }
.d-stats .wi-set .on { color: #ffd0d8; font-weight: 700; }
.d-stats .wi-ref { color: #ffc89a; font-size: 11px; }
.d-stats .wi-drop { color: #a8b8a0; font-size: 11px; }

/* =====================================================================
   v0.27 REMASTER SKIN — กรอบกรมท่า + ขอบทองเหลือง (ทับธีมเดิมทั้งเกม)
   ===================================================================== */
:root {
  --navy: #0e1836; --navy2: #16244d; --navy3: #1f3268; --ink: #070d22;
  --brass: #d8b45c; --brass2: #f3dc95; --brassD: #8a6a2a; --cream: #f5ecd2;
  --panel: rgba(14, 24, 54, 0.9); --panel-solid: #0e1836;
  --edge: rgba(216, 180, 92, 0.5); --edge-strong: #d8b45c;
  --text: #f5ecd2; --muted: #a9b8dc; --gold: #f3dc95;
  --num: 'Pixelify Sans', 'Kanit', monospace;
}
#game .panel {
  background: linear-gradient(180deg, rgba(31, 50, 104, 0.95), rgba(14, 24, 54, 0.95) 55%, rgba(7, 13, 34, 0.96));
  border: 2px solid var(--brass); border-radius: 10px;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--brassD), 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#game .panel.help, #game .panel.qtrack, #game .panel.target { border-width: 1px; box-shadow: 0 0 0 1px var(--ink), 0 6px 16px rgba(0, 0, 0, 0.4); }
/* มุมเพชรประดับ (การ์ดตัวละคร · มินิแมพ · หน้าต่างหลัก) */
#game .char::before, #game .char::after, #game .mini::before, #game .mini::after,
#game .mapwin::before, #game .mapwin::after {
  content: ''; position: absolute; width: 10px; height: 10px; background: var(--brass2); transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(243, 220, 149, 0.7); pointer-events: none; z-index: 2;
}
#game .char::before, #game .mini::before, #game .mapwin::before { left: -6px; top: -6px; }
#game .char::after, #game .mini::after, #game .mapwin::after { right: -6px; bottom: -6px; }
#game .status, #game .mapwin { position: absolute; }
#game .st-head h2, #game .mp-head b { color: var(--brass2); text-shadow: 0 2px 0 #000; }
#game .st-close { width: 30px; height: 30px; border-radius: 50%; background: #7a1f22; border: 2px solid var(--brass); color: #fff; font-weight: 700; }
#game .st-close:hover { background: #9a2a2e; color: #fff; }
#game .status-btn, #game .cam-btns button, #game .tools button, #game .mp-grid button {
  background: radial-gradient(circle at 50% 30%, var(--navy3), var(--ink)); border: 1px solid var(--brass); color: var(--cream);
}
#game .status-btn:hover, #game .cam-btns button:hover, #game .tools button:hover, #game .mp-grid button:hover { background: radial-gradient(circle at 50% 30%, #2c4590, var(--navy)); border-color: var(--brass2); }
#game .badge { background: radial-gradient(circle at 35% 30%, #ff9a8a, #e2433f); color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--brass); }

/* การ์ดตัวละคร */
#game .char { width: 272px; padding: 9px 12px 10px 9px; }
#game .crest { width: 54px; height: 54px; border: 2px solid var(--brass); box-shadow: 0 0 0 2px var(--ink), 0 3px 8px rgba(0, 0, 0, 0.5); font-size: 22px; }
#game .char .name { color: var(--cream); font-size: 16px; }
#game .char .job { color: var(--brass2); font-size: 11px; letter-spacing: 0.02em; }
#game .bar-row { grid-template-columns: 22px 1fr auto; font-family: var(--num); font-size: 11px; }
#game .bar-row b { color: var(--brass2); font-family: var(--num); }
#game .bar { background: #05091a; border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 2px #000; }
#game .bar-row .bar.hp, #game .bar-row .bar.sp { height: 10px; border-radius: 6px; }
#game .bar.hp > i { background: linear-gradient(180deg, #ff7a6a, #e2433f 55%, #9a1f22); }
#game .bar.sp > i { background: linear-gradient(180deg, #8ab8ff, #3c7cf0 55%, #1c3f9a); }
#game .bar.exp > i { background: linear-gradient(180deg, #a8f0a0, #58d26a 60%, #2a8a3a); }
#game .bar.jexp > i { background: linear-gradient(180deg, #ffe9a0, #e0b040 60%, #8a6a1a); }

/* มินิแมพ */
#game .mini { padding: 0 0 6px; width: 196px; box-sizing: border-box; }
#game .mhead { display: flex; align-items: center; gap: 5px; padding: 5px 6px 4px; }
#game .mhead .sp { flex: 1; }
#game .chip { background: var(--ink); border: 1px solid var(--brass); border-radius: 6px; padding: 0 7px; font: 700 11px/18px var(--num); color: var(--brass2); white-space: nowrap; }
#game .ibtn { width: 24px; height: 24px; padding: 0; border-radius: 6px; background: var(--ink); border: 1px solid var(--brass); color: var(--brass2); display: grid; place-items: center; cursor: pointer; pointer-events: auto; }
#game .ibtn:hover { border-color: var(--brass2); background: var(--navy3); }
#game .ibtn svg { width: 15px; height: 15px; }
#game #minimap { width: calc(100% - 12px); height: auto; aspect-ratio: 1.29; margin: 0 6px; border: 1px solid var(--brassD); border-radius: 4px; cursor: pointer; pointer-events: auto; background: #2a4a2a; box-sizing: border-box; }
#game .mfoot { text-align: center; padding: 4px 6px 0; line-height: 1.25; }
#game .mfoot b { display: block; font: 700 14px var(--display); color: var(--brass2); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game .mfoot small { font: 500 11px var(--num); color: var(--muted); }
#game .mini .cam-btns { margin: 5px 6px 0; }
#game .mini-title { display: none; }

/* หน้าต่างสถานะ: แผงครีม */
#game .status { background: linear-gradient(180deg, rgba(31, 50, 104, 0.97), rgba(14, 24, 54, 0.97)); width: 470px; }
#game .st-levels .lv { background: rgba(7, 13, 34, 0.6); border: 1px solid rgba(216, 180, 92, 0.35); border-radius: 8px; padding: 6px 8px; }
#game .st-body { background: linear-gradient(180deg, #f6eedb, #e8dcc0); border: 2px solid var(--brassD); border-radius: 8px; padding: 8px; color: #2a2238; }
#game .st-name { display: none; }
#game .st-row { grid-template-columns: 30px minmax(0, 1fr) 46px 28px 18px; background: rgba(255, 255, 255, 0.55); border: 1px solid #d4c6a4; }
#game .st-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; border: 2px solid rgba(0, 0, 0, 0.25); }
#game .st-ico svg { width: 18px; height: 18px; }
#game .st-key { font-family: var(--num); font-size: 14px; color: #2a2238; }
#game .st-name { color: #6a6078; }
#game .st-val { background: #fff; border: 1px solid #bba; border-radius: 4px; padding: 1px 5px; font: 700 14px var(--num); color: #2a2238; }
#game .st-bonus { color: #a06a1a; }
#game .st-cost { color: #6a6078; font-family: var(--num); }
#game .st-row.affordable .st-cost { color: #a06a1a; }
#game .st-plus { width: 28px; height: 28px; border-radius: 6px; border: 2px solid #39456a; background: linear-gradient(180deg, #6a7aa8, #3a4670); color: #fff; font: 700 18px var(--num); }
#game .st-plus:disabled { opacity: 0.35; background: linear-gradient(180deg, #6a7aa8, #3a4670); color: #fff; }
#game .st-derived div { background: #fffaf0; border: 1px solid #cbbd9c; border-radius: 6px; margin-bottom: 3px; }
#game .st-derived dt { color: #6a5a48; font-family: var(--num); }
#game .st-derived dd { color: #2a2238; font: 700 13px var(--num); }
#game .st-foot { background: linear-gradient(180deg, #1d2c5c, #0e1836); border: 2px solid var(--brass); border-radius: 8px; padding: 6px 12px; }
#game .st-foot b { color: var(--brass2); font: 700 20px var(--num); }

/* หน้าต่างแผนที่ */
.mapwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100% - 24px)); max-height: calc(100% - 24px); box-sizing: border-box; display: flex; flex-direction: column; pointer-events: auto; z-index: 6; padding: 0; }
.mapwin[hidden] { display: none; }
.mw-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 2px solid var(--brassD); background: linear-gradient(180deg, #24397a, #13214a); border-radius: 8px 8px 0 0; }
.mw-head h2 { margin: 0; font: 700 20px var(--display); color: var(--brass2); letter-spacing: 0.05em; text-shadow: 0 2px 0 #000; }
.mw-tabs { display: flex; gap: 6px; flex: 1; }
.mw-tabs button { font: 500 13px var(--font); color: var(--cream); background: var(--ink); border: 1px solid rgba(216, 180, 92, 0.5); border-radius: 14px; padding: 3px 14px; cursor: pointer; }
.mw-tabs button.on { background: #2a3c74; border-color: var(--brass2); color: var(--brass2); }
.mw-local, .mw-world { padding: 10px 12px 12px; overflow: auto; min-height: 0; }
.mw-local[hidden], .mw-world[hidden] { display: none; }
.mw-scroll { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--brassD); border-radius: 6px; background: #1a2a1a; }
#mwCanvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mw-foot { text-align: center; padding: 8px 0 2px; }
.mw-foot b { display: block; font: 700 22px var(--display); color: var(--brass2); }
.mw-foot span { font: 500 13px var(--num); color: var(--cream); }
.mw-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.mw-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 0 1px #000; }
.mw-legend i.dia { border-radius: 1px; transform: rotate(45deg); background: #e8b8ff; }
.wm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
#wmCanvas { width: 100%; height: auto; aspect-ratio: 680 / 500; display: block; border: 2px solid var(--brassD); border-radius: 6px; cursor: pointer; background: #1d5a8c; }
.wm-info { background: #0a1229; border: 1px solid rgba(216, 180, 92, 0.35); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wm-head { display: flex; gap: 10px; align-items: center; }
.wm-badge { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 2px solid var(--brass); background: var(--navy); display: grid; place-items: center; font: 700 15px var(--num); color: var(--brass2); }
.wm-head h3 { margin: 0; font: 600 18px var(--font); color: var(--cream); }
.wm-head small { color: var(--muted); font-size: 12px; }
.wm-tags { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 2px 6px; font-size: 11px; align-items: center; color: var(--muted); }
.wm-tags b { font: 700 13px var(--num); color: var(--brass2); background: var(--ink); border: 1px solid rgba(216, 180, 92, 0.4); border-radius: 4px; padding: 0 6px; text-align: center; }
.wm-split { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 8px; }
.wm-mobs { display: flex; flex-direction: column; gap: 4px; max-height: 270px; overflow: auto; }
.wm-mobs h4 { margin: 0 0 2px; font: 500 12px var(--font); color: var(--muted); display: flex; justify-content: space-between; }
.wm-mobs h4 em { font-style: normal; color: #ff8a9a; }
.wm-mob { display: flex; gap: 6px; align-items: center; background: #111b3a; border: 1px solid #2a3c74; border-radius: 6px; padding: 3px 6px; cursor: pointer; font: inherit; color: var(--cream); text-align: left; }
.wm-mob:hover, .wm-mob.on { border-color: var(--brass); }
.wm-mob i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px #000; }
.wm-mob b { font-weight: 500; font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-mob small { font: 500 11px var(--num); color: var(--muted); }
.wm-mob.boss { border-color: #c8963a; background: #2a1f12; }
.wm-minibox canvas { width: 100%; height: auto; display: block; border: 1px solid rgba(216, 180, 92, 0.4); border-radius: 4px; image-rendering: pixelated; }
.wm-links { margin: 0; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wm-links button { font: inherit; font-size: 12px; color: var(--brass2); background: var(--ink); border: 1px solid rgba(216, 180, 92, 0.5); border-radius: 12px; padding: 1px 9px; cursor: pointer; }
.wm-note { margin: 0; font-size: 11.5px; color: #8090b8; line-height: 1.5; }
@media (max-width: 760px) {
  .wm-grid { grid-template-columns: 1fr; }
  .wm-split { grid-template-columns: minmax(0, 1fr) 120px; }
  .mw-head h2 { font-size: 16px; }
  .mw-tabs button { padding: 3px 9px; font-size: 12px; }
  #game .mini { width: 150px; }
  #game .mfoot b { font-size: 12px; }
  #game .char { width: 220px; }
  #game .crest { width: 42px; height: 42px; font-size: 18px; }
  #game .status { width: auto; }
  #game .st-row { grid-template-columns: 26px minmax(0, 1fr) 42px 28px 16px; gap: 4px; }
  #game .st-ico { width: 24px; height: 24px; }
}
body.touch #game .mini { width: 140px; }
body.touch #game .mini .cam-btns { display: none; }
body.touch #game #minimap { width: calc(100% - 12px); height: auto; }
.mw-scroll { display: flex; justify-content: center; }
#mwCanvas { width: auto; max-width: 100%; max-height: calc(100vh - 210px); }
/* v0.27: จอสัมผัส — การ์ด/มินิแมพกะทัดรัด */
body.touch #game .char { width: 214px; padding: 7px 10px 8px 7px; gap: 8px; }
body.touch #game .crest { width: 40px; height: 40px; font-size: 17px; }
body.touch #game .char .name { font-size: 14px; }
body.touch #game .mini { width: 140px; }
body.touch #game .mfoot small { display: none; }
body.touch #game .mfoot b { font-size: 11.5px; }
@media (max-height: 500px) {
  body.touch #game .mini { width: 128px; padding-bottom: 5px; }
  body.touch #game .mfoot { display: none; }
  body.touch .auto-dock { top: calc(142px + env(safe-area-inset-top, 0px)); }
  .mw-foot, .mw-legend { display: none; }
  .mw-head { padding: 4px 8px; }
  .mw-local, .mw-world { padding: 6px 8px 8px; }
  .mw-scroll, #mwCanvas { max-height: calc(100vh - 70px); }
  .mapwin { max-height: calc(100% - 8px); }
  .wm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wm-mobs { max-height: 150px; }
}
/* v0.29: การ์ดในอัลบั้มเป็นปุ่ม (แตะดูการ์ดใหญ่) */
button.cw-card { font: inherit; color: inherit; cursor: pointer; }
button.cw-card:hover { border-color: rgba(255, 211, 107, 0.8); }
.cw-card small { font-size: 10.5px; line-height: 1.2; text-align: center; }
.cw-h { margin: 14px 0 4px; font-size: 14px; color: var(--gold); }
.cw-h small { color: var(--muted); font-weight: 400; font-size: 11.5px; }

/* v0.31.1: ตั้งค่าการเก็บของ — ระดับอุปกรณ์ ขาว → แดง */
.pp-eq { margin: 8px 0 4px; padding: 7px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.18); }
.pp-eq > span { display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.pp-eq small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.pp-eq.off .pp-grades { opacity: 0.4; }
.pp-grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pp-g { padding: 5px 0; min-width: 0; font-size: 11.5px; border-radius: 6px; cursor: pointer; color: var(--gc); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0.45; }
.pp-g.on { opacity: 1; border-color: color-mix(in srgb, var(--gc) 55%, transparent); background: color-mix(in srgb, var(--gc) 14%, transparent); }
.pp-g.cur { box-shadow: 0 0 0 2px var(--gc) inset; font-weight: 600; }
.pp-note { display: block; margin: 4px 0 2px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* v0.31.1: ปุ่ม ☰ บนคอม — ย้ายลงแถวปุ่มล่างขวา (เดิมลอยทับกล่องวิธีเล่น) */
body:not(.touch) .menu-btn { right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 34px; font-size: 20px; border-radius: 10px; }
body:not(.touch) .tools { right: 62px; }

/* v0.31.1: คอลัมน์บัฟอยู่ในกรอบตัวละคร → วางชิดขวานอกกรอบเสมอ (เดิมใช้ระยะตายตัว/วัดด้วย JS แล้วคลาดเมื่อย่อขยาย UI) */
.char > .buffs { position: absolute; left: calc(100% + 8px) !important; top: 0 !important; margin: 0; z-index: 2; }

/* v0.32: ดันเจี้ยน/หอคอย — แถบสถานะกลางบน + กระดานอันดับ */
.dg-hud { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 5; display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: center; min-width: 280px; max-width: min(460px, calc(100vw - 600px)); padding: 7px 10px 7px 14px; pointer-events: auto; }
.dg-hud[hidden] { display: none; }
.dg-hud .dg-t { grid-column: 1; font-family: var(--display); font-size: 13.5px; color: var(--gold); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-hud .dg-o { grid-column: 1; font-size: 12.5px; color: var(--text); }
.dg-hud .dg-m { grid-column: 1; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-hud .dg-x { grid-column: 2; grid-row: 1 / span 3; padding: 5px 10px; font-size: 12px; }
.dg-hud.dg-hurry .dg-m { color: #ff7a7a; font-weight: 600; animation: buff-blink 0.8s ease-in-out infinite; }
.dg-rank { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; width: min(420px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 40px)); display: flex; flex-direction: column; padding: 12px 14px; pointer-events: auto; }
.dg-rank[hidden] { display: none; }
.dg-rh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dg-rh b { font-family: var(--display); color: var(--gold); font-size: 15px; }
.dg-rb { overflow: auto; min-height: 60px; }
.dg-me { margin: 2px 0 8px; font-size: 13px; color: var(--text); }
.dg-me b { color: var(--gold); font-size: 15px; }
.dg-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.dg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dg-list li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 13px; }
.dg-list li.me { background: rgba(255, 214, 140, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, 0.4); }
.dg-list .rk { font-weight: 700; text-align: center; color: var(--muted); }
.dg-list li.top1 .rk { color: #ffd85e; } .dg-list li.top2 .rk { color: #d8e0ec; } .dg-list li.top3 .rk { color: #e8a060; }
.dg-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-list .jb { font-size: 11px; color: var(--muted); }
.dg-list .fl { color: var(--gold); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .dg-hud { top: auto; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); min-width: 0; } }
body.touch .dg-hud { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 150px; transform: none; max-width: min(320px, calc(100vw - 420px)); min-width: 200px; }
/* v0.32.1: ในดันเจี้ยนซ่อนแถบบอสใหญ่ ใช้แถบเลือดบางในกล่องสถานะแทน (ไม่บังจอ) */
body.in-dg .bossbar { display: none !important; }
.dg-hud .dg-hp { grid-column: 1; height: 6px; margin: 3px 0 1px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 140, 120, 0.35); }
.dg-hud .dg-hp[hidden] { display: none; }
.dg-hud .dg-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff8a7a, #c8243a); transition: width 0.2s; }
.dg-hud .dg-x { grid-row: 1 / span 4; }

/* v0.35.5: ฉากหลังหน้าไตเติล = ภาพปกพิกเซลอาร์ต (เมือง Asteria ยามเย็น + 4 อาชีพ) · โลโก้เป็นภาพฟอนต์พิกเซล */
.title-screen::before { content: ''; position: absolute; inset: 0; background: #1a1026 url('../assets/brand/title_bg.jpg') center bottom / cover no-repeat; image-rendering: auto; }
.title-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 32, 0.35) 0%, rgba(20, 10, 32, 0.55) 45%, rgba(20, 10, 32, 0.78) 100%); }
.title-screen > * { position: relative; z-index: 1; }
.tt-logo img { display: block; width: min(560px, 96vw); height: auto; margin: 0 auto -10px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); }
.tt-sub { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); color: #f6efe2; }
.tt-panel { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(28, 20, 38, 0.8); }

/* ---------- v0.37 ปาร์ตี้ + กิลด์ ---------- */
.chat .party { color: #8ff0ff; }
.chat .party.me { color: #c4f8ff; }
.chat .guild { color: #c6a8ff; }
.chat .guild.me { color: #e0d0ff; }
.chat .exp.party-exp { color: #9fe8b0; }
.chat-form .chat-ch { flex: none; padding: 4px 8px; font-size: 12px; min-width: 52px; }
.chat-form .chat-ch[data-ch="p"] { color: #8ff0ff; border-color: rgba(143, 240, 255, 0.5); }
.chat-form .chat-ch[data-ch="g"] { color: #c6a8ff; border-color: rgba(198, 168, 255, 0.5); }

.party-frame { position: absolute; left: 0; top: calc(100% + 8px); width: 100%; display: grid; gap: 4px; pointer-events: auto; }
.party-frame[hidden] { display: none; }
.pf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(20, 14, 28, 0.7); font-size: 11.5px; }
.pf-head b { color: #8ff0ff; font-weight: 600; }
.pf-head small { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 9px; background: rgba(20, 14, 28, 0.72); box-shadow: inset 0 0 0 1px rgba(143, 240, 255, 0.16); }
.pf-crest { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--display); color: #1c1222; background: var(--jc, var(--gold)); }
.pf-info { flex: 1; min-width: 0; }
.pf-top { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.pf-top b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-lv { color: var(--muted); font-size: 11px; flex: none; }
.pf-hp { height: 5px; margin-top: 3px; }
.pf-hp i { transition: width 0.25s; }
.pf-map { display: block; font-size: 10px; color: var(--muted); line-height: 1.2; }
.pf-map:empty { display: none; }
.pf-row.away { opacity: 0.62; }
.pf-row.low .pf-hp i { background: linear-gradient(90deg, #ff4a4a, #ff8a5a); }
.pf-row.dead { opacity: 0.45; filter: grayscale(0.8); }
body.touch .party-frame { gap: 3px; }
body.touch .pf-row { padding: 3px 6px; }

.social-prompts { position: absolute; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: grid; gap: 6px; z-index: 30; pointer-events: auto; width: min(340px, calc(100% - 24px)); }
.sp-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(24, 16, 34, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(143, 240, 255, 0.35); animation: sp-in 0.25s ease-out; }
.sp-card.guild { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(198, 168, 255, 0.45); }
.sp-ic { font-size: 22px; }
.sp-card p { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; }
.sp-btns { display: flex; gap: 6px; }
.sp-btns button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 214, 140, 0.3); background: rgba(255, 255, 255, 0.06); color: var(--text); cursor: pointer; }
.sp-btns .yes { background: linear-gradient(#5fd38a, #2f9a5a); color: #08160d; border-color: transparent; font-weight: 600; }
@keyframes sp-in { from { opacity: 0; transform: translateY(-8px); } }

.on-tabs button { padding-left: 8px; padding-right: 8px; }
.on-acts { display: flex; gap: 4px; flex: none; }
.online-win .on-act { flex: none; padding: 3px 8px; font-size: 11.5px; border-radius: 8px; color: #8ff0ff; border-color: rgba(143, 240, 255, 0.35); }
.online-win .on-act.g { color: #c6a8ff; border-color: rgba(198, 168, 255, 0.4); }
.online-win .on-act.no, .online-win .on-wide.no { color: #ffb0a0; border-color: rgba(255, 140, 120, 0.35); }
.online-win .on-act:disabled { opacity: 0.5; }
.online-win .on-wide { width: 100%; padding: 8px; margin-top: 4px; }
.on-row.off { opacity: 0.6; }
.on-row.inv { box-shadow: inset 0 0 0 1px rgba(198, 168, 255, 0.4); }
.g-emb { flex: none; width: 30px; height: 30px; display: block; }
.g-emb.big { width: 46px; height: 46px; }
.g-emb svg, .g-opt svg { width: 100%; height: 100%; display: block; }
.g-head { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(198, 168, 255, 0.14), rgba(255, 214, 140, 0.08)); }
.g-head b { display: block; font-family: var(--display); font-size: 17px; color: var(--gold); }
.g-head small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.g-create { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.g-create > p { margin: 0; font-size: 12px; color: var(--muted); }
.g-preview { display: flex; align-items: center; gap: 10px; }
.g-name { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text); padding: 7px 10px; border-radius: 9px; background: rgba(20, 14, 28, 0.6); border: 1px solid rgba(255, 214, 140, 0.25); }
.g-name:focus { outline: none; border-color: var(--gold); }
.g-ed { display: grid; gap: 5px; }
.g-ed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.g-ed-row > span { width: 62px; font-size: 11.5px; color: var(--muted); }
.online-win .g-opt { width: 30px; height: 30px; padding: 2px; border-radius: 7px; }
.online-win .g-opt.col { width: 22px; height: 22px; padding: 0; background: var(--c) !important; border: 2px solid rgba(0, 0, 0, 0.4); }
.online-win .g-opt[aria-pressed="true"] { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(255, 214, 140, 0.45); }
.online-win .g-rnd { justify-self: start; padding: 4px 10px; font-size: 12px; }
.g-msg { margin: 0; min-height: 1em; font-size: 12px; color: #ffb0a0; }
.g-edit summary { cursor: pointer; font-size: 12.5px; color: var(--gold); padding: 4px 2px; }
.g-edit[open] { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.chat-wrap:not(.typing) .chat-form .chat-ch { display: inline-block; opacity: 0.8; }
/* มือถือ: กรอบปาร์ตี้ไปอยู่ขวาของแผงตัวละคร (ใต้แผงมีปุ่มเมนู) · บัฟย้ายไปใต้แผงแทน */
body.touch #game .char > .party-frame { left: calc(100% + 6px); top: 0; width: 138px; gap: 3px; }
body.touch #game .char.pf-on > .buffs { left: 0 !important; top: calc(100% + 6px) !important; flex-direction: row; }
body.touch .pf-head { padding: 2px 6px; font-size: 10.5px; }
body.touch .pf-head small { font-size: 9.5px; }
body.touch .pf-crest { width: 18px; height: 18px; font-size: 9.5px; }
body.touch .pf-top { font-size: 11px; }
body.touch .pf-map { font-size: 9px; }

/* ---------- v0.38 แถบช่องแชต · กระซิบ · โลก ---------- */
.chat .world { color: #ffd38a; }
.chat .world.me { color: #ffe6b8; }
.chat .whisper { color: #ff9ee0; }
.chat .whisper.me { color: #ffc4ec; }
.chat-tabs { display: flex; gap: 3px; margin: 0 0 4px; pointer-events: auto; flex-wrap: wrap; }
.chat-tabs button { font: inherit; font-size: 11.5px; line-height: 1; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 214, 140, 0.22); background: rgba(20, 14, 28, 0.62); color: var(--muted); cursor: pointer; }
.chat-tabs button:hover { color: var(--text); }
.chat-tabs button[aria-selected="true"] { color: #1c1222; background: var(--gold); border-color: transparent; font-weight: 600; }
.chat-tabs button[data-ch="w"][aria-selected="true"] { background: #ffc46a; }
.chat-tabs button[data-ch="p"][aria-selected="true"] { background: #8ff0ff; }
.chat-tabs button[data-ch="g"][aria-selected="true"] { background: #c6a8ff; }
.chat-tabs button[data-ch="t"][aria-selected="true"] { background: #ff9ee0; }
.chat-form .chat-to { flex: 0 0 92px; min-width: 0; font: inherit; font-size: 12.5px; color: #ffc4ec; padding: 5px 8px; border-radius: 9px; background: rgba(40, 14, 34, 0.7); border: 1px solid rgba(255, 158, 224, 0.4); }
.chat-form .chat-to[hidden] { display: none; }
.chat-wrap[data-ch="w"] .chat-form input#chatInput { border-color: rgba(255, 196, 106, 0.5); }
.chat-wrap[data-ch="p"] .chat-form input#chatInput { border-color: rgba(143, 240, 255, 0.5); }
.chat-wrap[data-ch="g"] .chat-form input#chatInput { border-color: rgba(198, 168, 255, 0.5); }
.chat-wrap[data-ch="t"] .chat-form input#chatInput { border-color: rgba(255, 158, 224, 0.5); }
body.touch .chat-wrap .chat-tabs { display: none; }
body.touch .chat-wrap.open .chat-tabs { display: flex; }
body.touch .chat-tabs button { font-size: 12.5px; padding: 6px 10px; }
.sp-card.friend { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 210, 120, 0.45); }
.player-menu { position: absolute; z-index: 40; min-width: 190px; max-width: 240px; padding: 8px; border-radius: 12px; pointer-events: auto; animation: sp-in 0.15s ease-out; }
.player-menu[hidden] { display: none; }
.pm-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid rgba(255, 214, 140, 0.18); margin-bottom: 6px; }
.pm-head b { display: block; font-family: var(--display); color: var(--gold); font-size: 15px; }
.pm-head small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.pm-guild { display: inline-flex; align-items: center; gap: 3px; color: #e0d0ff; }
.pm-guild i { width: 13px; height: 13px; display: block; }
.pm-guild svg { width: 100%; height: 100%; display: block; }
.pm-list { display: grid; gap: 3px; }
.pm-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text); padding: 7px 8px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.pm-item:hover:not(:disabled) { background: rgba(255, 214, 140, 0.14); }
.pm-item:disabled { opacity: 0.55; cursor: default; }
.pm-ic { width: 20px; text-align: center; }
.pm-l small { display: block; font-size: 10.5px; color: var(--muted); }
.pm-note { margin: 2px 4px 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }
body.touch .pm-item { padding: 10px 10px; font-size: 14px; }
/* v0.38 ลูกศรนำทางเควส */
.qnav { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; will-change: transform; }
.qnav[hidden] { display: none; }
.qnav-arrow { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 210, 90, 0.7)); animation: qnav-pulse 1.2s ease-in-out infinite; }
.qnav-arrow svg { width: 100%; height: 100%; display: block; fill: #ffd25a; stroke: #3a2208; stroke-width: 2.2; stroke-linejoin: round; }
.qnav-tip { position: absolute; left: 22px; top: -14px; width: max-content; max-width: 210px; padding: 3px 8px; border-radius: 8px; background: rgba(18, 12, 26, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 210, 90, 0.35); }
.qnav.left .qnav-tip { left: auto; right: 22px; }
.qnav-tip b { display: block; font-size: 11px; color: #ffd25a; font-weight: 600; line-height: 1.2; }
.qnav-tip small { display: block; font-size: 10.5px; color: #f2e8d8; line-height: 1.25; }
@keyframes qnav-pulse { 50% { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 210, 90, 1)); } }
.qt-nav { float: right; margin-left: 4px; font-size: 12px; opacity: 0.4; cursor: pointer; pointer-events: auto; }
.qt-nav.on { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 210, 90, 0.9)); }
body.touch .qnav-tip { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .qnav-arrow { animation: none; } }
.on-tabs button { font-size: 12.5px; padding-left: 4px !important; padding-right: 4px !important; white-space: nowrap; }

/* v0.40.1 ปุ่มเปิด/ปิดลูกศรนำทางบนแถบติดตามเควส */
.qt-top { display: flex; align-items: center; gap: 4px; }
.qt-top .qt-head { flex: 1; min-width: 0; }
.qt-navtog { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; font: inherit; font-size: 10.5px; color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; cursor: pointer; }
.qt-navtog b { font-weight: 600; }
.qt-navtog.on { color: var(--gold); border-color: rgba(255, 210, 90, 0.55); background: rgba(255, 210, 90, 0.12); }

/* v0.46 เกรดอุปกรณ์ใหม่: ห้วงสมุทร (Lv.110) · เทพสวรรค์ (Lv.135) */
.slot.r-abyssal { --rt: #9ef7ea; --rb: #0e6a7a; --re: #c8fff6; }
.slot.r-divine  { --rt: #fffbe8; --rb: #c8a24a; --re: #ffffff; }
.slot.r-abyssal, .slot.r-divine { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.25), 0 0 10px color-mix(in srgb, var(--re) 65%, transparent); }
.slot.r-abyssal::after, .slot.r-divine::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: slotShine 2s ease-in-out infinite;
}
.chat .r-abyssal, .dmg.loot.r-abyssal { color: #3fe6d0; font-weight: 600; }
.chat .r-divine, .dmg.loot.r-divine { color: #fff1b0; font-weight: 700; text-shadow: 0 0 6px rgba(255, 230, 150, 0.7); }
.chat .f-abyssal, .chat .f-divine { font-weight: 700; color: transparent; background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: flow1 4s linear infinite; }
.chat .f-abyssal { background-image: linear-gradient(110deg, #3fe6d0, #bff8ff, #2a9ad8, #3fe6d0); }
.chat .f-divine { background-image: linear-gradient(110deg, #fff1b0, #ffffff, #ffd86a, #fff1b0); }
.dmg.loot.f-abyssal { color: #7ff4e4; font-size: 26px; font-family: 'Lilita One', var(--display); text-shadow: 0 0 10px rgba(63, 230, 208, 0.9), 0 1px 0 #0a1a22; }
.dmg.loot.f-divine { color: #fff6d0; font-size: 28px; font-family: 'Lilita One', var(--display); text-shadow: 0 0 12px rgba(255, 236, 160, 1), 0 1px 0 #2a2010; }
.g-rar[data-rarity="abyssal"] { color: #3fe6d0; }
.g-rar[data-rarity="divine"] { color: #fff1b0; }

/* ---------- v0.58 มือถือ (iOS/Android): ย่อ HUD ทั้งหมดให้พอดีจอ ไม่บังเกม ----------
   ใช้ zoom ย่อทั้งก้อน (ตำแหน่ง/ปุ่ม/ตัวอักษรย่อตามกัน) · จอยสติ๊กคำนวณจาก getBoundingClientRect จึงยังแม่น */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch { --hudz: 0.7; }
}
@media (orientation: landscape) and (max-height: 400px) {
  body.touch { --hudz: 0.62; }
}
@media (orientation: portrait) and (max-width: 520px) {
  body.touch { --hudz: 0.8; }
}
body.touch .hud > :is(.panel.char, .buffs, .panel.mini, .topbar, .qtrack, .hotbar, .skill-arc, .attack-btn, .menu-btn, .tools, .joystick, .chat-wrap, .target, .bossbar, .auto-dock, .banner, .party-row, .pf-row) {
  zoom: var(--hudz, 1);
}
@media (orientation: landscape) and (max-height: 520px) {
  body.touch .qtrack { max-height: 46vh; max-width: 260px; }
  body.touch .qtrack .qt-list { max-height: 34vh; overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 520px), (orientation: portrait) and (max-width: 520px) {
  body.touch .tag { font-size: 10.5px; }
  body.touch .tag small { font-size: 8.5px; }
  body.touch .tag-mob, body.touch .tag-item { font-size: 10px; }
}
/* แนวตั้ง: แถบไอคอนด้านบนย้ายลงมาใต้กรอบตัวละคร/มินิแมป ไม่ทับกัน */
@media (orientation: portrait) and (max-width: 520px) {
  body.touch .topbar { top: calc(178px + env(safe-area-inset-top, 0px)); width: max-content; max-width: calc(100vw / var(--hudz, 1) - 8px); flex-wrap: wrap; justify-content: center; }
}

/* v0.77 เกรดสูงสุด: นิรันดร์กาล · รุ้งสุริยา (อุปกรณ์หลอม) */
.slot.r-eternal { --rt: #fff4ff; --rb: #8a4ad8; --re: #ffd8ff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -6px 10px rgba(0,0,0,.25), 0 0 12px rgba(255, 190, 255, 0.85); }
.slot.r-eternal::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, #ff7ab8, #ffd86a, #8affb0, #7ad8ff, #c89aff, #ff7ab8); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; animation: etSpin 3s linear infinite; }
.slot.r-eternal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: slotShine 1.6s ease-in-out infinite; }
@keyframes etSpin { to { filter: hue-rotate(360deg); } }
.chat .r-eternal, .dmg.loot.r-eternal, .g-rar[data-rarity="eternal"], .r-eternal-text { font-weight: 700; color: transparent; background: linear-gradient(110deg, #ff9ad0, #ffe08a, #9affc0, #8ad8ff, #d8a8ff, #ff9ad0) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: flow1 3s linear infinite; }
.dmg.loot.r-eternal { font-size: 30px; font-family: 'Lilita One', var(--display); filter: drop-shadow(0 0 8px rgba(255, 200, 255, 0.9)); }
@media (prefers-reduced-motion: reduce) { .slot.r-eternal::before, .slot.r-eternal::after { animation: none; } }

/* v0.81 เข้าสู่ระบบด้วย Google · เล่นแบบไม่สมัคร · ผูกบัญชี */
.tt-social { display: grid; gap: 8px; margin: 2px 0 4px; }
.tt-social button { min-height: 44px; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tt-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 10px; }
.tt-google:hover { background: #f5f7ff; }
.tt-google svg { width: 20px; height: 20px; }
.tt-guest { background: linear-gradient(90deg, rgba(255, 196, 90, 0.22), rgba(255, 138, 60, 0.22)); color: #ffe2a8; border: 1px solid rgba(255, 196, 90, 0.55); border-radius: 10px; }
.tt-or { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; color: var(--muted, #b3b5bd); font-size: 12px; }
.tt-or::before, .tt-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); }
.tt-guestbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: rgba(255, 170, 60, 0.14); border: 1px solid rgba(255, 170, 60, 0.5); font-size: 12.5px; color: #ffd9a0; }
.tt-guestbar button { padding: 6px 12px; min-height: 34px; white-space: nowrap; }

.tt-legal{margin:10px 0 0;font-size:11px;line-height:1.5;text-align:center;opacity:.7}.tt-legal a{color:inherit;text-decoration:underline}

/* v0.82 กันโกง (แอดมิน) */
.cs-cheat-all{display:flex;align-items:center;gap:6px;font-size:12px;margin:0 0 8px;opacity:.85}
.cs-cheat.hard{border-left:3px solid #ff5a5a}.cs-cheat.soft{border-left:3px solid #ffc04a}
.cs-cheat .tm-info small{display:block;line-height:1.45}.cs-cheat .cs-reason{color:#ffd9a0}
.cs-cheat .tm-foot:empty{display:none}

/* v0.83 Closed Beta */
.tt-beta{display:inline-block;margin:-8px auto 14px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#1a1206;background:linear-gradient(180deg,#ffe48a,#ffb84a);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.beta-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,6,14,.62);pointer-events:auto}
.beta-card{width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px;text-align:left}
.beta-card h2{margin:0 0 4px;font-size:20px;color:var(--gold,#ffd45a)}
.beta-intro{margin:0 0 12px;font-size:14px;opacity:.9}
.beta-card ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.beta-card li{display:flex;gap:10px;align-items:flex-start}
.beta-card li i{font-style:normal;font-size:20px;line-height:1.2;width:26px;text-align:center;flex:none}
.beta-card li b{display:block;font-size:14px}.beta-card li small{display:block;font-size:12px;line-height:1.5;opacity:.82}
.beta-links{margin:0 0 12px;font-size:12px;opacity:.75}.beta-links a{color:inherit}
.beta-ok{width:100%;padding:10px;font-size:15px}
.beta-card .beta-ok{border:0;border-radius:10px;cursor:pointer;font-weight:700;color:#1a1206;background:linear-gradient(180deg,#ffe48a,#ffb84a);box-shadow:0 3px 0 #9a6420,0 6px 18px rgba(0,0,0,.35)}
.beta-card .beta-ok:hover{filter:brightness(1.06)}

/* v0.83 บอลลูนแชทอยู่เหนือฉายาเสมอ */
.bubble { z-index: 20; }

/* v0.83 บอลลูนแชทผู้เล่นอยู่ข้างตัว · หางชี้เข้าหาตัวละคร */
.bubble.bubble-side { box-sizing: border-box; }
.bubble.bubble-side::after { left: -7px; top: 50%; bottom: auto; margin: -6px 0 0; border-right: 0; border-bottom: 1.5px solid rgba(60, 40, 70, 0.55); border-left: 1.5px solid rgba(60, 40, 70, 0.55); background: #faf4e6; }
.bubble.bubble-side.flip::after { left: auto; right: -7px; border-left: 0; border-right: 1.5px solid rgba(60, 40, 70, 0.55); }