:root {
  --bg: #0d0b14;
  --bg2: #15121f;
  --panel: #1c1829;
  --panel2: #241f35;
  --line: #342e4a;
  --text: #ece6f7;
  --muted: #9a91b3;
  --gold: #f2c35b;
  --gold2: #b8862b;
  --gem: #5ee0ff;
  --shard: #c69bff;
  --good: #5be38c;
  --bad: #ff5d6c;
  --radius: 14px;
  --c-common: #9aa0ab;
  --c-uncommon: #4fd27a;
  --c-rare: #3f9bff;
  --c-epic: #b265ff;
  --c-legendary: #ffb53a;
  --c-mythic: #ff4d7a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px; line-height: 1.45; min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -200px, #2a1d4a55, transparent),
    radial-gradient(800px 400px at 100% 100%, #3a1d2a33, transparent), var(--bg);
}
h1, h2, h3, .title { font-family: Cinzel, Georgia, serif; letter-spacing: .02em; margin: 0; }
a { color: var(--gold); }
button {
  font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel2); border-radius: 10px; padding: 9px 14px; transition: .15s;
}
button:hover:not(:disabled) { border-color: var(--gold2); background: #2d2742; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: linear-gradient(180deg, #f7d27a, #c8902f); color: #241703; border-color: #f7d27a;
  font-weight: 700;
}
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe09a, #d9a03c); }
button.gem { background: linear-gradient(180deg, #2a5f75, #183a4a); border-color: #3fb7d9; }
button.small { padding: 5px 10px; font-size: 13px; }
input {
  font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%;
}
input:focus { outline: 2px solid var(--gold2); border-color: transparent; }

/* ---------- layout ---------- */
header.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: #0d0b14ee; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand svg { width: 30px; height: 30px; }
.brand .title { font-size: 20px; font-weight: 700; color: var(--gold); }
.wallet { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px 4px 8px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill small { color: var(--muted); font-weight: 500; }
.ico { width: 18px; height: 18px; flex: none; }
nav.tabs {
  display: flex; gap: 4px; padding: 10px 20px; overflow-x: auto; border-bottom: 1px solid var(--line);
  background: var(--bg2); scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
/* With a mouse, a thin scrollbar shows the tab bar scrolls (2026-11-10); touch screens swipe it as before. */
@media (hover: hover) and (pointer: fine) {
  nav.tabs { scrollbar-width: thin; scrollbar-color: #4a3f63 transparent; }
  nav.tabs::-webkit-scrollbar { display: block; height: 6px; }
  nav.tabs::-webkit-scrollbar-thumb { background: #4a3f63; border-radius: 3px; }
}
nav.tabs { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
nav.tabs button {
  border: none; background: transparent; color: var(--muted); padding: 8px 14px; white-space: nowrap;
  position: relative;
}
nav.tabs button.on { color: var(--gold); background: var(--panel); }
nav.tabs .dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad);
}
main { max-width: 1180px; margin: 0 auto; padding: 20px; }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.panel {
  background: linear-gradient(180deg, var(--panel), #18142399); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 18px; margin-bottom: 12px; color: var(--gold); }
.panel h3 { font-size: 15px; margin: 14px 0 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.goldtxt { color: var(--gold); }
.gemtxt { color: var(--gem); }
.banner {
  border: 1px solid #6b5a2a; background: #2a2210; color: #f5dc9b; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
}
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.bar { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.list > * { border-bottom: 1px solid var(--line); padding: 10px 0; }
.list > *:last-child { border-bottom: none; }
footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; text-align: center; color: var(--muted); font-size: 13px; padding: 30px 20px 60px; }
footer a { color: var(--muted); margin: 0 8px; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.card {
  --rc: var(--c-common);
  position: relative; aspect-ratio: 5 / 7; border-radius: 12px; padding: 6px;
  background: linear-gradient(160deg, var(--rc), #000 140%);
  box-shadow: 0 6px 18px #0008; cursor: pointer; user-select: none; transition: transform .15s;
  container-type: inline-size;
}
.card:hover { transform: translateY(-3px); }
.card .inner {
  height: 100%; border-radius: 3.67cqi; background: #120f1b; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid #0006;
}
/* The art window is square at every card size (owner, 2026-11-11: the art is made 1:1, framed once in the Art Studio, and must
   look the same everywhere), and everything on the face is sized in cqi of the card, so the face scales as one piece like a
   printed card. The sizes were set so a 230px card looks as it did; the footer under the art takes the rest. */
.card .art { position: relative; flex: none; aspect-ratio: 1 / 1; overflow: hidden; }
.card .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .nm {
  font-family: Cinzel, serif; font-weight: 700; font-size: 6.422cqi; padding: 2.294cqi 3.211cqi 0.917cqi;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .meta { display: flex; justify-content: space-between; padding: 0 3.211cqi 2.752cqi; font-size: 5.505cqi; }
.card .meta b { font-variant-numeric: tabular-nums; }
.card .sil {
  position: absolute; inset: 9% 12% 16%; filter: drop-shadow(0 0 6px var(--g)) drop-shadow(0 3px 3px #000c);
}
.card .sil i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #fff 0%, var(--g) 75%);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.card.unowned .sil i { background: #6a6578; }
.card .lvl {
  position: absolute; top: 2.752cqi; left: 2.752cqi; background: #000a; border-radius: 2.752cqi; padding: 1px 2.752cqi;
  font-size: 5.505cqi; font-weight: 700;
}
.card .ab {
  position: absolute; bottom: 2.752cqi; left: 2.752cqi; right: 2.752cqi; background: #000a; border-radius: 2.752cqi;
  padding: 0.917cqi 2.752cqi; font-size: 5.046cqi; text-align: center;
}
.card .badge {
  position: absolute; top: -6px; right: -6px; background: var(--bad); color: #fff; font-weight: 800;
  font-size: 11px; border-radius: 99px; padding: 2px 7px; z-index: 2; box-shadow: 0 2px 6px #0008;
}
.card .badge.up { background: var(--good); color: #062; }
.card.unowned { filter: grayscale(1) brightness(.35); }
.card.busy::after {
  content: "On expedition"; position: absolute; inset: 2.752cqi; display: grid; place-items: start center; padding-top: 22%;   /* in the art, clear of the ability (% of the width) */
  background: #000a; border-radius: 3.67cqi; font-size: 5.505cqi; font-weight: 700;
}
.card.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.r-uncommon { --rc: var(--c-uncommon); }
.r-rare { --rc: var(--c-rare); }
.r-epic { --rc: var(--c-epic); }
.r-legendary { --rc: var(--c-legendary); box-shadow: 0 0 22px #ffb53a55, 0 6px 18px #0008; }
/* Mythic: the rainbow turns around the card like the limited editions' frames. It used to slide a tiled diagonal
   gradient, which showed a hard seam where the tiles met. (--ang and crownspin are defined with .card.crowned.) */
.r-mythic {
  --rc: var(--c-mythic);
  background: conic-gradient(from var(--ang, 0deg), #ff4d7a, #ffb53a, #5ee0ff, #b265ff, #ff4d7a);
  animation: crownspin 6s linear infinite;
  box-shadow: 0 0 28px #ff4d7a66, 0 6px 18px #0008;
}

/* team slots */
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.slot {
  aspect-ratio: 5 / 7; border: 2px dashed var(--line); border-radius: 12px; display: grid;
  place-items: center; color: var(--muted); cursor: pointer; font-size: 13px; text-align: center;
}
.slot:hover { border-color: var(--gold2); color: var(--gold); }

/* ---------- modal ---------- */
/* A card's window: the card beside its details, as big as the window allows (owner, 2026-11-11), and on phones the card on
   top. Clicking it opens .cardzoom: the same card filling the screen (the face scales as one piece, so it reads like a
   real card at any size and shows the art's full detail). */
.cardview { display: grid; grid-template-columns: clamp(180px, 28vw, 300px) 1fr; gap: 18px; align-items: start; }
.cv-card { cursor: zoom-in; }
.cv-card .card:hover { transform: none; }
.cv-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }
@media (max-width: 620px) {
  .cardview { grid-template-columns: 1fr; }
  .cardview > div:first-child { width: min(76vw, 300px); justify-self: center; }
}
.cardzoom { position: fixed; inset: 0; z-index: 200; background: #05030aeb; backdrop-filter: blur(6px); display: grid; place-items: center;
  padding: 2vh 2vw; cursor: zoom-out; animation: fade .15s; }
/* Drag the enlarged card to turn it and see its angles (owner, 2026-11-11); a light glare follows the angle, and it
   settles back when let go. svh: the height a phone's address bar leaves visible. */
.cz-stage { perspective: 1400px; }
.cardzoom .card { width: min(94vw, calc(88vh * 5 / 7)); width: min(94vw, calc(88svh * 5 / 7)); cursor: grab; touch-action: none;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.cardzoom .card.dragging { transition: none; cursor: grabbing; }
.cz-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; mix-blend-mode: overlay; opacity: 0;
  transition: opacity .4s; }
.cardzoom .card.dragging .cz-glare { transition: none; }
.cz-hint { position: fixed; left: 0; right: 0; bottom: 1.5svh; text-align: center; font-size: 13px; color: var(--muted); pointer-events: none; }
.modal {
  position: fixed; inset: 0; z-index: 50; background: #05030acc; backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px; animation: fade .2s;
}
.modal .box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  width: min(760px, 100%); max-height: 92vh; overflow: auto; position: relative;
}
.modal .x { position: absolute; top: 12px; right: 12px; border: none; background: none; font-size: 22px; }
@keyframes fade { from { opacity: 0; } }

/* pack opening */
.reveal { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 18px 0; perspective: 900px; }
.flip { width: 136px; aspect-ratio: 5 / 7; position: relative; transform-style: preserve-3d; transition: transform .6s; cursor: pointer; }
.flip.open { transform: rotateY(180deg); }
.flip > * { position: absolute; inset: 0; backface-visibility: hidden; }
.flip .back {
  border-radius: 12px; border: 2px solid var(--gold2); display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #2a1f45, #2a1f45 10px, #231a3a 10px, #231a3a 20px);
}
.flip .back svg { width: 50%; }
.flip .front { transform: rotateY(180deg); }
.flip.glow-epic .back { box-shadow: 0 0 20px var(--c-epic); }
.flip.glow-legendary .back { box-shadow: 0 0 26px var(--c-legendary); }
.flip.glow-mythic .back { box-shadow: 0 0 32px var(--c-mythic); }

/* battle */
.arena { display: grid; gap: 22px; margin: 10px 0; }
.line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fighter { position: relative; transition: transform .12s, opacity .4s; }
.fighter .card { cursor: default; }
.fighter.dead { opacity: .25; filter: grayscale(1); }
.fighter.hit { transform: translateX(4px) rotate(2deg); }
.fighter.act { transform: translateY(-8px); }
.enemy .fighter.act { transform: translateY(8px); }
.hpbar { height: 7px; background: #000; border-radius: 99px; margin-top: 5px; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: var(--good); transition: width .15s; }
.enemy .hpbar i { background: var(--bad); }
.dmg {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: 18px;
  color: #fff; text-shadow: 0 2px 4px #000, 0 0 8px #000; pointer-events: none; animation: rise .8s forwards;
  white-space: nowrap; z-index: 3;
}
.dmg.crit { color: var(--gold); font-size: 22px; }
.dmg.heal { color: var(--good); }
.dmg.thorn { color: var(--shard); font-size: 14px; }
@keyframes rise { to { transform: translate(-50%, -40px); opacity: 0; } }
.result { text-align: center; font-family: Cinzel, serif; font-size: 34px; font-weight: 800; }

/* toast */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 18px #0009; animation: fade .2s; }
.toast.err { border-color: var(--bad); }
.toast.ok { border-color: var(--good); }

/* store */
.skus { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sku { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sku .tag { position: absolute; top: -9px; right: 12px; background: var(--gold); color: #241703; font-weight: 800; font-size: 11px; border-radius: 99px; padding: 2px 9px; }
.sku .price { font-size: 22px; font-weight: 800; }
.sku .nm { font-family: Cinzel, serif; font-weight: 700; font-size: 16px; }
.sku button { margin-top: auto; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pack { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pack .art { height: 110px; border-radius: 10px; display: grid; place-items: center; }
.pack .art svg { height: 86px; }
.odds { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.odds b { font-weight: 600; }
table.lb { width: 100%; border-collapse: collapse; }
table.lb td, table.lb th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.lb th { color: var(--muted); font-weight: 500; font-size: 13px; }
table.lb tr.me td { color: var(--gold); }
.chip { display: inline-block; border-radius: 99px; padding: 1px 8px; font-size: 12px; border: 1px solid var(--line); background: var(--bg2); }
.founder { color: #241703; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.chip.banned { color: #fff; background: #c62828; border-color: #c62828; font-weight: 700; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters button.on { border-color: var(--gold); color: var(--gold); }

@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; }
  header.top { padding: 8px 16px; gap: 10px; }
  .brand .title { display: none; }
  .pill { padding: 3px 9px 3px 6px; font-size: 13px; }
  .pill small { display: none; }
  main { padding: 16px; }
  nav.tabs { padding: 8px 16px; }
  .team, .line { gap: 5px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .flip { width: 104px; }
  .panel { padding: 14px; }
}

/* ---------- foil, serials, crowned editions ---------- */
.card.foil .art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, #ff6ec7 32%, #ffe66e 40%, #6effa8 48%, #6ec8ff 56%, #c86eff 64%, transparent 76%);
  background-size: 250% 250%; animation: holo 3.2s linear infinite;
}
.card.foil { box-shadow: 0 0 16px #b9f3ff55, 0 6px 18px #0008; }
/* The band sweeps across and back (see the "foil shimmer" rule at the end), staying inside its gradient,
   so its edges never show. */
@keyframes holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.card .serial {
  position: absolute; top: 2.752cqi; left: 50%; transform: translateX(-50%); background: #000c; color: var(--gold);
  border: 1px solid #f2c35b88; border-radius: 2.752cqi; padding: 0 2.752cqi; font-size: 5.505cqi; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.card.crowned {
  background: conic-gradient(from var(--ang, 0deg), #f2c35b, #fff3c4, #b8862b, #f2c35b, #fff3c4, #b8862b, #f2c35b);
  animation: crownspin 4s linear infinite; box-shadow: 0 0 26px #f2c35b88, 0 6px 18px #0008;
}
.card.crowned.unowned { animation: none; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes crownspin { to { --ang: 360deg; } }
.card.crowned .nm { color: var(--gold); }
.badge.crown { background: var(--gold); color: #241703; }
.badge.foil { background: linear-gradient(90deg, #ff6ec7, #ffe66e, #6effa8, #6ec8ff); color: #1a1030; }
.flip.glow-foil .back { box-shadow: 0 0 22px #6ec8ff, 0 0 40px #ff6ec755; }
.flip.glow-crowned .back { box-shadow: 0 0 36px var(--gold), 0 0 70px #f2c35b88; border-color: var(--gold); }
.crowntxt { color: var(--gold); }
.foiltxt {
  background: linear-gradient(90deg, #ff6ec7, #ffe66e, #6effa8, #6ec8ff, #c86eff); -webkit-background-clip: text;
  background-clip: text; color: transparent; font-weight: 700;
}
.foilchip { font-family: Inter, sans-serif; font-size: 12px; vertical-align: middle; }
.crownchip { border-color: var(--gold); color: var(--gold); }
.crownpanel { border-color: #6b5a2a; background: linear-gradient(180deg, #2a2210, var(--panel)); }
.rt-legendary { color: var(--c-legendary); font-weight: 700; }
.rt-mythic { color: var(--c-mythic); font-weight: 700; }
.rt-epic { color: var(--c-epic); font-weight: 700; }
.rt-rare { color: var(--c-rare); font-weight: 600; }
.card.foil .art::after { z-index: 1; }
.card .art > span { z-index: 2; }

/* ---------- mana cost, info button ---------- */
.card .cost {
  position: absolute; top: 2.294cqi; left: 2.294cqi; z-index: 2; width: 11.927cqi; height: 11.927cqi;
  display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 6.422cqi;
  color: #fff; background: radial-gradient(circle at 35% 30%, #8fd8ff, #1d6fd1 60%, #0b3a78); border: 1.5px solid #cfeeff;
  box-shadow: 0 2px 4px #000a; text-shadow: 0 1px 2px #000;
}
.card .info {
  position: absolute; bottom: 2.294cqi; right: 2.294cqi; z-index: 3; width: 9.174cqi; height: 9.174cqi;
  padding: 0; border-radius: 50%; display: grid; place-items: center; font: italic 700 clamp(8px, 8cqi, 12px) Georgia, serif;
  background: #000b; border: 1px solid #fff6; color: #fff;
}
.card .info:hover { background: var(--gold); color: #241703; border-color: var(--gold); }
/* The ability (or card type) sits centred across the bottom of the art, still drawn like a button; the info button
   moves up out of its way. */
.card .ab { left: 2.752cqi; right: 2.752cqi; text-align: center; border: 1px solid #ffffff38; border-radius: 3.211cqi;
  background: linear-gradient(180deg, #1c1828e6, #07060ae6); box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 4px #000a; }
.card .info { bottom: 15.596cqi; right: auto; left: 2.294cqi; }   /* bottom left of the art, clear of the icons */
.card .meta .lv { color: var(--muted); font-weight: 700; }
.card .meta .hurt { color: var(--bad); }
.infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.infogrid .v { font-size: 16px; }
.manatxt { color: #6ec8ff; }
.rules li { margin-bottom: 6px; }
.curve { display: flex; gap: 6px; align-items: flex-end; height: 54px; margin: 6px 0 14px; }
.curve > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.curve i { display: block; width: 100%; max-width: 34px; background: linear-gradient(180deg, #6ec8ff, #1d6fd1); border-radius: 4px 4px 0 0; min-height: 2px; }
.curve span { font-size: 11px; color: var(--muted); }

/* ---------- arena table ---------- */
.table { display: grid; gap: 12px; background: radial-gradient(900px 400px at 50% 50%, #2a2342, var(--panel)); }
.hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--line); position: relative;
}
.hero.active { border-color: var(--gold2); box-shadow: 0 0 14px #f2c35b33; }
.hero.target { border-color: var(--bad); box-shadow: 0 0 18px #ff5d6c88; cursor: crosshair; animation: pulse 1s infinite; }
.hname { font-family: Cinzel, serif; font-weight: 700; }
.life { font-size: 26px; font-weight: 900; color: #ff8a95; font-variant-numeric: tabular-nums; }
.life.low { color: var(--bad); animation: pulse 1s infinite; }
.mana { display: flex; align-items: center; gap: 3px; }
.mana i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #3c7bd1; background: #0e1b33; }
.mana i.full { background: linear-gradient(135deg, #8fd8ff, #1d6fd1); border-color: #cfeeff; }
.mana span { margin-left: 6px; font-weight: 700; color: #6ec8ff; }
.board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; min-height: 120px; align-items: start; }
.board .empty { grid-column: 1 / -1; align-self: center; text-align: center; }
.unit { position: relative; transition: transform .15s; }
.unit .card { cursor: default; }
.unit.ready .card { outline: 2px solid var(--good); outline-offset: 2px; cursor: pointer; box-shadow: 0 0 14px #5be38c66; }
.unit.picked .card { outline: 3px solid var(--gold); transform: translateY(-6px); }
.unit.target .card { outline: 3px solid var(--bad); cursor: crosshair; animation: pulse 1s infinite; }
.unit.taunt .card { box-shadow: 0 0 0 3px #9aa0ab, 0 6px 18px #0008; }
.unit.shielded .card::before {
  content: ""; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid #ffe9a8; box-shadow: 0 0 14px #ffe9a8; z-index: 4; pointer-events: none;
}
.unit.sick .card { filter: saturate(.6); }
.unit.act { transform: translateY(-10px) scale(1.04); }
.unit.hit { transform: translateX(5px) rotate(2deg); }
.tag-taunt {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); z-index: 5; background: #9aa0ab; color: #111;
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px;
}
.zzz { position: absolute; top: 20%; right: 10%; z-index: 5; color: #cfe3ff; font-weight: 800; text-shadow: 0 1px 3px #000; }
.midline { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 8px 0; }
.turnline { text-align: center; font-weight: 600; }
.turnline span { margin-left: 8px; }
.hand { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.handcard { flex: 0 0 120px; opacity: .55; transition: transform .15s; }
.handcard.playable { opacity: 1; cursor: pointer; }
.handcard.playable:hover { transform: translateY(-8px); }
.handcard.playable .card { box-shadow: 0 0 14px #6ec8ff88; }
.endturn { min-width: 120px; }
@keyframes pulse { 50% { filter: brightness(1.3); } }
@media (max-width: 860px) {
  .board { grid-template-columns: repeat(3, 1fr); }
  .handcard { flex-basis: 96px; }
  .infogrid { grid-template-columns: 1fr; }
  .life { font-size: 22px; }
}

/* ---------- edition tiers ---------- */
.card.crowned.ed-relic {
  background: conic-gradient(from var(--ang, 0deg), #e8eef7, #8fa3bf, #ffffff, #6e7f99, #e8eef7, #b9c7da, #e8eef7);
  box-shadow: 0 0 26px #cfe0ff99, 0 6px 18px #0008;
}
.card.crowned.ed-relic .nm { color: #dfe9f7; }
.card.crowned.ed-sovereign {
  background: conic-gradient(from var(--ang, 0deg), #ff4d7a, #ffb53a, #fff3c4, #5ee0ff, #b265ff, #ff4d7a);
  box-shadow: 0 0 34px #ffb53acc, 0 0 60px #ff4d7a66, 0 6px 18px #0008; animation-duration: 2.5s;
}
.card.crowned.ed-sovereign .inner { background: #07050c; }
.card.crowned.ed-sovereign .nm { background: linear-gradient(90deg, #ffb53a, #fff3c4, #ff4d7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.sealed { filter: brightness(.35); }
.card .firsted {
  position: absolute; top: 14.679cqi; left: 2.294cqi; z-index: 2; background: #1b1206e6; color: #f2c35b; border: 1px solid #b8862b;
  border-radius: 1.835cqi; padding: 0 1.835cqi; font-size: 4.587cqi; font-weight: 800; letter-spacing: .03em;
}
.vault-sec { margin-top: 14px; }
.vault-sec h3 { margin: 0 0 4px; }
.vault-sec.ed-sovereign h3 { color: #ffb53a; }
.vault-sec.ed-relic h3 { color: #cfe0ff; }
.vault-sec.ed-crowned h3 { color: var(--gold); }
.vault-sec .spread { margin-bottom: 10px; }
.holders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.crownchip.ed-relic { border-color: #cfe0ff; color: #cfe0ff; }
.crownchip.ed-sovereign { border-color: #ffb53a; color: #ffb53a; background: #2a0f18; }
.flip.glow-relic .back { box-shadow: 0 0 36px #cfe0ff, 0 0 70px #8fa3bf; border-color: #e8eef7; }
.flip.glow-sovereign .back { box-shadow: 0 0 40px #ffb53a, 0 0 90px #ff4d7a, 0 0 140px #5ee0ff88; border-color: #fff3c4; animation: pulse 1s infinite; }
.limited-banner {
  text-align: center; padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-size: 16px; animation: fade .4s;
  border: 1px solid var(--gold); background: linear-gradient(90deg, #2a2210, #3a2a10, #2a2210); color: #fff3c4;
}
.limited-banner.ed-relic { border-color: #cfe0ff; background: linear-gradient(90deg, #141a26, #26324a, #141a26); color: #e8eef7; }
.limited-banner.ed-sovereign { border-color: #ffb53a; background: linear-gradient(90deg, #2a0f18, #3a1d0a, #0f2a33); color: #fff3c4; font-size: 18px; }

/* ---------- typed energy costs ---------- */
.card .costs { position: absolute; top: 2.294cqi; left: 2.294cqi; z-index: 2; display: flex; gap: 0.917cqi; }
.card .costs .cost { position: static; }
.cost.el-ember { background: radial-gradient(circle at 35% 30%, #ffc38a, #e2531c 60%, #7a2208); border-color: #ffd9b8; }
.cost.el-tide { background: radial-gradient(circle at 35% 30%, #a8e4ff, #1d7fd1 60%, #0b3a78); border-color: #d2f1ff; }
.cost.el-verdant { background: radial-gradient(circle at 35% 30%, #c4f5a8, #2f9e46 60%, #0f4a1d); border-color: #dcffd0; }
.cost.el-storm { background: radial-gradient(circle at 35% 30%, #fff6a8, #c9a50f 60%, #6a5404); border-color: #fff9cf; color: #2a2100; text-shadow: none; }
.cost.el-shadow { background: radial-gradient(circle at 35% 30%, #dcb8ff, #7b3fd1 60%, #33115e); border-color: #ead6ff; }
.cost.el-radiant { background: radial-gradient(circle at 35% 30%, #fffbe8, #e8c45a 60%, #8a6a12); border-color: #fffbe8; color: #2a2100; text-shadow: none; }
.cost.any { background: radial-gradient(circle at 35% 30%, #e8e8ee, #8a8a99 60%, #3c3c48); border-color: #f4f4f8; }

/* ---------- arena v2: energy, attacks, blocks ---------- */
.echip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-weight: 700; font-size: 13px;
  border: 1px solid currentColor; background: #0008; font-variant-numeric: tabular-nums;
}
.echip svg { width: 14px; height: 14px; }
.echip.spent { opacity: .45; }
.echip.el-ember { color: #ffb347; } .echip.el-tide { color: #7fd8ff; } .echip.el-verdant { color: #a6f08a; }
.echip.el-storm { color: #fff27a; } .echip.el-shadow { color: #d6a8ff; } .echip.el-radiant { color: #fff6d6; }
.zone { display: flex; gap: 6px; flex-wrap: wrap; }
.card.energy { --rc: #6b6f80; cursor: inherit; }
.card.energy .art { display: grid; place-items: center; }
.card.energy .eglyph svg { width: 56%; height: auto; margin: auto; display: block; filter: drop-shadow(0 0 10px currentColor); }
.card.energy .eglyph { width: 100%; display: grid; place-items: center; }
.card.energy.el-ember { --rc: #e2531c; } .card.energy.el-ember .art { background: radial-gradient(circle, #c2410c, #3a0d05); color: #ffb347; }
.card.energy.el-tide { --rc: #1d7fd1; } .card.energy.el-tide .art { background: radial-gradient(circle, #0e6fb8, #04203a); color: #7fd8ff; }
.card.energy.el-verdant { --rc: #2f9e46; } .card.energy.el-verdant .art { background: radial-gradient(circle, #1f8a3d, #06240f); color: #a6f08a; }
.card.energy.el-storm { --rc: #c9a50f; } .card.energy.el-storm .art { background: radial-gradient(circle, #a38b0b, #1d1a05); color: #fff27a; }
.card.energy.el-shadow { --rc: #7b3fd1; } .card.energy.el-shadow .art { background: radial-gradient(circle, #5b21b6, #14061f); color: #d6a8ff; }
.card.energy.el-radiant { --rc: #e8c45a; } .card.energy.el-radiant .art { background: radial-gradient(circle, #c9a227, #2a2108); color: #fff6d6; }
.unit.attacking .card { outline: 3px solid #ff7a59; outline-offset: 2px; box-shadow: 0 0 18px #ff7a5999; }
.unit.choosable .card { cursor: pointer; }
.unit.exhausted .card { filter: saturate(.45) brightness(.8); }
.unit.blocking .card { outline: 3px solid #6ec8ff; outline-offset: 2px; }
/* Tags sit on the card's own edges (2026-11-06: under a card with keywords they dropped below the keyword row). */
.unitcard { position: relative; }
.unit .tag {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 6px; white-space: nowrap; max-width: 110%; overflow: hidden; text-overflow: ellipsis;
}
.tag-atk { top: -9px; background: #ff7a59; color: #1a0700; }
.tag-blk { bottom: -9px; background: #6ec8ff; color: #04203a; }
.tag-ex { bottom: -9px; background: #444a5a; color: #dfe3ee; }
.table.defending { box-shadow: inset 0 0 0 2px #ff7a5966; }
.turnline.bad { color: #ffb4a4; }

/* ---------- spells ---------- */
/* spells and relics use their rarity frame (r-* classes) like every other card */
.card.spell .art { background: radial-gradient(circle at 50% 45%, #2c3350, #0d0f1a); }
.card.spell.sp-ember .art { background: radial-gradient(circle at 50% 45%, #6b2410, #160603); }
.card.spell.sp-tide .art { background: radial-gradient(circle at 50% 45%, #0c4170, #030d18); }
.card.spell.sp-verdant .art { background: radial-gradient(circle at 50% 45%, #145a28, #031207); }
.card.spell.sp-storm .art { background: radial-gradient(circle at 50% 45%, #5e510a, #121003); }
.card.spell.sp-shadow .art { background: radial-gradient(circle at 50% 45%, #3c1673, #0b0414); }
.card.spell.sp-radiant .art { background: radial-gradient(circle at 50% 45%, #6b5715, #161205); }
.card.spell .spelltext { display: block; font-size: 5.046cqi; color: var(--muted); line-height: 1.25; min-height: 2.5em; }
.card.spell .ab { background: #2c335099; }
.handcard.casting .card { outline: 3px solid #c69bff; transform: translateY(-8px); }
.unit.spelltarget .card { outline: 3px solid #c69bff; cursor: crosshair; animation: pulse 1s infinite; box-shadow: 0 0 18px #c69bff99; }

/* ---------- deck builder ---------- */
.counter { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.counter button { padding: 2px 10px; }
.badge.count { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.counted { position: relative; }
.counted > .badge { position: absolute; top: -6px; right: -6px; z-index: 3; font-weight: 800; font-size: 11px; border-radius: 99px; padding: 2px 7px; }
.energyrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 8px; }
.deckbar { position: sticky; top: -22px; background: var(--panel); z-index: 6; padding: 6px 0; }
@media (max-width: 860px) { .energyrow { grid-template-columns: repeat(3, 1fr); } }

/* ---------- arena v3: phases, defenders, relics ---------- */
.phasebar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.phasebar .ph { font-size: 12px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.phasebar .ph.on { border-color: var(--gold); color: var(--gold); background: #2a2210; font-weight: 700; }
.phasebar .ph.done { opacity: .5; }
.unit.guarding .card { outline: 3px solid #6ec8ff; outline-offset: 2px; box-shadow: 0 0 14px #6ec8ff66; }
.unit.guardable .card { outline: 2px dashed #6ec8ff99; outline-offset: 2px; cursor: pointer; }
.tag-relic { top: auto; bottom: 22%; background: #2a2210ee; color: var(--gold); border: 1px solid var(--gold2); font-weight: 700; }
.cost.free { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a227 60%, #6a5404); border-color: #fff9cf; color: #2a2100; text-shadow: none; }

.card.relic .art { background: radial-gradient(circle at 50% 45%, #3a2e14, #0f0b05); }

/* ---------- auction house ---------- */
.listing { display: flex; flex-direction: column; gap: 4px; }
.listing .lprice { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.listing button { margin-top: 4px; }
.market-filters input { width: auto; flex: 1 1 180px; }
.market-filters select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }

/* ---------- plaques ---------- */
.plaque {
  display: inline-block; background: #0b0910e6; color: #e8e2d0; border: 1px solid #ffffff2e; border-radius: 4px;
  padding: 0 4px; font-size: clamp(7px, 6cqi, 10px); font-weight: 800; letter-spacing: .03em; line-height: 1.5;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.card .plaques { position: absolute; top: 14.679cqi; left: 2.294cqi; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.917cqi; }
.plaque.pl-serial { color: var(--gold); border-color: #b8862b88; }
.plaque.pl-print { color: #f2c35b; border-color: #b8862b; }
.plaque.pl-foil { background: linear-gradient(90deg, #ff6ec7, #ffe66e, #6effa8, #6ec8ff); color: #1a1030; border: none; }
.plaque.pl-tier.ed-crowned { color: var(--gold); border-color: var(--gold); }
.plaque.pl-tier.ed-relic { color: #dfe9f7; border-color: #cfe0ff; }
.plaque.pl-tier.ed-sovereign { color: #ffb53a; border-color: #ff4d7a; }
.card .plates { display: flex; justify-content: space-between; gap: 1.835cqi; padding: 0 2.752cqi 2.294cqi; }
.plaque.pl-r-common { color: #c5cad3; } .plaque.pl-r-uncommon { color: #7fe3a0; } .plaque.pl-r-rare { color: #7fbaff; }
.plaque.pl-r-epic { color: #cd9bff; } .plaque.pl-r-legendary { color: #ffc96b; } .plaque.pl-r-mythic { color: #ff86a4; }
.card .serial, .card .firsted { display: none; }
.copylist { display: grid; gap: 4px; }
.copyrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.copyrow .plaque { font-size: 11px; }
.list label .plaque { font-size: 11px; margin-left: 4px; }

/* ---------- series ---------- */
.plaque.pl-series.sr-primal { color: #ffb347; border-color: #c96f1c; background: #1d1206e6; }
.card.sr-primal:not(.crowned) .inner { border-color: #6b4a22; }
.pack.locked { opacity: .55; filter: grayscale(.4); }
.panel.series-primal { border-color: #6b4a22; background: linear-gradient(180deg, #24180c, var(--panel)); }

/* ---------- sell tab ---------- */
button.danger, button.primary.danger { background: linear-gradient(180deg, #e0534a, #a8312a); color: #fff; border-color: #7a1f1a; }
.sellrows .copyrow { padding: 4px 0; border-bottom: 1px solid #ffffff10; }
.sellrows .plaque { font-size: 11px; margin-left: 4px; }
.sellwarn > div { padding: 6px 8px; border-left: 3px solid #e0a03a; background: #e0a03a14; border-radius: 4px; }

/* ---------- social ---------- */
.chatlog { max-height: 460px; overflow-y: auto; display: grid; gap: 6px; padding: 8px; background: #0d0b13; border: 1px solid #ffffff14; border-radius: 10px; }
.chatmsg { position: relative; padding: 4px 26px 4px 6px; border-radius: 6px; word-break: break-word; }
.chatmsg.mine { background: #f2c35b0f; }
.chatmsg .x { position: absolute; right: 2px; top: 2px; padding: 0 6px; background: none; border: none; color: var(--muted, #8f86a3); }
.chatshare { width: 150px; margin-top: 6px; }
.chatform { margin-top: 10px; flex-wrap: nowrap; }
.chatform input { flex: 1; min-width: 0; }
.pname { color: var(--gold); font-weight: 700; text-decoration: none; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #555; vertical-align: middle; }
.online.on { background: #4cc35a; box-shadow: 0 0 6px #4cc35a; }
.thread { display: block; width: 100%; text-align: left; }
.thread.on { border-color: var(--gold); }
.dm { max-width: 75%; padding: 6px 10px; border-radius: 10px; background: #ffffff0d; justify-self: start; }
.dm.mine { justify-self: end; background: #f2c35b1f; }
.tradeside { padding: 10px; border: 1px solid #ffffff1a; border-radius: 10px; }
.tradeside.ok { border-color: #4cc35a; box-shadow: 0 0 12px #4cc35a44; }
.tradecards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tradeitem { display: grid; gap: 4px; }
.invite-banner { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: #1c1726; border: 1px solid var(--gold); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 8px 30px #000a; max-width: calc(100vw - 32px); display: grid; gap: 8px; }
@media (max-width: 700px) { .dms { grid-template-columns: 1fr !important; } }

/* ---------- arena: unit kit row, new card types, glossary ---------- */
.unitkit { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 11px; max-width: 100%; }
.unitkit .kt { font-size: 9.5px; font-weight: 700; line-height: 1.4; padding: 0 5px; border-radius: 5px; background: #ffffff10;
  border: 1px solid #ffffff22; color: #d9d2e8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.unitkit .kt a.term { color: inherit; }
.unitkit .kt-relic { color: var(--gold); border-color: #b8862b88; background: #2a221066; }
.unitkit .kt-curse { color: #d6a8ff; border-color: #7b3fd188; background: #2a103866; }
.hero .kit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip.artifact { border-color: #6ec8ff88; color: #a9dcff; cursor: pointer; }
.chip.trapchip { border-color: #ff7a5988; color: #ffb4a4; cursor: pointer; }
.chip.structure { border-color: #c9a46a88; color: #f0d7a8; cursor: pointer; position: relative; }
.chip.structure.wall { border-color: #e8c27a; }
.chip.structure.on { background: #c9a46a33; outline: 2px solid #f0b54a; }
.chip.structure.spelltarget { outline: 3px solid #c69bff; animation: pulse 1s infinite; cursor: crosshair; }
.chip.champion { border-color: #ffd36b99; color: #ffe39a; cursor: pointer; position: relative; }
.powerbtn { align-self: flex-start; }
.powerbtn.on { outline: 2px solid #c69bff; }
.terrainbar { margin: 0 auto 8px; max-width: 640px; text-align: center; font-size: 12.5px; padding: 5px 12px; border-radius: 99px;
  border: 1px solid #c98a3c88; background: #24180ccc; color: #f3d6a8; cursor: pointer; }
.card.artifact .art { background: radial-gradient(circle at 50% 45%, #1c3a4a, #050f14); }
.card.trap .art { background: radial-gradient(circle at 50% 45%, #4a1c14, #140504); }
.card.curse .art { background: radial-gradient(circle at 50% 45%, #3a1048, #0e0414); }
.card.terrain .art { background: radial-gradient(circle at 50% 45%, #3a3014, #100c04); }
.card.special_energy .art { background: radial-gradient(circle at 50% 45%, #1f2f50, #060a14); }
a.term { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
a.term:hover { color: var(--gold); }
.glossary { display: grid; gap: 10px; margin: 0; }
.glossary > div { padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; }
.glossary dt { font-weight: 800; color: var(--gold); }
.glossary dd { margin: 2px 0 0; color: #d7d0e6; }
.glossary > div.flash { border-color: var(--gold); background: #f2c35b14; animation: termflash 1.6s ease-out; }
@keyframes termflash { from { box-shadow: 0 0 0 3px #f2c35b88; } to { box-shadow: none; } }

.plaque.pl-exp { color: #8fe3ff; border-color: #3a8bb0; }

/* Tinker series: brass and teal */
.plaque.pl-series.sr-tinker { color: #e8c07a; border-color: #8a6a2e; background: #14201fe6; }
.card.sr-tinker:not(.crowned) .inner { border-color: #5a4a2a; }
.panel.series-tinker { border-color: #4a5a52; background: linear-gradient(180deg, #14201f, var(--panel)); }

/* Multiverse series: violet and cyan prism */
.plaque.pl-series.sr-multiverse { color: #d58cff; border-color: #6a3fb0; background: #120a24e6; }
.card.sr-multiverse:not(.crowned) .inner { border-color: #3a2a5a; }
.panel.series-multiverse { border-color: #3a2a5a; background: linear-gradient(180deg, #160e2a, var(--panel)); }

/* ---------- great pulls marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; border-bottom: 1px solid #b8862b55; background: linear-gradient(90deg, #1a1408, #2a2210, #1a1408);
  font-size: 13px; padding: 6px 0; }
.marquee[hidden] { display: none; }
.mq-track { display: inline-flex; will-change: transform; transform: translateX(100vw); }
.mq-item { padding: 0 14px; }
.mq-sep { color: var(--gold); opacity: .7; font-weight: 800; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } }
.mq-card { font-weight: 800; text-decoration: none; cursor: pointer; }
.mq-card:hover { text-decoration: underline; }

/* ---------- achievements ---------- */
.achgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.ach.done { opacity: .55; }

/* ---------- card face layout: art always dominates, text never crowds plaques ---------- */
/* Non-creature cards show at most two lines of text on the face; the full text is in the info panel. */
.card.spell .spelltext {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  min-height: 0; height: 2.5em; padding-bottom: 0; margin-bottom: 1.835cqi;
}
/* The card's plaques under the cost: series and expansion on the first line, the rest wrapping after them. */
.card .plaques {
  flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 0.917cqi;
  top: 19.266cqi; right: 13.761cqi;       /* below the serial and print, beside the icons */
  max-height: calc(100% - 19.266cqi - 17.431cqi);
  overflow: hidden;
}
.card .plaques .pqline { display: flex; flex-wrap: wrap; gap: 0.917cqi; flex-basis: 100%; }
/* The text panel: the same height on every card, so every card's art is the same size. Name, two lines (a
   creature's stats, or a card's text), a row for the card's other plaques, then its number and rarity. */
.card .foot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.card .foot > * { flex-shrink: 0; }                  /* the name, plaques and number keep their size... */
.card .foot .nm { padding-top: 1.835cqi; padding-bottom: 1px; }
.card .foot .meta { flex: none; align-items: center; padding-bottom: 1px; }   /* the stats sit right under the name on every card */
/* A card's text: two lines (cut off past that; the full text is in its info window and on a print's details), one
   when its plaques take two rows. */
.card.spell .foot .spelltext { flex: none; height: 2.5em; min-height: 0; overflow: hidden; }
.card.spell .foot.hasx2 .spelltext { -webkit-line-clamp: 1; line-clamp: 1; height: 1.25em; }
/* Every plaque but the copy's serial and print edition: up to two rows above the number and rarity, all one small size. */
.card .xplaques { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 0.917cqi; padding: 0 2.752cqi 0.917cqi; overflow: hidden; flex: none; max-height: 17.2cqi; }   /* 2.5em of the old 15px, in card units: it scales with the card */
.card .xplaques .plaque, .card .plates .plaque { font-size: 3.67cqi; padding: 0 0.917cqi; line-height: 1.4; letter-spacing: .02em; }
.card .foot .plates { padding-bottom: 1.835cqi; margin-top: auto; }     /* the number and rarity always sit at the bottom */
.card .foot .xplaques { margin-top: auto; } .card .foot .xplaques + .plates { margin-top: 0; }   /* the plaques sit right on top of them */
/* Printing in white (the print page's "White text panel"): black text on white, to save ink. */
.card.lightfoot .foot { background: #fff; color: #111; }
.card.lightfoot .foot .nm { color: #111; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.card.lightfoot .foot .spelltext, .card.lightfoot .foot .meta .lv, .card.lightfoot .foot .term { color: #333; }
.card .plaques .plaque, .card .plaques-r .plaque { font-size: 4.587cqi; padding: 0 1.376cqi; }
/* This copy's serial and print edition, top right, above the element and role icons. */
.card .plaques-r .plaque { font-size: 4.587cqi; }   /* a little smaller on the smallest cards, so the icons clear the ability */
.card .plaques-r { position: absolute; top: 1.835cqi; right: 1.835cqi; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.card .typeic { display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin-top: 1px; }   /* element above role */
.card .art .typeic svg { position: static; inset: auto; width: 9.633cqi; height: 9.633cqi; display: block; overflow: visible; }
.card .typeic path { stroke: #000; stroke-width: 2.4px; stroke-linejoin: round; paint-order: stroke; }
.plaque.pl-custom { color: #f2c35b; border-color: #b8862b; background: #14100ae6; }

/* ---------- leaderboards ---------- */

/* ---------- community art ---------- */
.card .artimg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.card .artimg.fit { overflow: hidden; }
.card .artimg.fit img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; }
.plaque.pl-ap { color: #1a1030; background: linear-gradient(90deg, #f2c35b, #fff3c4, #f2c35b); border: none; }
.agreeline { align-items: flex-start; gap: 8px; }
.agreeline span { line-height: 1.4; }
textarea { width: 100%; background: var(--panel2, #1c1726); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
.agreeline { flex-wrap: nowrap !important; }
.agreeline input { margin-top: 3px; flex: none; }

.pill.credits, .chip.credits { color: #9fe8b0; border-color: #3f8a55; cursor: pointer; }

/* ---------- foil tiers: Reverse Holo < Holo < Silver < Gold < Amber < Diamond ---------- */
.card.f-rev .art::after { opacity: .3;
  background: linear-gradient(115deg, transparent 25%, #cfd8ff 38%, #ffffff 46%, #c8f0ff 54%, transparent 70%); background-size: 250% 250%; }
.card.f-rev { box-shadow: 0 0 10px #cfd8ff44, 0 6px 18px #0008; }
.card.f-silver .art::after { opacity: .6;
  background: linear-gradient(115deg, transparent 18%, #8d97a8 30%, #ffffff 40%, #c9d2e0 48%, #eef3fa 56%, #8d97a8 64%, transparent 76%); background-size: 250% 250%; }
.card.f-silver { box-shadow: 0 0 16px #dfe6f2aa, 0 6px 18px #0008; }
.card.f-gold .art::after { opacity: .6;
  background: linear-gradient(115deg, transparent 18%, #b8862b 30%, #fff3c4 40%, #f2c35b 48%, #ffe08a 56%, #b8862b 64%, transparent 76%); background-size: 250% 250%; }
.card.f-gold { box-shadow: 0 0 18px #f2c35bbb, 0 6px 18px #0008; }
.card.f-amber .art::after { opacity: .65;
  background: linear-gradient(115deg, transparent 15%, #d9661c 28%, #ffb347 36%, #ffe08a 44%, #f0a830 52%, #ff7a1c 60%, transparent 76%); background-size: 250% 250%; animation-duration: 2.6s; }
.card.f-amber { box-shadow: 0 0 22px #ffb347cc, 0 0 40px #ff7a1c55, 0 6px 18px #0008; }
.card.f-diamond .art::after { opacity: .6;
  background: linear-gradient(115deg, transparent 10%, #ffffff 22%, #9ff4ff 30%, #ffffff 36%, #c9b8ff 44%, #ffffff 50%, #9fffe0 58%, #ffffff 66%, transparent 80%); background-size: 200% 200%; animation-duration: 2s; }
.card.f-diamond { box-shadow: 0 0 24px #bff6ffdd, 0 0 48px #c9b8ff88, 0 6px 18px #0008; }
.card.f-diamond .inner { border-color: #bff6ff; }

.plaque.pl-foil.fl-rev { background: linear-gradient(90deg, #cfd8ff, #ffffff, #c8f0ff); color: #1a1d30; }
.plaque.pl-foil.fl-holo { background: linear-gradient(90deg, #ff6ec7, #ffe66e, #6effa8, #6ec8ff); color: #1a1030; }
.plaque.pl-foil.fl-silver { background: linear-gradient(90deg, #8d97a8, #ffffff, #c9d2e0); color: #15181f; }
.plaque.pl-foil.fl-gold { background: linear-gradient(90deg, #b8862b, #fff3c4, #f2c35b); color: #241703; }
.plaque.pl-foil.fl-amber { background: linear-gradient(90deg, #d9661c, #ffb347, #ffe08a); color: #2a1204; }
.plaque.pl-foil.fl-diamond { background: linear-gradient(90deg, #9ff4ff, #ffffff, #c9b8ff, #ffffff, #9fffe0); color: #0d1a2a; box-shadow: 0 0 6px #bff6ff; }
.badge.foil.fl-rev { background: linear-gradient(90deg, #cfd8ff, #ffffff, #c8f0ff); color: #1a1d30; }
.badge.foil.fl-silver { background: linear-gradient(90deg, #8d97a8, #ffffff, #c9d2e0); color: #15181f; }
.badge.foil.fl-gold { background: linear-gradient(90deg, #b8862b, #fff3c4, #f2c35b); color: #241703; }
.badge.foil.fl-amber { background: linear-gradient(90deg, #d9661c, #ffb347, #ffe08a); color: #2a1204; }
.badge.foil.fl-diamond { background: linear-gradient(90deg, #9ff4ff, #ffffff, #c9b8ff, #ffffff); color: #0d1a2a; }
.flip.fg-gold .back { box-shadow: 0 0 26px #f2c35b, 0 0 50px #f2c35b88; }
.flip.fg-amber .back { box-shadow: 0 0 30px #ffb347, 0 0 60px #ff7a1c88; }
.flip.fg-diamond .back { box-shadow: 0 0 34px #bff6ff, 0 0 70px #c9b8ffaa; border-color: #bff6ff; }
.panel > p .plaque.pl-foil, .panel > p .plaque.pl-dark { font-size: 10px; }

/* Origins series plaque */
.plaque.pl-series.sr-origins { color: #f2c35b; border-color: #8a6a2e; background: #14100ae6; }

/* ---------- abuse reports ---------- */
.chatmsg .flag { opacity: .35; }
.chatmsg:hover .flag, .chatmsg .flag:focus { opacity: 1; }
.dm .flag { color: var(--muted, #9aa); text-decoration: none; }
.dm .flag:hover { color: #ff8a8a; }
.reportquote { margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid #ff8a8a; background: #0004; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
@media (hover: none) { .chatmsg .flag { opacity: .7; } }
.reportform label:not(.row) { display: grid; gap: 4px; }
.reportform select { width: 100%; }

/* ---------- sticky top: balances, tabs and the marquee stay put while the page scrolls ---------- */
.sticky-top { position: sticky; top: 0; z-index: 20; background: var(--bg2); }
.sticky-top header.top { position: static; }
html { scroll-padding-top: 140px; }

/* ---------- promotions bar ---------- */
.promobar { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; align-items: center; padding: 6px 16px;
  font-size: 13px; background: linear-gradient(90deg, #12301f, #1d4a2c, #12301f); border-bottom: 1px solid #3fae6a66; }
.promobar[hidden] { display: none; }
.promobar .promo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.promobar .promo.soon { opacity: .8; }
.promobar a { color: #9ff0b8; }
.promobar button.small { padding: 2px 10px; }
.promobar .promo-cta { font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
  .promobar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .promobar::-webkit-scrollbar { display: none; }
  .promobar .promo { flex-wrap: nowrap; flex: none; }
}

/* ---------- guests: unprotected-account bar, unminted plaque ---------- */
.guestbar { padding: 6px 16px; font-size: 13px; text-align: center; color: #ffd9d9;
  background: linear-gradient(90deg, #3a0d12, #5a1219, #3a0d12); border-bottom: 1px solid #ff4d5a88; }
.guestbar[hidden] { display: none; }
.guestbar a { color: #fff; font-weight: 700; white-space: nowrap; }
.plaque.pl-unminted { color: #ffb0b0; border-color: #ff6b6b99; background: #2a0a0ee6; }
.copyrow .small { line-height: 1.5; }
@media (max-width: 700px) { .guestbar { font-size: 12px; padding: 5px 10px; } }

/* ---------- inline idle battles, auto-advance, glossary popover ---------- */
.inlinebattle { margin-top: 14px; }
.inlinebattle .arena { margin: 6px 0; }
.battlebar { height: 6px; margin: 8px 0 4px; }
.autobar { margin-top: 10px; display: grid; gap: 4px; }
.autobar[hidden] { display: none; }
.autobar .bar { height: 6px; }
.autobar .bar i { transition: width .2s linear; }
.tip { opacity: .7; cursor: help; }
.termpop { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--gold2, #b8862b); border-radius: 12px; padding: 12px 36px 12px 14px;
  box-shadow: 0 10px 40px #000a; font-size: 14px; }
.termpop p { margin: 6px 0; }
.termpop .x { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--muted); font-size: 18px; padding: 2px 6px; }

/* ---------- tutorial coach ---------- */
.coach { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px));
  background: linear-gradient(180deg, #1d2a1a, var(--panel)); border: 1px solid #6fbf5a; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 10px 40px #000a; font-size: 14px; }
.coach p { margin: 6px 0 8px; line-height: 1.45; }
.coachpill { position: fixed; z-index: 60; left: 16px; bottom: 16px; }
@media (max-width: 700px) { .coach { left: 8px; right: 8px; width: auto; bottom: 8px; font-size: 13px; } }

/* ---------- static Arena playmat (a fixed design scaled as one piece: 1180x1160, or 1600x1010 "wide" when the screen has
   room beside the board, which puts the card info and the action buttons in a column on the left) ---------- */
main:has(#pmwrap) { max-width: 1900px; }
.playmat-wrap { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; }
.playmat { position: absolute; left: 0; top: 0; width: 1180px; height: 1160px; transform-origin: top left;
  display: grid; gap: 8px; padding: 10px; box-sizing: border-box; border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(900px 420px at 50% 50%, #2a2342, var(--panel));
  grid-template-columns: 1fr 210px; grid-template-rows: 78px 230px 128px 230px 78px 150px 1fr;
  grid-template-areas: "ohero oside" "oboard oside" "mid timer" "mboard mside" "mhero mside" "info actions" "hand hand"; }
.playmat.wide { width: 1600px; height: 1010px; grid-template-columns: 300px 1fr 210px; grid-template-rows: 78px 230px 128px 230px 78px 1fr;
  grid-template-areas: "info ohero oside" "info oboard oside" "info mid timer" "actions mboard mside" "actions mhero mside" "actions hand hand"; }
.pm-info { grid-area: info; display: flex; gap: 12px; align-items: stretch; min-height: 0; overflow: hidden; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; background: #0003; }
.pm-infocard { flex: 0 0 96px; }
.pm-infocard .card { width: 96px; }
.pm-infotext { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.pm-infohead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-infohead b { font-size: 16px; }
.pm-infohead button { margin-left: auto; }
.pm-infohint { align-self: center; }
.pm-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 5px; min-height: 0; }
.pm-actions button { padding: 3px 6px; font-size: 12.5px; line-height: 1.15; min-width: 0; overflow: hidden; }
.pm-actions button:disabled { opacity: .35; cursor: default; }
.playmat.wide .pm-info { flex-direction: column; }
.playmat.wide .pm-infocard { flex: none; align-self: center; }
.playmat.wide .pm-infocard .card { width: 130px; }
.playmat.wide .pm-actions { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 7px; align-content: start; }
.playmat.wide .pm-actions button { padding: 10px 12px; font-size: 15px; }
.handcard.selected .card, .unit.selected .card { outline: 3px solid var(--gold); outline-offset: 1px; }
.pm-ohero { grid-area: ohero; } .pm-oside { grid-area: oside; } .pm-oboard { grid-area: oboard; }
.pm-mid { grid-area: mid; } .pm-timer { grid-area: timer; } .pm-mboard { grid-area: mboard; }
.pm-mside { grid-area: mside; } .pm-mhero { grid-area: mhero; } .pm-hand { grid-area: hand; }
.playmat .hero { height: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 8px 14px; overflow: hidden; }
.playmat .hero .life { font-size: 30px; }
.playmat .board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; min-height: 0; height: 100%; }
.pm-slot { min-width: 0; position: relative; }
.playmat .board .pm-slot.empty { grid-column: auto; align-self: stretch; border: 1px dashed #ffffff1f; border-radius: 10px; }
/* A unit fits its board row (2026-11-06: the keyword row under a card hung into the middle strip): the keyword row keeps
   its height and the card takes what's left, sized by height (5:7) and never wider than its slot. */
.playmat .pm-slot { height: 100%; }
.playmat .unit { height: 100%; display: flex; flex-direction: column; align-items: center; }
.playmat .unitcard { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; max-width: 100%; }
.playmat .unit .card { height: 100%; width: auto; max-width: 100%; }
.playmat .unitkit { flex: none; }
.pm-mid { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.pm-timer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pm-timer .row { justify-content: center; flex-wrap: wrap; gap: 4px; }
.pm-clock { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pm-clock span { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.pm-clock.mine span { color: var(--gold); }
.pm-clock.low span { color: var(--bad); animation: pulse 1s infinite; }
.pm-clock small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pm-sidebox { height: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #0003;
  display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.pm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; }
.pm-hand { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; align-items: flex-start; padding: 4px 2px; }
.pm-hand .handcard { flex: 0 0 132px; }
.lobbyrow { padding: 4px 0; border-bottom: 1px solid #ffffff10; }
.pm-timer { overflow: hidden; }
.pm-timer .row button { padding: 4px 10px; font-size: 13px; }
.pm-sizer { height: 1px; pointer-events: none; }

/* ---------- Star Holo (7th tier) and Dark Holo (separate finish) ---------- */
.card.f-star .art::after { opacity: .85; mix-blend-mode: screen; z-index: 1;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 2.4px), radial-gradient(circle at 72% 14%, #fff7c2 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 40% 64%, #fff 0 1px, transparent 2.2px), radial-gradient(circle at 84% 58%, #c9e8ff 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 26% 86%, #fff 0 1.1px, transparent 2.3px), radial-gradient(circle at 60% 38%, #ffe9a8 0 1.5px, transparent 3px),
    linear-gradient(115deg, transparent 15%, #fff6 30%, #ffe08a66 40%, #9ff4ff66 50%, #ffffff55 60%, transparent 75%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%;
  animation: starshine 2.4s linear infinite, twinkle 1.6s ease-in-out infinite alternate; }
@keyframes starshine { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 0%; } to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 100%; } }
@keyframes twinkle { from { opacity: .55; } to { opacity: .95; } }
.card.f-star { box-shadow: 0 0 26px #fff3c4dd, 0 0 52px #9ff4ff88, 0 6px 18px #0008; }
.card.f-star .inner { border-color: #fff3c4; }
.plaque.pl-foil.fl-star { color: #241703; border: none; background: linear-gradient(90deg, #fff3c4, #ffffff, #9ff4ff, #fff3c4, #ffe08a);
  background-size: 300% 100%; animation: plaqueglint 2s linear infinite; box-shadow: 0 0 8px #fff3c4; }
@keyframes plaqueglint { from { background-position: 0 0; } to { background-position: 300% 0; } }
.badge.foil.fl-star { background: linear-gradient(90deg, #fff3c4, #ffffff, #9ff4ff, #fff3c4); background-size: 300% 100%; animation: plaqueglint 2s linear infinite; color: #241703; }
.flip.fg-star .back { box-shadow: 0 0 40px #fff3c4, 0 0 80px #9ff4ffaa; border-color: #fff3c4; }

.card.darkholo .art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(160deg, #1a0b2ecc, #05030acc 55%, #2a0b3dcc); }
.card.darkholo .art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .7;
  background: linear-gradient(115deg, transparent 25%, #7a2cff55 38%, #c86eff77 46%, #2b0b4f55 54%, transparent 70%); background-size: 240% 240%;
  animation: holo 3.6s linear infinite; }
.card.darkholo { box-shadow: 0 0 20px #7a2cffaa, 0 0 40px #2b0b4f, 0 6px 18px #0008; }
.card.darkholo .inner { border-color: #7a2cff; }
.plaque.pl-dark { color: #e3c8ff; background: linear-gradient(90deg, #05030a, #2b0b4f, #05030a); border: 1px solid #7a2cff; text-shadow: 0 0 6px #c86eff; }
.darktxt { color: #c86eff; font-weight: 700; text-shadow: 0 0 6px #7a2cff; }
.flip.fg-dark .back { box-shadow: 0 0 34px #7a2cff, 0 0 70px #2b0b4faa; border-color: #7a2cff; }

.expreq { margin-bottom: 10px; }
.expreq .chip { margin: 2px 2px 2px 0; }
.chip.okchip { border-color: var(--good); color: var(--good); }

/* ---------- profiles, avatars, flags, badges ---------- */
.avatar { width: var(--sz); height: var(--sz); border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--g) 55%, #000), #0b0912); border: 2px solid color-mix(in srgb, var(--g) 70%, #000); }
.avatar i { width: 66%; height: 66%; background: var(--g); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.profilehead { display: flex; gap: 14px; align-items: center; }
.avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.avpick { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; }
.avpick.on { border-color: var(--gold); }
.plaque.pl-flag { display: inline-flex; align-items: center; gap: 3px; color: #e8eaf0; font-size: 10px; margin-left: 4px; vertical-align: middle; }
.plaque.pl-flag img { width: 14px; height: 10.5px; border-radius: 1px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badgechip { padding: 4px 10px; border-radius: 99px; border: 1px solid #b8862b88; background: linear-gradient(180deg, #2a2210, #1a150a); font-size: 13px; }

/* Titans series: bronze and molten gold */
.plaque.pl-series.sr-titans { color: #ffb36a; border-color: #a8622a; background: #1f0f06e6; }
.card.sr-titans:not(.crowned) .inner { border-color: #6a3a1a; }
.panel.series-titans { border-color: #5a3418; background: linear-gradient(180deg, #24140a, var(--panel)); }
.plaque.pl-asc { color: #9ff0c0; border-color: #3aa86a; background: #06200fe6; }
.plaque.pl-big { color: #ffcf8a; border-color: #b8742a; background: #24140ae6; }

/* idle battle plays in the same fixed box as the line-up, so the page never jumps */
.battlearea { min-height: 520px; }
.battlearea #lineup[hidden] { display: none; }
.inlinebattle .arena { margin: 0; }
.inlinebattle .result { min-height: 48px; }

/* stage board: identical geometry idle and in battle */
.stageboard { gap: 10px; margin: 0; }
.stageboard h3 { margin: 6px 0; }
.hpbar.ghost { background: transparent; }
.slot.dim { opacity: .25; cursor: default; }
.battlearea { min-height: 0; }
.battlearea .result { height: 62px; overflow: hidden; margin: 6px 0 0; display: flex; flex-direction: column; justify-content: center; }
.battlearea .stagectl { height: 40px; }
.autobar { min-height: 30px; }
.battlearea .fighter .card { cursor: pointer; }
.inlinebattle .fighter .card { cursor: default; }

/* ---------- Time Warps ---------- */
.warps { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.warprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.warpbtn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; line-height: 1.25; }
.warpbtn b { font-size: 15px; }
.warpbtn span { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.warpbtn .ico { width: 12px; height: 12px; }

/* ---------- store ---------- */
.store { background: radial-gradient(1200px 300px at 50% -80px, #3a2b10, var(--panel) 70%); }
.storehero { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 1px solid #b8862b55; }
.storehero h2 { font-size: 26px; margin: 0 0 4px; }
.storehero p { margin: 0; max-width: 560px; }
.creditbox { display: grid; gap: 2px; justify-items: end; text-align: right; padding: 10px 14px; border: 1px solid #b8862b88; border-radius: 12px;
  background: linear-gradient(180deg, #2a2210, #17120a); min-width: 190px; }
.creditbox b { font-size: 22px; color: var(--gold); }
.storesec { margin-top: 22px; }
.storehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.storehead h3 { margin: 0; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.storehead h3 .ico { width: 20px; height: 20px; }
.store .skus { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.store .skus.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.store .sku { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--line); background: linear-gradient(180deg, #221c33, #17131f); transition: transform .12s, border-color .12s, box-shadow .12s; }
.store .sku:not(.locked):not(.owned):hover { transform: translateY(-2px); border-color: var(--gold2, #b8862b); box-shadow: 0 8px 24px #0008; }
.store .sku.locked, .store .sku.owned { opacity: .62; }
.store .sku .tag { position: absolute; top: -9px; right: 12px; background: var(--gold); color: #241703; font-weight: 800; font-size: 11px;
  border-radius: 99px; padding: 2px 9px; }
.skuhead { display: flex; gap: 12px; align-items: center; }
.skuart { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #4a3d6b, #1a1528); border: 1px solid #ffffff22; }
.skuart .ico { width: 30px; height: 30px; }
.skuart.gems { background: radial-gradient(circle at 35% 30%, #2a6f8f, #0f2233); }
.skuart.credits { background: radial-gradient(circle at 35% 30%, #5a4a1a, #1f190a); }
.skuart.boosts { background: radial-gradient(circle at 35% 30%, #1d6a3a, #0b2113); }
.skuart.featured { background: radial-gradient(circle at 35% 30%, #b8862b, #3a2708); }
.skuart.perks { background: radial-gradient(circle at 35% 30%, #5a3f8f, #1c1330); }
.skuart.series.sr-primal { background: radial-gradient(circle at 35% 30%, #c96f1c, #2a1606); }
.skuart.series.sr-tinker { background: radial-gradient(circle at 35% 30%, #4aa3a0, #10201f); }
.skuart.series.sr-multiverse { background: radial-gradient(circle at 35% 30%, #6a3fb0, #150c28); }
.skuart.series.sr-titans { background: radial-gradient(circle at 35% 30%, #a8622a, #24120a); }
.store .sku .nm { font-family: Cinzel, serif; font-weight: 700; font-size: 16px; line-height: 1.2; }
.skugrant { font-size: 13px; font-weight: 700; color: var(--text); display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 2px; }
.skugrant .ico { width: 14px; height: 14px; vertical-align: -2px; }
.skublurb { line-height: 1.4; }
.skufoot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; }
.skufoot button { min-width: 108px; font-weight: 800; }
.store .sku.feature { background: linear-gradient(135deg, #3a2a10, #1b1526 60%); border-color: #b8862b88; }
.store .sku.g-boosts { background: linear-gradient(180deg, #14281c, #121a17); border-color: #2f6b45; }
.booststate { font-size: 12px; font-weight: 700; color: var(--muted); }
.booststate.on { color: #7dff9f; }
.seriesrow { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0002; margin-bottom: 12px; }
.seriesrow .spread { margin-bottom: 10px; }
.seriesrow .plaque { font-size: 12px; padding: 3px 9px; }
.storelegal { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .creditbox { justify-items: start; text-align: left; width: 100%; }
  .store .skus, .store .skus.two { grid-template-columns: 1fr; }
  .warprow { gap: 4px; } .warpbtn b { font-size: 13px; }
}
@media (min-width: 1100px) { .store .skus.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .store .skus.five .skufoot button { min-width: 0; } }
.seriesgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 12px; }
.seriesgrid .seriesrow { margin-bottom: 0; }
@media (max-width: 700px) { .seriesgrid { grid-template-columns: 1fr; } }

/* collapsible Vault */
.vaulthead { cursor: pointer; user-select: none; }
.vault.closed h2 { margin: 0; }
.vault.closed { padding-top: 14px; padding-bottom: 14px; }
.vaultseries { border: 1px solid #6b5a2a66; border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: #0002; }
.vaultseries .vaulthead .plaque { font-size: 12px; padding: 3px 9px; }
.vaultseries.open .vault-sec { margin-top: 12px; }

/* Asunder series: split crimson and steel */
.plaque.pl-series.sr-asunder { color: #ff8fa0; border-color: #a83a4c; background: #1f0a10e6; }
.card.sr-asunder:not(.crowned) .inner { border-color: #5a2430; }
.panel.series-asunder { border-color: #5a2430; background: linear-gradient(135deg, #24101a 0 50%, #141a24 50% 100%); }
.skuart.series.sr-asunder { background: radial-gradient(circle at 35% 30%, #a83a4c, #200a10); }

/* ---------- ranks ---------- */
.ranks { background: radial-gradient(1200px 300px at 50% -80px, #3a2b10, var(--panel) 70%); }
.standbox b { font-size: 26px; line-height: 1.1; }
.standbox .standval { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.standbox .ico, .rankrow .ico, .podcard .ico { width: 15px; height: 15px; vertical-align: -2px; }
.bestrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.bestchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px;
  border: 1px solid #b8862b88; background: linear-gradient(180deg, #2a2210, #1a150a); color: var(--text); }
.bestchip b { color: var(--gold); }
.bestchip:hover { border-color: var(--gold); }
.rankgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 16px 0 12px; }
.rankgroups button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; font-weight: 700;
  border: 1px solid var(--line); background: linear-gradient(180deg, #221c33, #17131f); color: var(--muted); transition: transform .12s, border-color .12s; }
.rankgroups button .gi { font-size: 22px; line-height: 1.2; }
.rankgroups button:hover { transform: translateY(-2px); border-color: var(--gold2); }
.rankgroups button.on { color: var(--gold); border-color: var(--gold2); background: linear-gradient(180deg, #3a2a10, #1b1526); box-shadow: 0 6px 18px #0006; }
.rankboards { margin-bottom: 0; }
.rankboards button { display: inline-flex; align-items: center; gap: 6px; }
.rankboards .myrk { font-size: 11px; color: var(--gold); padding: 0 6px; border-radius: 99px; background: #b8862b2e; }
.rankhead { margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid #b8862b55; justify-content: space-between; }
.rankempty { text-align: center; padding: 40px 0; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; max-width: 760px; margin: 0 auto 16px; }
.podium.n1 { grid-template-columns: minmax(0, 300px); justify-content: center; }
.podium.n2 { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
.podcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 10px 14px;
  border-radius: 14px; border: 1px solid var(--pc); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 24%, #17131f), #17131f 75%); min-width: 0; }
.podcard.p1 { --pc: #f2c35b; order: 2; padding-top: 30px; padding-bottom: 22px; box-shadow: 0 0 28px #f2c35b33; }
.podcard.p2 { --pc: #b9c2d0; order: 1; }
.podcard.p3 { --pc: #c98a55; order: 3; }
.podium.n2 .podcard.p1 { order: 1; } .podium.n2 .podcard.p2 { order: 2; }
.podcard .medal { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 26px; filter: drop-shadow(0 2px 4px #000a); }
.podcard .who { max-width: 100%; overflow-wrap: anywhere; line-height: 1.5; }
.podcard .val { font-size: 18px; color: var(--pc); display: inline-flex; align-items: center; gap: 4px; }
.podcard.p1 .val { font-size: 22px; }
.podcard.me { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranklist { display: grid; gap: 6px; }
.rankrow { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: linear-gradient(90deg, #b8862b26 var(--w), #0000 var(--w)), var(--bg2); }
.rankrow:hover { border-color: #b8862b88; }
.rankrow .rk { color: var(--muted); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rankrow .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankrow .val { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.rankrow.me { border-color: var(--gold); background: linear-gradient(90deg, #f2c35b3d var(--w), #f2c35b14 var(--w)), var(--bg2); }
.rankgap { text-align: center; color: var(--muted); line-height: 1; }
.chip.youchip { border-color: var(--gold); color: var(--gold); }
@media (max-width: 700px) {
  .standbox { justify-items: start; text-align: left; width: 100%; }
  .rankgroups { grid-template-columns: repeat(3, 1fr); }
  .podium { gap: 6px; }
  .podcard { padding: 18px 4px 10px; gap: 4px; font-size: 13px; }
  .podcard.p1 { padding-top: 24px; padding-bottom: 16px; }
  .podcard .avatar { --sz: 46px !important; }
  .podcard.p1 .avatar { --sz: 58px !important; }
  .podcard .val { font-size: 14px; } .podcard.p1 .val { font-size: 16px; }
  .podcard .medal { font-size: 22px; top: -12px; }
  .rankrow { gap: 8px; padding: 6px 8px; grid-template-columns: 26px 34px minmax(0, 1fr) auto; }
}
.standbox b.muted { color: var(--muted); font-size: 20px; }

/* ---------- social ---------- */
.social { background: radial-gradient(1200px 300px at 50% -80px, #3a2b10, var(--panel) 70%); }
.tagbox b { font-size: 20px; }
.socnav { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.socnav button { position: relative; }
.socbadge { background: var(--bad); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 800; padding: 1px 7px; line-height: 1.5; }
.socnav .socbadge { position: absolute; top: 6px; right: 8px; }
.soclayout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; margin-top: 18px; align-items: start; }
.socmain { min-width: 0; }
.socmain #tradebox > .panel:first-child { margin-top: 18px; }
.socmain .chatlog { max-height: 520px; }
.onlinepanel { padding: 14px; }
.onlinehead { display: flex; justify-content: space-between; align-items: center; }
.onlinehead h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.onlinetoggle { display: none; }
.onlinelist { display: grid; gap: 2px; max-height: 520px; overflow-y: auto; margin-top: 10px; }
.onlinelist p { margin: 6px 6px 0; }
.onrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border-radius: 8px; background: none; border: 1px solid transparent;
  color: var(--text); text-align: left; font: inherit; }
button.onrow { cursor: pointer; }
button.onrow:hover { background: #ffffff0d; border-color: var(--line); }
.onrow.you { background: #f2c35b0f; }
.onrow .chip { margin-left: auto; }
.onname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.onav { position: relative; display: inline-flex; flex: none; }
.onav .online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--panel); box-shadow: none; }
.onfriend { color: var(--gold); }
.onvis { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); gap: 8px; align-items: center; cursor: pointer; }
.onvis + p { margin: 6px 0 0; }
.chatmsg { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 10px; }
.chatmsg:hover { background: #ffffff08; }
.chatmsg.mine, .chatmsg.mine:hover { background: #f2c35b0f; }
.chatbody { min-width: 0; flex: 1; }
.chathead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chattext { word-break: break-word; line-height: 1.4; }
.chatacts { display: flex; gap: 2px; flex: none; }
.chatmsg .chatacts .x { position: static; }
.friendlist { display: grid; gap: 6px; margin-bottom: 12px; }
.friendrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.friendrow.on { border-color: #2f6b45; }
.friendrow.req { border-color: #b8862b88; background: linear-gradient(180deg, #2a2210, #17120a); }
.fwho { display: grid; gap: 1px; min-width: 0; flex: 1; }
.facts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.threads { display: grid; gap: 6px; }
.threads .thread { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.thbody { display: grid; min-width: 0; flex: 1; gap: 2px; }
.thbody .spread { flex-wrap: nowrap; }
.thlast { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.unread b { color: var(--gold); }
@media (max-width: 900px) {
  .soclayout { grid-template-columns: minmax(0, 1fr); }
  .onlinepanel { order: -1; }
  .onlinehead { cursor: pointer; }
  .onlinetoggle { display: inline; }
  .onlinetoggle::after { content: "Show ▾"; }
  .onlinepanel.open .onlinetoggle::after { content: "Hide ▴"; }
  .onlinepanel:not(.open) .onlinebody { display: none; }
  .onlinelist { max-height: 260px; }
}
@media (max-width: 700px) {
  .tagbox { justify-items: start; text-align: left; width: 100%; }
  .socnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friendrow { flex-wrap: wrap; }
  .facts { width: 100%; justify-content: flex-start; }
}
.onrow { box-sizing: border-box; min-width: 0; }
.onlinelist { grid-template-columns: minmax(0, 1fr); }
.socmain .dms > .panel { margin-top: 0; }

/* Discord link code */
.linkcode { font: 700 30px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 6px; color: var(--gold); text-align: center; padding: 12px;
  border: 1px dashed #b8862b88; border-radius: 12px; background: #0004; user-select: all; }
footer a[hidden] { display: none; }
footer a[data-discord] { color: #8ea1ff; }
footer a[data-reddit] { color: #ff8b60; }

/* ---------- decks ---------- */
.decks { background: radial-gradient(1200px 300px at 50% -80px, #3a2b10, var(--panel) 70%); }
.dkbox b { font-size: 20px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckslots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.dkslot { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; min-height: 108px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #221c33, #17131f); color: var(--text); text-align: left; font: inherit; min-width: 0;
  transition: transform .12s, border-color .12s; }
button.dkslot { cursor: pointer; }
button.dkslot:hover { transform: translateY(-2px); border-color: var(--gold2); }
.dkslot.on { border-color: var(--gold); background: linear-gradient(180deg, #3a2a10, #1b1526); box-shadow: 0 6px 18px #0006; }
.dkslot.active .dkslotname { color: var(--gold); }
.dkslot.empty { align-items: center; justify-content: center; text-align: center; border-style: dashed; color: var(--muted); }
.dkslot.off { opacity: .45; } .dkslot.locked { opacity: .75; }
.dkplus { font-size: 24px; line-height: 1; }
.dkslotname { font-family: Cinzel, serif; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkdot { color: var(--gold); font-size: 10px; vertical-align: middle; }
.dkpips { display: flex; gap: 4px; flex-wrap: wrap; min-height: 22px; }
.dkpips .echip { font-size: 11px; padding: 1px 6px; } .dkpips .echip svg { width: 11px; height: 11px; }
.chip.dkactive { border-color: var(--gold); color: var(--gold); }
.chip.dkwarn { border-color: #c98a2b; color: #ffcf8a; }
.dkwarntxt { color: #ffcf8a; }
.decklayout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; margin-top: 18px; align-items: start; }
.decklib { min-width: 0; }
.dkfilters { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dkfilters .filters button { display: inline-flex; align-items: center; gap: 6px; }
.dkfilters .myrk { font-size: 11px; color: var(--gold); padding: 0 6px; border-radius: 99px; background: #b8862b2e; }
.dkfind { gap: 10px; align-items: center; flex-wrap: wrap; }
.dkfind #dkq { flex: 1; min-width: 150px; max-width: 280px; }
.dkelrow button.echip { padding: 5px 9px; background: #0006; cursor: pointer; }
.dkelrow button.echip.on { box-shadow: 0 0 0 2px currentColor; }
.dkelrow svg { width: 16px; height: 16px; }
.dkall { gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.dkcards { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.dktile .card { cursor: pointer; }
.badge.dkno { background: #2b2540; color: #c9c0e0; border: 1px solid #5a4f7a; font-size: 9px; letter-spacing: .04em; }
.dkmore { text-align: center; margin-top: 14px; }
.deckpanel { position: sticky; top: var(--stickyh, 130px); max-height: calc(100vh - var(--stickyh, 130px) - 16px); overflow-y: auto; padding: 16px; }
.dknameinput { width: 100%; box-sizing: border-box; font-family: Cinzel, serif; font-size: 18px; font-weight: 700; color: var(--gold); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 6px; padding: 4px 6px; }
.dknameinput:focus { border-color: var(--gold2); outline: none; }
.dkmeter { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.dkmeter .bar { position: relative; flex: 1; height: 10px; border-radius: 99px; background: #0006; border: 1px solid var(--line); overflow: hidden; }
.dkmeter .bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8862b, #f2c35b); }
.dkmeter .bar i.ok { background: linear-gradient(90deg, #2f9e46, #5be38c); }
.dkmeter .bar u { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff9; }
.dkmeter b { font-size: 18px; }
.dkstate { margin: 2px 0 10px; }
.dkactions { gap: 8px; align-items: center; }
.dkactions button { flex: 1; }
.dktools { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dkchips { gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.deckpanel h4 { margin: 14px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.deckpanel h4 .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dkenergy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dkel { justify-content: space-between; border-radius: 8px; padding: 3px 6px; }
.dkel b { min-width: 18px; text-align: center; color: var(--text); }
.dkel button, .dkqty button { padding: 0 8px; line-height: 1.6; }
.dkrow { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; }
.dkrow:hover { background: #ffffff0a; }
.dkrow.miss { background: #c98a2b14; }
.dkcost { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #0006;
  border: 1px solid var(--line); flex: none; }
.dkname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-weight: 600; }
.dkname:hover { text-decoration: underline; }
.dkneed { font-size: 11px; color: #ffcf8a; white-space: nowrap; }
.dkqty { display: flex; align-items: center; gap: 6px; flex: none; }
.dkqty b { min-width: 14px; text-align: center; }
.deckpick { max-width: 190px; padding: 5px 8px; font-size: 13px; }
@media (max-width: 1000px) {
  .decklayout { grid-template-columns: minmax(0, 1fr); }
  .deckpanel { position: static; max-height: none; order: -1; }
  .deckslots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dklist { max-height: 300px; overflow-y: auto; }
}
@media (max-width: 700px) { .dkbox { justify-items: start; text-align: left; width: 100%; } .dkcards { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }
.decklayout > .panel { margin-top: 0; }
select.deckpick { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }

/* game clock in the wallet bar */
.pill.clock { cursor: help; font-variant-numeric: tabular-nums; gap: 5px; }
.pill.clock small { margin-left: 1px; }
@media (max-width: 700px) { .pill.clock small { display: inline; font-size: 10px; } }

/* Astro series: night-sky indigo and starlight */
.plaque.pl-series.sr-astro { color: #cfd8ff; border-color: #5b6be0; background: #0c0f2ce6; }
.card.sr-astro:not(.crowned) .inner { border-color: #2f3a8a; }
.panel.series-astro { border-color: #2f3a8a; background: radial-gradient(600px 200px at 80% -40px, #2a2f7a66, transparent 70%), linear-gradient(180deg, #121636, var(--panel)); }
.skuart.series.sr-astro { background: radial-gradient(circle at 35% 30%, #5b6be0, #0b0d2a); }

/* Holidays series: holly green, ribbon red and gold */
.plaque.pl-series.sr-holidays { color: #ffe3a6; border-color: #c0392b; background: #0f2a17e6; }
.card.sr-holidays:not(.crowned) .inner { border-color: #7a2a24; }
.panel.series-holidays { border-color: #7a2a24; background: linear-gradient(135deg, #2a1012 0 34%, #11281a 34% 67%, #2a1012 67% 100%); }
.skuart.series.sr-holidays { background: radial-gradient(circle at 35% 30%, #c0392b, #0f2a17); }
.card .badge.sealed { background: #10243a; color: #cfe6ff; border: 1px solid #4d7fb8; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
.card.unowned:has(.badge.sealed) { filter: grayscale(.6) brightness(.6); }
.sealnote { margin: 0 0 12px; }

/* card info: actions */
.cardacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #0003; }
.cardact { display: inline-flex; align-items: center; gap: 6px; }
.cardact .ico { width: 14px; height: 14px; }
.copyacts { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.copyacts .ico { width: 12px; height: 12px; vertical-align: -2px; }
/* featured bundles: two to a row, so new bundles sit under the Starter Bundle and Founder's Crown */
@media (min-width: 701px) { .store .skus.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* end of an Arena match: everything fits the playmat's fixed middle strip */
.pm-over { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.playmat .pm-over .result { font-size: 28px; line-height: 1.1; margin: 0; }
.pm-overline { max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-overbtns { justify-content: center; gap: 8px; margin: 0; flex-wrap: nowrap; }
.pm-overbtns button { padding: 6px 14px; }

/* ---------- deck auto-builder ---------- */
.dkauto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.dkautomain { grid-column: 1 / -1; padding: 8px 12px; font-weight: 700; border-color: #b8862b; color: var(--gold);
  background: linear-gradient(180deg, #3a2b10, #241a08); }
.dkautomain:hover { border-color: var(--gold); }
.dkb h2 { margin: 0 0 4px; }
.dkb h4 { margin: 18px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dkb h4 .small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.dkbels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dkbel { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #0005; border: 1px solid var(--line); cursor: pointer; }
.dkbel svg { width: 22px; height: 22px; }
.dkbel b { color: var(--text); font-size: 14px; }
.dkbel .small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.dkbel.none { opacity: .5; }
.dkbel.on { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; background: #ffffff0d; }
.dkbel.best { color: var(--gold); } .dkbstar { font-size: 20px; line-height: 22px; }
.dkbel.el-ember { color: #ffb347; } .dkbel.el-tide { color: #7fd8ff; } .dkbel.el-verdant { color: #a6f08a; }
.dkbel.el-storm { color: #fff27a; } .dkbel.el-shadow { color: #d6a8ff; } .dkbel.el-radiant { color: #fff6d6; }
.dkbpresets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dkbpresets button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 9px 12px; border-radius: 12px; }
.dkbpresets button.on { border-color: var(--gold); } .dkbpresets button.on b { color: var(--gold); }
.dkbbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; background: #0006; }
.dkbbar i { display: block; height: 100%; min-width: 2px; }
.dkbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 26px; }
.dkbrow { display: grid; grid-template-columns: 124px minmax(0, 1fr) 70px; gap: 10px; align-items: center; min-height: 30px; }
.dkbrow input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--gold); height: 22px; cursor: pointer; }
.dkbrow input[type=range]:focus { outline: none; }
.dkbrow input[type=range]:focus-visible { outline: 2px solid var(--gold2); border-radius: 6px; }
.dkbrow > b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.dkblabel { display: flex; align-items: baseline; column-gap: 6px; flex-wrap: wrap; font-weight: 600; font-size: 14px; line-height: 1.15; }
.dkblabel i { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.dkblabel .small { display: block; width: 100%; font-weight: 400; }
.dkbmore { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.dkbhint { margin: 8px 0 0; min-height: 1.4em; }
.dkbplan { margin-top: 16px; }
.dkbactions { gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.dkbactions .primary { flex: 1; min-width: 180px; padding: 11px 14px; }
@media (max-width: 700px) {
  .dkbgrid { grid-template-columns: minmax(0, 1fr); }
  .dkbels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dkbel.best { grid-column: 1 / -1; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 8px; }
  .dkbpresets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dkbrow { grid-template-columns: 124px minmax(0, 1fr) 62px; gap: 8px; }
}
/* a link that looks like the primary button (checkout from the embedded game) */
a.btnlink { display: inline-block; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; color: #2a1c05;
  background: linear-gradient(180deg, #f6d27a, #c98f2c); border: 1px solid #f2c35b; }

/* ---------- news ---------- */
.news { background: radial-gradient(1200px 300px at 50% -80px, #2b2140, var(--panel) 70%); }
.newslist { display: grid; gap: 14px; margin-top: 16px; }
.newspost { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #0004; }
.newspost.open { border-color: #b8862b88; box-shadow: 0 0 0 1px #b8862b33 inset; }
.newspost h3 { margin: 6px 0 4px; font-size: 20px; }
.newshead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.newstag { border-color: #b8862b; color: var(--gold); }
.newssum { margin: 0 0 8px; color: var(--muted); }
.newspost ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.newspost li { line-height: 1.5; }
.newsreact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.newsreact .react { padding: 4px 12px; border-radius: 99px; font-size: 15px; background: #0005; }
.newsreact .react b { font-size: 13px; margin-left: 2px; }
.newsreact .react:disabled { opacity: 1; cursor: default; }
.newsreact .react.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #b8862b22; }
.pm-clock .pm-turn { margin-top: 4px; font-weight: 700; color: var(--text); }
.pm-clock .pm-turn.late { color: #ffcf8a; }
/* folding store sections (same header style as the Collection's Vault) */
.storesec.closed { margin-top: 10px; }
.storesec .storehead.vaulthead { padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; }
.storesec.closed .storehead.vaulthead { margin-bottom: 0; background: #0003; border: 1px solid var(--line); }
.storesec .storehead.vaulthead:hover, .seriesrow .vaulthead:hover { background: #ffffff0a; }
.storehead .fold, .seriesrow .fold { display: inline-block; width: 14px; color: var(--muted); }
.seriesrow.closed .spread { margin-bottom: 0; }
.burnlist { gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.burnlist .chip.burnrare { border-color: var(--bad); color: #ffb3ad; font-weight: 700; }
/* collection: one folding block per series (same look as the Vault) */
.closedgame { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: #07050cee; }
.closedgame .panel { max-width: 460px; text-align: center; }
.rfmodes { margin-bottom: 10px; }
.rfctl { gap: 8px; margin-bottom: 8px; }
.rfctl input[type=search] { flex: 1 1 180px; min-width: 0; }
.rfctl label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.rfpick { margin-bottom: 10px; align-items: center; }
.lvbtn small.lvshort { display: block; font-size: 11.5px; font-weight: 600; opacity: .9; margin-top: 2px; }
.lpcur { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.lpcur .card { width: 110px; }
.lpctl { gap: 10px; align-items: center; margin-bottom: 4px; }
.lpctl label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.lpctl input[type=search] { flex: 1 1 200px; min-width: 0; }
.collseries { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; background: #0002; }
.collseries .vaulthead .plaque { font-size: 12px; padding: 3px 9px; }
.collseries.open > .cards { margin-top: 12px; }
.collseries .fold { display: inline-block; width: 14px; color: var(--muted); }
.collseries .vaulthead:hover { background: #ffffff08; border-radius: 8px; }
.collfind { gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.collfind #collq { flex: 1; min-width: 160px; max-width: 300px; }
.collseries .collhead { font-family: Cinzel, serif; font-weight: 700; font-size: 15px; }
.collseries .echip svg { width: 14px; height: 14px; }
/* expeditions: party line, picker controls and the power badge */
.exparty { gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.exparty .chip { cursor: pointer; }
.expctl { gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.expctl label { display: inline-flex; gap: 6px; align-items: center; }
.badge.pow { background: #1d2a44; color: #9fd0ff; border: 1px solid #3f6aa8; font-size: 10px; }
/* your packs: editions, buy rows, bulk-open summary */
.edrow { gap: 4px; flex-wrap: wrap; min-height: 22px; }
.edchip { font-size: 11px; }
.glosssec { padding: 12px 18px; }
.panel.glosssec + .panel.glosssec { margin-top: 10px; }
.glosshead { cursor: pointer; user-select: none; margin: 0; }
.glosshead:hover { color: var(--gold, #f2c35b); }
.glosssec .glosshead + * { margin-top: 10px; }
/* Invite friends: the code, the full-screen QR, the milestones; and the confirm-your-email bar. */
.invitehero { text-align: center; }
.invitecode { display: grid; gap: 2px; justify-items: center; margin: 14px auto; padding: 12px 22px; border: 1px dashed var(--gold2); border-radius: 12px; width: fit-content; }
.invitecode b { font: 800 32px/1.1 Cinzel, serif; letter-spacing: .14em; color: var(--gold); }
.milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.milestones > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.milestones > div.got { border-color: #3aa86a; }
.chip.apdone { border-color: #3aa86a; color: #9ff0c0; }
.qrfull { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #0b0910f2; padding: 16px; }
.qrfull .x { position: absolute; top: 14px; right: 18px; font-size: 26px; background: none; border: none; color: #fff; cursor: pointer; }
.qrcard { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px; border-radius: 18px; background: #fff; color: #1a1426; width: min(92vw, 460px); }
.qrcard b { font: 800 20px/1.2 Cinzel, serif; color: #8a6418; }
.qrcard img { width: 100%; height: auto; image-rendering: pixelated; }
.qrcard .qrcode { font: 800 28px/1 Cinzel, serif; letter-spacing: .14em; }
.confirmbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--gold2); background: #f2c35b14; }
.confirmbar span { flex: 1; min-width: 200px; }
/* The inbox (✉️ in the wallet bar). */
.pill.mail { cursor: pointer; position: relative; }
.pill.mail.has { border-color: var(--gold); }
.pill.mail .mailn { margin-left: 4px; background: var(--bad); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; }
.mailmsg h3 { margin: 4px 0 6px; }
.mailmsg.gift { border-color: var(--gold2); }
.mailbody { white-space: pre-wrap; margin: 0 0 8px; }
.mailgift { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px;
  border-radius: 8px; background: #f2c35b14; border: 1px solid #b8862b66; font-weight: 600; }
.mq-notice { color: var(--gold); font-weight: 700; }
.mq-ban { color: #ff9a9a; font-weight: 700; }
.glosslist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.glosslist li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.glossplaques { position: static; display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-right: 6px; }
.glossplaques .plaque { font-size: 11px; }
.edpick { gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0 10px; }
.buyrow { gap: 6px; flex-wrap: wrap; }
.bulklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; max-height: 320px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #0003; }
.bulklist a { text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.newchip { font-size: 10px; padding: 0 6px; border-color: var(--gold); color: var(--gold); }
/* profile Stats tab */
.proftabs { margin: 12px 0 4px; }
.pstatsall .psec { margin-top: 14px; }
.pstatsall h3 { margin: 0 0 8px; }
.pstatsall h4 { margin: 12px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stats.pstats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pbars { display: grid; gap: 6px; margin-top: 10px; }
.pbar { display: grid; grid-template-columns: 110px 1fr 130px; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.pbar .bar { margin: 0; }
.plimited { gap: 6px; flex-wrap: wrap; }
.plimited .chip { text-decoration: none; }
.cards.pbest { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 520px) { .pbar { grid-template-columns: 80px 1fr; } .pbar > span:last-child { grid-column: 1 / -1; text-align: right; margin-top: -4px; } }
/* deck builder: rarity / cost / series filters, sort and match count */
.dksel { gap: 8px; flex-wrap: wrap; align-items: center; }
.dksel .dksort { display: inline-flex; gap: 6px; align-items: center; }
.dkcount { margin-bottom: 10px; align-items: center; min-height: 28px; }
/* collection sort */
.collsort { display: inline-flex; gap: 6px; align-items: center; }
.card .badge.copies { background: #1d2a44; color: #cfe3ff; border: 1px solid #3f6aa8; }
/* profile Stats: packs ripped by type */
.ripgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ripseries { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; background: #0002; }
.ripseries .plaque { font-size: 10px; }
.riprow { font-size: 13px; }
/* achievements: folding groups */
.achgrid { align-items: start; }
.achgroup .achhead { cursor: pointer; display: grid; gap: 2px; margin-bottom: 8px; user-select: none; }
.achgroup .achhead h3 { margin: 0; }
.achgroup.closed { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #0002; }
.achgroup.closed .achhead { margin-bottom: 0; }
/* Royal Treasury: the Crown Purse, Royal Decrees and Coronation Chests */
.treasury .purse { font-size: 14px; }
.decrees { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.decree { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; background: #0002; }
.decree .bar { margin: 2px 0; }
.decree button { justify-self: start; }
.chestline { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid #f2c35b55;
  border-radius: 10px; padding: 10px 12px; background: linear-gradient(90deg, #3a0d1433, #f2c35b14); }
.chestline > div { flex: 1; min-width: 200px; }
/* Crown-spending buttons (Coronation Chests, Royal Decrees): purple to blue, so the gold crown stands out */
button.crownbtn { background: linear-gradient(135deg, #6d2fd6, #2f5fe0); border-color: #8f7dff; color: #fff; font-weight: 700;
  box-shadow: 0 2px 10px #4b3bd855; }
button.crownbtn:hover:not(:disabled) { background: linear-gradient(135deg, #8247ec, #4275f2); border-color: #b3a6ff; }
button.crownbtn.alt { background: linear-gradient(135deg, #3d1f78, #1f3a8a); box-shadow: none; }
button.crownbtn.alt:hover:not(:disabled) { background: linear-gradient(135deg, #5129a0, #2a4cb0); }
/* 2026-10-25 series: HallowEve 2026 (violet and lantern orange), HallowDay 2026 (pumpkin and night), Mythos Legendaria (gold on deep blue) */
.plaque.pl-series.sr-hallow_eve { color: #ffc07a; border-color: #8e44ff; background: #1a0b2be6; }
.card.sr-hallow_eve:not(.crowned) .inner { border-color: #5a2a8a; }
.panel.series-hallow_eve { border-color: #5a2a8a; background: linear-gradient(160deg, #1d0c30, #120a18 60%, #2a1406); }
.skuart.series.sr-hallow_eve { background: radial-gradient(circle at 35% 30%, #8e44ff, #1a0b2b); }
.plaque.pl-series.sr-hallow_day { color: #ffd0a0; border-color: #ff7a1a; background: #1a0d05e6; }
.card.sr-hallow_day:not(.crowned) .inner { border-color: #8a3f10; }
.panel.series-hallow_day { border-color: #8a3f10; background: linear-gradient(160deg, #2a1205, #0e0a10 60%, #1a0d05); }
.skuart.series.sr-hallow_day { background: radial-gradient(circle at 35% 30%, #ff7a1a, #1a0d05); }
.plaque.pl-series.sr-mythos { color: #f6dc8c; border-color: #c9a227; background: #0d1530e6; }
.card.sr-mythos:not(.crowned) .inner { border-color: #8a7020; }
.panel.series-mythos { border-color: #8a7020; background: linear-gradient(160deg, #0d1736, #121022 60%, #1f1a0c); }
.skuart.series.sr-mythos { background: radial-gradient(circle at 35% 30%, #c9a227, #0d1530); }
/* Foil Reforge */
.rftiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.rftier { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #0002; }
.rfgrid { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.rfgrid > .panel:first-child { position: sticky; top: var(--stickyh, 130px); }
@media (max-width: 860px) { .rfgrid { grid-template-columns: 1fr; } .rfgrid > .panel:first-child { position: static; } }
.rfsel { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.rfinfo h3 { margin: 0 0 6px; }
.rfinfo p { margin: 6px 0; }
.stats.rfstats { margin: 8px 0; }
.rfsure { display: block; margin: 8px 0; padding: 8px 10px; line-height: 1.5; border: 1px solid var(--line, #3a3150); border-radius: 8px; cursor: pointer; }
.rfsure input { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: #f2c35b; }
.rfsure .small { display: block; }
.cards.rfcards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.rfresult { display: flex; justify-content: center; margin: 8px 0; }
.rfresult .card { width: 180px; }
@media (max-width: 560px) { .rfsel { grid-template-columns: 1fr; } .rfsel > div:first-child { max-width: 200px; } }
/* the guaranteed card's own odds under each pack */
.oddsg { margin: -4px 0 6px; }
/* provably fair commitment and pull notes */
.fairline code, .fairnote code { font-size: 11px; color: var(--gold); }
.fairnote { margin: 2px 0 8px; text-align: center; }
.fairhash { word-break: break-all; }
.fairnote .fairhash, .fairline .fairhash { display: inline; }
.faircopy { padding: 1px 8px; font-size: 11px; vertical-align: baseline; }
/* the provably fair seed card (Packs tab, Foil Reforge) */
.faircard { display: grid; gap: 4px; max-width: 520px; margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0003; }
.fairrow { gap: 8px; align-items: center; flex-wrap: wrap; }
.fairbtns { display: inline-flex; gap: 4px; }
.fairtoggle { padding: 1px 8px; font-size: 11px; }
/* Sell tab: per-card value line and buttons under each tile */
.selltile .sellval { margin-top: 6px; text-align: center; }
.selltile .sellbtns { gap: 6px; margin-top: 6px; justify-content: center; flex-wrap: wrap; }
/* Print Studio */
.studiogrid { align-items: start; }
.studiopick { gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.studiolist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.studiochip { display: inline-flex; align-items: center; gap: 4px; }
.studiochip button { padding: 0 6px; font-size: 11px; }
.studiolayouts { gap: 8px; }
.studiolayout { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.studiolayout.on { border-color: var(--gold); }
/* foil shimmer: every finish's band sweeps back and forth (ping-pong) inside a gradient that never repeats.
   Sliding it one way past the end of the gradient showed the next copy's squared-off edge. This comes last
   so it wins over each tier's own background shorthand (which would turn repeating back on). */
.card.foil .art::after, .card.f-star .art::after, .card.darkholo .art::after {
  background-repeat: no-repeat; animation-direction: alternate; animation-timing-function: ease-in-out; }
.card.f-star .art::after { animation-direction: alternate, alternate; animation-timing-function: ease-in-out, ease-in-out; }
@media (prefers-reduced-motion: reduce) { .card.foil .art::after, .card.f-star .art::after, .card.darkholo .art::after { animation: none; background-position: 50% 50%; } }
/* The Crown's price list (Sell tab) */
.pricechart{overflow-x:auto;margin-top:8px}.pricechart table{border-collapse:collapse;font-size:13px;white-space:nowrap}
.pricechart th,.pricechart td{padding:4px 8px;border-bottom:1px solid rgba(127,127,127,.25)}.pricechart td{text-align:right}
.pricechart tbody th{text-align:left;font-weight:600}
/* The Sunken Court */
.plaque.pl-series.sr-crown_champions { color: #ffd36a; border-color: #c9a227; background: #1f0f2ee6; }
.plaque.pl-series.sr-sunken { color: #9fe7ff; border-color: #1f8fa8; background: #04182ae6; }
.card.sr-sunken:not(.crowned) .inner { border-color: #1a6f80; }
.panel.series-sunken { border-color: #1a6f80; background: linear-gradient(160deg, #04203a, #061224 60%, #0a2a2e); }
.skuart.series.sr-sunken { background: radial-gradient(circle at 35% 30%, #1f8fa8, #03101f); }

/* Battle lines (Decks tab): one folding block per saved line, its five lanes like the Battle tab's. */
.lines .lnblock { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.lines .lnblock h3 { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lnlanes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
@media (max-width: 700px) { .lnlanes { gap: 5px; } }
.linepick select { width: auto; margin-left: 6px; }
.dmg.venom { color: #7dff6b; font-size: 14px; }

/* A card window's copies: one line each; a copy's number opens its options (app.js copiesHTML). */
.copylist.scroll { max-height: 280px; overflow-y: auto; padding-right: 4px; }
.copyitem { border-bottom: 1px solid #ffffff10; }
.copyhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: 4px 2px;
  text-align: left; cursor: pointer; color: inherit; font: inherit; }
.copyhead:hover { background: #ffffff0a; }
.copyhead .plaque { font-size: 11px; }
.copyhead .fold { margin-left: auto; opacity: .6; }
.copyitem.open .copyhead .fold { transform: rotate(90deg); }
.copymenu { display: none; padding: 2px 4px 8px; }
.copyitem.open .copymenu { display: block; }
.copymenu .copyacts { margin: 6px 0 0; }
.prunectl { flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 6px 0; }
.prunectl input[type=number] { display: inline-block; margin-left: 4px; }
.prunetop { max-height: 240px; overflow-y: auto; gap: 3px; max-width: 560px; }
.prunekept table { width: 100%; border-collapse: collapse; }
.prunekept td { padding: 3px 4px; border-bottom: 1px solid #ffffff10; }
.apitiers { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.apiopts { display: grid; gap: 6px; margin-top: 8px; } .apiopts .spread { align-items: center; gap: 8px; flex-wrap: nowrap; }
.apiopts .spread button { white-space: nowrap; flex: none; }
.apiauto { gap: 8px; align-items: center; margin: 6px 0 10px; }
.chip.title-founder { color: #241703; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.chip.title-influencer { color: #fff; background: linear-gradient(90deg, #b5458f, #6a4fd6); border-color: #b5458f; font-weight: 700; }
.titlepick.on { outline: 2px solid var(--gold); }
.titlelocked { display: grid; gap: 6px; margin-top: 6px; } .titlelocked div { display: grid; gap: 1px; }
.rotrow { gap: 8px; align-items: center; flex-wrap: wrap; }
.rotrow button.rotnew:not(.primary) { border-color: var(--gold2); }
.rotrow button.rotdone { opacity: .75; }
.chip.rotpack { border-color: var(--gold2); color: var(--gold); }
.rotreq { border: 1px solid var(--gold2); border-radius: 12px; padding: 10px 12px; background: #f2c35b0d; }

/* Quests: Claim all (2026-11-10) */
.claimall { margin-bottom: 14px; }
/* Title colours (app/titles.py STYLES, 2026-11-10). Later than the .title-* rules, so a colour wins. */
.chip.tstyle { font-weight: 700; border-color: transparent; }
.chip.tstyle-ivory { background: #f4ecd8; color: #2a2112; border-color: #f4ecd8; }
.chip.tstyle-crimson { background: #b3223a; color: #fff; border-color: #b3223a; }
.chip.tstyle-sapphire { background: #2453c9; color: #fff; border-color: #2453c9; }
.chip.tstyle-emerald { background: #17895a; color: #fff; border-color: #17895a; }
.chip.tstyle-ember { background: linear-gradient(90deg, #e2391b, #ff9f2e); color: #fff; }
.chip.tstyle-tide { background: linear-gradient(90deg, #1f5fe0, #23c2c7); color: #fff; }
.chip.tstyle-verdant { background: linear-gradient(90deg, #1d7d3c, #9ccf3a); color: #fff; }
.chip.tstyle-storm { background: linear-gradient(90deg, #6a45ff, #38b8ff); color: #fff; }
.chip.tstyle-shadow { background: linear-gradient(90deg, #2a1440, #7b3fbf); color: #efe2ff; }
.chip.tstyle-radiant { background: linear-gradient(90deg, #f7c948, #fff3c4); color: #3a2a05; }
.chip.tstyle-steel { background: linear-gradient(90deg, #5b6573, #c9d1dc 50%, #5b6573); color: #12161c; }
.chip.tstyle-riftfire { background: linear-gradient(90deg, #4a0d6b, #d0281e, #ff9a2e); color: #fff; }
.chip.tstyle-abyss { background: radial-gradient(circle at 30% 30%, #3b2a5c, #0b0612 70%); color: #d9c8ff; border-color: #5a3d8a; }
.chip.tstyle-holo, .chip.tstyle-starlight, .chip.tstyle-royal, .chip.tstyle-prismatic { background-size: 300% 100%; animation: tshine 6s linear infinite; }
.chip.tstyle-holo { background-image: linear-gradient(90deg, #9fe8ff, #f3b5ff, #fff6a8, #9fe8ff, #f3b5ff); color: #1b1630; }
.chip.tstyle-starlight { background-image: radial-gradient(rgba(255,255,255,.45) .6px, transparent 1px), linear-gradient(90deg, #121a46, #3b2b8f, #121a46, #3b2b8f);
  background-size: 11px 11px, 300% 100%; color: #fff7d6; }
.chip.tstyle-royal { background-image: linear-gradient(90deg, #b8862b, #ffe9a3, #f2c35b, #fff6d0, #b8862b); color: #241703; }
.chip.tstyle-prismatic { background-image: linear-gradient(90deg, #ff4d6d, #ffb84d, #f4ff52, #4dffa5, #4dc3ff, #a36bff, #ff4d6d); color: #10121a; }
@keyframes tshine { from { background-position: 0 0; } to { background-position: 300% 0; } }
.chip.tstyle-starlight { animation-name: tshine2; }
@keyframes tshine2 { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 300% 0; } }
@media (prefers-reduced-motion: reduce) { .chip.tstyle { animation: none !important; } }
.tswatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tswatch { display: grid; gap: 4px; justify-items: center; padding: 8px 10px; min-width: 104px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.tswatch.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tswatch.locked { opacity: .55; cursor: not-allowed; }