/* ================= Ornate Royal theme (style 5) =================
   Active only on html.theme-royal, which js/theme.js sets after assets/ui/royal/manifest.json loads (ready: true).
   Classic look = css/studio.css alone (backup: backups/ui_before_ornate_royal_20261009/).
   Surface map: concepts/ornate_royal/UI_INVENTORY.md. Assets + slot boxes: tools/build_royal_ui.py -> assets/ui/royal/.

   Shared art:
   - win_frame9.png (722x451): clean nine-slice royal frame (slices 104 124 115 124; rail inner edges 50 40 40 41).
     The crown + title plaque (win_crown.png), mid-edge jewels (win_side_l/r.png) and bottom jewel (win_bottom.png)
     are separate ornaments placed at fixed size, so a frame of any size never stretches a crown or a corner.
     --fs = display px per frame px (each framed surface picks its own).
   - btn_slim9.png (371x89, slices 11 30): rounded royal plaque for every ordinary button / tab / chip / input.
   - btn9.png (543x111, slices 23 108 24 108): ornate button with jewel end-caps for call-to-action buttons.
   - fixed frames (HUD 2172x724, currency 2060x763, minimap 1330x1182, attack 420x414, auto 420x383): live DOM
     elements sit on the measured slots, positions in SOURCE px (same numbers as manifest.json slots / scale). */

.theme-royal {
  /* deep navy -> plum surfaces, sculpted gold, sapphire / amethyst accents */
  --bg0: #0a0b24;
  --navy0: #0b0d2a; --navy1: #141640; --navy2: #1f1d52; --navy3: #2c2468;
  --plum: #3a1f5c; --plum-dk: #1c1032;
  --gold: #e0b252; --gold-hi: #ffe39a; --gold-dk: #8a5a16; --gold-dim: rgba(224, 178, 82, 0.5);
  --sapphire: #3f7dff; --amethyst: #b26bff;
  --line: #6b4fa8; --line-dim: rgba(107, 79, 168, 0.45);
  --panel-bg: linear-gradient(180deg, rgba(38, 26, 84, 0.95), rgba(14, 10, 40, 0.96));
  --panel-edge: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 227, 154, 0.12), 0 10px 28px rgba(0, 0, 0, 0.55);
  --ring-gold: linear-gradient(160deg, #fff4c4 0%, #e8b64e 28%, #9a6414 60%, #ffd77a 100%);
  --royal-surface: radial-gradient(120% 90% at 50% 0%, rgba(70, 40, 128, 0.55), rgba(70, 40, 128, 0) 60%), linear-gradient(180deg, rgba(30, 20, 70, 0.96), rgba(12, 9, 34, 0.97));
  --royal-well: linear-gradient(180deg, rgba(10, 8, 30, 0.82), rgba(24, 16, 58, 0.82));
  --mmr: 0.8887;     /* minimap frame 1182 / 1330 */
  --cwr: 0.3704;     /* currency frame 763 / 2060 */
  /* frame / button scales */
  --rs: 0.3;         /* game windows, studio, warp menu */
  --rc: 0.46;        /* window crown + title plaque */
  --bs: 0.36;        /* slim buttons */
  --bo: 0.3;         /* ornate buttons */
  --ts: 0.1;         /* item tiles + hotbar slots */
  --atk: 124px; --aut: 86px;
}
@media (max-height: 540px) and (orientation: landscape), (orientation: portrait) and (max-width: 720px) {
  .theme-royal { --rs: 0.24; --rc: 0.38; --bs: 0.3; --bo: 0.26; --ts: 0.085; }
}
@media (max-height: 540px) and (orientation: landscape) { .theme-royal { --atk: 84px; --aut: 58px; } }
@media (orientation: portrait) and (max-width: 720px) { .theme-royal { --atk: 104px; --aut: 68px; } }
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) { .theme-royal { --atk: 84px; --aut: 58px; } }
.theme-royal body { background: var(--bg0); }

/* ---------------- shared royal frame (nine-slice, rails at the edge, ornaments inside the corners) */
.theme-royal :is(.win, #studio, #warpMenu, .tip, .chat-box, .tf-panel, #hotbar, .ld-box, #toast, .emoji-pop) {
  --fs: var(--rs);
  border-style: solid; border-radius: 0;
  border-width: calc(50px * var(--fs)) calc(40px * var(--fs)) calc(40px * var(--fs)) calc(41px * var(--fs));
  border-image: url(../assets/ui/royal/win_frame9.png) 104 124 115 124 / calc(104px * var(--fs)) calc(124px * var(--fs)) calc(115px * var(--fs)) calc(124px * var(--fs)) / 0 stretch;
  background: var(--royal-surface) padding-box;
  box-shadow: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  image-rendering: auto;
}
.theme-royal .tip { --fs: 0.15; }
.theme-royal .chat-box { --fs: 0.17; background: linear-gradient(180deg, rgba(22, 14, 54, 0.78), rgba(10, 8, 30, 0.88)) padding-box; }
.theme-royal .tf-panel { --fs: 0.15; }
.theme-royal #hotbar { --fs: 0.15; }
.theme-royal #toast, .theme-royal .emoji-pop { --fs: 0.15; }
.theme-royal .ld-box { --fs: 0.26; }
.theme-royal .chat-box::before, .theme-royal #hotbar::before, .theme-royal #hotbar::after { display: none; }

/* ---------------- game windows: crown + title plaque on top, jewels on the side rails and bottom */
.theme-royal .win { margin-top: calc(101px * var(--rc) - 29px * var(--rs)); }
.theme-royal .win::before, .theme-royal .win::after {
  display: block; content: ""; position: absolute; pointer-events: none; border: 0; border-radius: 0; width: auto; height: auto;
}
.theme-royal .win::before {
  z-index: 2; left: calc(50% - 159.5px * var(--rc)); right: auto; bottom: auto; top: calc(-20.5px * var(--rs) - 101px * var(--rc));
  width: calc(328px * var(--rc)); height: calc(136px * var(--rc));
  background: url(../assets/ui/royal/win_crown.png) 0 0 / 100% 100% no-repeat;
}
.theme-royal .win::after {
  z-index: 0; top: calc(-50px * var(--rs)); left: calc(-41px * var(--rs)); right: calc(-40px * var(--rs)); bottom: calc(-60px * var(--rs));
  background: url(../assets/ui/royal/win_side_l.png) left center / calc(66px * var(--rs)) calc(122px * var(--rs)) no-repeat,
              url(../assets/ui/royal/win_side_r.png) right center / calc(66px * var(--rs)) calc(122px * var(--rs)) no-repeat,
              url(../assets/ui/royal/win_bottom.png) center bottom / calc(84px * var(--rs)) calc(90px * var(--rs)) no-repeat;
}
.theme-royal .win-head { justify-content: space-between; min-height: 44px; padding-top: 6px; }
.theme-royal .win-title {
  position: absolute; z-index: 3; flex: none; pointer-events: none;
  left: calc(50% - 122.5px * var(--rc)); top: calc(-20.5px * var(--rs) - 26px * var(--rc)); width: calc(245px * var(--rc)); height: calc(56px * var(--rc));
  display: flex; align-items: center; justify-content: center;
}
.theme-royal .win-title h2 { font-size: max(12px, calc(30px * var(--rc))); color: var(--gold-hi); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.theme-royal .win-title small { display: none; }
.theme-royal .win-ic { background: var(--ring-gold); box-shadow: 0 0 0 1.5px #2a1206, 0 0 0 3px rgba(178, 107, 255, 0.55); }
.theme-royal .win-ic i { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38 75%); }
.theme-royal .win-x { color: var(--gold-hi); }
.theme-royal .win-x:hover { background: rgba(255, 227, 154, 0.12); }
.theme-royal .win-x:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.theme-royal .win-body { border-top: 0; background: var(--royal-well); box-shadow: inset 0 0 0 1px rgba(255, 227, 154, 0.18), inset 0 6px 14px rgba(0, 0, 0, 0.45); margin: 0 4px; }
.theme-royal .win-foot { border-top: 1px solid rgba(255, 227, 154, 0.22); }
.theme-royal .win-tabs { gap: 2px; padding: 0 6px 4px; }
/* short desktop: windows start lower so the crown stays on screen */
@media (max-height: 860px) and (min-height: 541px) and (orientation: landscape) {
  .theme-royal .win { top: calc(var(--gap) + 6px); }
}
/* phone sheets keep the frame; the crown sits just under the screen edge */
@media (orientation: portrait) and (max-width: 720px) {
  .theme-royal .win { 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;
    border-width: calc(50px * var(--fs)) calc(40px * var(--fs)) calc(40px * var(--fs)) calc(41px * var(--fs)); }
}

/* ---------------- buttons: slim royal plaque (every ordinary control) */
.theme-royal :is(.btn, .win-tabs button, .chip-btn, .ip-opt, .class-sel, .wm-item, .btn-ghost, .btn-buy, .tabs button, .chat-tabs button, .cats button,
  .emoji-btn, .send-btn, .studio-btn, .wm-close, .st-close, .doll-rot button, #chat.collapsed .chat-toggle, body.touch .chat-toggle, .pal) {
  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; box-shadow: none; color: #f6ecff; image-rendering: auto;
  transition: filter .12s, transform .08s;
}
.theme-royal :is(.btn-buy) { color: var(--gold-hi); font-weight: 600; }
.theme-royal :is(.btn, .win-tabs button, .chip-btn, .ip-opt, .wm-item, .btn-ghost, .btn-buy, .btn-gold, .tabs button, .chat-tabs button, .cats button, .emoji-btn, .send-btn, .studio-btn, .wm-close, .st-close, .doll-rot button, .pal):hover:not(:disabled) {
  filter: brightness(1.2) saturate(1.1);
}
.theme-royal :is(.btn, .win-tabs button, .chip-btn, .ip-opt, .wm-item, .btn-ghost, .btn-buy, .btn-gold, .tabs button, .chat-tabs button, .cats button, .emoji-btn, .send-btn, .studio-btn, .wm-close, .st-close, .doll-rot button, .pal):active:not(:disabled) {
  filter: brightness(0.85); transform: translateY(1px);
}
.theme-royal :is(.btn.on, .win-tabs button.on, .chip-btn.on, .ip-opt.on, .btn-ghost.on, .tabs button.on, .chat-tabs button.on, .cats button.on, .studio-btn.on, .pal.on) {
  filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 4px rgba(255, 214, 110, 0.8)); color: var(--gold-hi); font-weight: 600; background: none; box-shadow: none;
}
.theme-royal :is(.btn, .btn-ghost, .btn-buy, .btn-gold, .chip-btn, .ip-opt):disabled { filter: grayscale(0.85) brightness(0.65); opacity: 1; cursor: default; }
.theme-royal :is(button, select, input, [tabindex]):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.theme-royal .win-tabs button { height: 40px; }
.theme-royal .cats button.on::after { border-left-color: var(--gold-hi); }
/* ornate call-to-action button (jewel end caps) */
.theme-royal .btn-gold {
  border-style: solid; border-radius: 0; color: var(--gold-hi); font-weight: 700; text-shadow: var(--outline);
  border-width: calc(23px * var(--bo)) calc(108px * var(--bo)) calc(24px * var(--bo));
  border-image: url(../assets/ui/royal/btn9.png) 23 108 24 108 fill / calc(23px * var(--bo)) calc(108px * var(--bo)) calc(24px * var(--bo)) / 0 stretch;
  background: none; box-shadow: none; padding-left: 0; padding-right: 0;
}
.theme-royal .class-sel { padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffe39a'/%3E%3C/svg%3E") no-repeat right 10px center; }
.theme-royal select option { background: #1c1240; color: #f6ecff; }
/* inputs: dark well with a gold rim */
.theme-royal :is(.searchbox, .dd, .chat-input input) { background: rgba(10, 6, 28, 0.85); border: 1px solid rgba(224, 178, 82, 0.6); border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.theme-royal :is(.searchbox:focus-within, .dd:focus-within, .chat-input input:focus) { border-color: var(--gold-hi); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 227, 154, 0.25); }
.theme-royal input[type=range], .theme-royal input[type=checkbox] { accent-color: var(--gold); }

/* ---------------- item tiles + hotbar slots: miniature royal frame */
.theme-royal :is(.itile, .slot) {
  border-style: solid; border-radius: 0;
  border-width: calc(50px * var(--ts)) calc(40px * var(--ts)) calc(40px * var(--ts)) calc(41px * var(--ts));
  border-image: url(../assets/ui/royal/win_frame9.png) 104 124 115 124 / calc(104px * var(--ts)) calc(124px * var(--ts)) calc(115px * var(--ts)) calc(124px * var(--ts)) / 0 stretch;
  background: radial-gradient(circle at 50% 35%, #3a2478, #120a30 80%) padding-box;
  image-rendering: auto;
}
.theme-royal .itile { box-shadow: inset 0 0 0 1.5px var(--rc, transparent), inset 0 0 8px color-mix(in srgb, var(--rc, transparent) 45%, transparent); }
.theme-royal .itile:hover, .theme-royal .itile.sel { filter: brightness(1.2) drop-shadow(0 0 4px rgba(255, 214, 110, 0.7)); }
.theme-royal .slot { box-shadow: none; }
.theme-royal .slot .face, .theme-royal .slot .cd { border-radius: 2px; }
.theme-royal .slot:hover { box-shadow: none; filter: brightness(1.2); }
.theme-royal .slot.on { box-shadow: none; filter: brightness(1.25) drop-shadow(0 0 6px rgba(178, 107, 255, 0.95)); }
.theme-royal .slot.drop { box-shadow: 0 0 0 2px #ffe39a, 0 0 14px rgba(255, 214, 110, 0.9); }
.theme-royal .slot .key { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38); border: 1px solid var(--gold); color: var(--gold-hi); }
.theme-royal .hb-sep { background: linear-gradient(180deg, transparent, var(--gold), transparent); }

/* ---------------- player HUD (07-player-hud.png 2172x724, same proportions as hud2) */
.theme-royal .h2-portrait { left: calc(var(--u) * 191); top: calc(var(--u) * 175); width: calc(var(--u) * 368); height: calc(var(--u) * 354);
  background: radial-gradient(circle at 50% 35%, #5a36a8, #1e1048 60%, #0e0828); }
.theme-royal .h2-lv { left: calc(var(--u) * 274); top: calc(var(--u) * 557); width: calc(var(--u) * 247); height: calc(var(--u) * 73); color: var(--gold-hi); }
.theme-royal .h2-crest { left: calc(var(--u) * 120); top: calc(var(--u) * 488); width: calc(var(--u) * 140); height: calc(var(--u) * 140); }
.theme-royal .h2-crest svg { display: none; }
.theme-royal .h2-name { left: calc(var(--u) * 784); top: calc(var(--u) * 148); width: calc(var(--u) * 489); height: calc(var(--u) * 89); }
.theme-royal .h2-class { left: calc(var(--u) * 1383); top: calc(var(--u) * 150); width: calc(var(--u) * 427); height: calc(var(--u) * 87); }
.theme-royal .h2-bar { left: calc(var(--u) * 880); width: calc(var(--u) * 1014); height: calc(var(--u) * 66); border-radius: calc(var(--u) * 33); }
.theme-royal .h2-bar.hp { top: calc(var(--u) * 283); } .theme-royal .h2-bar.mp { top: calc(var(--u) * 398); } .theme-royal .h2-bar.exp { top: calc(var(--u) * 516); }
.theme-royal .h2-bar.exp i { background: linear-gradient(180deg, #fff3a0, #e8b64e 48%, #9a6414); }

/* ---------------- currency (08-currency-panel.png 2060x763) */
.theme-royal #currency { --cu: calc(var(--cw) / 2060); }
.theme-royal .c2-val { justify-content: flex-end; padding-right: calc(var(--cu) * 50); box-sizing: border-box; }
.theme-royal .c2-coin { left: calc(var(--cu) * 597); top: calc(var(--cu) * 265); width: calc(var(--cu) * 845); height: calc(var(--cu) * 136); }
.theme-royal .c2-gem { left: calc(var(--cu) * 589); top: calc(var(--cu) * 470); width: calc(var(--cu) * 847); height: calc(var(--cu) * 136); }
.theme-royal .c2-plus { left: calc(var(--cu) * 1664.5 - var(--s) / 2); top: calc(var(--cu) * 433.5 - var(--s) / 2); --s: max(26px, calc(var(--cu) * 230)); }

/* ---------------- minimap (09-minimap-frame.png 1330x1182, circular opening) */
.theme-royal .m2 { --u: calc(var(--mmw) / 1330); }
.theme-royal .m2 #minimap { left: calc(var(--u) * 305); top: calc(var(--u) * 276); width: calc(var(--u) * 718); height: calc(var(--u) * 676); border-radius: 50%; }
.theme-royal .m2-title { left: calc(var(--u) * 402); top: calc(var(--u) * 183); width: calc(var(--u) * 524); height: calc(var(--u) * 76); font-size: max(9px, calc(var(--u) * 46)); color: var(--gold-hi); }
.theme-royal .m2-coords { left: calc(var(--u) * 67); top: calc(var(--u) * 1022); width: calc(var(--u) * 521); height: calc(var(--u) * 95); font-size: max(8.5px, calc(var(--u) * 50)); }
.theme-royal .m2-zval { left: calc(var(--u) * 951); top: calc(var(--u) * 1031); width: calc(var(--u) * 156); height: calc(var(--u) * 81); font-size: max(8.5px, calc(var(--u) * 46)); }
.theme-royal .m2-side { --w: max(24px, calc(var(--u) * 130)); --h: calc(var(--u) * 150); left: calc(var(--u) * 1200 - var(--w) / 2); }
.theme-royal #mmIn { top: calc(var(--u) * 379.5 - var(--h) / 2); }
.theme-royal #mmOut { top: calc(var(--u) * 555 - var(--h) / 2); }
.theme-royal #mmCenter { top: calc(var(--u) * 722.5 - var(--h) / 2); }
.theme-royal #mmToggle { top: calc(var(--u) * 899 - var(--h) / 2); }
.theme-royal .m2-zoom { --s: max(22px, calc(var(--u) * 110)); top: calc(var(--u) * 1074 - var(--s) / 2); }
.theme-royal #zoomOut { left: calc(var(--u) * 883.5 - var(--s) / 2); }
.theme-royal #zoomIn { left: calc(var(--u) * 1171.5 - var(--s) / 2); }
.theme-royal .m2-btn.on { box-shadow: 0 0 0 2px rgba(255, 227, 154, 0.9), 0 0 12px rgba(178, 107, 255, 0.9); }
.theme-royal .m2-btn:focus-visible, .theme-royal .c2-plus:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }

/* ---------------- menu row: royal badges (crown on top -> slightly larger than the old ring) */
.theme-royal .mbtn.art .ring { overflow: visible; }
.theme-royal .mbtn.art .ring .in img { transform: scale(1.18) translateY(-4%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.theme-royal .mbtn:hover .ring { box-shadow: none; filter: brightness(1.15); }
.theme-royal .mbtn.on .ring { box-shadow: none; filter: brightness(1.2) drop-shadow(0 0 8px rgba(178, 107, 255, 0.95)); }
.theme-royal .mbtn .ml { color: var(--gold-hi); }

/* ---------------- attack + auto (11-attack-button 420x414, 12-auto-button 420x383 with blank label plaques) */
.theme-royal #actionPad { width: calc(var(--atk) + var(--aut) - 6px); }
.theme-royal .attack-btn {
  width: var(--atk); height: calc(var(--atk) * 414 / 420); padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: url(../assets/ui/royal/attack.png) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.theme-royal .attack-btn .atk-in { position: absolute; inset: 0; background: none; box-shadow: none; border-radius: 0; display: block; }
.theme-royal .attack-btn img { display: none; }
.theme-royal .attack-btn .atk-l { position: absolute; left: 28.1%; top: 74.4%; width: 43.8%; height: 10.6%; margin: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--atk) * 0.12); color: var(--gold-hi); }
.theme-royal .attack-btn .cd { inset: auto; left: 12.6%; top: 12.1%; width: 74.5%; height: 76.3%; }
.theme-royal .attack-btn:hover { filter: brightness(1.12) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.theme-royal .auto-btn {
  width: var(--aut); height: calc(var(--aut) * 383 / 420); padding: 0; border: 0; border-radius: 0; box-shadow: none; display: block;
  background: url(../assets/ui/royal/auto.png) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) saturate(0.7) brightness(0.92);
}
.theme-royal .auto-btn img { display: none; }
.theme-royal .auto-btn .au-a, .theme-royal .auto-btn .au-s { position: absolute; top: 69.7%; height: 11.2%; display: flex; align-items: center; font-size: calc(var(--aut) * 0.115); line-height: 1; text-shadow: var(--outline); }
.theme-royal .auto-btn .au-a { left: 29.5%; width: 23%; justify-content: flex-end; color: #fff; }
.theme-royal .auto-btn .au-s { left: 53.5%; width: 17%; justify-content: flex-start; color: #c8bce8; }
.theme-royal .auto-btn.on { background: url(../assets/ui/royal/auto.png) 0 0 / 100% 100% no-repeat; border: 0; animation: royalAuto 1.4s infinite; filter: drop-shadow(0 0 10px rgba(178, 107, 255, 0.95)); }
.theme-royal .auto-btn.on .au-s { color: var(--gold-hi); }
.theme-royal .auto-btn:active, .theme-royal .attack-btn:active { transform: scale(0.95); }
@keyframes royalAuto { 50% { filter: drop-shadow(0 0 3px rgba(178, 107, 255, 0.5)); } }

/* ---------------- target frame */
.theme-royal .tf-ring { box-shadow: 0 0 0 1.5px #2a1206, 0 0 0 3.5px rgba(178, 107, 255, 0.7), 0 5px 12px rgba(0, 0, 0, 0.5); }
.theme-royal .tf-ring img { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38 75%); border-radius: 50%; }
.theme-royal .tf-badge { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38); border-color: var(--gold); }
.theme-royal .tf-panel { margin-top: 0; padding-left: 26px; min-height: 0; }
.theme-royal .tf-name { color: var(--gold-hi); }
.theme-royal .tbar { background: linear-gradient(180deg, #0a0620, #1c1240); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(224, 178, 82, 0.55); }

/* ---------------- world labels: royal nameplates */
.theme-royal .blabel .chip { background: var(--ring-gold); box-shadow: 0 0 0 1.5px #2a1206, 0 0 0 3px rgba(178, 107, 255, 0.55), 0 3px 6px rgba(0, 0, 0, 0.55); }
.theme-royal .blabel .chip i { background: radial-gradient(circle at 50% 35%, #4a2a8e, #160c38 75%); }
.theme-royal .blabel .bt {
  --bs: 0.4; 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; box-shadow: none; line-height: 1; display: flex; align-items: center; padding-left: 20px; color: #fff4d6;
}
.theme-royal .blabel:hover .bt { filter: brightness(1.2); }
.theme-royal .blabel.sel .bt { filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 214, 110, 0.8)); }
.theme-royal .npcname .nn::before { background: var(--gold); color: #2a1206; }
.theme-royal .bubble { border-color: #6b3a10; background: #fff8e8; color: #2a1640; }
.theme-royal .bubble::before { border-top-color: #6b3a10; }
.theme-royal .bubble::after { border-top-color: #fff8e8; }

/* ---------------- tooltip / toast / chat */
.theme-royal .tip h4 { color: var(--gold-hi); }
.theme-royal #toast { color: #fff4d6; }
.theme-royal .chat-tabs { transform: translateY(-8px); margin-bottom: -8px; }
.theme-royal .chat-tabs button { height: 28px; font-size: 13px; }
.theme-royal .chat-input { border-top: 1px solid rgba(224, 178, 82, 0.3); }
.theme-royal .emoji-pop button { background: rgba(255, 227, 154, 0.08); }
.theme-royal .emoji-pop button:hover { background: rgba(255, 227, 154, 0.2); }

/* ---------------- studio + warp menu */
.theme-royal #studio .st-head, .theme-royal #warpMenu .wm-title { color: var(--gold-hi); }
.theme-royal #studio h3::after { background: linear-gradient(90deg, var(--gold), transparent); }
.theme-royal .compass .cdot.on { background: var(--gold-hi); box-shadow: 0 0 8px rgba(255, 214, 110, 0.9); }
.theme-royal .ld-bar i { background: linear-gradient(90deg, #8a5a16, #ffe39a); }

/* ---------------- royal sizes: the round minimap window is smaller than the old square one -> bigger frame */
.theme-royal { --mm: 262px; }
@media (max-width: 1280px) and (min-height: 541px) { .theme-royal { --mm: 236px; } }
@media (max-width: 980px) and (min-height: 541px) and (orientation: landscape) { .theme-royal { --mm: 168px; } }
@media (max-height: 540px) and (orientation: landscape) { .theme-royal { --mm: 156px; } }
@media (orientation: portrait) and (max-width: 720px) { .theme-royal { --mm: 140px; } }
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) { .theme-royal { --mm: 132px; } }
.theme-royal .chat-box { --fs: 0.13; }
.theme-royal { --padw: calc(var(--atk) + var(--aut) - 6px); }
@media (max-width: 1280px) and (min-height: 541px) and (orientation: landscape) {
  .theme-royal #chat { bottom: calc(var(--gap) + var(--safe-b) + var(--slot) + 44px); }
}
@media (orientation: portrait) and (max-width: 720px) { .theme-royal #chat, .theme-royal body.touch #chat { bottom: calc(286px + var(--safe-b)); } }
@media (orientation: portrait) and (max-width: 720px) and (max-height: 760px) { .theme-royal #chat, .theme-royal body.touch #chat { bottom: calc(170px + var(--safe-b)); } }
/* window header badge: the royal menu art carries its own frame */
.theme-royal .win-ic.themed { background: none; box-shadow: none; padding: 0; overflow: visible; }
.theme-royal .win-ic.themed i { background: none; box-shadow: none; overflow: visible; }
.theme-royal .win-ic.themed img { width: 100%; height: 100%; transform: scale(1.22); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }