/* TCG uses the profile's existing identity row and native records/navigation style. */
.tcg-collection-shell .profile-modal-header{padding-top:16px;min-height:64px}
.tcg-collection-loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:240px;color:var(--text-color);font:16px Montserrat,sans-serif}
/* The TCG's loading circle: collections, TCG surfaces and a pack being prepared (tcg.css positions that one). */
.tcg-collection-spinner,.tcg-stage[aria-busy="true"][data-ready="false"]::before{display:block;width:42px;height:42px;box-sizing:border-box;border:3px solid #a64b4433;border-top-color:var(--secondary-color);border-radius:50%;animation:tcg-collection-loading-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.tcg-collection-spinner,.tcg-stage[aria-busy="true"][data-ready="false"]::before{animation:none}}
.tcg-collection-loading{position:relative;cursor:wait!important}
.tcg-collection-loading::after{content:'';display:inline-block;vertical-align:middle;margin-left:10px;width:17px;height:17px;box-sizing:border-box;border:2px solid #d7a84e40;border-top-color:var(--primary-color);border-radius:50%;animation:tcg-collection-loading-spin .8s linear infinite}
@keyframes tcg-collection-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tcg-collection-loading::after{animation:none}}
/* The profile's TCG tab while its collection prepares (profile-collection.js): only the loading status shows. The
   collection lays out unseen, since its artwork checks measure cards, and the tab fades in once it is ready. */
.profile-modal #tcg-profile-tab[aria-busy="true"]{position:relative;animation:none}
.profile-modal #tcg-profile-tab[aria-busy="true"] > #tcg-collection{position:absolute;top:0;left:0;right:0;height:0;overflow:hidden;visibility:hidden}
/* While a TCG screen covers the site (page-cover.js) the frosted-glass controls behind it stop blurring: under its
   dark overlay they barely show, but they were re-blurred every frame. A 1920×1080 frame took 18 ms with them and
   4 ms without, and they were the biggest cost on PCs without graphics acceleration. The screens keep their own. */
:root.tcg-page-covered :not(dialog,dialog *,.tcg-experience,.tcg-experience *,#profile-modal,#profile-modal *){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.profile-modal.tcg-enabled .profile-modal-tabs .tab-btn{padding-inline:10px}
.profile-modal.tcg-enabled .profile-modal-tabs .tabs-buttons{gap:5px}
.profile-modal .tcg-profile-cards[hidden]{display:none!important}
.profile-modal .tab-btn.tcg-profile-tab:disabled{color:#737373;opacity:.55;cursor:default;pointer-events:none;background:transparent;box-shadow:none}
.profile-modal .tab-btn.tcg-profile-tab:disabled::after{display:none}
@media(max-width:700px){.profile-modal.tcg-enabled .profile-modal-tabs .tab-btn{padding-inline:8px}.profile-modal.tcg-enabled .profile-modal-tabs .tabs-buttons{gap:3px}}
.profile-modal.tcg-enabled .profile-stats-help{display:none}
.profile-modal .tab-btn.tcg-profile-tab{font-family:BeauMed,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.profile-modal .tcg-profile-tab .tcg-inventory-title{background:none;color:inherit;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;text-shadow:none}
.profile-modal #tcg-profile-tab{min-width:0;padding-top:0}
.profile-modal:has(#tcg-profile-tab.active) .profile-modal-tabs{margin-bottom:4px}
.profile-modal:has(#tcg-profile-tab.active) .tab-content{padding-top:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;font:12px Montserrat,sans-serif;text-align:left}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]{min-width:55px;width:0;flex:1;padding:10px 14px;border:1px solid rgba(255,255,255,.05);border-radius:0;background:var(--semi-transparent-bg);box-shadow:none;font:13px Montserrat,sans-serif;color:var(--text-color);transition:border-color .2s,box-shadow .2s}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]::placeholder{color:rgba(255,255,255,.6)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]:hover{border-color:var(--primary-color);box-shadow:0 5px 15px var(--highlight-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]:focus{outline:none;box-shadow:0 0 0 1px var(--primary-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filters-dropdowns{display:flex;flex:0 0 auto;gap:6px;flex-wrap:nowrap}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-btn{font:12px Montserrat,sans-serif;padding:10px 12px;border:1px solid var(--border-color);background:var(--semi-transparent-bg);color:var(--text-color);border-radius:0;list-style:none;box-shadow:0 3px 8px var(--shadow-color);letter-spacing:.5px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-btn:hover{border-color:var(--primary-color);box-shadow:0 5px 15px var(--highlight-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search details[open] .filter-dropdown-btn{border-color:var(--primary-color);color:var(--primary-color)}
.tcg-search details[open] .toggle-arrow{transform:rotate(180deg)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-btn.has-selection{color:var(--primary-color);border-color:var(--primary-color)}
.tcg-search summary::-webkit-details-marker{display:none}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-panel{min-width:180px;max-width:220px;padding:0;z-index:210;background:rgba(30,30,30,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--highlight-color);border-radius:0;box-shadow:0 5px 15px var(--shadow-color);overflow:hidden}
.leaderboard-notice.tcg-notification{position:fixed;top:62px;right:15px;bottom:auto;left:auto;max-width:calc(100vw - 30px);z-index:11000}
.tcg-notification::after{display:none}
.tcg-notification .leaderboard-notice-message{white-space:pre-line;max-width:360px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown:last-child .filter-dropdown-panel{left:auto;right:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .tcg-filter-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:auto;text-align:left;border:0;border-radius:0;background:transparent;padding:10px 15px;color:var(--text-color);font:600 .8rem/1.4 Montserrat,sans-serif;letter-spacing:1px;cursor:pointer;transition:background .2s,color .2s}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .tcg-filter-option:hover,.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .tcg-filter-option:focus-visible{background:var(--highlight-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .tcg-filter-option.selected{color:var(--primary-color)}
.tcg-filter-check{visibility:hidden}
.tcg-filter-option[aria-pressed="true"] .tcg-filter-check{visibility:visible}
.profile-modal .profile-modal-tabs .tabs-buttons{flex-wrap:wrap}
.login-btn .login-icon-button.tcg-profile-loading{position:relative;cursor:wait;animation:none}

/* Pack inventory stays in the opening surface, using the approved wrapper. */
:is(.tcg-experience,.tcg-rewards) .tcg-pack-pile{position:fixed;left:28px;bottom:24px;width:124px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;background:none;border:0;color:var(--primary-color);font-family:BeauMed,sans-serif;font-size:18px!important;font-weight:400!important;line-height:1.4;letter-spacing:.5px;text-align:center;text-transform:none}
.tcg-experience .tcg-pack-pile:disabled{opacity:1;cursor:default}
.tcg-experience .tcg-pack-pile:not(:disabled){cursor:pointer}
.tcg-experience .tcg-pack-pile .tcg-pile-label{padding:8px 4px;border:1px solid transparent;text-decoration:none}
.tcg-pile-art{--pile-mid:0;--pile-step:7px;--pile-rise:4px;--pile-angle:4deg;--pile-lift:0px;--pile-lean:0deg;position:relative;display:block;width:92px;height:105px;pointer-events:auto}
/* Centre the visible fan, not the five preloaded wrappers (hidden packs do not count). */
.tcg-pile-art:has(>.tcg-pile-wrapper:nth-child(2):not([hidden])){--pile-mid:.5}
.tcg-pile-art:has(>.tcg-pile-wrapper:nth-child(3):not([hidden])){--pile-mid:1}
.tcg-pile-art:has(>.tcg-pile-wrapper:nth-child(4):not([hidden])){--pile-mid:1.5}
.tcg-pile-art:has(>.tcg-pile-wrapper:nth-child(5):not([hidden])){--pile-mid:2}
.tcg-pile-wrapper{--pile-offset:calc(var(--pile) - var(--pile-mid));position:absolute;left:50%;bottom:0;display:block;width:60px;height:85px;transform:translate(calc(-50% + var(--pile-offset)*var(--pile-step)),calc(var(--pile)*var(--pile-rise)*-1 - var(--pile-lift))) rotate(calc(var(--pile-offset)*var(--pile-angle) + var(--pile-lean)));transform-origin:50% 100%}
.tcg-pile-wrapper>.tcg-reviewed-pack{display:block;width:246px;height:350px;transform:scale(.244);transform-origin:0 0}
:is(.tcg-experience,.tcg-rewards) .tcg-pile-label{display:block;padding:0;font-family:BeauMed,sans-serif;font-size:inherit;font-weight:400;line-height:1.4;letter-spacing:.5px;white-space:nowrap}
.tcg-experience .tcg-pack-count{font:inherit;letter-spacing:inherit}
:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-label{color:var(--text-color);text-decoration:none}
.tcg-experience .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-label:not(:has(.tcg-pack-count)){border-color:var(--primary-color);background:var(--semi-transparent-bg)}
/* Hover is feedback even while the next-pack action is locked during reveal.
   Do not gate it with :not(:disabled); navigation intentionally disables this button. */
:is(.tcg-experience,.tcg-guide) .tcg-pack-pile{pointer-events:auto}
:is(.tcg-experience,.tcg-guide) .tcg-pile-wrapper>*{pointer-events:none}
:is(.tcg-experience,.tcg-guide) .tcg-pack-pile .tcg-pile-wrapper{transition:transform 240ms cubic-bezier(.2,.75,.25,1)}
:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:9px;--pile-rise:6px;--pile-angle:6deg;--pile-lift:10px;--pile-lean:-6deg}
:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:focus-visible{outline:1px solid var(--primary-color);outline-offset:8px}
@media(max-width:700px){:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:6px;--pile-rise:4px;--pile-lift:5px}}
@media(prefers-reduced-motion:reduce){:is(.tcg-experience,.tcg-guide) .tcg-pack-pile .tcg-pile-wrapper{transition:none}:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:7px;--pile-rise:4px;--pile-angle:4deg;--pile-lift:0px;--pile-lean:0deg}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){:is(.tcg-experience,.tcg-guide) .tcg-pack-pile:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:5px;--pile-rise:3px}}
.tcg-flying-pack{z-index:6!important;pointer-events:none!important;transform-origin:50% 50%;will-change:transform}
/* Up to 190px of room above the fixed pack pile and View collection (they sit beside the centred buttons, so this
   is only spacing). A shrinking spacer, not padding: in a short window such as the League client's ~934x709 iframe,
   reserved padding made the pack view scroll, and show a scrollbar, just to reach empty space. */
@media(min-width:701px){.tcg-experience .tcg-shell{padding-bottom:0}.tcg-experience .tcg-shell::after{content:'';flex:1000 0 0;max-height:190px}.tcg-experience .tcg-pack-actions{min-height:0}}
@media(max-width:700px){.tcg-experience .tcg-pack-pile{left:12px;bottom:70px;width:108px;font-size:16px}.tcg-pile-art{--pile-step:5px;--pile-rise:3px;width:72px;height:82px}.tcg-pile-wrapper{width:46px;height:65px}.tcg-pile-wrapper>.tcg-reviewed-pack{transform:scale(.187)}.tcg-experience .tcg-shell{padding-bottom:170px}.tcg-experience .tcg-pack-actions .tcg-bottom-actions{max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:flex-end}}
/* No packs: "Get more packs" is a plain link, aligned with View collection opposite. */
.tcg-experience .tcg-pack-pile.is-empty{left:25px;bottom:24px;width:auto;align-items:flex-start}
@media(max-width:700px){.tcg-experience .tcg-pack-pile.is-empty{left:12px;bottom:12px}}
.login-icon-button.tcg-profile-loading .login-icon{visibility:hidden}
.login-icon-button.tcg-profile-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;transform:translate(-50%,-50%);animation:spin-center 1s linear infinite}
@media(prefers-reduced-motion:reduce){.login-icon-button.tcg-profile-loading::after{animation:none}}
.profile-modal .tcg-profile-cards{width:100%;margin:0;padding:0 10px;border:0;box-sizing:border-box}
.tcg-profile-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.profile-modal .tcg-profile-section-heading h3,.profile-modal .collection-heading h3{margin:0;color:var(--text-color);font:600 16px Montserrat,sans-serif}
.profile-modal .tcg-section-brand{font-family:BeauMed,sans-serif;font-size:24px;line-height:1;letter-spacing:1.2px}
.profile-modal .tcg-profile-entry{padding:8px 0;font-size:12px;opacity:.8;text-transform:none}
.profile-modal .tcg-featured{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:none;margin:0}
.tcg-featured-value{display:block;margin-top:9px;text-align:center;font:600 11px Montserrat,sans-serif;color:var(--text-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker){position:relative;inset:auto;width:100%;height:auto;max-height:none;padding:0 10px 20px;margin:0;background:none;border:0;border-radius:0;overflow:visible;z-index:auto;box-shadow:none;text-align:left;font-family:Montserrat,sans-serif;color:var(--text-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker)[hidden]{display:none!important}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-heading{align-items:center;margin:16px 0 12px;gap:12px;display:flex}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .profile-record-tab{border:0;border-radius:0;background:none;box-shadow:none;color:var(--text-color);font:600 12px Montserrat,sans-serif;padding:10px 12px;text-transform:none}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-detail-back{position:absolute;top:0;left:0;width:36px;height:36px;padding:0;border:0;background:none;border-radius:8px;opacity:1;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .2s ease}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-detail-back:hover{transform:translateX(-2px)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-detail-back svg{width:24px;height:24px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .profile-record-tab:hover{opacity:1}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .profile-record-tab[aria-pressed="true"]{opacity:1}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .profile-record-tab[aria-pressed="true"]::after{background:var(--secondary-color)}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-type-tabs{justify-content:flex-start;width:100%;margin:0 0 12px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-toolbar{border:0;padding:0;margin:0 0 20px;gap:12px;align-items:center;flex-wrap:wrap}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-search-label{flex:1;min-width:140px;margin:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) input[type="search"]{margin:0;min-width:0;width:100%;font:12px Montserrat,sans-serif;background:transparent;border:0;border-bottom:1px solid var(--border-color);color:var(--text-color);padding:10px 0;border-radius:0}
.collection-sort-options,.tray-tier-tabs{display:flex;gap:4px;flex-wrap:wrap}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-sort-options button,.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tray-tier-tabs button{font:500 11px Montserrat,sans-serif;color:var(--text-color);border:0;background:none;border-radius:0;padding:6px;opacity:.5}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-sort-options button[aria-pressed="true"],.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tray-tier-tabs button[aria-pressed="true"]{color:var(--primary-color);opacity:1}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 12px}
.collection-batch{display:contents}
.collection-batch[data-art-ready="false"]>.collection-entry,.collection-batch[data-art-ready="false"]>.collection-group-heading{visibility:hidden;pointer-events:none}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-group-heading{grid-column:1/-1;margin:18px 0 0;font:600 15px/1.4 Montserrat,sans-serif;color:var(--text-color);letter-spacing:.3px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-group-heading button{display:flex;width:100%;min-height:44px;align-items:center;gap:14px;padding:8px 2px;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-group-heading button:hover{color:var(--primary-color)}
.collection-group-rule{flex:1;height:1px;background:var(--border-color,#444);opacity:.75}
.collection-group-heading .toggle-arrow{width:16px;height:16px;flex:none;transform-origin:50% 40%;transition:transform .3s ease}
.collection-group-heading [aria-expanded="true"] .toggle-arrow{transform:rotate(0deg)}
.collection-group-heading [aria-expanded="false"] .toggle-arrow{transform:rotate(180deg)}
.collection-group-heading button:focus-visible{outline:1px solid var(--primary-color);outline-offset:4px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-batch:first-child .collection-group-heading:first-child{margin-top:0}
#collection-sentinel{height:1px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-stats{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;margin:0 0 4px}
.collection-stat{display:flex;flex-direction:column;gap:5px}
.collection-stat>span{font:400 14px/1.4 BeauMed,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-color-secondary,#aaa)}
.collection-stat strong{font:600 22px/1.2 Montserrat,sans-serif;font-variant-numeric:tabular-nums;color:var(--text-color)}
.collection-stat strong small{font:400 13px Montserrat,sans-serif;color:var(--text-color-secondary,#aaa)}
.collection-total-power{position:relative;padding-left:14px}
.collection-total-power::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--primary-color);box-shadow:0 0 12px var(--primary-color)}
.collection-total-power>span{color:var(--primary-color);letter-spacing:2.2px}
.collection-total-power strong{font:italic 800 36px/1 PowerBarlow,sans-serif;letter-spacing:.4px;color:var(--primary-color);text-shadow:0 2px 0 #0006}
.collection-card-counts{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 18px;border-left:1px solid #ffffff20;border-right:1px solid #ffffff20;font:400 11px/1.35 Montserrat,sans-serif;color:var(--text-color-secondary,#aaa)}
.collection-card-counts>div{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.collection-card-counts strong{font:italic 800 25px/1.1 PowerBarlow,sans-serif;font-variant-numeric:tabular-nums;color:var(--text-color)}
.collection-card-counts span{font-size:12px;letter-spacing:.7px;text-transform:uppercase}
.collection-card-counts .collection-count-divider{font:italic 800 22px/1 PowerBarlow,sans-serif;letter-spacing:0;color:var(--text-color-secondary,#aaa);text-transform:none;margin-inline:1px}
.collection-rarity-counts{display:grid;grid-template-columns:repeat(2,auto);gap:8px 18px;justify-self:end}
.collection-rarity-counts>div{--rarity-ink:#d6bedf;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--rarity-ink)}
.collection-rarity-counts span{font:400 13px/1.4 BeauMed,sans-serif;letter-spacing:.6px;text-transform:uppercase}
.collection-rarity-counts b{font:italic 800 20px/1.2 PowerBarlow,sans-serif;font-variant-numeric:tabular-nums}
.collection-rarity-counts [data-tier=gold]{--rarity-ink:var(--primary-color)}
.collection-rarity-counts [data-tier=prismatic]{--rarity-ink:#c1b7e7}
.collection-rarity-counts [data-tier=secret]{--rarity-ink:#d78669}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) #collection-filters{flex-wrap:wrap}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) #collection-filters input{flex-basis:140px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) #collection-filters .filters-dropdowns{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.collection-group-heading .toggle-arrow{transition:none}}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .entry-label{display:none}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-entry .tcg-card-name{font-size:14px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-entry .tcg-card-subtitle{font-size:7px}
/* Thumbnails are selectable, flat artwork; only the large detail card is a viewer.
   Pause finishes at their resting appearance instead of repainting every card. */
#tcg-collection .collection-entry{contain:layout style}
#tcg-collection .collection-entry .tcg-card-slot{perspective:none}
#tcg-collection .collection-entry .tcg-card,
#tcg-collection .collection-entry .tcg-card-rotor{transform:none!important;transform-style:flat;transition:none!important;filter:none!important;will-change:auto}
#tcg-collection .collection-entry .tcg-card *,
#tcg-collection .collection-entry .tcg-card *::before,
#tcg-collection .collection-entry .tcg-card *::after{animation-play-state:paused!important;will-change:auto!important}
/* Thumbnails never tilt, so their raised parts are drawn flat: a 3D lift gives
   every part its own compositor layer, and a full tray of cards made thousands. */
#tcg-collection :is(.collection-entry,.detail-attached-champion) :is(.tcg-champion-face,.tcg-champion130,.c130-card,.c130-upper-corner,.c130-eq-plane,.c130-eq-group){transform-style:flat}
#tcg-collection :is(.collection-entry,.detail-attached-champion) .tcg-champion130{transform:scale(var(--champion-scale,1))}
#tcg-collection :is(.collection-entry,.detail-attached-champion) .tcg-champion130 :is(.c130-part,.c130-power-value,.c130-power-label,.c130-finish-relief,.c130-eq-plane,.c130-eq-layer,.c130-finish-spot){transform:none!important}
#tcg-collection .collection-entry .tcg-card:focus-visible{outline:1px solid var(--primary-color);outline-offset:3px}
/* Mouse only: phones keep :hover on the last tapped card, which left a stray outline after deselecting. */
@media(hover:hover){#tcg-collection .collection-entry .tcg-card:hover{outline:1px solid var(--primary-color);outline-offset:3px}}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) #collection-detail{position:relative;width:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.profile-modal #collection-detail .detail-layout{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:0}
.profile-modal #collection-detail .detail-hero{width:min(280px,70%);min-height:0;padding:0;margin:0 auto;transition:filter .15s}
.profile-modal #collection-detail .detail-hero.tcg-tip-room{width:min(140px,33vw)}
.profile-modal #collection-detail .detail-hero.drag-over{outline:none;box-shadow:none}
.profile-modal #collection-detail .tcg-card{padding:0;border:0;background:none;border-radius:12px}
.profile-modal #collection-detail .detail-controls{display:contents;text-align:center}
.profile-modal #collection-detail .detail-actions{justify-content:center;gap:10px;margin:0}
.profile-modal #collection-detail p,.profile-modal #collection-detail label,.profile-modal #collection-detail input,.profile-modal #collection-detail select{font-family:Montserrat,sans-serif;color:var(--text-color)}
.profile-modal #collection-detail select{background:#1a1a1a;border:1px solid var(--border-color);border-radius:4px;padding:8px}
.profile-modal #collection-detail .detail-actions button,.profile-modal #collection-detail .etch-confirm button,.profile-modal #collection-more,.profile-modal [data-tray-more],.profile-modal [data-confirm-selection]{font:600 12px Montserrat,sans-serif;border:1px solid var(--border-color);background:var(--semi-transparent-bg);color:var(--text-color);border-radius:4px;padding:8px 12px}
.profile-modal #collection-detail .detail-panel:empty{display:none}
/* Same treatment as Upgrade Profile Tier, without its payment click handler. */
.profile-modal .tcg-request-trade,.profile-modal #collection-detail .detail-actions .tcg-request-trade{margin-left:0;min-height:0;height:auto;padding:8px 10px;font:400 .7rem Montserrat,sans-serif;text-transform:uppercase;background:var(--secondary-color);color:var(--text-color);border:0;border-radius:4px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.profile-modal .tcg-request-trade:not(:disabled):is(:hover,:focus-visible),.profile-modal #collection-detail .detail-actions .tcg-request-trade:not(:disabled):is(:hover,:focus-visible){background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 6px 18px rgba(166,75,68,.6)}
@media(prefers-reduced-motion:reduce){.profile-modal .tcg-request-trade,.profile-modal #collection-detail .detail-actions .tcg-request-trade{transition:none}.profile-modal .tcg-request-trade:not(:disabled):is(:hover,:focus-visible),.profile-modal #collection-detail .detail-actions .tcg-request-trade:not(:disabled):is(:hover,:focus-visible){transform:none}}
.profile-modal .tcg-request-trade:disabled{opacity:.5;cursor:default}
.profile-modal .tcg-request-trade[hidden]{display:none}
.profile-modal .tcg-collection-trade-start{display:block;flex:0 0 auto;align-self:center;margin:0;white-space:nowrap}
@media(max-width:600px){.profile-modal .tcg-request-trade,.profile-modal #collection-detail .detail-actions .tcg-request-trade{padding:6px 8px;font-size:.8rem}}
.profile-modal #collection-detail .detail-panel{width:100%;border:0;margin:0;padding:0}
.profile-modal #collection-detail .etch-confirm{max-width:500px;margin:auto;padding:12px;border:1px solid var(--border-color);border-radius:4px;background:var(--semi-transparent-bg)}
.profile-modal #collection-detail .detail-tray{width:100%;border:0;padding-top:0}
/* Tier upgrade, above the tray search: a plain button; only the tier name carries the tier colour. */
.profile-modal #collection-detail .detail-upgrade{position:relative;z-index:30;display:flex;justify-content:center;margin:0 0 12px}
.profile-modal #collection-detail .detail-upgrade-button{min-width:260px;padding:9px 28px;font:500 .85rem Montserrat,sans-serif;color:#fff;background:#3a3a3e;border:1px solid #55555b;border-radius:4px;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.profile-modal #collection-detail .detail-upgrade-button b{font-weight:700}
/* Gold matches the cards' tier label (champion130.css). Prismatic follows the prismatic augment art:
   violet fading into its warm peach-gold. */
.profile-modal #collection-detail .detail-upgrade-tier[data-tier=gold]{color:#edcb7c}
.profile-modal #collection-detail .detail-upgrade-tier[data-tier=prismatic]{color:#c08cff;background:linear-gradient(90deg,#a777ff 0%,#c98bff 40%,#ffbe7d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.profile-modal #collection-detail .detail-upgrade-button:is(:hover,:focus-visible){background:#46464b;border-color:#6b6b72}
@media(prefers-reduced-motion:reduce){.profile-modal #collection-detail .detail-upgrade-button{transition:none}}
/* Phones: a wider target for the upgrade button (height unchanged). */
@media(max-width:560px){.profile-modal #collection-detail .detail-upgrade-button{width:min(100%,360px)}}
/* Auto-equip (auto-equip.js): the workbench's one-click button, beside the tier upgrade when there is one. */
.profile-modal #collection-detail .detail-upgrade{flex-wrap:wrap;gap:10px}
.profile-modal #collection-detail .detail-auto-equip-button{min-width:200px;padding:9px 28px;font:600 .85rem Montserrat,sans-serif;color:#fff;background:var(--secondary-color);border:1px solid var(--secondary-color);border-radius:4px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.profile-modal #collection-detail .detail-auto-equip-button:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 6px 18px rgba(166,75,68,.6)}
@media(prefers-reduced-motion:reduce){.profile-modal #collection-detail .detail-auto-equip-button{transition:none}.profile-modal #collection-detail .detail-auto-equip-button:is(:hover,:focus-visible){transform:none}}
@media(max-width:560px){.profile-modal #collection-detail .detail-auto-equip-button{width:min(100%,360px)}}
/* Its preview: one row per pick (icon framed in its tier colour, name, power range), then the expected total. */
.tcg-auto-picks{display:grid;gap:6px;max-height:min(52vh,420px);overflow:auto;margin:0;padding:0;list-style:none}
.tcg-auto-pick{display:grid;grid-template-columns:18px 34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 10px 5px 8px;border-radius:6px;background:rgba(255,255,255,.04);cursor:pointer;transition:opacity .15s ease}
.tcg-auto-pick input{width:18px;height:18px;margin:0;accent-color:var(--secondary-color);cursor:pointer}
/* Unticked picks are skipped: dimmed, still there to tick again. */
.tcg-auto-pick:has(input:not(:checked)){opacity:.45}
.tcg-auto-pick img{width:34px;height:34px;box-sizing:border-box;border:2px solid #bdcfd6;border-radius:5px;object-fit:cover}
.tcg-auto-pick[data-tier=gold] img{border-color:#edcb7c}
.tcg-auto-pick[data-tier=prismatic] img{border-color:#c08cff}
.tcg-auto-pick[data-tier=secret] img{border-color:#f1aa87}
.tcg-auto-pick[data-foil] img{box-shadow:0 0 8px rgba(159,232,255,.7)}
.tcg-auto-name{font-size:13px;font-weight:600;line-height:1.25}
.tcg-auto-name em{margin-left:6px;font:normal 700 10px Montserrat,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#aaa}
/* The roll range, coloured by its expected gain (equip-gain.js, set inline). */
.tcg-auto-range{font:italic 800 15px/1 PowerBarlow,sans-serif;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.tcg-equip-dialog .tcg-auto-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#aaa}
.tcg-auto-total strong{font:italic 800 22px/1 PowerBarlow,sans-serif;font-variant-numeric:lining-nums tabular-nums;color:var(--text-color)}
/* Loading: the TCG's loading circle (.tcg-collection-spinner) above the message. */
.tcg-equip-dialog .tcg-auto-status{display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0 8px;color:#aaa}
.profile-modal #collection-detail .detail-tray h3{font:600 14px Montserrat,sans-serif;margin:0 0 12px;text-align:center}
.tray-kind-tabs{display:flex;justify-content:center;border-bottom:3px solid rgba(255,255,255,.1);margin-bottom:12px}
.profile-modal #collection-detail .equipment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:18px 12px;max-height:none;overflow:visible;padding:8px 3px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-entry[draggable="true"]{cursor:grab}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-entry[draggable="true"] .tcg-card{cursor:grab}
.tcg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.profile-modal .equipment-grid .collection-entry{position:relative;user-select:none}
.profile-modal .equipment-grid .collection-entry[draggable="true"]{touch-action:manipulation}
/* Touch equipping: the selected tray card waits for a tap on the champion. */
.profile-modal .equipment-grid .collection-entry.is-tap-selected{outline:2px solid var(--primary-color);outline-offset:4px;border-radius:8px}
.tcg-card-lifted{visibility:hidden!important}
.tcg.tcg-drag-ghost{position:fixed;z-index:12000;pointer-events:none;padding:0;margin:0;border:0;background:none;border-radius:0;box-shadow:none;max-width:none;max-height:none;overflow:visible;perspective:1100px;will-change:transform;visibility:visible!important}
.tcg-drag-ghost .tcg-aura,.tcg-drag-ghost .entry-label,.tcg-drag-ghost .tcg-card-sparks{display:none}
.tcg-drag-ghost .tcg-card{padding:0;border:0;background:none}
.tcg-drag-ghost .tcg-card-name{font-size:12px}
.tcg-drag-ghost .tcg-card-subtitle{display:none}
.tcg-drag-ghost .tcg-power{font-size:9px}
.tcg-drag-ghost .tcg-card-info{padding:5px}
.tcg-drag-hint{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:220;white-space:nowrap;background:rgba(26,26,26,.98);border:1px solid var(--border-color);border-radius:4px;padding:7px 10px;color:var(--text-color);font:600 12px Montserrat,sans-serif;box-shadow:0 3px 12px var(--shadow-color);pointer-events:none}
.profile-modal #collection-detail .detail-hero.tcg-drop-target,
.profile-modal #collection-detail .detail-hero.tcg-drop-target.drag-over{outline:none;box-shadow:none}
.detail-hero .tcg-back-aura{transition:filter .18s ease}
/* Follow desktop input directly; retain the glow fade and eased return on leave.
   The inner card rotor still handles the independent flip animation. */
.detail-hero .tcg-card:hover{transition:filter .25s}
.detail-hero .is-equip-target .tcg-back-aura{filter:brightness(1.6)}
.detail-hero.tcg-drop-target,.detail-hero.tcg-drop-target.drag-over{outline:none;box-shadow:none}
.tcg-equip-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(430px,calc(100% - 32px));height:fit-content;max-height:85vh;overflow:auto;padding:22px 20px 18px;background:rgba(26,26,26,.98);border:2px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text-color);box-shadow:0 16px 50px rgba(0,0,0,.6);font:14px/1.5 Montserrat,sans-serif}
.collection-entry{position:relative}
.tcg-stack-count{position:absolute;right:5px;top:5px;z-index:8;min-width:26px;padding:3px 6px;border:1px solid var(--border-color);border-radius:4px;background:rgba(26,26,26,.95);color:var(--text-color);font:600 12px Montserrat,sans-serif;text-align:center;pointer-events:none}
.tcg-equip-dialog::backdrop{background:rgba(0,0,0,.75)}
.tcg-equip-dialog h2{margin:0 0 12px;font-size:18px;letter-spacing:.5px}
.tcg-equip-dialog p{margin:10px 0}
.tcg-equip-dialog .tcg-simulated-power{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:11px;color:#aaa}
.tcg-equip-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.tcg-equip-actions button{border:1px solid var(--border-color);border-radius:4px;padding:9px 15px;color:var(--text-color);background:var(--semi-transparent-bg);font:600 13px Montserrat,sans-serif;cursor:pointer}
.tcg-equip-actions [data-confirm]{background:var(--secondary-color);border-color:var(--secondary-color);color:white}
.tcg-equip-actions button:disabled{opacity:.5;cursor:wait}
/* Stat Anvil: Not yet on the left, the two offered gains on the right. */
.tcg-anvil-actions [data-cancel]{margin-right:auto}
.tcg-anvil-actions [data-confirm]{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:84px}
.tcg-anvil-actions [data-confirm] img{width:16px;height:16px;object-fit:contain}
/* Shardblade: purple, name with its multiplier underneath. */
.tcg-anvil-actions [data-confirm][data-shardblade]{flex-direction:column;gap:1px;background:#6f3aa8;border-color:#9a63d6;line-height:1.15}
.tcg-anvil-actions [data-confirm][data-shardblade]:hover{background:#8247c4;border-color:#b483ea}
.tcg-anvil-actions [data-confirm][data-shardblade] small{font-size:11px;font-weight:600;opacity:.9}
.tcg-equip-error{color:#e89785;font-size:12px}
@media(max-width:700px){.profile-modal :is(#tcg-collection,.tcg-collection-picker){padding:0 0 18px}.profile-modal :is(#tcg-collection,.tcg-collection-picker) .profile-record-tab{padding:10px 8px;font-size:11px}.profile-modal .tcg-featured{gap:7px}.profile-modal .tcg-profile-cards{padding-inline:0}.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-entry .tcg-card-name{font-size:12px}}
@media(max-width:390px){.profile-modal .tcg-featured{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A transparent edge shadow moves with the pack; only transform/opacity animate. */
.tcg-experience .tcg-reviewed-pack{isolation:isolate}
.tcg-experience .tcg-reviewed-pack::before{content:'';position:absolute;inset:0;background:transparent;border-radius:3px;box-shadow:0 0 20px 5px #d7a84e55,0 0 38px 8px #d7a84e22;opacity:0;transition:opacity .2s;pointer-events:none;z-index:-1}
.tcg-experience .tcg-reviewed-pack.is-body-hover::before{opacity:1}
.tcg-reviewed-pack .bp-stage .bp-pack.tilt{filter:none}
.top-right-controls{z-index:600}
.top-right-controls .login-container{flex-direction:row;align-items:center;gap:8px}
.top-right-controls .countdown-timer{display:none!important}
.login-btn.logged-in.tcg-inventory{position:relative;isolation:isolate;height:37px;min-width:70px;padding:2px 15px;justify-content:center;text-decoration:none;border:1px solid var(--border-color);background:var(--semi-transparent-bg);box-shadow:0 3px 8px var(--shadow-color)}
.logo-arena.tcg-inventory-title{font-size:20px;line-height:1;letter-spacing:1.2px}
.tcg-inventory.has-attention::before{content:'';position:absolute;inset:-14px -19px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,transparent 20%,#d7a84e55 42%,transparent 72%);filter:blur(7px);animation:tcg-loot-aura 2.8s ease-in-out infinite}
.login-btn.logged-in.tcg-inventory.has-attention{border-color:#e1b565;box-shadow:inset 0 1px 0 #ffdfaa33,0 0 16px #d7a84e66,0 0 34px #d7a84e33}
.login-btn.logged-in.tcg-inventory:hover{border-color:var(--primary-color);box-shadow:0 5px 15px var(--highlight-color)}
.login-btn.logged-in.tcg-inventory.has-attention:hover{box-shadow:inset 0 1px 0 #ffe6bb44,0 0 20px #d7a84e99,0 0 44px #d7a84e44}
.tcg-pack-notice{left:var(--tcg-button-center);transform:translateX(-50%);padding:6px 10px;max-width:none;text-decoration:none;--notice-arrow-left:50%}
.tcg-pack-notice:hover{--notice-fill:var(--secondary-color)}
.tcg-pack-notice:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
.login-menu.show ~ .tcg-pack-notice{visibility:hidden}
.top-right-controls.has-tcg-packs > #profile-update-notice{top:78px}
/* Below 800px the TCG button beside the account button overlaps the ARENASWEATS logo, so it
   stacks under the account button. The account menu still opens right under the account button,
   and the notices move below the stack. */
@media(max-width:800px){.top-right-controls .login-container{flex-direction:column;align-items:flex-end;gap:6px}.top-right-controls .login-container .tcg-inventory{order:1;min-width:150px}.top-right-controls .login-container .tcg-pack-notice{order:2;top:calc(100% + 7px);left:auto;right:0;transform:none;--notice-arrow-left:calc(100% - 35px)}.top-right-controls .login-container .login-menu{top:42px}.top-right-controls > #profile-update-notice{top:87px}.top-right-controls.has-tcg-packs > #profile-update-notice{top:121px}}
#tcg-account-menu a{text-decoration:none}
#tcg-account-menu a:focus-visible,#tcg-account-menu button:focus-visible,.tcg-inventory:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
@keyframes tcg-loot-aura{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.tcg-inventory.has-attention::before{animation:none;opacity:.7}}
.tcg-toast{position:fixed;top:62px;right:15px;max-width:320px;z-index:11000;background:rgba(30,30,30,.95);border:1px solid var(--border-color);border-left:3px solid var(--secondary-color);color:var(--text-color);padding:10px 14px;border-radius:0;font:600 .8rem/1.5 "Montserrat",sans-serif;box-shadow:0 3px 8px var(--shadow-color)}.tcg-toast[hidden]{display:none}.tcg-detail{color:#e9e0d1;background:#191a20;border:1px solid #746045;border-radius:12px;width:min(1000px,94vw);max-height:90vh;padding:30px;overflow:auto;box-shadow:0 25px 100px #000b}.tcg-detail::backdrop{background:#050508c9}.tcg-detail h2,#tcg-collection h1{font-family:BeauMed,Georgia,serif;font-weight:400}.tcg-detail p{font:13px/1.6 Arial,sans-serif;color:#b9b3ac}.tcg-detail button,#tcg-collection>button,.collection-heading button{border:1px solid #796243;background:#252329;color:#e4cfaa;border-radius:5px;padding:9px 13px;cursor:pointer}.tcg-detail button:disabled{opacity:.4;cursor:wait}.tcg-detail label{display:grid;gap:5px;font:12px Arial,sans-serif;margin:9px 0}.tcg-detail input,.tcg-detail select{background:#111217;border:1px solid #57504a;color:#e9decc;padding:9px;border-radius:4px}.detail-error,#collection-error{color:#e89785!important}.tcg-power{display:block;color:#dfd5e5;font:11px Arial,sans-serif;margin-bottom:7px;letter-spacing:.4px}.tcg-power>span{color:#c68cf0;font-size:18px;text-shadow:0 0 5px #946abb80}.tcg-etchings{position:absolute;inset:25% 12px 30%;z-index:4;pointer-events:none}.tcg-etched{position:absolute;left:0;top:calc(var(--etch)*15%);width:25px;height:25px;border-radius:50%;background:#14121966;box-shadow:inset 1px 1px 3px #000d,inset -1px -1px 0 #d7a84e77;overflow:hidden}.tcg-etched.augment{left:auto;right:0;top:calc(var(--etch)*23%)}.tcg-etched img{width:100%;height:100%;object-fit:contain;opacity:.85;filter:saturate(.7) contrast(1.15);mix-blend-mode:luminosity}.tcg-etched:hover{filter:none}#tcg-inspected-card .tcg-etched,.detail-hero .tcg-etched{width:36px;height:36px}.tcg-card-info{padding-top:7px}.tcg-full-art .tcg-card-info{background:linear-gradient(transparent,#0c0c14b0);padding-top:25px}
#tcg-collection{position:fixed;inset:65px 0 0;width:100%;height:auto;max-height:none;margin:0;padding:35px max(22px,calc((100vw - 1280px)/2));box-sizing:border-box;border:0;border-radius:0;background:#17181e;overflow:auto;z-index:500}.collection-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:24px}.collection-heading h1{font-size:36px;margin:8px 0}.collection-heading p{color:#b5afa6;font-size:13px}.collection-heading nav{display:flex;align-items:center;gap:17px}.collection-heading a{color:#d7ba8b;text-decoration:none}.collection-toolbar{display:flex;flex-wrap:wrap;gap:15px;border-block:1px solid #51442f;padding:17px 0;margin-bottom:25px}.collection-toolbar label{font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#b8a586}.collection-toolbar input,.collection-toolbar select{display:block;background:#22232a;border:1px solid #5b503f;border-radius:4px;color:#e0d6c5;padding:9px;margin-top:5px;font:12px Arial,sans-serif}.collection-toolbar input{min-width:220px}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:25px 20px}.collection-entry{min-width:0;cursor:pointer}.collection-entry .tcg-card-slot{width:100%}.collection-entry .tcg-card-name{font-size:18px}.collection-entry .tcg-card-subtitle{font-size:8px}.collection-entry .tcg-card-info{text-align:left}.collection-entry .tcg-card-bottom{font-size:6px}.collection-entry .tcg-card-meta{display:none}.collection-entry .entry-label{display:flex;justify-content:space-between;font:10px Arial,sans-serif;color:#ab9a80;margin-top:8px}.collection-entry.selected{outline:2px solid #d7a84e;outline-offset:6px;border-radius:8px}.collection-entry .tcg-aura{display:none}.collection-empty{grid-column:1/-1;color:#a8a39b;padding:40px;text-align:center}.tcg-detail{width:min(1080px,94vw)}.detail-layout{display:grid;grid-template-columns:320px 1fr;gap:35px}.detail-hero{padding:22px 5px}.detail-hero .tcg-card-slot{width:100%}.detail-hero .tcg-card-name{font-size:30px}.detail-hero .tcg-card-subtitle{font-size:11px}.detail-hero .tcg-card-bottom{font-size:9px}.detail-hero .tcg-power{font-size:17px}.detail-hero .tcg-card-topline{font-size:10px}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.detail-controls h2{font-size:30px;margin:12px 0}.detail-controls .equipment-list{padding:0;list-style:none;font:12px/1.8 Arial,sans-serif;color:#c7b79f}.equipment-search{width:100%;box-sizing:border-box}.equipment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:10px;max-height:450px;overflow:auto}.equipment-grid .tcg-card-name{font-size:12px}.equipment-grid .tcg-card-subtitle{display:none}.equipment-grid .tcg-card-bottom{font-size:5px}.equipment-grid .tcg-reviewed-rarity{transform:scale(.7)}.equipment-grid .tcg-power{font-size:9px;margin:0}.equipment-grid .tcg-card-info{padding:5px}.equipment-grid .tcg-etched{display:none}.equipment-grid .entry-label{font-size:9px}.detail-drop-hint{border:1px dashed #8f7254;padding:15px;border-radius:8px;text-align:center;color:#c9b188}.detail-hero.drag-over{outline:2px solid #d7a84e;border-radius:12px}.etch-confirm{border:1px solid #ad8554;border-radius:8px;padding:18px;background:#302a24}.trade-row{padding:18px 0;border-bottom:1px solid #554733}.trade-row .trade-cards{display:flex;gap:12px}.trade-row .trade-cards .tcg-card-slot{width:100px}.trade-row .tcg-card-name{font-size:11px}.trade-row .tcg-card-subtitle{display:none}.trade-row .tcg-card-info{padding:4px}.trade-row .tcg-reviewed-rarity{transform:scale(.65)}.trade-row .tcg-card-topline{font-size:6px}.trade-row .tcg-card-bottom{font-size:5px}.trade-row .tcg-power{font-size:8px}.tcg-profile-cards{border-top:1px solid #796343;padding:15px;margin-top:15px;width:100%;box-sizing:border-box}.tcg-profile-cards h3{font:20px BeauMed,Georgia,serif;margin:4px 0 10px}.tcg-profile-cards>a{color:#d7ba8b}.tcg-featured{display:flex;gap:15px;max-width:480px;margin-top:15px}.tcg-featured-card{display:block;flex:1;min-width:0;text-decoration:none}.tcg-featured .tcg-card-slot{width:100%}.tcg-featured .tcg-card-name{font-size:13px}.tcg-featured .tcg-card-subtitle{display:none}.tcg-featured .tcg-card-bottom{font-size:5px}.tcg-featured .tcg-card-info{padding:5px}.tcg-featured .tcg-reviewed-rarity{transform:scale(.6)}.tcg-featured .tcg-aura{display:none}.tcg-featured .tcg-card{pointer-events:none}.tcg-pack-context{font:11px/1.65 Arial,sans-serif;text-align:center;color:#bdb09d;max-width:600px;margin:auto}.tcg-pack-context button{background:none;border:0;color:#d8b778;text-decoration:underline;cursor:pointer}.tcg-pack-actions a{color:#d8b778}.tcg-pack-actions .tcg-bottom-actions{position:fixed;bottom:24px;right:25px;display:flex;gap:12px;align-items:center}.tcg-pack-actions .tcg-next-centre{position:fixed;bottom:75px;left:50%;transform:translateX(-50%)}.tcg .tcg-reviewed-pack.is-body-hover{transform:rotate(-3deg) translateY(-5px);filter:none}.tcg-reviewed-pack .bp-stage .bp-pack:hover .bp-tab{transform:none}.tcg-reviewed-pack .bp-stage .bp-pack:hover .bp-tab-shadow{opacity:0}.tcg-reviewed-pack .bp-stage .bp-pack:hover .bp-curl{opacity:0}.tcg-reviewed-pack.is-corner .bp-stage .bp-tab{transform:translateY(-2px) rotate(-12deg)!important}.tcg-reviewed-pack.is-corner .bp-stage .bp-curl{transform:scaleX(.8) skewY(-5deg);opacity:.85!important}.tcg-reviewed-pack.is-corner .bp-stage .bp-tab-shadow{transform:translate(2px,4px) rotate(-5deg);opacity:.5!important}.tcg .tcg-stage[data-phase="opening"] .tcg-reviewed-pack{transform:none;filter:none}.tcg-stage[data-phase="opening"] .tcg-reviewed-pack.is-corner .bp-tab{animation:tcg-reviewed-tear .65s ease-in forwards}
@media(max-width:700px){.detail-layout{grid-template-columns:1fr}.detail-hero{width:240px;margin:auto}.tcg-detail{padding:26px 15px}#tcg-collection{inset:52px 0 0;padding:22px 15px}.collection-heading{display:block}.collection-heading nav{margin-top:12px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.collection-entry .tcg-card-name{font-size:16px}.collection-toolbar{gap:8px}.collection-toolbar input{min-width:150px}.tcg-pack-actions .tcg-bottom-actions{bottom:12px;right:12px}.tcg-pack-context{font-size:10px}.tcg-next-centre{display:none!important}}
@media(prefers-reduced-motion:reduce){.tcg .tcg-reviewed-pack.is-body-hover{transform:none}}
.tcg-detail{--tcg-gold:#d7a84e;--tcg-muted:#a4a29f}.tcg-detail .tcg-card{padding:0;border:0;border-radius:11px;background:none;color:inherit}.tcg-detail .tcg-card:hover{background:none}.tcg-detail [hidden]{display:none!important}.tcg-detail *, .tcg-detail *::before, .tcg-detail *::after{box-sizing:border-box}.tcg-detail .tcg-card:focus-visible{outline:2px solid #d7a84e;outline-offset:4px}.tcg-detail .detail-actions a{color:#d7ba8b;text-decoration:none}.tcg-profile-cards .tcg-power{font-size:10px}.tcg-profile-cards .tcg-power>span{font-size:14px}
.logo-sweats{animation-name:arena-logo-float;will-change:transform;text-shadow:1px 2px 3px #0003}
/* Transform-only bounce: avoid repainting the outlined word's shadow every frame. */
@keyframes arena-logo-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}
@media(prefers-reduced-motion:reduce){.logo-sweats{animation:none;will-change:auto}}
/* Equipment presentation: keep the tray's space, without interactive controls
   competing with the engraving. Restoring the same nodes fades them back in. */
#collection-detail .detail-actions,#collection-detail .detail-panel,#collection-detail .detail-tray{transition:opacity .24s ease}
/* While engraving, the view stays visible; the first click anywhere skips. */
.detail-hero{position:relative}
.detail-hero-incoming{position:absolute;inset:0;visibility:hidden;pointer-events:none}
#collection-detail .tcg-engraving-continue{position:absolute;transform:translate(-50%,-50%);z-index:30;background:transparent;border:0;padding:14px 26px;color:#f6ecd8;font:500 24px/1.2 BeauMed,Georgia,serif;letter-spacing:.5px;white-space:nowrap;cursor:pointer;text-shadow:0 2px 4px #000,0 0 18px #000c;animation:tcg-continue-pulse 2.2s ease-in-out infinite}
@keyframes tcg-continue-pulse{0%,100%{opacity:.75}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#collection-detail .tcg-engraving-continue{animation:none}}
#collection-detail .tcg-engraving-continue:hover{color:#d7a84e}
@media(prefers-reduced-motion:reduce){#collection-detail .detail-actions,#collection-detail .detail-panel,#collection-detail .detail-tray,.detail-hero .tcg-back-aura{transition:none}}

/* Size against the actual profile interior, including desktop's narrower modal.
   Inline-size containers and :has are supported by the Chromium 108 client. */
.profile-modal :is(#tcg-collection,.tcg-collection-picker){container:tcg-collection / inline-size;min-width:0}
.collection-recycle{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:11px/1.4 Montserrat,sans-serif}
.collection-recycle[hidden]{display:none}
#tcg-collection.is-recycling .collection-recycle{position:sticky;top:0;z-index:20;padding:4px 0;background:#1e1e1e;box-shadow:0 6px 12px #0004}
.collection-recycle button{min-height:30px;padding:5px 9px;border:1px solid var(--border-color);border-radius:0;background:var(--semi-transparent-bg);color:var(--text-color);font:inherit;cursor:pointer}
.collection-recycle button:hover{border-color:var(--primary-color);color:var(--primary-color)}
.collection-recycle button:disabled{opacity:.4;cursor:default}
.collection-recycle [data-review],.tcg-recycle-dialog [data-confirm]{border-color:#a64b44;background:#77352f;color:#fff}
.collection-recycle [data-review]:hover,.tcg-recycle-dialog [data-confirm]:hover{border-color:#d27870;background:#a64b44;color:#fff}
.recycle-summary{display:flex;flex-direction:column;gap:2px;flex:1 1 190px}
.recycle-summary strong{font:20px BeauMed,sans-serif;color:var(--primary-color)}
.recycle-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.collection-recycle>small{flex-basis:100%;color:var(--text-color-secondary,#aaa)}
#tcg-collection.is-recycling .collection-entry:not(.recycle-protected) .tcg-card{outline:1px dashed #a64b4480;outline-offset:3px;cursor:cell}
#tcg-collection.is-recycling .collection-entry::after{display:none}
#tcg-collection.is-recycling .tcg-card,.copy-selecting .tcg-card{filter:brightness(.48)}
#tcg-collection.is-recycling .recycle-selected .tcg-stack-count{display:none}
#tcg-collection.is-recycling .recycle-selected .tcg-card{outline:2px solid #c9756e;outline-offset:3px}
#tcg-collection .recycle-protected{opacity:.35}
.recycle-quantity{position:absolute;top:4px;left:4px;z-index:9;display:flex;align-items:center;gap:2px;white-space:nowrap;color:#fff;background:#232327f5;border:1px solid #827363;font:600 12px Montserrat,sans-serif;max-width:calc(100% - 8px)}
.recycle-quantity button,.tcg-surface .recycle-quantity button{min-width:24px;min-height:24px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:600 16px Montserrat,sans-serif;cursor:pointer}
.recycle-selected .recycle-quantity,.copy-selected .recycle-quantity{border-color:var(--secondary-color);color:var(--secondary-color)}
.recycle-quantity span:empty,.recycle-quantity [data-minus]:disabled{display:none}
.recycle-quantity button:disabled{opacity:.35}
.tcg-recycle-dialog ul{list-style:none;padding:0;max-height:35vh;overflow:auto}
.tcg-recycle-dialog li{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.tcg-recycle-dialog small{color:var(--primary-color);text-transform:capitalize}
.recycle-meter{position:relative;flex:1 1 240px;height:30px;overflow:hidden;background:#ffffff08;border:1px solid #ffffff10;box-sizing:border-box}
.recycle-meter-fill,.recycle-meter-preview{position:absolute;inset:0 auto 0 0;background:#45784b55;pointer-events:none}
.recycle-meter-preview{background:#a64b442e}
.recycle-meter-label{position:relative;display:flex;align-items:center;gap:6px;height:100%;padding:0 8px;white-space:nowrap;color:var(--text-color)}
.recycle-meter-label small{margin-left:auto;font:inherit;color:#b9b9b9}.recycle-meter-label b{font-weight:500;color:#e5a19a}
.recycle-selection-count{color:#dfb5b1}
#tcg-collection.is-recycling .collection-grid{padding-top:16px}
#tcg-collection .recycle-pack-reward{position:fixed;bottom:24px;left:28px;width:124px;z-index:2000;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--primary-color);font:400 18px/1.4 BeauMed,sans-serif;letter-spacing:.5px;text-align:center;text-transform:none;cursor:pointer}
#tcg-collection .recycle-pack-reward:focus-visible{outline:1px solid var(--primary-color);outline-offset:8px}
#tcg-collection .recycle-pack-label{display:block;white-space:nowrap;font-family:BeauMed,sans-serif;font-size:inherit;font-weight:400;line-height:1.4;letter-spacing:.5px}
.recycle-pack-reward:is(:hover,:focus-visible) .recycle-pack-label{color:var(--text-color)}
.recycle-pack-reward .tcg-pile-wrapper>*{pointer-events:none}
.recycle-pack-reward .tcg-pile-wrapper{transition:transform 240ms cubic-bezier(.2,.75,.25,1)}
.recycle-pack-reward:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:9px;--pile-rise:6px;--pile-angle:6deg;--pile-lift:10px;--pile-lean:-6deg}
.recycle-pack-flight{position:fixed;width:246px;height:350px;z-index:2001;pointer-events:none;transform-origin:center}
@media(max-width:700px){#tcg-collection .recycle-pack-reward{left:12px;bottom:16px;width:108px;font-size:16px}.recycle-pack-reward:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:6px;--pile-rise:4px;--pile-lift:5px}.recycle-meter{flex-basis:100%}.recycle-meter-label{font-size:10px}}
@media(pointer:coarse){.collection-recycle button{min-height:44px;min-width:38px}.recycle-quantity button,.tcg-surface .recycle-quantity button{min-height:30px;min-width:30px}.profile-modal #tcg-collection.is-recycling .collection-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}
@media(prefers-reduced-motion:reduce){.recycle-pack-reward .tcg-pile-wrapper{transition:none}.recycle-pack-reward:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:7px;--pile-rise:4px;--pile-angle:4deg;--pile-lift:0px;--pile-lean:0deg}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.recycle-pack-reward:is(:hover,:focus-visible) .tcg-pile-wrapper{--pile-step:5px;--pile-rise:3px}}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) :is(.collection-browser,.collection-detail-body,.detail-layout,.detail-tray){min-width:0;width:100%;box-sizing:border-box}
/* One line; keepStatsOnOneLine (collection-stats.js) zooms the row down when it does not fit. */
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-stats{grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:clamp(4px,1cqi,12px);padding-block:4px}
.collection-stats>*{min-width:0;max-width:100%;box-sizing:border-box}
.collection-total-power{padding-left:clamp(5px,1.5cqi,14px);gap:clamp(2px,.6cqi,5px)}
.collection-total-power>span{font-size:clamp(8px,2.34cqi,14px);letter-spacing:clamp(0px,.22cqi,2.2px);white-space:nowrap}
.collection-total-power strong{font-size:clamp(19px,6cqi,36px);white-space:nowrap}
.collection-card-counts{padding-inline:clamp(4px,1.5cqi,12px)}
.collection-card-counts>div{flex-wrap:nowrap;white-space:nowrap;gap:clamp(2px,.7cqi,6px)}
.collection-card-counts strong{font-size:clamp(15px,4.17cqi,25px)}
.collection-card-counts span{font-size:clamp(8px,2cqi,12px);letter-spacing:clamp(0px,.1cqi,.7px)}
.collection-card-counts .collection-count-divider{font-size:clamp(14px,3.67cqi,22px);margin:0}
.collection-rarity-counts{grid-template-columns:repeat(2,max-content);column-gap:clamp(5px,1.8cqi,14px);row-gap:clamp(3px,1cqi,8px);padding-right:clamp(6px,1.5cqi,12px)}
.collection-rarity-counts>div{min-width:0;gap:clamp(3px,1cqi,8px);flex-wrap:nowrap;white-space:nowrap}
.collection-rarity-counts span{font-size:clamp(8px,2.17cqi,13px);letter-spacing:clamp(0px,.08cqi,.6px)}
.collection-rarity-counts b{font-size:clamp(14px,3.34cqi,20px);white-space:nowrap}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-grid,
.profile-modal #collection-detail .equipment-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,100px),1fr));gap:16px 12px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-group-heading{min-width:0}
.collection-group-heading button>span:first-child{overflow-wrap:anywhere}
.collection-group-rule{min-width:12px}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search{flex-wrap:wrap;min-width:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]{flex:1 1 160px;min-width:0;max-width:100%;min-height:44px;box-sizing:border-box}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filters-dropdowns{flex-wrap:wrap;max-width:100%;min-width:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown{position:relative;min-width:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;box-sizing:border-box;white-space:normal}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .toggle-arrow{flex-shrink:0}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-panel{box-sizing:border-box;min-width:0;width:200px;max-width:min(100cqi,220px);max-height:min(300px,45vh);overflow-y:auto;overscroll-behavior:contain}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .tcg-filter-option{min-height:44px;box-sizing:border-box;white-space:normal}
.profile-modal #collection-detail .detail-hero{width:min(280px,calc(100% - 56px));box-sizing:border-box}
.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-detail-back{width:44px;height:44px}
/* Phones: the back arrow sits just left of the hero card (centred, min(280px, 100% - 56px) wide) instead of on its frame. Its 44px tap area overlaps the card edge by 4px; the chevron stays clear of it. !important beats the site's `.badge-detail-back{left:12px!important}` under 600px. */
@media(max-width:560px){.profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-detail-back{left:calc(50% - min(140px,50% - 28px) - 40px)!important}}
.profile-modal #collection-detail .detail-actions{max-width:100%;flex-wrap:wrap}
.profile-modal #collection-detail .detail-actions button{min-height:44px;white-space:normal}
.tcg-equip-actions{flex-wrap:wrap}
.tcg-equip-actions button{min-height:44px;flex:1 1 110px}
.tcg-equip-actions [data-ok]{flex:0 1 calc(50% - 5px)}
.tcg-equip-dialog{max-height:85dvh;overflow-wrap:anywhere}

@container tcg-collection (max-width:480px){
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]{flex-basis:100%;width:100%;font-size:16px}
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filters-dropdowns{width:100%;flex:1 1 100%}
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown{flex:1 1 120px}
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-btn{width:100%;font-size:12px}
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search .filter-dropdown-panel{width:100%;max-width:100%}
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-grid,
    .profile-modal #collection-detail .equipment-grid{gap:14px 10px}
}
@container tcg-collection (max-width:400px){
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .collection-grid,
    .profile-modal #collection-detail .equipment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
    /* Scope modal sizing to TCG so other profile tabs retain their layout. */
    #profile-modal .profile-modal-content:has(#tcg-profile-tab.active),
    #profile-modal .profile-modal-content:has(.tcg-collection-shell){min-width:0;width:calc(100% - 16px);max-width:620px;box-sizing:border-box;height:92vh;height:92dvh;max-height:92vh;max-height:92dvh;padding:12px}
    .profile-modal:has(#tcg-profile-tab.active) .profile-player-name{overflow-wrap:anywhere;min-width:0}
    .profile-modal:has(#tcg-profile-tab.active) .profile-modal-tabs .tab-btn{min-height:44px}
    .tcg-equip-dialog{padding:18px 14px}
}
@media(pointer:coarse){
    .profile-modal :is(#tcg-collection,.tcg-collection-picker) .tcg-search input[type="search"]{font-size:16px}
}

.equipment-grid .collection-entry.is-attached{outline:2px solid #d7a84e;outline-offset:3px;border-radius:12px}
.equipment-grid .collection-entry .attached-label{display:block;color:#f0d49c;font-weight:600;letter-spacing:.4px}
.detail-equipped-note{color:#d8cdb8}
/* Equipped item view: its champion's card on the item's top-right corner. */
.detail-hero .tcg-card-slot{position:relative}
/* The champion an equipped card belongs to: no frame, bigger, lifted by a shadow; click opens it. */
.tcg-detail .detail-attached-champion{position:absolute;top:-34px;right:-40px;width:140px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;appearance:none;outline:none;cursor:pointer;z-index:20;transform:rotate(5deg);filter:drop-shadow(0 14px 20px rgba(0,0,0,.85)) drop-shadow(0 0 2px #000);transition:transform .2s ease,filter .2s ease}
.detail-attached-champion:hover,.detail-attached-champion:focus-visible{transform:rotate(2deg) translateY(-4px) scale(1.05);filter:drop-shadow(0 18px 26px rgba(0,0,0,.9)) drop-shadow(0 0 3px #000)}
.detail-attached-champion:focus-visible .tcg-card{outline:2px solid #d7a84e;outline-offset:4px;border-radius:10px}
@media(max-width:700px){.tcg-detail .detail-attached-champion{width:90px;top:-28px;right:-12px}}
.detail-attached-champion .tcg-card-slot{width:100%;perspective:none}
.tray-more-marker{display:block;height:1px;pointer-events:none}
.tray-more-marker[hidden]{display:none}
/* Packs won in the collection (Fire Sale): they fly to this pile, bottom left, like the match-roll screen's (pack-flight.js). */
.collection-pack-pile{position:fixed;left:28px;bottom:24px;width:124px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;color:var(--primary-color);font-family:BeauMed,sans-serif;font-size:18px;line-height:1.4;letter-spacing:.5px;text-align:center}
.collection-pack-pile .tcg-pile-label{display:block;white-space:nowrap}
.collection-flying-pack{position:fixed;z-index:21;width:60px;height:85px;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 3px 12px #d7a84e50)}
.collection-flying-pack[hidden]{display:none}
.collection-flying-pack>.tcg-reviewed-pack{display:block;width:246px;height:350px;transform:scale(.24);transform-origin:0 0}

/* Equip luck: spare copies that reroll an equipped piece say so in the tray. */
.tcg-reroll-badge{position:absolute;left:5px;top:5px;z-index:8;padding:3px 6px;border:1px solid #f5c45199;border-radius:4px;background:rgba(40,31,12,.95);color:#f5dc9a;font:700 11px Montserrat,sans-serif;letter-spacing:.3px;pointer-events:none}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word{margin-left:6px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:12px}
/* The luck word colours (champion130.css), on the dialog's dark background. */
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="0"]{color:#bcbcc6}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="1"]{color:#e2a871}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="2"]{color:#7fe0a6}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="3"]{color:#7cc4ff}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="4"]{color:#ff8fec}
.tcg-equip-dialog .tcg-reroll-current .tcg-luck-word[data-luck="5"]{color:#e8bf62}
.tcg-equip-dialog .tcg-reroll-odds strong{color:#f5dc9a}
/* An equip suggestion's expected gain (equip-gain.js gainMarkup): the number in its --gain-colour, a small grey AVG
   under it. Suggested equips and Best on. */
.tcg-gain{display:flex;flex-direction:column;align-items:flex-start;flex:none;white-space:nowrap}
.tcg-gain b{color:var(--gain-colour)}
.tcg-gain small{color:var(--text-color-secondary,#aaa)}
/* Suggested equips (equip-suggestions.js): a few one-tap equips above your collection. */
#tcg-collection .equip-suggestions{margin:6px 0 16px}
#tcg-collection .equip-suggestions[hidden]{display:none}
#tcg-collection .equip-suggestions-title{display:flex;align-items:center;gap:14px;margin:0 0 8px;font:400 13px/1.4 BeauMed,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary-color)}
#tcg-collection .equip-suggestions-title::after{content:'';flex:1;height:1px;background:var(--border-color,#444);opacity:.75}
/* Four columns: at most four suggestions (tcg_equip_suggest.MAX_SUGGESTIONS); two on phones. */
#tcg-collection .equip-suggestions-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#tcg-collection .equip-suggestions-note{grid-column:1/-1;margin:0;padding:6px 0;font:400 12px/1.5 Montserrat,sans-serif;color:var(--text-color-secondary,#aaa)}
#tcg-collection .equip-suggestions-error{color:#e89785}
/* Two lines per row, nothing truncated: the icons, then the average gain (AVG under it) and its reason. Widths
   (fonts measured): 4 rows in an 846px modal collection leave 183px inside each row; "+42.3k" (55px) + 8px +
   "Places higher" (93px) = 155px. On a 390px phone, 2 by 2 rows leave 152px and need 135px. A reason that doesn't
   fit wraps onto line 2's hidden second line instead of showing cut off. */
#tcg-collection .equip-suggestion{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;margin:0;padding:9px 10px 8px;border:1px solid #ffffff1c;border-radius:8px;background:linear-gradient(135deg,#ffffff0d,#ffffff03);box-shadow:none;color:var(--text-color);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
#tcg-collection .equip-suggestion:hover{border-color:#d7a84e99;background-color:#d7a84e12;transform:translateY(-1px)}
#tcg-collection .equip-suggestion:focus-visible{outline:1px solid var(--primary-color);outline-offset:3px}
#tcg-collection .equip-suggestions[aria-busy="true"] .equip-suggestion{cursor:progress}
#tcg-collection .equip-suggestions[aria-busy="true"] .equip-suggestion:not(.is-playing){opacity:.45}
#tcg-collection .equip-suggestion.is-playing{border-color:var(--primary-color);box-shadow:0 0 14px #d7a84e40}
#tcg-collection .equip-suggestion-icons{display:flex;align-items:center;gap:3px;flex:none}
#tcg-collection .equip-suggestion-icons img{display:block;object-fit:cover}
#tcg-collection .equip-suggestion-material{width:32px;height:32px;border-radius:6px;background:#14121966;box-shadow:0 0 0 1px #d7a84e66}
#tcg-collection .equip-suggestion-material[data-kind="augment"]{border-radius:50%}
#tcg-collection .equip-suggestion-arrow{width:12px;height:12px;color:var(--primary-color);opacity:.8}
#tcg-collection .equip-suggestion-champion{--tier-ink:#b8c9d6;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--tier-ink),0 0 10px #0008}
#tcg-collection .equip-suggestion-champion[data-tier="gold"]{--tier-ink:#e8be69}
#tcg-collection .equip-suggestion-champion[data-tier="prismatic"]{--tier-ink:#a9ebe9}
#tcg-collection .equip-suggestion-champion[data-tier="secret"]{--tier-ink:#ef6846}
/* Line 2 is exactly the gain's height (the number with AVG under it): a reason too wide to sit beside it wraps out
   of sight. */
#tcg-collection .equip-suggestion-line{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:8px;width:100%;height:34px;overflow:hidden}
#tcg-collection .equip-suggestion-line .tcg-gain b{font:italic 800 20px/22px PowerBarlow,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.3px;text-shadow:0 2px 0 #0006}
#tcg-collection .equip-suggestion-line .tcg-gain small{font:600 9px/12px Montserrat,sans-serif;letter-spacing:.8px}
#tcg-collection .equip-suggestion-reason{flex:none;white-space:nowrap;font:600 10px/22px Montserrat,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--text-color-secondary,#aaa)}
@media(max-width:520px){
    #tcg-collection .equip-suggestions-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
    #tcg-collection .equip-suggestion{gap:6px;padding:8px}
    #tcg-collection .equip-suggestion-material{width:26px;height:26px}
    #tcg-collection .equip-suggestion-arrow{width:9px;height:9px}
    #tcg-collection .equip-suggestion-champion{width:32px;height:32px}
    #tcg-collection .equip-suggestion-line{height:30px;column-gap:6px}
    #tcg-collection .equip-suggestion-line .tcg-gain b{font-size:17px;line-height:19px}
    #tcg-collection .equip-suggestion-line .tcg-gain small{font-size:8px;line-height:11px}
    #tcg-collection .equip-suggestion-reason{font-size:9px;line-height:19px;letter-spacing:.4px}
}
@media(prefers-reduced-motion:reduce){#tcg-collection .equip-suggestion{transition:none}#tcg-collection .equip-suggestion:hover{transform:none}}
/* Best on (best-on.js): an unequipped item or augment's best champions, each ring and gain in the gain's colour. */
.profile-modal #collection-detail .detail-best-on{display:flex;flex-direction:column;align-items:center;gap:9px;margin:4px 0 16px}
.profile-modal #collection-detail .tcg-best-on-label{font:600 10px Montserrat,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#b8a586}
.profile-modal #collection-detail .tcg-best-on-picks{display:flex;justify-content:center;gap:20px}
.profile-modal #collection-detail .tcg-best-on-pick{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;background:none;border:0;white-space:nowrap;cursor:pointer}
.profile-modal #collection-detail .tcg-best-on-pick .tcg-gain{align-items:center;line-height:1.1}
.profile-modal #collection-detail .tcg-best-on-pick .tcg-gain b{font:700 12px Montserrat,sans-serif}
.profile-modal #collection-detail .tcg-best-on-pick .tcg-gain small{font:600 8px Montserrat,sans-serif;letter-spacing:.9px}
.profile-modal #collection-detail .tcg-best-on-icon{display:block;box-sizing:border-box;width:52px;height:52px;padding:2px;border-radius:50%;background:var(--gain-colour,#3a3a3e);transition:transform .2s ease,box-shadow .2s ease}
.profile-modal #collection-detail .tcg-best-on-icon img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile-modal #collection-detail button.tcg-best-on-pick:is(:hover,:focus-visible){outline:none}
.profile-modal #collection-detail button.tcg-best-on-pick:is(:hover,:focus-visible) .tcg-best-on-icon{transform:translateY(-2px);box-shadow:0 0 16px rgba(76,175,80,.45)}
.profile-modal #collection-detail .tcg-best-on-picks.is-loading .tcg-best-on-icon{background:#2a2a2f;animation:tcg-best-on-pulse 1.1s ease-in-out infinite}
.profile-modal #collection-detail .tcg-best-on-picks.is-loading .tcg-best-on-pick{cursor:default}
.profile-modal #collection-detail .detail-best-on .tcg-best-on-empty{margin:0;font:500 12px Montserrat,sans-serif;color:#a8a39b}
@keyframes tcg-best-on-pulse{50%{opacity:.5}}
@media(max-width:560px){.profile-modal #collection-detail .tcg-best-on-picks{gap:16px}.profile-modal #collection-detail .tcg-best-on-icon{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.profile-modal #collection-detail .tcg-best-on-icon{transition:none;animation:none!important}.profile-modal #collection-detail button.tcg-best-on-pick:is(:hover,:focus-visible) .tcg-best-on-icon{transform:none}}