/* Touch-only layout overrides. Game rules and desktop layout are unchanged. */
:root { --mobile-vh: 100dvh; }
body.mobile input, body.mobile textarea { font-size: 16px !important; }
/* Passive messages must not steal a floating-joystick touch, including on text. */
body.mobile #hud { pointer-events: none !important; }
body.mobile #hud .hot, body.mobile #hud .qs, body.mobile #hud #apBtn,
body.mobile #hud #chatBar, body.mobile #hud #skL, body.mobile #hud #buffR,
body.mobile #hud #buffT, body.mobile #hud #debT { pointer-events: auto; }
body.mobile #chat, body.mobile #chat * { pointer-events: none !important; }
body.mobile.mobile-chat-history > #chat {
  display: flex !important; position: fixed !important;
  left: 8px !important; right: 8px !important; width: auto !important;
  top: var(--mobile-chat-top, 76px) !important; bottom: auto !important;
  height: 160px !important;
  max-height: max(44px, min(160px, calc(var(--mobile-vh) - var(--mobile-chat-top, 76px) - 120px)));
  box-sizing: border-box; padding: 8px; z-index: 99990;
  background: rgba(14, 10, 4, .92); border: 1px solid #b79a55; border-radius: 8px;
  pointer-events: auto !important; touch-action: pan-y; overflow-y: auto !important;
  justify-content: flex-start !important;
}
body.mobile > div:has(> #gateT) > div:first-child {
  font-size: clamp(24px, 7vw, 40px) !important; letter-spacing: 4px !important;
  max-width: 94vw; text-align: center;
}
body.mobile #lvdlg {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important; bottom: auto !important;
  left: 50% !important; width: min(94vw, 620px) !important;
  max-height: calc(var(--mobile-vh) - 32px - env(safe-area-inset-top, 0px));
  overflow-y: auto; touch-action: pan-y; box-sizing: border-box; padding: 10px;
  background: rgba(14, 10, 4, .94); border: 1px solid #b79a55; border-radius: 12px;
  pointer-events: auto; z-index: 50;
}
body.mobile #lvHint { font-size: 14px; white-space: normal; text-align: center; }
body.mobile #lvdlg .cards { display: flex; flex-direction: column; width: 100%; gap: 8px; animation: none; }
body.mobile #lvdlg .card, body.mobile #lvdlg .card:hover {
  width: 100% !important; height: auto !important; min-height: 62px; padding: 8px !important;
  gap: 10px; text-align: left; animation: none; transform: none !important;
}
body.mobile #lvdlg .card img, body.mobile #lvdlg .card canvas { width: 44px !important; height: 44px !important; flex: none; }
body.mobile #lvdlg .card .ct { display: block !important; flex: 1; min-width: 0; }
body.mobile #lvdlg .card .ct b { font-size: 15px !important; color: #f3d98b; }
body.mobile #lvdlg .card .ct i { display: block; font-size: 12px; font-style: normal; color: #8fd18f; }
body.mobile #lvdlg .card .ct span { display: block; font-size: 13px !important; line-height: 1.4 !important; }
body.mobile #npcwin .panel {
  width: min(96vw, 800px) !important; max-width: 96vw !important;
  max-height: calc(var(--mobile-vh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  aspect-ratio: auto !important; box-sizing: border-box; padding: 16px 12px !important;
  display: flex; flex-direction: column; overflow: hidden;
  background: #17100a !important; border: 2px solid #b79a55 !important; border-image: none !important;
}
body.mobile #npcwin #nwT {
  position: static !important; width: 100% !important; height: auto !important;
  margin: 0 0 12px !important; font-size: 20px !important; letter-spacing: 1px !important; flex: none;
}
body.mobile #npcwin #nwB {
  width: 100% !important; min-height: 0; margin: 0 !important; overflow: auto !important;
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; font-size: 14px;
}
body.mobile #npcwin #nwX {
  position: static !important; transform: none !important; margin: 10px auto 0 !important;
  min-height: 44px; height: auto !important; min-width: 100px; width: auto !important;
  padding: 8px 24px !important; box-sizing: border-box; flex: none;
}
body.mobile #npcwin #dgC { max-width: 100% !important; width: 100% !important; height: auto !important; }
body.mobile #npcwin button.big { min-height: 38px; }
body.mobile #npcwin .crRow { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 10px; }
body.mobile #npcwin .crRow img { grid-row: 1 / 4; }
body.mobile #npcwin .crRow .n { white-space: normal; overflow: visible; line-height: 1.4; }
body.mobile #npcwin .crRow .c, body.mobile #npcwin .crRow .s { grid-column: 2; white-space: normal; width: auto; text-align: left; }
body.mobile #dgB { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.mobile #newsw {
  width: 96vw !important; height: calc(var(--mobile-vh) - 24px) !important;
  transform: translate(-50%, -50%) !important; background: #120c07 !important;
  border: 2px solid #b79a55 !important; border-radius: 10px !important;
}
body.mobile #newsw .bgi, body.mobile #newsw .dv { display: none; }
body.mobile #newsw .tt { top: 10px; left: 0; width: 100%; font-size: 20px; }
body.mobile #newsw .ls { top: 48px; left: 10px; width: calc(100% - 24px); height: 26%; touch-action: pan-y; }
body.mobile #newsw .dt { top: calc(26% + 62px); left: 10px; width: calc(100% - 28px); height: calc(74% - 126px); font-size: 15px; line-height: 1.5; touch-action: pan-y; }
body.mobile #newsw .cl { left: calc(50% - 80px); top: auto; bottom: 8px; width: 160px; min-height: 32px; }
body.mobile #talw {
  width: 96vw !important; height: calc(var(--mobile-vh) - 24px) !important;
  transform: translate(-50%, -50%) !important; background: #0b0f0c !important;
  border: 2px solid #b79a55 !important; border-radius: 10px !important;
}
body.mobile #talw.on { display: flex !important; flex-direction: column; }
body.mobile #talw .frm, body.mobile #talw .bg, body.mobile #talw > svg, body.mobile #talw > .tr { display: none; }
body.mobile #talw > img { display: none; }
body.mobile #talw .top {
  position: static !important; width: 100% !important; height: auto !important;
  min-height: 82px; padding: 8px !important; font-size: 14px !important; flex-wrap: wrap; gap: 6px; flex: none;
}
body.mobile #talw .top span:nth-child(2) { font-size: 12px !important; }
body.mobile #talw .top b { font-size: 18px !important; }
body.mobile #talw .top .btn { font-size: 13px !important; padding: 8px 2px !important; }
body.mobile #talw .mobile-talent-nodes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 4px;
  flex: 1; min-height: 0; overflow-y: auto; padding: 30px 10px; touch-action: pan-y;
}
body.mobile #talw .tn { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 90px !important; margin: 0 !important; }
body.mobile #talw .tn img { width: 64px; height: 64px; }
body.mobile #talw .tn .nm { font-size: 12px; top: -12px; }
body.mobile #talw .tn .lv { bottom: -4px; }
body.mobile #talw .tn .ef { display: none !important; }
body.mobile #talw .info {
  position: static !important; width: 100% !important; height: 190px !important; padding: 8px !important;
  gap: 8px; flex: none; border-top: 1px solid #b79a55 !important; background: #17100a !important;
}
body.mobile #talw .info .tx { font-size: 13px !important; line-height: 1.5 !important; touch-action: pan-y; }
body.mobile #talw .info .tx b { font-size: 15px !important; }
body.mobile #talw .info .ac { width: 100px; flex: none; }
body.mobile #talw .info .ac .btn { padding: 10px 2px !important; font-size: 14px !important; border-width: 0 12px !important; }
body.mobile #talw .hp { left: 4%; top: 90px; width: 92%; max-height: calc(var(--mobile-vh) - 150px); overflow-y: auto; box-sizing: border-box; font-size: 14px; line-height: 1.6; touch-action: pan-y; }
body.mobile.pt #tbtns > div { height: 40px !important; line-height: 38px !important; }
body.mobile.pt #hud > #apBtn { height: 40px !important; line-height: 38px !important; }
body.mobile #lvl { z-index: 80; }
body.mobile.mobile-modal #joy, body.mobile.mobile-modal #tbtns, body.mobile.mobile-modal #ptQ,
body.mobile.mobile-modal #fsb, body.mobile.mobile-modal #mchatB, body.mobile.mobile-modal #hud > #apBtn { display: none !important; }
body.mobile .win.mobile-options {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
  width: min(94vw, 550px) !important; height: min(720px, calc(var(--mobile-vh) - 24px)) !important; max-height: calc(var(--mobile-vh) - 24px);
  overflow: hidden; box-sizing: border-box; background: #17100a !important;
  border: 2px solid #b79a55; border-radius: 10px; padding: 14px; touch-action: pan-y;
}
body.mobile .mobile-options > .cl { display: none; }
body.mobile .mobile-options-body { position: static !important; color: #f1e3b8; font-size: 16px; display: flex; flex-direction: column; height: 100%; }
body.mobile .mobile-options-scroll { overflow-y: auto; flex: 1; min-height: 0; touch-action: pan-y; }
body.mobile .mobile-options-body h2 { font-size: 20px; margin: 0 0 10px; }
body.mobile .mobile-options-body label { display: flex; align-items: center; gap: 12px; min-height: 44px; }
body.mobile .mobile-options-body input[type=checkbox] { width: 24px; height: 24px; flex: none; }
body.mobile .mobile-options-body input[type=range] { min-width: 0; flex: 1; min-height: 38px; }
body.mobile .mobile-options-body select, body.mobile .mobile-options-body button { min-height: 44px; padding: 8px; font-size: 16px; color: #ffe9b0; background: #3a2812; border: 1px solid #b79a55; border-radius: 6px; }
body.mobile .mobile-options-body footer { display: flex; gap: 12px; margin-top: 12px; flex: none; }
body.mobile .mobile-options-body footer button { flex: 1; }
@media (orientation: landscape) {
  body.mobile #talw .mobile-talent-nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.mobile #talw .info { height: 100px !important; }
  body.mobile #talw .top { min-height: 50px; }
}