/* themes.css — terminal themes a badge unlocks (data/cosmetics/unlocks.json),
   picked on the trophies tab (js/trophies.js) and applied by js/terminal.js as
   <html data-elo-theme="…">. Cosmetic only: each theme recolours the accent
   and the panels, nothing else. Also the trophy shelf's own tiles. */
html[data-elo-theme="phosphor"] { --lime: #33ff99; --g-live: #33ff99; --store-panel: #0f1a13; }
html[data-elo-theme="vault"] { --lime: #c0a062; --g-live: #c0a062; --store-panel: #1a1712; }
html[data-elo-theme="arcade"] { --lime: #ff7ad9; --g-live: #ff7ad9; --store-panel: #1b1320; }
html[data-elo-theme="uptober"] { --lime: #2ee6a6; --g-live: #2ee6a6; --store-panel: #10201a; }
html[data-elo-theme="rektember"] { --lime: #ff5d5d; --g-live: #ff7a7a; --store-panel: #201212; }
html[data-elo-theme="santa"] { --lime: #e84a5f; --g-live: #6fd17a; --store-panel: #1c1314; }
html[data-elo-theme="collector"] { --lime: #7aa2ff; --g-live: #7aa2ff; --store-panel: #121624; }
html[data-elo-theme="gold"] { --lime: #ffd34d; --g-live: #ffd34d; --store-panel: #1e1a10; }

.tro-badges, .tro-unlocks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tro-badge { border: 1px solid var(--store-line, #2b332c); border-radius: var(--r, 3px); padding: 10px 12px;
  display: grid; gap: 4px; background: var(--store-panel, #161b17); }
.tro-badge b { font: 600 14px/1.2 var(--sg, system-ui); }
.tro-badge span { font-size: 13px; color: var(--store-muted, #a0aa95); }
.tro-badge small { font: 12px var(--mono, monospace); color: var(--store-dim, #8a9689); }
.tro-badge[data-state="on"] { border-color: var(--lime, #b8ff38); }
.tro-badge[data-state="on"] small { color: var(--lime, #b8ff38); }
.tro-badge[data-state="off"] b, .tro-badge[data-state="unknown"] b { color: var(--store-muted, #a0aa95); }
.tro-unlock { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--store-line, #2b332c); border-radius: var(--r, 3px); }
.tro-unlock[data-state="off"] { opacity: .7; }
.tro-unlock small { color: var(--store-dim, #8a9689); font-size: 12px; margin-left: auto; text-align: right; }
.tro-unlock .btn-quiet { margin-left: auto; }
.tro-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); flex: none; }

/* the packs pane's tier chips, the same colours as the reveal */
.pck-tier { font: 12px var(--mono, monospace); text-transform: uppercase; letter-spacing: .04em; }
.pck-tier[data-tier="common"] { color: var(--tier-common, #9aa7b4); }
.pck-tier[data-tier="uncommon"] { color: var(--tier-uncommon, #39d98a); }
.pck-tier[data-tier="rare"] { color: var(--tier-rare, #5ec8f2); }
.pck-tier[data-tier="epic"] { color: var(--tier-epic, #c9a6ff); }
.pck-tier[data-tier="legendary"] { color: var(--tier-legendary, #ffd34d); }
.pck-pack .pck-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pck-pack .pck-buy .btn { min-height: 44px; }
.pck-pack .pck-buy .btn small { margin-left: 6px; font-weight: 500; opacity: .75; }
.pck-usd { margin: 2px 0 10px; font: 700 22px/1.1 var(--sg, system-ui); }
.pck-odds caption { text-align: left; font-size: 13px; color: var(--store-muted, #a0aa95); padding-bottom: 6px; }