/* Shared finishing layer. Keep the illustrated wood/gold assets; use one set of
   control sizes and surfaces across windows, chat, maps and the touch HUD. */
:root {
  --ui-ink: #493820;
  --ui-muted: #79674b;
  --ui-line: #cbb17b;
  --ui-paper: #fff9eb;
  --ui-teal: #2f6f73;
  --ui-shadow: 0 8px 24px #261b1738;
}
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid #51b7bc; outline-offset: 3px;
}
input:focus-visible, select:focus-visible { outline: 2px solid #2f858b; outline-offset: 2px; }
button:disabled { cursor: default; }
.win .body, .sheet, #chat-log, .login-card { overscroll-behavior: contain; }
.win .body, .sheet, #chat-log { scrollbar-color: #baa06e #efe4cf; scrollbar-width: thin; }
.win :is(input, select), #chat-in { user-select: text; }

/* All ordinary window controls share the same silhouette and states. */
:is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) :is(.rbtn, .actions button, .btn, button.up),
:is(html[data-skin="wood"], html) body :is(.gear-tabs, .tabs, .vtabs) button,
:is(html[data-skin="wood"], html) body :is(.bm-zoom, .map-btns) button {
  border: 1px solid var(--ui-line); border-radius: 9px;
  background: linear-gradient(#fffcf3, #ecddbc);
  color: var(--ui-ink); font-family: var(--font); font-weight: 600;
  box-shadow: inset 0 1px 0 #fff9, 0 1px 2px #533a1714;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
:is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) :is(.rbtn, .actions button, .btn) {
  min-height: 34px; padding: 5px 12px; line-height: 1.35;
}
:is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) :is(.rbtn.main, .actions button.main),
:is(html[data-skin="wood"], html) body :is(.gear-tabs, .tabs, .vtabs) button.on {
  background: linear-gradient(#3f8588, #2b686c); border-color: #285d61;
  color: #fffdf4; text-shadow: 0 1px 1px #133b3e55;
}
:is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) button:disabled {
  opacity: .45; box-shadow: none; filter: saturate(.4);
}
@media (hover: hover) {
  :is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) :is(.rbtn, .actions button, .btn, button.up):hover:not(:disabled):not(.main),
  :is(html[data-skin="wood"], html) body :is(.gear-tabs, .tabs, .vtabs) button:not(.on):hover {
    background: #fff9e8; border-color: #9a7736;
  }
}
:is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) button:active:not(:disabled) { box-shadow: inset 0 2px 4px #533a1726; }
:is(html[data-skin="wood"], html) body .win > header {
  height: 46px; min-height: 46px; padding: 0 4px 0 10px; margin-bottom: 8px;
  border-bottom: 1px solid #d9c69e; background: linear-gradient(#fff9eb, #f2e5c9);
}
:is(html[data-skin="wood"], html) body .win > header > span { font: 600 16px/1.4 var(--font-head); color: var(--ui-ink); }
:is(html[data-skin="wood"], html) body .win > header > .win-ic { display: grid; place-items: center; width: 28px; height: 28px; }
.win-ic img { width: 28px; height: 28px; object-fit: contain; }
:is(html[data-skin="wood"], html) body .win > header button {
  position: relative; top: auto; right: auto; bottom: auto; left: auto; translate: none; width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  flex-shrink: 0; font: 400 26px/1 var(--font); border: 1px solid #cdb582;
  border-radius: 9px; background: #fff9e9; color: #765730;
}
/* Old pseudo hit areas overlapped the title and extended outside the window. */
:is(html[data-skin="wood"], html) body .win > header button::before { content: none; }
:is(html[data-skin="wood"], html) body .win > .foot { flex-shrink: 0; gap: 8px; flex-wrap: wrap; padding: 8px; line-height: 1.5; }
:is(html[data-skin="wood"], html) body .win > .body { padding: 4px 6px 6px; }
:is(html[data-skin="wood"], html) body .win { color: var(--ui-ink); max-height: min(76dvh, 640px); }
:is(html[data-skin="wood"], html) body .win[data-level="b"] > header { height: 46px; min-height: 46px; }
:is(html[data-skin="wood"], html) body .win[data-level="b"] > header > span { font-size: 16px; }
:is(html[data-skin="wood"], html) body .win .small { color: var(--ui-muted); }
:is(html[data-skin="wood"], html) body .win :is(.detail p, .ept p, .npc-text) { line-height: 1.6; }
:is(html[data-skin="wood"], html) body .win .st-row { min-height: 34px; height: auto; align-items: center; }
:is(html[data-skin="wood"], html) body .win .st-row .up { width: 32px; min-width: 32px; height: 32px; }
:is(html[data-skin="wood"], html) body .win .st-row .v { font-variant-numeric: tabular-nums; }
:is(html[data-skin="wood"], html) body .win .st-grid { grid-template-columns: 1.15fr 1fr 1fr; border-radius: 8px; overflow: hidden; }
:is(html[data-skin="wood"], html) body .win .st-grid .st-col { min-width: 0; }
:is(html[data-skin="wood"], html) body .win .st-row :is(b, .v) { white-space: nowrap; }
:is(html[data-skin="wood"], html) body .win .st-grid .st-row { gap: 5px; }
:is(html[data-skin="wood"], html) body .win .sk-row { padding: 9px 6px; gap: 9px; border-bottom-color: #e3d5b7; }
:is(html[data-skin="wood"], html) body .win .sk-row .nm { line-height: 1.45; }
:is(html[data-skin="wood"], html) body .win .sk-row .lv { line-height: 1.5; }
:is(html[data-skin="wood"], html) body .win .sk-btns { gap: 5px; }
:is(html[data-skin="wood"], html) body .win .sk-btns .rbtn { min-width: 34px; padding: 4px 7px; }
:is(html[data-skin="wood"], html) body .win .vtabs { flex-wrap: wrap; }
:is(html[data-skin="wood"], html) body .win .vtabs button { min-height: 36px; padding: 4px 10px; }
:is(html[data-skin="wood"], html) body .win .grid .slot { border-radius: 9px; }
:is(html[data-skin="wood"], html) body .win .grid .slot.sel { outline: 2px solid var(--ui-teal); outline-offset: 1px; }
:is(html[data-skin="wood"], html) body .win .detail { margin-top: 8px; border-radius: 9px; }
:is(html[data-skin="wood"], html) body .win :is(.shop-row, .pt-row) { gap: 8px; }
:is(html[data-skin="wood"], html) body .win input { min-height: 36px; border-radius: 8px; border-color: var(--ui-line); }

/* Desktop: three stable groups, with AUTO allocated space beside the hotbar. */
html:not(.touch-ui) body { --chat-w: min(28vw, 390px); --menu-w: 306px; }
html:not(.touch-ui) body #menu {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px; width: var(--menu-w); max-width: none; right: 12px; bottom: 12px;
  padding: 7px; border: 1px solid #d7bb7b; border-radius: 14px;
  background: #30291fdb; box-shadow: 0 3px 12px #20160840;
}
html:not(.touch-ui) body #menu button {
  width: auto; height: 55px; min-width: 0; border-radius: 9px; padding: 4px 1px;
  background: linear-gradient(#fff7df, #ead5a4); border: 1px solid #c4a064;
}
html:not(.touch-ui) body #menu button small { font: 500 10.5px/1.3 var(--font); color: #604a2a; opacity: 1; white-space: nowrap; }
html:not(.touch-ui) body #menu button img.mi { width: 26px; height: 26px; }
html:not(.touch-ui) body #menu [data-act="rot"] { grid-column: auto; }
html:not(.touch-ui) body #chat { left: 12px; right: auto; bottom: 12px; width: var(--chat-w); }
html:not(.touch-ui) body #chat-log { width: 100%; height: 142px; margin: 5px 0; border-radius: 10px; background: #202a31db; }
html:not(.touch-ui) body #chat .chat-tabs { gap: 3px; margin: 0; overflow-x: auto; flex-wrap: nowrap; }
html:not(.touch-ui) body #chat .chat-tabs button { min-width: 0; padding: 0 7px; min-height: 30px; flex: none; font: 600 11.5px var(--font); }
html:not(.touch-ui) body #chat .chat-tabs .grow { flex: 0; }
html:not(.touch-ui) body #chat .chat-bar {
  width: 100%; height: 40px; padding: 4px; gap: 4px; border: 1px solid #c2a674; border-radius: 10px;
  background: #f7edda;
}
html:not(.touch-ui) body #chat-in { width: 0; min-width: 0; flex: 1; height: 30px; min-height: 30px; font-size: 13px; }
html:not(.touch-ui) body #chat-send { display: block; }
html:not(.touch-ui) body #chat-mode, html:not(.touch-ui) body #chat-send { min-height: 30px; padding: 0 8px; flex: none; }
html:not(.touch-ui) body #hotbar {
  top: auto; bottom: 16px; left: calc(var(--chat-w) + 28px); right: auto;
  width: min(480px, calc(100vw - var(--chat-w) - var(--menu-w) - 154px)); transform: none; flex-wrap: nowrap; box-sizing: border-box; gap: 3px;
}
html:not(.touch-ui) body #hotbar .slot { flex: 1 1 0; min-width: 0; width: 44px; max-width: none; height: 44px; padding: 0; }
html:not(.touch-ui) body #hotbar .hb-page { width: 24px; flex: 0 0 24px; height: 44px; padding: 0; border: 0; }
html:not(.touch-ui) body #auto-atk-pc { width: 86px; height: 44px; }
html:not(.touch-ui) body #auto-atk-pc::before,
html:not(.touch-ui) body #auto-atk-pc::after { content: none; }
html:not(.touch-ui) body #auto-atk-pc .dot { display: inline-block; }
html:not(.touch-ui) body #basic .bi-zeny .snd { display: none; }
/* Settings are reachable in the same menu on every device. */
html:not(.touch-ui) body #menu .menu-set {
  display: flex; grid-column: 1 / -1; gap: 4px; border-top: 1px solid #e5c98c40; padding-top: 5px;
}
html:not(.touch-ui) body #menu .menu-set button { flex: 1; height: 28px; min-height: 28px; font: 500 10.5px var(--font); }
html:not(.touch-ui) body #menu .menu-set button.off { opacity: .7; }
@media (min-width: 761px) and (max-width: 1100px) and (pointer: fine) {
  html:not(.touch-ui) body { --chat-w: 290px; --menu-w: 294px; }
  html:not(.touch-ui) body #hotbar { left: 50%; right: auto; width: min(440px, calc(100vw - 130px)); transform: translateX(-60%); bottom: 246px; }
}

/* Touch: readable HUD, a deliberate thumb arc, and controls clear of safe areas. */
html.touch-ui body #hud #basic { width: min(62vw, 236px); }
html.touch-ui body #hud #basic .bi { padding: 0; }
html.touch-ui body #hud #basic .bi-name { margin: 0; gap: 1px; flex-direction: column; align-items: stretch; }
html.touch-ui body #hud #basic .bi-name b { font-size: clamp(10px, 5cqw, 12px); line-height: 1.25; }
html.touch-ui body #hud #basic .bi-name span { display: block; font-size: clamp(9px, 4cqw, 10px); line-height: 1.2; opacity: 1; }
html.touch-ui body #hud #basic .cc .bi-bar { margin: 0; }
html.touch-ui body #hud #basic .cc .bi-bar .rbar { height: auto; }
html.touch-ui body #hud #basic .cc .bi-bar span { max-width: none; font: 600 clamp(9px, 4.2cqw, 10px)/1 var(--font); }
html.touch-ui body #hud #mapbox { width: 106px; box-sizing: content-box; --fr: 6px; }
html.touch-ui body #hud #minimap { width: 106px; height: 106px; }
html.touch-ui body #zone-name { font: 600 10px/1.35 var(--font); white-space: normal; padding: 3px; }
html.touch-ui body #map-big { width: 44px; height: 44px; min-width: 44px; min-height: 44px; opacity: .95; }
html.touch-ui body #hud #fabs { gap: 20px; }
html.touch-ui body #hud #fabs button { width: 46px; height: 46px; border-color: #d4b46f; box-shadow: 0 0 0 1px #624c2d, 0 3px 8px #0004; }
html.touch-ui body #hud #fabs button > span.fab-lb { font: 500 11px/1.2 var(--font); top: calc(100% + 3px); }
html.touch-ui body #hud #touch-pad { width: 96px; height: 96px; opacity: .65; }


html.touch-ui body #hud #touch-acts [data-attack] { width: 82px; height: 82px; min-width: 0; min-height: 0; right: 18px; bottom: 42px; }
html.touch-ui body #hud #touch-acts [data-slot] {
  width: 54px; height: 54px; min-width: 0; min-height: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #455054, #283238); border: 1px solid #cbaa64;
  box-shadow: 0 2px 5px #0004;
}
html.touch-ui body #hud #touch-acts [data-slot]:not(.filled) > img { opacity: 0; }
html.touch-ui body #hud #touch-acts [data-slot]:not(.filled)::after { color: #f5e3b8; font-size: 25px; }
html.touch-ui body #hud #touch-acts [data-slot="0"] { right: 10px; bottom: 194px; }
html.touch-ui body #hud #touch-acts [data-slot="1"] { right: 72px; bottom: 182px; }
html.touch-ui body #hud #touch-acts [data-slot="2"] { right: 126px; bottom: 150px; }
html.touch-ui body #hud #touch-acts [data-slot="3"] { right: 156px; bottom: 95px; }
html.touch-ui body #hud #touch-acts [data-auto] { right: 30px; bottom: 132px; width: 46px; height: 46px; border-color: #d4b46f; }
html.touch-ui body #hud #touch-acts [data-page] { right: 115px; bottom: 34px; width: 64px; height: 44px; min-height: 44px; border-radius: 12px; border-color: #cbaa64; }
html.touch-ui body #hud #touch-acts [data-page] small { font-size: 11px; }
html.touch-ui body #hud #touch-acts .mirror { inset: 12%; border-radius: 50%; }
html.touch-ui body #hud #touch-zone { width: min(38vw, 180px); height: min(23vh, 180px); }

/* Sheets retain a real 44px close target and a fixed footer; only content scrolls. */
html.touch-ui body .win { box-sizing: border-box; max-height: calc(83dvh - env(safe-area-inset-top)); border-width: 12px; padding-bottom: env(safe-area-inset-bottom); }
html.touch-ui body .win > header { height: 50px; min-height: 50px; padding: 0 2px 0 8px; }
html.touch-ui body .win > header button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html.touch-ui body .win[data-level="b"] > header { height: 50px; min-height: 50px; }
html.touch-ui body .win > .body { padding: 4px 6px 8px; min-height: 0; touch-action: pan-y; }
html.touch-ui body .win > .foot { padding: 8px 4px; }
html.touch-ui body .win > header { touch-action: none; }
html.touch-ui body .win :is(.rbtn, .actions button, .btn, button.up),
html.touch-ui body :is(.gear-tabs, .vtabs, .tabs) button { min-height: 44px; }
html.touch-ui body .win .st-row .up { min-width: 44px; width: 44px; height: 44px; }
html.touch-ui body .win .st-main .st-row { min-height: 50px; }
html.touch-ui body .win .sk-btns .rbtn { min-width: 44px; padding: 4px 7px; }
html.touch-ui body .win .sk-row { grid-template-columns: 40px minmax(0,1fr) auto; gap: 7px; }
html.touch-ui body .win .sk-row .nm { font-size: 14px; }
html.touch-ui body .win .sk-row .lv { flex-wrap: wrap; font-size: 12px; }
html.touch-ui body .win .sk-row p { font-size: 12px; }
html.touch-ui body .win input { font-size: 16px; min-height: 44px; max-width: 100%; }
html.touch-ui body .inv .vtabs { gap: 5px; }
html.touch-ui body .inv .vtabs button { padding: 5px 10px; min-height: 44px; }
html.touch-ui body .inv .grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 7px; }
html.touch-ui body .inv .grid .slot { min-height: 52px; }
html.touch-ui body .sheet { max-height: calc(100dvh - 32px - var(--kb, 0px)); padding: 16px; }
html.touch-ui body #sk-info .si-btns .rbtn { min-height: 44px; }
html.touch-ui body #menu { padding: 12px 10px calc(12px + var(--safe-b)); gap: 7px; background: #f6ecd8; border-top: 2px solid #c6a368; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px #211a2440; }
html.touch-ui body #menu button { min-width: 0; height: 64px; border-radius: 11px; background: linear-gradient(#fffbef, #ead9b5); border-color: #cdb581; }
html.touch-ui body #menu button small { font: 600 11.5px/1.3 var(--font); color: #634b28; }
html.touch-ui body #menu .menu-set { gap: 6px; padding-top: 7px; border-top: 1px solid #ddc99e; }
html.touch-ui body #menu .menu-set button { height: 44px; font: 600 12px var(--font); }


html.touch-ui.chat-open body #hud #fabs button > span { display: none; }
html.touch-ui.chat-open body #chat-in { min-width: 0; flex: 1; height: 44px; font-size: 16px; }
html.touch-ui.chat-open body #chat .chat-bar { height: 56px; padding: 6px; gap: 5px; background: #f7ecd5; }
html.touch-ui.chat-open body #chat :is(#chat-mode, #chat-send, #chat-size) { height: 44px; min-height: 44px; padding: 0 10px; margin: 0; }
html.touch-ui.chat-open body #chat #chat-log { touch-action: pan-y; }
html.touch-ui.chat-open body #chat.big .chat-tabs button { min-height: 44px; }
html.touch-ui body #chat-ch { bottom: calc(62px + var(--safe-b) + var(--kb, 0px)); }
html.touch-ui body #chat-ch button { min-height: 44px; }
html.touch-ui body:has(#windows .win:not([hidden])) :is(#touch-pad, #touch-zone, #touch-acts) { visibility: hidden; pointer-events: none; }
html.touch-ui.menu-open body #touch-zone, html.touch-ui.chat-open body #touch-zone { display: none; }

html.touch-ui.land body #hud #basic { width: 216px; }
html.touch-ui.land body #hud #mapbox, html.touch-ui.land body #hud #minimap { width: 88px; }
html.touch-ui.land body #hud #minimap { height: 88px; }
html.touch-ui.land body #hud #fabs { gap: 18px; }
html.touch-ui.land body #hud #touch-pad { width: 86px; height: 86px; }
html.touch-ui.land body #hud #touch-acts [data-attack] { width: 78px; height: 78px; right: 24px; bottom: 38px; }
html.touch-ui.land body #hud #touch-acts [data-slot="0"] { right: 12px; bottom: 176px; }
html.touch-ui.land body #hud #touch-acts [data-slot="1"] { right: 74px; bottom: 172px; }
html.touch-ui.land body #hud #touch-acts [data-slot="2"] { right: 131px; bottom: 143px; }
html.touch-ui.land body #hud #touch-acts [data-slot="3"] { right: 162px; bottom: 88px; }
html.touch-ui.land body #hud #touch-acts [data-auto] { right: 37px; bottom: 119px; }
html.touch-ui.land body #hud #touch-acts [data-page] { right: 117px; bottom: 29px; }
html.touch-ui.land body .win { top: max(6px, env(safe-area-inset-top)) !important; bottom: max(6px, env(safe-area-inset-bottom)); right: max(6px, env(safe-area-inset-right)); width: min(62vw, 520px) !important; max-height: none; border-width: 10px; padding: 0; }
html.touch-ui.land body #menu { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); grid-template-columns: repeat(11, minmax(0,1fr)); border-radius: 14px; padding: 10px; }


html.touch-ui.land.chat-open body #hud #chat { width: min(62vw, 480px); background: #202a31f5; }
html.touch-ui.land.chat-open body #hud #chat .chat-tabs { margin-left: 64px; }
/* Short phones: preserve a clear strip between the minimap and the combat arc. */
@media (max-height: 375px) {
  html.touch-ui.land body #hud #touch-acts [data-slot="0"] { bottom: 152px; }
  html.touch-ui.land body #hud #touch-acts [data-slot="1"] { bottom: 153px; }
  html.touch-ui.land body #hud #touch-acts [data-slot="2"] { bottom: 126px; }
  html.touch-ui.land body #hud #touch-acts [data-slot="3"] { bottom: 70px; }
  html.touch-ui.land body #hud #touch-acts [data-auto] { bottom: 101px; }
  html.touch-ui.land body #hud #touch-acts [data-attack] { bottom: 18px; }
  html.touch-ui.land body #hud #touch-acts [data-page] { bottom: 14px; }
  html.touch-ui.land body #hud #fabs { flex-direction: row; }
  html.touch-ui.land body #hud #mapbox, html.touch-ui.land body #hud #minimap { width: 76px; }
  html.touch-ui.land body #hud #minimap { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(html[data-skin="wood"], html) body .win, :is(html[data-skin="wood"], html) body .sheet, :is(html[data-skin="wood"], html) body button, :is(html[data-skin="wood"], html) body #hud #touch-acts button::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Item counts and currency stay together, guidance gets its own readable row. */
.win .bag-count, .win .bag-gold { white-space: nowrap; font-variant-numeric: tabular-nums; }
.win .bag-gold { margin-left: auto; }
.win .bag-hint { flex-basis: 100%; }
html.touch-ui body .win .actions input { min-width: 0; }
html.touch-ui body .win .actions { flex-wrap: wrap; }
html.touch-ui body .win .actions input { flex-basis: 140px; }
html.touch-ui body #hud #aim-bar.touch { right: 134px; }
html.touch-ui.land body #hud #aim-bar.touch { top: max(8px, var(--aim-top, 8px)); left: 232px; right: 124px; }

html.touch-ui body .win { font-size: 14px; }
html.touch-ui body .win .st-row, html.touch-ui body .win .st-row .v,
html.touch-ui body .win .st-row b { font-size: 14px; }
html.touch-ui body .win .small { font-size: 12px; }
html.touch-ui body .win .st-main .st-row { gap: 9px; }
html.touch-ui body .win .st-row .cost { font-size: 11px; }
@media (max-width: 359px) {
  html.touch-ui body #hud #touch-pad { width: 84px; height: 84px; }
  html.touch-ui body #hud #mapbox, html.touch-ui body #hud #minimap { width: 94px; }
  html.touch-ui body #hud #minimap { height: 94px; }
}

/* The world map is a centered dialog, independent of draggable game windows. */
html body .wm-wrap .wm-win.win {
  position: relative; inset: auto !important; width: min(94vw, 740px) !important;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  box-sizing: border-box; border-width: 14px; padding: 0;
}
html body .wm-wrap .wm-win > header .wm-back {
  width: auto; min-width: 64px; padding: 0 10px; font-size: 14px;
}
html body .wm-wrap .wm-win .wm-card { flex: 0 1 auto; overflow-y: auto; min-height: 80px; }
html body .wm-wrap .wm-win .wm-body { flex: 1 1 auto; min-height: 120px; }
html.touch-ui.land body .wm-wrap .wm-win.win { width: min(96vw, 780px, 100%) !important; }   /* 100% = ในกรอบที่หักติ่งกล้องแล้ว (ui-map.css .wm-wrap padding) */
html.touch-ui.land body .wm-wrap .wm-win { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 50px minmax(0,1fr); }
html.touch-ui.land body .wm-wrap .wm-win > header { grid-column: 1 / -1; }
html.touch-ui.land body .wm-wrap .wm-body { padding: 4px; }
html.touch-ui.land body .wm-wrap .wm-card { margin: 4px; max-height: calc(100dvh - 120px); }
html.touch-ui.land body .wm-wrap .wm-art { --h: min(60dvh, 220px); width: 100%; height: auto; aspect-ratio: 3 / 2; }

/* Login controls remain readable when the keyboard or landscape reduces height. */
html body .login-card, html body .login-card > *,
html body #l-create :is(.cc, .cc-opt, .cc-opt > *, .name-row, .cprev) { min-width: 0; }
html body #l-create .name-row input { width: 0; flex: 1; }
html body #l-create .cprev canvas { max-width: 100%; }
html body #l-create .step { grid-template-columns: 44px minmax(0,1fr) 44px; min-height: 44px; }
html body #l-create .step-arrow { min-width: 44px; min-height: 44px; }
html body #l-create .swatches button { position: relative; min-width: 0; min-height: 0; }
html body #l-create .swatches button.on { outline: 2px solid #2f6f73; outline-offset: 3px; }
html body #l-create .swatches button.on::after { content: '✓'; color: #fff; text-shadow: 0 1px 3px #000; font-size: 16px; }
html.touch-ui body #l-create .cc-opt .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html.touch-ui body #l-create .cc-opt .row > span:first-child { grid-column: 1 / -1; width: auto; }
html.touch-ui body #l-create :is(.swatches, .step) { grid-column: 1 / -1; width: 100%; }
html.touch-ui body #l-create .swatches { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; padding: 7px 2px; }
html.touch-ui body #l-create .swatches button { width: 44px; height: 44px; justify-self: center; border-width: 6px; }
@media (max-width: 359px) {
  html.touch-ui body #l-create .swatches { grid-template-columns: repeat(3, 44px); }
}
:is(html[data-skin="wood"], html).touch-ui.land body #login.overlay { overflow-y: auto; align-content: start; align-items: start; }
:is(html[data-skin="wood"], html).touch-ui.land body .login-card { margin-block: 8px; max-height: none; width: min(94vw, 700px); }
html.touch-ui.land body .login-card:has(#l-create:not([hidden])) .brand img { width: 136px; }
html.touch-ui.land body #l-create .cc { grid-template-columns: minmax(100px, .8fr) minmax(0, 1.4fr); gap: 14px; }
html.touch-ui.land body #l-create .cprev { height: 240px; }

@media (hover: hover) {
  :is(html[data-skin="wood"], html) body :is(.win, .sheet, .dlg) :is(.rbtn.main, .actions button.main):hover:not(:disabled) { background: #245b60; color: #fffdf4; }
}


/* Inventory actions keep their context visible when the source sheet is folded. */
.bag-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 9px; border: 1px solid #b9cebd; border-radius: 9px; background: #edf2e6; color: #375d51; }
.bag-context > span { flex: 1 1 140px; line-height: 1.5; }
/* ขายรวดวัตถุดิบ (โหมดขายให้ร้าน) — ui.js renderItems */
.bulk-sell { margin: 0 0 10px; padding: 9px; border: 1px solid #e0cda0; border-radius: 9px; background: #fffaf0; }
.bulk-sell .bs-top { display: flex; align-items: center; gap: 10px; }
.bulk-sell .bs-top .bs-head { flex: 1 1 auto; margin: 0; display: grid; gap: 2px; }
.bulk-sell .bs-top > button { flex: 0 0 auto; width: auto; padding: 8px 14px; }
.bulk-sell .bs-more summary { margin-top: 6px; cursor: pointer; font-size: 13px; color: #2f6f73; font-weight: 700; }
.bulk-sell .bs-more[open] .bs-list { margin-top: 6px; }
.bulk-sell .bs-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; color: #6b4510; }
.bulk-sell .bs-list { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow: auto; margin-bottom: 8px; }
.bulk-sell .bs-item { display: grid; grid-template-columns: auto 26px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 7px; background: #f6fbf4; cursor: pointer; font-size: 12.5px; }
.bulk-sell .bs-item.keep { background: #f3eee2; }
.bulk-sell .bs-item i { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: #2f6f73; color: #fff; }
.bulk-sell .bs-item em { font-style: normal; font-weight: 700; color: #8a5a12; }
.bulk-sell .bs-ic { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; }
.bulk-sell .bs-ic img { width: 100%; height: 100%; object-fit: contain; }
.skill-icon { display: inline-block; width: 38px; height: 38px; border-radius: 7px; vertical-align: middle; }
#slot-pick .sp-grid button > span { display: grid; place-items: center; }
#slot-pick .sp-grid .skill-icon { width: 36px; height: 36px; }
.slot img, .eqslot img { -webkit-user-drag: none; user-select: none; }

/* Skill dialogs share a real modal surface, fixed actions and a scrollable body. */
html body :is(#sk-info, #slot-pick).sheet {
  display: flex; flex-direction: column; gap: 0; box-sizing: border-box;
  inset: 0; margin: auto; width: min(440px, calc(100vw - 24px)); height: fit-content;
  max-height: calc(100dvh - 24px); padding: 0; overflow: hidden;
  border: 2px solid #bd9b59; border-radius: 16px; background: #fff8e8;
  box-shadow: 0 14px 44px #23180e66; color: var(--ui-ink); text-align: left;
  /* Scale/translate popIn can leave a native dialog unpainted in the top layer. */
  animation: skillSheetFade .14s ease-out;
}
@keyframes skillSheetFade { from { opacity: 0; } to { opacity: 1; } }
html body :is(#sk-info, #slot-pick).sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: #1b252b70; }
.sheet .sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid #decca7; background: linear-gradient(#fffaf0, #f0e2c2); }
.sheet .sheet-head > div { min-width: 0; }
.sheet .sheet-head b { display: block; font: 700 17px/1.35 var(--font-head); overflow-wrap: anywhere; }
.sheet .sheet-head small { font-size: 12px; color: var(--ui-muted); }
.sheet .sheet-close { flex: none; width: 44px; height: 44px; border: 1px solid #c9ae76; border-radius: 10px; background: #fff9ed; color: #765730; font: 26px/1 var(--font); }
.sheet .sheet-body { display: grid; gap: 12px; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.sheet .sheet-actions { display: flex; flex: none; gap: 8px; flex-wrap: wrap; padding: 12px; border-top: 1px solid #decca7; background: #f5e9d1; }
html body :is(#sk-info, #slot-pick) .sheet-actions .rbtn { min-height: 44px; padding: 6px 12px; font-size: 14px; }
#sk-info .si-btns { margin: 0; }
#sk-info .si-top { min-width: 0; }
#sk-info .si-ic { width: 48px; height: 48px; border: 1px solid #c9b080; }
#sk-info .si-desc { font-size: 14px; line-height: 1.65; }
#sk-info .si-facts { gap: 7px; }
#sk-info .si-facts span { padding: 5px 9px; border-radius: 8px; background: #eee4ce; }
#sk-info .si-points { font-size: 12.5px; color: #79674b; }
#slot-pick .sp-pages { display: flex; gap: 7px; }
#slot-pick .sp-pages button { flex: 1; min-height: 44px; padding: 6px; border: 1px solid #c9ae76; border-radius: 9px; background: #f6e8c9; color: #604a2a; font: 600 14px var(--font); }
#slot-pick .sp-pages button.on { background: #2f6f73; color: #fff8e8; border-color: #285d61; }
#slot-pick .sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#slot-pick[data-reach="9"] .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#slot-pick .sp-grid button { display: grid; gap: 7px; justify-items: center; min-width: 0; min-height: 82px; padding: 8px 4px; border: 1px dashed #c9ae76; border-radius: 12px; background: #fdf6e6; color: #79674b; }
#slot-pick .sp-grid button.used { border-style: solid; background: #efe1c3; }
#slot-pick .sp-grid button i { font: 500 12px var(--font); }
#slot-pick .sp-grid button > span { width: 38px; height: 38px; }
#slot-pick .sp-grid button img { width: 36px; height: 36px; object-fit: contain; }
#slot-pick .sp-empty { font: 26px var(--font); color: #a28c67; }
#slot-pick .sheet-body > small { font-size: 12px; line-height: 1.5; color: #79674b; }
#slot-pick .sheet-actions { justify-content: flex-end; }

@media (max-height: 420px) {
  html.touch-ui.land body .sheet .sheet-head { padding: 7px 10px; }
  html.touch-ui.land body .sheet .sheet-body { padding: 10px 14px; gap: 8px; }
  html.touch-ui.land body .sheet .sheet-actions { padding: 8px 10px; }
}
.bulk-sell .bs-top > button.main:not(:disabled) { background: linear-gradient(#3f8a8e, #2f6f73); border: 1px solid #1f5558; color: #fff; font-weight: 700; }