/* Player cover: custom artwork above a legible account panel. */
.hub-id, .hub-id.has-theme {
  display: block; position: relative; isolation: isolate;
  min-height: 0; padding: 0; overflow: hidden; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: none;
}
.hub-id .hub-id-bg {
  inset: 0 0 auto; height: 128px;
  background-color: var(--bg-card-2);
}
.hub-id:not(.has-theme) .hub-id-bg { background-image: url('assets/hub/arena.jpg'); }
html[data-theme="light"] .hub-id:not(.has-theme) { box-shadow: none; }
.hub-id::after, .hub-id.has-theme::after {
  content: ''; position: absolute; inset: 92px 0 auto; height: 36px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent, var(--bg-card));
}
.hub-id > .hub-id-main, .hub-id.has-theme > .hub-id-main {
  display: block; width: 100%; padding: 96px 16px 16px; box-sizing: border-box;
}
.hub-id .hub-identity { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.hub-id .hub-av, .hub-id.has-theme .hub-av {
  width: 68px; height: 68px; flex: 0 0 68px;
  border: 4px solid var(--bg-card); background: var(--bg-card-2); color: var(--accent-hi);
}
.hub-id .hub-av #av-fallback { color: var(--accent-hi); font-size: 24px; }
.hub-id .hub-name, .hub-id.has-theme .hub-name,
html[data-theme="light"] .hub-id.has-theme .hub-name {
  max-width: none; min-width: 0; padding-bottom: 3px; margin-top: 40px !important;
  font-size: 22px !important; line-height: 1.15 !important;
  color: var(--text) !important; white-space: normal; overflow-wrap: anywhere;
  text-overflow: clip; overflow: visible;
}
.hub-id > .hub-notify-button, .hub-id.has-theme > .hub-notify-button {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 12px;
  background: #14171deb; color: #f5c070; border: 1px solid #ffffff26;
}
.hub-id .hub-notify-button svg { width: 20px; height: 20px; }
.hub-id .hub-notify-button i { top: 5px; right: 5px; }
.hub-id .hub-verse-switch {
  width: 100%; min-height: 48px; margin: 8px 0 0; padding: 10px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text-sub); text-align: left;
}
.hub-id .hub-verse, .hub-id.has-theme .hub-verse,
html[data-theme="light"] .hub-id.has-theme .hub-verse {
  min-width: 0; flex: 1; white-space: normal; overflow-wrap: anywhere; font-size: 14px !important;
  line-height: 1.4 !important; color: var(--text-sub) !important;
}
.hub-id .hub-verse-switch > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.hub-id .hub-id-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; }
.hub-id .hub-pts, .hub-id.has-theme .hub-pts {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 8px;
  padding: 0; background: none; border: 0; border-radius: 0;
  font-size: 12px !important; color: var(--text-sub) !important; letter-spacing: 0;
}
.hub-id .hub-pts strong { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.hub-id .hub-league, .hub-id.has-theme .hub-league {
  max-width: 100%; padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--accent-hi); font-size: 13px; line-height: 1.4; white-space: normal;
}
.hub-id button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.hub-id .hub-verse-switch, .hub-id > .hub-notify-button {
  transition: background-color 160ms ease, border-color 160ms ease;
}
.hub-id .hub-verse-switch:active { background: var(--accent-dim); }
.hub-id > .hub-notify-button:active { background: #252931; border-color: #f5c07080; }
@media (hover: hover) {
  .hub-id .hub-verse-switch:hover { background: var(--accent-dim); }
  .hub-id > .hub-notify-button:hover { background: #252931; border-color: #f5c07080; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-id .hub-verse-switch, .hub-id > .hub-notify-button { transition: none; }
}
@media (max-width: 350px) { .hub-id .hub-name { font-size: 20px !important; } }

/* Recent cards keep their thumbnail; the dark decorative veil has no light-mode role. */
html[data-theme="light"] .recent-item.has-bg::after { display: none; }
html[data-theme="light"] .recent-item { color: var(--text); }
html[data-theme="light"] .recent-rank.r-Эпический { color: #8246bc; }
html[data-theme="light"] .recent-rank.r-Редкий { color: #216bb2; }

html[data-theme="light"] { color-scheme: light; --text-mute: #65707d; }
html[data-theme="dark"] { color-scheme: dark; }

/* Light shop chrome, with white lettering retained on illustrated product covers. */
html[data-theme="light"] #tab-shop {
  --store-panel: #fff;
  --store-panel-2: #f4f5f7;
  --store-line: rgba(20,24,30,.14);
  color: var(--text);
}
html[data-theme="light"] #tab-shop .shop-hero {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] #tab-shop .shop-hero-title { max-width: none; color: var(--text) !important; }
html[data-theme="light"] #tab-shop .shop-wallet-chip { background: var(--bg-card-2); }
html[data-theme="light"] #tab-shop .shop-jumpbar button:not(.is-active),
html[data-theme="light"] #tab-shop .spin-pack:not(.is-featured),
html[data-theme="light"] #tab-shop .elite-btn:not(.elite-btn-pack),
html[data-theme="light"] #tab-shop .exchange-row,
html[data-theme="light"] #tab-shop .shop-theme-tabs,
html[data-theme="light"] #tab-shop .elite-pity-block {
  background: var(--bg-card); color: var(--text); border-color: var(--border);
}
html[data-theme="light"] #tab-shop .spin-pack:not(.is-featured) b,
html[data-theme="light"] #tab-shop .shop-inline-status,
html[data-theme="light"] #tab-shop .elite-details summary { color: var(--text-sub); }
html[data-theme="light"] #tab-shop .shop-pack-amt,
html[data-theme="light"] #tab-shop .elite-cost-chip { color: var(--accent-hi); }
html[data-theme="light"] .cooldown-sheet-card { background: var(--bg-card); color: var(--text); border-color: var(--border); }
html[data-theme="light"] .cooldown-sheet-close { background: var(--bg-card-2); color: var(--text); border-color: var(--border); }
html[data-theme="light"] .cooldown-sheet p { color: var(--text-sub); }

/* Arena controls follow the selected theme; card art and battle scenery retain their contrast. */
html[data-theme="light"] body.arena-workbench-open { background: var(--bg-app); }
html[data-theme="light"] #tab-arena {
  --arena-ground: #e8eaed;
  --arena-panel: #fff;
  --arena-ink: #16181c;
  --arena-muted: #586370;
  --arena-line: rgba(20,24,30,.16);
  background: var(--arena-ground);
}
html[data-theme="light"] #tab-arena .workbench-heading::before {
  background: linear-gradient(90deg,#e8eaed 0%,#e8eaedf2 38%,#e8eaed55 100%),linear-gradient(0deg,#e8eaed,transparent 65%);
}
html[data-theme="light"] #tab-arena .workbench-deck:not(.selected),
html[data-theme="light"] #tab-arena .workbench-search,
html[data-theme="light"] #tab-arena .arena-card-filters button:not(.active),
html[data-theme="light"] #tab-arena .workbench-tools select,
html[data-theme="light"] #tab-arena .workbench-effects select,
html[data-theme="light"] #tab-arena .workbench-more,
html[data-theme="light"] #tab-arena .workbench-dock,
html[data-theme="light"] #tab-arena .workbench-menu summary,
html[data-theme="light"] #tab-arena .arena-settings-panel select,
html[data-theme="light"] #tab-arena .arena-settings-actions button,
html[data-theme="light"] #tab-arena .arena-battle-hud {
  background: var(--arena-panel); color: var(--arena-ink); border-color: var(--arena-line);
}
html[data-theme="light"] #tab-arena .arena-section-nav button:not([aria-current]),
html[data-theme="light"] #tab-arena .arena-settings-panel label,
html[data-theme="light"] #tab-arena .workbench-search input::placeholder { color: var(--arena-muted); }
html[data-theme="light"] #tab-arena .workbench-search svg { stroke: var(--arena-muted); }
html[data-theme="light"] #tab-arena .workbench-settings-toggle { background: var(--arena-panel); color: #8a5209; border-color: var(--border-hot); }
html[data-theme="light"] #tab-arena .workbench-settings-toggle svg { fill: none; }
html[data-theme="light"] #tab-arena .workbench-league .arena-prog-bar-wrap { background: #16181c20; }
html[data-theme="light"] #tab-arena .workbench-totals b,
html[data-theme="light"] #tab-arena #arena-picker-count,
html[data-theme="light"] #tab-arena #arena-remove-selected,
html[data-theme="light"] #tab-arena .workbench-tools button,
html[data-theme="light"] #tab-arena .workbench-empty button,
html[data-theme="light"] #tab-arena .stats-ring-val { color: #8a5209; }
html[data-theme="light"] #tab-arena .workbench-totals > span:last-child b { color: #b02f49; }
html[data-theme="light"] #tab-arena .workbench-slot { color: #f2f4f7; }
html[data-theme="light"] #tab-arena .workbench-slot.empty { background: var(--arena-panel); border-color: var(--arena-line); }