/* HUD ในเกม — ใช้ตัวแปรจาก theme.css เท่านั้น (ความโปร่งใสใช้ color-mix)
 * ชั้น: .world (ฉากตัวอย่าง) → .hud → .win-layer (หน้าต่าง) → .hud-over (ตาย/NPC/อีโมต/เมนู)
 * .is-touch = จอสัมผัส/จอเล็ก (ตั้งจาก JS ด้วย media query เดียวกับ TOUCH_MQ)
 */

.game-screen { position: fixed; inset: 0; overflow: hidden; background: var(--bg); user-select: none; -webkit-user-select: none; }
.game-screen input, .game-screen textarea { user-select: text; -webkit-user-select: text; }

/* ---------- ฉากหลังตัวอย่าง ---------- */
.world { position: absolute; inset: 0; overflow: hidden; cursor: pointer; transition: filter .6s; }
.world-map { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-size: 100% 100%; background-color: var(--bg-2); will-change: transform; }
.world-tint { position: absolute; inset: 0; pointer-events: none; transition: background .8s; }
.world-tint[data-time="night"] {
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--moon-glow) 7%, transparent) 0 90px, transparent 260px),
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--bg) 18%, transparent) 0 150px, color-mix(in srgb, var(--bg) 64%, transparent) 560px);
}
.world-tint[data-time="dusk"] { background: linear-gradient(color-mix(in srgb, var(--gold-2) 16%, transparent), color-mix(in srgb, var(--bg) 34%, transparent)); }
.game-screen:has(.death:not([hidden])) .world { filter: grayscale(.85) brightness(.5); transition: filter 1.2s ease; }
.world.shake { animation: shake .25s; }
.world.warp .world-map { animation: warpIn .5s ease-out; }

/* เอนทิตี (ขนาดคงที่ไม่ขึ้นกับการซูมฉาก) */
.ent {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%) scale(calc(1 / var(--s, 1))); transform-origin: 50% 100%;
}
.ent::after { content: ""; position: absolute; bottom: 14px; width: 34px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 55%, transparent); z-index: -1; }
.ent-body { font-size: 30px; line-height: 1.05; filter: drop-shadow(0 2px 1px var(--bg)); transition: transform .15s; }
.ent-name { margin-top: 1px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text); text-shadow: 0 1px 2px var(--bg), 0 0 3px var(--bg), 0 0 1px var(--bg); }
.ent-name small { font-weight: 600; opacity: .75; }
.ent-aura { position: absolute; left: 50%; bottom: 10px; width: 54px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--moon-glow) 55%, transparent), transparent); pointer-events: none; animation: aura 2.4s ease-in-out infinite alternate; z-index: -1; }
.world.no-aura .ent.pc .ent-aura { display: none; }
.world.no-fx .ent.pc .ent-aura { animation: none; opacity: .4; }
.ent.me .ent-name { color: var(--moon); }
.ent.me.flip .ent-body { transform: scaleX(-1); }
.ent.me.sitting .ent-body { transform: scaleY(.78) translateY(5px); }
.ent.me.dead .ent-body { filter: grayscale(1); }
.ent.pc .ent-name { color: var(--info); }
.ent.pc.party .ent-name { color: var(--ch-party); }
.ent.pc.guild .ent-name { color: var(--ch-guild); }
.ent.npc .ent-name { color: var(--gold); }
.ent-quest { font-size: 16px; animation: bob 1.4s ease-in-out infinite; }
.ent.mob .ent-body { animation: bob 2.2s ease-in-out infinite; }
.ent.mob .ent-name { color: var(--text-2); }
.ent.mob.mvp .ent-body { font-size: 46px; filter: drop-shadow(0 0 10px var(--gold-2)); }
.ent.mob.mvp .ent-name { color: var(--gold); font-size: 13px; }
.ent.mob.dead { opacity: .22; filter: grayscale(1); pointer-events: none; }
.ent.mob.target::before { content: ""; position: absolute; bottom: 8px; width: 60px; height: 22px; border-radius: 50%; border: 2px solid var(--danger); box-shadow: 0 0 10px var(--danger); animation: pulse 1s infinite; z-index: -1; }
.ent.mob.mvp.target::before { border-color: var(--gold); box-shadow: 0 0 14px var(--gold); width: 84px; }
.ent-hp { width: 46px; height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--bg); margin-bottom: 2px; }
.ent-hp i { display: block; height: 100%; background: linear-gradient(var(--hp-hi), var(--hp)); transition: width .2s; }
.ent-bubble { position: absolute; bottom: calc(100% + 2px); padding: 2px 8px; border-radius: 12px; background: var(--text); font-size: 22px; line-height: 1.3; box-shadow: var(--shadow); animation: pop .2s; }
.world[data-names="none"] .ent.pc .ent-name, .world[data-names="none"] .ent.mob .ent-name { display: none; }
.world[data-names="party"] .ent.pc:not(.party) .ent-name { display: none; }
.spot {
  position: absolute; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); border: 1px dashed var(--gold);
  background: color-mix(in srgb, var(--bg) 45%, transparent); animation: bob 2s ease-in-out infinite;
}
.dmg {
  position: absolute; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -70px) scale(calc(1 / var(--s, 1)));
  font: 800 20px var(--font); color: var(--text); text-shadow: 0 2px 0 var(--bg), 0 0 4px var(--bg);
  animation: dmgUp 1s ease-out forwards;
}
.dmg.crit { color: var(--gold); font-size: 27px; }
.dmg.hurt { color: var(--danger); }
.dmg.heal { color: var(--ok); }
.dmg.sp { color: var(--sp-hi); }
.dmg.buff { color: var(--moon-glow); font-size: 14px; }
.walk-mark { position: absolute; width: 26px; height: 12px; border-radius: 50%; border: 2px solid var(--moon-glow); transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); animation: walkMark .6s ease-out forwards; pointer-events: none; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: var(--z-hud); pointer-events: none; font-size: 13px; }
.hud [data-part] { pointer-events: auto; }
.hud [data-part="float"], .hud [data-part="touch"] { pointer-events: none; }
.hud-panel { background: var(--panel); border: 1px solid var(--frame); border-radius: var(--r); box-shadow: var(--shadow); }
.hud button { font-family: inherit; }

/* คอลัมน์ซ้าย: ผู้เล่น / บัฟ / ปาร์ตี้ */
.hud-left { position: absolute; left: 10px; top: 10px; width: 292px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.hud-me { display: flex; gap: 10px; padding: 8px 10px; }
.hud-me.low { border-color: var(--danger); animation: lowhp 1s ease-in-out infinite; }
.me-ava {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer; font-size: 26px; color: var(--text);
  background: radial-gradient(circle at 40% 35%, var(--surface-3), var(--bg)); border: 2px solid var(--gold-2); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent);
}
.me-ava:hover { border-color: var(--gold); }
.me-pts { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font: 800 10.5px/18px var(--font); font-style: normal; animation: pulse 1.6s infinite; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.me-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.me-job { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.me-lv { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-2); align-items: center; }
.me-lv b { color: var(--text); }
.me-lune { margin-left: auto; color: var(--gold); }
.hud-me .bar { height: 13px; }
.hud-me .bar > span { font-size: 9.5px; line-height: 11px; }
.me-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.me-exp .bar { height: 10px; }
.me-exp .bar > span { font-size: 8.5px; line-height: 8px; }

.hud-buffs { display: flex; flex-wrap: wrap; gap: 4px; pointer-events: auto; }
.hud-buffs:empty { display: none; }
.buff { position: relative; width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; background: var(--surface); border: 1px solid var(--frame); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.buff em { position: absolute; right: -4px; bottom: -4px; padding: 0 3px; border-radius: 4px; background: var(--bg); color: var(--gold); font: 700 9.5px/13px var(--font); font-style: normal; }
.buff.ending { animation: pulse .6s infinite; }

.hud-party { width: 210px; padding: 6px 8px; }
.pt-head { display: flex; align-items: center; justify-content: space-between; color: var(--ch-party); font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.pt-open { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
.pt-m { display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-radius: var(--r-sm); cursor: pointer; }
.pt-m:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pt-m.off { opacity: .45; }
.pt-m.far { opacity: .75; }
.pt-m.far .pt-name::after { content: " ↗"; color: var(--muted); }
.pt-job { font-size: 17px; flex: none; }
.pt-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-m .bar.thin { height: 4px; margin-top: 2px; }

/* ด้านบนกลาง: ประกาศ + เป้าหมาย */
.hud-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(420px, 38vw); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.hud-announce { width: min(560px, 60vw); display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 20px; background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid var(--ch-gm); box-shadow: var(--shadow); overflow: hidden; animation: drop .3s; }
.hud-announce.mvp { border-color: var(--gold); box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent); }
.an-tag { flex: none; font-weight: 800; font-size: 12px; color: var(--ch-gm); white-space: nowrap; }
.hud-announce.mvp .an-tag { color: var(--gold); }
.an-track { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--bg) 6%, var(--bg) 94%, transparent); }
.an-text { display: inline-block; white-space: nowrap; padding-left: 100%; font-weight: 600; animation: marquee 9s linear forwards; }
.hud-target { width: 100%; padding: 6px 10px 5px; animation: drop .15s; }
.tg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.tg-glyph { font-size: 18px; }
.tg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-lv { color: var(--text-2); font-size: 12px; }
.tg-elem { font-size: 11px; padding: 1px 6px; }
.tg-mvp { padding: 1px 5px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); font: 800 10px/16px var(--font); }
.tg-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.tg-x:hover { color: var(--text); }
.tg-hint { text-align: center; margin-top: 3px; }
.hud-target.mvp { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-2), 0 0 26px color-mix(in srgb, var(--gold) 30%, transparent); }
.hud-target.mvp .tg-name { color: var(--gold); }
.hud-target.mvp .bar { height: 16px; }
.hud-target.dead { opacity: .6; }

/* คอลัมน์ขวา: มินิแมพ + เควสต์ */
.hud-right { position: absolute; right: 10px; top: 10px; width: 196px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.hud-mini { padding: 6px 9px 8px; }
.mm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.mm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--moon); }
.mm-ch { color: var(--muted); font-size: 11px; white-space: nowrap; }
.mm-view { position: relative; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line-2); cursor: pointer; background: var(--bg); }
.mm-inner { position: absolute; left: 0; top: 0; background-size: 100% 100%; transition: transform .1s linear; }
.game-screen:has(.world[data-time="night"]) .mm-inner { filter: brightness(.72) saturate(.8); }
.mm-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px var(--bg); }
.mm-dot.mob { background: var(--danger); }
.mm-dot.mob.mvp { width: 9px; height: 9px; background: var(--gold); animation: pulse 1s infinite; }
.mm-dot.npc { background: var(--ok); }
.mm-dot.spot { background: var(--info); }
.mm-dot.portal { background: #9fd8ff; box-shadow: 0 0 6px #9fd8ff; width: 8px; height: 8px; } /* ประตูวาร์ป (D-065) */
.mm-dot.portal.secret { background: #ffb0e8; box-shadow: 0 0 6px #ffb0e8; }
.mm-dot.me { z-index: 2; width: 9px; height: 9px; background: var(--moon); box-shadow: 0 0 0 2px var(--moon-glow), 0 0 8px var(--moon-glow); }
.mm-zoom { position: absolute; right: 3px; top: 3px; display: flex; flex-direction: column; gap: 2px; }
.mm-zoom button { width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--text); background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line-2); }
.mm-zoom button:disabled { opacity: .35; cursor: default; }
.mm-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--text-2); }
.mm-mail { position: relative; background: none; border: 0; cursor: pointer; font-size: 14px; padding: 0 6px 0 0; }
.mm-mail .badge { position: absolute; right: -6px; top: -7px; min-width: 15px; height: 15px; font-size: 9.5px; padding: 0 3px; }
.moon-power { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 7px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line); }
.moon-power.on { border-color: var(--moon-glow); box-shadow: inset 0 0 12px color-mix(in srgb, var(--moon-glow) 22%, transparent); }
.mp-glyph { font-size: 20px; flex: none; }
.moon-power.on .mp-glyph { animation: moonGlow 2.4s ease-in-out infinite alternate; }
.mp-name { display: block; font-size: 10.5px; color: var(--text-2); }
.mp-val { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.moon-power.on .mp-val { color: var(--moon-glow); }

/* แผงเควสต์ซ้ายสุด: ข้อความโปร่งใส (ไม่มีกรอบ/พื้น) อ่านง่ายด้วยเงาตัวอักษร (D-058) */
.hud-quests { padding: 2px 2px 4px; max-height: 40vh; overflow-y: auto; pointer-events: auto; width: 230px; background: none; border: 0; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.6); }
.qt-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 2px; cursor: pointer; background: none; border: 0; color: var(--gold); font-weight: 700; font-size: 12px; }
.qt-caret { margin-left: auto; color: var(--muted); }
.qt-item { padding: 4px 4px 5px; border-radius: 6px; }
.qt-n { color: var(--text-2); }
.qt-item:hover { background: rgba(0,0,0,.18); }
.qt-item.run { background: rgba(0,0,0,.22); box-shadow: inset 2px 0 0 var(--gold); }
.qt-name { font-size: 12.5px; font-weight: 700; margin-bottom: 1px; color: #ffe8a8; cursor: pointer; }
.qt-goal { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #eef0fb; }
.qt-goal.done { color: var(--ok); }
.qt-hint { color: #9fffc0; margin-top: 1px; }
.qt-auto { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.qt-go { pointer-events: auto; padding: 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); background: rgba(12,14,30,.55); color: var(--gold); font: 700 11px var(--font); cursor: pointer; text-shadow: none; }
.qt-go:hover { background: rgba(243,207,116,.18); }
.qt-go.on { color: #ffb4b4; border-color: rgba(255,120,120,.7); }
.qt-status { color: #bfe6ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* แชท */
.hud-chat { position: absolute; left: 10px; bottom: 10px; width: 400px; height: 214px; display: flex; flex-direction: column; overflow: hidden; background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); }
.chat-head { display: flex; align-items: center; border-bottom: 1px solid var(--line); flex: none; }
.chat-tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs button { position: relative; padding: 6px 8px 5px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.chat-tabs button:hover { color: var(--text); }
.chat-tabs button.on { color: var(--text); border-bottom-color: var(--gold); }
.chat-tabs .ch-party.on { border-bottom-color: var(--ch-party); }
.chat-tabs .ch-guild.on { border-bottom-color: var(--ch-guild); }
.chat-tabs .ch-whisper.on { border-bottom-color: var(--ch-whisper); }
.chat-tabs .ch-world.on { border-bottom-color: var(--ch-world); }
.chat-tabs .ch-system.on { border-bottom-color: var(--ch-system); }
.chat-tabs .badge { position: absolute; right: -1px; top: 0; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px; }
.chat-min { flex: none; width: 30px; height: 28px; background: none; border: 0; color: var(--muted); cursor: pointer; transition: transform .15s; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; font-size: 12.5px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.cl { word-break: break-word; text-shadow: 0 1px 1px var(--bg); }
.cl time { margin-right: 4px; color: var(--faint); font-size: 10.5px; }
.cl-ch { font-size: 11px; opacity: .8; }
.cl .nm { color: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.cl .nm:hover { text-decoration: underline; }
.cl.ch-local { color: var(--ch-local); }
.cl.ch-party { color: var(--ch-party); }
.cl.ch-guild { color: var(--ch-guild); }
.cl.ch-whisper { color: var(--ch-whisper); }
.cl.ch-world { color: var(--ch-world); }
.cl.ch-system { color: var(--ch-system); }
.cl.ch-gm { color: var(--ch-gm); font-weight: 600; }
.chat-send { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border-top: 1px solid var(--line); flex: none; }
.chat-ch { flex: none; min-height: 30px; padding: 2px 4px; border-radius: var(--r-sm); background: var(--bg); color: var(--text); border: 1px solid var(--line-2); font: inherit; font-size: 12px; }
.chat-input { min-height: 30px; padding: 4px 8px; font-size: 13px; }
.chat-go { min-height: 30px; flex: none; }
.chat-count { position: absolute; right: 44px; top: -17px; padding: 0 5px; border-radius: 4px; background: var(--bg); color: var(--muted); }
.chat-peek { display: none; width: 100%; align-items: center; gap: 6px; padding: 5px 8px; background: none; border: 0; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; }
.chat-peek .cl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-chat.collapsed { height: auto; }
.hud-chat.collapsed .chat-log, .hud-chat.collapsed .chat-send { display: none; }
.hud-chat.collapsed .chat-peek { display: flex; }
.hud-chat.collapsed .chat-min { transform: rotate(180deg); }

/* ด้านล่างกลาง: ปุ่มบริบท + hotbar */
.hud-bottom { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.hud-hotbar { display: flex; gap: 4px; padding: 5px; background: var(--panel); border: 1px solid var(--frame); border-radius: var(--r); box-shadow: var(--shadow); }
.hud-hotbar .slot { width: 46px; height: 46px; }
.hud .slot.hb .ph { font-size: 22px; }
.hud .slot.hb.empty { cursor: default; }
.hud .slot.nosp { filter: saturate(.25) brightness(.75); }
.hud .slot.zero { opacity: .38; }
.hud .slot.over { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.hud .slot.hb:not(.empty):active { transform: scale(.94); }
.hud .slot .cd { inset: 0; transform-origin: 50% 100%; animation-name: cdSweep; animation-timing-function: linear; animation-fill-mode: forwards; }
.hud-actions { display: flex; gap: 6px; }
.act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 18px; cursor: pointer; font-size: 17px; color: var(--text); background: var(--panel); border: 1px solid var(--frame); box-shadow: var(--shadow); }
.act-btn:hover { border-color: var(--frame-hi); }
.act-btn.on { border-color: var(--gold); background: var(--surface-3); }
.act-btn.near { font-size: 13px; font-weight: 700; color: var(--gold); border-color: var(--gold); animation: nearPulse 1.6s ease-in-out infinite; }
.hud-float { position: relative; width: 0; height: 0; pointer-events: none; }
.exp-float { position: absolute; left: 0; bottom: 8px; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px; border-radius: 14px; font-size: 13px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line-2); animation: expUp 2.4s ease-out forwards; }

/* เมนูหลัก (ขวาล่าง) */
/* เมนูหลัก: ไอคอนเหรียญแยกแต่ละปุ่ม ด้านบนกลางจอ แถวเดียว (กว้างเกินพื้นที่ → เลื่อนแนวนอน) */
.hud-menu { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); max-width: calc(100vw - 540px); z-index: 2; display: flex; align-items: flex-start; }
.mi-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 3px 4px 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hud-menu > .mi-tgl { margin-top: 7px; }
.mi-row::-webkit-scrollbar { display: none; }
.mi { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle at 50% 30%, #34407a, #1a1f3b 62%, #0f1226);
  border: 1.5px solid var(--frame);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 3px rgba(240,212,138,.18), 0 3px 8px rgba(0,0,0,.55);
  transition: transform .12s, box-shadow .15s, border-color .15s; }
.mi .ui-ico { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.mi .ui-ico .f { fill: currentColor; stroke: none; }
.mi .mi-g { font-size: 18px; }
.mi:hover { transform: translateY(-2px); border-color: var(--frame-hi); color: #fff3cf; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 3px rgba(240,212,138,.3), 0 0 14px rgba(243,207,116,.35), 0 3px 8px rgba(0,0,0,.55); }
.mi:focus-visible { outline: 2px solid var(--frame-hi); outline-offset: 2px; }
.mi.on { border-color: var(--frame-hi); color: #fff6d8; background: radial-gradient(circle at 50% 30%, #4a57a0, #252d5c 62%, #141836); box-shadow: inset 0 0 0 2px rgba(0,0,0,.45), inset 0 0 0 3px rgba(240,212,138,.45), 0 0 16px rgba(159,216,255,.35); }
.mi.gap { margin-left: 7px; }
.mi-tgl { width: 32px; height: 32px; }
.mi-tgl .ui-ico { width: 17px; height: 17px; }
.mi .badge { position: absolute; right: -3px; top: -3px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 3px; }
.hud-top { top: 60px; }

/* ปุ่มสัมผัส (ซ่อนบนเดสก์ท็อป) */
.hud-touch { display: none; }

/* ชั้นหน้าต่าง */
.win-layer { position: absolute; inset: 0; pointer-events: none; }
.win-layer > .win { pointer-events: auto; }

/* ---------- ชั้นซ้อน ---------- */
.hud-over { position: absolute; inset: 0; z-index: 900; pointer-events: none; }
.hud-over > * { pointer-events: auto; }
.hud-over > .lvup { pointer-events: none; }

.ctxmenu { position: fixed; min-width: 176px; padding: 4px; background: var(--panel); border: 1px solid var(--frame); border-radius: var(--r); box-shadow: var(--shadow-lg); animation: pop .12s; }
.ctx-title { padding: 4px 8px 6px; margin-bottom: 3px; font-weight: 700; color: var(--gold); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ctxmenu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 8px; border-radius: 4px; background: none; border: 0; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.ctxmenu button:hover { background: var(--surface-3); }
.ctxmenu button.danger { color: var(--danger); }

.emote-wheel { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.ew-ring { position: relative; width: 264px; height: 264px; border-radius: 50%; border: 1px solid var(--frame); box-shadow: var(--shadow-lg); animation: pop .15s; background: radial-gradient(circle, color-mix(in srgb, var(--surface) 94%, transparent) 0 58%, color-mix(in srgb, var(--surface-2) 94%, transparent) 59%); }
.ew-ring button[data-e] { position: absolute; left: calc(50% + var(--x) * 102px - 20px); top: calc(50% + var(--y) * 102px - 20px); width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 22px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line-2); transition: transform .1s; }
.ew-ring button[data-e]:hover { transform: scale(1.2); border-color: var(--gold); }
.ew-ring button.ew-x { left: calc(50% - 20px); top: calc(50% - 20px); font-size: 15px; color: var(--muted); }
.ew-hint { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; }

.npc-box { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); width: min(620px, calc(100vw - 20px)); display: flex; gap: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--gold-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: drop .2s; }
.npc-portrait { position: relative; flex: none; }
.npc-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; }
.npc-main { flex: 1; min-width: 0; }
.npc-name { display: flex; align-items: baseline; gap: 8px; padding-right: 24px; color: var(--gold); }
.npc-say { min-height: 3.2em; margin: 6px 0 8px; line-height: 1.6; color: var(--text); cursor: pointer; }
.npc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.npc-x { position: absolute; right: 8px; top: 6px; width: 30px; height: 30px; background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; }

.death { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; animation: fade .6s; background: radial-gradient(circle, color-mix(in srgb, var(--bg) 50%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)); }
.death-card { position: relative; width: min(400px, 100%); padding: 22px; text-align: center; background: var(--panel); border: 1px solid var(--frame); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: pop .3s; }
.death-ico { font-size: 44px; }
.death-card h2 { margin: 6px 0; font-size: 24px; color: var(--danger); }
.death-card p { margin: 6px 0; }
.death-loss { color: var(--warn); }
.death-wait { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--info); margin: 8px 0; }
.death-acts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 8px; }

.lvup { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.lvup-t { font-size: 46px; font-weight: 800; color: var(--gold); text-shadow: 0 0 18px var(--gold-2), 0 3px 0 var(--gold-ink); }
.lvup-s { font-weight: 700; color: var(--moon); text-shadow: 0 1px 3px var(--bg); }
.lvup.go { animation: lvup 2.8s ease-out forwards; }

.sheet-back { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); animation: fade .15s; }
.sheet { width: min(560px, 100%); max-height: 82vh; overflow-y: auto; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); background: var(--panel); border: 1px solid var(--frame); border-radius: var(--r-lg) var(--r-lg) 0 0; animation: sheetUp .2s ease-out; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sheet-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 70px; padding: 10px 4px; cursor: pointer; color: var(--text); font-size: 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.sheet-btn:active { background: var(--surface-3); }
.sg { font-size: 24px; }
.sl { text-align: center; line-height: 1.2; }

/* ตัวเลือกช่อง hotbar (อยู่ใน modal) */
.hb-pick { display: grid; grid-template-columns: repeat(9, auto); justify-content: center; gap: 4px; }
.hb-pick-c .slot { cursor: pointer; }
.hb-pick-c .slot:hover { border-color: var(--gold); }

/* ---------- คอมพิวเตอร์: จอเล็ก/หน้าต่างแคบ (D-073 เพรเซ็ต "desktop") ---------- */
/* คนละเงื่อนไขกับจอสัมผัส — หน้าต่างเมาส์แคบ (โน้ตบุ๊กจอเล็ก/แบ่งครึ่งจอ) ไม่ใช่แท็บเล็ต/มือถือ */
:root:not(.is-touch) {
  @media (max-width: 1180px) {
    .hud-chat { width: 310px; height: 180px; }
    .hud-hotbar .slot { width: 40px; height: 40px; }
    .hud-menu { max-width: calc(100vw - 500px); }
    .hud-top { width: min(360px, 34vw); }
  }
}

/* ==========================================================================
   D-073: เพรเซ็ตหน้าจอ — จัดจาก data-platform บน .game-screen (hud/platform.js อ่านแพลตฟอร์มจริงแล้วตั้งให้)
   4 เพรเซ็ต: mobile-portrait · mobile-landscape · tablet · desktop (ค่าเริ่มต้นไม่ต้องเขียน = ของคอมพิวเตอร์ด้านบน)
   รายละเอียด/เหตุผลแต่ละเพรเซ็ต: docs/UI_PLATFORM_PRESETS.md — แก้ที่นี่แล้วอัปเดตเอกสารให้ตรงกัน
   ========================================================================== */

/* ---------- ร่วมกันทุกแพลตฟอร์มที่มีสัมผัส (มือถือ 2 แนว + แท็บเล็ต) ---------- */
.is-touch .hud-right { right: 60px; top: 8px; width: auto; }
.is-touch .tg-hint { display: none; } /* คำใบ้ปุ่มคีย์บอร์ด ไม่มีความหมายบนจอสัมผัส */
.is-touch .hud-chat.collapsed .chat-head { display: none; }
.is-touch .hud-chat.collapsed { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.is-touch .chat-tabs button { padding: 8px 9px 7px; }
.is-touch .chat-input { font-size: 16px; } /* กัน iOS ซูมเมื่อโฟกัส */
.is-touch .act-btn { min-width: 42px; height: 42px; border-radius: 21px; }
.is-touch .npc-box { bottom: 12px; }
.is-touch .hud-touch { display: block; position: absolute; inset: 0; pointer-events: none; }
.joy { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 122px; height: 122px; border-radius: 50%; pointer-events: auto; touch-action: none; background: radial-gradient(circle, color-mix(in srgb, var(--surface-2) 70%, transparent), color-mix(in srgb, var(--bg) 55%, transparent)); border: 2px solid var(--line-2); }
.joy-knob { position: absolute; left: calc(50% - 26px); top: calc(50% - 26px); width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--frame-hi), var(--surface-3)); border: 2px solid var(--moon-glow); box-shadow: var(--shadow); }
.tact { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 190px; height: 172px; pointer-events: none; }
.tact button, .tact-c { pointer-events: auto; }
.tact-atk { position: absolute; right: 0; bottom: 0; width: 78px; height: 78px; border-radius: 50%; font-size: 32px; cursor: pointer; color: var(--text); background: radial-gradient(circle at 40% 35%, var(--hp-hi), var(--hp)); border: 3px solid var(--gold); box-shadow: var(--shadow); touch-action: manipulation; }
.tact-atk:active { transform: scale(.93); }
.tact-c { position: absolute; }
.tact-c .slot { width: 52px; height: 52px; border-radius: 50%; touch-action: manipulation; }
.tact-c .slot .key { display: none; }
.tact-c.c0 { right: 100px; bottom: 12px; }
.tact-c.c1 { right: 88px; bottom: 64px; }
.tact-c.c2 { right: 52px; bottom: 102px; }
.tact-c.c3 { right: 0; bottom: 118px; }
.tact-tg { position: absolute; right: 142px; bottom: 104px; width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer; background: var(--panel); border: 1px solid var(--frame); box-shadow: var(--shadow); touch-action: manipulation; }

/* ---------- มือถือ (ทั้งสองแนว): แผงย่อ ซ่อน hotbar แถบยาว ใช้จอยสติ๊ก + ปุ่มลัด 3 ช่องแทน ---------- */
[data-platform^="mobile"] .hud-hotbar { display: none; }
[data-platform^="mobile"] .hud-quests { width: 200px; max-height: 26vh; }
[data-platform^="mobile"] .hud-left { width: 250px; left: max(8px, env(safe-area-inset-left)); top: 8px; }
[data-platform^="mobile"] .hud-me { padding: 5px 8px; gap: 8px; }
[data-platform^="mobile"] .me-ava { width: 40px; height: 40px; font-size: 20px; }
[data-platform^="mobile"] .hud-me .bar { height: 11px; }
[data-platform^="mobile"] .hud-me .bar > span { font-size: 8.5px; line-height: 9px; }
[data-platform^="mobile"] .me-exp .bar { height: 7px; }
[data-platform^="mobile"] .me-exp .bar > span { display: none; }
[data-platform^="mobile"] .hud-party { width: 180px; }
[data-platform^="mobile"] .hud-menu { top: 8px; left: auto; right: max(8px, env(safe-area-inset-right)); transform: none; max-width: none; flex-direction: column; align-items: center; gap: 5px; }
[data-platform^="mobile"] .hud-menu > .mi-tgl { margin: 0; }
[data-platform^="mobile"] .mi-row { flex-direction: column; padding: 0; gap: 5px; overflow: visible; }
[data-platform^="mobile"] .mi { width: 40px; height: 40px; }
[data-platform^="mobile"] .mi.gap { margin: 0; }
[data-platform^="mobile"] .mi-tgl { order: -1; width: 44px; height: 44px; margin-left: 0; }
[data-platform^="mobile"] .hud-mini { zoom: .74; }
[data-platform^="mobile"] .hud-top { width: min(300px, 36vw); top: 8px; }
[data-platform^="mobile"] .hud-chat { left: 150px; right: 232px; bottom: 12px; width: auto; }
[data-platform^="mobile"] .hud-chat:not(.collapsed) { left: 8px; right: 8px; bottom: 8px; height: min(62vh, 320px); z-index: 5; }
[data-platform^="mobile"] .hud-bottom { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: 188px; transform: none; align-items: flex-end; }

/* มือถือแนวตั้ง: คอลัมน์ซ้าย/ขวาแคบลงไปตามความสูง วางซ้อนกันเป็นชั้น ๆ */
[data-platform="mobile-portrait"] .hud-left { width: calc(100vw - 150px); max-width: 250px; }
[data-platform="mobile-portrait"] .hud-right { right: 8px; top: 334px; } /* ใต้คอลัมน์ไอคอนเมนู (7 ปุ่ม) */
[data-platform="mobile-portrait"] .hud-top { top: 132px; width: calc(100vw - 20px); }
[data-platform="mobile-portrait"] .hud-chat { left: 8px; right: 8px; bottom: 200px; }
[data-platform="mobile-portrait"] .hud-bottom { bottom: 262px; }
[data-platform="mobile-portrait"] .hud-party { display: none; }

/* มือถือแนวนอน: จอเตี้ย — ย่อทุกอย่างให้พอดีความสูงที่เหลือน้อย */
[data-platform="mobile-landscape"] .hud-party { display: none; }
[data-platform="mobile-landscape"] .hud-mini { zoom: .62; }
[data-platform="mobile-landscape"] .moon-power { display: none; }
[data-platform="mobile-landscape"] .joy { width: 108px; height: 108px; }
[data-platform="mobile-landscape"] .hud-bottom { bottom: 176px; }
[data-platform="mobile-landscape"] .hud-announce { width: min(420px, 50vw); }

/* ---------- แท็บเล็ต: จอใหญ่พอจะโชว์ทั้ง hotbar จริงและปุ่มสัมผัส — ไม่ย่อแผงเท่ามือถือ ปุ่มโตพอสำหรับนิ้ว ---------- */
[data-platform="tablet"] .hud-hotbar { transform-origin: left bottom; }
[data-platform="tablet"] .hud-hotbar .slot { width: 52px; height: 52px; }
[data-platform="tablet"] .hud-left { width: 280px; }
[data-platform="tablet"] .hud-me { padding: 7px 10px; gap: 9px; }
[data-platform="tablet"] .me-ava { width: 46px; height: 46px; font-size: 22px; }
[data-platform="tablet"] .hud-mini { zoom: .88; }
[data-platform="tablet"] .hud-top { width: min(360px, 32vw); }
[data-platform="tablet"] .hud-menu .mi { width: 46px; height: 46px; }
[data-platform="tablet"] .hud-chat { width: 340px; height: 200px; }
[data-platform="tablet"] .hud-chat:not(.collapsed) { height: min(50vh, 340px); }
[data-platform="tablet"] .act-btn { min-width: 48px; height: 48px; border-radius: 24px; }
[data-platform="tablet"] .joy { width: 128px; height: 128px; }
[data-platform="tablet"] .tact-atk { width: 84px; height: 84px; font-size: 34px; }
[data-platform="tablet"] .tact-c .slot { width: 56px; height: 56px; }
/* แท็บเล็ตแนวตั้ง (เช่น iPad มินิ 744×1133): เตี้ยกว่าคอมมาก ย่อคอลัมน์ซ้ายและเลื่อนแผงขวาลงใต้เมนูเหมือนมือถือแนวตั้ง แต่ยังกว้างกว่า */
[data-platform="tablet"][data-orientation="portrait"] .hud-left { width: min(320px, 60vw); }
[data-platform="tablet"][data-orientation="portrait"] .hud-hotbar { left: 50%; transform: translateX(-50%); }

/* ---------- แอนิเมชัน ---------- */
@keyframes bob { 50% { translate: 0 -3px; } }
@keyframes aura { from { opacity: .45; } to { opacity: 1; } }
@keyframes dmgUp { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--dx, 0) -48px; } }
@keyframes walkMark { from { opacity: 1; } to { opacity: 0; width: 44px; height: 20px; } }
@keyframes shake { 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }
@keyframes warpIn { from { filter: brightness(2.2) blur(3px); } }
@keyframes lowhp { 50% { box-shadow: 0 0 18px color-mix(in srgb, var(--danger) 55%, transparent); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes moonGlow { from { filter: drop-shadow(0 0 2px var(--moon)); } to { filter: drop-shadow(0 0 9px var(--moon-glow)); } }
@keyframes cdSweep { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes nearPulse { 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); } }
@keyframes expUp { 0% { opacity: 0; translate: 0 8px; } 12% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -18px; } }
@keyframes lvup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 24% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -75%); } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }

/* ---------- เอนจินเกม (canvas) ---------- */
.world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.world-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--text-2); font-size: 15px; background: radial-gradient(circle at 50% 40%, var(--bg-2), var(--bg)); }
.moon-orb { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffbe8, #e6dcb4 45%, #9d9474 100%); box-shadow: 0 0 40px #fff6c880; animation: moonPulse 2s ease-in-out infinite; }
@keyframes moonPulse { 50% { box-shadow: 0 0 60px #fff6c8, 0 0 120px #9fd8ff60; transform: scale(1.04); } }
.hud-target .tg-glyph { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, #ffffff18, transparent 70%); }
.npc-portrait .npc-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: inherit; }

/* ---------- เคอร์เซอร์เคลื่อนไหว (ชี้มอนสเตอร์ = ดาบ, ชี้ NPC = กล่องข้อความ) ---------- */
.cursor-fx { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.cursor-fx > svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.cursor-fx.sword > svg { width: 30px; height: 30px; transform-origin: 2px 2px; animation: cfSword 0.9s ease-in-out infinite; }
.cursor-fx.talk > svg { width: 34px; height: 30px; margin: -26px 0 0 4px; animation: cfTalk 1.2s ease-in-out infinite; }
.cursor-fx.talk .d1, .tap-fx.talk .d1 { animation: cfDot 0.9s ease-in-out infinite; }
.cursor-fx.talk .d2, .tap-fx.talk .d2 { animation: cfDot 0.9s ease-in-out 0.15s infinite; }
.cursor-fx.talk .d3, .tap-fx.talk .d3 { animation: cfDot 0.9s ease-in-out 0.3s infinite; }
@keyframes cfSword { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg) scale(1.06); } }
@keyframes cfTalk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cfDot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }

/* จุดที่คลิก/แตะ */
.tap-fx { position: fixed; z-index: 5; pointer-events: none; }
.tap-fx > svg { display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.tap-fx.sword > svg { width: 42px; height: 42px; margin: -34px 0 0 -34px; transform-origin: 34px 34px; animation: tapSword 0.55s cubic-bezier(.2, .8, .3, 1) forwards; }
.tap-fx.sword::after { content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid rgba(255, 240, 190, 0.9); border-color: rgba(255, 240, 190, 0.9) transparent transparent transparent; transform: rotate(-60deg); animation: tapArc 0.45s ease-out forwards; }
.tap-fx.talk > svg { width: 40px; height: 36px; margin: -44px 0 0 -6px; transform-origin: 8px 36px; animation: tapTalk 0.7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes tapSword { 0% { transform: rotate(-70deg) scale(0.6); opacity: 0; } 25% { opacity: 1; } 55% { transform: rotate(25deg) scale(1.1); opacity: 1; } 100% { transform: rotate(35deg) scale(1); opacity: 0; } }
@keyframes tapArc { 0% { transform: rotate(-80deg) scale(0.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(60deg) scale(1.15); opacity: 0; } }
@keyframes tapTalk { 0% { transform: scale(0); opacity: 0; } 35% { transform: scale(1.15); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor-fx > svg, .cursor-fx .d1, .cursor-fx .d2, .cursor-fx .d3 { animation: none !important; } }

/* ---------- โมดูล HUD: ปุ่มควบคุม (ย่อ/ขยาย/ปิด · ตำแหน่งตายตัว) + dock ไอคอน ---------- */
.mod-ctl { position: absolute; top: -13px; right: 6px; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 2px 3px; border-radius: 999px;
  background: linear-gradient(180deg, #2c3666, #151a36); border: 1px solid var(--frame); box-shadow: 0 2px 6px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .15s; }
.mod:hover > .mod-ctl, .mod:focus-within > .mod-ctl, .hud-editing .mod > .mod-ctl, .mod.mod-min > .mod-ctl { opacity: 1; pointer-events: auto; }
.mod-ctl button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gold); cursor: pointer; }
.mod-ctl button:hover { background: rgba(243,207,116,.16); color: #fff3cf; }
.mod-ctl button[data-mc=close]:hover { color: #ffb4a8; }
.mod-ctl .ui-ico { width: 13px; height: 13px; }
.mod-ctl .ui-ico .f, .mod-name .ui-ico .f { fill: currentColor; stroke: none; }
.mod-name { display: none; align-items: center; gap: 5px; padding: 0 6px 0 4px; color: var(--gold); font-size: 12px; white-space: nowrap; }
.mod-name .ui-ico { width: 15px; height: 15px; }
.hud-editing .mod:not(.mod-min) { outline: 1px dashed rgba(243,207,116,.55); outline-offset: 3px; }
/* ย่อ = เหลือแถบชื่อ + ปุ่ม */
.mod.mod-min { width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.mod.mod-min > :not(.mod-ctl) { display: none !important; }
.mod.mod-min > .mod-ctl { position: static; padding: 3px 4px; }
.mod.mod-min .mod-name { display: inline-flex; }
/* ปิด = เหลือไอคอนวงกลม ณ ตำแหน่งเดิมของแผง */
.mod.mod-icon { width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; min-width: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
.mod.mod-icon > :not(.mod-ctl) { display: none !important; }
.mod.mod-icon > .mod-ctl { position: static; opacity: 1; pointer-events: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.mod.mod-icon[data-mod-align="end"] { align-self: flex-end; }
.mod-reopen { width: 40px !important; height: 40px !important; }
.mod-reopen .ui-ico { width: 20px !important; height: 20px !important; }
.mod-reopen .ui-ico .f { fill: currentColor; stroke: none; }
/* dock: ปุ่มแสดงปุ่มควบคุม (จอสัมผัส) */
.hud-dock { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; pointer-events: auto; z-index: 3; }
.hud-dock .mi { width: 36px; height: 36px; }
.hud-dock .ui-ico { width: 18px; height: 18px; }
.hud-dock .dock-edit { opacity: .55; }
.hud-dock .dock-edit:hover, .hud-dock .dock-edit.on { opacity: 1; }
.hud-dock .dock-mod { animation: pop .18s; }
.is-touch .hud-dock { top: auto; bottom: 150px; transform: none; }
@media (prefers-reduced-motion: reduce) { .mi, .mod-ctl { transition: none; } .hud-dock .dock-mod { animation: none; } }
.mod-ctl button.mod-reopen { display: grid; place-items: center; border-radius: 50%; color: var(--gold);
  background: radial-gradient(circle at 50% 30%, #34407a, #1a1f3b 62%, #0f1226); border: 1.5px solid var(--frame);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 3px rgba(240,212,138,.18), 0 3px 8px rgba(0,0,0,.55); animation: pop .18s; }
.mod-ctl button.mod-reopen:hover { border-color: var(--frame-hi); color: #fff3cf; background: radial-gradient(circle at 50% 30%, #4a57a0, #252d5c 62%, #141836); }
@media (prefers-reduced-motion: reduce) { .mod-ctl button.mod-reopen { animation: none; } }

/* แถบย่อ/ปิดต้องไม่ถูกตัด: แชทเปิดให้ล้นกรอบได้ · แผงที่เลื่อนได้ (เควสต์) วางแถบไว้ในกรอบมุมขวาบน */
.hud-chat.mod { overflow: visible; }
.hud-chat.mod > .chat-head { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.mod[data-mod="quests"]:not(.mod-icon) > .mod-ctl { top: 3px; right: 3px; position: sticky; float: right; margin: -2px -2px 0 0; }
.mod:hover { z-index: 30; }

/* จอสัมผัส: ขยายเมนูทั้งหมด ณ จุดเดิม — คอลัมน์ไอคอนตัดขึ้นคอลัมน์ใหม่ทางซ้าย (ไม่ล้นจอ) */
.is-touch .hud-menu.expanded .mi-row { flex-wrap: wrap-reverse; align-content: flex-start; max-height: calc(100vh - 170px); gap: 5px; }
.is-touch .hud-menu.expanded { z-index: 6; }

/* ตาย: ย่อกล่องเป็นป้ายเล็กระหว่างรอชุบชีวิต — จอยังคล้ำ แต่กดแชท/เมนูได้ */
.death { animation: fade 1.2s; }
.death.min { place-items: start center; padding-top: 84px; pointer-events: none; background: radial-gradient(circle, transparent 35%, color-mix(in srgb, var(--bg) 70%, transparent)); }
.death-chip { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--frame)); box-shadow: var(--shadow-lg), 0 0 18px color-mix(in srgb, var(--danger) 25%, transparent); color: var(--text); cursor: pointer; animation: pop .25s; font: inherit; }
.death-chip:hover { border-color: var(--danger); }
.death-chip-ico { font-size: 24px; }
.death-chip-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.death-chip-txt b { color: var(--danger); font-size: 13.5px; }
.death-chip-txt .tiny { display: inline-flex; align-items: center; gap: 5px; color: var(--info); }
.death-chip-open { font-size: 16px; color: var(--text-2); }
.death-min { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 700; }
.death-min:hover { border-color: var(--frame-hi); }

/* เคอร์เซอร์มีดสั้น Moonsteel (D-062 · hud/cursor.js) — จุดชี้ = ปลายมีด (ภาพ 32px เลื่อน 4.5px ขึ้นซ้ายจากตัวชี้) */
.moonsteel-cursor { position: fixed; left: 0; top: 0; width: 32px; height: 32px; z-index: 99999; pointer-events: none; will-change: transform; }
.moonsteel-cursor[hidden] { display: none; }
.moonsteel-cursor.echo { z-index: 99998; opacity: .7; }
.moonsteel-cursor > img { display: block; width: 100%; height: 100%; transform-origin: 72% 76%; filter: drop-shadow(0 2px 3px #001a); user-select: none; }

/* แจ้งอัปเดตเกม (D-074 · hud/updateWatch.js) — แถบลอยบนสุด ไม่ผูกกับ .game-screen เพราะ mount ที่ document.body ตรง ๆ */
.upd-banner { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--gold); box-shadow: var(--shadow-lg), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); max-width: min(92vw, 560px); animation: pop .25s; }
.upd-ico { font-size: 18px; }
.upd-msg { font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-cd { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.upd-min { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 700; line-height: 1; flex: none; }
.upd-min:hover { border-color: var(--frame-hi); }
.upd-pill { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9000; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--gold); box-shadow: var(--shadow); color: var(--text); font-size: 12px; cursor: pointer; }
@media (max-width: 480px) { .upd-msg { max-width: 140px; } }