/* Hextech palette, same as the old theme.py */
:root {
  --bg: #0A1428;
  --panel: #0E1B2E;
  --panel2: #13233A;
  --hover: #1A2E4A;
  --track: #0A1626;
  --console: #050A12;
  --gold: #C8AA6E;
  --gold-h: #DCC089;
  --teal: #0AC8B9;
  --red: #E84057;
  --green: #2DD4A0;
  --amber: #F0B232;
  --text: #E8E3D5;
  --dim: #8A92A6;
  --ts: #4A5468;
  --line: #1C2C44;
  --radius: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input, select { font: inherit; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- layout */

.app { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; padding: 16px; height: 100vh; }

.sidebar {
  background: var(--panel); border-radius: var(--radius); padding: 26px 20px 18px;
  display: flex; flex-direction: column; gap: 10px; overflow: auto;
}
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.brand h1 { margin: 0; color: var(--gold); font-size: 22px; line-height: 1.05; letter-spacing: .5px; font-weight: 700; }
.brand p { margin: 4px 0 0; color: var(--dim); font-size: 12px; }

.status-pill {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin-bottom: 12px;
  background: var(--panel2); border-radius: 10px; font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.status-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status-pill.ingame .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.btn {
  height: 46px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  font-weight: 700; font-size: 15px; letter-spacing: .3px; display: flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.btn:disabled { opacity: .35; cursor: default; }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:not(:disabled):hover { background: var(--gold-h); }
.btn-red { background: transparent; border-color: var(--red); color: var(--red); }
.btn-red:not(:disabled):hover { background: #2A1018; }
.btn-ghost { height: 36px; background: var(--panel2); color: var(--dim); font-size: 13px; font-weight: 400; border: 0; }
.btn-ghost:hover { background: var(--hover); color: var(--text); }

.counters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.counter { background: var(--panel2); border-radius: 10px; text-align: center; padding: 10px 0; }
.counter b { display: block; font-size: 24px; line-height: 1.2; }
.counter span { color: var(--dim); font-size: 11px; }

.side-health {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel2);
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
}
.side-health:hover { background: var(--hover); }
.side-health .hd { grid-row: span 2; }
.side-health b { font-size: 13px; }
.side-health small { color: var(--dim); font-size: 11px; }

.spacer { flex: 1; }
.side-foot { color: var(--ts); font-size: 11px; text-align: center; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabs a, .picker a {
  padding: 7px 12px; border-radius: 8px; color: var(--dim); font-weight: 700; font-size: 13px; letter-spacing: .3px;
  transition: background .15s;
}
.tabs a:hover, .picker a:hover { background: var(--panel2); }
.tabs a.on, .picker a.on { background: var(--gold); color: var(--bg); }
.tabs a.on:hover, .picker a.on:hover { background: var(--gold-h); }

.page { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; scrollbar-color: var(--panel2) transparent; }
.page::-webkit-scrollbar, .console::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.page::-webkit-scrollbar-thumb, .console::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: var(--panel2); border-radius: 5px; }

.banner {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #2A1018; border: 1px solid var(--red); color: var(--text);
  padding: 10px 16px; border-radius: 12px; margin-bottom: 10px;
}
.banner b { color: var(--red); }
.banner.warn { background: #2A2210; border-color: var(--amber); }
.banner.warn b { color: var(--amber); }

/* ---------------------------------------------------------------- panels */

.panel { background: var(--panel); border-radius: var(--radius); padding: 14px 18px 16px; margin-bottom: 12px; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2 { margin: 0; color: var(--gold); font-size: 16px; letter-spacing: .5px; }
.panel-head h3 { margin: 0; color: var(--dim); font-size: 13px; letter-spacing: .5px; }
.panel-head .sub { color: var(--dim); font-size: 12px; }
.panel-head .grow { flex: 1; }
.btn-small {
  height: 28px; padding: 0 12px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--panel2); color: var(--dim); font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
}
.btn-small:hover { background: var(--hover); color: var(--text); }
.btn-small.gold { background: var(--gold); color: var(--bg); font-weight: 700; }
.btn-small.gold:hover { background: var(--gold-h); }
.btn-small.danger:hover { background: #2A1018; color: var(--red); }
.btn-small:disabled { opacity: .4; cursor: default; }

.card { background: var(--panel2); border-radius: 12px; padding: 12px 16px 14px; margin-bottom: 10px; min-width: 0; }
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.card-head h4 { margin: 0; color: var(--gold); font-size: 12px; letter-spacing: .5px; }
.card-head span { color: var(--dim); font-size: 11px; }
.empty { color: var(--dim); }

.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cols2 > div { min-width: 0; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tile { background: var(--panel2); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.tile .tl { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.tile .tv { font-size: 24px; font-weight: 700; line-height: 1.35; }
.tile .ts { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kv { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 3px 14px; align-items: baseline; }
.kv .k { color: var(--dim); font-size: 12px; }
.kv .v { font-weight: 700; font-size: 13px; }
.kv .d { color: var(--dim); font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .d.path { grid-column: 2 / -1; text-align: left; font-family: Consolas, monospace; font-size: 11.5px; white-space: normal; word-break: break-all; }
.kv .d.path .copy { font-family: "Segoe UI", sans-serif; }

.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 40px; }
.bar > i { display: block; height: 100%; border-radius: 3px; }
.bar.big { height: 10px; border-radius: 5px; }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th { color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .3px; text-align: right; padding: 0 0 4px 8px; white-space: nowrap; }
table.grid td { text-align: right; padding: 3px 0 3px 8px; font-size: 13px; white-space: nowrap; }
table.grid th:first-child, table.grid td:first-child { text-align: left; padding-left: 0; }
table.grid td.l, table.grid th.l { text-align: left; }
table.grid td.dim { color: var(--dim); font-size: 12px; }
table.grid td.barcell { width: 40%; min-width: 60px; }
table.grid td.best { color: var(--gold); font-weight: 700; }
table.grid td.name { font-weight: 700; }

/* ------------------------------------------------------------ tank page */

.tank-page { display: flex; flex-direction: column; min-height: 100%; }
.tank-panel { flex: 1; display: flex; flex-direction: column; }
.tank-rows { flex: 1; display: grid; grid-auto-rows: minmax(76px, 1fr); gap: 8px; }
.tank-row {
  background: var(--panel2); border-radius: 12px; padding: 10px 18px;
  display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px 20px; align-items: center;
}
.tank-row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tank-row .who b { font-size: 16px; display: block; }
.tank-row .who span { color: var(--dim); font-size: 12px; }
.tank-row .metric .h { font-weight: 700; font-size: 12px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent { display: flex; gap: 4px; justify-content: flex-end; }
.recent .ci { width: 26px; height: 26px; font-size: 9px; }
.recent .ci.tank { box-shadow: 0 0 0 2px var(--amber); }
.recent .ci.loss { opacity: .55; }
.console-panel { height: 250px; display: flex; flex-direction: column; flex: none; }
.console-panel.tall { height: 420px; }
.console {
  flex: 1; min-height: 0; overflow: auto; background: var(--console); border-radius: 12px; padding: 8px 12px;
  font: 13px/1.5 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; word-break: break-word;
}
.console .ts { color: var(--ts); }
.log-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 700; cursor: pointer; color: var(--dim);
}
.chip.on { background: var(--panel2); color: var(--text); border-color: var(--hover); }

/* ----------------------------------------------------------- stats page */

.picker { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin-bottom: 10px; }
.picker a { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.hero { display: flex; align-items: baseline; gap: 14px; margin: 2px 0 10px; flex-wrap: wrap; }
.hero b { font-size: 22px; }
.hero span { color: var(--dim); }

.duo { display: grid; gap: 4px; align-items: stretch; }
.duo .dh { color: var(--dim); font-size: 11px; font-weight: 700; text-align: center; align-self: end; padding-bottom: 2px; }
.duo .rh { font-weight: 700; font-size: 12px; align-self: center; padding-right: 10px; white-space: nowrap; }
.duo .cell {
  border-radius: 6px; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; line-height: 1.25; text-align: center;
}
.duo .cell small { font-weight: 400; font-size: 11px; color: inherit; opacity: .85; }

.form-dots { display: flex; gap: 3px; flex-wrap: wrap; margin: 2px 0 10px; }
.form-dots i { width: 12px; height: 12px; border-radius: 3px; display: block; }

/* ---------------------------------------------------------- champ icons */

.ci {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--hover);
  color: var(--dim); font-size: 9px; font-weight: 700; text-transform: uppercase; vertical-align: middle;
}
.ci img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.ci.lg { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; }
.ci.dead img { filter: grayscale(1) brightness(.6); }
.champ { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.champ > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.item {
  width: 22px; height: 22px; border-radius: 4px; background: var(--hover); display: inline-flex; overflow: hidden;
  align-items: center; justify-content: center; font-size: 8px; color: var(--dim); position: relative; vertical-align: middle;
}
.item img { position: absolute; inset: 0; width: 100%; height: 100%; }
.items { display: inline-flex; gap: 2px; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.badge.win { background: rgba(45, 212, 160, .14); color: var(--green); }
.badge.loss { background: rgba(232, 64, 87, .14); color: var(--red); }
.badge.unk { background: var(--hover); color: var(--dim); }
.badge.tank { background: rgba(240, 178, 50, .14); color: var(--amber); }
.badge.gold { background: rgba(200, 170, 110, .16); color: var(--gold); }

/* --------------------------------------------------------- matches page */

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.field, .filters select, .filters input {
  height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); outline: none;
}
.field:focus, .filters select:focus, .filters input:focus { border-color: var(--gold); }
.table-wrap { overflow: auto; }
table.matches { width: 100%; border-collapse: collapse; }
table.matches th { text-align: left; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 0 10px 6px 0; position: sticky; top: 0; background: var(--panel); }
table.matches td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.matches tbody tr { cursor: pointer; }
table.matches tbody tr:hover td { background: var(--panel2); }
table.matches td.date b { display: block; }
table.matches td.date span, table.matches td.dim { color: var(--dim); font-size: 12px; }
.squad { display: flex; gap: 6px; flex-wrap: wrap; white-space: normal; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border-radius: 8px; padding: 3px 8px 3px 3px;
  border-left: 3px solid var(--dim); font-size: 12px;
}
.pchip.win { border-left-color: var(--green); }
.pchip.loss { border-left-color: var(--red); }
.pchip .kda { color: var(--dim); }
.pchip .tk { color: var(--amber); font-weight: 700; font-size: 10px; }
.pchip .pk { color: var(--gold); font-weight: 700; font-size: 10px; }

/* modal scoreboard */
.modal { position: fixed; inset: 0; background: rgba(3, 8, 16, .72); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; z-index: 20; }
.modal-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; width: min(1100px, 100%); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--panel2); color: var(--dim); font-size: 20px; cursor: pointer; }
.modal-close:hover { background: var(--hover); color: var(--text); }
.md-head h3 { margin: 0; color: var(--gold); font-size: 18px; }
.md-head p { margin: 2px 0 12px; color: var(--dim); }
.team { margin-bottom: 12px; }
.team-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.team-head b { font-size: 13px; letter-spacing: .5px; }
.team table { width: 100%; border-collapse: collapse; }
.team td { padding: 4px 10px 4px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.team td.n { width: 30%; }
.team tr.tracked td { background: rgba(200, 170, 110, .06); }
.team tr.tracked .pname { color: var(--gold); font-weight: 700; }
.team .tag { color: var(--ts); }
.team td.num { text-align: right; color: var(--dim); }
.team td.kdat { font-weight: 700; }
.highlights { display: flex; gap: 6px; flex-wrap: wrap; }
.highlights span { background: var(--panel2); border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.highlights span i { color: var(--dim); font-style: normal; margin-right: 6px; }

/* ---------------------------------------------------------- status page */

.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; margin-bottom: 2px; }
.st-grid .card { margin: 0; }
.health-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: var(--panel2); margin-bottom: 10px; }
.health-banner b { font-size: 16px; }
.health-banner span { color: var(--dim); }
.hd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.hd.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hd.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.hd.error { background: var(--red); box-shadow: 0 0 8px var(--red); }
.health-banner .hd { width: 14px; height: 14px; }
.checks { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.checks b { font-size: 13px; white-space: nowrap; }
.checks span { color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.import { display: flex; gap: 6px; }
.import .field { flex: 1; min-width: 0; }
.hint { color: var(--dim); font-size: 12px; margin-top: 6px; }
.hint.err { color: var(--red); }
.hint.ok { color: var(--green); }
.live-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.live-teams .lp { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 12px; min-width: 0; }
.live-teams .lp .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-teams .lp.tracked .nm { color: var(--gold); font-weight: 700; }
.live-teams .lp .sc { color: var(--dim); font-variant-numeric: tabular-nums; }
.live-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.live-head b { font-size: 20px; font-variant-numeric: tabular-nums; }
.copy { border: 0; background: none; color: var(--ts); cursor: pointer; padding: 0 0 0 6px; font-size: 11px; }
.copy:hover { color: var(--gold); }

/* -------------------------------------------------------- settings page */

.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; align-items: start; }
.settings .card { margin: 0; }
.settings .wide { grid-column: 1 / -1; }
.roster-row { display: grid; grid-template-columns: 24px 50px minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.roster-row .num { color: var(--ts); font-weight: 700; text-align: center; }
.roster-head { display: grid; grid-template-columns: 24px 50px minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 6px; color: var(--dim); font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.av-cell { position: relative; display: inline-flex; }
.av-up { cursor: pointer; display: inline-flex; border-radius: 50%; transition: box-shadow .15s; }
.av-up:hover { box-shadow: 0 0 0 2px var(--gold); }
.av-up:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.av-reset {
  position: absolute; top: -4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0;
  background: var(--red); color: #fff; font-size: 9px; line-height: 16px; cursor: pointer; display: none;
}
.av-cell:hover .av-reset { display: block; }
.icon-btn { width: 32px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); cursor: pointer; font-size: 15px; }
.icon-btn:hover { background: #2A1018; color: var(--red); }
.form-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
.form-row label { color: var(--dim); font-size: 12px; }
.form-row .field { width: 100%; }
.form-row .note { grid-column: 2; color: var(--ts); font-size: 11.5px; margin-top: -6px; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.save-bar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 0 2px; background: var(--panel); }

.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 30; max-width: 420px;
  background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }

.loading { color: var(--dim); padding: 30px; text-align: center; }

/* --------------------------------------------------------------- avatars */

.av { display: inline-flex; flex: none; border-radius: 50%; overflow: hidden; background: var(--panel2); vertical-align: middle; box-shadow: 0 0 0 1.5px rgba(200, 170, 110, .35); }
.av img, .av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-inline { display: inline-flex; align-items: center; gap: 8px; }
.picker a .av { margin-right: 6px; vertical-align: -4px; box-shadow: none; }
.hero { align-items: center; }
.hero .av { box-shadow: 0 0 0 2px var(--gold); }
.ci.md { width: 28px; height: 28px; border-radius: 7px; font-size: 10px; }
.ci.xl { width: 48px; height: 48px; border-radius: 10px; font-size: 13px; }
.item.xl { width: 40px; height: 40px; border-radius: 8px; font-size: 10px; }

/* ---------------------------------------------------------- rankings page */

.section-title { color: var(--gold); font-size: 13px; letter-spacing: 1px; margin: 18px 0 8px; }
.callout { background: var(--panel2); border-left: 3px solid var(--amber); border-radius: 8px; padding: 10px 14px; color: var(--text); margin-bottom: 8px; }
.callout.small { border-left-color: var(--ts); color: var(--dim); font-size: 12px; margin-top: 14px; }
.callout.subtle { border-left-color: var(--teal); color: var(--dim); font-size: 12px; }
.callout a { color: var(--gold); }
.callout b { color: var(--text); }

.help-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent;
  color: var(--gold); font-weight: 800; font-size: 15px; cursor: pointer; line-height: 1;
}
.help-btn:hover { background: var(--gold); color: var(--bg); }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: default;
  white-space: nowrap; border: 1px solid transparent;
}
.tag.good { background: rgba(45, 212, 160, .13); color: var(--green); border-color: rgba(45, 212, 160, .3); }
.tag.bad { background: rgba(232, 64, 87, .13); color: #FF7286; border-color: rgba(232, 64, 87, .3); }
.tag.fun { background: rgba(200, 170, 110, .12); color: var(--gold); border-color: rgba(200, 170, 110, .3); }

.help { max-width: 860px; }
.help h3 { margin: 0 0 6px; color: var(--gold); font-size: 20px; }
.help h4 { margin: 18px 0 6px; color: var(--gold); font-size: 13px; letter-spacing: .5px; }
.help h5 { margin: 10px 0 6px; color: var(--dim); font-size: 11px; letter-spacing: .5px; }
.help p, .help li { color: var(--text); line-height: 1.55; margin: 4px 0; }
.help ul { margin: 4px 0; padding-left: 20px; }
.help .lead { font-size: 14px; color: var(--dim); }
.help-table { margin: 8px 0; }
.help-table td { white-space: normal; }
.help-tags > div { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; padding: 2px 0; font-size: 12px; }
.help-tags .tag { justify-self: start; }

.emblem { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.emblem b { font-size: 28px; color: var(--tc); text-shadow: 0 0 18px var(--tc); }
/* the CDragon emblem PNGs are 16:9 with the crest in the middle ~25%: blow
   the image up and pin its centre (50%, 48%) on the box centre */
.emblem img {
  position: absolute; left: 50%; top: 50%; width: 520%; max-width: none; height: auto;
  transform: translate(-50%, -48%); pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
}
.emblem.none { border-radius: 50%; background: var(--panel); color: var(--ts); font-weight: 700; }
.crest { position: relative; display: inline-flex; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--tc) 0 35%, transparent 36%); }
.crest img { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest.none { background: var(--panel); }

.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.lad-card {
  position: relative; display: flex; gap: 14px; align-items: center; padding: 14px 16px 14px 12px; border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--tc) 16%, var(--panel2)), var(--panel2) 55%);
  border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); overflow: hidden;
}
.lad-pos { position: absolute; top: 8px; right: 12px; font-size: 22px; font-weight: 800; color: color-mix(in srgb, var(--tc) 70%, var(--text)); opacity: .55; }
.lad-main { min-width: 0; flex: 1; }
.lad-name { display: flex; align-items: center; gap: 8px; }
.lad-name b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lad-tier { color: var(--tc); font-weight: 800; font-size: 15px; margin: 4px 0 1px; letter-spacing: .3px; }
.lad-sub { color: var(--dim); font-size: 12px; }
.lad-fav { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.lad-fav .lbl, .steal-sum .lbl { color: var(--ts); font-size: 9px; font-weight: 800; letter-spacing: .5px; margin: 0 2px 0 4px; }
.lad-fav .lbl:first-child { margin-left: 0; }
.trend { font-size: 11px; font-weight: 700; margin-left: 4px; color: var(--dim); }
.trend.up { color: var(--green); }
.trend.down { color: var(--red); }

.pos { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 11px; font-weight: 800; background: var(--panel); color: var(--dim); }

.dps-card { margin-top: 12px; border: 1px solid rgba(232, 64, 87, .35); background: linear-gradient(160deg, #2A1220, var(--panel2) 60%); }
.dps-card .card-head h4 { color: var(--red); font-size: 18px; letter-spacing: 1px; }
.dps-row { display: grid; grid-template-columns: 22px 36px minmax(140px, 1.2fr) minmax(80px, 3fr) 110px 120px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.dps-row:first-of-type { border-top: 0; }
.dps-name { min-width: 0; }
.dps-name b { display: block; font-size: 14px; }
.dps-name small { color: var(--dim); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dps-bar { height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.dps-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #F0B232, #E84057); }
.dps-val { font-size: 20px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dps-val small { font-size: 11px; color: var(--dim); font-weight: 400; }
.dps-tier { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cat-card { margin: 0; }
.cat-desc { color: var(--dim); font-size: 11px; margin: -4px 0 8px; }
.cat-row { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) auto 18px; gap: 8px; align-items: center; padding: 3px 0; }
.cat-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cat-row b { font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.empty.small { font-size: 12px; }

.thieves { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; align-items: start; }
.wanted {
  background: #E9D8B4; color: #3B2A17; border-radius: 6px; padding: 16px 14px 18px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 40px rgba(120, 80, 30, .35); transform: rotate(-1.5deg);
  font-family: Georgia, "Times New Roman", serif;
}
.wanted-title { font-size: 34px; font-weight: 900; letter-spacing: 4px; line-height: 1; }
.wanted-pic { position: relative; display: inline-block; margin: 12px 0 8px; }
.wanted-pic .av { border-radius: 4px; box-shadow: 0 0 0 3px #3B2A17; filter: sepia(.35) contrast(1.1); }
.wanted-pic .mask { position: absolute; left: 6%; right: 6%; top: 30%; height: 18%; background: #111; border-radius: 40% 40% 50% 50%; opacity: .92; }
.wanted-pic .mask::before, .wanted-pic .mask::after { content: ""; position: absolute; top: 30%; width: 18%; height: 40%; background: #E9D8B4; border-radius: 50%; }
.wanted-pic .mask::before { left: 22%; }
.wanted-pic .mask::after { right: 22%; }
.wanted-name { font-size: 20px; font-weight: 900; }
.wanted-crime { font-size: 14px; font-weight: 700; color: #8B1E1E; margin-top: 2px; }
.wanted-sub { font-size: 11px; margin-top: 6px; opacity: .8; }
.steals-card { margin: 0; }
.steal-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.steal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.steal:first-child { border-top: 0; }
.steal > span { display: inline-flex; align-items: center; gap: 6px; }
.steal .arrow { color: var(--red); font-weight: 800; }
.steal .thief b { color: var(--red); }
.steal-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.fav-label { color: var(--ts); font-size: 10px; font-weight: 800; letter-spacing: .5px; margin: 4px 0 6px; }
.favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fav { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 8px 4px; border-radius: 10px; background: var(--panel); min-width: 0; }
.fav b { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav small { color: var(--dim); font-size: 11px; }

.team td.dmg { min-width: 110px; }
.team td.dmg span { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.team td.dmg .bar { margin-top: 3px; }

/* ----------------------------------------------------------------- cards */
/* everything inside a card is sized in em: font-size scales the whole card */

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.tcard {
  --rc: #9AA4B5;
  position: relative; width: 25em; height: 37.5em; font-size: 10px; flex: none;
  border-radius: 1.4em; overflow: hidden; background: #0A1428; color: #fff; user-select: none;
  border: .45em solid var(--rc);
  box-shadow: 0 .8em 2.4em rgba(0, 0, 0, .55), inset 0 0 0 .15em rgba(255, 255, 255, .12);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .15s ease-out;
}
.tcard.big { font-size: 13px; }
.tcard.mini { font-size: 6.4px; }
.tcard.mini .tc-lines, .tcard.mini .tc-stats { display: none; }
.tcard.mini .tc-panel { padding-top: 4em; }
.tcard .av { width: 1.8em !important; height: 1.8em !important; }

.tc-art { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 35%, #13233A), #0A1428); }
.tc-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.tc-noart { display: none; }
.tc-art.noart img { display: none; }
.tc-art.noart .tc-noart {
  display: flex; position: absolute; inset: 0 0 45% 0; align-items: center; justify-content: center; text-align: center;
  font-size: 2.6em; font-weight: 900; color: rgba(255, 255, 255, .28); padding: 0 .5em;
}
.tc-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

.tc-top { position: absolute; top: .8em; left: .8em; right: .8em; display: flex; justify-content: space-between; align-items: flex-start; }
.tc-ovr {
  display: flex; flex-direction: column; align-items: center; line-height: 1; padding: .35em .7em .4em;
  background: rgba(5, 10, 18, .8); border: .15em solid var(--rc); border-radius: .8em;
}
.tc-ovr b { font-size: 2.6em; font-weight: 900; color: var(--rc); }
.tc-ovr small { font-size: .85em; font-weight: 800; letter-spacing: .12em; color: #cfd6e2; margin-top: .2em; }
.tc-badges { display: flex; flex-direction: column; gap: .3em; align-items: flex-end; }
.tc-badge { font-size: .95em; font-weight: 900; letter-spacing: .08em; padding: .25em .6em; border-radius: .5em; background: rgba(5, 10, 18, .82); border: .1em solid; }
.b-penta { color: #FF5FA2; } .b-mvp { color: #F6CF6B; } .b-thief { color: #FF7286; } .b-tank { color: #F0B232; }

.tc-panel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3.4em 1.1em .9em;
  background: linear-gradient(180deg, transparent, rgba(5, 10, 18, .86) 20%, rgba(5, 10, 18, .97));
}
.tc-title { font-size: 1.75em; font-weight: 900; line-height: 1.1; text-shadow: 0 .1em .4em rgba(0, 0, 0, .8); }
.tc-who { display: flex; align-items: center; gap: .5em; margin-top: .45em; font-size: 1.1em; color: #cfd6e2; }
.tc-who .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-res { font-weight: 900; font-size: .9em; padding: .1em .45em; border-radius: .4em; }
.tc-res.win { background: rgba(45, 212, 160, .2); color: #2DD4A0; }
.tc-res.loss { background: rgba(232, 64, 87, .2); color: #FF7286; }
.tc-stats { display: flex; gap: .4em; margin-top: .55em; flex-wrap: wrap; }
.tc-stats span { font-size: 1.05em; font-weight: 800; background: rgba(255, 255, 255, .08); border-radius: .4em; padding: .15em .5em; font-variant-numeric: tabular-nums; }
.tc-lines { list-style: none; margin: .6em 0 0; padding: 0; }
.tc-lines li { position: relative; font-size: 1.12em; line-height: 1.3; color: #E8E3D5; padding-left: .9em; margin-top: .25em; font-style: italic; }
.tc-lines li::before { content: "›"; position: absolute; left: 0; color: var(--rc); font-style: normal; font-weight: 900; }
.tc-foot { display: flex; justify-content: space-between; margin-top: .7em; font-size: .9em; color: #8A92A6; letter-spacing: .05em; }
.tc-rarity { color: var(--rc); font-weight: 900; letter-spacing: .14em; }
.tc-count {
  position: absolute; right: .8em; top: 46%; background: rgba(5, 10, 18, .85); border: .12em solid var(--gold);
  color: var(--gold); font-weight: 900; font-size: 1.3em; padding: .1em .5em; border-radius: .5em;
}
.tc-new {
  position: absolute; top: 5.3em; left: .8em; background: #E84057; color: #fff; font-weight: 900; font-size: 1em;
  padding: .2em .55em; border-radius: .4em; letter-spacing: .1em; box-shadow: 0 0 1em #E84057; animation: pulse 1.2s infinite;
}

/* holo: epic and up */
.r-epic .tc-shine, .r-legendary .tc-shine {
  opacity: 1; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .32), transparent 45%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .2) 48%, transparent 60%);
  background-size: 100% 100%, 250% 250%;
  animation: sheen 5s linear infinite;
}
@keyframes sheen { from { background-position: 0 0, 150% 0; } to { background-position: 0 0, -150% 0; } }
.r-legendary { box-shadow: 0 0 2.2em rgba(246, 207, 107, .5), 0 .8em 2.4em rgba(0, 0, 0, .55); }
.r-mythic {
  border-color: transparent;
  background: linear-gradient(#0A1428, #0A1428) padding-box,
    linear-gradient(var(--ang), #FF5FA2, #F6CF6B, #2DD4A0, #3FA7F0, #B45CF0, #FF5FA2) border-box;
  animation: spin-ang 4s linear infinite;
  box-shadow: 0 0 2.6em rgba(255, 95, 162, .55), 0 .8em 2.4em rgba(0, 0, 0, .55);
}
@keyframes spin-ang { to { --ang: 360deg; } }
.r-mythic .tc-shine {
  opacity: .85; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, rgba(255, 95, 162, .3), rgba(246, 207, 107, .22), rgba(45, 212, 160, .28), rgba(63, 167, 240, .28), rgba(180, 92, 240, .3), rgba(255, 95, 162, .3));
  background-size: 300% 300%; background-position: var(--mx, 0%) var(--my, 0%);
  animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 300% 300%; } }
.r-mythic .tc-ovr b, .r-mythic .tc-rarity {
  background: linear-gradient(90deg, #FF5FA2, #F6CF6B, #2DD4A0, #3FA7F0, #B45CF0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* cursed: drained art, cracks, flicker */
.r-cursed .tc-art img { filter: grayscale(.85) contrast(1.35) brightness(.7) sepia(.4) hue-rotate(-30deg); }
.r-cursed .tc-shine {
  opacity: 1;
  background:
    repeating-linear-gradient(63deg, transparent 0 2.2em, rgba(0, 0, 0, .55) 2.2em 2.32em),
    repeating-linear-gradient(-28deg, transparent 0 3.1em, rgba(179, 38, 74, .35) 3.1em 3.2em),
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(80, 0, 20, .7));
  animation: cursed-flicker 3.2s infinite steps(1);
}
@keyframes cursed-flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .35; } 93% { opacity: 1; } 96% { opacity: .55; } }
.r-cursed .tc-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #FF9FB2; }

/* card back */
.tcard-back {
  position: absolute; inset: 0; border-radius: 1.4em; border: .45em solid #C8AA6E;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; color: #C8AA6E;
  background:
    radial-gradient(circle at 50% 42%, rgba(26, 46, 74, .9), rgba(10, 20, 40, .2) 70%),
    repeating-linear-gradient(60deg, rgba(200, 170, 110, .06) 0 1px, transparent 1px 1.6em),
    repeating-linear-gradient(-60deg, rgba(200, 170, 110, .06) 0 1px, transparent 1px 1.6em),
    #0A1428;
  box-shadow: inset 0 0 0 .5em #0A1428, inset 0 0 0 .65em rgba(200, 170, 110, .5);
}
.tcard-back img { width: 9em; filter: drop-shadow(0 0 1.2em rgba(200, 170, 110, .55)); }
.tcard-back b { font-size: 1.5em; letter-spacing: .15em; text-align: center; }
.tcard-back small { font-size: .9em; letter-spacing: .2em; color: #8A92A6; }

/* MAIN: gold corner ribbon and a gold inner frame */
.tcard.is-main { box-shadow: 0 .8em 2.4em rgba(0, 0, 0, .55), inset 0 0 0 .35em rgba(246, 207, 107, .55); }
.tc-main {
  position: absolute; top: 2.1em; right: -3.2em; width: 12em; transform: rotate(40deg); z-index: 2; cursor: help;
  text-align: center; font-size: 1.05em; font-weight: 900; letter-spacing: .25em; padding: .25em 0;
  color: #0A1428; background: linear-gradient(90deg, #C8AA6E, #FFF3C4, #C8AA6E); box-shadow: 0 .2em .8em rgba(0, 0, 0, .5);
}
.tcard.is-main .tc-badges { margin-top: 3.2em; }

/* special cards: duo split art, night collage */
.tc-art.multi { display: grid; background: #0A1428; }
.tc-art.multi img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; min-width: 0; min-height: 0; }
.tc-art.multi img.broken { visibility: hidden; }
.tc-art.multi.n1 { grid-template-columns: 1fr; }
.tc-art.multi.n2 { grid-template-columns: 1fr 1fr; }
.tc-art.multi.n2 img:first-child { clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); width: 118%; }
.tc-art.multi.n2 img:last-child { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); width: 118%; margin-left: -18%; }
.tc-art.multi.n3, .tc-art.multi.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tc-art.multi.n3 img:first-child { grid-row: span 2; }
.tcard.special .tc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tcard.k-night .tc-art::after { background: linear-gradient(180deg, rgba(14, 10, 60, .55), rgba(10, 20, 40, .1) 45%); }
.tcard.k-cursed_night .tc-art::after, .tcard.k-double_disaster .tc-art::after, .tcard.k-cursed_duo .tc-art::after {
  background: linear-gradient(180deg, rgba(90, 0, 20, .55), rgba(10, 0, 4, .2) 50%);
}
.tcard.k-cursed_night .tc-art img, .tcard.k-double_disaster .tc-art img, .tcard.k-cursed_duo .tc-art img { filter: grayscale(.7) contrast(1.2) brightness(.7); }
.tc-ovr.wide { min-width: 5.2em; }
.tc-ovr.wide b { font-size: 2em; white-space: nowrap; }
.tc-kind {
  font-size: .95em; font-weight: 900; letter-spacing: .14em; padding: .35em .7em; border-radius: .5em; max-width: 13em; text-align: center;
  background: rgba(5, 10, 18, .85); color: var(--rc); border: .12em solid var(--rc);
}
.tc-squad { display: flex; gap: .3em; margin-top: .45em; }
.tc-squad .av { width: 2.2em !important; height: 2.2em !important; box-shadow: 0 0 0 .12em var(--rc); }
.tc-stats.col { flex-direction: column; align-items: flex-start; }
.tcard.mini .tc-squad .av { width: 2.6em !important; height: 2.6em !important; }

/* cursed back: it knows you're looking */
.tcard-back.cursed {
  border-color: #6E0014; background: #050002; gap: 0; overflow: hidden; color: #FF2D4B;
  box-shadow: inset 0 0 0 .5em #050002, inset 0 0 0 .62em rgba(179, 38, 74, .6), inset 0 0 4em rgba(255, 0, 40, .35);
  animation: cursed-border 2.6s steps(1) infinite, creep 6s ease-in-out infinite;
}
.tcard-back.cursed svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tcard-back.cursed .cb-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.tcard-back.cursed .cb-iris { animation: look 7s ease-in-out infinite; }
.tcard-back.cursed .cb-drip { animation: drip 4s ease-in-out infinite alternate; transform-origin: top; }
.tcard-back.cursed .cb-cracks { animation: crack-glow 3s ease-in-out infinite; }
.tcard-back.cursed text { font-family: Georgia, "Times New Roman", serif; text-anchor: middle; font-weight: 900; }
.cb-warn { font-size: 15px; letter-spacing: 4px; fill: #E8D6A6; opacity: .75; }
.cb-name { font-size: 38px; letter-spacing: 6px; fill: #FF2D4B; animation: glitch 2.3s steps(1) infinite; }
@keyframes blink { 0%, 44%, 48%, 92%, 100% { transform: scaleY(1); } 46%, 95% { transform: scaleY(.06); } }
@keyframes look { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-22px, 2px); } 45% { transform: translate(18px, -4px); } 70% { transform: translate(4px, 6px); } }
@keyframes drip { from { transform: scaleY(1); } to { transform: scaleY(1.25); } }
@keyframes crack-glow { 50% { stroke: #B3123A; } }
@keyframes glitch {
  0%, 86%, 100% { transform: none; filter: none; }
  87% { transform: translate(-3px, 1px) skewX(-8deg); filter: drop-shadow(3px 0 #00E5FF); }
  90% { transform: translate(3px, -1px); filter: drop-shadow(-3px 0 #FF0040); }
  93% { transform: translate(-1px, 0) skewX(6deg); }
}
@keyframes cursed-border { 0%, 88%, 100% { border-color: #6E0014; } 90% { border-color: #FF2D4B; } 94% { border-color: #2A0006; } }
@keyframes creep { 0%, 100% { transform: none; } 50% { transform: translateX(.08em) rotate(.15deg); } }
.col-slot.missing .tcard-back.cursed { opacity: .75; filter: none; }

#tip {
  position: fixed; z-index: 50; max-width: 340px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: #050A12; border: 1px solid var(--hover); color: var(--text); font-size: 12px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
#tip.on { opacity: 1; transform: none; }
.tc-ovr, .tc-rarity { cursor: help; }

/* -------------------------------------------------------------- pack page */

.op-label { color: var(--ts); font-size: 10px; font-weight: 800; letter-spacing: .5px; margin: 4px 0 6px; }
.opener-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.op {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 6px; min-width: 78px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--dim); cursor: pointer; font-size: 12px; font-weight: 700;
}
.op:hover { background: var(--hover); color: var(--text); }
.op.on { border-color: var(--gold); color: var(--text); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(200, 170, 110, .25); }
.op-count { position: absolute; top: 4px; right: 6px; background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 6px; line-height: 16px; }

.pack-stage { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; }
.pack-wrap, .pack-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pack-empty p { color: var(--dim); }
.pack {
  position: relative; width: 230px; height: 330px; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: 10px 10px 14px 14px; color: #C8AA6E; font-family: inherit;
  background: linear-gradient(160deg, #1A2E4A, #0A1428 55%, #13233A);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 0 0 3px #C8AA6E, inset 0 0 40px rgba(200, 170, 110, .25);
  animation: float 3s ease-in-out infinite; transition: transform .2s;
}
.pack:hover { transform: translateY(-6px) rotate(-1.5deg) scale(1.03); }
@keyframes float { 50% { translate: 0 -8px; } }
.pack-crimp { position: absolute; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, #C8AA6E 0 6px, #8A7346 6px 12px); }
.pack-crimp.top { top: 0; }
.pack-crimp.bottom { bottom: 0; }
.pack-body { position: absolute; inset: 18px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pack-body img { width: 110px; filter: drop-shadow(0 0 18px rgba(200, 170, 110, .6)); }
.pack-body b { font-size: 24px; line-height: 1.05; letter-spacing: 1px; text-align: center; }
.pack-body small { font-size: 10px; letter-spacing: 2px; color: #8A92A6; }
.pack-body em { font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: 3px; background: #C8AA6E; color: #0A1428; padding: 3px 10px; border-radius: 4px; }
.pack-shine {
  position: absolute; inset: 0; pointer-events: none; background-size: 250% 100%; animation: sheen2 3s linear infinite;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%);
}
@keyframes sheen2 { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.pack.shake { animation: shake .12s linear infinite; }
@keyframes shake {
  25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 50% { transform: translate(3px, -1px) rotate(1.5deg); }
  75% { transform: translate(-2px, -1px) rotate(-1deg); }
}
.pack.torn { animation: torn .55s ease-in forwards; }
.pack.torn .pack-crimp.top { animation: rip .4s ease-in forwards; }
@keyframes torn { 40% { transform: scale(1.08); filter: brightness(1.6); } 100% { transform: scale(.4) rotate(12deg); opacity: 0; filter: brightness(3); } }
@keyframes rip { to { transform: translate(40px, -60px) rotate(25deg); opacity: 0; } }
.pack.ghost { opacity: .35; cursor: default; animation: none; }
.pack-count { font-size: 26px; font-weight: 900; color: var(--gold); }
.pack-count small { font-size: 13px; color: var(--dim); font-weight: 400; }
.open-many { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.open-many .btn-small { height: 32px; padding: 0 16px; font-weight: 700; }

/* special packs */
.pack-stage { position: relative; }
.pack.is-god { animation: god-glow .5s ease-in-out infinite alternate !important; box-shadow: 0 0 80px #F6CF6B, inset 0 0 0 3px #FFF3C4, inset 0 0 60px rgba(255, 230, 150, .7); }
.pack.is-cursed { animation: cursed-shake .09s linear infinite !important; filter: hue-rotate(-40deg) saturate(2.2) brightness(.55); box-shadow: 0 0 70px #B3264A, inset 0 0 0 3px #6E0014; }
@keyframes god-glow { from { filter: brightness(1.1); transform: scale(1.02); } to { filter: brightness(1.6); transform: scale(1.06); } }
@keyframes cursed-shake { 25% { transform: translate(-4px, 2px) rotate(-2deg); } 50% { transform: translate(4px, -2px) rotate(2deg); } 75% { transform: translate(-2px, -3px); } }
.pack-banner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  pointer-events: none; z-index: 5; text-align: center; animation: banner-in .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.pack-banner b { font-size: 64px; font-weight: 900; letter-spacing: 6px; line-height: 1; }
.pack-banner span { font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.pack-banner.god { background: radial-gradient(circle, rgba(246, 207, 107, .45), transparent 65%); }
.pack-banner.god b { color: #FFF3C4; text-shadow: 0 0 20px #F6CF6B, 0 0 60px #F6CF6B, 0 0 4px #fff; }
.pack-banner.god span { color: #F6CF6B; }
.pack-banner.cursed { background: radial-gradient(circle, rgba(120, 0, 20, .65), rgba(0, 0, 0, .6) 70%); }
.pack-banner.cursed b { color: #FF2D4B; font-family: Georgia, serif; text-shadow: 0 0 18px #B3264A, 3px 0 #00E5FF, -3px 0 #FF0040; animation: glitch-text .25s steps(2) infinite; }
.pack-banner.cursed span { color: #E8D6A6; }
@keyframes banner-in { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
@keyframes glitch-text { 50% { transform: translate(2px, -1px) skewX(-6deg); } }
.pull.pack-god { border-radius: 20px; background: radial-gradient(ellipse at center, rgba(246, 207, 107, .18), transparent 70%); }
.pull.pack-cursed { border-radius: 20px; background: radial-gradient(ellipse at center, rgba(179, 38, 74, .25), transparent 70%); }
.gold-txt { color: #F6CF6B; font-weight: 900; }
.cursed-txt { color: #FF2D4B; font-weight: 900; }
.special-txt { color: #0AC8B9; font-weight: 900; }

/* bulk opening */
.bulk-sum { text-align: center; margin-bottom: 10px; color: var(--dim); }
.bulk-sum > b { color: var(--text); font-size: 16px; }
.rchips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.rchip { border: 1px solid var(--rc); color: var(--rc); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.pull.bulk { font-size: 6.4px; gap: 22px 10px; }
.pull.bulk .tc-lines, .pull.bulk .tc-stats { display: none; }
.pull.bulk .tc-panel { padding-top: 4em; }
.bulk-special { margin: 6px 0 14px; padding: 10px; border-radius: 14px; }
.bulk-special.god { background: radial-gradient(ellipse at center, rgba(246, 207, 107, .22), rgba(246, 207, 107, .04)); border: 1px solid rgba(246, 207, 107, .5); }
.bulk-special.cursed { background: radial-gradient(ellipse at center, rgba(179, 38, 74, .3), rgba(0, 0, 0, .3)); border: 1px solid rgba(179, 38, 74, .6); }
.bulk-special-title { text-align: center; font-weight: 900; letter-spacing: 4px; font-size: 18px; margin-bottom: 6px; }
.bulk-special.god .bulk-special-title { color: #FFF3C4; text-shadow: 0 0 14px #F6CF6B; }
.bulk-special.cursed .bulk-special-title { color: #FF2D4B; font-family: Georgia, serif; text-shadow: 0 0 12px #B3264A; }


.pull { display: flex; gap: 1.4em; justify-content: center; flex-wrap: wrap; padding: 10px 0; font-size: clamp(6.6px, .72vw, 9.5px); }
.flip { position: relative; width: 25em; height: 37.5em; perspective: 1400px; cursor: pointer; animation: deal .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes deal { from { transform: translateY(-60px) scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .75s cubic-bezier(.3, .1, .2, 1); transform-style: preserve-3d; }
.flip:not(.flipped):hover .flip-inner { transform: translateY(-.8em) rotateZ(-1deg); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face.front { transform: rotateY(180deg); }
.flip-face .tcard { font-size: inherit; }
.flip.hint-epic:not(.flipped) { filter: drop-shadow(0 0 1em var(--rc)); }
.flip.hint-special:not(.flipped) { animation: deal .5s both, specialglow 1.6s ease-in-out .6s infinite; }
.flip.hint-special:not(.flipped)::after {
  content: "★ SPECIAL"; position: absolute; left: 50%; bottom: -2.2em; transform: translateX(-50%); white-space: nowrap;
  font-size: 1.3em; font-weight: 900; letter-spacing: .2em; color: #0AC8B9; text-shadow: 0 0 1em #0AC8B9;
}
@keyframes specialglow { 0%, 100% { filter: drop-shadow(0 0 .8em #0AC8B9); } 50% { filter: drop-shadow(0 0 2.2em #0AC8B9); } }
.flip.hint-legendary:not(.flipped), .flip.hint-mythic:not(.flipped) { animation: deal .5s both, hintglow 1.1s ease-in-out .6s infinite; }
.flip.hint-cursed:not(.flipped) { animation: deal .5s both, cursedhint 2.4s steps(1) .6s infinite; }
@keyframes hintglow { 0%, 100% { filter: drop-shadow(0 0 .8em var(--rc)); } 50% { filter: drop-shadow(0 0 2.6em var(--rc)); } }
@keyframes cursedhint { 0%, 85%, 100% { filter: drop-shadow(0 0 .6em #B3264A) brightness(.9); } 88% { filter: drop-shadow(0 0 1.6em #B3264A) brightness(.6); } }
.flip.burst::before {
  content: ""; position: absolute; inset: -35%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--rc), transparent 62%); animation: burst 1s ease-out forwards;
}
@keyframes burst { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(1.5); } }
.pull-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* ------------------------------------------------------------- collection */

.rar-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 10px 0; }
.rar-prog { background: var(--panel2); border-radius: 8px; padding: 6px 10px; border-left: 3px solid var(--rc); }
.rar-prog b { color: var(--rc); font-size: 11px; display: block; letter-spacing: .3px; }
.rar-prog span { font-size: 12px; color: var(--dim); }
.rar-prog .bar { margin-top: 4px; }
.col-filters { margin: 4px 0 14px; justify-content: flex-start; margin-left: 0; align-items: center; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 16px 12px; justify-items: center; }
.col-slot { cursor: pointer; }
.col-slot .tcard { transition: transform .15s; }
.col-slot:hover .tcard { transform: translateY(-4px) scale(1.04); }
.col-slot.missing { cursor: default; }
.col-slot.missing .tcard { border: 0; background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent); }
.col-slot.missing:hover .tcard { transform: none; }
.col-slot.missing .tcard-back { opacity: .3; filter: grayscale(.7); }
.miss-no { position: absolute; top: .9em; left: 1em; font-size: 1.7em; font-weight: 900; color: #8A92A6; }
.miss-r { position: absolute; bottom: 1.2em; left: 0; right: 0; text-align: center; color: var(--rc); font-weight: 900; letter-spacing: .15em; font-size: 1.4em; }
.card-view { display: flex; gap: 24px; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding: 10px; }
.card-side { display: flex; flex-direction: column; gap: 10px; max-width: 260px; padding-top: 10px; }
.rar-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tank-row { grid-template-columns: minmax(130px, 1fr) minmax(0, 1.5fr) minmax(0, 2fr); }
  .tank-row .recent { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; height: auto; padding: 10px; }
  .main { min-height: 80vh; }
  .page { overflow: visible; }
  .cols2 { grid-template-columns: 1fr; }
  .tank-row { grid-template-columns: 1fr; }
  .picker { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings, .st-grid { grid-template-columns: 1fr; }
  .live-teams { grid-template-columns: 1fr; }
  .thieves { grid-template-columns: 1fr; }
  .dps-row { grid-template-columns: 22px 36px minmax(0, 1fr) 90px; }
  .dps-row .dps-bar, .dps-row .dps-tier { display: none; }
}

/* ------------------------------------------------------- hosted site extras */

.me-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--panel2); transition: background .15s;
}
.me-card:hover { background: var(--hover); }
.me-card b { display: block; font-size: 15px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card small { display: block; color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-packs {
  display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(200, 170, 110, .22), rgba(200, 170, 110, .06)); border: 1px solid rgba(200, 170, 110, .45);
}
.side-packs:hover { border-color: var(--gold); }
.side-packs img { width: 28px; height: 28px; }
.side-packs b { color: var(--gold); font-size: 16px; }
.side-packs small { display: block; color: var(--dim); font-size: 11px; }
.banner a { color: var(--gold); text-decoration: underline; }

.op-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }

.profile-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-fields { flex: 1; min-width: 220px; }
.profile-fields .form-row { grid-template-columns: 110px minmax(0, 1fr); margin-bottom: 6px; }
.profile-fields .note a { color: var(--gold); }
.note { color: var(--ts); font-size: 11.5px; margin-top: 6px; }
.rid-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.rid-tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--dim); text-align: center; padding: 3px 0; border-radius: 5px; background: var(--hover); }
.rid-tag.main { color: var(--bg); background: var(--gold); }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
table.grid td.r, table.grid th.r { text-align: right; }
table.grid td.nowrap, .nowrap { white-space: nowrap; }
table.grid td.wrap { white-space: normal; word-break: break-all; min-width: 160px; }
table.grid tr.off td { opacity: .5; }
table.grid td .btn-small { margin-left: 4px; }
.up { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.up-new, .up-updated { color: var(--green); }
.up-duplicate { color: var(--dim); }
.up-ignored { color: var(--amber); }
.up-rejected { color: var(--red); }
.secret { display: flex; gap: 10px; align-items: center; margin: 14px 0 10px; padding: 12px 14px; background: var(--console); border: 1px solid var(--line); border-radius: 10px; }
.secret code { flex: 1; font: 16px Consolas, "Cascadia Mono", monospace; color: var(--gold); word-break: break-all; user-select: all; }

/* login page */
.login-body { overflow: auto; display: grid; place-items: center; min-height: 100%; padding: 16px; }
.login {
  width: min(380px, 100%); background: var(--panel); border-radius: var(--radius); padding: 28px 24px 20px;
  text-align: center; border: 1px solid var(--line); box-shadow: 0 0 60px rgba(200, 170, 110, .08);
}
.login h1 { margin: 10px 0 4px; color: var(--gold); font-size: 22px; letter-spacing: .5px; }
.login .dim { color: var(--dim); margin: 0 0 18px; }
.login form { display: grid; gap: 6px; text-align: left; }
.login label { color: var(--dim); font-size: 12px; margin-top: 6px; }
.login .field { width: 100%; height: 38px; font-size: 14px; }
.login .btn { margin-top: 14px; width: 100%; }
.login-foot { color: var(--ts); font-size: 11.5px; margin: 16px 0 0; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; height: auto; padding: 10px; gap: 10px; }
  .sidebar { padding: 14px; }
  .sidebar .spacer { display: none; }
  .page { overflow: visible; }
  .settings { grid-template-columns: 1fr; }
}