@property --control-kind { syntax:"*"; inherits:false; initial-value:none; }
/* Purpose-built control art. Popup masters are reserved for actual windows.
   Native PNG bytes stay intact; background registration excludes transparent margins. */
:root {
 --control-tab-ivory:url('assets/control-art-v1/tab-ivory.png');
 --control-tab-dark:url('assets/control-art-v1/tab-dark.png');
 --control-action-ivory:url('assets/control-art-v1/action-ivory.png');
 --control-action-dark:url('assets/control-art-v1/action-dark.png');
 --control-profile-slot:url('assets/control-art-v1/profile-slot.png');
 --control-equipped-label:url('assets/control-art-v1/equipped-label.png');
 --control-nav-tile:url('assets/control-art-v1/nav-tile-matte.png');
 --control-currency-well:url('assets/control-art-v1/currency-well.png');
 --control-tab-ivory-size:102.8240% 129.3624%;--control-tab-ivory-position:48.2143% 44.0000%;
 --control-tab-dark-size:100.5556% 142.8008%;--control-tab-dark-position:50.0000% 44.7005%;
 --control-action-ivory-size:100.0000% 211.6531%;--control-action-ivory-position:50.0000% 37.6214%;
 --control-action-dark-size:105.1385% 193.0769%;--control-action-dark-position:51.9608% 38.5675%;
 --control-profile-slot-size:109.3573% 110.0324%;--control-profile-slot-position:50.5051% 49.1935%;
 --control-equipped-label-size:108.1673% 203.3708%;--control-equipped-label-position:50% 47.8261%;
 --control-nav-tile-size:114.5205% 115.4696%;--control-nav-tile-position:49.6855% 48.2143%;
 --control-currency-well-size:103.1339% 157.0499%;--control-currency-well-position:50% 47.9087%;
}
:is(.primary-action,.secondary-action,.tutorial-guide-next,.profile-name-save,.profile-name-cancel,
 .cosmetics-coin-flip,.pack-skip,.pack-dismantle,.tutorial-selection-launch,.arena-deck-edit,.arena-info-dialog .arena-retire) {
 border:0;border-image:none!important;border-radius:0;box-shadow:none;text-shadow:none;
 --control-kind:action-ivory;background:var(--control-action-ivory) var(--control-action-ivory-position)/var(--control-action-ivory-size) no-repeat;
 color:#342c20;min-height:48px;padding:9px 24px;
}
:is(.secondary-action,.profile-name-cancel,.pack-skip,.arena-deck-edit) {
 --control-kind:action-dark;background-image:var(--control-action-dark);background-position:var(--control-action-dark-position);background-size:var(--control-action-dark-size);color:#f7eed9;
}
:is(.shop-tab,.pack-payment-option,.hero-tab,.hero-edition,.pvp-mode-tab,.cosmetics-filter,.collection-toggle) {
 border:0;border-image:none!important;border-radius:0;box-shadow:none;text-shadow:none;
 --control-kind:tab-dark;background:var(--control-tab-dark) var(--control-tab-dark-position)/var(--control-tab-dark-size) no-repeat;
 color:#f7eed9;min-height:44px;padding:7px 10px;
}
:is(.shop-tab,.pack-payment-option,.hero-tab,.hero-edition,.cosmetics-filter,.collection-toggle)[aria-pressed=true],.pvp-mode-tab[aria-selected=true] {
 --control-kind:tab-ivory;background-image:var(--control-tab-ivory);background-position:var(--control-tab-ivory-position);background-size:var(--control-tab-ivory-size);color:#342c20;
}
:is(.shop-tabs,.editor-tabs,.pvp-mode-tabs){border:0;border-image:none;background:none;box-shadow:none;gap:8px}
:is(.shop-offer,.cosmetics-option,.profile-option){border:0;border-image:none;--control-kind:profile-slot;background:var(--control-profile-slot) var(--control-profile-slot-position)/var(--control-profile-slot-size) no-repeat;box-shadow:none}
:is(.shop-offer,.cosmetics-option,.profile-option)[aria-pressed=true]{box-shadow:inset 0 -3px #c79e4b;background-color:#ddc58b33}
/* Values and item illustrations are not framed windows. */
:is(.arena-wins,.arena-losses,.arena-augment-chip,.chapter-count-chip,.battle-spec-stat,.reward-type-label,.dev-tools-badge){border:0;border-image:none;background:#19171412;box-shadow:none;border-radius:5px}
:is(.item-details-icon,button.reward-icon,.reward-acquisition .reward-entry>.reward-icon){border:0;border-image:none;background:none;box-shadow:none}
:is(.pvp-ranking-mine,.pvp-season-projection,.pvp-policy-summary,.history-scroll .history-item,.arena-reward,.arena-empty-loadout){border-image:none;background:#1614100d;box-shadow:none}
.pvp-ranking-row[data-self=true]{border-image:none;background:#c3a46525}
.chapter-dialogue{border-image:none;background:#101010ba;box-shadow:none}
.chapter-dialogue .tutorial-speaker{border-image:none;background:none}
:is(.account-recovery-code,.dev-tools-field input,.dev-tools-field select){border:1px solid #b39a7155;border-image:none;background:#fffaf1;box-shadow:inset 0 1px 5px #34271922;border-radius:6px}
:is(.arena-card-move,.battle-history-control:not(.is-empty),.exile-zone-button){border:0;border-image:none;--control-kind:tab-dark;background:var(--control-tab-dark) var(--control-tab-dark-position)/var(--control-tab-dark-size) no-repeat;color:#faf1db;min-height:44px}
.arena-offer-inspect:before{border-image:none;background:#15130fb3}
.arena-offer:not(.arena-offers-augment .arena-offer).is-selected{border-image:none;background:#d4b57433}
.pvp-search-card{border-image:none;background:#181714f5;border-radius:16px}
.pvp-search-crest,.pvp-queue-overlay[data-phase=matched] .pvp-search-crest{background:none}
/* Functional small glyphs stay unframed. Their hit area is larger than their ink. */
:is(.icon-button,.auto-button,.speed-button,.quantity-button,.editor-copy-remove,.editor-unequip){border-image:none!important}
/* Every currency has a compact dedicated inset and a separate 44px plus target. */
.currency-chip{border:0;border-image:none;--control-kind:currency-well;background:var(--control-currency-well) var(--control-currency-well-position)/var(--control-currency-well-size) no-repeat;box-shadow:none;min-height:44px;padding:0 4px 0 8px;color:#f9eed9;border-radius:0;gap:0}
.currency-inspect{min-height:44px;padding:0 4px 0 0;gap:5px}
.currency-amount{color:inherit;font-size:11px}
.currency-buy{width:44px;min-width:44px;height:44px;margin:0;padding:0;border:0;border-image:none;background:none;color:#f8e6b9;box-shadow:none}
.currency-buy>.button-icon{width:15px;height:15px}
.currency-dust.currency-chip{min-width:120px;padding-inline:12px}
.currency-dust .currency-inspect{gap:8px}
/* Lobby: fixed safe footer; hero/rank content gives up height first. */
.lobby-topbar{top:calc(var(--safe-top) + 12px);grid-template-rows:64px 44px;gap:6px 8px}
.lobby-topbar>.profile-button{height:64px;align-items:flex-end;gap:9px}
.lobby-topbar>.profile-button .player-avatar{--profile-size:60px!important}
.lobby-topbar>.profile-button .profile-nickname{padding-bottom:5px;font-size:clamp(16px,4.7cqw,21px);line-height:1.15;color:#352f27}
.lobby-topbar>.icon-button{margin-top:0;align-self:start}
.pvp-home.hero-home.deck-home{padding:calc(var(--safe-top) + 136px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);min-height:0;height:100%;gap:8px}
.pvp-home-contained .pvp-home-scroll{flex:1 1 0;min-height:0;max-width:430px}
.pvp-home-contained.deck-home .pvp-home-scroll .hero-showcase{min-height:100px;flex:1 0 130px;padding-bottom:0}
.pvp-mode-tabs{gap:8px;margin-top:8px;border:0;background:none}
.pvp-mode-tab{letter-spacing:.04em;min-height:44px}
.game-shell[data-scene=lobby] .pvp-mode-tab{color:#faf0d9}
.game-shell[data-scene=lobby] .pvp-mode-tab[aria-selected=true]{color:#342c20}
.pvp-mode-tab::after{display:none}
.pvp-lobby-actions{gap:8px}
.pvp-home-footer .pvp-find-match{height:60px;min-height:60px;font-size:18px}
.pvp-home .lobby-collection-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;width:100%}
.pvp-home .lobby-collection-links>button{border:0;border-image:none!important;border-radius:0;--control-kind:nav-tile-matte;background:var(--control-nav-tile) var(--control-nav-tile-position)/var(--control-nav-tile-size) no-repeat;box-shadow:none;color:#f7eed9;min-width:0;width:100%;height:78px;min-height:78px;gap:4px;margin:0;padding:8px 3px;display:grid;grid-template-rows:30px 15px;align-content:center;justify-items:center}
.lobby-collection-links>button>strong,.lobby-collection-links>button>span:not(.pvp-content-icon):not(.control-art-layer){margin:0;line-height:15px;color:#f7eed9;align-self:center}
.lobby-collection-links>button :is(strong,span:not(.pvp-content-icon)){font-size:11px;white-space:nowrap;font-weight:700;letter-spacing:0}
.lobby-collection-links>button :is(.library-lobby-icon,.pvp-content-icon){width:30px;height:30px;margin:0}
.lobby-collection-links .pvp-content-icon .pvp-icon{width:30px;height:30px}
.lobby-collection-links .booster-lobby-link>img{width:30px;height:30px;object-fit:contain;transform:none;margin:0;box-shadow:none}
.pvp-home .lobby-pass-links{grid-column:1/-1;gap:8px;margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lobby-pass-link{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;height:58px;padding:6px 14px;border:0;border-image:none;border-radius:0;--control-kind:tab-ivory;background:var(--control-tab-ivory) var(--control-tab-ivory-position)/var(--control-tab-ivory-size) no-repeat;color:#342c20;font:700 13px var(--font-ui);box-shadow:none}
.lobby-pass-link>strong{transform:translateY(-2px)}
.pvp-find-label{transform:translateY(2px)}
.pvp-rank-inspect{display:grid;place-items:center;align-self:center;width:100%;min-width:44px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;--control-kind:none}
.lobby-pass-icon{width:34px;height:34px;object-fit:contain;flex:none}
@media(max-width:350px){.pvp-home.hero-home.deck-home{padding-inline:calc(var(--safe-left) + 14px) calc(var(--safe-right) + 14px)}.lobby-pass-link{padding-inline:8px;gap:4px;font-size:12px}.lobby-pass-icon{width:28px;height:28px}.currency-chips{gap:5px}.lobby-collection-links>button :is(strong,span:not(.pvp-content-icon)){font-size:10px}}
@media(max-height:650px){.lobby-topbar{grid-template-rows:58px 44px;gap:4px}.lobby-topbar>.profile-button{height:58px}.lobby-topbar>.profile-button .player-avatar{--profile-size:54px!important}.pvp-home.hero-home.deck-home{padding-top:calc(var(--safe-top) + 126px)}.pvp-home .lobby-collection-links>button{height:68px;min-height:68px}.lobby-pass-link{height:52px;min-height:52px}}
/* Gauges keep their own track/fill; no gold panel is used as a progress state. */
:is(.deck-cost-track,.profile-progress,.pvp-rank-meter,.arena-budget){border:1px solid #a68a56;border-image:none!important;background:#272521;border-radius:6px;box-shadow:inset 0 1px 3px #0008;overflow:hidden}
:is(.deck-cost-fill,.profile-progress-fill,.pvp-rank-fill,.arena-budget-fill){border:0;border-image:none!important;background:url('assets/pass-ui-charcoal/slider-fill-satin-inlay.png') center/100% 100% no-repeat;box-shadow:none;border-radius:4px}
.booster-room .pack-dock>.pack-skip.secondary-action{border:0;border-image:none;--control-kind:action-dark;background:var(--control-action-dark) var(--control-action-dark-position)/var(--control-action-dark-size) no-repeat;box-shadow:none;color:#f7eed9;text-shadow:none}

.control-art-host{isolation:isolate;background-image:none!important}
.control-art-layer{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border:0;background:none}
img.item-painterly-icon{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}

.pvp-home-contained .pvp-home-footer{display:flex;flex-direction:column;gap:8px}
.pvp-home-footer>.pvp-mode-tabs{margin-top:0}
.pvp-home .pvp-home-footer .lobby-collection-links{margin-top:4px}
.game-shell[data-scene=lobby] .contents-lobby-link{color:#f7eed9}
.lobby-collection-links .library-lobby-icon>.lobby-art-icon{width:100%;height:100%;max-width:100%;max-height:100%}
/* Painted silhouettes supply the shape of a control, including its shadow. */
.control-art-host{background-color:transparent!important;box-shadow:none!important}
.in-battle .control-art-layer{filter:drop-shadow(0 3px 6px #0009)}
.menu-row[aria-pressed=true]{color:#493719;font-weight:700}
.tutorial-selection-launch{padding-inline:10px;white-space:nowrap;min-width:74px}
#settings-body .install-guide{color:var(--kit-ink)}
#settings-body .app-instruction{color:var(--kit-ink);text-shadow:none}
@media(max-width:480px){.tutorial-selection-row{grid-template-columns:28px minmax(36px,1fr) 88px 70px;gap:6px}.tutorial-selection-launch{min-width:70px;padding-inline:8px}}

.control-art-positioned{position:relative}
:root{--control-glyph-ivory:url('assets/control-art-v1/glyph-ivory.png');--control-glyph-dark:url('assets/control-art-v1/glyph-dark.png');--control-glyph-ivory-size:118.3019% 119.2015%;--control-glyph-dark-size:120.5769% 126.2840%}