/* Kartaria mobile interface: quiet HUD, explicit navigation, scrollable equipment. */
body.touch.force-landscape { overflow:clip; }
body.touch.touch {
  --mobile-nav:52px;
  --mobile-edge:8px;
}
body.touch.touch #stats {
  top:calc(6px + var(--sa-t,0px)); left:calc(8px + var(--sa-l,0px));
  width:196px; min-width:0; padding:6px 8px; gap:7px; border-radius:8px;
  box-sizing:border-box; background:#101b17ed; border:1px solid #a38d536b;
  box-shadow:0 3px 10px #0005; backdrop-filter:none;
}
body.touch.touch #stats #avatarRing { width:32px; height:32px; font-size:17px; flex-shrink:0; }
body.touch.touch #avatarLvl { min-width:16px; height:16px; line-height:16px; font-size:10px; }
body.touch.touch #stats #statCol { min-width:0; flex:1; }
body.touch.touch #stats #heroTitle { margin:0 0 3px; line-height:1.1; font-size:10px; letter-spacing:.15px; }
body.touch.touch #heroTitle .ht-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body.touch.touch #heroTitle .ht-cls, body.touch.touch #heroTitle .ht-sep, body.touch.touch #heroTitle .ht-on { display:none; }
body.touch.touch #stats .bar { height:9px; margin:3px 0; border-radius:3px; }
body.touch.touch #stats .bar small { font-size:8px; line-height:9px; }
body.touch.touch #lvlRow { margin-top:2px; font-size:9px; }
body.touch.touch #skillRow { display:none; }
body.touch.touch #warHud {
  top:calc(76px + var(--sa-t,0px)); left:calc(8px + var(--sa-l,0px));
  width:auto; max-width:196px; box-sizing:border-box; padding:4px 7px;
  font-size:9px; line-height:1.3; border-radius:5px; background:#101b17df;
}
body.touch.touch #warHud .res-badge { font-size:9px; margin:1px; padding:0 3px; }
body.touch.touch #questHud {
  top:calc(6px + var(--sa-t,0px)); left:50%; right:auto; transform:translateX(-50%);
  width:min(232px,calc(var(--lw,100vw) - 332px)); max-width:none; box-sizing:border-box;
  padding:5px 8px; font-size:9px; font-weight:500; line-height:1.35;
  border-radius:6px; background:#101b17df; box-shadow:0 2px 7px #0004;
}
body.touch.touch #mmapWrap {
  top:calc(6px + var(--sa-t,0px)); right:calc(8px + var(--sa-r,0px));
  width:104px; box-sizing:border-box; padding:4px; border-radius:7px;
  background:#101b17ed; box-shadow:0 3px 10px #0005;
}
body.touch.touch #mmapHead { gap:3px; margin-bottom:3px; }
body.touch.touch #mmapName { font-size:8px; letter-spacing:.2px; }
body.touch.touch #mmapOnline { font-size:8px; white-space:nowrap; }
body.touch.touch #mmap { width:94px; height:52px; border-radius:3px; }
body.touch.touch #mmapPartyBtn, body.touch.touch #mmapQuestBtn { display:none; }
body.touch.touch #topright {
  top:calc(88px + var(--sa-t,0px)); right:calc(8px + var(--sa-r,0px)); gap:3px;
}
body.touch.touch .chip { min-height:22px; box-sizing:border-box; padding:2px 5px; font-size:9px; gap:3px; border-radius:4px; background:#101b17df; }
body.touch.touch .chip b { font-size:9px; }
body.touch.touch #chatOpen {
  top:calc(118px + var(--sa-t,0px)); right:calc(8px + var(--sa-r,0px));
  width:36px; height:36px; font-size:16px; border-radius:8px;
}
body.touch.touch #partyWrap { left:calc(8px + var(--sa-l,0px)); top:calc(126px + var(--sa-t,0px)); bottom:auto; width:172px; font-size:10px; }
/* Notices and quests share the quiet centre lane, never the thumb controls. */
body.touch.touch #kNotice {
  top:calc(52px + var(--sa-t,0px)); left:50%; width:min(270px,calc(var(--lw,100vw) - 430px));
  box-sizing:border-box; padding:5px 27px 5px 7px; gap:5px;
  border-radius:5px; box-shadow:0 2px 8px #0004;
}
body.touch.touch #kNotice .kn-por, body.touch.touch #kNotice .kn-ico { display:none; }
body.touch.touch #kNotice .kn-txt { display:block; min-width:0; }
body.touch.touch #kNotice .kn-txt b { display:block; font:700 10px/1.3 system-ui,sans-serif; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.touch.touch #kNotice .kn-txt span, body.touch.touch #kNotice .kn-txt small { display:none; }
body.touch.touch #kNotice .kn-x { width:22px; height:22px; top:2px; right:2px; }
body.touch.touch #guide {
  left:50% !important; right:auto !important; top:auto !important;
  bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 8px) !important;
  width:min(244px,calc(var(--lw,100vw) - 474px)) !important;
  transform:translateX(-50%) !important; padding:6px 8px; box-sizing:border-box;
  border:1px solid #9d87536e; border-left:3px solid #b9a05a; border-radius:5px;
  box-shadow:0 3px 9px #0004; background:#111c17ed;
}
body.touch.touch #guide .gd-head { font:600 8px/1.3 system-ui,sans-serif; letter-spacing:.5px; }
body.touch.touch #guide .gd-head span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body.touch.touch #guide .gd-title { margin:3px 0 0; font-size:11px; line-height:1.3; }
body.touch.touch #guide .gd-text, body.touch.touch #guide .gd-bar { display:none; }
body.touch.touch #guide.gd-expanded { width:min(280px,calc(var(--lw,100vw) - 400px)) !important; }
body.touch.touch #guide.gd-expanded .gd-text { display:block; margin-top:5px; font-size:11px; line-height:1.45; max-height:70px; overflow-y:auto; }
body.touch.touch #guide #gdSkip { flex-shrink:0; width:22px; height:22px; font-size:10px; }
body.touch.touch #attribution { bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 2px); right:8px; left:auto; transform:none; font-size:7px; max-width:170px; opacity:.65; }
/* Five stable destinations; secondary destinations are a labelled popover. */
body.touch.touch #tabBar {
  height:calc(var(--mobile-nav) + var(--sa-b,0px)); box-sizing:border-box;
  padding:3px calc(8px + var(--sa-r,0px)) calc(3px + var(--sa-b,0px)) calc(8px + var(--sa-l,0px));
  gap:3px; align-items:stretch; background:#0d1816f5; border-top:1px solid #9c864c70;
}
body.touch.touch #tabBar::before, body.touch.touch #tabBar .tab-gap { display:none; }
body.touch.touch #tabBar .tab-b { flex:1 1 0; min-width:44px; max-width:132px; min-height:44px; padding:3px; gap:2px; border-radius:5px; }
body.touch.touch #tabBar .tab-b .tb-ic { width:21px; height:21px; font-size:18px; background-size:contain; border:0; border-radius:0; box-shadow:none; }
body.touch.touch #tabBar .tab-b .tb-tx { font:600 9px/1.1 system-ui,sans-serif; letter-spacing:.1px; white-space:nowrap; }
body.touch.touch #tabBar .tab-b[data-tab='loja'], body.touch.touch #tabBar .tab-b[data-tab='cartas'],
body.touch.touch #tabBar .tab-b[data-tab='reinos'], body.touch.touch #tabBar .tab-b[data-tab='governo'],
body.touch.touch #tabBar .tab-b[data-tab='apoiar'] { display:none; }
#mobileMoreBtn { display:none; }
#mobileGroupBtn { display:none; }
body.touch.mobile-menu-open #tabBar #mobileGroupBtn {
  display:flex; position:absolute; width:84px; height:54px; min-height:54px; z-index:1;
  bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 14px); right:calc(12px + var(--sa-r,0px));
}
body.touch.mobile-menu-open #hud { z-index:21; }
body.touch.touch #tabBar #mobileMoreBtn { display:flex; }
body.touch.mobile-menu-open #tabBar::after {
  content:''; position:absolute; bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 6px);
  right:calc(8px + var(--sa-r,0px)); width:280px; height:134px;
  border:1px solid #9c864c; border-radius:8px; background:#101c19fa;
  box-shadow:0 8px 28px #000b; z-index:0; pointer-events:none;
}
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='loja'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='cartas'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='reinos'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='governo'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='apoiar'] {
  display:flex; position:absolute; width:84px; height:54px; min-height:54px; z-index:1;
  bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 76px); right:calc(196px + var(--sa-r,0px));
}
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='cartas'] { right:calc(104px + var(--sa-r,0px)); }
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='reinos'] { right:calc(12px + var(--sa-r,0px)); }
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='governo'] { bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 14px); }
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='apoiar'] { bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 14px); right:calc(104px + var(--sa-r,0px)); }
body.touch.touch #autoBtns .auto-btn, body.touch.touch #atkBtn, body.touch.touch .spell-btn, body.touch.touch #potBtn {
  box-shadow:0 3px 9px #0006,inset 0 1px 1px #e6d9a220;
}
body.touch.touch #autoBtns .auto-btn { border-radius:7px; background:#101b17d9; border-width:1px; }
body.touch.touch .spell-btn { border-width:2px; background:#17221ee8; }
body.touch.touch .spell-btn.ready { border-color:#b9cf87; box-shadow:0 0 0 1px #09120c,0 3px 9px #0006; }
body.touch.touch #stick { box-shadow:inset 0 0 12px #0005; background:#101b174d; border-color:#c5d4ac55; }
body.touch.touch #toast { bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 132px); max-width:min(310px,70%); font-size:11px; }
/* Character sheet uses bounded, independent scroll columns, preserving every item. */
body #bagBox.mu-win { width:min(960px,calc(var(--lw,100vw) - 24px)); }
body #bagBox .bag-left { flex:0 0 340px; width:340px; }
body #bagBox .character-preview { margin:0 0 10px; }
body #bagBox .character-preview-stage { height:230px; }
body #bagBox .character-preview-head { font-size:12px; }
body #bagBox .character-preview-status { font-size:10px; line-height:1.4; }
body.touch.touch #bagBox.mu-win, body.compact #bagBox.mu-win {
  width:min(960px,calc(var(--lw,100vw) - 20px)); height:calc(var(--lh,100vh) - 20px);
  max-height:calc(var(--lh,100vh) - 20px); box-sizing:border-box;
  display:flex; flex-direction:column; overflow:hidden; padding:0 10px 10px;
}
body.touch.touch #bagBox .mu-titlebar, body.compact #bagBox .mu-titlebar {
  position:relative; flex:0 0 42px; min-height:42px; box-sizing:border-box;
  margin:0 -10px 8px; padding:10px 48px 8px 12px; font-size:15px; letter-spacing:1px;
}
body.touch.touch #bagBox .mu-x, body.compact #bagBox .mu-x { width:44px; height:42px; top:0; right:0; transform:none; font:20px system-ui,sans-serif; }
body.touch.touch #bagBox .bag-layout, body.compact #bagBox .bag-layout {
  flex:1 1 auto; min-height:0; max-height:none; display:grid;
  grid-template-columns:minmax(250px,.95fr) minmax(266px,1fr); gap:12px; align-items:stretch;
}
body.touch.touch #bagBox .bag-left, body.compact #bagBox .bag-left {
  width:auto; min-width:0; flex-basis:auto; padding:0 3px 8px 0;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
body.touch.touch #bagBox .bag-right, body.compact #bagBox .bag-right {
  min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:8px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
body.touch.touch #bagBox .mu-inv, body.compact #bagBox .mu-inv { --cell:30px; flex-shrink:0; }
body.touch.touch #bagBox .paperdoll, body.compact #bagBox .paperdoll {
  grid-template-columns:repeat(3,64px); grid-template-rows:repeat(4,36px); gap:4px; padding:5px;
}
body.touch.touch #bagBox .character-preview-stage, body.compact #bagBox .character-preview-stage { height:150px; }
body.touch.touch #bagBox .character-preview-controls button, body.compact #bagBox .character-preview-controls button { min-width:40px; min-height:34px; }
body.touch.touch #bagBox .db-section, body.compact #bagBox .db-section { font:600 10px/1.4 system-ui,sans-serif; letter-spacing:1px; }
body.touch.touch #bagBox #statLine, body.compact #bagBox #statLine { font-size:11px; line-height:1.5; }
body.touch.touch #bagBox .attr-row, body.compact #bagBox .attr-row { font-size:11px; min-height:30px; }
body.touch.touch #bagBox .attr-plus, body.compact #bagBox .attr-plus { width:44px; height:44px; font-size:16px; }
body.touch.touch #bagBox .db-close, body.compact #bagBox .db-close { display:none; }
body.touch.touch #bagBox #setBonus, body.compact #bagBox #setBonus { font-size:10px; padding:5px; margin:6px 0; }
/* Tablet landscape keeps touch targets generous without enlarging the HUD. */
body.touch:not(.phone) { --mobile-nav:58px; }
body.touch:not(.phone) #tabBar .tab-b { min-height:48px; }
body.touch:not(.phone) #tabBar .tab-b .tb-tx { font-size:10px; }
@media (prefers-reduced-motion:reduce) {
  body.touch.touch .tab-b, body.touch.touch .spell-btn, body.touch.touch #atkBtn { transition:none; }
  body.touch.touch #guide.gd-pop { animation:none; }
}
/* The live paperdoll sits beside slots, so equipping never hides the hero. */
body #bagBox .bag-left {
  display:grid; grid-template-columns:minmax(160px,1fr) minmax(236px,1.25fr);
  align-content:start; gap:7px 12px; flex-basis:500px; width:500px;
}
body #bagBox #secEquip { grid-column:2; grid-row:1; margin:0; }
body #bagBox #bagPreview { grid-column:1; grid-row:1 / span 4; }
body #bagBox #equipSlots { grid-column:2; grid-row:2; margin:0; }
body #bagBox #setBonus { grid-column:2; grid-row:3; }
body #bagBox #statLine { grid-column:2; grid-row:4; margin:0; }
body #bagBox .character-preview {
  align-self:start; padding:9px 6px; margin:0; min-width:0;
  background:radial-gradient(ellipse at 50% 44%,#54624a35,transparent 70%),#0c1513;
  border:1px solid #8e794b66; border-radius:6px; text-align:center;
}
body #bagBox .character-preview-stage { height:230px !important; }
body #bagBox .character-preview-head { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; color:#ead5a1; }
body #bagBox .character-preview-controls { display:flex; gap:4px; align-items:center; justify-content:center; margin:2px 0 8px; }
body #bagBox .character-preview-controls span { font-size:9px; color:#bfb99f; }
body #bagBox .character-preview-controls button { min-width:34px; min-height:32px; border:1px solid #8e794b88; background:#253229; border-radius:5px; color:#f0dda5; font-size:19px; cursor:pointer; }
body #bagBox .character-preview-status { color:#b7caa7; }
body.touch.touch #bagBox .bag-left, body.compact #bagBox .bag-left {
  display:grid; grid-template-columns:minmax(76px,1fr) minmax(166px,1.8fr);
  gap:5px 8px; width:auto; flex-basis:auto;
}
body.touch.touch #bagBox .paperdoll, body.compact #bagBox .paperdoll {
  grid-template-columns:repeat(3,48px); grid-template-rows:repeat(4,32px); gap:3px; padding:5px;
}
body.touch.touch #bagBox .character-preview, body.compact #bagBox .character-preview { padding:7px 3px; }
body.touch.touch #bagBox .character-preview-stage, body.compact #bagBox .character-preview-stage { height:170px !important; }
body.touch.touch #bagBox .character-preview-head, body.compact #bagBox .character-preview-head { font-size:10px; }
body.touch.touch #bagBox .character-preview-controls, body.compact #bagBox .character-preview-controls { flex-wrap:wrap; gap:3px; }
body.touch.touch #bagBox .character-preview-controls span, body.compact #bagBox .character-preview-controls span { width:100%; order:3; }
body.touch.touch #bagBox .character-preview-controls button, body.compact #bagBox .character-preview-controls button { min-width:44px; min-height:44px; }
body.touch.touch #bagBox .character-preview-status, body.compact #bagBox .character-preview-status { font-size:9px; }

/* v54 · Play first. Details are opened deliberately, rather than pinned over combat. */
#mobileInfoBtn, #bagViews, #bagItemDetail, .inv-name { display:none; }
#mobileInfoPanel { display:none; }
body.touch.touch { --mobile-nav:54px; }
body.touch.touch #stats {
  width:184px; padding:6px 8px; gap:7px; border-color:#526258;
  background:#101a17e8; box-shadow:0 2px 8px #0004;
}
body.touch.touch #stats #heroTitle { font:600 12px/1.2 system-ui,sans-serif; margin-bottom:4px; }
body.touch.touch #stats #avatarRing { width:30px; height:30px; border-width:1px; box-shadow:none; }
body.touch.touch #stats .bar { height:14px; margin:3px 0; border-radius:3px; }
body.touch.touch #stats .bar small { font:700 12px/14px system-ui,sans-serif; }
body.touch.touch #stats .bar:has(#xpFill) { height:3px; margin-top:4px; opacity:.85; }
body.touch.touch #stats .bar:has(#xpFill) small { display:none; }
body.touch.touch #lvlRow { font:500 12px/1.25 system-ui,sans-serif; color:#c4cfc6; margin-top:3px; }
body.touch.touch #atkTxt, body.touch.touch #avatarLvl { display:none; }
body.touch.touch #mmapWrap { width:96px; padding:3px; border-color:#526258; background:#101a17d9; box-shadow:none; }
body.touch.touch #mmap { width:88px; height:48px; }
body.touch.touch #mmapHead { display:none; }
body.touch.touch #mobileInfoBtn {
  display:flex; align-items:center; justify-content:center; gap:5px;
  position:absolute; right:calc(8px + var(--sa-r,0px)); top:calc(64px + var(--sa-t,0px));
  width:96px; min-height:44px; padding:6px; border:1px solid #526258; border-radius:6px;
  background:#101a17ed; color:#e4ece6; font:600 12px/1.2 system-ui,sans-serif; pointer-events:auto;
}
body.touch.touch #mobileInfoBtn[aria-expanded='true'] { background:#2a4035; border-color:#a5c5ae; }
body.touch.touch #chatOpen { top:calc(116px + var(--sa-t,0px)); right:calc(8px + var(--sa-r,0px)); width:44px; height:44px; font-size:18px; }
body.touch.touch:not(.mobile-info-open) #warHud,
body.touch.touch:not(.mobile-info-open) #questHud,
body.touch.touch:not(.mobile-info-open) #topright,
body.touch.touch:not(.mobile-info-open) #kNotice,
body.touch.touch:not(.mobile-info-open) #guide,
body.touch.touch:not(.mobile-info-open) #autoAtkBtn,
body.touch.touch:not(.mobile-info-open) #autoColBtn,
body.touch.touch:not(.mobile-info-open) #autoCraftBtn { display:none !important; }
body.touch.touch #autoBtns { gap:6px; }
body.touch.touch #autoBtns { left:calc(136px + var(--sa-l,0px)) !important; top:auto !important; bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 14px) !important; }
body.touch:not(.phone) #autoBtns { left:calc(184px + var(--sa-l,0px)) !important; }
body.touch.touch #autoBtns .auto-btn { min-width:44px; min-height:44px; border-color:#6d7b6d; background:#111b17dd; }
body.touch.touch #autoBtns .auto-btn span { font:600 10px/1 system-ui,sans-serif; }
body.touch.mobile-info-open #hud { z-index:21; }
body.touch.mobile-info-open #touch { visibility:hidden; }
body.touch.touch #mobileInfoPanel {
  position:absolute; top:calc(8px + var(--sa-t,0px)); right:calc(112px + var(--sa-r,0px));
  width:min(360px,calc(var(--lw,100vw) - 316px)); max-height:calc(var(--lh,100vh) - var(--mobile-nav) - 24px - var(--sa-t,0px));
  padding:10px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain;
  background:#14231bf7; border:1px solid #71836d; border-radius:8px; box-shadow:0 8px 24px #0008;
  color:#d9e6d9; pointer-events:auto; scrollbar-width:thin; scrollbar-color:#738a71 #18291e;
}
body.touch.mobile-info-open #mobileInfoPanel { display:flex; flex-direction:column; gap:8px; }
body.touch.touch #mobileInfoPanel > header, body.touch.touch #mobileInfoPanel .mobile-info-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:40px; color:#ecf3e9; font:700 14px/1.2 system-ui,sans-serif;
}
body.touch.touch #mobileInfoClose { min-width:44px; min-height:44px; margin:-8px -6px -4px 0; color:#e3ece0; background:transparent; border:0; font:22px/1 system-ui,sans-serif; }
body.touch.touch #mobileInfoPanel #warHud,
body.touch.touch #mobileInfoPanel #questHud,
body.touch.touch #mobileInfoPanel #topright,
body.touch.touch #mobileInfoPanel #kNotice,
body.touch.touch #mobileInfoPanel #guide {
  position:static !important; inset:auto !important; transform:none !important;
  width:100% !important; max-width:none !important; padding:8px !important; margin:0 !important;
  border:1px solid #3b523d; border-radius:5px; box-shadow:none; background:#1b2e21;
  font:500 12px/1.5 system-ui,sans-serif;
}
body.touch.touch #mobileInfoPanel #topright { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 !important; border:0; background:none; }
body.touch.touch #mobileInfoPanel .chip { min-height:32px; padding:5px 8px; font-size:12px; border:1px solid #425d46; background:#1d3324; }
body.touch.touch #mobileInfoPanel .chip b, body.touch.touch #mobileInfoPanel .res-badge { font-size:12px; }
body.touch.touch #mobileInfoPanel #muteBtn { min-width:44px; min-height:44px; margin-left:auto; }
body.touch.touch #mobileInfoPanel #kNotice { cursor:pointer; }
body.touch.touch #mobileInfoPanel #kNotice .kn-txt b { font:600 12px/1.4 system-ui,sans-serif; white-space:normal; }
body.touch.touch #mobileInfoPanel #kNotice .kn-x { display:none; }
body.touch.touch #mobileInfoPanel #guide .gd-head { font:600 11px/1.3 system-ui,sans-serif; letter-spacing:0; }
body.touch.touch #mobileInfoPanel #guide .gd-title { font:600 13px/1.3 system-ui,sans-serif; margin-top:4px; }
body.touch.touch #mobileInfoPanel #guide .gd-text { display:block; max-height:none; font:400 12px/1.5 system-ui,sans-serif; color:#c8d8c8; }
body.touch.touch #mobileInfoPanel #guide #gdSkip { display:none; }
body.touch.touch #mobileAutomation { display:flex; align-items:stretch; gap:6px; }
body.touch.touch #mobileAutomation .auto-btn {
  display:flex !important; flex:1; width:auto; min-width:44px; min-height:54px; height:auto; gap:5px;
  flex-direction:column; align-items:center; justify-content:center; padding:7px;
  color:#d9e6d9; font-size:20px; border:1px solid #4d6550; border-radius:5px; background:#203928;
}
body.touch.touch #mobileAutomation .auto-btn span { font:600 11px/1.2 system-ui,sans-serif; }
body.touch.touch #mobileAutomation .auto-btn.on { border-color:#aacd9e; background:#355236; }
body.touch.touch #tabBar .tab-b[data-tab='heroi'] { display:none; }
body.touch.touch #tabBar { justify-content:space-evenly; background:#0f1916ed; border-color:#42574a; }
body.touch.touch #tabBar .tab-b { max-width:180px; min-height:46px; padding:4px 8px; flex-direction:row; gap:8px; }
body.touch.touch #tabBar .tab-b .tb-tx { font:600 12px/1.2 system-ui,sans-serif; }
body.touch.touch #tabBar .tab-b .tb-ic { width:22px; height:22px; }
body.touch.touch #tabBar .tab-b .tab-badge { top:1px; right:8px; min-width:16px; height:16px; font:700 10px/16px system-ui,sans-serif; }
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='loja'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='cartas'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='reinos'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='governo'],
body.touch.mobile-menu-open #tabBar .tab-b[data-tab='apoiar'],
body.touch.mobile-menu-open #tabBar #mobileGroupBtn { flex-direction:column; gap:3px; padding:4px; }
body.touch.touch #attribution { opacity:.4; font-size:7px; bottom:calc(var(--mobile-nav) + var(--sa-b,0px) + 1px); }

/* Touch character sheet: one task at a time, with a persistent item action. */
body.touch.touch #bagBox.mu-win {
  width:calc(var(--lw,100vw) - 16px); height:calc(var(--lh,100vh) - 16px);
  max-height:calc(var(--lh,100vh) - 16px); padding:0 12px 8px;
  border:1px solid #67796a; border-radius:8px; background:#14201b;
  box-shadow:0 10px 38px #0009;
}
body.touch.touch #bagBox .mu-titlebar {
  margin:0 -12px; padding:10px 52px 10px 14px; min-height:42px; flex-basis:42px;
  font:700 16px/1.3 system-ui,sans-serif; letter-spacing:.4px; border-color:#536456;
  color:#e6eee7; background:#18271f;
}
body.touch.touch #bagBox .mu-x { min-width:44px; height:42px; border:0; border-left:1px solid #536456; border-radius:0; color:#e6eee7; background:transparent; }
body.touch.touch #bagViews {
  display:flex; gap:4px; flex:0 0 48px; min-height:48px; padding:2px 0; margin:4px 0 6px;
  border-bottom:1px solid #42564a;
}
body.touch.touch #bagViews button {
  flex:1; min-width:0; min-height:44px; border:0; border-bottom:3px solid transparent;
  border-radius:4px 4px 0 0; background:transparent; color:#aebeaf; font:600 13px/1.2 system-ui,sans-serif;
}
body.touch.touch #bagViews button[aria-selected='true'],
body.touch.touch #bagViews button.active { color:#edf5ed; background:#2a3c30; border-bottom-color:#a6c799; }
body.touch.touch #bagBox .bag-layout { display:block; flex:1 1 auto; min-height:0; max-height:none; overflow:hidden; }
body.touch.touch #bagBox .bag-left, body.touch.touch #bagBox .bag-right {
  width:100%; height:100%; min-height:0; max-height:none; padding:0 4px 8px 0;
  overflow:auto; overscroll-behavior:contain; scrollbar-color:#6a826c #15231a;
}
body.touch.touch #bagBox .bag-left {
  display:grid; grid-template-columns:minmax(150px,.85fr) minmax(260px,1.6fr);
  grid-template-rows:auto minmax(132px,1fr) auto; gap:4px 16px; align-content:start; align-items:start;
}
body.touch.touch #bagBox #bagPreview { grid-column:1; grid-row:1 / 4; padding:6px 8px; background:#101b16; border:1px solid #344a3a; border-radius:6px; }
body.touch.touch #bagBox #secEquip { grid-column:2; grid-row:1; font:600 12px/1.2 system-ui,sans-serif; color:#becebf; letter-spacing:.5px; }
body.touch.touch #bagBox #equipSlots { grid-column:2; grid-row:2; width:100%; }
body.touch.touch #bagBox #setBonus { grid-column:2; grid-row:3; margin:4px 0 0; padding:5px 8px; font:500 12px/1.35 system-ui,sans-serif; background:#1c2c21; border-color:#405340; color:#bdcbbd; }
body.touch.touch #bagBox .paperdoll {
  grid-template-columns:repeat(3,minmax(58px,80px)); grid-template-rows:repeat(4,34px);
  gap:4px; padding:5px; background:#101b16; border-color:#344a3a; border-radius:6px;
}
body.touch.touch #bagBox .paperdoll .eqcell { border-width:1px; border-radius:4px; background:#203027; box-shadow:none; }
body.touch.touch #bagBox .paperdoll .eqcell .eqlabel,
body.touch.touch #bagBox .paperdoll .eqcell.filled .eqlabel { display:block; bottom:2px; color:#c1cec2; font:500 10px/1 system-ui,sans-serif; letter-spacing:0; z-index:2; }
body.touch.touch #bagBox .paperdoll .eqcell .eqic { padding-bottom:12px; }
body.touch.touch #bagBox .paperdoll .eqcell .mu-ic { max-height:calc(100% - 4px); }
body.touch.touch #bagBox .paperdoll .eqcell.empty .eqic { display:none; }
body.touch.touch #bagBox .character-preview-head { font:600 12px/1.2 system-ui,sans-serif; color:#e6eee7; }
body.touch.touch #bagBox .character-preview-stage { height:140px !important; }
body.touch.touch #bagBox .character-preview-controls { flex-wrap:nowrap; margin:0; gap:8px; }
body.touch.touch #bagBox .character-preview-controls span { display:none; }
body.touch.touch #bagBox .character-preview-controls button { min-width:44px; min-height:44px; background:#263c2e; border-color:#4b6651; }
body.touch.touch #bagBox .character-preview-status { margin-top:4px; font:500 11px/1.25 system-ui,sans-serif; color:#a9bdaa; }
body.touch.touch #bagBox #statLine { display:none; }
body.touch.touch #bagBox .bag-right { display:none; }
body.touch.touch #bagBox[data-view='items'] .bag-left { display:none; }
body.touch.touch #bagBox[data-view='items'] .bag-right { display:flex; flex-direction:column; align-items:stretch; }
body.touch.touch #bagBox[data-view='items'] #secInv { display:none; }
body.touch.touch #bagBox .mu-inv {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:90px;
  width:100%; max-width:none; gap:7px; padding:2px; border:0; background:none;
}
body.touch.touch #bagBox .mu-inv .inv-cell {
  grid-column:auto !important; grid-row:auto !important; width:auto; height:auto; min-width:0;
  aspect-ratio:auto; border:1px solid #526450; border-radius:5px; background:#1c2b22; box-shadow:none;
}
body.touch.touch #bagBox .mu-inv .inv-cell.empty { display:none; }
body.touch.touch #bagBox .mu-inv .inv-cell .ic { position:absolute; inset:4px 8px 26px; width:auto; height:auto; display:flex; align-items:center; justify-content:center; }
body.touch.touch #bagBox .mu-inv .inv-cell .mu-ic { max-height:54px; max-width:64px; }
body.touch.touch #bagBox .mu-inv .inv-cell .inv-name { display:block; position:absolute; left:5px; right:5px; bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#d9e5d9; font:500 12px/1.25 system-ui,sans-serif; }
body.touch.touch #bagBox .mu-inv .inv-cell .pw { right:5px; bottom:24px; font:700 12px/1.2 system-ui,sans-serif; }
body.touch.touch #bagBox .mu-inv .inv-cell .plusbadge { top:4px; left:5px; font-size:11px; }
body.touch.touch #bagBox .mu-inv .inv-cell.equipped { border-color:#a5c799; background:#293b2b; box-shadow:inset 0 0 0 1px #a5c799; }
body.touch.touch #bagBox .mu-inv .inv-cell.equipped::after { content:'Usando'; top:4px; right:5px; color:#c9e8bb; font:600 10px/1 system-ui,sans-serif; }
body.touch.touch #bagBox .mu-inv .inv-cell.jewel { animation:none; }
body.touch.touch #bagBox .bag-gold { padding:8px 2px 2px; font:500 12px/1.4 system-ui,sans-serif; }
body.touch.touch #bagBox[data-view='stats'] .bag-left { display:block; }
body.touch.touch #bagBox[data-view='stats'] .bag-left > :not(#statLine) { display:none; }
body.touch.touch #bagBox[data-view='stats'] #statLine { display:block; width:min(520px,100%); margin:0 auto; padding:6px; font:500 13px/1.45 system-ui,sans-serif; }
body.touch.touch #bagBox[data-view='stats'] .mu-statgrid { gap:10px 18px; margin:0 0 10px; padding:10px; border:1px solid #425640; border-radius:5px; background:#1c2d21; }
body.touch.touch #bagBox[data-view='stats'] .mu-who { display:block; margin-bottom:8px; font:600 13px/1.4 system-ui,sans-serif; }
body.touch.touch #bagBox[data-view='stats'] .attr-row { min-height:46px; font-size:13px; border-bottom:1px solid #324633; }
body.touch.touch #bagBox[data-view='stats'] .attr-plus { width:44px; height:44px; background:#344c36; color:#e0f1dc; border-color:#698269; }
body.touch.touch #bagItemDetail {
  display:flex; align-items:center; gap:12px; flex:0 0 auto; min-height:50px;
  padding:7px 2px 0; margin-top:5px; border-top:1px solid #435b46; color:#d8e4d8;
}
body.touch.touch #bagItemDetail[hidden], body.touch.touch #bagItemDetail.hidden { display:none; }
body.touch.touch #bagBox[data-view='stats'] #bagItemDetail { display:none; }
body.touch.touch #bagItemDetail .bag-item-copy { min-width:0; flex:1; display:flex; flex-wrap:wrap; gap:2px 10px; }
body.touch.touch #bagItemDetail b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:600 13px/1.2 system-ui,sans-serif; }
body.touch.touch #bagItemDetail span { font:500 12px/1.2 system-ui,sans-serif; color:#c6d8bf; }
body.touch.touch #bagItemDetail small { flex-basis:100%; font:400 11px/1.2 system-ui,sans-serif; color:#9eb2a1; }
body.touch.touch #bagItemDetail button { min-width:104px; min-height:44px; border:1px solid #a6c799; border-radius:5px; background:#355236; color:#edf5e9; font:700 13px/1 system-ui,sans-serif; }
@media (max-height:380px) {
  body.touch.touch #bagBox .character-preview-stage { height:114px !important; }
  body.touch.touch #bagBox .character-preview-status { display:none; }
  body.touch.touch #bagBox .paperdoll { grid-template-rows:repeat(4,29px); }
}