/* ROVEBORN UI — กรอบ ปุ่ม ช่องไอเท็ม ใช้ภาพจาก assets/ui/kit (ตั้งค่า --kit-* จาก main.js) */
:root {
  --bg: #0d1420;
  --ink: #1c1a17;
  --ink-2: #2a2520;
  --line: #6a4a2a;
  --bronze: #b08a4a;
  --gold: #e8c46a;
  --text: #f0e6cc;
  --muted: #b9ad92;
  --red: #e05060;
  --green: #7cc05a;
  --blue: #4a9ae0;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gap: 12px;
  --slot: 48px;
  --font: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); }
body { touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
input { user-select: text; -webkit-user-select: text; touch-action: manipulation; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; cursor: crosshair; }
.hidden { display: none !important; }
a { color: var(--gold); }
button { font: inherit; color: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- ชุด UI ---------- */
.kit-panel {
  border: 16px solid transparent;
  border-image: var(--kit-panel) 16 fill stretch;
  image-rendering: pixelated;
  background-clip: padding-box;
}
.kit-button {
  min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 8px solid transparent; border-image: var(--kit-button) 8 fill stretch;
  background: none; image-rendering: pixelated;
  color: var(--text); font-weight: 600; text-shadow: 0 1px 0 #000;
}
.kit-button:hover { border-image-source: var(--kit-button-hover); }
.kit-button:active { border-image-source: var(--kit-button-press); }
.kit-button:disabled { opacity: 0.5; cursor: default; }
.kit-button.small { min-height: 40px; padding: 0 10px; font-size: 13px; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; background: radial-gradient(circle at 50% 40%, #1a2a40, #070b12); }
.center { text-align: center; }
.logo-text { margin: 0 0 6px; letter-spacing: 6px; color: var(--gold); font-size: 30px; }
.bar { width: 240px; max-width: 70vw; height: 8px; background: #222b3a; border-radius: 4px; overflow: hidden; margin: 8px auto 0; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); }

/* ---------- หน้าสร้างตัวละคร ---------- */
.creator-screen {
  background: #1d3220 var(--creator-bg) center / cover no-repeat;
  image-rendering: pixelated; overflow-y: auto; align-items: flex-start;
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  touch-action: pan-y;
}
.creator-wrap { width: min(1080px, 100%); margin: auto; display: flex; flex-direction: column; gap: 10px; }
.creator-head { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.logo-img { width: min(360px, 70vw); aspect-ratio: 4 / 1; background: var(--kit-logo) center / contain no-repeat; image-rendering: pixelated; }
.kit-banner { margin: 0; padding: 4px 18px; border: 8px solid transparent; border-image: var(--kit-panel) 16 fill stretch; font-size: 20px; color: var(--text); }
.creator-layout { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(200px, 300px) minmax(220px, 1fr); gap: 12px; align-items: start; }
.creator-options h3, .creator-turn h3 { margin: 6px 0; font-size: 15px; color: var(--gold); }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choice {
  min-height: 44px; min-width: 44px; padding: 0 12px; cursor: pointer;
  background: var(--ink); border: 2px solid #4a3a26; border-radius: 6px; color: var(--text);
}
.choice.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #3a3020; }
.choice.swatch { padding: 0; width: 44px; border-radius: 6px; }
.creator-stage { display: flex; justify-content: center; }
#preview { width: 100%; max-width: 288px; aspect-ratio: 128 / 160; image-rendering: pixelated; }
.creator-turn { text-align: center; }
#preview4 { width: 100%; image-rendering: pixelated; background: rgba(0, 0, 0, 0.25); border-radius: 4px; }
.creator-cta { display: flex; flex-direction: column; gap: 4px; }
.creator-bottom { display: flex; gap: 10px; align-items: end; justify-content: center; flex-wrap: wrap; }
.name-field { display: flex; flex-direction: column; gap: 4px; color: var(--gold); font-weight: 600; text-shadow: 0 1px 0 #000; }
input { background: #0f1520e6; color: var(--text); border: 2px solid var(--line); border-radius: 6px; padding: 10px 12px; font: 16px var(--font); min-height: 44px; }
#cName { width: min(280px, 80vw); }
.primary-action { min-width: 220px; min-height: 52px; font-size: 18px; }
.error { color: #ff8a8a; min-height: 1.2em; margin: 0; text-align: center; text-shadow: 0 1px 0 #000; }
.speclink { align-self: center; font-size: 12px; text-shadow: 0 1px 0 #000; }

@media (max-width: 860px) {
  .creator-layout { grid-template-columns: 1fr 1fr; }
  .creator-options { grid-column: 1 / -1; order: 3; }
  .creator-stage { order: 1; }
  .creator-turn { order: 2; align-self: center; }
}
@media (max-width: 520px) {
  .creator-layout { grid-template-columns: 1fr; }
  #preview { max-width: 200px; }
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#top { display: contents; }
#stats { position: absolute; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--safe-t)); width: 250px; padding: 0; }
.stat { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 12px; }
.stat img { width: 16px; height: 16px; image-rendering: pixelated; flex-shrink: 0; }
.stat .track { position: relative; flex: 1; aspect-ratio: 128 / 16; background: var(--kit-bar) center / 100% 100% no-repeat; image-rendering: pixelated; }
.stat .track i { position: absolute; left: 3.125%; top: 25%; height: 50%; width: 0; max-width: 93.75%; transition: width 0.3s; }
.stat b { width: 26px; text-align: right; font-weight: 600; color: var(--muted); }
.stat.low b { color: var(--red); }

#right { position: absolute; right: calc(var(--gap) + var(--safe-r)); top: calc(var(--gap) + var(--safe-t)); width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; max-height: calc(100% - 120px); pointer-events: none; }
#right > * { pointer-events: auto; }
#mapbox { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
#minimap { position: absolute; inset: 10%; width: 80%; height: 80%; border-radius: 50%; image-rendering: pixelated; background: #1d3b6b; }
.map-frame { position: absolute; inset: 0; background: var(--kit-minimap) center / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
#daynight { position: absolute; right: -2px; top: -2px; width: 36px; height: 36px; background: var(--kit-day) center / contain no-repeat; image-rendering: pixelated; }
#daynight.night { background-image: var(--kit-night); }
#clock { color: var(--gold); font-weight: 600; text-shadow: 0 1px 2px #000; }
#worldinfo { font-size: 12px; color: var(--text); text-align: center; text-shadow: 0 1px 2px #000; }
#quests { width: 240px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; touch-action: pan-y; }
.quest { border: 10px solid transparent; border-image: var(--kit-panel) 16 fill stretch; font-size: 12px; }
.quest h4 { margin: 0 0 2px; color: var(--gold); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.quest h4 img { width: 16px; height: 16px; image-rendering: pixelated; }
.quest p { margin: 0 0 6px; color: var(--muted); }
.quest .track { height: 7px; background: #120e08; border-radius: 4px; overflow: hidden; }
.quest .track i { display: block; height: 100%; background: var(--gold); }
.quest .meta { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); }

#menu { position: absolute; top: calc(var(--gap) + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
#moreMenu { position: absolute; top: 48px; right: 0; display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
#moreMenu a { display: block; padding: 10px 6px; text-decoration: none; }
#help { position: absolute; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); background: rgba(0, 0, 0, 0.45); padding: 3px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; }

#bottombar { position: absolute; left: 50%; bottom: calc(var(--gap) + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 6px; align-items: center; max-width: calc(100vw - 24px); }
#hotbar { display: flex; gap: 4px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; }
#hotbar::-webkit-scrollbar { display: none; }
.slot {
  position: relative; flex-shrink: 0; width: var(--slot); height: var(--slot); cursor: pointer; border: 0; padding: 0;
  background: var(--kit-slot) center / 100% 100% no-repeat; image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
}
.slot.on { background-image: var(--kit-slot-on); }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.slot .n { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.slot .k { position: absolute; left: 5px; top: 2px; font-size: 10px; color: var(--muted); text-shadow: 0 1px 2px #000; }
.slot .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #000c; padding: 3px 6px; border-radius: 4px; font-size: 12px; }
@media (hover: hover) { .slot:hover .tip { display: block; } }
.bag { flex-shrink: 0; width: var(--slot); height: var(--slot); border: 0; cursor: pointer; background: var(--kit-backpack) center / 80% no-repeat, var(--kit-slot) center / 100% 100% no-repeat; image-rendering: pixelated; }

#log { position: absolute; left: calc(var(--gap) + var(--safe-l)); bottom: calc(76px + var(--safe-b)); width: 380px; max-width: calc(100% - 24px); display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
#log div { background: rgba(0, 0, 0, 0.5); padding: 2px 8px; border-radius: 4px; font-size: 12px; transition: opacity 1s; }
#log div.fade { opacity: 0; }
#log .event { color: var(--gold); } #log .skill { color: #a0e080; } #log .quest { color: #ffd84a; }
#log .warn { color: #ff9a7a; } #log .loot { color: #c8e0ff; } #log .sys { color: var(--muted); } #log .chat { color: #fff; } #log .world { color: #d0b0ff; }
#chat { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); width: min(420px, calc(100% - 24px)); }

#prompt { position: absolute; transform: translate(-50%, -100%); background: rgba(0, 0, 0, 0.75); padding: 3px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; white-space: nowrap; }
#prompt b { color: var(--gold); }
#prompt.urgent, #tUse.urgent { animation: pulse .35s ease-in-out infinite alternate; }
#prompt.urgent { background: rgba(120, 20, 10, 0.85); font-size: 14px; font-weight: 700; }
@keyframes pulse { from { transform: translate(-50%, -100%) scale(1); } to { transform: translate(-50%, -100%) scale(1.12); } }
#tUse.urgent { animation-name: pulseBtn; background: #c8402a; }
@keyframes pulseBtn { from { transform: scale(1); } to { transform: scale(1.12); } }
#toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; border: 16px solid transparent; border-image: var(--kit-panel) 16 fill stretch; max-width: calc(100% - 24px); }
#toast img { width: 48px; height: 48px; image-rendering: pixelated; }
#toast h3 { margin: 0; color: #a0e080; }
#toast p { margin: 2px 0 0; color: var(--muted); }

.side { position: absolute; left: calc(var(--gap) + 262px + var(--safe-l)); top: calc(var(--gap) + var(--safe-t)); width: 340px; max-height: calc(100% - 110px); overflow-y: auto; touch-action: pan-y; }
.side h3 { margin: 0 0 8px; color: var(--gold); display: flex; justify-content: space-between; align-items: center; }
.side .close { min-width: 44px; min-height: 40px; }
.row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #3a2e1e; }
.row img { width: 32px; height: 32px; image-rendering: pixelated; }
.row .body { flex: 1; font-size: 12px; }
.row .body b { font-size: 13px; }
.row .need { color: var(--muted); }
.row .need .ok { color: var(--green); } .row .need .no { color: var(--red); }
.row.locked img { filter: grayscale(1) brightness(0.5); }
.row .track { height: 5px; background: #120e08; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.row .track i { display: block; height: 100%; background: var(--blue); }

#conn { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: #000c; padding: 10px 18px; border-radius: 8px; }
#death.overlay { background: rgba(40, 0, 0, 0.45); z-index: 15; }

/* ---------- ปุ่มสัมผัส (มือถือ/แท็บเล็ต) ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stick {
  position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(20px + var(--safe-b));
  width: 140px; height: 140px; border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.4) 56%); border: 3px solid rgba(232, 196, 106, 0.5);
}
#stickKnob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(232, 196, 106, 0.75); border: 3px solid #6a4a2a; }
#actions { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); width: 190px; height: 170px; pointer-events: none; }
.act {
  position: absolute; pointer-events: auto; border-radius: 50%; width: 64px; height: 64px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(28, 26, 23, 0.85); border: 3px solid var(--bronze); color: var(--text); text-shadow: 0 1px 0 #000;
}
.act:active, .act.held { background: #3a3020; border-color: var(--gold); }
.act:disabled { opacity: 0.4; }
.act.big { width: 88px; height: 88px; right: 0; bottom: 0; font-size: 16px; border-color: var(--gold); }
#tUse { right: 98px; bottom: 0; }
#tSkill { right: 8px; bottom: 98px; }
#tRun { right: 92px; bottom: 82px; width: 56px; height: 56px; font-size: 12px; }
.act.toggle[aria-pressed="true"] { background: #2f5a3a; border-color: var(--green); }
.act .cd { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); }

/* โหมดสัมผัส: ย่อ HUD และหลบพื้นที่ปุ่ม */
body.touch #help { display: none; }
body.touch { --slot: 44px; --gap: 8px; }
body.touch #stats { width: 190px; border-width: 10px; border-image-slice: 16 fill; }
body.touch .stat { font-size: 11px; margin: 1px 0; }
body.touch #right { width: 150px; }
body.touch #mapbox { width: 120px; height: 120px; }
body.touch #daynight { width: 28px; height: 28px; }
/* เควสต์แบบย่อ: ชื่อ + แถบความคืบหน้า และไม่ล้นลงไปทับปุ่มสกิล */
body.touch #quests { width: 150px; max-height: max(48px, calc(100vh - 340px)); }
body.touch .quest { border-width: 6px; }
body.touch .quest p, body.touch .quest .meta { display: none; }
body.touch #bottombar { max-width: calc(100vw - 2 * (190px + var(--safe-l))); }
body.touch #log { left: calc(var(--gap) + var(--safe-l)); bottom: auto; top: calc(150px + var(--safe-t)); width: 230px; }
body.touch #log div { font-size: 11px; }
body.touch .side { left: 50%; transform: translateX(-50%); top: calc(56px + var(--safe-t)); width: min(420px, calc(100vw - 24px)); max-height: calc(100% - 140px); }
body.touch #toast { top: 30%; }

@media (max-height: 430px) {
  body.touch #stats { width: 170px; }
  body.touch #mapbox { width: 100px; height: 100px; }
  body.touch #worldinfo { display: none; }
  body.touch #log { top: calc(118px + var(--safe-t)); }
  #stick { width: 120px; height: 120px; }
}
@media (max-width: 760px) {
  #help { display: none; }
  #menu .kit-button.small { padding: 0 8px; }
}

/* ---------- แนวตั้ง (มือถือถือตั้ง) ----------
   บน: แถบสถานะ + แผนที่ย่อ → แถวเมนู → ข้อความ | เควสต์
   ล่าง: ช่องของเต็มความกว้าง อยู่เหนือจอยสติ๊กและปุ่มกด
   หน้าต่างคราฟต์/สกิลเป็นแผ่นเลื่อนขึ้นจากด้านล่าง (นิ้วโป้งเอื้อมถึง) */
@media (orientation: portrait) and (max-width: 820px) {
  #help { display: none; }
  #top {
    position: absolute; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); top: calc(6px + var(--safe-t));
    display: grid; gap: 6px; pointer-events: none;
    grid-template-columns: minmax(0, 1fr) 128px;
    grid-template-areas: "stats map" "stats clock" "menu menu" "log quests";
  }
  #top > *, #right > * { pointer-events: auto; }
  #right { display: contents; }
  #stats, body.touch #stats { grid-area: stats; position: static; width: auto; align-self: start; border-width: 10px; border-image-slice: 16 fill; }
  #stats .stat { margin: 1px 0; font-size: 11px; }
  #stats .stat img { width: 14px; height: 14px; }
  #stats .stat b { width: 22px; }
  #mapbox, body.touch #mapbox { grid-area: map; justify-self: center; width: 104px; height: 104px; }
  #daynight, body.touch #daynight { width: 26px; height: 26px; }
  #clock { grid-area: clock; justify-self: center; align-self: start; font-size: 11px; white-space: nowrap; }
  #worldinfo { display: none; }

  #menu { grid-area: menu; position: relative; left: auto; top: auto; transform: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  #menu .kit-button.small { min-height: 40px; padding: 0 4px; font-size: 13px; }
  #moreMenu { top: calc(100% + 4px); }

  #log, body.touch #log { grid-area: log; position: static; width: auto; max-width: none; align-self: start; pointer-events: none; }
  #log div, body.touch #log div { font-size: 11px; }
  #quests, body.touch #quests { grid-area: quests; width: auto; max-height: 26vh; align-self: start; }
  .quest, body.touch .quest { border-width: 6px; cursor: pointer; }
  .quest p, .quest .meta, body.touch .quest p, body.touch .quest .meta { display: none; }
  body .quest.open p { display: block; }
  body .quest.open .meta { display: flex; }
  .quest h4 { font-size: 12px; }

  #bottombar { left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); transform: none; max-width: none; justify-content: center; }
  body.touch #bottombar { bottom: calc(196px + var(--safe-b)); max-width: none; }
  body.touch #chat { bottom: calc(250px + var(--safe-b)); }

  .side, body.touch .side {
    z-index: 3; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); width: auto; transform: none;
    top: auto; bottom: calc(8px + var(--safe-b)); max-height: 68vh;
  }
  #toast, body.touch #toast { top: 42%; }

  #stick { width: 128px; height: 128px; left: calc(16px + var(--safe-l)); bottom: calc(24px + var(--safe-b)); }
  #actions { right: calc(12px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); }

  /* หน้าสร้างตัวละคร: ตัวอย่างอยู่บน ตัวเลือกเลื่อนได้ ช่องชื่อ + ปุ่มเริ่มติดล่างจอเสมอ */
  .creator-screen { padding-bottom: 0; }
  .logo-img { width: min(240px, 62vw); }
  .kit-banner { font-size: 16px; padding: 2px 12px; }
  .creator-head { gap: 6px; }
  .creator-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .creator-stage { order: 1; }
  #preview { max-width: 170px; }
  .creator-turn { order: 2; align-self: center; border-width: 10px; }
  .creator-turn h3 { font-size: 13px; margin: 0 0 4px; }
  .creator-options { grid-column: 1 / -1; order: 3; border-width: 12px; }
  .creator-options h3 { margin: 4px 0; font-size: 13px; }
  .creator-cta {
    position: sticky; bottom: 0; z-index: 1; margin: 0 -12px; padding: 10px 12px calc(10px + var(--safe-b));
    background: linear-gradient(to bottom, rgba(13, 20, 32, 0), rgba(13, 20, 32, 0.95) 10px);
  }
  .creator-bottom { flex-wrap: nowrap; align-items: end; }
  .name-field { flex: 1; min-width: 0; }
  #cName { width: 100%; }
  .primary-action { min-width: 0; flex-shrink: 0; padding: 0 14px; font-size: 16px; }
  .error:empty { display: none; }
}

/* ---------- อาชีพ เหรียญ สถานะ (ใต้แถบค่าสถานะ) ---------- */
.meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 3px; font-size: 11px; }
.meta .job { color: var(--gold); font-weight: 600; }
.meta .coin { display: inline-flex; align-items: center; gap: 2px; }
.meta .coin img { width: 14px; height: 14px; image-rendering: pixelated; }
.chip { border: 1px solid; border-radius: 8px; padding: 0 6px; font-size: 10px; background: #0008; }

/* ---------- หน้าต่าง NPC / แผงขายของ ---------- */
.npc-say { margin: 4px 0 8px; color: var(--text); font-style: italic; line-height: 1.5; }
.npc-sub { margin: 10px 0 2px; color: var(--gold); font-size: 13px; }
.wallet { display: flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 600; font-size: 12px; }
.wallet img { width: 18px; height: 18px; image-rendering: pixelated; }
.row .ok { color: var(--green); font-size: 12px; }
.sell-row input { width: 52px; min-height: 36px; padding: 4px 6px; font-size: 14px; }
.row .kit-button.small + .kit-button.small { margin-left: 2px; }
#toast .flavor { color: var(--text); font-style: italic; }
.creator-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-style: italic; }

/* ---------- บทสนทนา NPC และเควสต์ส่วนตัว ---------- */
.dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dlg-choice { text-align: left; justify-content: flex-start; }
.quest.mine { border-image-source: var(--kit-panel); }
.quest.mine h4 { color: #a0e0ff; }
.quest.mine.ready h4 { color: var(--green); }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
#login { align-items: center; }
.login-box { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px; }
.login-lead { margin: 0; color: var(--text); font-style: italic; }
.g-login { min-height: 44px; display: flex; justify-content: center; }
.login-note, .muted-s { margin: 0; font-size: 12px; color: var(--muted); }
#linkBox { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
#linkBox.hidden { display: none; }

/* ---------- สถานะ PK ---------- */
.chip.pk-red { border-color: #ff5a5a; color: #ffb0b0; }
.chip.pk-grey { border-color: #b8b8b8; color: #e0e0e0; }
.chip.pk-safe { border-color: #7cc05a; color: #c8f0a0; }

/* ---------- พลังที่ตื่นขึ้น / ตำนาน ---------- */
.unique { color: #ffd84a; text-shadow: 0 0 6px rgba(255, 216, 74, 0.6); }

/* ---------- กระเป๋า ---------- */
.equip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 10px; }
.eslot { position: relative; aspect-ratio: 1; border: 1px dashed #6a5a40; border-radius: 6px; background: rgba(0, 0, 0, 0.25); color: var(--muted);
  display: flex; align-items: center; justify-content: center; padding: 0; font-size: 10px; }
.eslot span { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; text-shadow: 0 1px 2px #000; }
.eslot img { width: 28px; height: 28px; image-rendering: pixelated; margin-bottom: 8px; }
.eslot.on { border: 1px solid var(--gold); color: var(--gold); cursor: pointer; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.bag-grid .slot { width: auto; aspect-ratio: 1; height: auto; }
.bag-grid .slot.sel { outline: 2px solid #fff; outline-offset: -2px; }
.bag-detail { margin-top: 8px; }

/* ---------- HUD แบบกระชับ: ไม่มีกรอบพื้นหลัง ตัวหนังสือมีเงาให้อ่านออกบนฉาก ---------- */
#hud #stats { border: 0; border-image: none; background: none; padding: 0; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#hud .stat { margin: 0 0 2px; font-size: 11px; gap: 4px; }
#hud .stat img { width: 14px; height: 14px; }
#hud .stat b { width: 22px; font-size: 11px; color: var(--text); }
#hud .meta { font-size: 11px; margin-top: 2px; }
#worldinfo, #help { display: none !important; }
#hud #menu { gap: 4px; }
#hud #menu .kit-button.small { min-height: 30px; padding: 0 8px; font-size: 12px; border-width: 6px; }
#hud .quest { border: 0; border-image: none; background: rgba(10, 12, 18, 0.45); border-radius: 6px; padding: 4px 7px; font-size: 11px; }
#hud .quest h4 { font-size: 12px; margin: 0; }
#hud #log div { background: rgba(0, 0, 0, 0.35); font-size: 11px; padding: 1px 6px; }
#hud #clock { font-size: 11px; }
#hud .bag { width: 52px; height: 52px; background: var(--kit-backpack) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#hud .bag:hover { transform: scale(1.06); }
#hud .bag:active { transform: scale(0.95); }
@media not all and (orientation: portrait), (min-width: 821px) {
  #hud #stats { width: 170px; }
  #hud #mapbox { width: 140px; height: 140px; }
  #hud #right { width: 170px; }
  #hud #quests { width: 200px; }
}

/* แถบเลือดบอส: กลางบนจอ ไม่มีพื้นหลังทึบ */
#bossbar { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); width: min(420px, 60vw); z-index: 6; pointer-events: none; text-align: center; }
#bossbar.hidden { display: none; }
#bossbar .bn { display: block; font-weight: 700; font-size: 14px; color: #ffd0b0; text-shadow: 0 1px 2px #000, 0 0 6px #000; letter-spacing: 1px; }
#bossbar .bb { height: 9px; margin-top: 3px; border: 1px solid #1a0a06; border-radius: 3px; background: rgba(20, 8, 6, .75); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 200, 160, .25); }
#bossbar .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff7a5a, #c8321e); transition: width .2s; }

/* ---------- จอเล็กแนวนอน (มือถือเล็ก/หน้าต่างเตี้ย ≤ 380px): ย่อทุกอย่าง ไม่ให้แถบสถานะ เมนู แผนที่ และปุ่มซ้อนกัน ---------- */
@media (orientation: landscape) and (max-height: 380px) {
  body.touch, #hud { --slot: 34px; --gap: 6px; }
  #hud #stats, body.touch #hud #stats { width: 128px; }
  #hud .stat, body.touch #hud .stat { font-size: 10px; margin: 0; gap: 3px; }
  #hud .stat img { width: 11px; height: 11px; }
  #hud .stat b { width: 18px; font-size: 10px; }
  #hud .meta { font-size: 10px; }
  #hud #right, body.touch #hud #right { width: 92px; gap: 2px; }
  #hud #mapbox, body.touch #hud #mapbox { width: 80px; height: 80px; }
  #hud #daynight { width: 20px; height: 20px; }
  #hud #clock { font-size: 10px; text-align: center; }
  #hud #quests { display: none; }
  #hud #menu { gap: 3px; }
  #hud #menu .kit-button.small { min-height: 24px; padding: 0 5px; font-size: 11px; border-width: 5px; }
  #moreMenu { top: 30px; }
  #bossbar { top: 34px; width: min(240px, 48vw); }
  #bossbar .bn { font-size: 12px; }
  #hud #log, body.touch #hud #log { top: calc(96px + var(--safe-t)); bottom: auto; width: min(230px, 46vw); }
  #hud #log div { font-size: 10px; }
  #hud .bag { width: 40px; height: 40px; }
  #chat { bottom: calc(52px + var(--safe-b)); }
  #toast { top: 18%; }
  #toast img { width: 32px; height: 32px; }
  .side, body.touch .side { left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 16px)); top: calc(34px + var(--safe-t)); max-height: calc(100% - 44px); }
  #stick { width: 92px; height: 92px; left: calc(10px + var(--safe-l)); bottom: calc(8px + var(--safe-b)); }
  #stickKnob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  #actions { width: 142px; height: 124px; right: calc(8px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); }
  .act { width: 48px; height: 48px; font-size: 11px; }
  .act.big { width: 64px; height: 64px; font-size: 13px; }
  #tUse { right: 70px; }
  #tSkill { right: 4px; bottom: 70px; }
  #tRun { right: 66px; bottom: 58px; width: 42px; height: 42px; font-size: 11px; }
  body.touch #bottombar { max-width: calc(100vw - 2 * (150px + var(--safe-l))); }
}

/* ---------- สังคม: เมนูผู้เล่น คำเชิญ กรอบปาร์ตี้ แถบยึดเมือง แผนที่โลก ---------- */
.tabs { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.tabs .kit-button.on { filter: brightness(1.35); }
.hpbar { height: 5px; background: rgba(0, 0, 0, .55); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.hpbar i { display: block; height: 100%; background: #e04050; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #1c1a17; flex-shrink: 0; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #666; margin-right: 5px; vertical-align: middle; }
.dot.on { background: #7cf07c; }
.title-name { color: #ffd88a; }
.form-row input { flex: 1; min-width: 0; }
#pmenu { position: fixed; z-index: 30; width: 180px; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
#pmenu .pm-name { font-weight: 700; text-align: center; }
#pmenu .pm-title { color: #ffd88a; text-align: center; font-size: 12px; }
#pmenu .need { font-size: 12px; text-align: center; }
#invite { position: fixed; z-index: 31; left: 50%; top: 16%; transform: translateX(-50%); max-width: calc(100vw - 24px); text-align: center; }
#invite p { margin: 0 0 6px; }
#invite .row { justify-content: center; gap: 8px; }
#partyFrames { position: absolute; left: calc(var(--gap) + var(--safe-l)); top: calc(var(--gap) + var(--safe-t) + 120px); width: 140px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
#partyFrames .pf { font-size: 11px; text-shadow: 0 1px 2px #000; color: #9af09a; }
#partyFrames .hpbar { height: 4px; margin-top: 1px; }
#siege { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); width: min(420px, 70vw); z-index: 6; pointer-events: none; text-align: center; }
#siege.hidden { display: none; }
#siege .bn { display: block; font-weight: 700; font-size: 13px; color: #ffe0b0; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#siege .bb { height: 8px; margin-top: 3px; border: 1px solid #1a0a06; border-radius: 3px; background: rgba(20, 8, 6, .75); overflow: hidden; }
#siege .bb i { display: block; height: 100%; transition: width .5s; }
#worldmap { position: fixed; inset: 0; z-index: 25; background: rgba(6, 10, 18, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
#worldmap.hidden { display: none; }
#worldmap canvas { max-width: calc(100vw - 24px); max-height: calc(100vh - 60px); image-rendering: pixelated; border: 3px solid var(--bronze); border-radius: 6px; }
#worldmap p { margin: 0; color: var(--muted); font-size: 12px; }
#mapbox { cursor: pointer; }
#log .whisper { color: #ffa8e0; } #log .party { color: #9af09a; } #log .guild { color: #8ae0ff; }
@media (orientation: landscape) and (max-height: 380px) {
  #partyFrames { top: calc(var(--safe-t) + 80px); width: 110px; }
  #siege { top: 56px; }
}
@media (orientation: portrait) and (max-width: 820px) {
  #partyFrames { display: none; }
  #menu { grid-template-columns: repeat(5, 1fr) !important; }
}
#hud #menu .kit-button.small { white-space: nowrap; }
@media (orientation: landscape) and (max-width: 520px) {
  #hud #stats, body.touch #hud #stats { width: 104px; }
  #hud #right, body.touch #hud #right { width: 70px; }
  #hud #mapbox, body.touch #hud #mapbox { width: 64px; height: 64px; }
  #hud #menu .kit-button.small { padding: 0 3px; font-size: 10px; min-height: 22px; }
  #hud #clock { font-size: 9px; }
}

/* ---------- ร้านดาว ---------- */
.shopbtn { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #c08a28; background: radial-gradient(circle at 35% 30%, #4a5aa8, #1e285e); color: #ffe878; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 10px rgba(255,216,74,.35); animation: twinkle 2.4s ease-in-out infinite; }
.shopbtn:active { transform: scale(.94); }
@keyframes twinkle { 50% { box-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 16px rgba(255,216,74,.7); } }
.star { color: #ffd84a; }
.wallet-star { color: #ffe878; font-size: 14px; margin-left: 6px; }
.deal { color: #ff8a6a; font-weight: 700; }
.namechip { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; font-weight: 800; background: rgba(0,0,0,.35); border-radius: 6px; flex-shrink: 0; text-shadow: 0 1px 2px #000; }
.namechip.rainbow { background: linear-gradient(90deg, #ff6a6a, #ffd84a, #7cf07c, #7ad8ff, #c08aff); }
.pass-row .lv { width: 24px; text-align: center; color: #ffd84a; }
.pass-row.locked { opacity: .55; }
.pass-row .prem { color: #ffd88a; }
.hpbar.pass i { background: linear-gradient(90deg, #ffd84a, #ff9a4a); }
@media (orientation: landscape) and (max-height: 380px) { .shopbtn { width: 34px; height: 34px; font-size: 16px; } }

/* ---------- อีโมต แลกของ หลบ ---------- */
.emobtn { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--bronze); background: rgba(28, 26, 23, .85); font-size: 20px; line-height: 1; cursor: pointer; }
#emotes { position: fixed; bottom: calc(76px + var(--safe-b)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; max-width: min(360px, calc(100vw - 24px)); justify-content: center; }
#emotes.hidden { display: none; }
#emotes button { font-size: 22px; width: 40px; height: 40px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
#tDodge { right: 8px; bottom: 98px; width: 56px; height: 56px; font-size: 12px; }
#tSkill { right: 70px; bottom: 140px; }
.chk { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.quest.daily .ok { color: #9af09a; }
@media (orientation: landscape) and (max-height: 380px) {
  #tDodge { right: 4px; bottom: 70px; width: 42px; height: 42px; font-size: 11px; }
  #tSkill { right: 52px; bottom: 112px; }
  .emobtn { width: 32px; height: 32px; font-size: 16px; }
}

/* ---------- เหตุการณ์บังเอิญ / เหตุการณ์พิลึก ---------- */
#encounter { position: fixed; z-index: 32; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; }
#encounter h3 { margin: 0 0 6px; color: var(--gold); }
#encounter .enc-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#whimsy { position: fixed; top: calc(118px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; color: #ffe0ff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px #000, 0 0 6px #b04aff; white-space: nowrap; }
#whimsy.hidden { display: none; }
@media (orientation: landscape) and (max-height: 380px) { #whimsy { top: 78px; font-size: 11px; } }

.up { color: #ff7a6a; font-size: 10px; } .down { color: #7cf07c; font-size: 10px; }