/* Native 318 × 468 TaskbarHero panel: existing PNG pixels, percentage placement. */
/* Native HUD anchored left uses its own source coordinates, without labels. */
.tba-original-enemy-health{--tba-health-width:26px;--tba-health-height:8px;display:block;position:relative;width:calc(var(--tba-health-width) * var(--tba-health-scale,var(--tba-game-scale,1)));height:calc(var(--tba-health-height) * var(--tba-health-scale,var(--tba-game-scale,1)));pointer-events:none;image-rendering:pixelated}
.tba-original-boss-health{--tba-health-width:38px;--tba-health-height:14px}
.tba-original-health-plane{display:block;position:absolute;left:0;top:0;width:var(--tba-health-width);height:var(--tba-health-height);transform:scale(var(--tba-health-scale,var(--tba-game-scale,1)));transform-origin:top left}
.tba-original-enemy-health .tba-original-image{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;image-rendering:pixelated;pointer-events:none;user-select:none}
.tba-original-health-loss{display:block;position:absolute;left:2px;top:7px;width:34px;height:5px;overflow:hidden}
.tba-original-health-fill{display:block;position:absolute;left:2px;top:2px;width:22px;height:4px;overflow:hidden}
.tba-original-health-fill>.tba-original-image{inset:auto;left:-2px;top:-2px;width:26px;height:8px}
.tba-original-mini-hud{position:absolute;z-index:5;left:0;right:auto;bottom:4px;width:62px;height:64px;pointer-events:auto}
.tba-original-mini-hud .tba-original-image{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;image-rendering:pixelated;pointer-events:none;user-select:none}
.tba-scene .tba-original-mini-hud>.tba-mini-hud-control{display:block;position:absolute;margin:0;padding:0;min-width:0;min-height:0;border:0;border-radius:0;background:none;box-shadow:none}
.tba-original-mini-hud>button{cursor:pointer}
.tba-original-mini-hud[data-interactive=false]{pointer-events:none}
/* Main_Bg is 31 × 32 source pixels at 2x. Its original repeat-button disk is
   centered at (7.5,11.5), while the portal artwork is centered at (12.5,12.5)
   inside its retained 24 × 24 canvas. One fixed offset aligns all seven frames
   at the same density without cropping their transparent padding. */
.tba-original-mini-hud>.tba-mini-hud-portal{left:-10px;top:-2px;width:48px;height:48px}
.tba-original-mini-hud>.tba-mini-hud-hero{left:36px;top:13px;width:26px;height:28px}
.tba-original-mini-hud .tba-mini-hud-hero-icon{inset:5px 4px;width:18px;height:18px}
.tba-original-mini-hud>button:focus-visible{outline:2px solid #ffe293;outline-offset:1px}
.tba-original-mini-hud>button.tba-mini-hud-portal:hover{filter:brightness(1.2)}
.tba-mini-portal-animation{position:absolute;inset:0;pointer-events:none}
.tba-original-mini-hud .tba-mini-portal-frame{opacity:0;animation-duration:.8166666626930237s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.tba-original-mini-hud .tba-mini-portal-frame-0{opacity:1;animation-name:tba-ui-portal-2540-0}
.tba-original-mini-hud .tba-mini-portal-frame-1{animation-name:tba-ui-portal-2540-1}
.tba-original-mini-hud .tba-mini-portal-frame-2{animation-name:tba-ui-portal-2540-2}
.tba-original-mini-hud .tba-mini-portal-frame-3{animation-name:tba-ui-portal-2540-3}
.tba-original-mini-hud .tba-mini-portal-frame-4{animation-name:tba-ui-portal-2540-4}
.tba-original-mini-hud .tba-mini-portal-frame-5{animation-name:tba-ui-portal-2540-5}
.tba-original-mini-hud .tba-mini-portal-frame-6{animation-name:tba-ui-portal-2540-6}
[data-motion-active=false] .tba-mini-portal-frame{animation-play-state:paused}
@keyframes tba-ui-portal-2540-0{0%{opacity:1}16.326531543%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-1{0%{opacity:0}16.326531543%{opacity:1}32.653063087%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-2{0%{opacity:0}32.653063087%{opacity:1}48.979592805%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-3{0%{opacity:0}48.979592805%{opacity:1}65.306126173%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-4{0%{opacity:0}65.306126173%{opacity:1}81.632655891%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-5{0%{opacity:0}81.632655891%{opacity:1}97.959185609%{opacity:0}100%{opacity:0}}
@keyframes tba-ui-portal-2540-6{0%{opacity:0}97.959185609%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tba-original-mini-hud .tba-mini-portal-frame{animation:none}.tba-original-mini-hud .tba-mini-portal-frame:not(.tba-mini-portal-frame-0){display:none}}
.tba-mini-hud-xp{position:absolute;left:2px;top:44px;width:60px;height:12px;pointer-events:none}
.tba-mini-hud-xp>i{position:absolute;left:2px;bottom:4px;height:5px;background:#a64fd9;max-width:55px}
.tba-original-portal-close{position:absolute;z-index:5}
.tba-original-portal-destination{position:absolute;z-index:2;display:grid;place-items:center;text-align:center;font-size:3cqw;color:#d8c9a5}
.tba-original-portal-grid{position:absolute;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}
.tba-original-control .tba-original-portal-zone{position:relative;overflow:hidden;min-width:0;min-height:0;background:#151715;box-shadow:inset 0 0 0 1px #393c32}
.tba-original-portal-zone::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #64644b}
.tba-original-portal-zone[aria-pressed=true]::after{box-shadow:inset 0 0 0 2px #dfb34d}
.tba-original-portal-zone>span{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:4px 2px;background:#10120ed9;color:#e3d6b6;font-size:2.8cqw;line-height:1.2;text-align:center}
.tba-original-portal-footer{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#e3d3ad;font-size:3cqw}
.tba-original-portal-footer>strong{color:#f2d27b;font-size:3.5cqw}

.tba-original-control {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  flex: 0 0 auto;
  width: 318px;
  max-width: 100%;
  aspect-ratio: 318 / 468;
  align-self: center;
  overflow: hidden;
  color: #e1d6bf;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  text-align: left;
  text-shadow: 1px 1px #15110b;
  color-scheme: dark;
}
.tba-original-control *, .tba-original-control *::before, .tba-original-control *::after { box-sizing: border-box; }
.tba-original-control button { font: inherit; color: inherit; cursor: pointer; padding: 0; margin: 0; border: 0; border-radius: 0; background-color: transparent; text-shadow: inherit; -webkit-tap-highlight-color: transparent; }
.tba-original-control button:focus-visible { outline: 2px solid #ffe293; outline-offset: 2px; z-index: 10; }
.tba-original-control button:hover { filter: brightness(1.14); }
.tba-original-control .tba-original-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; object-position: center; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; user-select: none; }
.tba-original-control > .tba-original-image { z-index: 0; }
.tba-original-control .tba-original-panel-background { inset: 0; }
.tba-original-control .tba-original-panel-decor { z-index: 1; }
.tba-original-control .tba-original-panel-dragon, .tba-original-control .tba-original-panel-title { z-index: 3; }
.tba-original-control .tba-original-gold { display: flex; position: absolute; align-items: center; justify-content: space-between; z-index: 3; font-size: 3.45cqw; font-weight: 700; }
.tba-original-control .tba-original-gold > .tba-original-image { position: static; flex: 0 0 16%; width: 16%; height: auto; aspect-ratio: 1; object-fit: contain; }
.tba-original-control .tba-original-top-icons { display: flex; position: absolute; align-items: center; justify-content: space-between; z-index: 3; gap: 6%; }
.tba-original-control .tba-original-top-icons > .tba-original-image { position: static; width: auto; height: 100%; object-fit: contain; }
.tba-original-control .tba-original-close-decoration, .tba-original-control .tba-original-setting-decoration { z-index: 3; }
.tba-original-control .tba-original-gear-slot { position: absolute; display: block; z-index: 2; }
.tba-original-control .tba-original-gear-item { inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.tba-original-control .tba-original-main-portrait { position: absolute; z-index: 2; overflow: hidden; }
.tba-original-control .tba-original-main-portrait > *, .tba-original-control .tba-original-party-portrait > * { width: 100%; height: 100%; max-width: none; }
.tba-original-control .tba-original-main-portrait .tba-source-portrait, .tba-original-control .tba-original-party-portrait .tba-source-portrait { display: block; }
.tba-original-control .tba-original-main-portrait img, .tba-original-control .tba-original-party-portrait img { image-rendering: pixelated; }
.tba-original-control .tba-original-class-name { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 4; color: #56432a; text-shadow: none; font-size: 2.7cqw; font-weight: 800; }
.tba-original-control .tba-original-class-name span { position: relative; white-space: nowrap; }
.tba-original-control .tba-original-level { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 4; color: #fff4c7; font-weight: 900; font-size: 4.1cqw; -webkit-text-stroke: 2px #16100a; paint-order: stroke fill; }
.tba-original-control .tba-original-hero-selector { position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 2%; }
/* Hero_*.png and its slot backdrop share the original 30 × 44 canvas.
   Anchor both explicitly: an absolute image with auto inset inherits a button's
   inline baseline and was previously pushed out of the slot. */
.tba-original-control .tba-original-small-hero { position: relative; display: block; min-width: 0; min-height: 0; width: 100%; height: auto; max-height: 100%; aspect-ratio: 30 / 44; overflow: hidden; line-height: 0; }
.tba-original-control .tba-original-selection-frame { inset: 0; z-index: 0; object-fit: contain; }
.tba-original-control .tba-original-selection-portrait { inset: 0; z-index: 1; object-fit: contain; }
.tba-original-control .tba-original-small-hero>.tba-original-selection-provider { display: block; position: absolute; z-index: 2; right: 2%; bottom: 2%; width: clamp(8px,3.2cqw,12px); height: clamp(8px,3.2cqw,12px); max-width: 40%; max-height: 28%; object-fit: contain; image-rendering: auto; pointer-events: none; }
.tba-original-control .tba-original-small-hero[aria-pressed="true"] { outline: 1px solid #e2d23b; outline-offset: -1px; }
.tba-original-control .tba-original-small-runes { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10%; }
.tba-original-control .tba-original-small-runes .tba-original-image { position: static; width: 45%; height: auto; aspect-ratio: 1; object-fit: contain; }
.tba-original-control .tba-original-inventory { position: absolute; z-index: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tba-original-control .tba-original-inventory-slot { display: block; position: relative; background: rgb(3 6 5 / 48%); box-shadow: inset 0 0 0 1px #070a08, inset 2px 2px #30332e, inset -2px -2px #121512; }
.tba-original-control .tba-original-inventory-slot > .tba-original-image { inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.tba-original-control .tba-original-item-grade-0 { background-color: #41472c; }
.tba-original-control .tba-original-item-grade-1 { background-color: #1c3d28; }
.tba-original-control .tba-original-item-grade-2 { background-color: #142c44; }
.tba-original-control .tba-original-party { display: grid; position: absolute; z-index: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; padding: 2%; background: #1b1e1a; }
.tba-original-control .tba-original-inventory[hidden], .tba-original-control .tba-original-party[hidden] { display: none; }
.tba-original-control .tba-original-party-member { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto auto; align-items: center; gap: .5cqw; padding: .8cqw; border: 1px solid #494b3e; background: #28291f; }
.tba-original-control .tba-original-party-member[data-selected="true"] { border-color: #ce9a32; }
.tba-original-control .tba-original-party-choose { min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw; }
.tba-original-control .tba-original-party-portrait { position: relative; display: block; width: 72%; height: 12cqw; min-height: 0; flex: 0 1 auto; overflow: hidden; }
.tba-original-control .tba-original-party-member strong { font-size: 2.8cqw; line-height: 1.1; white-space: nowrap; }
.tba-original-control .tba-original-party-provider { display: flex; align-items: center; justify-content: center; gap: .8cqw; min-width: 0; overflow: hidden; font-size: 2.25cqw; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; color: #c0b69f; }
.tba-original-control .tba-original-party-provider img { display: block; width: 3cqw; height: 3cqw; flex: none; object-fit: contain; }
.tba-original-control .tba-original-party-member select { display: block; min-width: 0; width: 100%; height: 5.2cqw; margin: 0; padding: 0 .5cqw; border: 1px solid #62634c; border-radius: 0; background: #181e18; color: #e1d6bf; font: inherit; font-size: 2.5cqw; text-shadow: none; }
.tba-original-control .tba-original-party-member select:focus-visible { outline: 2px solid #ffe293; outline-offset: 1px; }
.tba-original-control .tba-original-party.tba-original-class-picker { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 2cqw; background: transparent; }
.tba-original-control .tba-original-class-picker[hidden] { display: none; }
.tba-original-control .tba-original-class-picker-label { flex: none; font-size: 3.2cqw; font-weight: 600; line-height: 1.15; text-align: center; color: #e3d29b; }
.tba-original-control .tba-original-class-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2cqw; min-height: 0; align-items: center; justify-items: center; }
.tba-original-control .tba-original-class-option { display: block; position: relative; width: 12cqw; height: auto; aspect-ratio: 30/44; min-width: 0; min-height: 0; max-height: 100%; overflow: visible; }
.tba-original-control .tba-original-class-option>.tba-original-selection-portrait { inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.tba-original-control .tba-original-class-option>.tba-original-class-owner { position:absolute; display:block; z-index:3; left:calc(100% + .5cqw); top:50%; width:3.5cqw; height:3.5cqw; max-width:none; max-height:none; transform:translateY(-50%); object-fit:contain; image-rendering:auto; pointer-events:none; }
.tba-original-control.tba-original-mode-party .tba-original-small-hero>.tba-original-selection-provider { display:none; }
.tba-original-control .tba-original-class-picker-hint { margin: 0; color: #bfb79f; font-size: 2.8cqw; line-height: 1.4; text-align: center; }
.tba-original-control .tba-original-native-tabs { position: absolute; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; }
.tba-original-control .tba-original-native-tabs button { display: flex; align-items: center; justify-content: center; gap: 9%; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; font-size: 3.6cqw; font-weight: 700; }
.tba-original-control .tba-original-native-tabs button span { font-size: 4.6cqw; color: #ffcb50; }
.tba-original-control .tba-original-navigation { position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 1%; }
/* All five menu assets are 54 × 54. Buttons and decorative spans need the same
   square box and anchor, otherwise browser button baselines stagger the row. */
.tba-original-control .tba-original-navigation > button, .tba-original-control .tba-original-menu-decoration { position: relative; display: block; min-width: 0; min-height: 0; width: 100%; height: auto; max-height: 100%; aspect-ratio: 1; align-self: center; line-height: 0; }
.tba-original-control .tba-original-navigation-icon { inset: 0; object-fit: contain; }
.tba-original-control .tba-original-navigation > button[aria-selected="true"] { filter: brightness(1.2); }
.tba-original-control .tba-original-navigation > button[aria-selected="true"]::after { content: ""; position: absolute; bottom: -1%; left: 37%; width: 26%; height: 4%; background: #f4b936; }
.tba-original-control .tba-original-sample { position: absolute; z-index: 4; text-align: center; font-size: 2.35cqw; letter-spacing: .01em; color: #b8b2a1; text-shadow: 1px 1px #060806; }
@media (prefers-reduced-motion: reduce) { .tba-original-control * { animation-play-state: paused !important; } }
.tba-original-class-option:disabled{cursor:not-allowed}.tba-original-class-option:disabled>.tba-original-selection-frame,.tba-original-class-option:disabled>.tba-original-selection-portrait{opacity:.38;filter:grayscale(1)}