/* ---------- ฟอนต์ (Sarabun · SIL OFL · assets/fonts/OFL-Sarabun.txt) ---------- */
@font-face {
  font-family: 'Sarabun'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/sarabun-thai-400-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Sarabun'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/sarabun-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Sarabun'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/sarabun-thai-600-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Sarabun'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/sarabun-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ฟอนต์ฉากต่อสู้ (Taviraj · SIL OFL · assets/fonts/OFL-Taviraj.txt) */
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/taviraj-thai-400-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/taviraj-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/taviraj-thai-500-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/taviraj-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/taviraj-thai-600-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Taviraj'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/taviraj-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ฟอนต์เนื้อเรื่อง (Noto Serif Thai · SIL OFL · assets/fonts/OFL-NotoSerifThai.txt) */
@font-face {
  font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/noto-serif-thai-thai-400-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/noto-serif-thai-thai-500-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/noto-serif-thai-thai-600-normal.woff2) format('woff2');
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/noto-serif-thai-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/noto-serif-thai-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- สี ---------- */
:root {
  --ink: #15130f;       /* พื้นรอบตัวเกม */
  --ink-2: #221e18;
  --paper: #efe4cc;     /* กล่องข้อความ */
  --paper-edge: #b9a67e;
  --text: #2a2217;
  --text-dim: #6b5c44;
  --seal: #9c2f24;      /* ชื่อคนพูด */
  --line: rgba(239, 228, 204, .18);
  /* 1 พิกเซลของเกม = กี่ CSS px · ตั้งโดย src/view/frame.js */
  --px: 1px;
  /* ตัวอักษร 3 ชั้น · ยุทธภพ = ชื่อ หัวข้อ · เนื้อเรื่อง = บทพูด คำบรรยาย · ระบบ = ตัวเลข ปุ่ม สิ่งที่กดได้ */
  --f-title: 'Taviraj', 'Noto Serif Thai', serif;
  --f-story: 'Noto Serif Thai', 'Taviraj', serif;
  --f-ui: 'Sarabun', system-ui, sans-serif;
  --scroll-track: #120f0b;
  --scroll-thumb: #8f713b;
  --scroll-thumb-hi: #c49a4b;
}

* { box-sizing: border-box; }
/* แถบเลื่อนทุกหน้าต้องเป็นชิ้นส่วน UI ชุดเดียวกัน ไม่ปะปนแถบของ browser กับของแผงเกม */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); border: 1px solid #332718; }
*::-webkit-scrollbar-thumb {
  min-height: 34px;
  background: linear-gradient(90deg, #5f4828, var(--scroll-thumb) 50%, #5f4828);
  border: 2px solid var(--scroll-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #806132, var(--scroll-thumb-hi) 50%, #806132); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
:is(.talk, .choices, .panel, .worldui, .wconfirm, .wscroll, .wgear, .wdetail, .ccmd, .broken, .title.luxe) {
  scrollbar-gutter: stable;
}
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--ink);
  /* ลายหมึกจาง ๆ รอบตัวเกม · วาดด้วย CSS ไม่ต้องใช้ภาพ */
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(120, 96, 60, .20), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.25) 0 1px, transparent 1px 13px);
  color: var(--paper);
  font-family: 'Sarabun', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#shell { position: fixed; inset: 0; }

#stage {
  position: absolute;
  box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 calc(6 * var(--px)) calc(30 * var(--px)) rgba(0,0,0,.6);
  background: #000;
}
#stage.title-stage { inset: 0 !important; width: 100vw !important; height: 100dvh !important; }
#game, #game canvas { display: block; }
#game canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- ชั้นข้อความ HTML ทับตัวเกม · หน่วยทุกตัวคิดเป็นพิกเซลของเกม × --px ---------- */
#ui {
  position: absolute; inset: 0;
  pointer-events: none;
  font-size: calc(11 * var(--px));
  line-height: 1.65;
}
#ui button { pointer-events: auto; font: inherit; cursor: pointer; }

.hidden { display: none !important; }
/* ตอนคุย ซ่อนแถบบนกับปุ่มเมนู ไม่ให้ชนกล่องบทพูด */
#ui.talking .bar, #ui.talking .tools, #ui.talking .prompt { display: none; }

.bar {
  position: absolute; left: calc(6 * var(--px)); top: calc(5 * var(--px));
  padding: calc(1 * var(--px)) calc(8 * var(--px));
  background: rgba(21, 19, 15, .78);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
  font-size: calc(10 * var(--px));
  color: var(--paper);
}
.bar b { font-weight: 600; }
.bar .coin { color: #e8c872; }

.menu-btn {
  position: absolute; right: calc(6 * var(--px)); top: calc(5 * var(--px));
  font-size: calc(10 * var(--px));
  padding: calc(1 * var(--px)) calc(9 * var(--px));
  background: rgba(21, 19, 15, .78);
  color: var(--paper);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
}
.menu-btn:hover, .journal-btn:hover { border-color: var(--paper-edge); }


.prompt {
  position: absolute; left: 50%; bottom: calc(14 * var(--px)); transform: translateX(-50%);
  padding: calc(1 * var(--px)) calc(9 * var(--px));
  background: rgba(21, 19, 15, .82);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
  font-size: calc(10 * var(--px));
  white-space: nowrap;
}
kbd {
  font: inherit; font-size: .85em;
  padding: 0 calc(4 * var(--px));
  border: calc(1 * var(--px)) solid rgba(239,228,204,.5);
  border-radius: calc(2 * var(--px));
  margin-right: calc(2 * var(--px));
}

/* ---------- กล่องบทพูด ---------- */
.talk {
  position: absolute;
  left: calc(20 * var(--px)); right: calc(20 * var(--px)); bottom: calc(8 * var(--px));
  min-height: calc(60 * var(--px));
  max-height: calc(124 * var(--px));
  padding: calc(9 * var(--px)) calc(12 * var(--px)) calc(8 * var(--px));
  background: var(--paper);
  color: var(--text);
  border: calc(2 * var(--px)) solid var(--paper-edge);
  border-radius: calc(4 * var(--px));
  box-shadow: 0 calc(2 * var(--px)) 0 rgba(0,0,0,.45);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
.talk.top { top: calc(26 * var(--px)); bottom: auto; }
.talk .who {
  position: absolute; top: calc(-10 * var(--px)); left: calc(10 * var(--px));
  padding: 0 calc(8 * var(--px));
  background: var(--seal); color: #fff4e2;
  font-weight: 600; font-size: calc(10 * var(--px));
  border-radius: calc(2 * var(--px));
}
.talk.narr .line { font-style: italic; color: var(--text-dim); }
.talk .face {
  position: absolute; left: calc(10 * var(--px)); top: calc(9 * var(--px));
  width: calc(44 * var(--px)); height: calc(44 * var(--px));
  image-rendering: pixelated;
  border: calc(1 * var(--px)) solid var(--paper-edge); border-radius: calc(2 * var(--px));
}
.talk.withface { padding-left: calc(62 * var(--px)); min-height: calc(62 * var(--px)); }
.talk.withface .who { left: calc(62 * var(--px)); }
.talk .line { margin: 0; }
.talk .more {
  position: absolute; right: calc(10 * var(--px)); bottom: calc(4 * var(--px));
  font-size: calc(8 * var(--px)); color: var(--text-dim);
  animation: bob 1s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(calc(2 * var(--px))); } }
.choices { list-style: none; margin: calc(4 * var(--px)) 0 0; padding: 0; }
.choices li {
  display: flex; gap: calc(6 * var(--px)); align-items: baseline;
  padding: 0 calc(6 * var(--px));
  border-radius: calc(2 * var(--px));
}
.choices li .n { font-size: .8em; color: var(--text-dim); min-width: calc(8 * var(--px)); }
.choices li.cur { background: rgba(156, 47, 36, .14); }
.choices li.cur .t::before { content: '▶ '; color: var(--seal); }
.choices li.off { color: #9d9283; cursor: not-allowed; }
.choices li .why { font-size: .8em; color: var(--seal); }
.choices li .why::before { content: '— '; }
.choices li.shake { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(calc(-2 * var(--px))); } 75% { transform: translateX(calc(2 * var(--px))); } }

/* ---------- ข้อความแจ้ง ---------- */
.toasts {
  position: absolute; left: 50%; top: calc(24 * var(--px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--px));
}
.toast {
  padding: calc(1 * var(--px)) calc(10 * var(--px));
  background: rgba(21, 19, 15, .88);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
  font-size: calc(10 * var(--px));
  white-space: nowrap;
  transition: opacity .4s;
}
.toast.story { border-color: #c9a45a; color: #f3dca0; }
.toast.warn { border-color: #c0665a; color: #f2b8ac; }
.toast.out { opacity: 0; }

/* ---------- เมนู ---------- */
.panel {
  position: absolute; inset: calc(24 * var(--px)) calc(150 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px));
  background: rgba(21, 19, 15, .95);
  border: calc(1 * var(--px)) solid var(--paper-edge);
  border-radius: calc(4 * var(--px));
  pointer-events: auto;
  display: flex; flex-direction: column; gap: calc(4 * var(--px));
  overflow: auto;
}
.panel h2 { margin: 0; font-size: calc(13 * var(--px)); }
.panel h3 { margin: calc(4 * var(--px)) 0 0; font-size: calc(11 * var(--px)); color: var(--paper-edge); }
.panel p { margin: 0; }
.panel .small { font-size: calc(9 * var(--px)); color: rgba(239,228,204,.7); }
.panel .bag { font-size: calc(10 * var(--px)); }
.panel button {
  font-size: calc(10 * var(--px));
  padding: calc(2 * var(--px)) calc(8 * var(--px));
  background: var(--ink-2); color: var(--paper);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
  text-align: left;
}
.panel button:hover { border-color: var(--paper-edge); }
.panel button.primary { background: #3b4f33; margin-top: calc(4 * var(--px)); }
.panel button.danger { border-color: #c0665a; color: #f2b8ac; }

/* ---------- เปิดเกมไม่ได้ ---------- */
.broken {
  position: fixed; inset: 0; overflow: auto;
  padding: 32px 16px; background: var(--ink); color: var(--paper);
  font-size: 16px; line-height: 1.6; z-index: 10;
}
.broken h1 { font-size: 20px; margin: 0 auto 12px; max-width: 760px; }
.broken ul, .broken p { max-width: 760px; margin: 0 auto; }
.broken li.error { color: #f2b8ac; }
.broken li.warn { color: #f3dca0; }

/* ---------- World Map ---------- */
.worldui { position: absolute; inset: 0; }
.wplace {
  position: absolute; transform: translateX(-50%);
  pointer-events: auto;
  font-size: calc(10 * var(--px)); font-weight: 600;
  padding: 0 calc(6 * var(--px));
  background: rgba(239, 228, 204, .92); color: var(--text);
  border: calc(1 * var(--px)) solid #8a7650;
  border-radius: calc(2 * var(--px));
  white-space: nowrap;
}
.wplace:hover:not(:disabled) { border-color: var(--seal); }
.wplace.here { background: #3b2a18; color: var(--paper); border-color: #3b2a18; cursor: default; }
.wplace.pick { background: var(--seal); color: #fff4e2; border-color: var(--seal); }
.wdays {
  position: absolute; transform: translateX(-50%);
  font-size: calc(8.5 * var(--px)); color: #5a4128;
  background: rgba(217, 201, 162, .85); padding: 0 calc(3 * var(--px));
}
.wbox {
  position: absolute; left: calc(8 * var(--px)); bottom: calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(10 * var(--px));
  background: rgba(21, 19, 15, .9);
  border: calc(1 * var(--px)) solid var(--paper-edge);
  border-radius: calc(4 * var(--px));
  pointer-events: auto;
  max-width: calc(380 * var(--px));
}
.wbox p { margin: 0; }
.wbox .small, .wconfirm .small { font-size: calc(8.5 * var(--px)); color: rgba(239,228,204,.7); }
.wtitle { font-weight: 600; }
.wrow { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)); margin: calc(4 * var(--px)) 0; }
.wbox button, .wconfirm button {
  font-size: calc(10 * var(--px));
  padding: calc(1 * var(--px)) calc(8 * var(--px));
  background: var(--ink-2); color: var(--paper);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
}
.wbox button:hover, .wconfirm button:hover { border-color: var(--paper-edge); }
.wbox button.primary, .wconfirm button.primary { background: #3b4f33; }
.wconfirm {
  position: absolute; right: calc(8 * var(--px)); bottom: calc(8 * var(--px));
  width: calc(300 * var(--px));
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  background: rgba(21, 19, 15, .95);
  border: calc(1 * var(--px)) solid var(--paper-edge);
  border-radius: calc(4 * var(--px));
  pointer-events: auto;
}
.wconfirm h2 { margin: 0 0 calc(2 * var(--px)); font-size: calc(12 * var(--px)); }
.wconfirm p { margin: 0; }
#ui.talking .worldui { display: none; }

/* ---------- Journal · ผลที่ประเมิน ---------- */
.panel.journal { inset: calc(22 * var(--px)) calc(90 * var(--px)); }
.jcard {
  padding: calc(5 * var(--px)) calc(8 * var(--px));
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
  display: flex; flex-direction: column; gap: calc(2 * var(--px)); align-items: flex-start;
}
.jcard.urgent { border-color: #c0665a; }
.jcard h3 { margin: 0; color: var(--paper); font-size: calc(11 * var(--px)); }
.panel .warn { color: #f2b8ac; }
ul.forecast { list-style: none; margin: calc(3 * var(--px)) 0; padding: 0; font-size: calc(9 * var(--px)); }
ul.forecast li.ok { color: #a9d6a0; }
ul.forecast li.warn { color: #f3dca0; }
ul.forecast li.miss { color: #f2b8ac; }

/* ---------- แถบปุ่มมุมขวาบน ---------- */
.tools {
  position: absolute; right: calc(6 * var(--px)); top: calc(5 * var(--px));
  display: flex; gap: calc(3 * var(--px));
  pointer-events: auto;
}
.tools .tool {
  font-size: calc(10 * var(--px));
  padding: calc(1 * var(--px)) calc(8 * var(--px));
  background: rgba(21, 19, 15, .78);
  color: var(--paper);
  border: calc(1 * var(--px)) solid var(--line);
  border-radius: calc(3 * var(--px));
}
.tools .tool:hover { border-color: var(--paper-edge); }
.bar .exp { color: #a9c7e8; }

/* ---------- หน้าตัวละคร · กระเป๋า · ร้าน ---------- */
.panel.charsheet, .panel.bag, .panel.shop, .panel.menu { inset: calc(22 * var(--px)) calc(24 * var(--px)); }
.panel.menu { inset: calc(24 * var(--px)) calc(150 * var(--px)); }
.panel button:disabled { opacity: .45; cursor: not-allowed; }
.shead { display: flex; align-items: baseline; justify-content: space-between; }
.expbig { font-size: calc(12 * var(--px)); color: #a9c7e8; font-weight: 600; }
.presets { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)); align-items: center; }
.presets button { font-size: calc(9 * var(--px)); padding: 0 calc(6 * var(--px)); }
.presets button.on { background: var(--seal); border-color: var(--seal); }
.sbody { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--px)); flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: calc(4 * var(--px)); }
.panel.charsheet, .panel.bag, .panel.shop { overflow: hidden; }
.panel.bag .items { flex: 1 1 auto; min-height: 0; overflow: auto; }
.scol { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-width: 0; }
.sblock { margin-bottom: calc(4 * var(--px)); }
.srow {
  display: grid; grid-template-columns: calc(10 * var(--px)) 1fr auto calc(34 * var(--px)); gap: calc(4 * var(--px));
  align-items: center; font-size: calc(9.5 * var(--px)); line-height: 1.35; margin-bottom: calc(1 * var(--px));
}
.smark { color: #e8c872; }
.sval { font-variant-numeric: tabular-nums; }
.srow button.plus { font-size: calc(8.5 * var(--px)); padding: 0 calc(4 * var(--px)); text-align: center; line-height: 1.35; }
.shint { font-size: calc(8 * var(--px)); color: #a9d6a0; margin: 0 0 calc(1 * var(--px)) calc(14 * var(--px)); }
.tcard {
  border: calc(1 * var(--px)) solid var(--line); border-radius: calc(3 * var(--px));
  padding: calc(4 * var(--px)) calc(7 * var(--px)); font-size: calc(9.5 * var(--px));
}
.tcard h4 { margin: 0; font-size: calc(10.5 * var(--px)); color: #f3dca0; }
.tcard p { margin: 0; }
.gear { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--px)) calc(10 * var(--px)); }
.grow { display: flex; gap: calc(6 * var(--px)); align-items: baseline; font-size: calc(9.5 * var(--px)); }
.gslot { color: var(--paper-edge); min-width: calc(52 * var(--px)); }
.gitem { font-weight: 600; }
.grow button, .irow button { font-size: calc(9 * var(--px)); padding: 0 calc(7 * var(--px)); margin-left: auto; }
.items { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.irow {
  display: flex; gap: calc(8 * var(--px)); align-items: center; font-size: calc(9.5 * var(--px));
  border-bottom: calc(1 * var(--px)) solid var(--line); padding-bottom: calc(2 * var(--px));
}
.iinfo { flex: 1; min-width: 0; }
.panel .coin { color: #e8c872; }
.greet { font-style: italic; color: rgba(239,228,204,.8); }

/* ---------- ลำดับชั้น (ห้ามให้ชั้นล่างทับชั้นบน) ----------
   1 ของบน World Map · 5 แถบบนกับปุ่ม · 6 คำบอกปุ่ม · 7 ข้อความแจ้ง · 8 กล่องบทพูด · 10 แผง (ตัวละคร กระเป๋า สมุด ร้าน เมนู) · 20 เปิดเกมไม่ได้ */
.worldui { z-index: 1; }
.bar, .tools { z-index: 5; }
.prompt { z-index: 6; pointer-events: auto; cursor: pointer; }
.toasts { z-index: 7; }
.talk { z-index: 8; }
.panel { z-index: 10; }
.broken { z-index: 20; }
/* แผงเริ่มใต้แถบปุ่ม ไม่ทับปุ่ม */
.panel.charsheet, .panel.bag, .panel.shop { inset: calc(28 * var(--px)) calc(24 * var(--px)) calc(10 * var(--px)); }
.panel.journal { inset: calc(28 * var(--px)) calc(90 * var(--px)) calc(10 * var(--px)); }
.panel.menu { inset: calc(28 * var(--px)) calc(150 * var(--px)) calc(10 * var(--px)); }
/* แถบบนยาวเกินให้ตัดด้วย … ไม่ไปชนปุ่ม */
.bar { max-width: calc(380 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { max-width: calc(250 * var(--px)); }
/* แผงของ World Map กับแผงยืนยันอยู่คนละฝั่ง ไม่ทับกัน */
.wbox { max-width: calc(310 * var(--px)); }
.wconfirm { width: calc(300 * var(--px)); max-height: calc(180 * var(--px)); overflow: auto; right: calc(8 * var(--px)); top: calc(28 * var(--px)); bottom: auto; }

/* ---------- การสู้ · ฉาก 640×360 ภาพพิกเซล + แผงข้อมูล HTML ---------- */
.combat {
  position: absolute; inset: 0; z-index: 9; overflow: hidden;
  background: #0d1220; pointer-events: auto;
  --gold: #c9a45c; --gold-2: #8a6a34; --panel: rgba(14, 12, 9, .9);
}
.combat.noscene { background: linear-gradient(#141a2a, #1d1a14 60%, #15130f); }
.cstage, .chud { position: absolute; inset: 0; }
.cstage img.cbg, .cstage img.cfg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.cstage img.cfg { z-index: 3; }
.cactors { position: absolute; inset: 0; z-index: 2; }
.chud { z-index: 5; pointer-events: none; }
.chud > * { pointer-events: auto; }

/* ตัวละคร */
.cactor { position: absolute; width: 0; height: 0; }
.cactor .cbody { position: absolute; left: 0; top: 0; transition: transform .14s ease-out; }
.cactor .csprite { position: absolute; image-rendering: pixelated; }
.cactor.foe .csprite { transform: scaleX(-1); }
.cactor .cblock { position: absolute; left: calc(-12 * var(--px)); top: calc(-52 * var(--px)); width: calc(24 * var(--px)); height: calc(50 * var(--px)); border: calc(1 * var(--px)) solid #000; }
.cshadow { position: absolute; left: calc(-17 * var(--px)); top: calc(-4 * var(--px)); width: calc(34 * var(--px)); height: calc(8 * var(--px)); border-radius: 50%; background: rgba(0,0,0,.45); }
.cactor.hit .csprite { filter: brightness(2.2) saturate(.3); }
.cactor.hit .cbody { animation: chit .22s; }
@keyframes chit { 25% { translate: calc(-3 * var(--px)) 0; } 75% { translate: calc(3 * var(--px)) 0; } }
.cactor.down { opacity: .45; filter: grayscale(.8); transition: opacity .4s; }
.cmark { position: absolute; left: calc(-5 * var(--px)); top: calc(-86 * var(--px)); width: 0; height: 0; display: none;
  border-left: calc(5 * var(--px)) solid transparent; border-right: calc(5 * var(--px)) solid transparent; border-top: calc(7 * var(--px)) solid #f3e2b0;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); animation: bob .8s infinite; }
.cactor.target .cmark { display: block; }
.cactor.acting .cshadow { background: radial-gradient(rgba(243,226,176,.55), rgba(0,0,0,.35) 70%); }
.cfloat { position: absolute; left: 0; top: calc(-70 * var(--px)); transform: translateX(-50%); white-space: nowrap; z-index: 4;
  font-weight: 600; font-size: calc(12 * var(--px)); text-shadow: 0 calc(1 * var(--px)) 0 #000, calc(1 * var(--px)) 0 0 #000, calc(-1 * var(--px)) 0 0 #000, 0 calc(-1 * var(--px)) 0 #000;
  animation: cfloat .9s ease-out forwards; pointer-events: none; }
.cfloat.hp { color: #ff8a70; } .cfloat.qi { color: #8cc4ff; } .cfloat.gd { color: #f3dca0; } .cfloat.heal { color: #9be08a; } .cfloat.miss { color: #d8d2c4; font-size: calc(10 * var(--px)); }
@keyframes cfloat { 0% { opacity: 0; translate: 0 calc(6 * var(--px)); } 15% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 calc(-16 * var(--px)); } }

/* แผงทั่วไป */
.combat { font-family: var(--f-ui); font-size: calc(9 * var(--px)); color: #efe4cc; }
.combat button { font-family: inherit; }
/* ตัวหนังสือทอง */
.cgold, .cinfo b, .ctab span, .cplate b, .cturns .clabel, .cbtn:hover:not(:disabled) .lbl, .crowb:hover:not(:disabled) .cn b {
  background: linear-gradient(#fff3cf 20%, #e2bb68 60%, #b78a3e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
/* กรอบทองเส้นคู่ขนาดเล็ก (การ์ด แถบลำดับ) */
.cfr { border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; image-rendering: pixelated; }
.cbox { position: absolute; background: var(--panel); padding: calc(13 * var(--px)) calc(22 * var(--px)) calc(9 * var(--px)); box-sizing: border-box;
  box-shadow: 0 0 0 calc(1 * var(--px)) #000; }
.cbox::before { content: ''; position: absolute; inset: calc(-3 * var(--px)); pointer-events: none; z-index: 2;
  border-style: solid; border-width: calc(32 * var(--px)) calc(44 * var(--px));
  border-image: url('art/ui/frame9.webp') 32 44 / calc(32 * var(--px)) calc(44 * var(--px)) round; image-rendering: pixelated; }
.ctab { position: absolute; z-index: 3; left: calc(10 * var(--px)); top: calc(-10 * var(--px)); display: flex; align-items: center; gap: calc(4 * var(--px));
  padding: 0 calc(14 * var(--px)) 0 calc(6 * var(--px)); height: calc(16 * var(--px)); background: linear-gradient(#2a2116, #120e09); border: calc(1 * var(--px)) solid var(--gold); font-weight: 600; font-size: calc(10 * var(--px));
  box-shadow: 0 0 0 calc(1 * var(--px)) #000;
  clip-path: polygon(0 0, calc(100% - 7 * var(--px)) 0, 100% 50%, calc(100% - 7 * var(--px)) 100%, 0 100%); }
.ctab i { width: calc(15 * var(--px)); height: calc(8 * var(--px)); background: url('art/ui/cloud_s.webp') center / contain no-repeat; image-rendering: pixelated; }

/* ลำดับการต่อสู้ */
.cturns { position: absolute; left: 50%; top: calc(3 * var(--px)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(6 * var(--px));
  padding: calc(1 * var(--px)) calc(4 * var(--px)); background: linear-gradient(rgba(24,19,13,.94), rgba(12,10,7,.94)) padding-box;
  border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; }
.cturns .clabel { font-size: calc(8.5 * var(--px)); font-weight: 600; letter-spacing: .02em; padding-right: calc(2 * var(--px)); }
.cturns::before, .cturns::after { content: ''; position: absolute; top: 50%; width: calc(22 * var(--px)); height: calc(11 * var(--px)); transform: translateY(-50%);
  background: url('art/ui/cloud_s.webp') center / contain no-repeat; image-rendering: pixelated; }
.cturns::before { left: calc(-30 * var(--px)); transform: translateY(-50%) scaleX(-1); } .cturns::after { right: calc(-30 * var(--px)); }
.cchips { display: flex; gap: calc(3 * var(--px)); }
.cchip { position: relative; border: calc(1 * var(--px)) solid #4a3c26; }
.cchip.foe { border-color: #6a2e26; } .cchip.ally { border-color: #3d5a3c; }
.cchip.now { border-color: #f3dca0; box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 0 calc(4 * var(--px)) rgba(243,220,160,.6); }
.cchip .cface { width: calc(20 * var(--px)); height: calc(20 * var(--px)); }
.cnow { position: absolute; left: 50%; top: calc(21 * var(--px)); transform: translateX(-50%); font-size: calc(7 * var(--px)); white-space: nowrap; padding: 0 calc(3 * var(--px)); background: #6b5322; color: #fff4d6; }
.cface { background-color: #2a241a; background-size: cover; background-position: center; image-rendering: pixelated; flex: none; }
.cface.crop92 { background-size: 280% auto; background-position: 50% 13%; }
.cface.crop32 { background-size: 250% auto; background-position: 50% 12%; }

/* การ์ดฝั่งเรา/ฝั่งศัตรู */
.cteam { position: absolute; top: calc(38 * var(--px)); width: calc(172 * var(--px)); display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.cteam.ally { left: calc(6 * var(--px)); } .cteam.foe { right: calc(6 * var(--px)); }
.ccard { display: flex; gap: calc(6 * var(--px)); align-items: center; padding: calc(1 * var(--px)) calc(3 * var(--px));
  background: linear-gradient(135deg, rgba(34,27,18,.95), rgba(12,10,7,.95)) padding-box;
  border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; }
.ccard.foe { cursor: pointer; background: linear-gradient(135deg, rgba(48,18,14,.95), rgba(16,8,6,.95)) padding-box; }
.ccard .cface { width: calc(36 * var(--px)); height: calc(36 * var(--px)); box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 0 0 calc(2 * var(--px)) #b08a4a; }
.ccard.compact { padding: 0 calc(3 * var(--px)); }
.ccard.compact .cface { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.cteam.dense { gap: calc(1 * var(--px)); }
.cteam.dense .ccard { position: relative; border-width: calc(6 * var(--px)); border-image: url('art/ui/frame_s.webp') 8 / calc(6 * var(--px)) stretch; }
.cteam.dense .ctags { position: absolute; right: calc(4 * var(--px)); top: calc(1 * var(--px)); }
.ccard.target { filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(243,220,160,.65)); }
.ccard.acting { filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(232,200,114,.5)); }
.ccard.out { opacity: .4; }
.cinfo { flex: 1; display: flex; flex-direction: column; gap: calc(1 * var(--px)); min-width: 0; }
.cinfo b { font-size: calc(10.5 * var(--px)); font-weight: 600; line-height: 1.25; align-self: flex-start; }
.ccard.compact .cinfo b { font-size: calc(8.5 * var(--px)); }
.crow { display: grid; grid-template-columns: calc(30 * var(--px)) 1fr calc(34 * var(--px)); gap: calc(3 * var(--px)); align-items: center; font-size: calc(7.5 * var(--px)); line-height: 1.25; }
.ccard.compact .crow { grid-template-columns: 0 1fr calc(34 * var(--px)); gap: calc(2 * var(--px)); line-height: 1.05; }
.cname { color: #cdb88a; }
.cnum { font-variant-numeric: tabular-nums; color: rgba(239,228,204,.8); text-align: right; }
.cbar { position: relative; height: calc(4 * var(--px)); background: #0a0806; border: calc(1 * var(--px)) solid #5a4526; box-shadow: 0 0 0 calc(1 * var(--px)) #000; overflow: hidden; }
.cbar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .3s; }
.cbar.hp i { background: linear-gradient(#e0705e, #a8443a); } .cbar.qi i { background: linear-gradient(#78b4ea, #3f6fa0); } .cbar.gd i { background: linear-gradient(#f0cf72, #b8903a); }
.ctags { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(5 * var(--px)); color: #f3dca0; font-size: calc(7.5 * var(--px)); }
.ctag { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.ctag i { width: calc(10 * var(--px)); height: calc(10 * var(--px)); background: center / contain no-repeat; image-rendering: pixelated; }

/* บันทึกเหตุการณ์ */
.clogbox { left: calc(6 * var(--px)); bottom: calc(6 * var(--px)); width: calc(352 * var(--px)); height: calc(84 * var(--px)); box-sizing: border-box; }
.clogbox::after { content: ''; position: absolute; right: calc(-38 * var(--px)); bottom: calc(-26 * var(--px)); width: calc(160 * var(--px)); height: calc(34 * var(--px));
  background: url('art/ui/pine.webp') right bottom / contain no-repeat; opacity: .28; image-rendering: pixelated; pointer-events: none; }
.clog { position: relative; z-index: 1; font-size: calc(9 * var(--px)); line-height: 1.45; color: rgba(239,228,204,.92); }
.clog p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clog p:last-child { color: #fff6e0; }
.clog .who { font-weight: 600; } .clog .who.ally { color: #8fc4ff; } .clog .who.foe { color: #ff8a70; }
.clog p::before { content: '◆ '; color: #8a6a34; font-size: .7em; vertical-align: .15em; }

/* คำสั่ง */
.ccmd { right: calc(6 * var(--px)); bottom: calc(6 * var(--px)); width: calc(270 * var(--px)); min-height: calc(84 * var(--px)); box-sizing: border-box; }
.cmenu.main { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--px)); }
.cbtn {
  position: relative; display: flex; align-items: center; gap: calc(4 * var(--px));
  min-height: calc(26 * var(--px)); padding: 0 calc(3 * var(--px)); font-size: calc(10 * var(--px)); font-weight: 500;
  background: linear-gradient(#2c241a, #15110c) padding-box; color: #e9dcc0; text-align: left;
  border: calc(4 * var(--px)) solid transparent; border-image: url('art/ui/btn.webp') 4 / calc(4 * var(--px)) stretch; image-rendering: pixelated;
}
.cmenu.main .cbtn { flex-direction: column; justify-content: center; gap: 0; padding: calc(1 * var(--px)) 0 0; min-height: calc(29 * var(--px)); text-align: center; }
.cbtn:hover:not(:disabled), .cbtn:focus-visible { border-image-source: url('art/ui/btn_hi.webp'); background: linear-gradient(#3e3120, #1c160e) padding-box;
  filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(243,220,160,.45)); outline: none; }
.cbtn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.cicon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
.cbtn .lbl { white-space: nowrap; line-height: 1.15; }
.cbtn .k { position: absolute; right: calc(1 * var(--px)); top: 0; color: #9c7e48; font-size: calc(7 * var(--px)); line-height: 1; }
.ctarget { position: absolute; right: calc(20 * var(--px)); top: calc(-7 * var(--px)); z-index: 3; margin: 0; padding: 0 calc(5 * var(--px)); font-size: calc(7.5 * var(--px)); color: #cdb88a; background: #120e09; border: calc(1 * var(--px)) solid #5a4526; }
.cwait { margin: 0; color: rgba(239,228,204,.75); }
.cresult { margin: 0; font-size: calc(16 * var(--px)); font-weight: 600; color: #f3dca0; text-align: center; }
.cresult.lost { color: #ff8a70; }
/* เมนูวิชา/ของ */
.cmenu.moves, .cmenu.items { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.crowh, .crowb { display: grid !important; grid-template-columns: 1fr calc(34 * var(--px)) calc(34 * var(--px)) calc(34 * var(--px)); gap: calc(3 * var(--px)); align-items: center; }
.crowh { font-size: calc(8 * var(--px)); font-weight: 600; color: #e2c784; padding: 0 calc(7 * var(--px)) calc(1 * var(--px)); border-bottom: calc(1 * var(--px)) solid var(--gold-2); }
.crowh span + span, .crowb .cv { text-align: center; }
.crowb { height: auto; min-height: calc(20 * var(--px)); padding: calc(2 * var(--px)) calc(4 * var(--px)); }
.crowb .cn { display: flex; flex-direction: column; min-width: 0; }
.crowb .cn b { font-weight: 600; font-size: calc(9 * var(--px)); }
.crowb .cn .k { position: absolute; right: calc(1 * var(--px)); top: 0; }
.crowb .sub, .crowb .why { font-size: calc(7 * var(--px)); color: rgba(239,228,204,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crowb .why { color: #f2b8ac; }
.crowb .cv { font-variant-numeric: tabular-nums; font-size: calc(8.5 * var(--px)); }
.cfoot { display: flex; justify-content: space-between; align-items: center; font-size: calc(7.5 * var(--px)); color: rgba(239,228,204,.7); margin-top: calc(2 * var(--px)); }
.cback { font-family: inherit; font-size: calc(7.5 * var(--px)); padding: 0 calc(5 * var(--px)); background: linear-gradient(#2c241a, #15110c); color: #e9dcc0; border: calc(1 * var(--px)) solid #7a5e30; box-shadow: 0 0 0 calc(1 * var(--px)) #000; }
.cback:hover { border-color: #f3dca0; }

/* ป้ายเริ่มศึก · ป้ายสถานที่ */
.cbanner { position: absolute; z-index: 8; left: 50%; top: 42%; width: calc(404 * var(--px)); height: calc(58 * var(--px)); transform: translate(-50%, -50%);
  background: url('art/ui/banner_red.webp') center / 100% 100% no-repeat; image-rendering: pixelated; display: flex; align-items: center; justify-content: center;
  animation: cban .35s ease-out; transition: opacity .3s, transform .3s; }
.cbanner span { font-size: calc(28 * var(--px)); font-weight: 600; color: #f6e2b0; letter-spacing: .04em; text-shadow: 0 calc(2 * var(--px)) 0 #2a0c08, calc(2 * var(--px)) 0 0 #2a0c08, calc(-2 * var(--px)) 0 0 #2a0c08; }
.cbanner.gone { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
@keyframes cban { from { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); } }
.cplate { position: absolute; z-index: 7; left: 50%; top: calc(40 * var(--px)); width: calc(250 * var(--px)); height: calc(36 * var(--px)); transform: translateX(-50%);
  background: url('art/ui/plate.webp') center / 100% 100% no-repeat; image-rendering: pixelated; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  animation: fadein .4s; transition: opacity .5s; }
.cplate b { font-size: calc(15 * var(--px)); font-weight: 600; letter-spacing: .03em; }
.cplate span { font-size: calc(8 * var(--px)); color: rgba(239,228,204,.85); }
.cplate.gone { opacity: 0; }
@keyframes fadein { from { opacity: 0; } }
.gameover {
  position: absolute; inset: 0; z-index: 15; background: rgba(10,8,6,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--px));
  pointer-events: auto;
}
.gameover h1 { margin: 0; font-size: calc(20 * var(--px)); }
.gameover button { font-size: calc(11 * var(--px)); padding: calc(2 * var(--px)) calc(10 * var(--px)); }

/* ---------- หน้าแรก · เตือนหมุนจอ · จุดเตือนบนปุ่ม ---------- */
/* หน้าแรก: ภาพวาดเต็มจอ · ชื่อเกมทองไล่เฉด · ปุ่มกรอบเดียวกับแผงอื่น */
.title {
  position: absolute; inset: 0; z-index: 30; pointer-events: auto; overflow: hidden; background: #0c0a07;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(7 * var(--px));
}
.title .tbg, .title .tfg, .title .tshade { position: absolute; inset: calc(-8 * var(--px)); pointer-events: none; }
.title .tbg { background: url('art/battle/gs_day_bg.webp') center 40% / cover no-repeat; image-rendering: pixelated; animation: tdrift 40s ease-in-out infinite alternate; }
.title .tfg { background: url('art/battle/gs_day_fg.webp') center bottom / cover no-repeat; image-rendering: pixelated; animation: tdrift 40s ease-in-out infinite alternate-reverse; }
.title .tshade { background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(10,8,6,.62), rgba(10,8,6,.2) 70%, transparent),
  linear-gradient(rgba(8,7,5,.55), transparent 30%, transparent 60%, rgba(8,7,5,.8)); }
@keyframes tdrift { from { transform: translateX(calc(-4 * var(--px))); } to { transform: translateX(calc(4 * var(--px))); } }
@media (prefers-reduced-motion: reduce) { .title .tbg, .title .tfg { animation: none; } }
.title > :not(.tbg):not(.tfg):not(.tshade) { position: relative; z-index: 2; }
.title .thead { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--px)); margin-bottom: calc(4 * var(--px)); }
.title .tname { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.title h1 { margin: 0; font-size: calc(34 * var(--px)); font-weight: 600; letter-spacing: .02em; line-height: 1.25;
  background: linear-gradient(#fff6d8 18%, #e8c170 58%, #a9782f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #000) drop-shadow(0 0 calc(8 * var(--px)) rgba(0,0,0,.8)); }
.title .tcloud { width: calc(46 * var(--px)); height: calc(22 * var(--px)); background: url('art/ui/cloud_l.webp') center / contain no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 0 calc(4 * var(--px)) rgba(0,0,0,.8)); }
.title .tcloud.r { transform: scaleX(-1); }
.title .tdiv { width: calc(170 * var(--px)); height: calc(9 * var(--px)); background: url('art/ui/divider.webp') center / contain no-repeat; image-rendering: pixelated; }
.title .sub { margin: 0; color: #e9dcc0; font-size: calc(11.5 * var(--px)); text-shadow: 0 calc(1 * var(--px)) calc(2 * var(--px)) #000; }
.title .trow { display: flex; flex-direction: column; gap: calc(5 * var(--px)); align-items: stretch; min-width: calc(210 * var(--px));
  padding: calc(17 * var(--px)) calc(26 * var(--px)); position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(70,54,30,.55), transparent 70%), linear-gradient(rgba(24,19,12,.93), rgba(10,8,6,.95));
  box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 calc(4 * var(--px)) calc(18 * var(--px)) rgba(0,0,0,.75); }
/* กรอบทองลายเมฆ (ชุดเดียวกับแผงในเกม) วางทับขอบ */
.title .trow::before { content: ''; position: absolute; inset: calc(-3 * var(--px)); pointer-events: none; z-index: 1;
  border-style: solid; border-width: calc(32 * var(--px)) calc(44 * var(--px));
  border-image: url('art/ui/frame9.webp') 32 44 / calc(32 * var(--px)) calc(44 * var(--px)) round; image-rendering: pixelated;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
.title .trow > * { position: relative; z-index: 2; }
.title button { font-family: var(--f-ui); font-size: calc(10.5 * var(--px)); line-height: 1.9; padding: 0 calc(10 * var(--px)); margin: 0; color: #e9dcc0;
  background: linear-gradient(#2c241a, #15110c) padding-box; border: calc(4 * var(--px)) solid transparent; border-radius: 0;
  border-image: url('art/ui/btn.webp') 4 / calc(4 * var(--px)) stretch; image-rendering: pixelated; }
.title button.primary { background: linear-gradient(#3a5230, #1d2c18) padding-box; color: #eaf6dc; }
.title button:hover, .title button:focus-visible { outline: 0; border-image-source: url('art/ui/btn_hi.webp'); filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(243,220,160,.45)); }
.title button.danger { color: #f2b8ac; background: linear-gradient(#5a211a, #33110d) padding-box; }
.title .small { font-size: calc(7.5 * var(--px)); color: rgba(233,220,192,.75); margin: calc(4 * var(--px)) 0 0; padding: calc(1 * var(--px)) calc(8 * var(--px));
  background: rgba(10,8,6,.7); border: calc(1 * var(--px)) solid #5a4526; box-shadow: 0 0 0 calc(1 * var(--px)) #000; }
.title .tver { position: absolute !important; right: calc(10 * var(--px)); bottom: calc(6 * var(--px)); margin: 0; font-size: calc(7 * var(--px)); color: rgba(233,220,192,.55); }
.tools .tool.ready { position: relative; }
.tools .tool.ready::after {
  content: ''; position: absolute; right: calc(-2 * var(--px)); top: calc(-2 * var(--px));
  width: calc(5 * var(--px)); height: calc(5 * var(--px)); border-radius: 50%; background: #e8c872;
}
ul.jdone { margin: 0; padding: 0 0 0 calc(12 * var(--px)); font-size: calc(9 * var(--px)); color: rgba(239,228,204,.7); }
ul.jdone li.missed { color: #f2b8ac; }
.rotate { display: none; }
@media (orientation: portrait) and (max-width: 760px) {
  .rotate {
    display: flex; position: fixed; inset: 0; z-index: 50; background: var(--ink); color: var(--paper);
    align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 18px; line-height: 1.6;
  }
}

/* ---------- แผงแบบยุทธภพ (ตัวละคร · กระเป๋า · สมุด) ---------- */
.panel.wx {
  inset: calc(24 * var(--px)) calc(8 * var(--px)) calc(6 * var(--px));
  padding: calc(14 * var(--px)) calc(20 * var(--px)) calc(10 * var(--px));
  font-family: var(--f-ui); color: #e9dcc0;
  background: radial-gradient(ellipse at 30% 0%, rgba(58,46,28,.55), transparent 60%), linear-gradient(#17130d, #0c0a07);
  border: 0; border-radius: 0; box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 calc(4 * var(--px)) calc(20 * var(--px)) rgba(0,0,0,.7);
  gap: calc(5 * var(--px)); overflow: hidden;
}
.panel.wx::before { content: ''; position: absolute; inset: calc(-2 * var(--px)); pointer-events: none; z-index: 3;
  border-style: solid; border-width: calc(32 * var(--px)) calc(44 * var(--px));
  border-image: url('art/ui/frame9.webp') 32 44 / calc(32 * var(--px)) calc(44 * var(--px)) round; image-rendering: pixelated; }
.panel.wx::after { content: ''; position: absolute; right: calc(26 * var(--px)); top: calc(10 * var(--px)); width: calc(60 * var(--px)); height: calc(80 * var(--px));
  background: url('art/ui/bamboo.webp') right top / contain no-repeat; opacity: .14; image-rendering: pixelated; pointer-events: none; }
.panel.wx button { font-family: inherit; }
.panel.wx .wtitle { display: flex; align-items: center; gap: calc(6 * var(--px)); position: relative; z-index: 4; }
.panel.wx .wtitle h2 { margin: 0; font-size: calc(17 * var(--px)); font-weight: 600; letter-spacing: .03em;
  background: linear-gradient(#fff3cf 20%, #e2bb68 60%, #b78a3e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
.wcloud { width: calc(34 * var(--px)); height: calc(17 * var(--px)); background: url('art/ui/cloud_m.webp') center / contain no-repeat; image-rendering: pixelated; }
.wgrid { flex: 1 1 auto; min-height: 0; display: grid; gap: calc(5 * var(--px)); }
.wxb { position: relative; min-height: 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding: calc(1 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px));
  background: linear-gradient(160deg, rgba(36,29,19,.92), rgba(14,11,8,.94)) padding-box;
  border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; image-rendering: pixelated; }
.wscroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: calc(2 * var(--px)); padding-right: calc(3 * var(--px)); }
.wh { margin: 0 !important; font-size: calc(11 * var(--px)) !important; font-weight: 600; display: flex; align-items: center; gap: calc(4 * var(--px));
  background: linear-gradient(#fff3cf 20%, #e2bb68 70%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.wh::before { content: ''; width: calc(7 * var(--px)); height: calc(7 * var(--px)); background: url('art/ui/star.webp') center / contain no-repeat; image-rendering: pixelated; flex: none; filter: none; }
.whrow { display: flex; align-items: center; justify-content: space-between; border-bottom: calc(1 * var(--px)) solid rgba(201,164,92,.35); padding-bottom: calc(1 * var(--px)); }
.wxb > .wh { border-bottom: calc(1 * var(--px)) solid rgba(201,164,92,.35); padding-bottom: calc(1 * var(--px)); }
.wsub { margin: calc(3 * var(--px)) 0 0; font-size: calc(9 * var(--px)); font-weight: 600; color: #c9a45c; display: flex; align-items: center; gap: calc(4 * var(--px)); }
.wsub::after { content: ''; flex: 1; height: calc(1 * var(--px)); background: linear-gradient(90deg, rgba(201,164,92,.5), transparent); }
.wsmall { font-size: calc(7.5 * var(--px)); color: rgba(233,220,192,.62); line-height: 1.3; }
.wname { font-size: calc(12 * var(--px)); font-weight: 600; color: #f6ecd4; }
.wtag { display: inline-block; font-size: calc(7.5 * var(--px)); padding: 0 calc(5 * var(--px)); color: #d7efc9; background: linear-gradient(#2f4a2a, #1b2c19); border: calc(1 * var(--px)) solid #6d8a52; box-shadow: 0 0 0 calc(1 * var(--px)) #000; }
.wtag.red { color: #ffd2c6; background: linear-gradient(#5a211a, #33110d); border-color: #a4533f; }
.wdesc { font-size: calc(8.5 * var(--px)); line-height: 1.45; color: rgba(233,220,192,.88); }
.wline { font-size: calc(8 * var(--px)); line-height: 1.35; }
.wline.dim { color: rgba(233,220,192,.6); } .wline.warn, .wjrow.warn .wv { color: #f2b8ac; }
.wgood { color: #9be08a; }
.wcoin { font-size: calc(9 * var(--px)); font-weight: 600; color: #e8c872; }
/* ปุ่มในแผง */
.panel.wx button { background: linear-gradient(#2c241a, #15110c) padding-box; color: #e9dcc0; text-align: center;
  border: calc(4 * var(--px)) solid transparent; border-radius: 0; border-image: url('art/ui/btn.webp') 4 / calc(4 * var(--px)) stretch; padding: 0 calc(5 * var(--px)); font-size: calc(9 * var(--px)); line-height: 1.5; margin: 0; }
.panel.wx button:hover:not(:disabled) { border-image-source: url('art/ui/btn_hi.webp'); background: linear-gradient(#3e3120, #1c160e) padding-box; filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(243,220,160,.4)); }
.panel.wx button.primary { background: linear-gradient(#3a5230, #1d2c18) padding-box; color: #eaf6dc; }
.panel.wx button.on { border-image-source: url('art/ui/btn_hi.webp'); background: linear-gradient(#3a5230, #1d2c18) padding-box; color: #fff3cf; }
.panel.wx button:disabled { opacity: .45; }
.wmini { font-size: calc(8 * var(--px)) !important; padding: 0 calc(4 * var(--px)) !important; flex: none; }
.wbig { font-size: calc(10 * var(--px)) !important; min-width: calc(70 * var(--px)); padding: calc(1 * var(--px)) calc(10 * var(--px)) !important; }
.wacts { display: flex; gap: calc(4 * var(--px)); justify-content: flex-end; margin-top: auto; }
.wtabrow { display: flex; gap: calc(3 * var(--px)); flex-wrap: wrap; }
.wtab { flex: 1; min-width: 0; font-size: calc(9 * var(--px)) !important; line-height: 1.9 !important; white-space: nowrap; }
.wfoot { display: flex; gap: calc(6 * var(--px)); align-items: stretch; position: relative; z-index: 4; }
.wtip { flex: 1; display: flex; align-items: center; gap: calc(5 * var(--px)); font-size: calc(7.5 * var(--px)); color: rgba(233,220,192,.7);
  padding: 0 calc(6 * var(--px)); background: rgba(10,8,6,.7); border: calc(1 * var(--px)) solid #5a4526; box-shadow: 0 0 0 calc(1 * var(--px)) #000; min-height: calc(16 * var(--px)); }
.wtip:empty { visibility: hidden; }
.wbang { width: calc(11 * var(--px)); height: calc(11 * var(--px)); flex: none; border-radius: 50%; border: calc(1 * var(--px)) solid #c9a45c; color: #e8c872; font-style: normal; font-size: calc(8 * var(--px)); font-weight: 600; display: grid; place-items: center; line-height: 1; }
.wclose { min-width: calc(80 * var(--px)); font-size: calc(10 * var(--px)) !important; }
.wkv { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(8.5 * var(--px)); gap: calc(4 * var(--px)); }
.wkv span { color: rgba(233,220,192,.7); }
.wkv.box { padding: calc(1 * var(--px)) calc(5 * var(--px)); background: rgba(0,0,0,.3); border: calc(1 * var(--px)) solid #3d3020; }
.wdiv { height: calc(5 * var(--px)); background: url('art/ui/divider.webp') center / contain no-repeat; image-rendering: pixelated; margin: calc(2 * var(--px)) 0; }

/* ตัวละคร */
.wgrid.wchar { grid-template-columns: calc(112 * var(--px)) 1fr 1fr; grid-template-rows: auto 1fr; }
.wchar .wside { grid-row: 1 / 3; display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-height: 0; }
.wchar .wtabs { grid-column: 2 / 4; }
.wportrait { aspect-ratio: 1; background: #1c1710 center / cover no-repeat; image-rendering: pixelated;
  border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; box-shadow: inset 0 0 calc(12 * var(--px)) rgba(0,0,0,.8); }
.wwho { flex: 1; align-items: stretch; text-align: center; gap: calc(2 * var(--px)); }
.wwho .wname { font-size: calc(13 * var(--px)); }
.wwho .wtag { align-self: center; }
.wexp { color: #8fc4ff; }
.wstat { display: grid; grid-template-columns: calc(6 * var(--px)) 1fr auto calc(34 * var(--px)); gap: calc(5 * var(--px)); align-items: center;
  padding: calc(1 * var(--px)) calc(3 * var(--px)); border-bottom: calc(1 * var(--px)) solid rgba(201,164,92,.12); }
.wstat.main .wsn b { color: #f3dca0; } .wstat.side .wsn b { color: #e2d3ae; }
.wdot { width: calc(5 * var(--px)); height: calc(5 * var(--px)); transform: rotate(45deg); background: #7a5e30; box-shadow: 0 0 0 calc(1 * var(--px)) #000; }
.wstat.main .wdot { background: #e8c872; }
.wsn { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wsn b { font-size: calc(9 * var(--px)); font-weight: 500; }
.wup { font-size: calc(7 * var(--px)); color: #a9d6a0; }
.wsv { font-size: calc(10 * var(--px)); font-weight: 600; font-variant-numeric: tabular-nums; color: #f6ecd4; text-align: right; }
.wbonus { font-style: normal; font-size: calc(8 * var(--px)); color: #9be08a; }
.panel.wx button.wplus { display: flex; justify-content: center; align-items: center; gap: calc(3 * var(--px)); padding: 0 !important; font-size: calc(8 * var(--px)); }
.wplus b { color: #e8c872; font-size: calc(10 * var(--px)); line-height: 1; }
.wtech { padding: calc(3 * var(--px)) calc(4 * var(--px)); background: rgba(0,0,0,.28); border: calc(1 * var(--px)) solid #4a3a22; box-shadow: 0 0 0 calc(1 * var(--px)) #000; display: flex; flex-direction: column; gap: calc(1 * var(--px)); }
.wtt { display: flex; gap: calc(5 * var(--px)); align-items: center; }
.wbook { width: calc(22 * var(--px)); height: calc(28 * var(--px)); flex: none; background: linear-gradient(90deg, #1d2a3a 15%, #2f4660 16%, #26384e); border: calc(1 * var(--px)) solid #000; box-shadow: inset 0 0 0 calc(1 * var(--px)) #6a86a8; }
.wbook.qi { background: linear-gradient(90deg, #1c2e1c 15%, #33512f 16%, #2a4327); box-shadow: inset 0 0 0 calc(1 * var(--px)) #7fa06a; }
.wttx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wttx b { font-size: calc(10 * var(--px)); font-weight: 600; color: #f3dca0; }
.wprog { height: calc(3 * var(--px)); background: #0a0806; border: calc(1 * var(--px)) solid #3d5a3c; margin-top: calc(1 * var(--px)); }
.wprog i { display: block; height: 100%; background: linear-gradient(#8fd07a, #4f8a45); }
.wbadge { font-size: calc(7 * var(--px)); padding: 0 calc(4 * var(--px)); border: calc(1 * var(--px)) solid #5a4a30; color: rgba(233,220,192,.6); align-self: flex-start; }
.wbadge.on { color: #d7efc9; border-color: #6d8a52; background: #1f3019; }
.wmoves { display: flex; flex-wrap: wrap; gap: 0 calc(6 * var(--px)); align-items: baseline; margin-top: calc(1 * var(--px)); }
.wsub2 { font-size: calc(7.5 * var(--px)); color: #c9a45c; width: 100%; }
.wmove { font-size: calc(8 * var(--px)); color: #bfe0f2; }

/* กระเป๋า */
.wgrid.wbagg { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
.wbagg .wgear .wslot { grid-template-columns: calc(8 * var(--px)) calc(50 * var(--px)) 1fr; gap: calc(3 * var(--px)); }
.wbagg .wsl { font-size: calc(8 * var(--px)); white-space: nowrap; }
.wbagg .wdetail { overflow: hidden; } .wbagg .wdetail .wsub { margin-top: calc(1 * var(--px)); }
.wbagg .wscell.has .wst { flex-direction: column; gap: 0; }
.wbagg .wscell { min-height: calc(22 * var(--px)); }
.wgear { gap: calc(3 * var(--px)) !important; }
.wgear { gap: calc(1 * var(--px)); }
.wslot { display: grid; grid-template-columns: calc(14 * var(--px)) calc(48 * var(--px)) 1fr; gap: calc(4 * var(--px)); align-items: center; }
.wsloti { width: calc(12 * var(--px)); height: calc(12 * var(--px)); border: calc(1 * var(--px)) solid #5a4526; transform: rotate(45deg) scale(.7); background: #1c1710; }
.wsl { font-size: calc(8.5 * var(--px)); color: #cdb88a; }
.wscell { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(13 * var(--px)); padding: 0 calc(3 * var(--px)); background: rgba(0,0,0,.3); border: calc(1 * var(--px)) solid #3d3020; }
.wscell.has .wst { flex-direction: row; gap: calc(5 * var(--px)); align-items: baseline; }
.wscell.has { border-color: #6d8a52; background: linear-gradient(90deg, rgba(47,74,42,.55), rgba(0,0,0,.3)); cursor: pointer; }
.wslot.sel .wscell { box-shadow: 0 0 0 calc(1 * var(--px)) #e8c872; }
.wempty { font-size: calc(8 * var(--px)); color: rgba(233,220,192,.35); }
.wst { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wst b { font-size: calc(9 * var(--px)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.witem { display: flex; align-items: center; gap: calc(5 * var(--px)); padding: calc(1 * var(--px)) calc(4 * var(--px)); background: rgba(0,0,0,.28); border: calc(1 * var(--px)) solid #3d3020; cursor: pointer; }
.witem:hover { border-color: #7a5e30; }
.witem.sel { border-color: #e8c872; background: linear-gradient(90deg, rgba(47,74,42,.6), rgba(0,0,0,.3)); }
.wn { font-size: calc(9 * var(--px)); font-variant-numeric: tabular-nums; color: #e9dcc0; }
.wicon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
.wicon.big { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.wdtop { display: flex; gap: calc(7 * var(--px)); align-items: flex-start; }
.wart { width: calc(54 * var(--px)); height: calc(54 * var(--px)); display: grid; place-items: center; flex: none;
  background: radial-gradient(#3a3020, #15110c 75%) padding-box; border: calc(8 * var(--px)) solid transparent; border-image: url('art/ui/frame_s.webp') 8 / calc(8 * var(--px)) stretch; }
.wdn { display: flex; flex-direction: column; gap: calc(2 * var(--px)); align-items: flex-start; }
.wdetail .wdesc { padding-left: calc(3 * var(--px)); }

/* สมุด */
.wgrid.wjour { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
.wgrid.wjledgergrid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.wjledgergrid .wjtabs { grid-column: 1; }
.wjledger { gap: calc(4 * var(--px)); }
.wjledger > h3 { margin: calc(4 * var(--px)) 0 0; color: #e8c872; border-bottom: calc(1 * var(--px)) solid rgba(201,164,92,.35); }
.wjtabs { grid-column: 1 / 3; }
.wjtabs .wtab { flex: 0 1 calc(110 * var(--px)); }
.wjcard { display: flex; gap: calc(5 * var(--px)); align-items: center; padding: calc(2 * var(--px)); background: rgba(0,0,0,.3); border: calc(1 * var(--px)) solid #3d3020; cursor: pointer; }
.wjcard:hover { border-color: #7a5e30; }
.wjcard.sel { border-color: #e8c872; background: linear-gradient(90deg, rgba(47,74,42,.55), rgba(0,0,0,.3)); }
.wjcard.urgent .wdue { color: #ff9a86; }
.wjcard.missed { opacity: .6; }
.wjcard .wst span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdue { font-size: calc(7.5 * var(--px)); color: #f3dca0; }
.wthumb { flex: none; background-color: #1c1710; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 0 0 calc(2 * var(--px)) #7a5e30; }
.wthumb.small { width: calc(58 * var(--px)); height: calc(44 * var(--px)); }
.wthumb.big { width: 100%; height: calc(96 * var(--px)); }
.wjdetail { gap: calc(4 * var(--px)); }
.wjinfo { gap: calc(4 * var(--px)); padding-right: calc(2 * var(--px)); }
.wjdetail > .wacts { flex: none; }
/* หน้ากลุ่ม */
.wgrid.wparty { grid-template-columns: 1fr 1fr; align-content: start; }
.wpcard { flex-direction: row; gap: calc(7 * var(--px)); align-items: flex-start; padding: calc(4 * var(--px)) calc(6 * var(--px)); }
.wpcard .wportrait { width: calc(78 * var(--px)); flex: none; box-shadow: 0 0 0 calc(1 * var(--px)) #000, 0 0 0 calc(2 * var(--px)) #7a5e30; }
.wpinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.wprows { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.wprow { display: grid; grid-template-columns: calc(34 * var(--px)) 1fr calc(22 * var(--px)); align-items: center; gap: calc(4 * var(--px)); font-size: calc(8 * var(--px)); }
.wprow .wk { color: #c9a45c; } .wprow .wv { text-align: right; font-variant-numeric: tabular-nums; }
.wpcard .wdesc { margin: 0; }
.wpempty .wdesc { margin: 0; }
.wconfirm .warn { color: #f2b8ac; }
.wrecap { display: flex; flex-direction: column; gap: calc(1 * var(--px)); }
.wrecap .wdesc { margin: 0; }
.wjh { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--px)); }
.wjrows { display: flex; flex-direction: column; border-top: calc(1 * var(--px)) solid rgba(201,164,92,.3); }
.wjrow { display: grid; grid-template-columns: calc(72 * var(--px)) 1fr; gap: calc(6 * var(--px)); padding: calc(1 * var(--px)) calc(2 * var(--px)); border-bottom: calc(1 * var(--px)) solid rgba(201,164,92,.15); font-size: calc(8.5 * var(--px)); }
.wk { color: #c9a45c; font-weight: 600; } .wv { color: #e9dcc0; }

/* ไอคอนค่า ช่องอุปกรณ์ */
.wdot.ic { width: calc(12 * var(--px)); height: calc(12 * var(--px)); transform: none; background: center / contain no-repeat; box-shadow: none; image-rendering: pixelated; }
.wstat:has(.wdot.ic) { grid-template-columns: calc(12 * var(--px)) 1fr auto calc(34 * var(--px)); }
.panel.wx .wsloti { width: calc(12 * var(--px)); height: calc(12 * var(--px)); transform: none; border: 0; background: center / contain no-repeat; image-rendering: pixelated; }
.wbagg .wgear .wslot { grid-template-columns: calc(12 * var(--px)) calc(48 * var(--px)) 1fr; }

/* ร้าน */
.wgrid.wshopg { grid-template-columns: calc(120 * var(--px)) 1fr 1fr; }
.wseller { align-items: center; text-align: center; }
.wseller .wportrait { width: calc(84 * var(--px)); }
.wgreet { font-size: calc(8.5 * var(--px)); line-height: 1.45; color: rgba(233,220,192,.85); font-style: italic; }
.wseller .wkv { align-self: stretch; }
.witem.wshop { cursor: default; }
.witem.wshop > .wmini { min-width: 44px; }
.wprice { font-size: calc(8.5 * var(--px)); color: #e8c872; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* เมนูหยุดพัก */
.panel.menu.wx { inset: calc(28 * var(--px)) calc(96 * var(--px)) calc(24 * var(--px)); }
.wgrid.wmenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
.wmenu > .wxb:nth-child(2) { grid-row: 1 / 4; grid-column: 2; }
.panel.menu.wx .wgrid.wmenu > .wgallery { grid-column: 1; grid-row: 3; overflow: auto; }
.panel.menu.wx .wgrid.wmenu > .wxb:not(:nth-child(2)) { min-height: 0; }
.panel.menu.wx .wgrid.wmenu .wgal { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.panel.menu.wx .wgrid.wmenu .wgalitem { min-height: 32px; }
.wmenu .wxb button { width: 100%; line-height: 1.8 !important; }
.wmrow { display: flex; gap: calc(3 * var(--px)); }
.wkey { font-size: calc(7.5 * var(--px)) !important; padding: 0 calc(4 * var(--px)); color: #e8c872 !important; border: calc(1 * var(--px)) solid #5a4526; background: #120e09; }
.panel.wx button.danger { color: #ffd2c6; background: linear-gradient(#5a211a, #33110d) padding-box; }
.wportrait.wspr { background-size: 70%; background-position: center 70%; }

/* สรุปผลศึก · แสดงผลจริงหลังลงรางวัลแล้ว แทนข้อความ toast ที่พลาดได้ง่าย */
.panel.wx.bresult {
  position: absolute; inset: calc(38 * var(--px)) calc(105 * var(--px)) calc(34 * var(--px)); z-index: 14;
  display: flex; flex-direction: column; overflow: hidden; padding: calc(12 * var(--px)) calc(18 * var(--px)) calc(10 * var(--px));
  box-shadow: 0 0 0 100vmax rgba(5,4,3,.72), 0 calc(5 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,.9);
}
.bresult .brtitle { justify-content: center; }
.bresult .brtitle .wcloud { transform: scaleX(-1); }
.bresult .brintro { display: grid; grid-template-columns: calc(52 * var(--px)) 1fr; grid-template-rows: auto auto; gap: 0 calc(9 * var(--px)); align-items: center; }
.bresult .brseal { grid-row: 1 / 3; width: calc(47 * var(--px)); height: calc(47 * var(--px)); display: grid; place-items: center;
  font-family: serif; font-size: calc(27 * var(--px)); font-weight: 600; line-height: 1; color: #f4d994;
  background: radial-gradient(circle, #853126, #3c130f 70%); border: calc(2 * var(--px)) solid #b9664c; box-shadow: inset 0 0 0 calc(2 * var(--px)) #2a0c09, 0 calc(2 * var(--px)) calc(7 * var(--px)) #000; }
.bresult.lost .brseal { color: #ffd3c8; background: radial-gradient(circle, #6e2722, #2c0e0c 72%); }
.bresult.fled .brseal { color: #dce6cf; background: radial-gradient(circle, #35513a, #17251a 72%); border-color: #657c5e; }
.bresult .brlead { font-family: var(--f-title); font-size: calc(15 * var(--px)); font-weight: 600; color: #f3dca0; }
.bresult.lost .brlead { color: #f2b8ac; }
.bresult .brwhere { margin: 0; font-size: calc(8.5 * var(--px)); color: rgba(233,220,192,.7); }
.bresult .brrewards { flex: 1 1 auto; min-height: 0; margin-top: calc(5 * var(--px)); }
.bresult .brlist { gap: calc(2 * var(--px)); }
.bresult .brrow { min-height: calc(22 * var(--px)); display: grid; grid-template-columns: calc(17 * var(--px)) minmax(0,1fr) auto; gap: calc(6 * var(--px)); align-items: center;
  padding: calc(2 * var(--px)) calc(6 * var(--px)); background: rgba(0,0,0,.3); border: calc(1 * var(--px)) solid #3d3020; }
.bresult .brrow.good { border-left-color: #6d8a52; }
.bresult .brrow.bad { border-left-color: #a4533f; }
.bresult .bricon { width: calc(15 * var(--px)); height: calc(15 * var(--px)); display: grid; place-items: center; background: center / contain no-repeat; image-rendering: pixelated; }
.bresult .bricon::before { content: '✦'; color: #e8c872; font-style: normal; }
.bresult .bricon.money::before { content: '●'; }
.bresult .bricon.item[style]::before { content: ''; }
.bresult .bricon.skill::before { content: '武'; font-family: serif; }
.bresult .bricon.party::before { content: '伴'; font-family: serif; }
.bresult .brname { min-width: 0; font-size: calc(9 * var(--px)); color: #e9dcc0; overflow-wrap: anywhere; }
.bresult .brvalue { font-size: calc(9 * var(--px)); color: #9be08a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bresult .brrow.bad .brvalue { color: #f2b8ac; }
.bresult .brempty { margin: auto; padding: calc(8 * var(--px)); text-align: center; color: rgba(233,220,192,.62); font-size: calc(9 * var(--px)); }
.bresult .brnote { margin: calc(3 * var(--px)) 0 0; padding: calc(4 * var(--px)) calc(6 * var(--px)); color: #dfc999; background: rgba(86,55,22,.25); border-left: calc(2 * var(--px)) solid #9a7138; font-size: calc(8 * var(--px)); line-height: 1.5; }
.bresult .brfoot { margin-top: calc(5 * var(--px)); }

/* ================= ตัวอักษร 3 ชั้น (วางท้ายไฟล์ ทับค่าข้างบน) ================= */
/* ชั้นยุทธภพ: ชื่อฉาก สถานที่ คน วิชา ของ หัวแผง */
.title h1, .gameover h1, .talk .who, .wplace, .wbox h2, .wconfirm h2,
.cbanner span, .cplate b, .ctab span, .cturns .clabel, .cinfo b, .cresult, .crowb .cn b, .brlead,
.panel.wx .wtitle h2, .panel.wx .wh, .panel.wx .wname, .panel.wx .wsub, .wttx b, .wst b, .wjh .wname, .wmove {
  font-family: var(--f-title); }
/* ชั้นเนื้อเรื่อง: บทพูด คำบรรยาย คำอธิบาย */
.talk .line, .wdesc, .wgreet, .cplate span, .title .sub, .wline:not(.dim):not(.warn) {
  font-family: var(--f-story); }
/* ชั้นระบบ: สิ่งที่กดได้ ตัวเลข ข้อมูล */
.choices, .choices li, .bar, .prompt, .toast, .cfloat, .cchip, .clog, .crow, .cnum, .wsv, .wn, .wprice, .wcoin,
.wjrow, .wdue, .wtab, .wkv, .wsmall, .wtag, .wbadge, .cbtn .lbl, .panel.wx button, .brrow, .brnote, .brempty {
  font-family: var(--f-ui); }
.cnum, .wsv, .wn, .wprice, .wcoin, .wdue, .crowb .cv, .cfloat { font-variant-numeric: tabular-nums; }
.cfloat { font-weight: 600; }
/* ภาษาไทยต้องการที่ว่างแนวตั้ง */
.talk .line { line-height: 1.55; }
.choices li { line-height: 1.6; }
.wdesc, .wgreet { line-height: 1.55; }
.clog { line-height: 1.5; }
.wst, .wsn, .cinfo b, .wttx { line-height: 1.35; }
.wsmall { line-height: 1.4; font-size: calc(7.5 * var(--px)); }
/* ชื่อคนพูดใหญ่กว่าบทพูดราว 15–20% */
.talk .who { font-size: calc(12.5 * var(--px)); padding: 0 calc(9 * var(--px)); top: calc(-12 * var(--px)); letter-spacing: .02em; }
.talk { padding-top: calc(11 * var(--px)); }
.cinfo b { font-size: calc(11 * var(--px)); }
.wttx b { font-size: calc(10.5 * var(--px)); }
.wplace { font-weight: 600; }
/* ขั้นต่ำ 7 px ของเกม (ราว 21 px ที่จอ 1080p) */
.wup, .wsub2, .cnow, .wbadge, .crowb .sub, .crowb .why { font-size: calc(7 * var(--px)); }

/* หน้าคนจาก GPT (320 px) ย่อลงให้เนียน · ภาพที่ตัดหัวจากตัวพิกเซลยังคมแบบพิกเซล */
.talk .face, .cface, .wportrait { image-rendering: auto; }
.cface.crop92, .cface.crop32, .wportrait.wspr { image-rendering: pixelated; }
.talk .face { object-fit: cover; background: #2a2217; }
.wbook.ic { background: center / contain no-repeat; box-shadow: none; border: 0; image-rendering: pixelated; }
.wthumb.card { image-rendering: auto; }

/* ---------- ท่าตีหมู่ · ชื่อท่า คลื่นกระบี่ แสงรวมลมปราณ จอสั่น ---------- */
.cmovename { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.9); z-index: 20; pointer-events: none;
  padding: calc(3 * var(--px)) calc(22 * var(--px)); opacity: 0; animation: cmn-in .22s ease-out forwards;
  background: linear-gradient(90deg, transparent, rgba(10,8,6,.85) 18%, rgba(10,8,6,.85) 82%, transparent); }
.cmovename span { font-family: var(--f-title); font-size: calc(20 * var(--px)); font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(#fff6d8 20%, #e8c170 65%, #a9782f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(1 * var(--px)) 0 #000); }
.cmovename.foe span { background: linear-gradient(#ffe2d8 20%, #e87a60 65%, #8f3322); -webkit-background-clip: text; background-clip: text; }
.cmovename.gone { transition: opacity .35s, transform .35s; opacity: 0 !important; transform: translate(-50%, -60%) scale(1.04); }
@keyframes cmn-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.cactor.charge .cbody::before { content: ''; position: absolute; left: calc(-26 * var(--px)); top: calc(-70 * var(--px)); width: calc(52 * var(--px)); height: calc(74 * var(--px));
  border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(160,230,190,.55), rgba(120,200,160,.18) 55%, transparent 72%);
  animation: charge .32s ease-in-out infinite alternate; pointer-events: none; }
.cactor.foe.charge .cbody::before { background: radial-gradient(ellipse at 50% 60%, rgba(240,150,120,.55), rgba(220,110,90,.18) 55%, transparent 72%); }
@keyframes charge { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.1); opacity: 1; } }
.csweep { position: absolute; z-index: 4; pointer-events: none; }
.csweep .arc { position: absolute; left: -14%; right: -14%; top: -4%; height: 130%; border-radius: 50%;
  border-top: calc(7 * var(--px)) solid rgba(255,250,225,.95); border-left: calc(2 * var(--px)) solid transparent; border-right: calc(2 * var(--px)) solid transparent;
  filter: drop-shadow(0 0 calc(4 * var(--px)) rgba(170,240,200,.9)) drop-shadow(0 0 calc(10 * var(--px)) rgba(120,210,170,.6));
  transform-origin: 50% 100%; animation: sweep .42s cubic-bezier(.2,.7,.3,1) forwards; }
.csweep .arc.two { top: 22%; height: 95%; border-top-width: calc(4 * var(--px)); opacity: .8; animation-delay: .06s; }
.csweep .wind { position: absolute; inset: 20% -10%; background: repeating-linear-gradient(100deg, transparent 0 calc(10 * var(--px)), rgba(230,255,240,.35) calc(10 * var(--px)) calc(12 * var(--px)));
  mask-image: radial-gradient(ellipse, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse, #000 30%, transparent 70%);
  animation: wind .5s ease-out forwards; }
.csweep.foe .arc { border-top-color: rgba(255,225,210,.95); filter: drop-shadow(0 0 calc(4 * var(--px)) rgba(240,140,110,.9)) drop-shadow(0 0 calc(10 * var(--px)) rgba(220,100,80,.6)); }
.csweep.foe .arc, .csweep.foe .wind { scale: -1 1; }
@keyframes sweep { 0% { transform: rotate(-38deg) scaleX(.4); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(14deg) scaleX(1.05); opacity: 0; } }
@keyframes wind { 0% { transform: translateX(-30%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(25%); opacity: 0; } }
.cstage.shake { animation: shake .34s linear; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(calc(-2 * var(--px)), calc(1 * var(--px))); } 40% { transform: translate(calc(2 * var(--px)), calc(-1 * var(--px))); } 60% { transform: translate(calc(-1 * var(--px)), 0); } 80% { transform: translate(calc(1 * var(--px)), calc(1 * var(--px))); } }
@media (prefers-reduced-motion: reduce) { .cstage.shake { animation: none; } }

/* แผงยืนยันการเดินทาง · ย้ายไปซ้ายเมื่อปลายทางอยู่ฝั่งขวา */
.wconfirm.left { right: auto; left: calc(8 * var(--px)); }

/* บทระหว่างศึก (บอสเปลี่ยนเฟส · กำลังเสริม) */
.ccue { position: absolute; left: 50%; top: calc(96 * var(--px)); transform: translateX(-50%); z-index: 6; pointer-events: none;
  max-width: calc(440 * var(--px)); padding: calc(5 * var(--px)) calc(14 * var(--px)); text-align: center;
  background: linear-gradient(90deg, transparent, rgba(20,14,10,.88) 12%, rgba(20,14,10,.88) 88%, transparent);
  color: #f4e6c6; font-size: calc(11 * var(--px)); line-height: 1.5; animation: cuein .35s ease-out; transition: opacity .35s; }
.ccue.phase2 { color: #ffd7b8; text-shadow: 0 0 calc(4 * var(--px)) rgba(255,120,60,.7); }
.ccue.gone { opacity: 0; }
@keyframes cuein { from { opacity: 0; transform: translate(-50%, calc(6 * var(--px))); } to { opacity: 1; transform: translate(-50%, 0); } }
.cfloat.bleed { color: #ff8a7a; }
.cfloat.poison { color: #96d27b; }

/* สมุด · ผู้คน ฝ่ายต่าง ๆ */
.wthumb.face { background-size: cover; background-position: center 20%; border-radius: 2px; }
.wthumb.big.face { height: calc(110 * var(--px)); background-size: calc(110 * var(--px)) auto; background-repeat: no-repeat; background-position: center 15%; }
.wfame { margin: 0 0 calc(4 * var(--px)); padding: calc(5 * var(--px)) calc(7 * var(--px)); }
.wfame .wname { display: block; margin: calc(1 * var(--px)) 0; }
.wtabicon { display: inline-block; width: calc(13 * var(--px)); height: calc(13 * var(--px)); margin-right: calc(3 * var(--px)); vertical-align: middle; background: center / contain no-repeat; image-rendering: pixelated; }
.wfamelabel { display: flex; align-items: center; }

/* ภาพ CG เต็มจอ · ห้องภาพในเมนู */
.cgview { position: absolute; inset: 0; z-index: 40; background: #0b0907; display: flex; align-items: center; justify-content: center; cursor: pointer; animation: cgin .4s ease-out; transition: opacity .25s; }
.cgview img { width: 100%; height: 100%; object-fit: contain; }
.cgview .cghint { position: absolute; bottom: calc(8 * var(--px)); right: calc(10 * var(--px)); font-size: calc(8.5 * var(--px)); color: rgba(244,230,198,.75); text-shadow: 0 1px 2px #000; }
.cgview.gone { opacity: 0; }
@keyframes cgin { from { opacity: 0; } to { opacity: 1; } }
.wgallery { grid-column: 1 / -1; }
.wgal { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(4 * var(--px)); }
.wgalitem { aspect-ratio: 16 / 9; background: #1a1510 center / cover no-repeat; border: 1px solid var(--paper-edge, #6b5a3a); cursor: pointer; padding: 0; color: rgba(239,228,204,.5); display: flex; align-items: center; justify-content: center; font-size: calc(10 * var(--px)); }
.wgalitem.locked { cursor: default; }

/* Arc 1 · focus, touch and readable overlays */
#ui :is(button, [role="button"], summary, [tabindex="0"]):focus-visible {
  outline: 2px solid #f7d991; outline-offset: 3px;
}
#ui button, #ui summary, .wscroll, .panel { touch-action: manipulation; }
.wscroll, .panel, .choices, .cmenu { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wsmall, .wline.dim, .wtip { color: #baaf9b; }
.talk { max-height: 78%; overflow-y: auto; }
.talk .more { position: static; display: block; margin-left: auto; color: #4b301c; background: transparent; border: 0; animation: none; padding: 4px 12px; min-height: 36px; }
.talk .more[hidden] { display: none; }
.choices li { display: block; padding: 0; }
.choice-button { display: flex; gap: .5em; flex-wrap: wrap; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: inherit; padding: .45em .65em; line-height: 1.65; }
.choice-button[aria-disabled="true"] { color: #766858; }
.choice-button .why { flex-basis: 100%; }
.prompt { border: 1px solid #b59b63; color: #f5ead2; }
.cghint { color: #f5ead2; background: #172420; border: 1px solid #a59163; padding: 10px 24px; min-height: 44px; }
.wgalitem { min-height: 44px; }
.rotate { display: none !important; }

/* Full-viewport title · restrained jade, silk and antique gold */
.title.luxe { position: fixed; inset: 0; overflow-y: auto; padding: clamp(24px, 4vw, 68px); box-sizing: border-box; color: #f2e8ce; background: #0c1716; font-family: var(--f-ui); isolation: isolate; }
.luxe-art { position: fixed; inset: 0; z-index: -2; background: url('art/title/wuxia_dawn_v1.webp') center / cover no-repeat; }
.luxe-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,16,15,.53), transparent 76%), linear-gradient(0deg, rgba(5,14,13,.86), transparent 38%); }
.luxe-frame { position: fixed; inset: 18px; border: 1px solid rgba(215,184,114,.26); pointer-events: none; z-index: -1; }
.luxe-frame::before, .luxe-frame::after { content: ''; position: absolute; width: 44px; height: 44px; border-color: #b29a63; border-style: solid; }
.luxe-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.luxe-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.luxe-top { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: .12em; color: #cfc2a6; }
.luxe-mark { display: grid; place-items: center; width: 38px; height: 42px; background: #762d24; border: 1px solid #be7860; font-family: var(--f-title); font-size: 12px; letter-spacing: 0; writing-mode: vertical-rl; }
.luxe-content { margin: clamp(30px, 5vh, 72px) 0 72px clamp(10px, 3vw, 48px); max-width: 640px; }
.luxe-eyebrow { font-size: 12px; letter-spacing: .2em; color: #c6b585; margin: 0 0 16px; }
.title.luxe .luxe-name { display: flex; flex-direction: column; font-family: 'Taviraj', serif; font-weight: 600; font-size: clamp(52px, 6.7vw, 108px); line-height: 1.3; letter-spacing: .015em; margin: 0; color: #ecd7a1; text-shadow: 0 3px 24px #081210; }
.luxe-name span:last-child { padding-left: .85em; margin-top: -.06em; }
.luxe-rule { height: 1px; width: 190px; margin: 24px 0; background: linear-gradient(90deg, #d1b273, transparent); }
.luxe-story { white-space: pre-line; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.95; color: #ded8c8; margin: 0 0 28px; }
.luxe-menu { display: flex; flex-direction: column; gap: 10px; width: min(100%, 340px); }
#ui .title.luxe .luxe-button { appearance: none; border: 1px solid #89774e; border-image: none; border-radius: 2px; background: rgba(13,29,25,.83); color: #e5d2a4; font: 500 17px 'Taviraj', serif; padding: 14px 22px; min-height: 52px; box-shadow: none; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
#ui .title.luxe .luxe-button.primary { background: linear-gradient(100deg,#bba06c,#e5c994); color: #192a23; border-color: #e8d3a3; box-shadow: 0 8px 32px #06100e66, inset 0 0 0 3px #18251e26; }
#ui .title.luxe .luxe-button:hover { border-color: #f1d393; filter: brightness(1.12); }
#ui .title.luxe .luxe-button.danger { border-color: #de9680; color: #ffd6c7; }
#ui .title.luxe .luxe-button[hidden] { display: none; }
.luxe-resume { display: grid; gap: 12px; padding-bottom: 12px; }
.luxe-save { margin: 0; line-height: 1.7; font: 13px var(--f-ui); color: #c6c8b8; text-align: center; }
.luxe-help { font-size: 13px; color: #ccc7b8; margin-top: 6px; }
.luxe-help summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.luxe-help summary { position: relative; padding-left: 26px; line-height: 1.7; list-style: none; }
.luxe-help summary::-webkit-details-marker { display: none; }
.luxe-help summary::before, .luxe-help summary::after { content: ''; position: absolute; background: #d5b574; top: 50%; left: 3px; width: 12px; height: 2px; transform: translateY(-50%); }
.luxe-help summary::after { transform: translateY(-50%) rotate(90deg); }
.luxe-help[open] summary::after { display: none; }
.luxe-help p { white-space: pre-line; line-height: 1.8; padding: 12px; background: #0c191ae6; border-left: 1px solid #9e8959; }
.luxe-footer { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: #eee1be; font-size: 12px; padding: 12px 16px; background: linear-gradient(90deg,#071512f2,#0a1815e8); border: 1px solid #b6975d99; box-shadow: inset 0 0 0 2px #091310, 0 5px 18px #0008; text-shadow: 0 1px 2px #000; }
@media (min-width: 1000px) and (min-height: 820px) { .luxe-footer { position: absolute; bottom: 32px; left: 48px; right: 48px; } }
@media (min-width: 641px) and (max-height: 819px) {
  .title.luxe { padding: 26px 48px 18px; }
  .luxe-content { margin: 24px 0 20px 40px; }
  .title.luxe .luxe-name { font-size: clamp(52px, 5.4vw, 76px); line-height: 1.18; }
  .luxe-eyebrow { margin-bottom: 8px; }
  .luxe-rule { margin: 13px 0; }
  .luxe-story { margin-bottom: 14px; line-height: 1.7; }
  .luxe-menu { gap: 6px; }
  #ui .title.luxe .luxe-button { min-height: 46px; padding: 9px 18px; }
  .luxe-help { margin-top: 0; }
  .luxe-help summary { min-height: 40px; }
  .luxe-footer { padding-top: 8px; }
}
@media (max-width: 640px) {
  .title.luxe { padding: 28px 24px; }
  .luxe-art { background-position: 67% center; }
  .luxe-art::after { background: linear-gradient(90deg,#061513cc,#06151355),linear-gradient(0deg,#071512ed,transparent 90%); }
  .luxe-frame { inset: 10px; }
  .luxe-top { font-size: 10px; }
  .luxe-content { margin: 44px 10px 36px; }
  .title.luxe .luxe-name { font-size: clamp(52px, 15vw, 82px); }
  .luxe-menu { width: 100%; }
  .luxe-story { font-size: 14px; }
  .luxe-footer { line-height: 1.8; gap: 6px; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .title.luxe { padding: 22px 38px; }
  .luxe-content { margin: 22px 0 24px; max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .title.luxe .luxe-name { font-size: 54px; grid-column: 1; }
  .luxe-rule { display: none; }
  .luxe-story { font-size: 12px; grid-column: 1; }
  .luxe-menu { grid-column: 2; grid-row: 1 / 5; align-self: center; }
}
/* Narrow screens use scrollable full-window sheets instead of shrinking type. */
@media (max-width: 900px) {
  .panel.wx { --px: 1.4px; position: fixed; inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); padding: 20px; overflow-y: auto; }
  .panel.wx .wgrid { flex: none; min-height: auto; overflow: visible; }
  .panel.wx .wscroll { flex: none; max-height: 44vh; overflow-y: auto; }
  .panel.wx .wfoot { position: sticky; bottom: -20px; background: #111811; padding: 12px 0; margin-top: 12px; }
  .panel.wx button { min-height: 44px; }
  .panel.wx .wtitle h2 { font-size: 25px; }
  .panel.wx .wsmall { font-size: 12px; line-height: 1.6; }
  .panel.wx .wtab { white-space: normal; }
  #ui .panel.wx.bresult { inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); padding: 18px; overflow-y: auto; }
  .bresult .brintro { grid-template-columns: 64px 1fr; }
  .bresult .brseal { width: 58px; height: 58px; font-size: 34px; }
  .bresult .brlead { font-size: 21px; }
  .bresult .brwhere, .bresult .brname, .bresult .brvalue { font-size: 14px; }
  .bresult .brrow { min-height: 44px; grid-template-columns: 28px minmax(0,1fr) auto; padding: 7px 10px; }
  .bresult .bricon { width: 24px; height: 24px; }
  .bresult .brnote, .bresult .brempty { font-size: 13px; }
  .talk { --px: 1.2px; position: fixed; left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); top: auto; max-height: 60dvh; padding: 16px; font-size: 16px; }
  .talk.top { top: max(10px,env(safe-area-inset-top)); bottom: auto; }
  .talk .line, .choice-button { font-size: 16px; }
  .choice-button, .talk .more { min-height: 44px; }
  .toolbar { position: fixed; bottom: max(8px,env(safe-area-inset-bottom)); right: 8px; left: 8px; top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  #ui .tool { min-height: 44px; min-width: 44px; font-size: 13px; padding: 6px 10px; }
  .cgview { position: fixed; }
  .cghint { font-size: 15px; }
}
@media (max-width: 600px) {
  .panel.wx :is(.wgrid.wchar,.wgrid.wbagg,.wgrid.wjour,.wgrid.wparty,.wgrid.wshopg,.wgrid.wmenu) { display: flex; flex-direction: column; gap: 12px; }
  .panel.wx .wportrait { max-height: 180px; aspect-ratio: auto; background-size: contain; background-repeat: no-repeat; }
  .panel.wx .wside { flex: none; }
  .panel.wx .wxb { min-height: 100px; flex: none; }
  .wfoot { flex-wrap: wrap; }
  .wfoot .wtip { display: none; }
  .panel.wx .wfoot button { flex: 1; }

  /* ศึกในมือถือแนวตั้งใช้พื้นที่เต็มจอและจัดแผงใหม่ · ฉาก 640px ถูกครอปกึ่งกลางให้ตัวละครทั้งสองฝ่ายยังเห็นชัด */
  .combat { position: fixed; inset: 0; width: 100vw; height: 100dvh; --px: 1px; }
  .combat .cstage { left: 50%; right: auto; width: 640px; height: calc(100dvh - 258px); min-height: 360px; transform: translateX(-50%); background: #0b1516; }
  .combat .cstage::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 320px; bottom: 0; pointer-events: none; background: linear-gradient(transparent, #0b1516 105px), repeating-linear-gradient(115deg, #ffffff05 0 2px, transparent 2px 10px); }
  .combat .cstage img.cbg, .combat .cstage img.cfg { height: 360px; }
  .combat .cturns { max-width: calc(100vw - 42px); overflow: hidden; }
  .combat .cturns .clabel { display: none; }
  .combat .cteam { top: 42px; width: min(158px, calc(50vw - 10px)); }
  .combat .cteam.ally { left: 6px; }
  .combat .cteam.foe { right: 6px; }
  .combat .ccard { min-height: 44px; }
  .combat .ccard.compact .cface { width: 30px; height: 30px; }
  .combat .clogbox { position: fixed; left: 6px; right: 6px; bottom: calc(166px + env(safe-area-inset-bottom)); width: auto; height: 92px; }
  .combat .clog { font-size: 11px; }
  .combat .ccmd { position: fixed; left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); width: auto; min-height: 150px; max-height: 42dvh; overflow-y: auto; overflow-x: hidden; }
  .combat .cmenu.main { gap: 5px; }
  .combat .cmenu.main .cbtn { min-height: 54px; font-size: 14px; }
  .combat .crowb { min-height: 44px; }
  .combat .ctarget { font-size: 10px; max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.title.luxe { display: block; }
#ui .title.luxe > .luxe-art { position: fixed; inset: 0; z-index: -2; }
#ui .title.luxe > .luxe-frame { position: fixed; z-index: -1; }
@media (min-width: 1000px) and (min-height: 820px) {
  #ui .title.luxe > .luxe-footer { position: absolute; }
}
/* The toolbar is named .tools in the game, shared by mouse and touch. */
@media (max-width: 900px) {
  .tools { position: fixed; bottom: max(8px,env(safe-area-inset-bottom)); right: 8px; left: 8px; top: auto; flex-wrap: wrap; justify-content: center; gap: 5px; }
}

/* World travel stays readable and touchable independently of the pixel canvas. */
@media (max-width: 900px) {
  .tools { max-width: none; }
  .worldui { position: fixed; inset: 0; padding: 0; pointer-events: none; background: linear-gradient(180deg,rgba(23,31,27,.18),transparent 28%,transparent 68%,rgba(23,31,27,.13)); --px: min(1.4px, calc((100vw - 24px) / 840), calc((100dvh - 185px) / 590)); }
  #ui .worldui .wplace { min-height: 38px; padding: 5px 8px; font-size: 12px; border-radius: 10px; box-shadow: 0 3px 12px #1d241c55; }
  .worldui .wdays { font-size: 10px; border-radius: 8px; padding: 2px 5px; }
  .worldui .wbox, .worldui .wconfirm, .worldui .wconfirm.left { position: fixed; width: auto; max-width: none; max-height: min(38dvh,260px); overflow-y: auto; padding: 12px 14px; font-size: 14px; pointer-events: auto; border-radius: 14px; box-shadow: 0 8px 28px #17130f55; }
  .worldui .wbox { left: 8px; right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); background: rgba(28,36,30,.94); }
  .worldui .wconfirm, .worldui .wconfirm.left { left: 8px; right: 8px; top: 52px; bottom: auto; width: auto; max-height: 34dvh; background: rgba(28,36,30,.96); }
  .worldui .wbox .small, .worldui .wconfirm .small { font-size: 12px; }
  .worldui .wconfirm h2 { font-size: 18px; }
  #ui .worldui button { min-height: 44px; font-size: 14px; }
  .worldui .wrow { gap: 8px; }
  .worldui .wrow button { flex: 1 1 140px; }
}
@media (max-width: 560px) {
  #ui .worldui .wplace { min-height: 34px; padding: 3px 6px; font-size: 11px; }
  .worldui .wdays { display: none; }
  .worldui .wbox { max-height: 30dvh; }
  .worldui .wconfirm, .worldui .wconfirm.left { top: 44px; max-height: 30dvh; }
}
@media (max-width: 560px) and (orientation: landscape) {
  .worldui { --px: min(1.4px, calc((100vw - 24px) / 840), calc((100dvh - 110px) / 590)); }
  .worldui .wbox { max-height: 38dvh; }
  .worldui .wconfirm, .worldui .wconfirm.left { top: 38px; max-height: 36dvh; }
  .wslot > .wmini { flex-shrink: 0; }
}
/* Speaker names remain in normal flow so scrolling never clips their Thai marks. */
.talk, .talk.withface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 16px; padding: clamp(16px, calc(12 * var(--px)), 32px); }
.talk.withface { grid-template-columns: clamp(56px, calc(44 * var(--px)), 100px) minmax(0, 1fr); }
.talk .face { position: static; grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 1; align-self: start; }
.talk .who, .talk.withface .who { position: static; grid-column: 1; justify-self: start; max-width: 100%; padding: 3px 10px; font-size: clamp(16px, calc(12.5 * var(--px)), 28px); line-height: 1.7; overflow-wrap: anywhere; }
.talk .who[hidden], .talk .face[hidden] { display: none; }
.talk.withface .who, .talk.withface .line { grid-column: 2; }
.talk .line { font-size: clamp(16px, calc(12 * var(--px)), 26px); line-height: 1.65; min-width: 0; }
.talk .choices, .talk .more { grid-column: 1 / -1; }
.talk .choices:empty { display: none; }
#ui .talk .more { min-height: 44px; font-size: clamp(16px, calc(10 * var(--px)), 22px); }
.luxe-save { line-height: 1.7; }

/* Dialogue uses the same carved frame and button language as the in-game menus. */
#ui .talk,
#ui .talk.withface {
  left: 50%; right: auto; width: min(860px, calc(100vw - 36px));
  transform: translateX(-50%); bottom: clamp(12px, 3vh, 28px);
  max-height: min(58vh, 480px); min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 12px 18px; padding: 23px 28px 17px;
  background: radial-gradient(ellipse at 17% 0%, #354036 0%, transparent 55%),
              linear-gradient(145deg, #22271f, #101914 78%);
  color: #f0e2c3; border: 8px solid transparent; border-radius: 0;
  border-image: url('art/ui/frame_s.webp') 8 / 8px stretch;
  box-shadow: 0 18px 48px #080d0bd9, inset 0 0 0 1px #b7965b52;
  font-family: var(--f-story); cursor: default;
}
#ui .talk.withface { grid-template-columns: 82px minmax(0, 1fr); }
#ui .talk.top { top: clamp(12px, 3vh, 28px); bottom: auto; }
#ui .talk .face {
  grid-column: 1; grid-row: 1 / span 2; width: 82px; height: 82px;
  object-fit: cover; border: 3px solid #b99a60; border-radius: 0;
  box-shadow: 0 0 0 1px #25190d, 0 7px 18px #0008;
}
#ui .talk .who,
#ui .talk.withface .who {
  grid-column: 1; position: static; max-width: 100%; justify-self: start;
  padding: 0 0 5px; color: #e9c57e; background: none;
  border: 0; border-bottom: 1px solid #bb985a8c; border-radius: 0;
  font: 600 20px/1.35 var(--f-title); letter-spacing: .015em;
}
#ui .talk.withface .who,
#ui .talk.withface .line { grid-column: 2; }
#ui .talk .line {
  color: #f0e2c3; font: 400 clamp(17px, 1.05vw, 21px)/1.75 var(--f-story);
  text-shadow: 0 1px 1px #0009; max-width: 52em;
}
#ui .talk.narr .line { color: #e9dbc0; font-style: normal; }
#ui .talk .choices,
#ui .talk .more { grid-column: 1 / -1; }
#ui .talk .choices { display: grid; gap: 7px; margin: 5px 0 0; }
#ui .talk .choices:empty { display: none; }
#ui .talk .choices li { padding: 0; background: none; }
#ui .talk .choice-button,
#ui .talk .more {
  appearance: none; position: relative; min-height: 44px;
  color: #f3e7cc; background: linear-gradient(#302e21, #17221b) padding-box;
  border: 4px solid transparent; border-radius: 0;
  border-image: url('art/ui/btn.webp') 4 / 4px stretch;
  font: 600 clamp(15px, .9vw, 18px)/1.55 var(--f-ui);
  text-shadow: 0 1px 1px #000b; cursor: pointer;
  transition: background .15s, filter .15s;
}
#ui .talk .choice-button { width: 100%; display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 6px 15px; }
#ui .talk .choice-button .n { flex: none; min-width: 1.5em; color: #e7c171; font-family: var(--f-title); }
#ui .talk .choice-button .t { flex: 1; }
#ui .talk .choice-button .t::before { content: none; }
#ui .talk .choice-button .why { color: #e0a99b; }
#ui .talk .more {
  display: block; width: max-content; min-width: 120px; margin-left: auto;
  padding: 4px 20px; background: linear-gradient(#405336, #21331f) padding-box;
  text-align: center; animation: none;
}
#ui .talk .more[hidden] { display: none; }
#ui .talk .choice-button:hover,
#ui .talk .choice-button:focus-visible,
#ui .talk .choices li.cur .choice-button,
#ui .talk .more:hover,
#ui .talk .more:focus-visible {
  border-image-source: url('art/ui/btn_hi.webp');
  background: linear-gradient(#4b583c, #253523) padding-box;
  filter: drop-shadow(0 0 6px #d6b47488);
}
#ui .talk :is(.choice-button, .more):focus-visible { outline: 2px solid #f7d991; outline-offset: 3px; }
#ui .talk .choice-button[aria-disabled="true"] { color: #ada593; background: linear-gradient(#292820, #1b201a) padding-box; cursor: not-allowed; filter: none; }
#ui .talk .choice-button[aria-disabled="true"] .n { color: #a99a76; }
@media (max-width: 700px) {
  #ui .talk, #ui .talk.withface { width: calc(100vw - 20px); padding: 16px; gap: 8px 11px; }
  #ui .talk.withface { grid-template-columns: 58px minmax(0, 1fr); }
  #ui .talk .face { width: 58px; height: 58px; }
  #ui .talk .who { font-size: 17px; }
  #ui .talk .line { font-size: 16px; }
}

@media (max-width: 900px) {
  .bar { position: fixed; top: 0; left: 0; right: 0; max-width: none; min-height: 38px; padding: 8px 12px; font-size: 12px; line-height: 1.5; white-space: normal; background: #151b17; z-index: 2; }
  .worldui { top: 54px; }
  .prompt { position: fixed; bottom: 68px; left: 12px; right: 12px; transform: none; font-size: 14px; min-height: 44px; white-space: normal; }
}
/* Equipment actions are siblings of the details control, never nested buttons. */
.wbagg .wgear .wslot { grid-template-columns: calc(12 * var(--px)) calc(48 * var(--px)) minmax(0, 1fr) auto; }
.wscell, .wst { min-width: 0; }
@media (max-width: 900px) {
  .panel.wx { font-size: 16px; }
  .panel.wx :is(.wst b,.wname,.wline,.wkv,.wtag,.wbadge,.wdesc,.wgreet,.wtab,.wsl) { font-size: 14px; line-height: 1.6; }
  .panel.wx .wsmall { font-size: 13px; }
  #ui .panel.wx button { font-size: 14px; }
  .panel.wx [role=button] { min-height: 44px; }
  .wbagg .wgear .wslot { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px 8px; padding: 8px 0; }
  .wslot > .wsloti { grid-column: 1; grid-row: 1 / span 2; }
  .wslot > .wsl { grid-column: 2; grid-row: 1; }
  .wslot > .wscell { grid-column: 2; grid-row: 2; padding: 6px; }
  .wslot > .wmini { grid-column: 3; grid-row: 1 / span 2; min-width: 44px; }
  .witem.wshop { flex-wrap: wrap; }
  .wshop .wst { flex: 1 1 140px; }
  .wshopdesc { white-space: normal; }
}
@media (max-width: 900px) {
  .panel.wx .wscroll { max-height: none; overflow: visible; }
  .panel.wx .wportrait { height: 180px; min-height: 120px; flex-shrink: 0; }
  .panel.wx .wtabrow { flex-wrap: wrap; gap: 6px; }
  .panel.wx .wtabrow .wtab { flex: 1 1 120px; padding: 8px; }
}
@media (max-width: 900px) {
  .panel.wx::before { position: fixed; inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .panel.wx::after { display: none; }
}
@media (max-width: 900px) {
  #ui .panel.wx { position: fixed; inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .panel.wx :is(.wgrid.wchar,.wgrid.wbagg,.wgrid.wjour,.wgrid.wparty,.wgrid.wshopg,.wgrid.wmenu) { display: flex; flex-direction: column; gap: 12px; }
  .panel.wx .wxb, .panel.wx .wside { flex: none; min-height: 0; }
  .wgal { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .panel.menu.wx .wgrid.wmenu .wgal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wjcard .wst b { white-space: normal; }
}
.wbagg .wgear { overflow-y: auto; overflow-x: hidden; }
.wbagg .wgear .wslot { flex-shrink: 0; }
.wbagg .wscell .wst { flex: 1; min-width: 0; }
.wbagg .wscell .wst b { white-space: normal; overflow-wrap: anywhere; }
.wbagg .wdetail { overflow-y: auto; }
.wfoot { flex-shrink: 0; }
@media (max-width: 900px) {
  .wbagg .wgear, .wbagg .wdetail { overflow: visible; }
}
/* Each equipment slot reserves a full item row; labels never squeeze Thai names. */
.wbagg .wgear .wslot { grid-template-columns: 20px minmax(0,1fr) auto; gap: 6px 8px; padding: 8px 0; }
.wbagg .wslot > .wsloti { grid-column: 1; grid-row: 1; }
.wbagg .wslot > .wsl { grid-column: 2 / 4; grid-row: 1; }
.wbagg .wslot > .wscell { grid-column: 1 / 3; grid-row: 2; }
.wbagg .wslot > .wmini { grid-column: 3; grid-row: 2; align-self: center; }

/* 3D battle presentation keeps the game canvas and turn-based HUD on one scene. */
.combat.battle3d { background: transparent; }
.combat.battle3d .cstage { background: transparent; }
.combat.battle3d .cstage > img, .combat.battle3d .cactors { display: none; }
.combat.battle3d .chud { z-index: 20; }
.combat.battle3d .cteam { top: calc(50 * var(--px)); }
.combat.battle3d .clogbox { width: min(34vw, calc(300 * var(--px))); max-height: 24vh; }
.combat.battle3d .ccmd { max-height: 34vh; }
@media (max-width: 600px) {
  .combat.battle3d .cteam { top: 42px; }
  .combat.battle3d .clogbox { bottom: calc(166px + env(safe-area-inset-bottom)); max-height: 14vh; }
  .combat.battle3d .ccmd { max-height: 35dvh; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .combat.battle3d .cteam { top: 34px; width: min(220px, 26vw); }
  .combat.battle3d .clogbox { left: 8px; bottom: 8px; width: min(31vw, 300px); height: 105px; }
  .combat.battle3d .ccmd { right: 8px; bottom: 8px; width: min(40vw, 380px); min-height: 110px; max-height: 40vh; }
  .combat.battle3d .cturns { top: 2px; }
}
.combat.battle3d .cstage::after { display:none; }

/* Unified courtyard sheets: quiet jade, warm paper, and restrained brass. */
#ui .panel.wx:not(.bresult) {
  --px: 1.2px; position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 48px)); height: min(700px, calc(100dvh - 48px)); max-height: calc(100dvh - 24px);
  padding: 22px 24px 18px; gap: 14px; color: #29382e; background: #f3eddf; border: 1px solid #d4cdbd;
  border-radius: 18px; box-shadow: 0 18px 60px #18211c55; overflow: auto;
}
#ui .panel.wx:not(.bresult)::before, #ui .panel.wx:not(.bresult)::after { display: none; }
#ui .panel.wx .wtitle { flex: none; padding-bottom: 10px; border-bottom: 1px solid #d8d1c3; }
#ui .panel.wx .wtitle h2 { color: #29382e; background: none; filter: none; font-size: 25px; letter-spacing: 0; }
#ui .panel.wx .wcloud { display: none; }
#ui .panel.wx .wgrid { gap: 12px; }
#ui .panel.wx .wxb { padding: 14px; gap: 10px; color: #29382e; background: #fffdf8; border: 1px solid #d8d1c3; border-radius: 12px; image-rendering: auto; }
#ui .panel.wx .wh, #ui .panel.wx .wxb > .wh, #ui .panel.wx .wsub { color: #405f4a !important; background: none; font-size: 16px !important; font-weight: 700; }
#ui .panel.wx .wh::before { content: none; }
#ui .panel.wx .whrow { border-color: #d8d1c3; padding-bottom: 5px; }
#ui .panel.wx .wname { color: #29382e; font-size: 18px; }
#ui .panel.wx .wtag { color: #45654e; background: #e4ebdf; border: 1px solid #c8d6c1; box-shadow: none; font-size: 12px; padding: 2px 8px; }
#ui .panel.wx .wdesc, #ui .panel.wx .wline { color: #46574b; font-size: 14px; line-height: 1.55; }
#ui .panel.wx .wsmall { color: #5c685e; font-size: 13px; line-height: 1.5; }
#ui .panel.wx .wsn b, #ui .panel.wx .wst b, #ui .panel.wx .wttx b { color: #29382e; font-size: 15px; }
#ui .panel.wx .wsv, #ui .panel.wx .wn, #ui .panel.wx .wcoin, #ui .panel.wx .wkv, #ui .panel.wx .wprow,
#ui .panel.wx .wprice, #ui .panel.wx .wmove { color: #34493b; font-size: 14px; }
#ui .panel.wx .wv { color: #3f5c47; }
#ui .panel.wx .wsl, #ui .panel.wx .wempty, #ui .panel.wx .wup, #ui .panel.wx .wsub2, #ui .panel.wx .wbadge { color: #5c685e; font-size: 12px; }
#ui .panel.wx button.wtab, #ui .panel.wx .wtab { font-size: 14px !important; line-height: 1.4 !important; white-space: normal; }
#ui .panel.wx .wkv span, #ui .panel.wx .wk, #ui .panel.wx .wprow .wk { color: #647362; }
#ui .panel.wx .wstat, #ui .panel.wx .wjrow { border-color: #e1e4db; }
#ui .panel.wx .wtech, #ui .panel.wx .wkv.box, #ui .panel.wx .wscell, #ui .panel.wx .witem, #ui .panel.wx .wjcard {
  color: #34493b; background: #f5f5ee; border: 1px solid #e0e3d9; box-shadow: none; border-radius: 8px;
}
#ui .panel.wx .witem.sel, #ui .panel.wx .wscell.sel, #ui .panel.wx .wjcard.sel { background: #e8efe3; border-color: #9db195; }
#ui .panel.wx button { color: #304536; background: #edf1e8; border: 1px solid #c9d3c5; border-image: none; border-radius: 9px; min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 1.4; }
#ui .panel.wx button:hover:not(:disabled) { color: #22372a; background: #e0eadb; border-color: #8ba386; filter: none; }
#ui .panel.wx button.primary, #ui .panel.wx button.on { color: #fffdf7; background: #496950; border-color: #496950; }
#ui .panel.wx button.danger { color: #8b4539; background: #f6e9e4; border-color: #dfb8aa; }
#ui .panel.wx button.wplus { font-size: 12px !important; }
#ui .panel.wx .wfoot { gap: 12px; align-items: center; flex: none; }
#ui .panel.wx .wtip { color: #4d6151; background: #e8eee3; border: 1px solid #d2ddca; box-shadow: none; font-size: 13px; line-height: 1.45; padding: 8px 10px; }
#ui .panel.wx .wbang { color: #536c52; border-color: #9eb294; font-size: 12px; }
#ui .panel.wx .wclose { min-width: 100px; }
#ui .panel.wx .wdiv { width: 100%; height: 1px; margin: 6px 0; background: #d8d1c3; }

/* Cohesive low-detail busts replace painted portraits in playable sheets. */
#ui .panel.wx .wportrait.model-bust { position: relative; overflow: hidden; aspect-ratio: 1; height: auto; min-height: 0; max-height: none; border: 1px solid #d3dacd; border-radius: 14px; box-shadow: none; background-color: #e5eadf; background-image: radial-gradient(ellipse at 50% 112%, #536f58 0 43%, transparent 44%); }
#ui .panel.wx .wportrait.model-bust::before { content: ''; position: absolute; z-index: 1; left: 34%; top: 15%; width: 32%; height: 43%; border-radius: 46% 46% 42% 42%; background: radial-gradient(circle at 37% 58%, #4b392e 0 1.3px, transparent 1.7px), radial-gradient(circle at 63% 58%, #4b392e 0 1.3px, transparent 1.7px), linear-gradient(#302d27 0 25%, #d6b08e 26% 100%); box-shadow: inset 0 0 0 1px #7d6855; }
#ui .panel.wx .wportrait.model-bust::after { content: ''; position: absolute; left: 13%; bottom: -8%; width: 74%; height: 48%; clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); background: linear-gradient(110deg, transparent 47%, #e2d3af 48% 52%, transparent 53%), #5c7861; }

/* Party and pause sheets use the room their real controls need. */
#ui .panel.wx.party { width: min(780px, calc(100vw - 48px)); height: auto; }
#ui .panel.wx .wgrid.wparty { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
#ui .panel.wx .wpcard { flex-direction: row; align-items: flex-start; padding: 12px; gap: 12px; }
#ui .panel.wx .wpcard .wportrait { width: 100px; flex: 0 0 100px; }
#ui .panel.wx .wprows { gap: 5px; }
#ui .panel.wx .wprow { grid-template-columns: 52px minmax(48px,1fr) 32px; }
#ui .panel.wx .wpempty { grid-column: 1 / -1; }
#ui .panel.wx.menu { width: min(760px, calc(100vw - 48px)); height: auto; }
#ui .panel.wx .wgrid.wmenu { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; align-content: start; }
#ui .panel.wx .wmenu > .wxb:nth-child(2) { grid-row: auto; grid-column: auto; }
#ui .panel.wx.menu .wgrid.wmenu > .wgallery { grid-column: 1 / -1; grid-row: auto; }
#ui .panel.wx .wmenu .wmrow { flex-wrap: wrap; }
#ui .panel.wx .wmenu .wmrow button { flex: 1 1 170px; }
@media (min-width: 901px) {
  #ui .panel.wx .wpempty { grid-column: 2; grid-row: 1; }
  #ui .panel.wx .wgrid.wmenu { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: auto auto auto; }
  #ui .panel.wx .wmenu > .wxb:nth-child(2) { grid-column: 2; grid-row: 1 / 4; }
  #ui .panel.wx .wmenu > .wxb:nth-child(1) { grid-column: 1; grid-row: 1; }
  #ui .panel.wx .wmenu > .wxb:nth-child(3) { grid-column: 1; grid-row: 2; }
}
@media (max-width: 900px) {
  #ui .panel.wx:not(.bresult) { --px: 1.4px; height: auto; max-height: calc(100dvh - 16px); padding: 18px; gap: 12px; }
  #ui .panel.wx .wtitle h2 { font-size: 24px; }
  #ui .panel.wx.party, #ui .panel.wx.menu { width: calc(100vw - 20px); }
  #ui .panel.wx .wgrid.wparty, #ui .panel.wx .wgrid.wmenu { grid-template-columns: minmax(0, 1fr); }
  #ui .panel.wx .wpcard .wportrait { width: 88px; flex-basis: 88px; }
  #ui .panel.wx .wpempty, #ui .panel.wx.menu .wgrid.wmenu > .wgallery { grid-column: 1; }
  #ui .panel.wx .wmenu > .wxb:nth-child(2) { grid-row: auto; grid-column: 1; }
}
@media (max-width: 600px) {
  #ui .panel.wx:not(.bresult) { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  #ui .panel.wx:not(.party) .wportrait.model-bust { width: min(100%, 152px); height: 152px; min-height: 152px; align-self: center; aspect-ratio: auto; }
}

/* Turn-based HUD uses the same calm paper cards as the playable sheets. */
#ui .combat.battle3d { --px: 1px; --panel: rgba(243,237,223,.96); color: #29382e; }
#ui .combat.battle3d .cbox { padding: 12px; color: #29382e; background: #f3eddf; border: 1px solid #d4cdbd; border-radius: 14px; box-shadow: 0 8px 26px #18211c38; }
#ui .combat.battle3d .cbox::before { display: none; }
#ui .combat.battle3d .ctab { position: static; height: auto; width: max-content; padding: 3px 9px; color: #fffdf7; background: #496950; border: 0; border-radius: 7px; clip-path: none; box-shadow: none; font-size: 13px; }
#ui .combat.battle3d .ctab i { display: none; }
#ui .combat.battle3d .cbanner { width: min(420px, 72vw); height: 64px; background: #496950; border: 1px solid #91a587; border-radius: 16px; image-rendering: auto; box-shadow: 0 10px 30px #18211c44; }
#ui .combat.battle3d .cbanner span { color: #fffdf7; font-size: 24px; text-shadow: none; }
#ui .combat.battle3d .cplate { top: 56px; width: max-content; min-width: 210px; height: auto; padding: 8px 14px; background: #fffdf8; border: 1px solid #d4cdbd; border-radius: 12px; box-shadow: 0 8px 22px #18211c30; image-rendering: auto; }
#ui .combat.battle3d .cplate b { color: #304536; background: none; filter: none; font-size: 16px; }
#ui .combat.battle3d .cplate span { color: #5c685e; font-size: 12px; }
#ui .combat.battle3d .cturns { top: 12px; padding: 7px 10px; background: #fffdf8; border: 1px solid #d4cdbd; border-radius: 14px; }
#ui .combat.battle3d .cturns::before, #ui .combat.battle3d .cturns::after { display: none; }
#ui .combat.battle3d .cturns .clabel { color: #405f4a; background: none; filter: none; font-size: 13px; }
#ui .combat.battle3d .cchip { border-color: #b9c9b5; border-radius: 6px; overflow: hidden; }
#ui .combat.battle3d .cchip.now { border-color: #c69c4d; box-shadow: 0 0 0 2px #e5ca8d; }
#ui .combat.battle3d .cteam { top: 64px; width: min(310px, 24vw); gap: 6px; }
#ui .combat.battle3d .cteam.ally { left: 16px; }
#ui .combat.battle3d .cteam.foe { right: 16px; }
#ui .combat.battle3d .ccard, #ui .combat.battle3d .cteam.dense .ccard {
  min-height: 56px; padding: 8px; gap: 9px; background: #fffdf8; border: 1px solid #d8d1c3; border-radius: 10px; filter: none;
}
#ui .combat.battle3d .ccard.foe { background: #fff9f5; }
#ui .combat.battle3d .ccard.target { border-color: #bd9955; box-shadow: 0 0 0 2px #ead8ad; }
#ui .combat.battle3d .ccard.acting { border-color: #85a27e; box-shadow: 0 0 0 2px #d2e0ca; }
#ui .combat.battle3d .ccard .cface { width: 42px; height: 42px; border: 1px solid #d5ddcf; border-radius: 8px; box-shadow: none; }
#ui .combat.battle3d .ccard.compact { min-height: 46px; }
#ui .combat.battle3d .ccard.compact .cface { width: 32px; height: 32px; }
#ui .combat.battle3d .cinfo b, #ui .combat.battle3d .ccard.compact .cinfo b { color: #29382e; font-size: 14px; filter: none; }
#ui .combat.battle3d .crow, #ui .combat.battle3d .ccard.compact .crow { grid-template-columns: 48px 1fr 42px; gap: 6px; font-size: 12px; line-height: 1.3; }
#ui .combat.battle3d .ccard.compact .crow { grid-template-columns: 1fr 40px; }
#ui .combat.battle3d .cname { color: #63715f; }
#ui .combat.battle3d .cnum { color: #34493b; }
#ui .combat.battle3d .cbar { height: 7px; background: #e4e8df; border: 0; box-shadow: none; border-radius: 8px; }
#ui .combat.battle3d .cbar.hp i { background: #b96859; border-radius: inherit; }
#ui .combat.battle3d .cbar.qi i { background: #5c9185; border-radius: inherit; }
#ui .combat.battle3d .cbar.gd i { background: #c59a53; border-radius: inherit; }
#ui .combat.battle3d .ctags { color: #7c6641; font-size: 11px; }
#ui .combat.battle3d .clogbox { left: 16px; bottom: 16px; width: min(400px, 31vw); height: 112px; }
#ui .combat.battle3d .clog { color: #405044; font-size: 13px; }
#ui .combat.battle3d .clog p:last-child { color: #263b30; }
#ui .combat.battle3d .clog .who.ally { color: #426f5b; }
#ui .combat.battle3d .clog .who.foe { color: #a54e41; }
#ui .combat.battle3d .clogbox::after { display: none; }
#ui .combat.battle3d .ccmd { right: 16px; bottom: 16px; width: min(350px, 31vw); min-height: 132px; }
#ui .combat.battle3d .cmenu.main { gap: 7px; }
#ui .combat.battle3d .cmenu.main .cbtn { min-height: 48px; padding: 6px; flex-direction: row; gap: 6px; color: #304536; background: #edf1e8; border: 1px solid #c9d3c5; border-radius: 9px; filter: none; font-size: 14px; }
#ui .combat.battle3d .cmenu.main .cbtn:hover:not(:disabled), #ui .combat.battle3d .cmenu.main .cbtn:focus-visible { background: #e0eadb; border-color: #8ba386; outline: 2px solid #7e9b77; }
#ui .combat.battle3d .cbtn .k { color: #74856f; font-size: 10px; }
#ui .combat.battle3d .ctarget { position: static; display: block; max-width: none; margin: 6px 0 0; padding: 4px 7px; color: #506252; background: #e8eee3; border: 1px solid #d2ddca; border-radius: 6px; font-size: 12px; white-space: normal; }
#ui .combat.battle3d .clogbox .ctab, #ui .combat.battle3d .ccmd .ctab { margin-bottom: 4px; }
#ui .combat.battle3d .log-toggle { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 8px; color: #405f4a; background: #e8eee3; border: 1px solid #d2ddca; border-radius: 7px; font-size: 11px; cursor: pointer; }
#ui .combat.battle3d .cresult, #ui .combat.battle3d .cwait { color: #3f684a; font-size: 17px; }
#ui .combat.battle3d .cface.model-bust { position: relative; overflow: hidden; background-color: #e5eadf; background-image: radial-gradient(ellipse at 50% 112%, var(--bust-robe, #5c7861) 0 43%, transparent 44%); image-rendering: auto; }
#ui .combat.battle3d .cface.model-bust::before { content: ''; position: absolute; left: 34%; top: 14%; width: 32%; height: 43%; border-radius: 46% 46% 42% 42%; background: radial-gradient(circle at 37% 58%, #4b392e 0 1px, transparent 1.3px), radial-gradient(circle at 63% 58%, #4b392e 0 1px, transparent 1.3px), linear-gradient(#302d27 0 25%, #d6b08e 26% 100%); }
#ui .combat.battle3d .cface.model-bust::after { content: ''; position: absolute; left: 13%; bottom: -8%; width: 74%; height: 48%; clip-path: polygon(34% 0,66% 0,100% 100%,0 100%); background: linear-gradient(110deg,transparent 47%,#e2d3af 48% 52%,transparent 53%),var(--bust-robe,#5c7861); }
@media (max-width: 600px) {
  #ui .combat.battle3d .cplate { top: 46px; }
  #ui .combat.battle3d .cbanner { height: 52px; }
  #ui .combat.battle3d .cbanner span { font-size: 19px; }
  #ui .combat.battle3d .cteam { top: 42px; width: min(158px, calc(50vw - 10px)); }
  #ui .combat.battle3d .cteam.ally { left: 6px; }
  #ui .combat.battle3d .cteam.foe { right: 6px; }
  #ui .combat.battle3d .clogbox { left: 6px; right: 6px; bottom: calc(166px + env(safe-area-inset-bottom)); width: auto; height: 92px; }
  #ui .combat.battle3d .ccmd { left: 6px; right: 6px; bottom: max(6px, env(safe-area-inset-bottom)); width: auto; min-height: 150px; }
  #ui .combat.battle3d .cmenu.main .cbtn { justify-content: center; min-height: 48px; font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #ui .combat.battle3d .cteam { top: 46px; width: min(230px, 27vw); }
  #ui .combat.battle3d .clogbox { left: 8px; bottom: 8px; width: min(270px, 30vw); height: 76px; }
  #ui .combat.battle3d .ccmd { right: 8px; bottom: 8px; width: min(310px, 38vw); min-height: 104px; }
  #ui .combat.battle3d .cmenu.main .cbtn { min-height: 38px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #ui .combat.battle3d .clogbox { padding-top: 8px; }
  #ui .combat.battle3d.log-collapsed .clogbox { width: 112px; height: 35px; min-height: 0; overflow: hidden; opacity: .9; }
  #ui .combat.battle3d.log-collapsed .clogbox .ctab, #ui .combat.battle3d.log-collapsed .clogbox .clog { display: none; }
  #ui .combat.battle3d.log-collapsed .log-toggle { position: static; }
  #ui .combat.battle3d:not(.log-collapsed) .clogbox { width: min(260px, 27vw); height: 70px; }
  #ui .combat.battle3d:not(.log-collapsed) .log-toggle { top: 5px; right: 6px; }
}

/* Victory and defeat summary stay in the courtyard panel system too. */
#ui .panel.wx.bresult { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(760px,calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 24px); padding: 20px; color: #29382e; background: #f3eddf; border: 1px solid #d4cdbd; border-radius: 18px; box-shadow: 0 18px 60px #18211c77; }
#ui .panel.wx.bresult::before, #ui .panel.wx.bresult::after { display: none; }
#ui .panel.wx.bresult .wtitle h2 { color: #29382e; background: none; filter: none; font-size: 24px; }
#ui .panel.wx.bresult .brlead { color: #405f4a; background: none; filter: none; font-size: 22px; }
#ui .panel.wx.bresult.lost .brlead { color: #985042; }
#ui .panel.wx.bresult .brwhere, #ui .panel.wx.bresult .brname, #ui .panel.wx.bresult .brvalue, #ui .panel.wx.bresult .brnote, #ui .panel.wx.bresult .brempty { color: #46574b; font-size: 14px; }
#ui .panel.wx.bresult .brrow, #ui .panel.wx.bresult .brnote { background: #fffdf8; border: 1px solid #d8d1c3; border-radius: 8px; }
#ui .panel.wx.bresult .brrow { min-height: 42px; }
#ui .panel.wx.bresult .brseal { border-radius: 50%; box-shadow: none; }
@media (max-width: 600px) {
  #ui .panel.wx.bresult { padding: 16px; }
}