/* Novicia Online - phone layout fixes + NPC merchant quick quantity buttons (MOBILE-UI-V1, 2026-09-30) */

/* ---------- NPC merchant: −1 +1 +10 +100 ขายหมด / สูงสุด under each basket row (js/merchant-qty.js) ---------- */
.sale-row.nv-qty-row { row-gap: calc(var(--u) * 4); }
.sale-row.nv-qty-row .nv-qty { grid-column: 1 / -1; gap: 4px; }
.sale-row .nv-qty button {
  flex: 1 1 0; min-width: 0; height: max(28px, calc(var(--u) * 34)); padding: 0 2px;
  border: 1px solid #a9c1e4; border-radius: 7px; background: linear-gradient(#ffffff, #eaf2ff);
  color: #1f4f9a; font: inherit; font-size: max(12px, calc(var(--u) * 18)) !important; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation; white-space: nowrap; box-shadow: none;
}
.sale-row .nv-qty button.nv-qty-max { flex-grow: 1.6; border-color: #c99a2e; background: linear-gradient(#fff3c4, #f5c451); color: #5a3b00; }
.sale-row .nv-qty button:active:enabled { filter: brightness(.92); transform: translateY(1px); }
.sale-row .nv-qty button:disabled { opacity: .42; cursor: default; }
/* the basket column is narrow (PC, phone landscape): two rows  −1 +1 +10 / +100 ขายหมด */
.sale-row.nv-qty-row .nv-qty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sale-row .nv-qty button.nv-qty-max { grid-column: span 2; }
.sale-row .nv-qty button.nv-qty-max:nth-child(4) { grid-column: span 3; }   /* no +100 button */
/* phone portrait: the basket is full width, one row */
@media (orientation: portrait) and (max-width: 700px) {
  .sale-row.nv-qty-row .nv-qty { display: flex; }
}
.sale-row input[type=number] { min-height: max(28px, calc(var(--u) * 34)); }

/* ---------- phone, portrait ---------- */
@media (orientation: portrait) and (max-width: 700px) {
  /* the menu icons sat on top of the character card and the minimap: put them in a row under both */
  html body #hud nav.toolbar.toolbar {
    top: calc(var(--u) * 140 + var(--sa-t, 0px)) !important;
    left: calc(6px + var(--sa-l, 0px)) !important;
    right: calc(6px + var(--sa-r, 0px)) !important;
    width: auto !important;
    justify-content: center !important;
    gap: 2px 5px !important;
  }
  /* the chat sat under the joystick and the skill buttons: lift it above them */
  html body #hud #mm-chat-box:not(.moving) {
    bottom: calc(var(--u) * 205 + var(--sa-b, 0px)) !important;
  }
  html body #hud #target-player-card {
    top: calc(var(--u) * 250 + var(--sa-t, 0px)) !important;
  }
}

/* ---------- touch screens ---------- */
@media (pointer: coarse) {
  /* the menu icons no longer cover an open window (windows are 100+); the Menu dropdown still opens on top */
  html body #hud nav.toolbar.toolbar { z-index: 99 !important; }
  html body #hud nav.toolbar.toolbar:has(.toolbar-menu-dropdown:not([hidden])) { z-index: 99999 !important; }
  /* no double-tap zoom delay on buttons, no blue tap flash */
  #hud button, #hud [role=button], #hud .pw-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* ---------- login screen: "📲 ติดตั้งเกมลงมือถือ" -> /install (js/install-cta.js) ---------- */
#online-login #nv-install-cta {
  position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #f5c451, #d99a26); color: #2a1a02; font: 800 14px 'Noto Sans Thai', sans-serif; text-decoration: none;
  box-shadow: 0 4px 0 #8a5d12, 0 8px 18px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent;
}
#online-login #nv-install-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a5d12; }
#online-login[hidden] #nv-install-cta { display: none; }

/* ---------- CRIT-FX-V2: critical hit number: yellow with a dark red outline on the red burst (no streaks) ---------- */
.world-label.damage-number.critical-number { -webkit-text-stroke: 2px #4a0a0e; text-shadow: 2px 3px 0 #2a0508, 0 0 4px rgba(0, 0, 0, .55); }

/* ---------- party (PARTY-EXP-SHARE-V1) ---------- */
/* party window footer: "แชร์ EXP" pill next to the share-loot / auto-accept boxes */
#hud #party-window .pw-expshare {
  flex: none; position: relative; display: inline-flex; align-items: center; height: 3.6cqw; padding: 0 1.3cqw;
  border: .3cqw solid #8b96ad; border-radius: 999px; background: #ffffff; color: #1d4f9a;
  font-size: 1.9cqw !important; font-weight: 700; white-space: nowrap; cursor: pointer;
}
#hud #party-window .pw-expshare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
#hud #party-window .pw-expshare:has(input:disabled) { opacity: .6; cursor: default; }
#hud #party-window .pw-expshare:has(input:checked) { background: linear-gradient(180deg, #4f93f2, #1f5fd0); border-color: #1d4f9a; color: #ffffff; }

/* phones: the party list on the HUD was as big as a window - a slim list of names + HP bars instead;
   the settings (แบ่งของ / รับอัตโนมัติ / แชร์ EXP / ออก) stay in the Party window */
@media (pointer: coarse) and (max-width: 950px), (pointer: coarse) and (max-height: 520px) {
  html body #hud #party-panel {
    width: 112px; padding: 1px; border-radius: 6px; font-size: 9px;
    background: rgba(15, 26, 52, .72); border-color: rgba(201, 164, 92, .7); box-shadow: 0 2px 8px #0006;
  }
  html body #hud #party-panel .party-head { border-radius: 5px 5px 0 0; }
  html body #hud #party-panel .party-fold { padding: 2px 5px; font-size: 10px; }
  html body #hud #party-panel .party-bonus { margin-right: 3px; padding: 0 4px; font-size: 8px; }
  html body #hud #party-panel ul { padding: 1px 0; max-height: 28vh; }
  html body #hud #party-panel .party-member { padding: 2px 5px 3px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  html body #hud #party-panel .party-line { gap: 3px; }
  html body #hud #party-panel .party-line b { font-size: 9.5px; color: #f3ecd8; }
  html body #hud #party-panel .party-member.self .party-line b { color: #ffd76a; }
  html body #hud #party-panel .party-line small { font-size: 8px; color: #c9b88e; }
  html body #hud #party-panel .party-away { display: none; }
  html body #hud #party-panel .party-hp { height: 3px; margin-top: 1px; border: 0; background: rgba(0, 0, 0, .45); }
  html body #hud #party-panel .party-kick,
  html body #hud #party-panel .party-share,
  html body #hud #party-panel .party-leave { display: none; }
}
/* phone portrait: under the menu icons, over the game's own placement (js/party-compact.js measures where the icon rows end -> --nv-party-top) */
@media (orientation: portrait) and (max-width: 700px) {
  html body #hud #party-panel { top: var(--nv-party-top, 210px) !important; left: calc(4px + var(--sa-l, 0px)) !important; }
}
/* "แชร์ EXP เปิดอยู่" line at the top of the party list */
#hud #party-panel .party-sharing { margin: 0; padding: 2px 8px; background: #e3f0ff; color: #1d4f9a; font-size: 10px; font-weight: 700; border-bottom: 1px dashed #b9d3ec; }
@media (pointer: coarse) and (max-width: 950px), (pointer: coarse) and (max-height: 520px) {
  html body #hud #party-panel .party-bonus { display: none; }
  html body #hud #party-panel .party-sharing { padding: 1px 5px; background: rgba(63, 134, 224, .35); color: #dbe9ff; font-size: 8.5px; border-bottom: 0; }
}

/* TOWN-FPS-V1 (2026-09-30): world labels (names, guild tags, NPC bubbles, damage numbers) move by one composited
   transform (main bundle) instead of left/top, so a moving camera no longer re-lays-out and repaints every name in a
   crowded town. contain keeps a label's own changes from touching the rest of the page. */
#world-labels { contain: strict; }
#world-labels > .world-label { left: 0; top: 0; contain: layout style; }