/* Original client gumps, decoded from gumpartLegacyMUL.uop.
   Asset IDs and source hashes: assets/uo/classic-ui/manifest.json.
   This layer changes menus only; scene, paperdoll, stats and bag art retain
   their own native materials and positioning. Load after uo-fonts.css. */
:root {
  --gump-stone: url('assets/uo/classic-ui/gump-0a2c.png');
  --gump-frame: url('assets/uo/classic-ui/stone-floral-border.png');
  --gump-ink: #171713;
  --gump-muted: #353530;
  --gump-line: #6f7066;
  --gump-arrow: url('assets/uo/classic-ui/gump-15a4.png');
}

/* The desktop stays black. Native stone is reserved for its windows. */
.topbar, .side-nav, .side-nav.more-open {
  background: #9b9b90 var(--gump-stone) repeat;
  color: var(--gump-ink);
  border-color: #55564e;
  box-shadow: inset 0 1px #d5d5c6, inset 0 -2px #484940;
  backdrop-filter: none;
}
.topbar { border-bottom: 2px solid #33352d; }
.brand, .brand-wordmark strong, .brand-wordmark small, .realm-indicator {
  color: #15150f; text-shadow: none; letter-spacing: 0;
}
.brand-wordmark strong { font-size: 20px; }
.brand-wordmark small { font-size: 11px; }
.brand-mark { color: #262617; text-shadow: 1px 1px #d6d2b3; border: 0; clip-path: none; }
.realm-indicator { font-size: 13px; }
.pulse-dot { background: #2c5733; box-shadow: none; }
.resource-chip {
  min-width: 82px; border-radius: 0; border: 2px inset #b9b9a8;
  background: #797b70; color: #10110d; font-size: 16px;
}
.resource-chip small { color: #14150f; font-size: 11px; letter-spacing: 0; }
.resource-glyph { border: 0; background: transparent; color: #3c2d09; }
.profile-button { border: 2px outset #b5b5a5; border-radius: 0; background: var(--gump-stone); }
.profile-sigil { border-radius: 0; background: none; color: #202218; }

/* Help-gump rows use the actual green navigation triangle. */
.side-nav .nav-item, .side-nav.more-open > .nav-primary,
.side-nav.more-open > .nav-more {
  color: #181914; background: transparent; border: 1px solid transparent;
  border-radius: 0; box-shadow: none; font-size: 16px;
  letter-spacing: 0; transition: none;
}
.side-nav .nav-item:hover, .side-nav .nav-item.active,
.side-nav.more-open .nav-item.active {
  color: #070a05; background: #c6c5af66;
  border-color: #66685a; box-shadow: inset 1px 1px #dedecd, inset -1px -1px #76776a;
}
.side-nav .nav-icon {
  width: 20px; height: 21px; flex: 0 0 20px;
  background: var(--gump-arrow) center / 19px 21px no-repeat;
  color: transparent; opacity: 1;
}
.side-nav .nav-icon::before { content: none; }
.side-nav .nav-item.active .nav-icon { background-image: url('assets/uo/classic-ui/gump-15a5.png'); }
.nav-badge { border: 1px solid #514e31; border-radius: 0; color: #1a180d; background: #c0ae76; font-size: 13px; }
.secondary-nav {
  border: 26px solid transparent;
  border-image: var(--gump-frame) 44 fill / 32px / 0 repeat;
  background: var(--gump-stone) repeat; padding: 6px;
  color: var(--gump-ink); border-radius: 0;
  box-shadow: 4px 5px 0 #0008;
}
.secondary-nav .nav-item { min-height: 34px; font-size: 16px; }
.secondary-nav .nav-group-label { color: #282a21; font-size: 13px; letter-spacing: 0; margin-top: 12px; }

/* Full floral corners remain at native size. The content starts inside
   their inner bevel, rather than on the ornamental stone itself. */
.screen-sub, .offline-modal, .specialization-modal, #hero-name-form {
  border: 32px solid transparent;
  border-image: var(--gump-frame) 44 fill / 44px / 0 repeat;
  background: #97998e var(--gump-stone) repeat;
  border-radius: 0; padding: 12px;
  color: var(--gump-ink); box-shadow: 5px 7px 0 #0009;
  text-shadow: none; font-size: 16px; line-height: 1.4;
  scrollbar-color: #a49156 #787a70; scrollbar-width: auto;
}
.screen-sub > .sub-heading {
  top: -12px; padding: 7px 0 12px; margin-bottom: 12px;
  background: #9b9d91 var(--gump-stone) repeat;
  border-bottom: 2px groove #b1b2a4; box-shadow: none;
  gap: 12px;
}
.screen-sub > .sub-heading h1 { color: #10110c; font-size: 26px; font-weight: normal; letter-spacing: 0; margin: 0; }
.screen-sub .subscreen-content { gap: 0; }
.screen-sub :is(h2,h3,p,b,strong,small,label,li,.eyebrow,.card-kicker,
  .rule-row,.reward-pill,.inventory-toolbar,.inventory-toolbar > span,
  .world-book-summary,.world-book-summary span,.world-travel-help,
  .world-catalog-source,.skill-cap-note,.skill-current-label,.skill-mode-help,
  .item-effect,.gear-comparison,.gear-comparison small,.plan-footnote) {
  color: var(--gump-ink); text-shadow: none; letter-spacing: 0;
}
.screen-sub h2 { font-size: 23px; line-height: 1.2; font-weight: normal; }
.screen-sub h3 { font-size: 20px; font-weight: normal; }
.screen-sub :is(p,small,label,li,.rule-row,.reward-pill,.world-travel-help,
  .world-catalog-source,.skill-mode-help,.inventory-toolbar) { font-size: 16px; line-height: 1.45; }
.screen-sub :is(.card-kicker,.eyebrow) { color: #33352a; font-size: 13px; font-weight: normal; }
.screen-sub .subscreen-card {
  padding: 16px 0 20px; border: 0; border-bottom: 2px groove #b8b9aa;
  border-radius: 0; background: transparent; box-shadow: none;
}
.screen-sub .subscreen-card:first-child { padding-top: 0; }
.screen-sub .subscreen-card:last-child { border-bottom: 0; }
.screen-sub .subscreen-card h2 { margin: 3px 0 8px; }
.screen-sub .subscreen-card > p { margin-bottom: 15px; }
.screen-sub :is(.class-grid,.item-grid,.pet-grid,.zone-grid,.talent-grid,.collection-grid) { gap: 0 20px; }
.screen-sub :is(.choice-card,.item-card,.pet-card,.zone-card,.talent-card,.collection-card) {
  position: relative; min-height: 100px; padding: 12px 4px;
  border: 0; border-bottom: 1px solid #6d7061; border-radius: 0;
  background: transparent; color: #161810; box-shadow: none;
}
.screen-sub :is(.choice-card,.zone-card) { padding-left: 27px; }
.screen-sub :is(.choice-card,.zone-card)::before {
  position: absolute; top: 14px; left: 1px; width: 20px; height: 21px;
  background: var(--gump-arrow) center / contain no-repeat; content: '';
}
.screen-sub :is(.choice-card,.item-card,.pet-card,.zone-card,.talent-card,.collection-card) > b { font-size: 19px; font-weight: normal; }
.screen-sub :is(.choice-card,.item-card,.pet-card,.zone-card,.talent-card,.collection-card) small { font-size: 15px; color: #303227; }
.screen-sub :is(.choice-card.selected,.choice-card-selected,.zone-card.selected,.talent-card.learned) {
  background: #c8c9ad55; border-bottom-color: #414c2b;
  box-shadow: inset 3px 0 #4d6036;
}
.screen-sub :is(.choice-card,.zone-card):hover:not(:disabled) { background-color: #d8d8bf66; }
.screen-sub .reward-pill { border: 0; border-radius: 0; padding: 2px 6px 2px 0; background: transparent; }
.screen-sub :is(.rule-row,.sub-list li,.quest-row,.practice-skill,.skill-book-row) { border-bottom-color: #707263; font-size: 16px; }
.screen-sub .quest-mark { color: #3f4b25; border: 0; border-radius: 0; }
.screen-sub .arena-opponent { border-color: #727465; background: #b7b7a333; }
.screen-sub .class-medallion { border-radius: 0; background: transparent; color: #242a17; border: 2px outset #aaa997; }
.screen-sub .progress-inline { border: 1px inset #c3c3b0; background: #595e50; height: 7px; border-radius: 0; }
.screen-sub .progress-inline > span { background: #576e43; box-shadow: none; }
.screen-sub .gain { color: #264319; }
.screen-sub .loss { color: #74281c; }

/* Native Help rows support French labels of arbitrary length. */
.screen-sub button.inline-action, .screen-sub .text-button,
.screen-sub > .inline-action, .location-services button,
.primary-button, .departure-button, .equip-best-button {
  position: relative; min-height: 34px; border: 0; border-radius: 0;
  padding: 7px 9px 7px 28px; color: #11170c;
  background: #a6a897 var(--gump-stone) repeat;
  box-shadow: inset 1px 1px #d4d4bf, inset -1px -1px #616555;
  font-size: 16px; font-weight: normal; letter-spacing: 0;
  text-shadow: none; text-align: left; cursor: pointer;
}
.screen-sub button.inline-action::before, .screen-sub .text-button::before,
.screen-sub > .inline-action::before, .location-services button::before,
.primary-button::before, .departure-button::before, .equip-best-button::before {
  position: absolute; left: 4px; top: 50%; width: 20px; height: 21px;
  transform: translateY(-50%); content: '';
  background: var(--gump-arrow) center / 20px 21px no-repeat;
}
.screen-sub button.inline-action:hover:not(:disabled), .screen-sub .text-button:hover,
.primary-button:hover, .departure-button:hover, .equip-best-button:hover,
.location-services button:hover { filter: none; background-color: #c5c6b2; color: #0b1406; }
.screen-sub button.inline-action:active:not(:disabled), .primary-button:active,
.departure-button:active, .equip-best-button:active {
  filter: none; box-shadow: inset -1px -1px #d4d4bf, inset 1px 1px #616555;
}
.screen-sub .back-button, .modal-close {
  flex: 0 0 63px; width: 63px; min-width: 63px; height: 23px; min-height: 23px;
  padding: 0; border: 0; background: url('assets/uo/classic-ui/gump-00f3.png') center / 63px 23px no-repeat;
  font-size: 0; color: transparent; border-radius: 0; box-shadow: none;
}
.screen-sub .back-button:hover, .modal-close:hover { background-image: url('assets/uo/classic-ui/gump-00f2.png'); }
.screen-sub .back-button:active, .modal-close:active { background-image: url('assets/uo/classic-ui/gump-00f1.png'); }
.modal-close { top: -9px; right: 5px; }

/* Controls retain the small bevels and original tick artwork. */
.screen-sub :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select),
#hero-name-form :is(input,select) {
  border: 2px inset #c0c0ad; border-radius: 0;
  background-color: #b9bca7; color: #171b0f;
  min-height: 34px; padding: 5px 7px; font-size: 16px;
  box-shadow: none; color-scheme: light;
}
.screen-sub select, #hero-name-form select {
  appearance: none; padding-right: 25px;
  background-image: url('assets/uo/classic-ui/gump-00fd.png');
  background-position: right 3px center; background-size: 15px 21px; background-repeat: no-repeat;
}
.screen-sub input::placeholder { color: #4d5142; opacity: 1; }
.screen-sub input[type=checkbox], .screen-sub input[type=radio] {
  appearance: none; -webkit-appearance: none; width: 19px; height: 20px;
  min-width: 19px; margin: 0 5px 0 0; padding: 0; border: 0; border-radius: 0;
  background: url('assets/uo/classic-ui/gump-00d2.png') center / 19px 20px no-repeat;
  cursor: pointer; vertical-align: middle;
}
.screen-sub input[type=checkbox]:checked { background-image: url('assets/uo/classic-ui/gump-00d3.png'); }
.screen-sub input[type=radio] { background-image: url('assets/uo/classic-ui/gump-00d0.png'); }
.screen-sub input[type=radio]:checked { background-image: url('assets/uo/classic-ui/gump-00d1.png'); }
.screen-sub .rule-row .toggle {
  flex: 0 0 19px; width: 19px; height: 20px; min-height: 20px;
  padding: 0; border: 0; border-radius: 0;
  background: url('assets/uo/classic-ui/gump-00d2.png') center / 19px 20px no-repeat;
}
.screen-sub .rule-row .toggle.on { background-image: url('assets/uo/classic-ui/gump-00d3.png'); }
.screen-sub .toggle::after { display: none; }
.screen-sub :is(button,input,select,a):focus-visible, .offline-modal button:focus-visible,
.specialization-modal button:focus-visible { outline: 2px dotted #243d1a; outline-offset: 2px; }
.screen-sub button:disabled { opacity: .52; color: #373a2e; }
.screen-sub a { color: #1c3e53; }
.screen-sub .item-inspection {
  padding: 14px 0; background: transparent; color: #181b12;
  border: 0; border-top: 2px groove #bfc1ac; box-shadow: none;
}
.screen-sub .item-inspection p { font-size: 16px; }
.screen-sub .backpack-gump { color: #eee0bb; }
.screen-sub .backpack-gump .bag-legend { color: #261909; font-size: 12px; }
.screen-sub .backpack-gump .worn-mark { color: #f4edcf; text-shadow: 1px 1px #000; }
.screen-sub .skill-book-row strong { font-size: 17px; }
.screen-sub .skill-book-row b { font-size: 17px; }
.screen-sub .skill-book-row b small { font-size: 14px; }
.screen-sub .skill-book-row.weapon-practice { background: #d2d5ba55; }
.screen-sub progress { accent-color: #536b3b; border-radius: 0; }
.screen-sub .skill-mode select { font-size: 15px; min-height: 32px; }

/* World index reads as a classic travel gump, rather than a card dashboard. */
.screen-sub .world-book-summary { font-size: 17px; }
.screen-sub :is(.facet-tabs button,.landmark-shortcuts button) {
  color: #191e10; background: #a4a68f var(--gump-stone) repeat;
  border: 2px outset #bfc0aa; border-radius: 0;
  padding: 6px 10px; min-height: 34px; font-size: 16px;
}
.screen-sub :is(.facet-tabs button,.landmark-shortcuts button)[aria-pressed=true] {
  border-style: inset; background-color: #92997b; color: #101909;
}
.screen-sub .world-locations { gap: 0 18px; }
.screen-sub .region-destination {
  position: relative; padding: 15px 7px 15px 28px;
  border: 0; border-bottom: 1px solid #6b6f5d; border-radius: 0;
  background: transparent; color: #151b0d; box-shadow: none;
}
.screen-sub .region-destination::before {
  position: absolute; left: 1px; top: 18px; width: 20px; height: 21px;
  content: ''; background: var(--gump-arrow) center / contain no-repeat;
}
.screen-sub .region-destination b { font-size: 21px; font-weight: normal; }
.screen-sub .region-destination small { font-size: 15px; }
.screen-sub .region-destination > span:last-child { font-size: 15px; color: #293e19; }
.screen-sub .region-destination.current-location { background: #d6d8bd77; box-shadow: inset 3px 0 #52623b; }
.screen-sub .region-destination:hover:not(:disabled) { background-color: #d6d8bd55; }
.screen-sub .region-destination.secret-location .eyebrow { color: #4c284b; }
.screen-sub .world-facet-map, .screen-sub .native-travel-preview { border: 2px inset #b6b9a3; background: #3d4435; }
.screen-sub .world-facet-map figcaption { color: #eff0d5; font-size: 15px; }
.screen-sub .native-travel-preview > span { color: #eff0d5; }

/* Starting profession and the absence report share the actual options frame. */
.modal-backdrop { background: #0009; backdrop-filter: none; }
.specialization-modal h2, .offline-modal h2 { color: #11150c; font-size: 27px; font-weight: normal; }
.specialization-modal :is(p,small,.eyebrow), .offline-modal :is(p,small,.eyebrow) { color: #252a1b; font-size: 16px; letter-spacing: 0; }
.specialization-modal .eyebrow, .offline-modal .eyebrow { font-size: 13px; }
.specialization-choice {
  position: relative; background: transparent; color: #161c10;
  border: 0; border-bottom: 1px solid #6b715d; border-radius: 0;
  padding: 12px 7px; box-shadow: none;
}
.specialization-choice strong { color: #151c0d; font-size: 20px; }
.specialization-choice small { color: #2c3521; font-size: 16px; }
.specialization-choice:hover, .specialization-choice:focus-visible { background: #cfd4b577; outline: 1px dotted #35472a; }
.offline-totals { gap: 0; border: 2px inset #babda8; }
.offline-totals div { padding: 10px 5px; border: 0; border-radius: 0; background: #c0c6a944; }
.offline-totals span { color: #303a23; font-size: 13px; font-weight: normal; letter-spacing: 0; }
.offline-totals b { color: #111d09; font-size: 23px; }
.offline-loot { border: 0; border-top: 1px solid #6d735e; border-radius: 0; background: transparent; }
.offline-loot b { color: #1b280e; font-size: 18px; }
.offline-loot small { color: #303c22; font-size: 15px; }
#hero-name-form label { color: #1a2111; font-size: 16px; }
#hero-name-form button { color: #14200a; border: 2px outset #b9bea5; background: var(--gump-stone); font-size: 16px; }

/* Smaller auxiliary battle windows reuse the same stone, without covering
   or reframing the original map and the permanent right-hand gumps. */
.screen-battle :is(.expedition-panel,.objective-panel,.loot-panel,.long-road) {
  border: 12px solid transparent;
  border-image: var(--gump-frame) 44 fill / 18px / 0 repeat;
  background: #999c8a var(--gump-stone) repeat;
  border-radius: 0; padding: 8px; color: #171d10; box-shadow: 2px 3px #0008;
}
.screen-battle :is(.expedition-panel,.objective-panel,.loot-panel,.long-road) :is(h2,strong,b,p,small,.eyebrow,.select-label,.plan-footnote,.objective-tag,.objective-footer,.text-button) {
  color: #1e2814; text-shadow: none; letter-spacing: 0;
}
.screen-battle :is(.expedition-panel,.objective-panel,.loot-panel,.long-road) h2 { font-size: 20px; }
.screen-battle .expedition-panel :is(.select-label,.plan-footnote) { font-size: 14px; }
.screen-battle .expedition-panel #activity-choice { background: #b9bea5; border: 2px inset #c6cbb5; color: #151e0c; font-size: 16px; }
.screen-battle .departure-button b { font-size: 16px; }
.screen-battle .departure-button small { color: #2e3a22; font-size: 13px; }
.screen-battle .departure-icon { display: none; }
.screen-battle .objective-content strong { font-size: 18px; }
.screen-battle .objective-content small, .screen-battle .objective-footer { font-size: 14px; }
.screen-battle .objective-tag { border: 0; border-radius: 0; background: transparent; }
.screen-battle .loot-item { background: transparent; border-color: #7a8067; border-radius: 0; }
.screen-battle .loot-item b { font-size: 16px; }
.screen-battle .loot-item small { font-size: 13px; }
.screen-battle .road-step span { color: #263717; background: #a6b08b; border: 1px inset #c6cbae; border-radius: 0; }
.screen-battle .road-step small { font-size: 13px; }
.screen-battle .road-caption { font-size: 14px; }
.combat-controls {
  padding: 9px; border: 2px outset #a9ad98;
  background: #969e86 var(--gump-stone); color: #19270e;
}
.combat-controls :is(h2,.eyebrow,.text-button) { color: #1a280f; letter-spacing: 0; }
.combat-controls h2 { font-size: 20px; }
.combat-controls .eyebrow { font-size: 12px; }
.combat-controls .text-button { font-size: 15px; }
.combat-controls .skill-card {
  border: 2px outset #b7bda5; border-radius: 0;
  background: #b6bea1; color: #18260d; box-shadow: none;
}
.combat-controls .skill-card.skill-selected {
  border-style: inset; background: #a0ae88;
}
.combat-controls .skill-meta strong { color: #17280b; font-size: 17px; font-weight: normal; }
.combat-controls .skill-meta small { color: #293e1c; font-size: 13px; }
.combat-controls .skill-key { color: #354c24; font-size: 13px; }
.combat-controls .skill-icon {
  border: 0; background: var(--gump-arrow) center / 19px 21px no-repeat;
  color: transparent; font-size: 0;
}
.combat-controls .battle-feed {
  border: 2px inset #b6bfa0; border-radius: 0; background: #939f7e;
  color: #1c2d10; font-size: 15px;
}
.combat-controls .battle-feed time { color: #35492a; font-size: 12px; }
.toast { border: 3px ridge #b5b9a1; border-radius: 0; background: #a3ad8e var(--gump-stone); color: #19270d; font-size: 16px; box-shadow: 3px 4px #0008; }

/* Native gold scrollbar pieces, at their original size. */
:is(.screen-sub,.secondary-nav,.offline-modal,.specialization-modal)::-webkit-scrollbar { width: 15px; }
:is(.screen-sub,.secondary-nav,.offline-modal,.specialization-modal)::-webkit-scrollbar-track { background: #7d8070 url('assets/uo/classic-ui/gump-0100.png') repeat-y center; }
:is(.screen-sub,.secondary-nav,.offline-modal,.specialization-modal)::-webkit-scrollbar-thumb { background: url('assets/uo/classic-ui/gump-00fe.png') center / 13px 25px no-repeat; min-height: 25px; }
:is(.screen-sub,.secondary-nav,.offline-modal,.specialization-modal)::-webkit-scrollbar-button:single-button { height: 21px; background: url('assets/uo/classic-ui/gump-00fb.png') center / 15px 21px no-repeat; }
:is(.screen-sub,.secondary-nav,.offline-modal,.specialization-modal)::-webkit-scrollbar-button:single-button:increment { background-image: url('assets/uo/classic-ui/gump-00fd.png'); }

@media (min-width: 621px) and (max-width: 1000px) {
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { font-size: 14px; padding-inline: 4px; gap: 3px; }
  .side-nav .nav-icon { width: 16px; flex-basis: 16px; background-size: 16px auto; }
}
@media (max-width: 620px) {
  .brand-wordmark strong { font-size: 15px; }
  .brand-wordmark small { font-size: 9px; }
  .resource-chip { min-width: 0; font-size: 14px; }
  .side-nav .nav-item, .side-nav.more-open > .nav-primary, .side-nav.more-open > .nav-more { font-size: 12px; }
  .side-nav .nav-more { font-size: 11px; }
  .secondary-nav .nav-item { font-size: 16px; }
  .screen-sub, .offline-modal, .specialization-modal {
    border-width: 22px; border-image-width: 30px; padding: 9px;
  }
  .screen-sub > .sub-heading { top: -9px; }
  .screen-sub > .sub-heading h1 { font-size: 22px; }
  .screen-sub :is(.class-grid,.item-grid,.pet-grid,.zone-grid,.talent-grid,.collection-grid) { gap: 0 12px; }
  .specialization-choices { grid-template-columns: minmax(0,1fr); }
  .offline-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .screen-sub .skill-book-row { grid-template-columns: minmax(0,1fr) 65px; }
  .screen-sub .skill-mode { grid-column: 1 / -1; padding-bottom: 4px; }
}

/* Adventure controls and the configurable spellbook share the original gump material. */
.progression-guide { background:#a4a497 var(--gump-stone) repeat; color:#171713; border:3px ridge #afaf9e; padding:8px 12px; margin:0 0 10px; font-size:15px; line-height:1.35; }
.guide-heading { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.progression-guide p { margin:3px 0 6px; }
.guide-actions, .journey-options, .hero-tabs { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.progression-guide button, .hero-tabs button { background:#b2b2a2 var(--gump-stone); color:#151711; border:2px outset #c3c3ae; padding:4px 8px; font-size:15px; min-height:30px; cursor:pointer; }
.guide-actions>button:first-child { font-weight:bold; padding-left:30px; background:var(--gump-arrow) 5px center/19px 21px no-repeat; }
.journey-options { margin-top:5px; font-size:13px; justify-content:space-between; }
.journey-options label { display:flex; align-items:center; gap:5px; }
.hero-tabs { margin-bottom:14px; grid-column:1/-1; }
.hero-tabs button[aria-pressed="true"] { border-style:inset; background:#76796b; color:#fffbd9; }
.spellbook-summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mage-spell-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:0 18px; }
.mage-spell-row { padding:12px 0; border-bottom:2px groove #b2b2a0; display:grid; gap:5px; }
.mage-spell-row p { margin:0; }.mage-spell-row label { display:flex; gap:6px; align-items:center; justify-content:space-between; }
.mage-spell-row .spell-switch { justify-content:flex-start; }.spell-switch strong { font-size:18px; }
.mage-spell-row select { max-width:180px; min-width:48px; min-height:30px; }
.mage-spell-row.spell-locked { opacity:.65; }.spell-live,.spell-incantation { font-size:14px; }
@media(min-width:761px) { .world-card canvas { height:clamp(300px,calc(100dvh - 490px),560px); } }