/* Compact layout pass (2026-10-10): less chrome, more content. Loaded last; phone rules first, small desktop tweaks after. */

/* ================= phone / portrait: windows become near-full-screen sheets with a slim header ================= */
@media (orientation: portrait) and (max-width: 720px) {
  .theme-royal .win, .win { top: calc(var(--gap, 6px) + 34px); bottom: calc(var(--gap, 6px) + var(--safe-b, 0px)); max-height: none; }
  /* header + tabs: one slim band */
  .win-head, .theme-royal .win-head { min-height: 0; height: 30px; padding: 0 4px 0 8px; gap: 6px; }
  .win-ic { width: 26px; height: 26px; padding: 2px; }
  .win-ic svg { width: 14px; height: 14px; }
  .win-x { width: 30px; height: 30px; } .win-x svg { width: 20px; height: 20px; }
  .win-tabs, .theme-royal .win-tabs { padding: 0 4px 2px; gap: 2px; }
  .win-tabs button, .theme-royal .win-tabs button { height: 28px; font-size: 12.5px; padding: 0 2px; min-width: 0; }
  .win-body, .theme-royal .win-body { padding: 4px 6px; gap: 5px; margin: 0 2px; }
  .win-foot, .theme-royal .win-foot { padding: 3px 8px 5px; gap: 8px; margin: 0 2px; font-size: 13px; }
  /* hints: one slim line */
  .hint2 { font-size: 10px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0; }
  /* generic controls */
  .btn, .btn-ghost, .btn-buy, .btn-gold, .ip-opt, .chip-btn { min-height: 28px; font-size: 12.5px; padding-top: 0; padding-bottom: 0; }
  .btn-gold, .btn-buy { height: 30px; }

  /* bag: 6 columns of small slots */
  .bag-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 2px 0; }
  .st-col .bag-grid { grid-template-columns: repeat(5, 1fr); }
  .row { padding: 3px 6px; gap: 6px; } .row .itile.gi { width: 36px; height: 36px; }
  .ri-name { font-size: 12.5px; } .price { font-size: 12px; }

  /* character: smaller slots, tighter stats */
  .eqs .itile { width: 38px; height: 38px; } .eqs .eql { font-size: 9px; }
  .doll { grid-template-columns: 40px 1fr 40px; gap: 4px; }
  .doll-stage { min-height: 150px; } .doll-name { font-size: 13px; top: 4px; }
  .doll-rot button { width: 24px; height: 24px; }
  .stat, .srow { padding-top: 2px; padding-bottom: 2px; }
  .srow { grid-template-columns: 34px 52px 1fr 30px; gap: 4px; } .srow .sv { font-size: 14px; } .srow .sk { font-size: 13px; }
  .srow .splus { width: 28px; height: 24px; font-size: 16px; }

  .power { display: flex; align-items: center; justify-content: space-between; padding: 3px 12px; min-height: 0; height: 32px; }
  .power small { font-size: 11px; } .power b { font-size: 19px; line-height: 1; }
  .stat-list { grid-template-columns: 1fr 1fr; } .stat { font-size: 11.5px; padding: 2px 6px; }

  /* skills */
  .sk-node { width: 46px; height: 52px; }
  .sk-node .ski { width: 34px; height: 34px; margin-top: 2px; }
  .sk-tree { max-height: none !important; flex: 1 1 auto; min-height: 0; padding: 3px; }
  .sk-detail2 { flex: none; max-height: 34%; }
  .sk-node .skv { font-size: 9.5px; }
  .sk-node .skp { width: 17px; height: 17px; font-size: 13px; line-height: 15px; }
  .sk-detail2 { font-size: 12px; gap: 4px; } .sk-detail2 h4 { font-size: 14px; } .sk-detail2 .skic { width: 40px; height: 40px; }
  .sk-detail2 .meta { font-size: 10.5px; }

  /* bot / settings forms: tight rows, compact segmented buttons */
  .bot-body, .form { gap: 5px; }
  .frow { margin-top: 2px; gap: 6px; font-size: 12.5px; } .frow > span { width: 78px; }
  .frow .seg { gap: 3px; } .frow .seg button, .frow .seg .ip-opt { height: 26px; min-height: 26px; font-size: 12px; padding: 0 8px; }
  .frow .seg button { min-width: 0; padding: 0 6px; }
  .frow.rg output { min-width: 40px; }
  .bsk { padding: 2px; font-size: 12px; gap: 4px; } .bsk .ico { width: 24px; height: 24px; }
  .bsk select, .bot-body select { height: 26px; max-width: 120px; } .bsk input[type=number] { height: 24px; }
  .bot-body h3, .bot-body h4, .form h3 { font-size: 13px; margin: 2px 0; }
  .bot-body small, .form small { letter-spacing: 0.06em; font-size: 9px; }
  .win-tabs:has(button:nth-child(6)) button { font-size: 11px; padding: 0; letter-spacing: -0.2px; }
  .win-tabs { overflow-x: auto; scrollbar-width: none; } .win-tabs::-webkit-scrollbar { display: none; }

  /* shop / market */
  .shop-switch { gap: 3px; } .shop-switch button { height: 26px; font-size: 12px; padding: 0 8px; }
  .mk-main { gap: 4px; }
  .cats button { height: 26px; font-size: 12px; }
}

/* windows are modal sheets: they cover the HUD buttons instead of letting them poke through */
@media (orientation: portrait) and (max-width: 720px) {
}

/* ================= HUD (phone): slimmer, labels hidden ================= */
@media (orientation: portrait) and (max-width: 720px) {
  #currency { scale: 0.72; }
  #actionPad { scale: 0.82; transform-origin: 100% 100%; }
  #hotbar { scale: 0.92; transform-origin: 50% 100%; }
  #menuRow { gap: 2px; }
  #chat { max-width: 74vw; }
  #chatPeek { font-size: 11px; }
  .guide-tip { font-size: 11px; padding: 4px 10px; bottom: calc(var(--safe-b, 0px) + 224px); }
  .job-cta { padding: 4px 12px; font-size: 12.5px; bottom: calc(var(--safe-b, 0px) + 168px); } .job-cta small { font-size: 9.5px; }
}

/* ================= small desktop / tablet landscape ================= */
@media (orientation: landscape) and (max-height: 900px) {
  .win-head { padding-top: 4px; padding-bottom: 2px; }
  .win-tabs button { height: 34px; font-size: 14px; }
  .bag-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
  .sk-node .ski { width: 40px; height: 40px; }
  .frow { margin-top: 3px; }
}

/* icon pickers instead of drop-downs (bot potions / allow-deny items / skill conditions / market filters) */
.pick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.pick .pk { position: relative; width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: rgba(6, 12, 32, 0.6); }
.pick .pk .itile { width: 100%; height: 100%; pointer-events: none; }
.pick .pk.dim { opacity: 0.55; }
.pick .pk.on { border-color: var(--gold-hi, #ffe39a); box-shadow: 0 0 8px rgba(255, 227, 154, 0.8); }
.pick .pk.on::after { content: "✓"; position: absolute; right: -3px; top: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #1a1004; background: var(--gold-hi, #ffe39a); }
.pick .pk.auto { width: auto; min-width: 58px; padding: 2px 6px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.pick .pk.auto b { font-size: 12px; } .pick .pk.auto small { font-size: 9px; color: var(--muted); }
.pick.scrollx { max-height: 112px; overflow-y: auto; margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chipo { height: 26px; padding: 0 9px; border-radius: 13px; font-size: 12px; color: #dfe6ff; background: rgba(22, 40, 84, 0.85); border: 1px solid var(--line, #3a4a80); }
.chipo.on { color: #1a1004; background: linear-gradient(#ffe9a8, #e0a93a); border-color: #fff2c0; font-weight: 600; }
.conds { display: inline-flex; gap: 3px; }
.conds .chipo { height: 22px; padding: 0 6px; font-size: 11px; }
.bsk { flex-wrap: wrap; }
/* bot skill rows: [check][icon][name][▲][▼] and the condition chips on a second line */
.bsk { display: grid; grid-template-columns: 22px 30px 1fr 30px 30px; align-items: center; gap: 2px 6px; flex-wrap: nowrap; }
.bsk .bn { grid-column: 3; min-width: 0; font-size: 12.5px; }
.bsk .conds, .bsk > em { grid-column: 3 / 6; grid-row: 2; }
.bsk .mv { width: 30px; min-width: 0; height: 26px; padding: 0; font-size: 11px; }
.bsk input[type=number] { grid-column: 3 / 6; grid-row: 2; justify-self: end; }

/* ===== settings: everything on one screen (no scrolling) ===== */
.form { gap: 4px; }
.form .fgroup { padding: 4px 8px 5px; border-radius: 8px; }
.form .fgroup h4 { margin: 0 0 2px; font-size: 12px; line-height: 1.2; } .form .fgroup h4 small { display: none; }
.form .frow { margin-top: 3px; gap: 6px; font-size: 12.5px; min-height: 0; }
.form .frow > span { width: 70px; flex: none; }
.form .frow:has(> span:empty) { display: none; }                     /* zoom hint row */
.form .frow .seg { gap: 3px; flex-wrap: nowrap; }
.form .frow .seg button { height: 24px; min-height: 24px; padding: 0 7px; font-size: 12px; min-width: 0; white-space: nowrap; }
.form .frow input[type=range] { height: 18px; }
.form .frow output { min-width: 28px; width: 28px; }
.form .hint2 { font-size: 9.5px; }
.form .btn-buy, .form .btn-ghost { height: 26px; min-height: 26px; font-size: 12px; padding: 0 8px; }

.form .frow.pair { gap: 4px; flex-wrap: nowrap; }
.form .frow.pair > span { width: auto; flex: none; } .form .frow.pair > span:nth-of-type(2) { margin-left: auto; }
.form .frow.pair .seg button { padding: 0 5px; }
.form .hint2 { white-space: normal; }
.form { overflow-x: hidden; }

/* settings: short window pinned to the bottom (more game visible), sound + interface side by side */
.form .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.form .cols2 .fgroup { min-width: 0; padding: 4px 6px 5px; }
.form .cols2 .frow { gap: 4px; flex-wrap: nowrap; }
.form .cols2 .frow > span { width: 40px; font-size: 12px; }
.form .cols2 .frow input[type=range] { width: 48px; min-width: 0; flex: 1 1 48px; }
.form .cols2 .frow output { min-width: 20px; width: 20px; font-size: 11px; }
.form .cols2 .seg button { padding: 0 5px; font-size: 11.5px; }
.form .frow:has(#gNew), .form .frow:has(> #gNew) { margin-top: 4px; }
@media (orientation: portrait) and (max-width: 720px) {
  .theme-royal .win.fit, .win.fit { top: auto; height: auto; max-height: 72vh; }
  .win.fit .win-body { flex: 0 1 auto; }
}

.form .cols2 .frow .seg { flex-wrap: wrap; }
.win.settings-win .form, .win.settings-win .win-body { overflow: visible; }
@media (orientation: portrait) and (max-width: 720px) {
  .theme-royal .win.fit, .win.fit { bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 8px); }
}

/* ===== remaining menus (phone): job master, refine, storage, save point ===== */
@media (orientation: portrait) and (max-width: 720px) {
  .job-cur img { width: 36px; height: 36px; } .job-cur b { font-size: 14px; } .job-cur { font-size: 12px; gap: 8px; }
  .job-kids { gap: 5px; }
  .job-card { flex: 1 1 100%; padding: 5px; gap: 6px; }
  .jc-art { flex: none; width: 64px; } .jc-art img { width: 64px; height: auto; max-height: 92px; object-fit: contain; }
  .jc-info { gap: 2px; font-size: 11.5px; min-width: 0; } .jc-info b { font-size: 13px; }
  .jc-em { width: 22px; height: 22px; }
  .jc-sk img, .jc-sk .ico { width: 22px; height: 22px; }
  .jc-note { display: none; }
  .job-card .btn-gold { height: 26px; font-size: 12px; margin-top: 2px; }
  /* refine */
  .rf-list { max-height: 34%; gap: 2px; } .rf-row { padding: 2px 4px; font-size: 12px; } .rf-row .itile { width: 30px; height: 30px; }
  .rf-main { gap: 4px; } .rf-big .itile { width: 46px; height: 46px; } .rf-name { margin-top: 2px; font-size: 13px; }
  .rf-arrow { font-size: 14px; } .rf-arrow b { font-size: 17px; } .rf-info { gap: 2px; font-size: 12px; } .rf-fail, .rf-bonus { font-size: 10.5px; }
  /* storage / save point */
  .st-body { gap: 6px; } .st-hint { font-size: 10px; }
  .small-win .fgroup, .storage-win .fgroup { padding: 4px 8px; }
}

@media (orientation: portrait) and (max-width: 720px) { .win.guild-win { min-height: 46vh; } }

/* ===== warp menu + death dialog (compact) ===== */
@media (orientation: portrait) and (max-width: 720px) {
  #warpMenu { width: min(86vw, 330px); padding: 8px 8px 6px; }
  .wm-title { font-size: 14px; margin-bottom: 6px; gap: 6px; } .wm-title svg { width: 18px; height: 18px; }
  .wm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .wm-item { height: auto; min-height: 40px; padding: 3px 6px; gap: 5px; font-size: 12.5px; line-height: 1.15; }
  .wm-item svg { width: 15px; height: 15px; flex: none; }
  .wm-item span { display: flex; flex-direction: column; min-width: 0; }
  .wm-item small { font-size: 10px; color: var(--cyan, #8fe6ff); }
  .wm-close { grid-column: 1 / 3; margin-top: 4px; height: 28px; font-size: 12px; }
  .deathbox { place-items: end center; padding-bottom: 22vh; background: rgba(20, 0, 8, 0.35); }
  .deathbox .db-in { width: min(300px, 84vw); padding: 10px 12px; }
  .deathbox h3 { font-size: 17px; margin-bottom: 3px; } .deathbox p { font-size: 11.5px; margin-bottom: 8px; line-height: 1.3; }
  .db-acts { gap: 6px; } .db-acts .btn-gold, .db-acts .btn-ghost { height: 30px; min-height: 30px; font-size: 12.5px; padding: 0 10px; }
}

@media (orientation: portrait) and (max-width: 720px) {
  .db-acts { flex-wrap: nowrap; } .db-acts button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; }
}

/* death dialog in the Royal frame */
.theme-royal .deathbox .db-in {
  --fs: var(--rs, 0.24); border-style: solid; border-radius: 0; box-shadow: none;
  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, linear-gradient(180deg, rgba(30, 16, 70, 0.97), rgba(10, 6, 30, 0.97))) padding-box;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}
.theme-royal .deathbox h3 { color: var(--gold-hi, #ffe39a); text-shadow: var(--outline, 0 1px 0 #000); }
.theme-royal .deathbox p { color: #e8dcff; }

/* ===== Royal buttons: the classic-kit hover image (game.css) broke the royal 9-slice -> keep the royal art on hover ===== */
.theme-royal .btn-gold:hover:not(:disabled), .theme-royal .btn-gold:active:not(:disabled), .theme-royal .btn-gold:focus {
  border-image-source: url(../assets/ui/royal/btn9.png);
}
.theme-royal .btn-buy:hover:not(:disabled), .theme-royal .btn-buy:active:not(:disabled) {
  border-image-source: url(../assets/ui/royal/btn_slim9.png);
}

/* ===== button labels always dead-centre (flex centring also centres a label wider than the button) ===== */
.btn, .btn-ghost, .btn-buy, .btn-gold, .chipo, .ip-opt, .chip-btn, .win-tabs button, .cats button, .tabs button, .chat-tabs button, .studio-btn, .wm-close, .st-close, .pal,
.shop-switch button, .seg button, .conds button, .db-acts button, #xNavBtn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; white-space: nowrap;
}
.theme-royal .btn-gold { border-width: calc(23px * var(--bo)) calc(60px * var(--bo)) calc(24px * var(--bo)); border-image-width: calc(23px * var(--bo)) calc(60px * var(--bo)) calc(24px * var(--bo)); }
.btn-gold, .btn-buy { min-width: max-content; }
.db-acts button { flex: 1 1 auto; }
.theme-royal :is(.btn, .win-tabs button, .chip-btn, .ip-opt, .wm-item, .btn-ghost, .tabs button):hover:not(:disabled) { border-image-source: url(../assets/ui/royal/btn_slim9.png); }

/* guide / navigate chip -> Royal slim plaque */
.theme-royal .xnav-b, .theme-royal .xnav-b:hover, .theme-royal .xnav-b.on {
  border-style: solid; border-radius: 0; background: none; box-shadow: none; padding: 0 2px; height: auto; min-height: 28px; justify-content: center;
  border-width: calc(11px * var(--bs)) calc(30px * var(--bs));
  border-image: url(../assets/ui/royal/btn_slim9.png) 11 30 fill / calc(11px * var(--bs)) calc(30px * var(--bs)) / 0 stretch;
  color: #f6ecff;
}
.theme-royal .xnav-b.on { color: var(--gold-hi); filter: brightness(1.3) drop-shadow(0 0 4px rgba(255, 214, 110, 0.8)); }

/* ===== chat box redesign (Royal): flat chip tabs, slim log, round icon buttons + pill input ===== */
.theme-royal .chat-tabs { transform: none; margin: 0; padding: 2px 4px 0; gap: 2px; align-items: flex-end; border-bottom: 1px solid rgba(224, 178, 82, 0.3); }
.theme-royal .chat-tabs button {
  border: 0 !important; border-image: none !important; background: transparent !important; box-shadow: none; height: 22px; padding: 0 9px; font-size: 11.5px; font-weight: 500; color: #b9acdf;
  border-radius: 8px 8px 0 0; flex: 0 0 auto; min-width: 0;
}
.theme-royal .chat-tabs button:hover { color: #fff; background: rgba(255, 255, 255, 0.07); filter: none; }
.theme-royal .chat-tabs button.on { color: var(--gold-hi); font-weight: 600; background: rgba(255, 227, 154, 0.16) !important; box-shadow: inset 0 -2px 0 var(--gold-hi); filter: none; }
.theme-royal .chat-tabs .chat-min { margin-left: auto; flex: 0 0 22px; font-size: 15px; padding: 0; }
.theme-royal .chat-log { padding: 3px 8px; font-size: 12px; line-height: 1.45; }
.theme-royal .chat-input { padding: 4px 5px; gap: 4px; align-items: center; border-top: 1px solid rgba(224, 178, 82, 0.3); }
.theme-royal .chat-input input { height: 26px; border-radius: 13px; font-size: 12px; padding: 0 10px; flex: 1; min-width: 0; }
.theme-royal .emoji-btn, .theme-royal .send-btn {
  border: 1px solid var(--gold, #d9a945); border-image: none; border-radius: 50%; width: 26px; height: 26px; padding: 0; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #5a34a8, #1a0e40 80%); box-shadow: 0 0 0 1px #000;
}
.theme-royal .emoji-btn svg, .theme-royal .send-btn svg { width: 14px; height: 14px; color: var(--gold-hi); }
@media (orientation: portrait) and (max-width: 720px) { .chat-box { height: 120px; } }

/* ===== starter quest: floating outlined text on the left + one action button (no box) ===== */
.xdock.left { width: 190px; gap: 4px; }
.xq.flt { width: 100%; padding: 0 2px; background: none !important; border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.xq.flt .xq-t { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--gold-hi, #ffe39a); }
.xq.flt .xq-ic img { width: 18px; height: 18px; }
.xq.flt .xq-s { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.xq.flt .xq-d { display: block !important; font-size: 11px; color: #e6defa; line-height: 1.3; }
.xq.flt .xq-t, .xq.flt .xq-s, .xq.flt .xq-d { text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 6px rgba(0, 0, 0, 0.85); }
.xq.flt .xgo { margin-top: 3px; height: 26px; min-height: 26px; padding: 0 12px; font-size: 12.5px; color: var(--gold-hi) !important; font-weight: 600; }

#currency { transform-origin: 100% 0; }

/* unspent stat / skill points: red "+" badge with a gold rim on the menu icon (no text bubble) */
#menuRow .mbtn.pts::after {
  content: "+"; position: absolute; right: -2px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 1px 0 #5a0010;
  background: radial-gradient(circle at 35% 30%, #ff6a6a, #d01830 70%); border: 2px solid #ffd45a; box-shadow: 0 0 0 1px #3a1a00, 0 0 6px rgba(255, 60, 60, 0.8); z-index: 3;
}
.guide-tip { display: none !important; }


/* ===== hotbar: phone portrait = 2 rows of 6, landscape = one row ===== */
@media (orientation: portrait) and (max-width: 720px) {
  #hotbar { --slot: 32px; display: grid; grid-template-columns: repeat(5, var(--slot)); gap: 8px 4px; padding: 10px 6px 5px; scale: 1;
    left: 50% !important; bottom: calc(var(--gap, 6px) + var(--safe-b, 0px)); width: auto; }
  #hotbar .hb-sep { display: none; }
  #chat, body.touch #chat, .theme-royal #chat, .theme-royal body.touch #chat { bottom: calc(104px + var(--safe-b, 0px)); }
  .job-cta { bottom: calc(var(--safe-b, 0px) + 172px); }
}
@media (orientation: landscape) {
  #hotbar { display: flex; flex-wrap: nowrap; grid-template-columns: none; }
  #hotbar .hb-sep { display: block; }
}

/* landscape: one row, dead centre, flush with the bottom edge, shrunk to fit between the sides */
@media (orientation: landscape) {
  #hotbar { --slot: clamp(24px, calc((100vw - 400px) / 10.5), 42px); left: 50% !important; bottom: calc(var(--gap, 6px) + var(--safe-b, 0px)) !important; }
}

/* bot gear = last menu button (same size as the rest) */
.mbtn.xbot .ring .in { display: grid; place-items: center; }
.mbtn.xbot .ring .in svg { width: 58%; height: 58%; fill: var(--gold-hi, #ffe39a); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.mbtn.xbot { position: relative; right: auto; top: auto; width: auto; height: auto; padding: 0; border-radius: 0; background: none; }

/* attack + AUTO: phone portrait = AUTO on top of the attack button; landscape keeps AUTO beside it (original layout) */
@media (orientation: portrait) and (max-width: 720px) {
.theme-royal #actionPad { width: var(--atk); height: calc(var(--atk) * 414 / 420 + var(--aut) * 383 / 420 + 2px); }
.theme-royal #actionPad .attack-btn { left: 0; bottom: 0; }
.theme-royal #actionPad .auto-btn { left: auto; right: 0; margin-left: 0; bottom: calc(var(--atk) * 414 / 420 - 4px); top: auto; }
}
#currency { position: fixed; }

/* virtual joystick: always shown (switch it off in the settings), bottom-left, same size as the attack button */
:root { --joy: var(--atk, 84px); }
@media (orientation: portrait) and (max-width: 720px) { :root { --joy: calc(var(--atk, 84px) * 0.82); } }
#joystick, body.touch #joystick { display: block; left: calc(var(--gap, 6px) + 4px + var(--safe-l, 0px)); bottom: calc(var(--gap, 6px) + var(--safe-b, 0px)); width: var(--joy); height: var(--joy); }
body.no-joy #joystick { display: none !important; }
/* left column, top to bottom: character info · navigate · quest · chat · joystick */
#chat, body.touch #chat, .theme-royal #chat, .theme-royal body.touch #chat, body:not(.no-joy) #chat, body:not(.no-joy) .theme-royal #chat {
  left: calc(var(--gap, 6px) + 4px + var(--safe-l, 0px)) !important; right: auto !important; top: auto !important;
  bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + var(--joy) + 8px) !important;
}
body.no-joy #chat, body.no-joy.touch #chat { bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 4px) !important; }

/* chat close button = prominent round X icon */
.theme-royal .chat-tabs .chat-min, .chat-tabs .chat-min {
  margin-left: auto; flex: 0 0 24px !important; width: 24px; height: 24px; padding: 0 !important; align-self: center; border-radius: 50% !important; display: grid; place-items: center;
  border: 2px solid var(--gold-hi, #ffe39a) !important; background: radial-gradient(circle at 35% 30%, #ff7a7a, #c4182e 72%) !important; color: #fff; box-shadow: 0 0 0 1px #3a0a10, 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}
.chat-tabs .chat-min svg { width: 12px; height: 12px; display: block; }
.chat-tabs .chat-min:hover { filter: brightness(1.2) !important; }

/* collapsed chat = a single round icon; hidden while the chat box is open */
#chat .chat-toggle, .theme-royal #chat .chat-toggle, .theme-royal #chat.collapsed .chat-toggle, .theme-royal body.touch #chat .chat-toggle {
  width: 34px !important; height: 34px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; justify-content: center; align-items: center;
  border: 2px solid var(--gold-hi, #ffe39a) !important; border-image: none !important; background: radial-gradient(circle at 50% 30%, #5a34a8, #1a0e40 80%) !important; box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.55) !important;
}
#chat .chat-toggle span, #chat .chat-toggle #chatPeek { display: none !important; }
#chat .chat-toggle svg { width: 18px; height: 18px; color: var(--gold-hi, #ffe39a); }
#chat.open .chat-toggle { display: none !important; }

/* ===== menu row: folded form (3 icons + arrow, second row on demand) ===== */
#menuRow .marrow { display: none; }
#menuRow.compact { position: relative; }
#menuRow.compact .marrow { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--gold-hi, #ffe39a); color: var(--gold-hi, #ffe39a);
  background: radial-gradient(circle at 50% 30%, #5a34a8, #1a0e40 80%); box-shadow: 0 0 0 1px #000; align-self: center; }
#menuRow.compact .marrow svg { width: 14px; height: 14px; transition: transform .15s; }
#menuRow.compact.exp .marrow svg { transform: rotate(90deg); }
#menuRow.compact .mbtn:not(.marrow) { scale: 0.8; transform-origin: 50% 0; }
#menuRow.compact .mbtn:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { display: none; }
#menuRow.compact.exp .mbtn:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { display: block; }
#menuRow.compact.exp { flex-wrap: wrap; }
#menuRow.compact.exp .mbtn:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { order: 5; }
#menuRow.compact.exp .marrow { order: 4; }
#menuRow.compact.exp { width: 206px; max-width: 206px; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; z-index: 30; }

/* attack + AUTO stacked (AUTO on top, both flush right) — set by xcore when the pair would overlap the hotbar */
.theme-royal #actionPad.stack { width: var(--atk); height: calc(var(--atk) * 414 / 420 + var(--aut) * 383 / 420 + 2px); }
.theme-royal #actionPad.stack .attack-btn { left: 0; bottom: 0; }
.theme-royal #actionPad.stack .auto-btn { left: auto; right: 0; margin-left: 0; bottom: calc(var(--atk) * 414 / 420 - 4px); top: auto; }

.theme-royal #actionPad .auto-btn { right: 0; }
.theme-royal #actionPad .attack-btn { right: auto; }

#chat.collapsed .chat-toggle, #chat:not(.open) .chat-toggle { display: flex !important; }
#chat.open .chat-toggle { display: none !important; }

/* NPC talk dialog (shown on approach) */
#npcTalk { position: absolute; left: 50%; bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 100px); transform: translateX(-50%); width: min(300px, 80vw); z-index: 12; pointer-events: auto;
  padding: 8px 12px 10px; text-align: center; color: #fff; }
#npcTalk.hidden { display: none; }
#hud:has(#npcTalk:not(.hidden)) #jobBtn { display: none; }   /* the job CTA sat on top of the NPC dialog */
.theme-royal #npcTalk { --fs: 0.17; 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, linear-gradient(180deg, rgba(30, 16, 70, 0.96), rgba(10, 6, 30, 0.96))) padding-box; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
#npcTalk .nt-n { font-size: 14px; font-weight: 700; color: var(--gold-hi, #ffe39a); text-shadow: var(--outline, 0 1px 0 #000); }
#npcTalk .nt-t { font-size: 12.5px; line-height: 1.35; margin: 3px 0 7px; color: #efe8ff; }
#npcTalk .nt-go { height: 28px; min-height: 28px; font-size: 13px; }
#npcTalk .nt-x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi, #ffe39a);
  background: rgba(10, 6, 30, 0.7); border: 1px solid var(--gold-dim, #b88a34); }
#npcTalk .nt-x svg { width: 10px; height: 10px; }

/* starter quest window: dense list (title + rewards on one line, one-line description) */
.xq-intro { padding: 3px 8px; font-size: 11px; line-height: 1.3; border-radius: 8px; }
.xq-steps { margin: 3px 0; gap: 3px; }
.xq-steps li { padding: 4px 7px; gap: 7px; border-radius: 8px; font-size: 12.5px; align-items: flex-start; }
.xq-n { width: 20px; height: 20px; font-size: 11px; }
.xq-bd { flex: 1; min-width: 0; }
.xq-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.xq-r1 b { font-size: 13px; } .xq-r1 em { font-style: normal; color: #8affb0; font-size: 12px; }
.xq-r1 .xq-rw { margin: 0 0 0 auto; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.xq-r1 .xq-rw img, .xq-r1 .xq-rw .mini { width: 16px; height: 16px; }
.xq-steps .xq-d { font-size: 11px; line-height: 1.3; margin-top: 0; color: #c8d0ec; }
.win.xquest-win .win-body .frow { margin-top: 2px; gap: 6px; }
.win.xquest-win .btn-gold { height: 28px; min-height: 28px; font-size: 12.5px; }
.win.xquest-win .btn-ghost { height: 26px; min-height: 26px; font-size: 12px; }
.win.xquest-win .win-body { padding-top: 4px; }

.xq-steps li { cursor: pointer; transition: background .12s, border-color .12s; border: 1px solid transparent; }
.xq-steps li:hover { background: rgba(255, 255, 255, 0.07); }
.xq-steps li.sel { border-color: var(--gold-hi, #ffe39a); background: rgba(224, 178, 82, 0.16); box-shadow: 0 0 8px rgba(255, 214, 110, 0.35); }
.xq-steps li.sel:not(.now) .xq-n { background: var(--gold, #d9a945); color: #1a1004; }

/* skill window (wide / landscape): hugs its content, left-aligned slim job tabs, tighter header + detail */
@media not all and (orientation: portrait) and (max-width: 720px) {
  .win.skill-win { height: auto !important; bottom: auto !important; max-height: calc(100vh - 110px); width: min(560px, calc(100vw - 24px)); }
  .win.skill-win .win-head, .theme-royal .win.skill-win .win-head { min-height: 0; height: 34px; padding-top: 2px; padding-bottom: 0; }
  .win.skill-win .win-ic { width: 28px; height: 28px; }
  .win.skill-win .win-tabs { justify-content: flex-start; }
  .win.skill-win .win-tabs button { flex: 0 0 auto; min-width: 96px; height: 28px; font-size: 13px; padding: 0 14px; }
  .win.skill-win .win-body { padding: 6px 8px; gap: 8px; }
  .win.skill-win .sk-tree { flex: 0 0 auto; align-self: flex-start; max-height: none; padding: 5px; }
  .win.skill-win .sk-detail2 { flex: 1; min-width: 0; font-size: 12.5px; gap: 4px; }
  .win.skill-win .sk-detail2 .skic { width: 42px; height: 42px; }
  .win.skill-win .sk-detail2 h4 { font-size: 14.5px; }
  .win.skill-win .sk-detail2 p { line-height: 1.4; }
  .win.skill-win .skb { margin-top: auto; }
}

/* ===== every window hugs its content (landscape: stays under the HUD at the top; portrait: sheet anchored at the bottom) ===== */
.win { height: auto !important; bottom: auto !important; max-height: calc(100vh - 64px) !important; }
.win .win-body { flex: 0 1 auto; overflow-y: auto; }
@media (orientation: portrait) and (max-width: 720px) {
  .theme-royal .win, .win { top: auto !important; bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 8px) !important; max-height: calc(100vh - 60px) !important; }
}

/* ===== short landscape: same dense metrics as the phone sheets ===== */
@media (max-height: 540px) and (orientation: landscape) {
  /* header + tabs: one slim band */
  .win-head, .theme-royal .win-head { min-height: 0; height: 30px; padding: 0 4px 0 8px; gap: 6px; }
  .win-ic { width: 26px; height: 26px; padding: 2px; }
  .win-ic svg { width: 14px; height: 14px; }
  .win-x { width: 30px; height: 30px; } .win-x svg { width: 20px; height: 20px; }
  .win-tabs, .theme-royal .win-tabs { padding: 0 4px 2px; gap: 2px; }
  .win-tabs button, .theme-royal .win-tabs button { height: 28px; font-size: 12.5px; padding: 0 2px; min-width: 0; }
  .win-body, .theme-royal .win-body { padding: 4px 6px; gap: 5px; margin: 0 2px; }
  .win-foot, .theme-royal .win-foot { padding: 3px 8px 5px; gap: 8px; margin: 0 2px; font-size: 13px; }
  /* hints: one slim line */
  .hint2 { font-size: 10px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin: 0; }
  /* generic controls */
  .btn, .btn-ghost, .btn-buy, .btn-gold, .ip-opt, .chip-btn { min-height: 28px; font-size: 12.5px; padding-top: 0; padding-bottom: 0; }
  .btn-gold, .btn-buy { height: 30px; }

  /* bag: 6 columns of small slots */
  .bag-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 2px 0; }
  .st-col .bag-grid { grid-template-columns: repeat(5, 1fr); }
  .row { padding: 3px 6px; gap: 6px; } .row .itile.gi { width: 36px; height: 36px; }
  .ri-name { font-size: 12.5px; } .price { font-size: 12px; }

  /* character: smaller slots, tighter stats */
  .eqs .itile { width: 38px; height: 38px; } .eqs .eql { font-size: 9px; }
  .doll { grid-template-columns: 40px 1fr 40px; gap: 4px; }
  .doll-stage { min-height: 150px; } .doll-name { font-size: 13px; top: 4px; }
  .doll-rot button { width: 24px; height: 24px; }
  .stat, .srow { padding-top: 2px; padding-bottom: 2px; }
  .srow { grid-template-columns: 34px 52px 1fr 30px; gap: 4px; } .srow .sv { font-size: 14px; } .srow .sk { font-size: 13px; }
  .srow .splus { width: 28px; height: 24px; font-size: 16px; }

  .power { display: flex; align-items: center; justify-content: space-between; padding: 3px 12px; min-height: 0; height: 32px; }
  .power small { font-size: 11px; } .power b { font-size: 19px; line-height: 1; }
  .stat-list { grid-template-columns: 1fr 1fr; } .stat { font-size: 11.5px; padding: 2px 6px; }

  /* skills */
  .sk-node { width: 46px; height: 52px; }
  .sk-node .ski { width: 34px; height: 34px; margin-top: 2px; }
  .sk-tree { max-height: none !important; flex: 1 1 auto; min-height: 0; padding: 3px; }
  .sk-detail2 { flex: none; max-height: 34%; }
  .sk-node .skv { font-size: 9.5px; }
  .sk-node .skp { width: 17px; height: 17px; font-size: 13px; line-height: 15px; }
  .sk-detail2 { font-size: 12px; gap: 4px; } .sk-detail2 h4 { font-size: 14px; } .sk-detail2 .skic { width: 40px; height: 40px; }
  .sk-detail2 .meta { font-size: 10.5px; }

  /* bot / settings forms: tight rows, compact segmented buttons */
  .bot-body, .form { gap: 5px; }
  .frow { margin-top: 2px; gap: 6px; font-size: 12.5px; } .frow > span { width: 78px; }
  .frow .seg { gap: 3px; } .frow .seg button, .frow .seg .ip-opt { height: 26px; min-height: 26px; font-size: 12px; padding: 0 8px; }
  .frow .seg button { min-width: 0; padding: 0 6px; }
  .frow.rg output { min-width: 40px; }
  .bsk { padding: 2px; font-size: 12px; gap: 4px; } .bsk .ico { width: 24px; height: 24px; }
  .bsk select, .bot-body select { height: 26px; max-width: 120px; } .bsk input[type=number] { height: 24px; }
  .bot-body h3, .bot-body h4, .form h3 { font-size: 13px; margin: 2px 0; }
  .bot-body small, .form small { letter-spacing: 0.06em; font-size: 9px; }
  .win-tabs:has(button:nth-child(6)) button { font-size: 11px; padding: 0; letter-spacing: -0.2px; }
  .win-tabs { overflow-x: auto; scrollbar-width: none; } .win-tabs::-webkit-scrollbar { display: none; }

  /* shop / market */
  .shop-switch { gap: 3px; } .shop-switch button { height: 26px; font-size: 12px; padding: 0 8px; }
  .mk-main { gap: 4px; }
  .cats button { height: 26px; font-size: 12px; }

  .doll-stage { min-height: 120px; }
  .win-head, .theme-royal .win-head { height: 30px; }
}

/* ===== every window opens dead-centre on the screen; as tall as it needs, scrolling only past the screen height ===== */
.win, .theme-royal .win, .win.fit, .theme-royal .win.fit, .win.settings-win, .theme-royal .win.settings-win, .win.guild-win {
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; margin-top: 12px !important;
  transform: translate(-50%, -50%) !important; animation: none !important;
  max-height: calc(100vh - 72px) !important; max-width: calc(100vw - 16px) !important;
}
.win.guild-win { min-height: 0; }

/* windows are opaque: the HUD (hotbar etc.) must never show through them */
.win, .theme-royal .win { background-color: #130b30 !important; }

/* monster book: the found/cards counter flows in the layout instead of floating over the detail panel */
.xbook-sum { position: static !important; align-self: flex-end; margin: 2px 4px 0; font-size: 11px; color: var(--muted, #9aa6cc); }
.xbook-body, .win .xbook-body { flex-direction: column; }
.xbook-detail { flex: 0 0 auto; max-height: 96px; }
.xbook-grid { flex: 1 1 auto; min-height: 0; }

/* ===== hotbar: no outer frame, small corner counts, drag to swap / throw away ===== */
.theme-royal #hotbar, #hotbar { border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; filter: none !important; padding: 8px 2px 2px !important; touch-action: none; }
#hotbar::before, #hotbar::after { display: none !important; }
.slot .cnt, .theme-royal .slot .cnt { right: 1px !important; bottom: 1px !important; left: auto !important; top: auto !important; font-size: 9.5px !important; line-height: 1.1; font-weight: 700; padding: 0 3px; border-radius: 4px;
  background: rgba(8, 4, 24, 0.72); color: #fff; text-shadow: 0 1px 0 #000; z-index: 3; max-width: 90%; overflow: hidden; }
.slot { touch-action: none; user-select: none; -webkit-user-select: none; }
.slot.hb-src { opacity: 0.35; }
.slot.hb-over { outline: 2px solid var(--gold-hi, #ffe39a); outline-offset: 1px; filter: brightness(1.3); }
.hb-ghost { position: fixed; z-index: 99999; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); }
.hb-ghost * { width: 100%; height: 100%; }
body.hb-dragging { cursor: grabbing; }
body.hb-trash .hb-ghost { filter: drop-shadow(0 0 8px #ff3b3b) saturate(1.4); opacity: 0.6; }

.mbtn.xmore .ring, .mbtn.xbot .ring { padding: 0; }
.mbtn.xbot .ring .in img, .mbtn.xmore .ring .in img { width: 100%; height: 100%; }

/* menu icon names sit on the icon, flush with its bottom edge */
#menuRow .mbtn { position: relative; }
#menuRow .mbtn .ml, #menuRow.compact .mbtn .ml {
  position: absolute; left: -4px; right: -4px; bottom: 1px; margin: 0; padding: 0; text-align: center; font-size: 10px; line-height: 1.1; font-weight: 700; color: #fff4d0 !important;
  white-space: nowrap; pointer-events: none; z-index: 4;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 4px rgba(0, 0, 0, 0.9);
}

/* ===== mercenary guild: one compact row per mercenary ===== */
.win.xmerc-win:not(.small-win) { width: min(480px, calc(100vw - 16px)) !important; }
.xmerc-cards, .win .xmerc-cards { display: flex !important; flex-direction: column; gap: 4px; grid-template-columns: none; }
.xmerc-card {
  display: grid !important; grid-template-columns: 40px 1fr auto; grid-template-areas: "art name hire" "art sub hire" "art st hire" "sk sk sk";
  column-gap: 8px; row-gap: 0; align-items: center; text-align: left !important; padding: 5px 8px !important; border-radius: 8px;
}
.xmerc-card .xmc-art { grid-area: art; align-self: start; } .xmerc-card .xmc-art img { width: 40px; height: 40px; display: block; }
.xmerc-card > b { grid-area: name; font-size: 13px; line-height: 1.2; }
.xmerc-card > small { grid-area: sub; font-size: 10.5px; line-height: 1.2; }
.xmerc-card .xmc-st { grid-area: st; font-size: 10.5px; line-height: 1.25; color: #d8e0f8; }
.xmerc-card .xmc-st br { display: none; } .xmerc-card .xmc-st::first-line { color: inherit; }
.xmerc-card .xmc-sk { grid-area: sk; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 10.5px; margin-top: 3px; }
.xmerc-card .xmc-sk span { margin-right: 8px; } .xmerc-card .xmc-sk img, .xmerc-card .xmc-sk .ico, .xmerc-card .xmc-sk svg { width: 16px !important; height: 16px !important; flex: none; }
.xmerc-card .btn-gold { grid-area: hire; width: auto !important; margin: 0 !important; height: 28px; min-height: 28px; font-size: 12px; align-self: center; white-space: nowrap; }
.xmerc-win .hint2 { font-size: 10.5px; white-space: normal; }
.xmerc-cur { padding: 4px 6px; margin-bottom: 3px; gap: 8px; } .xmerc-cur img { width: 36px; height: 36px; }

/* ===== every popup wears the Royal skin: job CTA, cast bar, aim hint, MVP banner, speech bubbles ===== */
.theme-royal .job-cta {
  --fs: 0.17; border-style: solid; border-radius: 0; box-shadow: none; animation: royalCta 1.6s ease-in-out infinite;
  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; color: var(--gold-hi, #ffe39a); padding: 4px 14px;
}
.theme-royal .job-cta b { color: var(--gold-hi, #ffe39a); text-shadow: var(--outline, 0 1px 0 #000); }
.theme-royal .job-cta small { color: #e8dcff; }
@keyframes royalCta { 50% { filter: drop-shadow(0 0 10px rgba(255, 214, 110, 0.85)); } }

.theme-royal .castbar { height: 20px; border-radius: 10px; background: linear-gradient(180deg, rgba(10, 6, 28, 0.95), rgba(30, 18, 70, 0.95)); border: 2px solid var(--gold, #d9a945); box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.5); }
.theme-royal .castbar i { background: linear-gradient(180deg, #ffe39a, #b26bff 55%, #6a3ac8); }
.theme-royal .castbar .cb-n { color: #fff; }

.theme-royal .aimhint {
  --fs: 0.14; 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; color: var(--gold-hi, #ffe39a); padding: 3px 12px;
}
.theme-royal .mvpbanner { background: linear-gradient(90deg, transparent, rgba(40, 18, 90, 0.9) 18%, rgba(40, 18, 90, 0.9) 82%, transparent); border-top: 2px solid var(--gold, #d9a945); border-bottom: 2px solid var(--gold, #d9a945); }
.theme-royal .mvpbanner small { color: var(--gold-hi, #ffe39a); } .theme-royal .mvpbanner b { text-shadow: 0 0 10px #b26bff, var(--outline, 0 1px 0 #000); }
.theme-royal .mvpbanner.killed { background: linear-gradient(90deg, transparent, rgba(70, 40, 8, 0.92) 18%, rgba(70, 40, 8, 0.92) 82%, transparent); }

.theme-royal .bubble { background: linear-gradient(180deg, #2c1a66, #160c38); color: #f6ecff; border: 2px solid var(--gold, #d9a945); box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, 0.5); }
.theme-royal .bubble::before { border-top-color: var(--gold, #d9a945); }
.theme-royal .bubble::after { border-top-color: #160c38; }

/* dragging a skill / item out of a window: the window fades and the hotbar comes to the front as the drop target */
body.hb-wdrag #winLayer { opacity: 0.25; pointer-events: none !important; transition: opacity .12s; }
body.hb-wdrag #winLayer * { pointer-events: none !important; }
body.hb-wdrag #hud { z-index: 40; }
body.hb-wdrag #hotbar .slot { outline: 2px dashed rgba(255, 227, 154, 0.8); outline-offset: 1px; }
body.hb-wdrag #dragGhost { z-index: 99999; }

/* ===== monster target: floating outlined text at the top centre — name + Lv and a slim HP bar, nothing else ===== */
#tframe, .theme-royal #tframe {
  left: 50% !important; top: calc(var(--gap, 6px) + 2px) !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 !important; animation: none !important;
  display: flex; flex-direction: column; align-items: center; pointer-events: auto; z-index: 6;
}
#tframe.hidden { display: none !important; }
#tframe .tf-portrait, #tframe .tf-badge, #tframe .tf-sub { display: none !important; }
#tframe .tf-panel, .theme-royal #tframe .tf-panel {
  width: auto !important; min-width: 120px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; filter: none !important; text-align: center;
}
#tframe .tf-top { justify-content: center; gap: 6px; }
#tframe .tf-name { font-size: 13px; font-weight: 700; max-width: 56vw; }
#tframe .tf-lv { font-size: 11px; color: var(--gold-hi, #ffe39a); }
#tframe .tf-name, #tframe .tf-lv { text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 5px rgba(0, 0, 0, 0.9); }
#tframe .tbar { height: 8px; width: 96px; margin: 2px auto 0; border-radius: 4px; box-shadow: 0 0 0 1px #000; }
#tframe .tbar i { border-radius: 4px; }
#tframe .tbar span { display: none; }

/* ===== HUD toggle: round eye button above the minimap; hides every other HUD element ===== */
#hudToggle {
  position: absolute; right: calc(var(--gap, 6px) + var(--safe-r, 0px) + 2px); top: calc(var(--gap, 6px) - 2px); width: 36px; height: 36px; padding: 0; border: 0; background: none; z-index: 50; pointer-events: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
#hudToggle img { width: 100%; height: 100%; display: block; }
#hudToggle .ml { position: absolute; left: -4px; right: -4px; bottom: 1px; text-align: center; font-size: 10px; line-height: 1.1; font-weight: 700; color: #fff4d0; pointer-events: none;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 4px rgba(0, 0, 0, 0.9); }
#hudToggle:hover { filter: brightness(1.15) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
body.hud-off #hudToggle img { filter: grayscale(0.7) brightness(0.8); }
/* the minimap (and the menu column next to it) make room for the button */
#mmBox { translate: 0 34px; }
body.hud-off #hud > *:not(#hudToggle), body.hud-off #joystick, body.hud-off #npcTalk { display: none !important; }

/* ===== remaining window buttons (chips, hub list, navigate list) wear the Royal plaque like all other buttons ===== */
.theme-royal :is(.chipo, .xhub-b, .xnav-list button) {
  border-style: solid; border-radius: 0; border-width: calc(11px * var(--bs)) calc(30px * var(--bs));
  border-image: url(../assets/ui/royal/btn_slim9.png) 11 30 fill / calc(11px * var(--bs)) calc(30px * var(--bs)) / 0 stretch;
  background: none !important; box-shadow: none; color: #f6ecff; image-rendering: auto; transition: filter .12s, transform .08s;
}
.theme-royal :is(.chipo, .xhub-b, .xnav-list button):hover { border-image-source: url(../assets/ui/royal/btn_slim9.png); filter: brightness(1.2) saturate(1.1); }
.theme-royal :is(.chipo, .xhub-b, .xnav-list button):active { filter: brightness(0.85); transform: translateY(1px); }
.theme-royal .chipo.on { filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 4px rgba(255, 214, 110, 0.8)); color: var(--gold-hi, #ffe39a); font-weight: 600; }
.theme-royal .chipo { height: auto; min-height: 24px; padding: 0 2px; }
.theme-royal .xnav-list button { align-items: flex-start; text-align: left; padding: 2px 4px; }
.theme-royal .xnav-list button b { color: var(--gold-hi, #ffe39a); } .theme-royal .xnav-list button small { color: #cdbff0; }
.theme-royal .xhub-b { text-align: left; color: #f6ecff; }
/* item picker tiles (bot potions / allow list) use the Royal slot frame */
.theme-royal .pick .pk { border-style: solid; border-radius: 0; border-width: var(--kit-slot, 5px); border-image: url(../assets/ui/kit/inventory-slot-9slice.png) 12 fill / var(--kit-slot, 5px) / 0 stretch; background: none; box-shadow: none; }
.theme-royal .pick .pk.on { filter: drop-shadow(0 0 5px rgba(255, 227, 154, 0.95)) brightness(1.2); }

.pick.mobpick .pk.mob { position: relative; width: 46px; height: 46px; opacity: 0.5; }
.pick.mobpick .pk.mob.on { opacity: 1; }
.pick.mobpick .pk.mob img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.pick.mobpick .pk.mob span { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-weight: 700; padding: 0 3px; border-radius: 4px; background: rgba(8, 4, 24, 0.75); color: #fff; }
.pick.mobpick .pk.mob::before { content: ""; position: absolute; left: 1px; top: 1px; width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--gold-hi, #ffe39a); background: rgba(8, 4, 24, 0.8); z-index: 2; }
.pick.mobpick .pk.mob.on::before { content: "✓"; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; color: #1a1004; background: var(--gold-hi, #ffe39a); }
.pick.mobpick .pk.mob.on::after { display: none; }

/* EXP bar = two separate tracks: base Lv (left, gold) | Job Lv (right, cyan) */
.h2-bar.exp { display: flex; gap: calc(var(--u) * 14); background: none !important; box-shadow: none !important; overflow: visible; }
.h2-bar.exp .eh { position: relative; flex: 1 1 0; min-width: 0; height: 100%; border-radius: calc(var(--u) * 33); overflow: hidden; background: linear-gradient(180deg, #050a1a, #151030); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.7); }
.h2-bar.exp .eh i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transition: width .25s; }
.h2-bar.exp .eh.l i { background: linear-gradient(180deg, #fff3a0, #e8b64e 48%, #9a6414); }
.h2-bar.exp .eh.r i { background: linear-gradient(180deg, #b8f4ff, #3cc4e8 48%, #146a98); }
.h2-bar.exp .eh span { position: relative; display: grid; place-items: center; height: 100%; font-size: max(calc(var(--u) * 38), 8px); font-weight: 600; color: #fff; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; line-height: 1; white-space: nowrap; }

/* class window + equip ride slots + one-page character windows */
.class-win { width: min(440px, calc(100vw - 16px)); }
.cc-list { display: flex; flex-direction: column; gap: 3px; }
.cc { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); border-left: 3px solid var(--jc, #d9a945); background: rgba(2, 6, 18, 0.4); }
.cc.t2 { margin-left: 10px; } .cc.t3 { margin-left: 20px; }
.cc.cur { border-color: var(--gold-hi, #ffe39a); background: rgba(224, 178, 82, 0.15); }
.cc-em { width: 34px; height: 34px; image-rendering: pixelated; }
.cc-i { min-width: 0; } .cc-i b { font-size: 13px; display: block; } .cc-i small { display: block; font-size: 10px; color: var(--muted, #9aa6cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-s { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #d8e0f8; } .cc-now { color: #8affb0; } .cc-new { color: #ffd27a; }
.cc-sk { display: inline-flex; gap: 2px; } .cc-sk .ico, .cc-sk img { width: 15px; height: 15px; }
.cc .btn-gold, .cc .btn-ghost { height: 26px; min-height: 26px; font-size: 12px; min-width: 64px; }
.ridebar { display: flex; gap: 4px; padding: 3px 0 0; }
.rslot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 3px 4px; border-radius: 8px; border: 1px solid var(--gold-dim, #b88a34); background: rgba(10, 6, 28, 0.7); color: #fff; }
.rslot small { font-size: 9.5px; color: var(--muted, #9aa6cc); } .rslot b { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rslot.on b { color: var(--gold-hi, #ffe39a); }
.ridepick { display: flex; flex-wrap: wrap; gap: 3px; max-height: 70px; overflow-y: auto; padding-top: 3px; } .ridepick.hidden { display: none; }
.win.one-page .win-tabs { display: none; }

.cc-art { height: 68px; width: auto; max-width: 54px; object-fit: contain; image-rendering: auto; margin: -8px 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.cc { min-height: 60px; }
.cc .cc-art { width: auto !important; height: 68px !important; max-width: 56px !important; }

.cc-rq { font-size: 10px; margin-top: 1px; } .cc-rq.ok { color: #8affb0; } .cc-rq.no { color: #ff9a8a; }
.cc.locked .cc-art, .cc.locked .cc-em { filter: grayscale(1) brightness(0.55); }
.cc.locked { opacity: 0.9; }

#planBox { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(4, 2, 16, 0.55); }
#planBox .pb-in { width: min(340px, 92vw); max-height: 86vh; display: flex; flex-direction: column; padding: 8px 12px 10px; text-align: center; color: #fff; }
.theme-royal #planBox .pb-in { --fs: 0.2; 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, linear-gradient(180deg, rgba(30,16,70,.97), rgba(10,6,30,.97))) padding-box; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
#planBox h3 { margin: 0 0 2px; font-size: 16px; color: var(--gold-hi, #ffe39a); }
#planBox .pb-l { font-size: 11.5px; color: #e8dcff; } #planBox .pb-l.sub { font-size: 10.5px; color: var(--muted, #9aa6cc); }
#planBox .pb-rows { margin: 6px 0; overflow-y: auto; max-height: 40vh; display: flex; flex-direction: column; gap: 2px; text-align: left; }
#planBox .pb-r { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,0.05); }
#planBox .pb-r em { font-style: normal; color: #8affb0; }
#planBox .pb-a { display: flex; gap: 8px; justify-content: center; margin-top: 6px; } #planBox .pb-a button { height: 30px; min-height: 30px; font-size: 13px; }
.spts .btn-gold, .skb #skAuto { height: 26px; min-height: 26px; font-size: 12px; margin-right: 6px; }

/* small confirm popup: no dimmed backdrop, compact */
#planBox { background: none !important; pointer-events: none; }
#planBox .pb-in { pointer-events: auto; width: min(240px, 80vw) !important; padding: 4px 10px 8px !important; max-height: none !important; }
.theme-royal #planBox .pb-in { --fs: 0.15 !important; }
#planBox h3 { font-size: 13.5px !important; } #planBox .pb-l { font-size: 10.5px !important; }
#planBox .pb-sum { font-size: 11px; line-height: 1.45; margin: 3px 0; color: #e8dcff; max-height: 84px; overflow-y: auto; } #planBox .pb-sum em { font-style: normal; color: #8affb0; font-weight: 700; }
#planBox .pb-a { margin-top: 4px !important; } #planBox .pb-a button { height: 26px !important; min-height: 26px !important; font-size: 12px !important; }

/* ===== character (stats) page: dense, nothing scrolls ===== */
.win.char-win .stat-body { flex-direction: column; gap: 3px; overflow: visible; }
.stat-left, .stat-right { display: flex; flex-direction: column; gap: 3px; min-height: 0; flex: none !important; width: 100% !important; }
.shead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12px; } .shead b { font-size: 13px; }
.shead .sexp { font-size: 10.5px; }
.srows { gap: 2px; }
.srow { grid-template-columns: 40px 1fr auto 30px !important; padding: 1px 6px !important; gap: 5px !important; border-radius: 6px; }
.srow .sk { font-size: 12px; padding: 2px 4px !important; } .srow .sv { font-size: 13.5px; } .srow .sv em { font-size: 10px; }
.srow .sd, .srow .sc { display: none !important; }
.srow .splus { width: 26px; height: 22px; font-size: 15px; }
.spts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 11px; } .spts b { font-size: 14px; }
.stat-right .stat-list { display: grid !important; grid-template-columns: 1fr 1fr 1fr; overflow: visible !important; max-height: none !important; height: auto !important; }
.stat-right .stat { flex-direction: column; align-items: flex-start; padding: 1px 6px !important; font-size: 10px !important; gap: 0; } .stat-right .stat b { font-size: 12px; }
.stat-right .hint2 { display: none; }
.stat-right .stat { flex-direction: row !important; align-items: center !important; justify-content: space-between; padding: 0 5px !important; height: 18px; font-size: 10px !important; }
.stat-right .stat b { font-size: 11.5px; }
.srow { min-height: 0; } .srow .sk { padding: 1px 4px !important; }
.spts { font-size: 10.5px; } .spts .btn-gold { height: 24px !important; min-height: 24px !important; }
.win.char-win .win-body { padding-top: 3px; padding-bottom: 3px; }
/* stat rows: name | value | description | [+] hard against the right edge */
.srow { grid-template-columns: 40px 72px 1fr 28px !important; }
.srow .sd { display: block !important; font-size: 10.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .sc { display: none !important; }
.srow .splus { justify-self: end; margin-right: -2px; }

/* phone landscape: the menu row (9 buttons) shrinks with the screen so it never runs under the player frame (844x390: 29 px overlap) */
@media (max-height: 540px) and (orientation: landscape) {
  body { --mb: clamp(26px, calc((100vw - 355px - var(--mmw) - 2 * var(--gap, 7px)) / 9), 36px); }
  .mbtn { width: calc(var(--mb) + 2px); }
}
.srow { grid-template-columns: 36px max-content 1fr 26px !important; gap: 4px !important; }
.srow .sd { font-size: 9.5px; letter-spacing: -0.2px; text-align: left; }
.srow .sv { font-size: 13px; white-space: nowrap; }
.srow .sv em { margin-left: 2px; font-size: 9.5px; }
/* narrow phones: option rows (bot target order etc.) wrap instead of clipping the last option at the window edge */
@media (max-width: 480px) { .form .frow .seg { flex-wrap: wrap; row-gap: 3px; min-width: 0; } }

#skHb, #bagHb { height: 26px; min-height: 26px; font-size: 12px; margin-right: 6px; }
/* phone landscape: the stats page is taller than the sheet (derived stats were cut off) - tighter rows + scroll */
@media (max-height: 540px) and (orientation: landscape) {
  .win.char-win .win-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .win.char-win .srow { padding-top: 0 !important; padding-bottom: 0 !important; }
  .win.char-win .srow .splus { height: 20px; }
}

/* ===== short landscape phones (height <= 460): two-column windows, tighter hub / refine / skill ===== */
@media (max-height: 460px) and (orientation: landscape) {
  .win { max-height: calc(100vh - 52px) !important; }
  .win.char-win .stat-body { flex-direction: row !important; gap: 8px; }
  .stat-left { flex: 1.25 1 0 !important; width: auto !important; } .stat-right { flex: 1 1 0 !important; width: auto !important; }
  .stat-right .stat-list { grid-template-columns: 1fr 1fr !important; }
  .xhub { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  .xhub-b { min-height: 0 !important; padding: 2px 3px !important; } .xhub-b small, .xhub-b em { display: none !important; }
  .win.skill-win { width: min(600px, calc(100vw - 16px)); }
  .sk-detail2 { font-size: 11.5px; } .sk-detail2 p { line-height: 1.3; }
  .rf-big .itile { width: 40px; height: 40px; } .rf-list { max-height: none; }
  .win.xmerc-win:not(.small-win) { width: min(520px, calc(100vw - 16px)) !important; }
  .doll-stage { min-height: 100px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .win.skill-win .win-body { overflow: hidden !important; }
  .win.skill-win .sk-tree { max-height: calc(100vh - 168px) !important; overflow-y: auto; }
  .win.skill-win .sk-detail2 { overflow-y: auto; }
}

/* Royal controls reuse the same painted gold-and-amethyst button art as the attack HUD. */
#joystick .js-base {
  border: 0;
  background: url('../assets/ui/royal/menu_more.png') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .58));
}
#joystick .js-base::before {
  content: '';
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #43306d, #17113f 64%, #080f2c 100%);
  border: 2px solid #dba956;
  box-shadow: inset 0 0 0 1px #f8df9f, inset 0 4px 8px rgba(0, 0, 0, .68), 0 0 0 2px #22102e;
}
#joystick .js-knob {
  width: 48%;
  height: 48%;
  margin: 0;
  translate: -50% -50%;
  border: 0;
  background: url('../assets/ui/royal/menu_more.png') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .65));
}
#joystick .js-knob::before, #chat .chat-toggle::before {
  content: '';
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #443272, #16113d 72%);
  box-shadow: inset 0 0 0 1px #e2b765, inset 0 2px 3px rgba(0, 0, 0, .55);
}
#joystick .js-knob::after {
  content: '☾';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffe3a0;
  font: 700 calc(var(--joy) * .28) Georgia, serif;
  text-shadow: 0 1px 1px #7c3b72, 0 0 3px #fff0c0;
}
#joystick.active .js-base { filter: drop-shadow(0 0 8px rgba(255, 221, 139, .72)); }
#joystick.active .js-knob { filter: drop-shadow(0 0 5px rgba(255, 234, 172, .85)); }
#chat .chat-toggle, .theme-royal #chat .chat-toggle, .theme-royal #chat.collapsed .chat-toggle, .theme-royal body.touch #chat .chat-toggle {
  position: relative;
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  background: url('../assets/ui/royal/menu_more.png') center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .62));
}
#chat .chat-toggle svg {
  position: relative;
  z-index: 1;
  display: block !important;
  width: 20px;
  height: 20px;
  color: #ffe5a8;
  filter: drop-shadow(0 1px 1px #572c69);
}
#chat .chat-toggle:hover { filter: brightness(1.13) drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); }
#chat .chat-toggle:focus-visible, #joystick:focus-visible { outline: 2px solid #fff3c0; outline-offset: 2px; }

/* main menu: folded by default, arrow always visible (▶ = expand, ◀ = fold) */
#menuRow .marrow { display: grid !important; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--gold-hi, #ffe39a); color: var(--gold-hi, #ffe39a);
  background: radial-gradient(circle at 50% 30%, #5a34a8, #1a0e40 80%); box-shadow: 0 0 0 1px #000; align-self: center; }
#menuRow .marrow svg { width: 14px; height: 14px; transition: transform .15s; }
#menuRow.full .marrow svg { transform: rotate(180deg); }
#menuRow.compact .mbtn:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { display: none !important; }
#menuRow.full .mbtn { display: block; scale: 1; }

/* chat always sits above the joystick (xcore.js measures and places it); it stays on top of the quest dock so its
   collapsed button keeps receiving the taps on short screens */
#chat.hud-el { z-index: 14; }


/* settings: free character rename (once, first 24 h) */
.rename-row b { flex: 1; color: var(--gold-hi, #ffe39a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rename-edit { gap: 6px; } .rename-edit.hidden { display: none; }
.rename-edit input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--gold, #c9a24a); background: rgba(8, 6, 24, .8); color: #fff; font: inherit; }
.rename-hint { margin: -2px 0 6px; }
/* bot window: potion tier that fits the character's level (★), loot item pick lists */
.pick .pk.suit::after { content: "★"; position: absolute; right: -3px; top: -6px; font-size: 13px; color: #ffe39a; text-shadow: 0 0 2px #000, 0 1px 2px #000; pointer-events: none; }
.lootpick { margin-bottom: 6px; }

/* phone portrait: the monster target text sat on top of the player frame (top centre); it goes just above the hotbar */
@media (orientation: portrait) and (max-width: 720px) {
  #tframe, .theme-royal #tframe { top: auto !important; bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 100px) !important; }
}

/* quest dock, one-line cards (.tight: phone landscape, or whenever the full cards would reach the chat button / joystick) */
.xq .xq-short { display: none; }
.xdock.tight { gap: 2px; }
.xdock.tight .xq.flt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 0; }
.xdock.tight .xq.flt .xq-t { grid-column: 1 / -1; font-size: 10.5px; }
.xdock.tight .xq.flt .xq-ic img { width: 14px; height: 14px; }
.xdock.tight .xq.flt .xq-s { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xdock.tight .xq.flt .xq-d { display: none !important; }
.xdock.tight .xq.flt .xgo { margin: 0; height: 22px; min-height: 22px; padding: 0 8px; font-size: 11.5px; }
.xdock.tight .xq .xq-long { display: none; } .xdock.tight .xq .xq-short { display: inline; }
.xdock.tight .xq.xjq { padding: 3px 6px 4px; margin-top: 2px; border-radius: 9px; }
.xdock.tight .xnav-b { height: 24px; font-size: 12px; }

/* phone landscape: the HUD goes right up to the screen edges. The notch / Dynamic Island only covers the middle of the
   short edge, so the corner pieces (player frame, joystick, minimap, attack) ignore the side safe area; the pieces that
   sit at mid-height (quest dock, chat button, gold panel) keep clear of it. Home-indicator space (bottom) is halved. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --safe-l: 0px; --safe-r: 0px; --safe-b: calc(env(safe-area-inset-bottom, 0px) * 0.4); --gap: 4px; }
  .xdock.left { margin-left: env(safe-area-inset-left, 0px); width: 230px; }
  #currency { margin-right: env(safe-area-inset-right, 0px); }
}
/* phone portrait: sides flush as well (there is no side safe area in portrait) */
@media (orientation: portrait) and (max-width: 720px) { :root { --gap: 4px; } }
/* phone portrait, chat box open: the target text moves above the chat box instead of sitting on it */
@media (orientation: portrait) and (max-width: 720px) {
  #hud:has(#chat.open) #tframe { bottom: calc(var(--gap, 6px) + var(--safe-b, 0px) + 236px) !important; }
}

/* centre notices (#toast): see-through, text only: pops in, then fades away. No box, no border, no frame art. */
html body #toast, html .theme-royal #toast {
  background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; padding: 0 8px !important; border-radius: 0 !important;
  font-size: 17px; font-weight: 700; color: #fff4d6 !important; letter-spacing: .2px; white-space: normal; text-align: center; max-width: min(88vw, 520px); width: max-content;
  text-shadow: 0 2px 0 #000, 0 -1px 0 #000, 1.5px 0 0 #000, -1.5px 0 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, .9), 0 0 16px rgba(20, 10, 60, .8);
  transform: translate(-50%, 0) scale(.9); transition: opacity .35s ease, transform .35s ease;
}
html body #toast::before, html body #toast::after { display: none !important; content: none !important; }
html body #toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); animation: toastPop .32s cubic-bezier(.2, 1.5, .4, 1); transition: none; }
@keyframes toastPop { from { opacity: 0; transform: translate(-50%, 8px) scale(.7); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-width: 720px) { html body #toast { font-size: 15px; } }

/* job-change cards: the picture cycles through every class of the line; the caption names the form on show */
.jc-art { position: relative; } .jc-art img { transition: opacity .65s ease-in-out; }
.jc-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; line-height: 1.15; color: #ffe39a; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; pointer-events: none; }
.jc-cap:empty { display: none; }

/* job-change cards: growth path (one row per branch); the class whose picture is showing is highlighted */
.jc-path { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.jc-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; font-size: 10.5px; line-height: 1.2; }
.jc-prow i { font-style: normal; color: var(--gold, #c9a24a); opacity: .8; }
.jc-prow span { padding: 1px 5px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid transparent; color: #cfc8ee; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.jc-prow span small { margin-left: 3px; font-size: 9px; color: #8affb0; }
.jc-prow span.on { color: #2a1804; background: linear-gradient(180deg, #ffe9a8, #d9a43c); border-color: #fff1c0; font-weight: 700; }
.jc-prow span.on small { color: #3a5a10; }

/* job-change cards: the picture is as large as the card allows (full card height, anchored bottom-left and free to run
   under the text), the class info is packed into the right corner */
.job-card { position: relative; display: block !important; min-height: 236px; padding: 6px !important; overflow: hidden; }
/* the art box takes the picture's own proportions (height = card, width follows), so the auras can be placed in % of it */
.job-card .jc-art { position: absolute; left: 2px; top: 14px; bottom: 12px; width: auto !important; aspect-ratio: 312 / 420; max-width: 70%; overflow: visible; display: block; --au: #ffd98a; }
.job-card .jc-art img { position: absolute; inset: 0; z-index: 2; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; object-position: 0 100%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55)); }
.job-card .jc-info { position: relative; z-index: 1; margin-left: auto; width: 56%; min-height: 224px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 0 5px rgba(0, 0, 0, .9); }
.job-card .jc-info > div { max-width: 100%; }
.job-card .jc-info .jc-sk, .job-card .jc-prow { justify-content: flex-end; }
.job-card .jc-prow span { text-shadow: none; background: rgba(10, 8, 30, .72); }
.job-card .jc-info .btn-gold { align-self: flex-end; margin-top: auto; width: auto; max-width: 100%; padding: 0 12px; white-space: nowrap; text-shadow: none; }
.job-card .jc-cap { left: 0; right: auto; bottom: 0; text-align: left; font-size: 10.5px; }
@media (max-width: 720px) { .job-card { min-height: 200px; } .job-card .jc-info { min-height: 188px; width: 60%; } }

/* job-change cards: aura under the feet and above the head of the class on show, in that class's own colour */
.jc-art .ja { position: absolute; display: block; pointer-events: none; }
.ja-pillar { z-index: 0; left: 10%; right: 10%; bottom: 5%; top: -4%; opacity: .5; mix-blend-mode: screen; background: linear-gradient(to top, var(--au), transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 18%, transparent 72%); mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 18%, transparent 72%);
  animation: ja-breathe 2.8s ease-in-out infinite; transition: background .3s; }
.ja-foot { z-index: 1; left: 50%; top: 95%; width: 124%; aspect-ratio: 1; margin: -62% 0 0 -62%; transform: scaleY(.28); }
.ja-foot::before, .ja-foot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; }
.ja-foot::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .6), var(--au) 32%, transparent 62%), repeating-conic-gradient(from 0deg, var(--au) 0 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0 58%, transparent 60% 74%, #000 76% 90%, transparent 93%); mask-image: radial-gradient(closest-side, #000 0 58%, transparent 60% 74%, #000 76% 90%, transparent 93%);
  animation: ja-spin 14s linear infinite; filter: drop-shadow(0 0 6px var(--au)); }
.ja-foot::after { inset: 8%; border: 2px double var(--au); box-shadow: 0 0 12px var(--au), inset 0 0 14px var(--au);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .8) 25%, transparent 30% 70%, rgba(255, 255, 255, .8) 75%, transparent 80%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 66% 100%); mask-image: radial-gradient(closest-side, transparent 62%, #000 66% 100%);
  animation: ja-spin 7s linear infinite reverse; }
.ja-foot b { position: absolute; inset: 20%; border-radius: 50%; border: 2px solid var(--au); box-shadow: 0 0 8px var(--au); opacity: 0; animation: ja-ring 3s ease-out infinite; }
.ja-foot b:nth-child(2) { animation-delay: 1.5s; }
.ja-rays { z-index: 0; left: 50%; top: 20%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%; border-radius: 50%; opacity: .38; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, var(--au) 0 5deg, transparent 5deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); animation: ja-spin 40s linear infinite; }
.ja-halo { z-index: 3; left: 50%; top: 1%; width: 52%; aspect-ratio: 1; margin: -26% 0 0 -26%; transform: scaleY(.26); border-radius: 50%;
  border: 3px solid #fff6d0; box-shadow: 0 0 8px 2px var(--au), 0 0 22px 6px var(--au), inset 0 0 8px 1px var(--au); animation: ja-halo 2.6s ease-in-out infinite; }
@keyframes ja-spin { to { rotate: 360deg; } }
@keyframes ja-breathe { 50% { opacity: .8; } }
@keyframes ja-halo { 50% { translate: 0 -8%; filter: brightness(1.25); } }
@keyframes ja-ring { 0% { scale: .4; opacity: .9; } 100% { scale: 2.3; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jc-art .ja, .jc-art .ja::before, .jc-art .ja::after, .jc-art .ja b { animation: none; } }
/* the text stays on top of the (now layered) picture and its auras */
.job-card .jc-info { z-index: 6; } .job-card .jc-cap { z-index: 6; }

/* job-change cards: the branch whose forms are being shown right now */
.jc-prow { opacity: .6; transition: opacity .3s; } .jc-prow.cur { opacity: 1; }

/* "อาชีพ" window (class list): cards keep their own height (they used to be squeezed and drawn over each other when the
   list was taller than the window), the status never breaks word by word, and narrow phones get a tighter card */
.win.class-win .win-body.class-body { flex-direction: column !important; align-items: stretch; min-height: 0; }
.class-body .cc-list { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.class-body .hint2 { flex: none; }
.cc-list .cc { flex: none; }
.cc-i > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-s { flex-wrap: wrap; gap: 2px 8px; }
.cc-s > span:first-child, .cc-s > b { white-space: nowrap; display: inline; }
.cc-rq { line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .cc { grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 4px; padding: 4px 4px; }
  .cc.t2 { margin-left: 6px; } .cc.t3 { margin-left: 12px; }
  .cc-em { width: 26px; height: 26px; }
  .cc .cc-art { height: 52px !important; max-width: 40px !important; margin: -4px 0; }
  .cc .btn-gold, .cc .btn-ghost { min-width: 48px; padding: 0 6px; }
  .cc-i small { white-space: normal; }
}

/* ===== equipment page (Ragnarok-like): slots with item names on both sides, the hero as he looks now in the middle,
   companions + effects underneath, stats as a grid. Wide = look | stats; narrow = stacked. ===== */
.win.char-win.one-page { width: min(780px, calc(100vw - 16px)); }
.win .win-body.eqv-body { display: block !important; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px; }
.eqv { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(170px, 1fr); gap: 8px; align-items: stretch; }
.eqv-look { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eqv-top { display: grid; grid-template-columns: minmax(0, .82fr) minmax(150px, 1.5fr) minmax(0, .82fr); gap: 6px; align-items: stretch; }
.eqv-col { display: flex; flex-direction: column; gap: 5px; justify-content: space-between; min-width: 0; }
.eqv-slot { flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 3px 5px; border-radius: 9px; min-width: 0; cursor: default;
  background: linear-gradient(180deg, rgba(34, 24, 78, .7), rgba(12, 9, 34, .78)); border: 1px solid rgba(224, 178, 82, .28); }
.eqv-slot:not(.empty) { cursor: pointer; } .eqv-slot:not(.empty):hover { border-color: var(--gold-hi, #ffe39a); }
.eqv-slot.r { flex-direction: row-reverse !important; text-align: right; }
.eqv-slot .itile { width: 42px !important; height: 42px !important; flex: none; }
.eqv-slot.empty { opacity: .62; }
.eqv-nm { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.eqv-nm b { font-size: 12px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.eqv-nm b.none { color: #7f89b0; font-weight: 400; }
.eqv-nm small { font-size: 10px; color: var(--muted, #9aa6cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqv-stage { position: relative; min-height: 290px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 20px;
  background: radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--au, #ffd98a) 26%, transparent), transparent 62%), linear-gradient(180deg, #1a1f55, #0b0c2a 78%);
  border: 1px solid rgba(224, 178, 82, .4); }
.eqv-stage .doll-name { position: absolute; left: 0; right: 0; top: 5px; text-align: center; font-size: 14px; font-weight: 700; z-index: 5; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.eqv-stage .doll-name small { display: block; font-size: 10.5px; font-weight: 400; color: var(--gold-hi, #ffe39a); }
.eqv-stage .doll-note { position: absolute; left: 4px; right: 4px; bottom: 2px; text-align: center; font-size: 9.5px; color: #ffd27a; z-index: 6; }
.eqv-stage .doll-rot { position: absolute; bottom: 6px; z-index: 6; } .eqv-stage .doll-rot.l { left: 6px; } .eqv-stage .doll-rot.r { right: 6px; }
.eqv-stage .doll-rot button { width: 30px; height: 30px; }
.eqv-fig { position: relative; flex: none; --k: 2; }
.eqv-fig img { position: absolute; image-rendering: pixelated; max-width: none !important; max-height: none !important; }
.eqv-fig #dollImg { left: 0; bottom: 0; z-index: 3; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.eqv-ride { left: 50%; bottom: 0; translate: -50% 0; z-index: 2; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.eqv-pet { left: 100%; bottom: 46%; margin-left: 6px; z-index: 4; animation: eqv-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.eqv-shoulder { right: 62%; bottom: 60%; z-index: 4; animation: eqv-bob 3s ease-in-out infinite; }
.eqv-shadow { position: absolute; left: 8%; right: 8%; bottom: -5px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); z-index: 1; }
.eqv-fig .ja { position: absolute; display: block; pointer-events: none; }
.eqv-fig .ja-foot { top: auto; bottom: 0; margin: 0 0 -62% -62%; }
.eqv-wglow { position: absolute; left: -6%; bottom: 30%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), var(--au, #ffd98a) 40%, transparent 72%); animation: ja-breathe 1.6s ease-in-out infinite; }
@keyframes eqv-bob { 50% { translate: 0 -5px; } }
/* companions + effects */
.eqv-comps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0 !important; }
.eqv-comp { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 4px 6px !important; min-width: 0; border-radius: 9px; text-align: left; font: inherit; color: #fff;
  background: linear-gradient(180deg, rgba(34, 24, 78, .7), rgba(12, 9, 34, .78)); border: 1px solid rgba(224, 178, 82, .28); }
button.eqv-comp { cursor: pointer; } button.eqv-comp:hover { border-color: var(--gold-hi, #ffe39a); }
.eqv-comp span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.eqv-comp small { font-size: 9.5px; color: var(--muted, #9aa6cc); white-space: nowrap; }
.eqv-comp b { font-size: 11.5px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: none; white-space: normal; text-overflow: clip; }
.eqv-comp:not(.on) b { color: #7f89b0; font-weight: 400; } .eqv-comp.on b { color: var(--gold-hi, #ffe39a); }
.eqv-th { flex: none; width: 34px; height: 34px; border-radius: 8px; background: rgba(0, 0, 0, .35) center / contain no-repeat; image-rendering: pixelated; border: 1px solid rgba(255, 255, 255, .08); }
.eqv-th.none { background-image: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .14) 47% 53%, transparent 54%); }
.eqv-th.fxi { background: radial-gradient(closest-side, #fff, var(--au, #ffd98a) 45%, transparent 75%); opacity: .35; } .eqv-comp.fx.on .fxi { opacity: 1; }
.eqv .ridepick { max-height: 92px; }
/* stats */
.eqv-stats { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eqv-stats .power { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 10px; }
.eqv-stats .power small { font-size: 12px; } .eqv-stats .power b { font-size: 22px; }
.eqv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; }
.eqv-grid .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; background: rgba(8, 8, 30, .55); border: 1px solid rgba(255, 255, 255, .06); }
.eqv-grid .stat span { color: var(--muted, #9aa6cc); font-size: 11.5px; white-space: nowrap; } .eqv-grid .stat b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eqv-stats .hint2 { font-size: 10.5px; line-height: 1.3; }

/* narrow (phone portrait, small windows): look on top, stats below as a 3-column grid */
@media (max-width: 640px) {
  .eqv { grid-template-columns: minmax(0, 1fr); }
  .eqv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eqv-top { grid-template-columns: minmax(0, .9fr) minmax(112px, 1.2fr) minmax(0, .9fr); gap: 4px; }
  .eqv-slot { padding: 3px 3px; gap: 4px !important; } .eqv-slot .itile { width: 36px !important; height: 36px !important; }
  .eqv-nm b { font-size: 10.5px; } .eqv-nm small { font-size: 9px; }
  .eqv-stage { min-height: 236px; }
  .eqv-comps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eqv-grid .stat { padding: 3px 6px; font-size: 12px; }
}
@media (max-width: 380px) { .eqv-nm small { display: none; } .eqv-slot .itile { width: 32px !important; height: 32px !important; } .eqv-stage { min-height: 200px; } }
/* phone landscape (short): everything on one screen: look left, stats right, compact rows */
@media (max-height: 460px) and (orientation: landscape) {
  .win.char-win.one-page { width: min(820px, calc(100vw - 16px)); }
  .win .win-body.eqv-body { padding: 4px 6px; }
  .eqv { grid-template-columns: minmax(0, 1.7fr) minmax(190px, 1fr); gap: 6px; }
  .eqv-stage { min-height: 0; height: clamp(120px, calc(100vh - 190px), 230px); padding-bottom: 12px; }
  .eqv-col { gap: 3px; } .eqv-slot { padding: 2px 4px; } .eqv-slot .itile { width: 30px !important; height: 30px !important; }
  .eqv-nm b { font-size: 10.5px; -webkit-line-clamp: 1; } .eqv-nm small { font-size: 9px; }
  .eqv-comps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .eqv-th { width: 24px; height: 24px; } .eqv-comp { padding: 2px 4px !important; } .eqv-comp b { font-size: 10.5px; -webkit-line-clamp: 1; }
  .eqv-stats { gap: 4px; } .eqv-stats .power { padding: 3px 10px; } .eqv-stats .power b { font-size: 18px; }
  .eqv-grid { gap: 2px 4px; } .eqv-grid .stat { padding: 2px 6px; font-size: 11.5px; }
  .eqv-stats .hint2 { display: none; }
}

/* bot hunt list: monsters outside the level window are greyed out (not hunted whatever the tick says) */
.pick.mobpick .pk.mob.offlv { opacity: .28; filter: grayscale(1); }
.pick.mobpick .pk.mob.offlv::before { border-color: #777; }

/* ===== job-change window, tidy layout (2026-10-10): the window has a real width (it used to shrink to ~218 px on phones
   because the cards had no width of their own), and a card is two columns that never overlap: picture | info. ===== */
.win.job-win { width: min(760px, calc(100vw - 12px)) !important; max-width: none !important; }
.win.job-win .win-body.job-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); padding: 6px 8px 8px; }
.job-cur { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; font-size: 12.5px; line-height: 1.35; }
.job-cur img { width: 40px; height: 40px; flex: none; }
.job-cur > div { min-width: 0; } .job-cur b { font-size: 15px; }
.job-req { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.job-req span { white-space: nowrap; }
.job-kids { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px; }
.job-card { display: grid !important; grid-template-columns: minmax(104px, 40%) minmax(0, 1fr); column-gap: 8px; align-items: stretch; min-height: 0 !important; padding: 6px !important; overflow: hidden; }
.job-card .jc-art { position: relative !important; left: auto; top: auto; bottom: auto; inset: auto; width: 100% !important; max-width: none; aspect-ratio: 312 / 420; align-self: end; overflow: visible; display: block; }
.job-card .jc-info { position: relative; z-index: 6; width: auto !important; min-height: 0 !important; margin: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; text-shadow: none; font-size: 12px; }
.job-card .jc-info > b { font-size: 16px; line-height: 1.15; }
.job-card .jc-info > small { margin-top: -2px; }
.job-card .jc-em { position: absolute; right: 0; top: 0; width: 26px; height: 26px; }
.job-card .jc-info .jc-sk, .job-card .jc-prow { justify-content: flex-start; }
.job-card .jc-sk { flex-wrap: wrap; gap: 3px; } .job-card .jc-sk img, .job-card .jc-sk .ico { width: 24px; height: 24px; }
.job-card .jc-path { width: 100%; gap: 3px; margin-top: 2px; }
.job-card .jc-prow { flex-wrap: wrap; gap: 2px 3px; font-size: 10.5px; }
.job-card .jc-prow span { white-space: normal; background: rgba(255, 255, 255, .07); }
.job-card .jc-prow span.on { background: linear-gradient(180deg, #ffe9a8, #d9a43c); }
.job-card .jc-info .btn-gold { align-self: stretch; width: auto; margin-top: auto; height: 34px; font-size: 14px; padding: 0 8px; white-space: nowrap; }
.job-card .jc-cap { left: 0; right: 0; bottom: 0; text-align: center; font-size: 10.5px; }
.job-card .jc-note { display: none; }
@media (max-width: 720px) { .job-card { min-height: 0 !important; } .job-card .jc-info { min-height: 0 !important; width: auto !important; } }
/* phone landscape: short screen, so smaller pictures and three jobs across */
@media (max-height: 480px) and (orientation: landscape) {
  .win.job-win { width: min(900px, calc(100vw - 12px)) !important; }
  .win.job-win .win-body.job-body { max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); padding: 4px 6px 6px; }
  .job-cur { padding: 0 4px 4px; font-size: 11.5px; } .job-cur img { width: 30px; height: 30px; }
  .job-kids { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px; }
  .job-card { grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); padding: 4px !important; }
  .job-card .jc-info { font-size: 11px; gap: 2px; } .job-card .jc-info > b { font-size: 14px; }
  .job-card .jc-sk img, .job-card .jc-sk .ico { width: 20px; height: 20px; }
  .job-card .jc-info .btn-gold { height: 28px; font-size: 12.5px; }
}

/* job-change window on ONE page (no scroll): gwin.js fit() gives .job-kids the height that is left; rows share it */
.win.job-win .win-body.job-body { overflow: hidden !important; max-height: none; }
.job-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.job-kids > .job-card:only-child { grid-column: 1 / -1; }
.job-card { grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.job-card .jc-art { height: 100%; width: auto !important; min-height: 0; align-self: stretch; }
.job-card .jc-info { overflow: hidden; min-height: 0 !important; }
.job-card .jc-info > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 30px); }
.job-card .jc-prow { flex-wrap: nowrap; white-space: nowrap; }
.job-card .jc-prow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 4px; }
.job-card .jc-prow i { flex: none; }
/* shorter cards: drop the English name, then the weapon line; smaller icons and button */
.job-kids.mid .jc-info > small, .job-kids.tiny .jc-info > small, .job-kids.tiny .jc-info > div:not(.jc-sk):not(.jc-path) { display: none; }
.job-kids.mid .jc-info, .job-kids.tiny .jc-info { gap: 2px; font-size: 11px; }
.job-kids.mid .jc-info > b { font-size: 14.5px; } .job-kids.tiny .jc-info > b { font-size: 13.5px; }
.job-kids.mid .jc-sk img, .job-kids.mid .jc-sk .ico { width: 21px; height: 21px; }
.job-kids.tiny .jc-sk img, .job-kids.tiny .jc-sk .ico { width: 18px; height: 18px; } .job-kids.tiny .jc-sk { flex-wrap: nowrap; gap: 2px; }
.job-kids.mid .jc-info .btn-gold { height: 28px; font-size: 13px; } .job-kids.tiny .jc-info .btn-gold { height: 22px; font-size: 12px; }
.job-kids.tiny .jc-prow { font-size: 9.5px; } .job-kids.tiny .jc-path { gap: 1px; margin-top: 0; } .job-kids.tiny .jc-em { width: 20px; height: 20px; }
.job-kids.tiny .job-card { padding: 3px 5px !important; } .job-kids.tiny .jc-cap { font-size: 9px; }
@media (max-width: 520px) and (orientation: portrait) { .job-kids { grid-template-columns: minmax(0, 1fr); gap: 5px; } .job-cur { padding-bottom: 5px; } }
@media (max-height: 480px) and (orientation: landscape) { .job-kids { grid-template-columns: repeat(3, minmax(0, 1fr)); } .job-kids:has(> .job-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.job-card .jc-info > b, .job-card .jc-info > .jc-sk, .job-card .jc-info > .btn-gold { flex: none; }
.job-card .jc-path { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.job-kids.tiny .jc-info { gap: 1px; } .job-kids.tiny .jc-info > b { line-height: 1.2; }
.job-kids.tiny .jc-prow { line-height: 1.1; } .job-kids.tiny .jc-prow span { padding: 0 3px; }
.job-kids.tiny .jc-info .btn-gold { height: 21px; min-height: 0; }

/* ===== cash shop (gems): mounts / vehicles / wings ===== */
.win.cash-win { width: min(720px, calc(100vw - 12px)) !important; max-width: none !important; }
.win.cash-win .win-body.cash-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); padding: 6px 8px 8px; }
.cash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 2px 4px 8px; }
.cash-bal { font-size: 14px; display: inline-flex; align-items: center; gap: 5px; } .cash-bal b { font-size: 18px; color: #9fe6ff; }
.cash-gem { display: inline-block; width: 12px; height: 12px; margin-right: 3px; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #e6fbff, #58c8ff 45%, #2a6cff); box-shadow: 0 0 5px #58c8ff; vertical-align: middle; flex: none; }
.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cash-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 10px; text-align: center; min-width: 0;
  background: linear-gradient(180deg, rgba(34, 24, 78, .7), rgba(12, 9, 34, .78)); border: 1px solid rgba(224, 178, 82, .28); }
.cash-card.has { border-color: rgba(120, 220, 255, .55); } .cash-card.on { box-shadow: 0 0 0 2px var(--gold-hi, #ffe39a) inset; }
.cash-pic { width: 100%; height: 78px; background: center / contain no-repeat; image-rendering: pixelated; }
.cash-card b { font-size: 12.5px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.cash-price { font-size: 14px; font-weight: 700; color: #9fe6ff; } .cash-own { font-size: 11px; color: #8affb0; }
.cash-card button { width: 100%; height: 30px; font-size: 13px; padding: 0 6px; }
.cash-card button[disabled] { opacity: .45; }
.chipo.cash { border-color: #58c8ff; color: #bfeaff; }
@media (max-height: 480px) and (orientation: landscape) { .win.cash-win .win-body.cash-body { max-height: calc(100dvh - 104px); } .cash-pic { height: 56px; } .cash-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } }

/* ===== shop window v2: grouped tile grids, cart strip, totals in the footer ===== */
.win.shop-win { width: min(640px, calc(100vw - 12px)) !important; max-width: none !important; }
.win.shop-win .win-body.shop2-body { display: block; overflow: hidden; padding: 6px 8px; }
.shop2 { display: flex; flex-direction: column; gap: 6px; min-height: 0; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
.shop2 > .hint2 { flex: none; font-size: 11px; line-height: 1.3; }
.shop2 .shop-switch { flex: none; flex-wrap: wrap; }
.shop2-scroll { flex: 1 1 auto; min-height: 90px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.shop2-sec { padding: 0 0 8px; }
.shop2-sec + .shop2-sec { border-top: 1px solid rgba(224, 178, 82, .45); padding-top: 6px; }
.shop2-sec h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--gold-hi, #ffe39a);
  background: linear-gradient(90deg, rgba(224, 178, 82, .22), rgba(224, 178, 82, 0) 85%); border-left: 3px solid var(--gold, #c9a24a); }
.shop2-sec h5 small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--muted, #9aa6cc); }
.shop2-sec h5.pick { cursor: pointer; user-select: none; } .shop2-sec h5.pick:hover { background: rgba(224, 178, 82, .3); }
.shop2-sec h5 .bx { font-style: normal; font-size: 15px; line-height: 1; color: #fff; }
.shop2-sec h5.all { background: linear-gradient(90deg, rgba(90, 216, 120, .32), rgba(90, 216, 120, 0) 85%); border-left-color: #5ad878; }
.shop2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 4px; }
.shop2-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 1px 2px; min-width: 0; border-radius: 8px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(8, 8, 30, .5); border: 1px solid rgba(255, 255, 255, .08); }
.shop2-cell:hover { border-color: rgba(255, 227, 154, .6); }
.shop2-cell .itile { width: 40px !important; height: 40px !important; pointer-events: none; }
.shop2-cell .p { font-size: 10.5px; line-height: 1.1; color: #ffe39a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop2-cell .lv { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: 8.5px; line-height: 1; padding: 1px 2px; border-radius: 3px; background: rgba(0, 0, 0, .7); color: #cfe0ff; z-index: 2; }
.shop2-cell .q { position: absolute; right: 1px; top: 1px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; color: #10240f; background: #6dea86; z-index: 3; box-shadow: 0 0 0 1px #0a1a0a; }
.shop2-cell.on { background: rgba(60, 160, 90, .28); border-color: #6dea86; }
.shop2-cell.dim { opacity: .45; }
.shop2-cart { flex: none; max-height: 112px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 3px; padding: 5px 6px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(224, 178, 82, .35); }
.shop2-cart.empty { font-size: 11.5px; color: var(--muted, #9aa6cc); text-align: center; padding: 7px; }
.shop2-crow { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.shop2-crow .itile { width: 26px !important; height: 26px !important; flex: none; }
.shop2-crow b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop2-crow .qty { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.shop2-crow .qty button, .shop2-x { height: 24px; min-width: 24px; padding: 0 5px; border-radius: 6px; font: inherit; font-size: 12px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); cursor: pointer; }
.shop2-crow .qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.shop2-crow .price { flex: none; min-width: 58px; text-align: right; font-size: 12px; }
.shop2-x { color: #ff9a8a; flex: none; }
.win.shop-win .win-foot { gap: 8px; flex-wrap: nowrap; }
.win.shop-win .win-foot .price.have { flex: none; font-size: 12px; opacity: .85; }
.win.shop-win .win-foot .cart-total { font-size: 14px; white-space: nowrap; min-width: 0; }
.win.shop-win .win-foot .cart-total span { font-size: 17px; font-weight: 700; color: var(--gold-hi, #ffe39a); }
.win.shop-win .win-foot .cart-total.short span { color: #ff8a7a; }
.win.shop-win .win-foot .btn-gold { flex: none; min-width: 84px; }
@media (max-width: 480px) { .win.shop-win .win-foot .cart-total { font-size: 12.5px; } .win.shop-win .win-foot .cart-total span { font-size: 15px; } .shop2-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); } }
@media (max-height: 480px) and (orientation: landscape) {
  .win.shop-win { width: min(860px, calc(100vw - 12px)) !important; }
  .shop2 { max-height: calc(100dvh - 148px); gap: 4px; } .shop2-cart { max-height: 62px; } .shop2 > .hint2 { display: none; }
  .shop2-scroll { min-height: 60px; }
}

/* mailbox on the main menu: counter bubble; mail window header */
.mbtn.xmail { position: relative; }
.mbtn .mcount { position: absolute; right: -2px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  color: #fff; background: #e23a3a; box-shadow: 0 0 0 2px #1a1040, 0 0 8px rgba(255, 80, 80, .8); z-index: 3; pointer-events: none; }
.mbtn .mcount.hidden { display: none; }
.mail-top { justify-content: space-between; align-items: center; padding: 0 2px 6px; font-size: 13px; }
.mail-top .btn-gold { height: 32px; padding: 0 14px; font-size: 14px; }
.win.mail-win { width: min(420px, calc(100vw - 12px)) !important; }
.win.mail-win .win-body.mail-body { display: flex; flex-direction: column; max-height: calc(100dvh - 150px); }
.win.mail-win .rows.scroll { overflow-y: auto; min-height: 0; }
/* the mailbox is a main-menu icon: it stays on show when the menu row is folded */
#menuRow.compact .mbtn.xmail:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { display: block !important; }

.eqv-auto { width: 100%; height: 34px; font-size: 14px; }
@media (max-height: 460px) and (orientation: landscape) { .eqv-auto { height: 28px; font-size: 13px; } }

.rf-note { font-size: 11px; color: var(--muted, #9aa6cc); }

/* auto-equip button in the character window and the bag footer */
.spts #stEquip { margin-left: 6px; }
.bag-foot #bagEq, .bag-foot #bagHb, .bag-foot #bagSort { white-space: nowrap; }
@media (max-width: 480px) { .win .win-foot .bag-foot { flex-wrap: wrap; gap: 6px 8px; } .bag-foot #bagEq, .bag-foot #bagHb, .bag-foot #bagSort { height: 30px; padding: 0 10px; font-size: 12.5px; } }
/* refine and bot are main-menu icons too: on show when the menu row is folded (with bag / hero / skills / mail) */
#menuRow.compact .mbtn.xrefine:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]),
#menuRow.compact .mbtn.xbot:not(.marrow):not([data-menu="bag"]):not([data-menu="char"]):not([data-menu="skill"]) { display: block !important; }

/* bot: auto-heal settings */
.bheal .bheal-names { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; font: inherit; font-size: 13px; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(224, 178, 82, .45); }
.bheal .seg { flex-wrap: wrap; }

/* keyboard shortcut cap on the menu buttons (mouse / keyboard devices only) */
.mbtn { position: relative; }
.mbtn .mkey { position: absolute; left: -1px; top: -2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 4px; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center;
  color: #1a1004; background: linear-gradient(180deg, #fff3c4, #d9a43c); box-shadow: 0 0 0 1px #2a1a04; z-index: 3; pointer-events: none; }
body.touch .mbtn .mkey { display: none; }

/* keyboard key shown ABOVE each menu icon on computers (never on phones / tablets) */
.mbtn .mkey { left: 50%; top: -9px; transform: translateX(-50%); min-width: 16px; height: 15px; line-height: 15px; font-size: 10px; border-radius: 4px; }
#menuRow.compact .mbtn .mkey { top: -6px; }

/* skill window: points of each class of the line */
.win.skill-win .win-body.sk-body { flex-wrap: wrap; }
.sk-ptsbar { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 2px 6px; font-size: 12px; }
.sk-ptsbar span { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #cfc8ee; white-space: nowrap; }
.sk-ptsbar span b { color: #9aa6cc; margin-left: 2px; }
.sk-ptsbar span.has b { color: #7dff8a; }
.sk-ptsbar span.on { border-color: var(--gold-hi, #ffe39a); color: #fff; }
.sk-ptsbar small { color: var(--muted, #9aa6cc); font-size: 10.5px; }

/* ===== HP / SP / EXP / Job bars, pixel look (owner's pick "แบบ 2", 2026-10-10): the same colours as before, but as hard
   colour bands (light / main / dark / deep) with a coarse grain over them instead of a smooth glossy gradient ===== */
.h2-bar.hp i, .h2-bar.mp i, .h2-bar.exp > i, .h2-bar.exp .eh i { image-rendering: pixelated; background: linear-gradient(180deg, var(--ba) 0 22%, var(--bb) 22% 68%, var(--bc) 68% 88%, var(--bd) 88%) !important; }
.h2-bar.hp i { --ba: #ff9a9a; --bb: #f23a46; --bc: #a8101c; --bd: #5e0810; }
.h2-bar.mp i { --ba: #9ad8ff; --bb: #2c8cf0; --bc: #134ab0; --bd: #0a2a6a; }
.h2-bar.exp > i, .h2-bar.exp .eh.l i { --ba: #fff3a0; --bb: #e8b64e; --bc: #9a6414; --bd: #5a3808; }
.h2-bar.exp .eh.r i { --ba: #b8f4ff; --bb: #3cc4e8; --bc: #146a98; --bd: #0a3e5c; }
.h2-bar.hp i::after, .h2-bar.mp i::after, .h2-bar.exp > i::after, .h2-bar.exp .eh i::after { content: ""; position: absolute; inset: 0; left: 0; right: 0; top: 0; height: auto; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 128px 128px;
  image-rendering: pixelated; mix-blend-mode: overlay; opacity: .75; }

/* target frame HP bar: the same pixel bands + grain as the HUD bars */
#tframe .tbar i { image-rendering: pixelated; background: linear-gradient(180deg, #ff9a9a 0 25%, #f23a46 25% 70%, #a8101c 70% 90%, #5e0810 90%) !important; overflow: hidden; }
#tframe .tbar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: overlay; opacity: .75; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 128px 128px; }
.bot-mode { padding: 4px 8px 6px; margin-bottom: 4px; border-radius: 8px; background: rgba(224, 178, 82, .1); border: 1px solid rgba(224, 178, 82, .3); font-size: 11.5px; line-height: 1.35; }

/* ===== hotbar rows: arrows at the right end, extra rows stacked above the bar ===== */
#hbArrows { position: absolute; left: 100%; bottom: 6px; margin-left: 3px; display: flex; flex-direction: column; gap: 3px; z-index: 2; }
#hbArrows button { width: 20px; height: 18px; padding: 0; border-radius: 5px; font: 700 10px/1 sans-serif; color: var(--gold-hi, #ffe39a); cursor: pointer;
  background: rgba(12, 9, 34, .8); border: 1px solid rgba(224, 178, 82, .7); }
#hbArrows button:hover { background: rgba(60, 40, 120, .9); } #hbArrows button[disabled] { opacity: .35; cursor: default; }
#hbx { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 2px; pointer-events: none; }
#hbx .hbx-row { display: flex; gap: inherit; pointer-events: auto; }
#hotbar { --hbgap: 6px; } #hbx .hbx-row { gap: var(--hbgap); }
#hbx .slot .key:empty { display: none; }
@media (max-width: 720px) { #hotbar { --hbgap: 4px; } #hbArrows button { width: 18px; height: 16px; } }
/* the narrow portrait bar is a 5 x 2 grid: extra rows follow the same grid */
@media (orientation: portrait) and (max-width: 720px) { #hbx .hbx-row { display: grid; grid-template-columns: repeat(5, var(--slot)); gap: 8px 4px; } #hbx { gap: 8px; padding-bottom: 6px; } }

/* players online: small green line in the bottom-left corner, under the joystick */
#onlineInfo { position: fixed; left: calc(6px + var(--safe-l, 0px)); bottom: calc(1px + var(--safe-b, 0px)); z-index: 5; pointer-events: none; font-size: 9.5px; line-height: 1.1; font-weight: 600; color: #6dea86; white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }

/* ===== rewards window (xreward.js): 7-day login / 30-day check-in ===== */
.rw-head { font-size: 14px; } .rw-head b { font-size: 18px; color: var(--gold-hi, #ffe39a); }
.rw-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-bottom: 6px; }
.rw-grid.rw-check { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.rw-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; min-width: 0; text-align: center;
  background: linear-gradient(180deg, rgba(34, 24, 78, .7), rgba(12, 9, 34, .78)); border: 1px solid rgba(224, 178, 82, .28); }
.rw-card > b { font-size: 12px; color: #cfc8ee; }
.rw-card.big { border-color: rgba(255, 227, 154, .8); background: linear-gradient(180deg, rgba(92, 64, 20, .55), rgba(12, 9, 34, .8)); } .rw-card.big > b { color: var(--gold-hi, #ffe39a); }
.rw-card.can { box-shadow: 0 0 0 2px var(--gold-hi, #ffe39a) inset, 0 0 12px rgba(255, 227, 154, .35); }
.rw-card.got { opacity: .5; }
.rw-its { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; flex: 1; align-content: center; min-height: 44px; }
.rw-it { display: flex; flex-direction: column; align-items: center; width: 34px; } .rw-it img { width: 28px; height: 28px; image-rendering: pixelated; }
.rw-it small { font-size: 9.5px; line-height: 1.1; color: #fff; white-space: nowrap; }
.rw-it.q-special small { color: #5ad85a; } .rw-it.q-rare small { color: #4aa0ff; } .rw-it.q-legend small { color: #c060ff; }
.rw-card button { width: 100%; height: 26px; font-size: 12.5px; padding: 0 4px; } .rw-ok { font-size: 11px; color: #8affb0; } .rw-wait { font-size: 11px; color: #7f89b0; }
.rw-dot { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #ff4a5a; box-shadow: 0 0 0 1.5px #1a1040; pointer-events: none; }

/* rewards: special prizes (pets / rides / framed titles), the gift button at the top centre, title frames */
.rw-sp { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 1px; } .rw-sp small { font-size: 9.5px; line-height: 1.15; color: var(--gold-hi, #ffe39a); }
.rw-pic { display: block; width: 46px; height: 40px; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(255, 227, 154, .6)); }
.rw-sp .np-title { font-style: normal; font-size: 9.5px; white-space: nowrap; }
#rwBtn { position: fixed; left: 50%; top: 0; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px 2px 8px; cursor: pointer;
  font: 600 12px Kanit, sans-serif; color: #ffe9b0; border: 1px solid #e0b252; border-top: 0; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #3a2a86, #1a1040); box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 227, 154, .35); pointer-events: auto; }
#rwBtn:hover { filter: brightness(1.2); }
#rwBtn .rw-gift { width: 16px; height: 16px; background: url(../../game/art/icons/items/mystery_box.png) center / contain no-repeat; image-rendering: pixelated; }
#rwBtn em { display: none; font-style: normal; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px; background: #ff4a5a; color: #fff; font-size: 10px; text-align: center; }
#rwBtn.on { color: #fff; background: linear-gradient(180deg, #c8902a, #6a3c0c); animation: rw-glow 1.4s ease-in-out infinite; } #rwBtn.on em { display: inline-block; }
#rwBtn.on .rw-gift { animation: rw-hop .9s ease-in-out infinite; }
@keyframes rw-glow { 50% { box-shadow: 0 2px 16px rgba(255, 210, 90, .95), inset 0 -1px 0 rgba(255, 255, 255, .5); } }
@keyframes rw-hop { 50% { transform: translateY(-2px) rotate(-8deg); } }
.np-title.tf { display: inline-block; padding: 0 9px; border-radius: 9px; border: 1px solid; line-height: 1.5; }
.np-title.tf-silver { color: #f4f7ff; border-color: #dfe6f5; background: linear-gradient(180deg, rgba(120, 132, 168, .85), rgba(40, 46, 76, .9)); box-shadow: 0 0 0 1px #5a6488, inset 0 1px 0 rgba(255, 255, 255, .5); }
.np-title.tf-moon { color: #d8f2ff; border-color: #7ad8ff; background: linear-gradient(180deg, rgba(30, 70, 150, .9), rgba(12, 18, 60, .92)); box-shadow: 0 0 0 1px #1a3a8a, 0 0 9px rgba(122, 216, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* the gift tab hangs from the top edge at the centre: the menu row starts below it */
#rwBtn { height: 21px; font-size: 11.5px; padding: 0 10px 1px 7px; } #rwBtn .rw-gift { width: 14px; height: 14px; }
#topright #menuRow { margin-top: 20px; }
@media (max-width: 560px) { #rwBtn span { display: none; } #rwBtn { padding: 0 8px 1px; height: 19px; } }
/* equip window: 6 companion / effect slots (ride, pet, shoulder, head effect, foot effect, gear effects) = 3 per row */
.eqv-comps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-height: 460px) and (orientation: landscape) { .eqv-comps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eqv-th.fxi.lock { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 3px, transparent 3px 7px); opacity: .5 !important; }

/* cash shop: utility items (bag expansions, portable shop pass) */
.cash-desc { font-size: 10.5px; line-height: 1.25; color: #b9b3d8; min-height: 2.5em; }
.cash-card.util .cash-pic { height: 60px; } .cash-card.util.big .cash-pic { filter: drop-shadow(0 0 7px rgba(255, 210, 90, .95)) saturate(1.3); }
.cash-card.util { grid-column: span 1; } .cash-card button[disabled].btn-buy { opacity: .7; }