/* Kartaria • Royal Foundry UI. Loaded after the original game stylesheet.
   Layout and gameplay hooks remain owned by index.html. */
:root {
  --royal-ink:#0c1011;
  --royal-panel:#171d1d;
  --royal-gold:#ba9651;
  --royal-light:#f1dca4;
  --royal-text:#e5dfcc;
  --royal-muted:#b9b29d;
  --mu-gold:#ba9651;
  --mu-gold-hi:#f1dca4;
}

/* Quiet iron and aged brass, with enough contrast to read over the world. */
body .diablo-box,
body .bag-box.panel,
body .cards-box {
  color:var(--royal-text);
  background:
    radial-gradient(ellipse at 50% 0,rgba(144,111,50,.15),transparent 65%),
    linear-gradient(135deg,#202626,#121717 65%,#0d1111);
  border:1px solid #9a7a41;
  border-radius:7px;
  box-shadow:0 0 0 2px #090b0b,0 0 0 3px #49402c,
    inset 0 0 0 1px rgba(238,215,159,.08),0 22px 70px #000b;
  scrollbar-width:thin;
  scrollbar-color:#8b7348 #111616;
}
body .diablo-box::before { border-color:#a08043; opacity:.25; }
body .db-title,
body .bag-box.panel .bag-head h2,
body .cards-head h2 {
  color:var(--royal-light);
  text-shadow:0 2px 2px #000;
  font-family:'Cinzel',Georgia,serif;
  letter-spacing:1.6px;
}
body .mu-titlebar,
body .bag-box.panel .bag-head,
body .cards-head {
  background:linear-gradient(180deg,#30342c,#1a211e);
  border-bottom:1px solid #8a713e;
  box-shadow:inset 0 1px 0 #d8be7b24,0 3px 12px #0005;
}
body .db-section,
body .shop-grp,
body .up-lbl { color:#c6b487; letter-spacing:1.8px; }
body .db-stats,
body .reino-sub,
body .cards-hint { color:var(--royal-text); }
body .tooltip { border-color:#ae8b47; background:#0d1313f5; color:#e5dfcc; border-radius:5px; }
body .tooltip .tt-dim { color:#b8b4a7; }

/* More distinct surfaces make objects and selected equipment easy to scan. */
body .mu-inv,
body #shopBox .shop-list.shop-cells,
body .paperdoll {
  border-color:#595344;
  background-color:#0b1010;
  box-shadow:inset 0 2px 16px #0009;
  border-radius:4px;
}
body .eqcell,
body .mu-inv .inv-cell:not(.empty),
body .shop-cell .sc-box {
  background:radial-gradient(ellipse at 50% 30%,#30352e,#101716 80%);
  border-color:var(--rc,#736344);
  box-shadow:inset 0 1px 0 #e2cf9a12,inset 0 -4px 12px #0005;
}
body .mu-inv .inv-cell.empty { border-color:#303a35; background:#111918; box-shadow:inset 0 2px 4px #0008; }
body .paperdoll .eqcell .eqlabel { color:#b9b29d; }
body .paperdoll .eqcell.empty .eqic { opacity:.35; }
body .mu-inv .inv-cell.equipped { border-color:#efcf7c; box-shadow:inset 0 0 0 1px #9b7c3f,0 0 8px #d9ac3b25; }
body .mu-inv .inv-cell:not(.empty):hover,
body .paperdoll .eqcell:hover { filter:brightness(1.18); border-color:#ffe2a1; }
body .set-bonus,
body .bag-gold,
body .up-card,
body .shop-row,
body #shopSel.show {
  color:var(--royal-text);
  background:linear-gradient(120deg,#242b25,#131c19);
  border:1px solid #534f3b;
  border-radius:4px;
}
body .shop-row { gap:12px; }
body .shop-row .si { line-height:1.5; }
body .shop-row .si small { color:#bcbba8; opacity:1; }
body .up-card:last-child { border-color:#b19452; }
body .up-row { color:#d7d3bd; border-bottom-color:#4b4a35; }
body .mu-statgrid span { border-bottom-color:#41483c; }
body .shop-buy,
body .db-close,
body .st-buy {
  border:1px solid #ba9651;
  border-radius:4px;
  color:#f7e8bb;
  background:linear-gradient(180deg,#625235,#342c20);
  box-shadow:inset 0 1px 0 #ffe5a82e,0 3px 5px #0005;
  text-shadow:0 1px 2px #000;
}
body .shop-buy:hover:not(:disabled),
body .db-close:hover,
body .st-buy:hover:not(:disabled) { background:linear-gradient(180deg,#7c6843,#493c28); filter:none; }
body .mu-x,
body .bag-box.panel .bag-head > button {
  width:30px;
  height:30px;
  color:#f3dfab;
  background:linear-gradient(180deg,#514534,#24251e);
  border-color:#b49353;
  border-radius:4px;
}
body .overlay button:focus-visible,
body #tabBar button:focus-visible,
body .auto-btn:focus-visible,
body .sk-slot:focus-visible,
body .kingdom-card:focus-visible {
  outline:2px solid #ffe3a1;
  outline-offset:3px;
}
body .overlay button:disabled { cursor:not-allowed; }

/* Bespoke vector sprite atlas: consistent icon weight on every platform.
   Existing text labels remain in the DOM and visible below each icon. */
#tabBar .tab-b .tb-ic {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex-shrink:0;
  font-size:0;
  filter:drop-shadow(0 2px 2px #0008);
}
#tabBar .tab-b .tb-ic::before {
  content:'';
  display:block;
  width:78%;
  height:78%;
  background-image:url('menu-atlas.svg');
  background-size:900% 100%;
  background-position:var(--menu-pos,0%) 50%;
  background-repeat:no-repeat;
}
#tabBar [data-tab='heroi'] { --menu-pos:0%; }
#tabBar [data-tab='inv'] { --menu-pos:12.5%; }
#tabBar [data-tab='loja'] { --menu-pos:25%; }
#tabBar [data-tab='skills'] { --menu-pos:37.5%; }
#tabBar [data-tab='missoes'] { --menu-pos:50%; }
#tabBar [data-tab='cartas'] { --menu-pos:62.5%; }
#tabBar [data-tab='reinos'] { --menu-pos:75%; }
#tabBar [data-tab='governo'] { --menu-pos:87.5%; }
#tabBar [data-tab='apoiar'] { --menu-pos:100%; }
#tabBar .tab-b .tb-tx { color:#eee0b6; font-weight:700; text-shadow:0 1px 3px #000,0 0 5px #000; }
#tabBar .tab-b.active .tb-tx { color:#ffe9a5; }
#tabBar .tab-b.tab-locked { opacity:.6; }
body #stats,
body #warHud,
body #questHud,
body #mmapWrap,
body #guide,
body #kNotice {
  background:linear-gradient(135deg,#20271ff5,#0d1613ee);
  border-color:#937c44;
  box-shadow:inset 0 1px 0 #e5d4a01a,0 4px 16px #0006;
}
body #stats h2 { color:#eee0aa; }
body #guide .gd-head { color:#c8b579; letter-spacing:1.5px; }
body #guide .gd-title { color:#ffe4a0; }
body #guide .gd-text { color:#e5e1cf; }
body .auto-btn { border-color:#8c794c; background:linear-gradient(145deg,#30382b,#111c17); box-shadow:inset 0 1px 0 #eee0a31a,0 3px 9px #0007; }
body .auto-btn span { color:#eee6ce; text-shadow:0 1px 2px #000; }
body .auto-btn.on { border-color:#cfde91; box-shadow:inset 0 0 12px #82b65b40,0 0 8px #a5d06040; }

/* Realm crests share the heraldry used in the world. */
body .kingdom-card { position:relative; border-color:#726342; border-radius:7px; background:#152019; }
body .kingdom-card::after {
  content:'';
  position:absolute;
  top:17px;
  right:17px;
  width:38px;
  height:45px;
  background:center/contain no-repeat url('crest-verde.svg');
  pointer-events:none;
  filter:drop-shadow(0 2px 3px #0009);
}
body .kingdom-card.kg-vermelho::after { background-image:url('crest-vermelho.svg'); }
body .kingdom-card .kg-art { border-radius:4px; }
body .kingdom-card.sel { outline:1px solid #f3d68d; outline-offset:3px; }
body .kingdom-card small { color:#e3dbc2; opacity:1; }
body #kdlg .kdlg-panel { border:1px solid #a38b52; background:linear-gradient(135deg,#263029f5,#111b17f5); border-radius:5px; }
body #kdlg .kdlg-title { color:#f1dca4; letter-spacing:1px; }
body #kdlg .kdlg-body { color:#eee9db; }
body #kdlg .kdlg-btn { color:#d8e9ae; }
body #kdlg .kdlg-btn:hover { color:#fff2ca; }

@media (min-width:1000px) {
  body:not(.compact) #tabBar .tab-b .tb-ic {
    width:44px;
    height:44px;
    border-radius:10px;
    border:1px solid #a98a4e;
    background:linear-gradient(145deg,#343a2d,#101914 80%);
    box-shadow:inset 0 1px 0 #ecd9a32b,inset 0 -3px 8px #0007,0 4px 10px #0008;
  }
  body:not(.compact) #tabBar .tab-b:hover .tb-ic,
  body:not(.compact) #tabBar .tab-b.active .tb-ic {
    border-color:#f4d797;
    background:linear-gradient(145deg,#574d2e,#202c1b);
    box-shadow:inset 0 1px 0 #f8e0aa4d,0 0 12px #dcb66440;
  }
  body:not(.compact) #tabBar .tab-b .tb-tx { font-size:8px; letter-spacing:.65px; }
  body:not(.compact) #hotFrame { border-color:#927645; background:linear-gradient(180deg,#3e4030,#161c16 55%,#10150f); }
  body:not(.compact) .sk-slot { border-color:#a48a4f; }
}
@media (min-width:1000px) and (max-width:1250px) {
  body:not(.compact) #tabBar .tab-b .tb-ic { width:38px; height:38px; }
}
body.compact #tabBar .tab-b .tb-ic { width:24px; height:24px; }
body.compact #tabBar .tab-b .tb-ic::before { width:100%; height:100%; }
body.compact .bag-box.panel .bag-head > button,
body.compact .mu-x { width:28px; height:28px; }
body.compact #bagBox .mu-titlebar { padding-right:44px; padding-left:12px; }
@media (prefers-reduced-motion:reduce) {
  body .tab-b,
  body .shop-buy,
  body .eqcell,
  body .inv-cell,
  body .kingdom-card { transition:none; }
  body .st-node.can .st-orb,
  body .inv-cell.jewel { animation:none; }
}

/* Product layout pass: information has a clear reading order and controls have
   readable names. Desktop positions are deliberately separate from touch. */
body .overlay .db-title { font-size:22px; line-height:1.35; }
body .overlay .db-section { font-size:11px; line-height:1.5; }
body .bag-box.panel .bag-head h2 { font-size:20px; line-height:1.3; }
body .bag-box.panel .bag-head { min-height:46px; display:flex; align-items:center; }
body .shop-grp { padding:8px 0 7px; font-size:11px; }
body .shop-cell .sc-price { font-size:12px; line-height:1.5; }
body .shop-buy { min-height:36px; }
body .up-desc { text-align:left; line-height:1.65; }
body .reino-sub { line-height:1.7; }
body .db-stats { line-height:1.75; }

#tabBar .tab-b .tb-tx { line-height:1.25; letter-spacing:.25px; }
#tabBar .tab-b.active { position:relative; }
#tabBar .tab-b.active::before {
  content:''; position:absolute; left:22%; right:22%; bottom:-4px;
  height:2px; background:#f6d48b; box-shadow:0 0 7px #e1b85980;
}

/* Replace mixed emoji artwork in the action rail with a matching icon family.
   Labels and all existing event targets remain untouched. */
body #autoBtns .auto-btn { font-size:0; }
body #autoBtns .auto-btn::before {
  content:''; display:block; width:24px; height:24px; flex:0 0 24px;
  background:center/contain no-repeat var(--action-icon);
}
body #targetBtn { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23efdaa4' stroke-width='1.8'%3E%3Ccircle cx='16' cy='16' r='10'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Cpath d='M16 1v8m0 14v8M1 16h8m14 0h8'/%3E%3C/svg%3E"); }
body #autoAtkBtn { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23efdaa4' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m5 3 5 1 15 17-4 4L4 10 5 3Zm22 0-5 1L7 21l4 4 17-15-1-7ZM4 21l7 7m-3-3-5 5m18-2 7-7m-3 4 5 5'/%3E%3C/svg%3E"); }
body #autoColBtn { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23efdaa4' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M5 5h7v11a4 4 0 0 0 8 0V5h7v11a11 11 0 0 1-22 0V5Zm0 7h7m8 0h7'/%3E%3Cpath d='m2 2 2 2m26-2-2 2M16 2v4'/%3E%3C/svg%3E"); }
body #autoCraftBtn { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23efdaa4' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m18 4 10 9-5 5-10-9 5-5ZM15 13 4 26l3 3 12-12M4 30h24M3 22h8m14-1h4'/%3E%3C/svg%3E"); }
body #autoBtns .auto-btn { position:relative; }
body #autoBtns .auto-btn:not(#targetBtn)::after {
  content:''; position:absolute; top:5px; right:5px; width:5px; height:5px;
  border-radius:50%; background:#666e61; box-shadow:0 0 0 1px #0a110b;
}
body #autoBtns .auto-btn.on::after { background:#b5ed89; box-shadow:0 0 6px #b5ed8970; }

@media (min-width:1000px) {
  body:not(.compact):not(.touch) #stats {
    top:12px; left:12px; width:286px; min-width:0; padding:10px 12px;
    border-radius:8px; gap:12px; box-sizing:border-box;
  }
  body:not(.compact):not(.touch) #statCol { min-width:0; }
  body:not(.compact):not(.touch) #heroTitle { max-width:204px; font-size:13px; letter-spacing:.5px; margin-bottom:6px; }
  body:not(.compact):not(.touch) #avatarRing { width:46px; height:46px; }
  body:not(.compact):not(.touch) #lvlRow { font-size:12px; gap:10px; }
  body:not(.compact):not(.touch) #skillRow { margin-top:6px; padding-top:6px; font-size:11px; border-top-color:#70603d70; }
  body:not(.compact):not(.touch) #warHud {
    top:118px; left:12px; width:286px; box-sizing:border-box;
    padding:9px 12px; border-radius:6px; font-size:12px; line-height:1.9;
  }
  body:not(.compact):not(.touch) #warHud .res-badge { padding:2px 7px; margin-top:4px; font-size:11px; }
  body:not(.compact):not(.touch) #questHud {
    top:208px; left:12px; width:286px; max-width:286px; box-sizing:border-box;
    border-radius:6px; padding:10px 12px; font-size:12px; line-height:1.7;
    font-weight:500; border-left:3px solid #c3a462;
  }
  body:not(.compact):not(.touch) #questHud b { color:#f0db9d; font-weight:750; }
  body:not(.compact):not(.touch) #partyWrap { top:370px; left:12px; width:260px; }

  body:not(.compact):not(.touch) #mmapWrap { right:12px; width:188px; padding:10px; box-sizing:border-box; border-radius:7px; }
  body:not(.compact):not(.touch) #mmapHead { margin-bottom:8px; gap:8px; }
  body:not(.compact):not(.touch) #mmapName { font-size:10px; letter-spacing:1px; }
  body:not(.compact):not(.touch) #mmapOnline { font-size:10px; white-space:nowrap; }
  body:not(.compact):not(.touch) #mmap { width:166px; height:112px; border-radius:4px; }
  body:not(.compact):not(.touch) #mmapQuestBtn,
  body:not(.compact):not(.touch) #mmapPartyBtn { min-height:28px; font-size:11px; border-radius:4px; letter-spacing:.2px; }
  body:not(.compact):not(.touch) #chatOpen { top:286px; right:12px; border-radius:7px; }
  body:not(.compact):not(.touch) #chatWrap { top:286px; right:12px; width:286px; border-radius:7px; }
  body:not(.compact):not(.touch) #guide {
    top:344px; right:12px; left:auto; bottom:auto; transform:none; width:286px;
    padding:12px 14px 13px; box-sizing:border-box; border-radius:6px;
    border-top:2px solid #d7b875;
  }
  body:not(.compact):not(.touch) #guide .gd-head { font-family:system-ui,sans-serif; font-size:10px; letter-spacing:.9px; }
  body:not(.compact):not(.touch) #guide .gd-title { font-size:17px; font-weight:750; line-height:1.3; margin:9px 0 6px; }
  body:not(.compact):not(.touch) #guide .gd-text { font-size:13px; line-height:1.6; }
  body:not(.compact):not(.touch) #guide #gdSkip { width:24px; height:24px; flex-shrink:0; border-radius:4px; }
  body:not(.compact):not(.touch) #guide .gd-bar { margin-top:12px; height:5px; }
  body.chat-open:not(.compact):not(.touch) #guide { top:12px; left:50%; right:auto; transform:translateX(-50%); }

  body:not(.compact):not(.touch) #autoBtns { left:12px; gap:6px; }
  body:not(.compact):not(.touch) #autoBtns .auto-btn {
    width:90px; height:48px; padding:0 8px; box-sizing:border-box;
    flex-direction:row; justify-content:flex-start; gap:8px; border-width:1px; border-radius:5px;
  }
  body:not(.compact):not(.touch) #autoBtns .auto-btn span { font-size:10px; letter-spacing:.25px; opacity:1; }
}

/* Wide screens: names are readable and every menu has its own full tile. */
@media (min-width:1360px) {
  body:not(.compact):not(.touch) #tabBar { gap:4px; padding-bottom:12px; }
  body:not(.compact):not(.touch) #tabBar .tab-b,
  body:not(.compact):not(.touch) #tabBar::before { flex-basis:64px; }
  body:not(.compact):not(.touch) #tabBar .tab-b { min-height:66px; gap:5px; border-radius:6px; }
  body:not(.compact):not(.touch) #tabBar .tab-b .tb-tx { font-size:10px; letter-spacing:0; white-space:nowrap; }
  body:not(.compact):not(.touch) #tabBar .tab-b .tb-ic { width:40px; height:40px; border-radius:6px; }
  body:not(.compact):not(.touch) #tabBar .tab-b:hover,
  body:not(.compact):not(.touch) #tabBar .tab-b.active { background:#252d20e8; box-shadow:inset 0 0 0 1px #bba05b55; }
}
@media (min-width:1500px) {
  body:not(.compact):not(.touch) #tabBar .tab-b,
  body:not(.compact):not(.touch) #tabBar::before { flex-basis:76px; }
  body:not(.compact):not(.touch) #tabBar .tab-b .tb-tx { font-size:11px; }
}
/* At laptop widths the previous central gap forced navigation off-screen.
   A separate lower menu row gives all nine controls a readable target. */
@media (min-width:1000px) and (max-width:1359px) {
  body:not(.compact):not(.touch) #tabBar { gap:4px; padding:5px 8px 7px; background:linear-gradient(0deg,#0a120ff5,#122019e8); border-top:1px solid #9b81414d; }
  body:not(.compact):not(.touch) #tabBar::before,
  body:not(.compact):not(.touch) #tabBar .tab-gap { display:none; }
  body:not(.compact):not(.touch) #tabBar .tab-b { flex:0 1 90px; min-height:50px; gap:3px; }
  body:not(.compact):not(.touch) #tabBar .tab-b .tb-ic { width:28px; height:28px; border:0; background:none; box-shadow:none; }
  body:not(.compact):not(.touch) #tabBar .tab-b .tb-tx { font-size:10px; letter-spacing:0; }
  body:not(.compact):not(.touch) #skillBar { bottom:93px; }
  body:not(.compact):not(.touch) #hotFrame { bottom:79px; }
  body:not(.compact):not(.touch) .orb { bottom:69px; }
  body:not(.compact):not(.touch) #xpStrip { bottom:65px; }
  body:not(.compact):not(.touch) #autoBtns { bottom:203px; }
  body:not(.compact):not(.touch) #hint { bottom:202px; }
}

/* Keep the original touch geometry; improve only text and title hierarchy. */
body.compact #tabBar .tab-b .tb-tx { font-size:9px; letter-spacing:0; }
body.touch.phone #tabBar .tab-b .tb-tx { font-size:8.5px; letter-spacing:0; }
body.compact .bag-box.panel .bag-head { min-height:32px; }
body.compact .bag-box.panel .bag-head h2 { font-size:16px; }
body.compact .overlay .db-title { font-size:16px; }
body.compact .overlay .db-section { font-size:10px; letter-spacing:1px; }
body.compact #autoBtns .auto-btn span { font-size:8px; }
body.touch.phone #autoBtns .auto-btn::before { width:20px; height:20px; flex-basis:20px; }