/* Extra RO systems UI (js/game/x*.js): extras menu, dock (quest tracker + navigation), royal toast, name-plate title,
   pet / mercenary plates, and the windows: pet, pet keeper, mercenary, bestiary, MVP hall, quest, achievements. */

/* ---------- extras menu button */
.mbtn.xmore .ring { padding: 0; background: none; box-shadow: none; }
.mbtn.xmore .ring .in { background: none; box-shadow: none; }
.xmore-ic { display: block; width: 100%; height: 100%; border-radius: 50%; background: center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.mbtn.xmore:hover .xmore-ic { filter: brightness(1.15) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.mbtn.xmore.on .xmore-ic { filter: brightness(1.2) drop-shadow(0 0 8px rgba(178, 107, 255, 0.95)); }

/* ---------- hub window */
.win.xhub-win { width: 460px; height: auto; bottom: auto; }
.xhub { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px !important; }
.xhub-b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 10px; color: #fff; font: inherit;
  background: linear-gradient(180deg, rgba(58, 40, 120, 0.55), rgba(16, 12, 44, 0.75)); border: 1px solid rgba(224, 178, 82, 0.45); cursor: pointer; }
.xhub-b:hover { border-color: var(--gold-hi); filter: brightness(1.15); }
.xhub-b .xhub-ic { width: 42px; height: 42px; }
.xhub-b b { font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center; }
.xhub-b small { font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.xhub-b.off { opacity: .45; }

/* ---------- dock: navigation + quest tracker */
.xdock { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 236px; pointer-events: auto; }
.xdock.left { align-items: flex-start; width: 210px; }
.xnav-b { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px 0 9px; border-radius: 14px; font: inherit; font-size: 13px; font-weight: 600; color: #fff4d6; cursor: pointer;
  background: linear-gradient(180deg, #3a2a7a, #1a1240); border: 1px solid var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.xnav-b svg { width: 14px; height: 14px; fill: var(--gold-hi); }
.xnav-b.on, .xnav-b:hover { filter: brightness(1.2); }
.xnav-list { display: flex; flex-direction: column; gap: 3px; width: 100%; max-height: 46vh; overflow-y: auto; padding: 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 20, 70, 0.95), rgba(12, 9, 34, 0.96)); border: 1px solid rgba(224, 178, 82, 0.55); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.xnav-list button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding: 5px 8px; border-radius: 7px; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.xnav-list button:hover { border-color: var(--gold-dim); background: rgba(224, 178, 82, 0.12); }
.xnav-list b { font-size: 13px; font-weight: 600; }
.xnav-list small { font-size: 11px; color: var(--muted); }
.xnav-list.big { max-height: none; background: none; border: 0; box-shadow: none; padding: 0; }
.xq { width: 100%; padding: 7px 9px 8px; border-radius: 10px; color: #fff; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, rgba(36, 24, 80, 0.88), rgba(12, 9, 34, 0.9)); border: 1px solid rgba(224, 178, 82, 0.6); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.xq-h { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.xq-h b { flex: 1; font-size: 12.5px; color: var(--gold-hi); font-weight: 600; }
.xq-ic img { width: 22px; height: 22px; display: block; }
.xq-f { color: var(--gold-hi); font-size: 12px; }
.xq-s { margin-top: 4px; font-size: 14px; font-weight: 600; }
.xq-s em { font-style: normal; color: #8affb0; margin-left: 4px; }
.xq-d { font-size: 11.5px; color: #c8d0ec; line-height: 1.35; margin-top: 2px; }
.xq-a { display: flex; gap: 5px; margin-top: 6px; }
.xq-a button { height: 26px !important; min-height: 0 !important; padding: 0 9px !important; font-size: 12px !important; }
.xq.fold { padding-bottom: 7px; }

/* ---------- royal toast */
.xtoast { position: absolute; left: 50%; top: calc(var(--gap) + 74px); z-index: 60; display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: min(92vw, 440px);
  padding: 9px 16px 9px 10px; border-radius: 14px; pointer-events: auto; translate: -50% 0;
  background: radial-gradient(120% 140% at 0% 0%, rgba(120, 70, 200, 0.6), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(40, 26, 90, 0.97), rgba(14, 10, 38, 0.97));
  border: 1.5px solid #e0b252; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 227, 154, 0.25), 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 26px rgba(224, 178, 82, 0.35); }
.xtoast.hidden { display: none; }
.xtoast.show { animation: xtIn .38s cubic-bezier(.2, 1.4, .4, 1) both; }
.xtoast.hide { animation: xtOut .36s ease-in both; }
@keyframes xtIn { from { opacity: 0; transform: translateY(-18px) scale(.9); } }
@keyframes xtOut { to { opacity: 0; transform: translateY(-14px) scale(.96); } }
.xt-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 150, .35), rgba(0, 0, 0, 0) 70%); }
.xt-ic img { width: 44px; height: 44px; }
.xt-tx { display: flex; flex-direction: column; min-width: 0; }
.xt-tx small { font-size: 11px; color: var(--gold-hi); letter-spacing: .06em; }
.xt-tx b { font-size: 16px; color: #fff; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 0 #000; }
.xt-tx span { font-size: 12px; color: #c8d0ec; line-height: 1.3; }
.xtoast.mvp { border-color: #ff9a5a; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 130, 60, .45); }
.xtoast.pet { border-color: #ff9ac8; }

/* ---------- name plate title */
.np-title { font-size: 11px; font-weight: 600; color: #c8f0ff; letter-spacing: .02em; line-height: 1.25; }
.np-title.crown { color: #ffd860; text-shadow: var(--outline), 0 0 8px rgba(255, 200, 60, 0.8); }
.np-title.hidden { display: none; }

/* ---------- pet + mercenary world plates */
.xpet-plate, .xmerc-plate, .xpet-emo { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; translate: -50% 0; text-shadow: var(--outline); will-change: transform; }
.xpet-plate { font-size: 10.5px; color: #ffd6ea; font-weight: 500; }
.xmerc-plate { font-size: 10.5px; color: #bfe0ff; font-weight: 500; translate: -50% -100%; }
.xpet-emo { font-size: 13px; color: #fff; translate: -50% -100%; padding: 1px 7px; border-radius: 10px; background: rgba(20, 12, 48, 0.85); border: 1px solid rgba(255, 154, 200, 0.7); text-shadow: none; }
.xpet-emo.pop { animation: xEmo .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes xEmo { from { scale: .4; opacity: 0; } }

/* ---------- shared bits inside windows */
.xbar { position: relative; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(224, 178, 82, 0.4); overflow: hidden; flex: 1; }
.xbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #8ad0ff, #3a7ae0); }
.xbar.int i { background: linear-gradient(180deg, #ffb0d8, #e0508a); }
.xbar.hun i { background: linear-gradient(180deg, #ffe08a, #e09a2a); }
.xbar.hun.low i { background: linear-gradient(180deg, #ff9a7a, #d0402a); }
.xbar.hp i { background: linear-gradient(180deg, #8affa0, #2aa04a); }
.xbar.gold i, .xbar.done i { background: linear-gradient(180deg, #fff0a0, #d09a2a); }
.xbar span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; color: #fff; text-shadow: var(--outline); }
.xrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.xrow > span:first-child { width: 58px; flex: none; }
.xgood { color: #8affb0; }
.xdesc { color: #d8e0f8; font-size: 12.5px; }
.xsec { margin: 8px 0 4px; font-size: 13px; color: var(--gold-hi); font-weight: 600; }
.xdanger { color: #ffb0a0 !important; }
button.armed { color: #fff !important; filter: hue-rotate(-30deg) brightness(1.2); }
.ico.mini { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.itile.xmob img.ico { width: 92%; height: 92%; object-fit: contain; }

/* ---------- pet window */
.win.xpet-win { width: 470px; }
.xpet-body { flex-direction: column !important; overflow-y: auto; }
.xpet-top { display: flex; gap: 12px; align-items: flex-start; }
.xpet-por { width: 96px; height: 96px; flex: none; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(255, 154, 200, .25), rgba(10, 8, 30, .6)); border: 1px solid rgba(224, 178, 82, .5); }
.xpet-por img { max-width: 88px; max-height: 88px; image-rendering: pixelated; }
.xpet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xpet-name { display: flex; gap: 6px; }
.xpet-name input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--gold-dim); background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-size: 15px; font-weight: 600; }
.xpet-name button { height: 30px; }
.xpet-bonus { margin-top: 5px; font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 7px; background: rgba(0, 0, 0, .3); }
.xpet-bonus.on { color: #8affb0; background: rgba(40, 140, 80, .18); border: 1px solid rgba(138, 255, 176, .3); }
.xpet-acts { margin-top: 8px; flex-wrap: wrap; gap: 6px; }
.xpet-acts .btn-gold { flex: 1; }
.xpet-empty { padding: 18px 8px; text-align: center; }
.xpet-empty .btn-gold { margin-top: 10px; }
.xeggs { display: flex; flex-direction: column; gap: 5px; }
.xegg { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.xegg > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.xegg small { color: var(--muted); font-size: 11px; }
.xguide { padding: 4px 8px; color: #d8e0f8; font-size: 13.5px; line-height: 1.5; flex: 1; }
.xguide h4 { margin: 4px 0 6px; color: var(--gold-hi); } .xguide h4 small { color: var(--muted); font-weight: 400; font-size: 11px; }
.xguide ol { padding-left: 20px; margin: 0 0 8px; }

/* ---------- mercenary */
.win.xmerc-win { width: 640px; }
.win.xmerc-win.small-win { width: 400px; }
.xmerc-body { flex-direction: column !important; overflow-y: auto; }
.xmerc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xmerc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 8px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 40, 120, .45), rgba(12, 9, 34, .7)); border: 1px solid rgba(224, 178, 82, .45); }
.xmc-art img { width: 56px; height: 56px; }
.xmerc-card b { font-size: 15px; } .xmerc-card small { font-size: 11px; color: var(--muted); }
.xmc-st { font-size: 11.5px; color: #d8e0f8; line-height: 1.4; }
.xmc-sk { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #c8d0ec; width: 100%; }
.xmc-sk img { width: 20px; height: 20px; vertical-align: -6px; margin-right: 4px; }
.xmc-sk span { display: inline; }
.xmerc-card .btn-gold { margin-top: auto; width: 100%; }
.xmerc-cur { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); margin-bottom: 6px; }
.xmerc-cur img { width: 50px; height: 50px; }
.xmerc-cur > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.xmerc-cur small { color: var(--muted); }

/* ---------- bestiary */
.win.xbook-win { width: 700px; }
.xbook-body { position: relative; padding-bottom: 26px !important; }
.xbook-body.mobs { flex-direction: row !important; }
.xbook-grid { width: 300px; flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; align-content: start; padding-right: 4px; }
.xmob-c { position: relative; aspect-ratio: 1; padding: 0; border-radius: 8px; border: 1px solid rgba(224, 178, 82, .35); background: radial-gradient(circle at 50% 40%, #2a3a7a, #0c0a28); cursor: pointer; overflow: hidden; }
.xmob-c img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; }
.xmob-c span { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #fff; text-shadow: var(--outline); }
.xmob-c.unk img { filter: brightness(0) opacity(.55); }
.xmob-c.r-elite { border-color: #ffc24a; } .xmob-c.r-mvp { border-color: #ff7a4a; box-shadow: inset 0 0 8px rgba(255, 120, 60, .5); }
.xmob-c.on { outline: 2px solid var(--gold-hi); outline-offset: -1px; }
.xbook-detail { flex: 1; min-width: 0; padding: 2px 4px; color: #d8e0f8; font-size: 13px; }
.xmob-head { display: flex; gap: 10px; align-items: center; }
.xmob-head img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.xmob-head img.sil { filter: brightness(0) opacity(.5); }
.xmob-head b { font-size: 17px; color: #fff; } .xmob-head small { display: block; color: var(--muted); }
.xmob-head .sub { font-size: 12px; color: #c8d0ec; }
.xkill { margin: 8px 0 2px; font-size: 12.5px; padding: 5px 8px; border-radius: 7px; background: rgba(0, 0, 0, .3); }
.xkill b { color: var(--gold-hi); font-size: 15px; }
.xdrops { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
.xdrop { display: flex; align-items: center; gap: 5px; font-size: 11.5px; min-width: 0; }
.xdrop .itile { width: 34px; height: 34px; flex: none; }
.xdrop span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xdrop small { color: var(--muted); font-size: 10px; }
.xdrop.unk span { color: var(--muted); }
.xdrop .xqm { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-weight: 700; }
.xcard-line { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .xcard-line.has { color: var(--gold-hi); }
.xbook-sum { position: absolute; left: 12px; right: 12px; bottom: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
.xbook-body.cards, .xbook-body.goals { flex-direction: column !important; }
.xalbum { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; flex: 1; align-content: start; }
.xcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 6px 4px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.xcard img.ico { width: 44px; height: 44px; filter: grayscale(1) brightness(.45); }
.xcard.has { border-color: rgba(224, 178, 82, .6); background: linear-gradient(180deg, rgba(90, 60, 30, .35), rgba(0, 0, 0, .35)); }
.xcard.has img.ico { filter: none; }
.xcard b { font-size: 12px; } .xcard small { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.xgoals { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.xgoal-head { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: 13px; }
.xgoal-head h5 { margin: 0 0 3px; color: var(--gold-hi); font-size: 13px; }
.xrules { margin: 6px 0 0; padding-left: 18px; color: #c8d0ec; font-size: 12px; line-height: 1.45; }
.xgoal-r { display: flex; align-items: center; gap: 8px; padding: 3px 8px; }
.xgoal-r img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.xgoal-r > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.xgoal-r small { color: var(--muted); font-size: 10.5px; }
.xgoal-v { color: var(--gold-hi); font-weight: 600; }

/* ---------- MVP hall + ranking */
.win.xmvp-win { width: 560px; }
.xmvp-body { flex-direction: column !important; }
.xmvp-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.xmvp-head b { font-size: 16px; } .xmvp-head small { display: block; color: var(--muted); font-size: 12px; }
.xcrown { font-size: 34px; color: #555a70; line-height: 1; }
.xcrown.on { color: #ffd860; text-shadow: 0 0 12px rgba(255, 200, 60, .9); }
.xmvp-list { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.xmvp-r { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 9px; background: rgba(0, 0, 0, .25); border: 1px solid transparent; }
.xmvp-r.won { border-color: rgba(255, 200, 80, .4); }
.xmvp-r img, .xlog-r img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.xmvp-st { display: flex; flex-direction: column; align-items: flex-end; min-width: 84px; }
.xmvp-st b { font-size: 20px; color: var(--gold-hi); line-height: 1; } .xmvp-st small, .xmvp-st span { font-size: 11px; color: var(--muted); }
.xlog-r { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-bottom: 1px solid var(--line-dim); }
.xlog-r > div { flex: 1; display: flex; flex-direction: column; } .xlog-r small { color: var(--muted); font-size: 11px; } .xlog-r > span { color: var(--gold-hi); }
.xrank-seg { display: flex; gap: 6px; margin-bottom: 6px; }
.xrank-seg button { flex: 1; }
.xrank { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.xrank-r { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; font-size: 13px; }
.xrank-r:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.xrank-r .rk { text-align: center; font-weight: 700; color: var(--muted); }
.xrank-r small { color: var(--muted); font-size: 11px; }
.xrank-r .v { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.xrank-r.me { background: linear-gradient(90deg, rgba(120, 80, 220, .45), rgba(120, 80, 220, .1)) !important; border: 1px solid rgba(178, 107, 255, .7); }
.xrank-r.top1 b { color: #ffd860; } .xrank-r.top2 b { color: #e0e8ff; } .xrank-r.top3 b { color: #ffb070; }

/* ---------- quest window */
.win.xquest-win { width: 520px; }
.xquest-body { flex-direction: column !important; }
.xq-intro { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: 13px; color: #d8e0f8; }
.xq-steps { list-style: none; margin: 6px 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.xq-steps li { display: flex; gap: 10px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, .22); font-size: 13.5px; }
.xq-steps li > div { flex: 1; }
.xq-steps li small { color: var(--muted); font-size: 11px; }
.xq-steps li em { font-style: normal; color: #8affb0; }
.xq-steps .xq-d { margin-top: 1px; }
.xq-rw { font-size: 11.5px; color: var(--gold-hi); margin-top: 2px; }
.xq-n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--muted); }
.xq-steps li.ok .xq-n { background: #2aa04a; color: #fff; } .xq-steps li.ok { opacity: .7; }
.xq-steps li.now { border: 1px solid var(--gold); background: rgba(224, 178, 82, .12); } .xq-steps li.now .xq-n { background: var(--gold); color: #1a1004; }

/* ---------- achievements */
.win.xach-win { width: 560px; }
.xach-body { flex-direction: column !important; }
.xach-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.xach-head > div:first-child b { font-size: 20px; color: var(--gold-hi); } .xach-head > div:first-child small { display: block; font-size: 10.5px; color: var(--muted); }
.xach-cur { font-size: 12.5px; white-space: nowrap; } .xach-cur b.crown { color: #ffd860; }
.xach-list { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.xach-r { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 9px; background: rgba(0, 0, 0, .22); opacity: .62; }
.xach-r.got { opacity: 1; background: linear-gradient(90deg, rgba(224, 178, 82, .14), rgba(0, 0, 0, .2)); }
.xach-r.wear { border: 1px solid var(--gold); }
.xach-r .xach-ic { width: 40px; height: 40px; flex: none; }
.xach-r:not(.got) .xach-ic { filter: grayscale(1) brightness(.6); }
.xtitle-chip { align-self: flex-start; font-size: 11px; padding: 0 7px; border-radius: 8px; color: #c8f0ff; background: rgba(60, 120, 200, .25); border: 1px solid rgba(140, 200, 255, .35); }
.xtitle-chip.crown { color: #ffd860; background: rgba(200, 150, 40, .2); border-color: rgba(255, 216, 96, .5); }
.xach-ok { font-size: 11px; color: #8affb0; white-space: nowrap; } .xach-lock { opacity: .6; }
.xnotitle { justify-content: center; font: inherit; color: var(--muted); border: 1px dashed var(--line-dim); cursor: pointer; opacity: 1 !important; }
.win.xnav-win { width: 360px; }
.xnav-body { flex-direction: column !important; }

/* ---------- Ornate Royal skin for the new floating panels */
.theme-royal :is(.xq, .xnav-list:not(.big), .xtoast) {
  --fs: 0.15; border-style: solid; border-radius: 0;
  border-width: calc(50px * var(--fs)) calc(40px * var(--fs)) calc(40px * var(--fs)) calc(41px * var(--fs));
  border-image: url(../assets/ui/royal/win_frame9.png) 104 124 115 124 / calc(104px * var(--fs)) calc(124px * var(--fs)) calc(115px * var(--fs)) calc(124px * var(--fs)) / 0 stretch;
  background: var(--royal-surface) padding-box; box-shadow: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.theme-royal .xtoast { --fs: 0.18; }
.theme-royal .xnav-b { background: linear-gradient(180deg, #4a2a8a, #1c1032); border-color: var(--gold); }
.theme-royal .xhub-b { background: linear-gradient(180deg, rgba(70, 40, 128, 0.6), rgba(20, 12, 50, 0.85)); }

/* ---------- small screens */
@media (max-height: 540px) and (orientation: landscape), (orientation: portrait) and (max-width: 720px) {
  .xdock { width: 200px; } .xdock.left { width: 186px; }
  .xq { padding: 5px 7px 6px; } .xq-s { font-size: 12.5px; } .xq-d { font-size: 10.5px; }
  .xq-a button { height: 24px !important; font-size: 11px !important; padding: 0 7px !important; }
  .xnav-b { height: 26px; font-size: 12px; }
  .xtoast { min-width: 240px; padding: 6px 12px 6px 8px; } .xt-ic, .xt-ic img { width: 36px; height: 36px; } .xt-tx b { font-size: 14px; }
  .win.xhub-win { width: auto; max-width: 100vw; } .xhub { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px !important; }
  .xhub-b .xhub-ic { width: 34px; height: 34px; } .xhub-b b { font-size: 11.5px; }
  .win.xpet-win, .win.xmerc-win, .win.xbook-win, .win.xmvp-win, .win.xquest-win, .win.xach-win, .win.xnav-win { width: auto; max-width: 100vw; }
  .xmerc-cards { grid-template-columns: 1fr; }
  .xbook-body.mobs { flex-direction: column !important; overflow-y: auto; }
  .xbook-grid { width: auto; grid-template-columns: repeat(6, 1fr); max-height: 38%; flex: none; }
  .xbook-detail { flex: none; }
  .xpet-por { width: 72px; height: 72px; } .xpet-por img { max-width: 66px; max-height: 66px; }
}
@media (orientation: portrait) and (max-width: 720px) {
  .xdock.left .xq-d { display: none; }
}
.xq-a button { white-space: nowrap; flex: 1 1 auto; }
.xq-a .xgo { color: var(--gold-hi) !important; font-weight: 600; flex: 1.4 1 auto; }
/* list children never shrink inside the scrolling flex columns */
:is(.xq-steps, .xmvp-list, .xach-list, .xrank, .xgoals, .xeggs, .xnav-list, .xpet-body, .xmerc-body) > * { flex-shrink: 0; }
/* the market hides .ri-info .sub on wide screens; the new windows always show it */
:is(.xach-r, .xmvp-r, .xpk-win .row) .ri-info .sub { display: block; white-space: normal; }
.win.xmerc-win, .win.xpet-win, .win.xquest-win { height: auto; bottom: auto; max-height: calc(100vh - 140px); }
/* phone portrait: compact tracker on the left (skip lives in the quest window) */
.xdock.left .xq-a #xqSkip { display: none; }
@media (orientation: portrait) and (max-width: 720px) {
  .xdock.left { width: 176px; }
  .xdock.left .xq-h b { font-size: 11.5px; }
  .xdock.left .xq-s { font-size: 12px; margin-top: 2px; }
  .xdock.left .xq-a { margin-top: 4px; }
}
.xhub { align-content: start; grid-auto-rows: min-content; overflow-y: auto; }
body.touch .xhub-b .xk { display: none; }
.xhub-b .xk { font-style: normal; }
.xbook-grid { grid-auto-rows: 54px; }
.xmob-c { aspect-ratio: auto; height: 100%; }
@media (max-height: 540px) and (orientation: landscape), (orientation: portrait) and (max-width: 720px) {
  .xbook-grid { grid-auto-rows: 50px; max-height: 210px; }
}
.xq-st { display: block; font-size: 12px; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xq-st em { font-style: normal; color: #8affb0; margin-left: 3px; }
.xq-h b { min-width: 0; }
.xq-go { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 11px; color: #1a1004; cursor: pointer; border: 1px solid #fff2b8; background: radial-gradient(circle at 40% 35%, #fff2b8, #e0a83e 60%, #8a5a16); }
@media (orientation: portrait) and (max-width: 720px) { .xdock.left { width: 152px; } .xdock.left .xq:not(.fold) { width: 186px; } }
@media (max-height: 540px) and (orientation: landscape) { .xdock { width: 176px; } .xq:not(.fold) { width: 210px; } .xq-a #xqSkip { display: none; } }
.xq-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* job-change quest card (dock): see-through panel with its action button */
.xq.xjq { margin-top: 4px; padding: 8px 10px 9px; border-radius: 12px; background: rgba(12, 10, 40, .42); border: 1px solid rgba(255, 227, 154, .45); }
.xq.xjq .xq-d em { font-style: normal; color: #8affb0; }
.xq.xjq .xgo { margin-top: 6px; }
.xq.xjq.run { border-color: #8affb0; box-shadow: 0 0 10px rgba(138, 255, 176, .35); }