/* Cardforge — mobile-first, dark. One accent (gold), color only where it means something. */
:root {
  --bg: #0f1115;
  --surface: #171a20;
  --surface-2: #1f232b;
  --line: #2a2f39;
  --text: #eef0f4;
  --muted: #9aa2b1;
  --faint: #8b93a3;
  --gold: #e8b95b;
  --gold-ink: #1b1406;
  --good: #6fd29a;
  --bad: #f08a7e;
  --warn: #f2c66d;
  --W: #f3ecd2;
  --U: #7fb6ea;
  --B: #b7a6c9;
  --R: #f08a6c;
  --G: #79c98f;
  --C: #c9ccd3;
  --radius: 14px;
  --gutter: 16px;
  --nav-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: Manrope, "DM Sans", sans-serif; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
p { margin: 6px 0; }
a { color: var(--gold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.pad { padding: 28px 0; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.between { justify-content: space-between; }
.up, .ok-text { color: var(--good); }
.down, .bad-text { color: var(--bad); }
.warn-text { color: var(--warn); }
.error { color: var(--bad); font-size: 13px; min-height: 0; margin: 4px 0; }
.error:empty { display: none; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 4px; }
.eyebrow.up { color: var(--good); }
.eyebrow.down { color: var(--bad); }
.foot { font-size: 12px; color: var(--faint); margin-top: 10px; }
.big { font: 800 32px/1 Manrope, sans-serif; margin: 2px 0 4px; letter-spacing: -0.03em; }

/* ---------- shell ---------- */
#app { min-height: 100vh; opacity: 0.4; transition: opacity 0.2s; }
#app.ready { opacity: 1; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px;
  background: rgba(15, 17, 21, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 17px Manrope, sans-serif; letter-spacing: 0.02em; margin-right: auto; }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font-weight: 800; }
.top-nav { display: none; gap: 4px; }
.top-nav button { background: none; border: 0; color: var(--muted); padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.top-nav button.on, .top-nav button:hover { color: var(--text); background: var(--surface-2); }
.save-status { font-size: 12px; color: var(--faint); }
.save-status.bad { color: var(--bad); }
body[data-view="deck"] .topbar { display: none; }

#content {
  padding: 16px var(--gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);
  max-width: 1080px; margin: 0 auto;
}
body[data-view="deck"] #content { padding-top: 0; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(20, 22, 27, 0.97);
  border-top: 1px solid var(--line);
}
.bottom-nav button { background: none; border: 0; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; }
.bottom-nav button span { font-size: 20px; line-height: 1; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 15px; }
.bottom-nav button.on { color: var(--gold); }
.bottom-nav button.on span { background: rgba(232, 185, 91, 0.16); }

@media (min-width: 900px) {
  .top-nav { display: flex; }
  .bottom-nav { display: none; }
  #content { padding-bottom: 48px; }
  body[data-view="deck"] .topbar { display: flex; }
  body[data-view="deck"] #content { padding-top: 16px; }
}

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid transparent;
  background: var(--gold); color: var(--gold-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn.block { width: 100%; margin-top: 10px; }
.btn.danger, .link.danger, .menu-list .danger { color: var(--bad); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.file { margin: 8px 0; }
.link { background: none; border: 0; padding: 4px 0; color: var(--gold); font-weight: 600; text-align: left; }
.link.small { font-size: 13px; }
.icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 17px; }
.icon.light { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
input, select, textarea {
  width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
textarea { min-height: 120px; resize: vertical; font-size: 13.5px; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold); flex: none; }
input.narrow { width: 64px; min-height: 34px; padding: 4px 8px; text-align: center; }
label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); font-weight: 500; }
label.toggle { padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.grid2 .span2 { grid-column: 1 / -1; }
.actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.actions.wrap { flex-wrap: wrap; }
.actions.center { justify-content: center; flex-wrap: wrap; }
.searchbar, .add-row { display: flex; gap: 8px; margin: 10px 0; }
.searchbar input, .add-row input { flex: 1; }
.toolbar { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; align-items: center; }
.toolbar input[type="search"] { flex: 1 1 180px; }
.toolbar select { width: auto; flex: 0 1 auto; }

.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin: 12px 0; }
.seg button { flex: 1; border: 0; background: none; color: var(--muted); padding: 8px 6px; border-radius: 9px; font-weight: 700; font-size: 13.5px; }
.seg button.on { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.chip.dark { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.15); color: #fff; }
.chip.ok { color: var(--good); }
.chip.warn { color: var(--warn); }
.chip.pick { padding: 7px 12px; font-size: 13px; }
.chip.pick.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
button.chip { cursor: pointer; }
.tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.tag.warn { color: var(--warn); background: rgba(242, 198, 109, 0.12); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.panel.tight { padding: 10px 12px; }
details.panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
.note { border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--surface-2); font-size: 13.5px; }
.note.warn { background: rgba(242, 198, 109, 0.1); color: #f6dba2; }
.empty { text-align: center; padding: 28px 12px; }
.empty-mark { font-size: 28px; color: var(--gold); }
.empty p { color: var(--muted); max-width: 440px; margin: 8px auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 2px; }
.head-actions { display: flex; gap: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 8px; }
.summary-line { font-size: 13.5px; color: var(--muted); margin: 0; }
.summary-line b { color: var(--text); }

/* pips & bars */
.mana, .dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.pip { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font: 800 9.5px/1 "DM Sans", sans-serif; font-style: normal; color: #111; background: var(--C); }
.pip-W { background: var(--W); } .pip-U { background: var(--U); } .pip-B { background: var(--B); } .pip-R { background: var(--R); } .pip-G { background: var(--G); } .pip-N, .pip-C { background: #c9ccd3; }
.bar { display: block; height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 6px 0; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.bar.thin { height: 4px; margin: 6px 0 0; }
.bar.good > span { background: var(--good); }
.bar.warn > span { background: var(--warn); }
.bar.c-W > span { background: var(--W); } .bar.c-U > span { background: var(--U); } .bar.c-B > span { background: var(--B); } .bar.c-R > span { background: var(--R); } .bar.c-G > span { background: var(--G); } .bar.c-Multi > span { background: linear-gradient(90deg, var(--W), var(--U), var(--B), var(--R), var(--G)); } .bar.c-Colorless > span { background: var(--C); }
.bar.faint > span { opacity: 0.45; }
.meter { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; margin: 4px 0; }
.meter.two { grid-template-columns: 30px 1fr; }
.meter.two b { grid-column: 2; margin-top: -4px; font-weight: 500; color: var(--muted); }
.meter .pair .bar { margin: 3px 0; }

/* ---------- home ---------- */
.hero { margin: 6px 0 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.kpi b { font: 800 20px Manrope, sans-serif; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi em { font-style: normal; font-weight: 700; }
.kpi em.up { color: var(--good); } .kpi em.down { color: var(--bad); }
.kpis.small .kpi b { font-size: 17px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.quick-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.quick-btn span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--gold); font-size: 17px; }
.quick-btn b { font-size: 14px; }
.quick-btn small { color: var(--muted); font-size: 11.5px; line-height: 1.25; }
.quick-btn.primary { border-color: rgba(232, 185, 91, 0.5); background: linear-gradient(160deg, rgba(232, 185, 91, 0.14), var(--surface) 70%); }
.banner { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; margin: 14px 0; padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--line); background: none; text-align: left; font-size: 13.5px; }
.glossary { margin: 22px 0 8px; color: var(--muted); font-size: 13.5px; }
.glossary summary { cursor: pointer; color: var(--text); font-weight: 600; }
.glossary dt { color: var(--text); font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 2px 0 0; }

/* deck tiles */
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
.shelf > * { scroll-snap-align: start; }
.deck-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .deck-grid { grid-template-columns: repeat(2, 1fr); } .shelf { grid-auto-columns: minmax(260px, 40%); } }
@media (min-width: 1000px) { .deck-grid { grid-template-columns: repeat(3, 1fr); } .shelf { grid-auto-columns: 31%; } }
.deck-tile { position: relative; display: block; width: 100%; height: 190px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); text-align: left; padding: 0; color: #fff; }
.deck-tile.wide { height: 210px; }
.tile-art img, .tile-art .img-missing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-missing { display: grid; place-items: center; color: var(--faint); background: var(--surface-2); }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 30%, rgba(8, 9, 12, 0.92) 72%); }
.tile-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.tile-body { position: absolute; left: 12px; right: 12px; bottom: 10px; display: grid; gap: 1px; }
.tile-body b { font: 800 18px Manrope, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-body small { color: #d5d9e0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-stats { display: flex; gap: 12px; font-size: 11.5px; color: #c4c9d2; margin-top: 4px; flex-wrap: wrap; }
.tile-stats em { font-style: normal; font-weight: 800; color: #fff; font-size: 13px; }
.idea { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.idea-art { position: relative; height: 120px; }
.idea-art img, .idea-art .img-missing { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea-art .chip { position: absolute; top: 8px; left: 8px; }
.idea-body { padding: 12px; display: grid; gap: 4px; }
.idea-body small { color: var(--muted); }

/* ---------- lists ---------- */
.list { display: grid; gap: 6px; }
.lot { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.lot-art { position: relative; width: 76px; height: 56px; border-radius: 9px; overflow: hidden; border: 0; padding: 0; background: var(--surface-2); }
.lot-art img, .lot-art .img-missing { width: 100%; height: 100%; object-fit: cover; display: grid; }
.art-price { position: absolute; left: 3px; bottom: 3px; font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; }
.lot-info { display: grid; gap: 2px; min-width: 0; }
.lot-name { background: none; border: 0; padding: 0; text-align: left; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lot-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.foil { color: #9fd7f0; font-weight: 700; }
.lot-side { display: grid; justify-items: end; gap: 4px; }
.price { font-size: 13px; font-weight: 700; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.stepper button { width: 30px; height: 28px; border: 0; background: none; font-size: 16px; color: var(--muted); }
.stepper b { min-width: 22px; text-align: center; font-size: 14px; }
.own { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.own::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.own.yes { color: var(--good); }
.own.no { color: var(--warn); }
.deck-row.short { border-color: rgba(242, 198, 109, 0.25); }
.group { margin: 12px 0; }
.group > summary { display: flex; justify-content: space-between; cursor: pointer; padding: 6px 2px; font: 800 13px Manrope, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.group > summary em { font-style: normal; color: var(--faint); margin-left: 6px; }
.list.compact { gap: 0; }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 14px; min-width: 0; }
.mini-row:last-child { border-bottom: 0; }
.mini-row.on { color: var(--gold); }
label.mini-row { display: flex; color: var(--text); font-weight: 500; flex-wrap: wrap; }
.menu-list { display: grid; margin: 8px 0; }
.menu-list button { text-align: left; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 15px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.grid-card { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.grid-card.short .card-img { opacity: 0.6; }
.card-img { width: 100%; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 4.75% / 3.5%; background: var(--surface-2); display: block; }
.grid-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.owned-badge { position: absolute; top: 6px; right: 6px; background: var(--good); color: #062; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 99px; }
.filters { margin: 4px 0 10px; }
.filters summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.hints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 18px; }
.cover-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.cover-line b { color: var(--text); }
.sticky-bar, .sticky-summary {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  margin-top: 14px; padding: 10px 12px; border-radius: 14px;
  background: rgba(31, 35, 43, 0.97); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.sticky-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.sticky-bar > span:last-child { display: flex; gap: 6px; }
@media (min-width: 900px) { .sticky-bar, .sticky-summary { bottom: 12px; } }

/* ---------- deck page ---------- */
.deck-hero { position: relative; margin: 0 calc(var(--gutter) * -1); min-height: 250px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 35%, var(--bg) 100%); }
.hero-body { position: relative; padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) 12px; display: grid; gap: 6px; min-height: 250px; align-content: space-between; }
.hero-body h1 { font-size: 27px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); margin-top: 52px; }
.hero-body p { margin: 0; color: #dfe3ea; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.hero-stats > * { display: grid; gap: 0; padding: 7px 8px; border-radius: 11px; background: rgba(15, 17, 21, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: var(--muted); text-align: left; min-width: 0; }
.hero-stats b { font: 800 16px Manrope, sans-serif; color: var(--text); }
.hero-stats button b { color: var(--gold); }
@media (min-width: 900px) { .deck-hero { margin: 0; border-radius: 18px; } .hero-body h1 { margin-top: 30px; font-size: 32px; } }
.tabs { position: sticky; top: 0; z-index: 10; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); background: rgba(15, 17, 21, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 0; background: none; color: var(--muted); padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.tabs button.on { background: var(--surface-2); color: var(--text); }
@media (min-width: 900px) { .tabs { top: 61px; } }
.deck-body { padding-top: 4px; }

/* engine */
.score-panel { display: flex; gap: 14px; align-items: center; }
.ring { flex: none; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ring-fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.6s; }
.ring.good .ring-fill { stroke: var(--good); } .ring.mid .ring-fill { stroke: var(--gold); } .ring.low .ring-fill { stroke: var(--bad); }
.ring text { fill: var(--text); font: 800 26px Manrope, sans-serif; }
.ingredient { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ingredient:last-child { border-bottom: 0; }
.ingredient .muted.small { display: block; font-size: 12px; }
.curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 140px; align-items: end; margin-top: 10px; }
.curve-col { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; gap: 4px; }
.curve-col small { color: var(--muted); font-size: 11.5px; }
.curve-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.cb { position: relative; width: 100%; max-width: 30px; min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--gold); }
.cb.old { background: #5b6170; }
.cb em { position: absolute; top: -17px; left: 0; right: 0; font-style: normal; font-size: 11px; color: var(--muted); }
.curve.dual .cb em { font-size: 9.5px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--gold); vertical-align: middle; margin: 0 2px 0 8px; }
.key.old { background: #5b6170; margin-left: 0; }
table.metrics { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.metrics th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: left; padding: 6px 4px; font-weight: 700; }
.metrics td { padding: 8px 4px; border-top: 1px solid var(--line); }
.metrics .num { text-align: right; white-space: nowrap; }
.metrics td.num.up { color: var(--good); font-weight: 700; } .metrics td.num.down { color: var(--bad); font-weight: 700; }
.metrics em { font-style: normal; font-size: 12px; }
.ladder tr { cursor: pointer; }
.ladder tr.on td { color: var(--gold); }
.issues { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.role-ramp { color: var(--G); } .role-draw { color: var(--U); } .role-removal { color: var(--R); } .role-wipe { color: var(--bad); } .role-protection { color: var(--W); }

/* upgrade lab */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.imp { display: grid; padding: 7px 8px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.imp small { font-size: 11px; color: var(--muted); }
.imp b { font: 800 16px Manrope, sans-serif; }
.imp em { font-style: normal; font-size: 12px; font-weight: 700; }
.swap-list { display: grid; gap: 10px; }
.swap { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--surface); }
.swap.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.swap-check { font-size: 13.5px; color: var(--text); font-weight: 600; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.swap-pair { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 6px; align-items: center; }
.swap-card { display: grid; gap: 3px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.swap-card .swap-art, .swap-card .img-missing { width: 100%; height: 74px; object-fit: cover; border-radius: 10px; display: block; }
.swap-card small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; }
.swap-card.out small { color: var(--bad); } .swap-card.in small { color: var(--good); }
.swap-card b { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.swap-arrow { text-align: center; color: var(--muted); }
.swap-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.swap-facts b { color: var(--text); }
.swap-facts b.up { color: var(--good); } .swap-facts b.down { color: var(--bad); }
.sticky-summary .impact { margin: 6px 0; }
.sticky-summary .actions { justify-content: flex-end; margin-top: 6px; }

/* versions */
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .diff { grid-template-columns: 1fr; } }

/* playtest */
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.hand-card { padding: 0; border: 0; background: none; }
.log-form { display: grid; grid-template-columns: 1fr 74px; gap: 8px; margin: 8px 0; }
.log-form input#logNote { grid-column: 1 / -1; }
.log-form .btn { grid-column: 1 / -1; }
.note-row { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.note-row .ellip { flex: 1; }

/* shop / cost */
.cost { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; }
.cost label { flex: 1; }
.cost.total { border-top: 1px solid var(--line); padding-top: 10px; font-size: 16px; }

/* card sheet */
dialog.sheet {
  width: 100%; max-width: 640px; max-height: 92vh; margin: auto auto 0; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  background: var(--bg); color: var(--text);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog.sheet[open] { animation: rise 0.22s ease-out; }
@keyframes rise { from { transform: translateY(30px); opacity: 0.4; } }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 22px; border-bottom: 1px solid var(--line); } }
#sheetBody { padding: 8px var(--gutter) calc(env(safe-area-inset-bottom) + 22px); overflow-y: auto; max-height: 92vh; }
.sheet-head { position: sticky; top: -8px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 10px; background: var(--bg); }
.sheet-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-detail { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: start; }
@media (max-width: 380px) { .card-detail { grid-template-columns: 1fr; } .card-detail-img { max-width: 220px; } }
.type-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 0; }
.oracle { white-space: pre-line; font-size: 14px; background: var(--surface); border-radius: 10px; padding: 10px; margin: 8px 0; }
.price-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.price-pill { display: grid; padding: 5px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.price-pill small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.inline-pick { display: flex; gap: 6px; flex: 1 1 100%; }
.inline-pick select { flex: 1; }
details.more { margin: 12px 0; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font-size: 14px; }
.add-preview { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.cmp-side { display: grid; gap: 4px; min-width: 0; }
.cmp-side b { font-size: 14px; }
.cmp-side.pick { align-content: start; }
.cmp-vs { align-self: center; color: var(--muted); font-weight: 800; }

/* scan */
.scan-drop { display: grid; gap: 6px; place-items: center; text-align: center; aspect-ratio: 488 / 680; max-height: 340px; margin: 0 auto 10px; border: 2px dashed var(--line); border-radius: 18px; padding: 20px; }
.scan-preview { display: block; max-height: 360px; margin: 0 auto 10px; border-radius: 14px; }
.scan-match { display: grid; grid-template-columns: 120px 1fr; gap: 12px; margin-top: 10px; align-items: start; }
.sources { padding-left: 18px; font-size: 14px; }
.sources li { margin: 6px 0; }

/* line chart */
svg.line { width: 100%; height: 120px; display: block; margin: 10px 0 4px; }
.line-stroke { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-area { fill: rgba(232, 185, 91, 0.12); }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); z-index: 50;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 460px); padding: 11px 16px; border-radius: 12px;
  background: #f4f1ea; color: #15130e; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: 0.2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { #toast { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 380px) {
  .impact { grid-template-columns: repeat(2, 1fr); }
  .hero-stats b { font-size: 14px; }
  .quick { grid-template-columns: 1fr; }
}

/* ---------- Foldables & tablets ----------
   Cover screen (~410dp, very tall): compact hero.
   Inner screen (~600–900dp, near-square): two-column lists, bigger art, bottom nav kept for thumbs. */
@media (max-aspect-ratio: 9/19) and (max-width: 480px) {
  .deck-hero, .hero-body { min-height: 210px; }
  .hero-body h1 { margin-top: 30px; font-size: 24px; }
  .kpi b { font-size: 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .deck-hero, .hero-body { min-height: 160px; }
  .hero-body h1 { margin-top: 0; }
  :root { --nav-h: 52px; }
  .bottom-nav button span { height: 24px; font-size: 17px; }
}
@media (min-width: 600px) {
  :root { --gutter: 22px; }
  .quick { grid-template-columns: repeat(4, 1fr); }
  .list:not(.compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card-detail { grid-template-columns: 220px 1fr; }
  .deck-hero, .hero-body { min-height: 290px; }
  .swap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swap-card .swap-art, .swap-card .img-missing { height: 96px; }
  .deck-body[data-tab="engine"], .deck-body[data-tab="versions"] { columns: 2; column-gap: 14px; }
  .deck-body[data-tab="engine"] > *, .deck-body[data-tab="versions"] > * { break-inside: avoid; margin-top: 0; }
  .hand { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  dialog.sheet { margin: auto; border-radius: 22px; border-bottom: 1px solid var(--line); max-width: 720px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .bottom-nav { padding-left: max(0px, calc((100vw - 640px) / 2)); padding-right: max(0px, calc((100vw - 640px) / 2)); }
}
@media (min-width: 1200px) {
  .list:not(.compact), .group .list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #content { max-width: 1240px; }
}

/* ---------- Rich card sheet ---------- */
.set-icon { display: inline-block; flex: none; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; background: #d9dce2; }
.set-icon.r-uncommon { background: linear-gradient(135deg, #8a9aa8, #e6eef4 50%, #7d8b96); }
.set-icon.r-rare { background: linear-gradient(135deg, #8d6d2b, #f5d78a 50%, #9b7a33); }
.set-icon.r-mythic { background: linear-gradient(135deg, #b4421c, #ffb15e 50%, #c2471b); }
.set-icon.r-special, .set-icon.r-bonus { background: linear-gradient(135deg, #6b3fa0, #d8a6ff 50%, #6b3fa0); }
.cd { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 14px; align-items: start; }
.cd-img .card-img { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.cd-info { display: grid; gap: 10px; min-width: 0; }
.cd-set { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cd-set b { display: block; font-size: 14px; line-height: 1.2; }
.cd-set small { color: var(--muted); font-size: 12px; }
.cd-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.price-pill.foil { background: linear-gradient(135deg, rgba(120, 200, 255, 0.14), rgba(255, 140, 220, 0.14)); }
.price-pill b { font-size: 16px; }
.cd-text { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 12px 0 0; }
.cd-text .type-line { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.cd-text .oracle { background: none; padding: 0; margin: 8px 0; }
.flavor { font-style: italic; color: #c8c2b3; font-family: Georgia, "Times New Roman", serif; font-size: 14.5px; border-left: 2px solid var(--gold); padding-left: 10px; margin: 10px 0; white-space: pre-line; }
.pt { font-weight: 800; color: var(--text); background: var(--surface-2); padding: 2px 8px; border-radius: 8px; }
.legal { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.lg { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--faint); }
.lg.yes { color: var(--good); background: rgba(111, 210, 154, 0.12); }
.lg.ban { color: var(--bad); background: rgba(240, 138, 126, 0.12); text-decoration: line-through; }
.lg.res { color: var(--warn); }
.own-line { margin: 10px 0; }
.inline-pick { margin-top: 8px; }
.prints { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.print-list { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.print { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.print.on { border-color: var(--gold); }
.print-main { display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 0; text-align: left; min-width: 0; flex: 1; }
.print-thumb, .print .img-missing { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; }
.print-name { display: flex; gap: 6px; align-items: center; min-width: 0; }
.print-name b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.print-name small { color: var(--muted); font-size: 11.5px; }
.print-prices { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.pp { display: grid; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 2px 7px; font-size: 13px; font-weight: 700; text-align: right; }
.pp small { font-size: 9.5px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.pp.on { border-color: var(--gold); color: var(--gold); }
.mini-art { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; }
.block-note { display: block; width: 100%; text-align: left; border: 0; margin: 12px 0 0; }
.pick-commander .mini-row { padding: 8px 2px; }
@media (min-width: 600px) { .cd { grid-template-columns: 260px 1fr; } .print-list { max-height: 520px; } }

/* ---------- Deck idea sheet ---------- */
button.idea-art { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.idea-art .see { left: auto; right: 8px; top: auto; bottom: 8px; }
.idea-title { background: none; border: 0; padding: 0; text-align: left; font-weight: 800; font-size: 15px; }
.idea-hero { position: relative; height: 150px; border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.idea-hero img, .idea-hero .img-missing { width: 100%; height: 100%; object-fit: cover; display: block; }
.idea-hero .chip { position: absolute; left: 10px; top: 10px; }
.sel-bar { position: sticky; top: 48px; z-index: 1; background: var(--bg); padding: 6px 0; border-bottom: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.pick-row.short .mini-art { outline: 1px dashed var(--warn); }
.pick-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; }
.pick-main b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-main small { font-size: 12px; font-weight: 600; }
.pick-side { display: grid; justify-items: end; gap: 2px; font-size: 13px; flex: none; }
.idea-actions { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 6px; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin-top: 10px; }
.idea-actions .grid2 { margin: 6px 0; }
.idea-actions .grid2 span:empty { display: none; }
.tag.muted { color: var(--muted); background: var(--surface-2); }
button.tag { border: 0; cursor: pointer; text-align: left; }
/* 2.1: random discoveries and inline set badges */
.random-tools{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.set-badge{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:5px;padding:2px 5px;border:1px solid var(--line,#394034);border-radius:5px;background:#252b25;color:#d9d3bc;font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.035em;white-space:nowrap}.set-badge .set-icon{width:12px;height:12px;display:inline-block;flex:0 0 auto;background:currentColor;mask-image:var(--icon);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:var(--icon);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.set-badge.r-uncommon{color:#bbced1}.set-badge.r-rare{color:#d2b271}.set-badge.r-mythic{color:#ef9674}.set-badge.unknown{color:#929a90}.lot-name .set-badge{font-size:8px}.grid-set{position:absolute;right:5px;top:5px}.grid-set .set-badge{background:#111c}.pick-main .ellip b{white-space:normal}.lot-name{flex-wrap:wrap}.idea-actions .btn:disabled{opacity:.5;pointer-events:none}@media(max-width:600px){.random-tools .btn{flex:1;font-size:12px}.set-badge{padding:1px 4px;font-size:8px}.set-badge .set-icon{width:10px;height:10px}}
.custom-budget{display:block;margin:14px 0;font-size:12px;color:var(--muted,#abb2a6)}.custom-budget input{display:block;max-width:220px;margin-top:7px}.custom-budget-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0}.custom-budget-row label{flex:1;min-width:150px;font-size:12px}.custom-budget-row input{display:block;width:100%;margin-top:6px}

/* ---------- 2.2: bracket estimate, mana base, life tracker ---------- */
.bracket-head { display: flex; gap: 14px; align-items: center; }
.bracket-num { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font: 800 30px/1 Manrope, sans-serif; background: var(--surface-2); border: 1px solid var(--line); }
.bracket-num.b2 { color: var(--good); }
.bracket-num.b3 { color: var(--gold); }
.bracket-num.b4, .bracket-num.b5 { color: var(--bad); }
.bracket-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0 8px; }
.bracket-scale span { text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; border-radius: 6px; background: var(--surface-2); color: var(--faint); }
.bracket-scale span.past { color: var(--muted); }
.bracket-scale span.on { background: var(--gold); color: var(--gold-ink); }
.bracket-panel details { margin: 6px 0; }
.bracket-panel summary { cursor: pointer; }

.mb-table { margin: 8px 0; }
.mb-row { display: grid; grid-template-columns: 28px 1fr 44px 18px 72px 44px; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.mb-row.head { border-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-bottom: 2px; }
.mb-row .num { text-align: right; }

.life-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.life-grid.n3 > :first-child, .life-grid.n5 > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .life-grid.n3, .life-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .life-grid.n3 > :first-child { grid-column: auto; } }
.life-card { min-width: 0; position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; transition: opacity 0.2s; }
.life-card.me { border-color: rgba(232, 185, 91, 0.55); }
.life-card.out { opacity: 0.5; }
.life-name { width: 100%; background: transparent; border: 0; text-align: center; font-weight: 700; color: var(--muted); padding: 2px; border-radius: 6px; }
.life-name:focus { background: var(--surface); color: var(--text); }
.life-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; margin: 4px 0; }
.life-total { order: -1; flex-basis: 100%; margin: 2px 0 6px; font: 800 40px/1 Manrope, sans-serif; font-variant-numeric: tabular-nums; }
.life-card button { min-width: 32px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; padding: 0 4px; }
.life-card button:active { background: var(--gold); color: var(--gold-ink); }
.life-sub { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 6px; font-size: 13px; color: var(--muted); }
.life-sub span { display: inline-flex; align-items: center; gap: 4px; }
.life-sub button { min-width: 28px; height: 28px; }
.life-sub b { min-width: 2ch; color: var(--text); font-variant-numeric: tabular-nums; }
.life-out { position: absolute; top: 8px; right: 8px; }

/* ---------- 2.3: deck review, buy sheet, sheet behavior ---------- */
html.sheet-open, html.sheet-open body { overflow: hidden; }
#sheetBody { overscroll-behavior: contain; }

.review-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; min-height: 34px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.5); color: #fff; backdrop-filter: blur(6px); }
.review-badge.warn { color: var(--warn); border-color: rgba(242, 198, 109, 0.5); }
.review-badge.bad { color: var(--bad); border-color: rgba(240, 138, 126, 0.55); }
.review-badge.ok { color: var(--good); }
.review-list { display: grid; gap: 8px; margin: 10px 0; }
.review-item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.review-item.warn { border-left: 3px solid var(--warn); }
.review-item.bad { border-left: 3px solid var(--bad); }
.review-icon { font-size: 13px; padding-top: 2px; }
.review-item.warn .review-icon { color: var(--warn); }
.review-item.bad .review-icon { color: var(--bad); }
.review-main { min-width: 0; }
.review-main .btn { margin-top: 6px; }

button.price-pill { cursor: pointer; font: inherit; text-align: left; transition: border-color 0.15s, transform 0.1s; }
button.price-pill:hover { border-color: var(--gold); }
button.price-pill:active { transform: scale(0.98); }
.price-pill .buy-hint { display: block; font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 2px; }
.price-pill.unknown b { color: var(--muted); }
.pp.buy { color: var(--gold); }
.buy-link { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; min-height: 36px; }
.buy-link:hover { color: var(--gold); }
.buy-card { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.buy-thumb { width: 64px; border-radius: 6px; flex: none; }
.buy-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-id b { font: 800 17px Manrope, sans-serif; }
.buy-price { font: 800 22px Manrope, sans-serif; }
.buy-est p { margin-top: 4px; }
a.store { text-decoration: none; color: var(--text); min-height: 48px; }
.links.research { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 4px; }

/* ---------- 2.4: official symbols, sets ---------- */
.ms { width: 17px; height: 17px; vertical-align: -3px; display: inline-block; border-radius: 50%; box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.55); }
.ms.inline { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin: 0 1px; box-shadow: -0.5px 0.5px 0 rgba(0, 0, 0, 0.4); }
.mana .ms + .ms, .dots .ms + .ms { margin-left: 1px; }
.cd-text .mana .ms { width: 19px; height: 19px; }
.meter.two .ms, .mb-row .ms { width: 20px; height: 20px; }
#sheetBody { overflow-x: hidden; }

.set-badge[data-act] { cursor: pointer; }
.set-badge[data-act]:hover { border-color: var(--gold); }
button.cd-set { background: none; border: 1px solid transparent; border-radius: 12px; padding: 6px; margin: -6px; text-align: left; color: inherit; cursor: pointer; }
button.cd-set:hover { border-color: var(--line); background: var(--surface); }
.set-go { color: var(--gold); }
.set-icon.big { width: 30px; height: 30px; flex: none; }
.set-icon.huge { width: 64px; height: 64px; flex: none; }
.set-hero { display: flex; gap: 16px; align-items: center; margin: 4px 0 12px; }
.set-hero-main { min-width: 0; }
.set-hero h1 { margin: 2px 0; }
.set-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.set-controls select { min-height: 40px; }
.set-grid .grid-card.own { outline: 2px solid rgba(111, 210, 154, 0.55); outline-offset: -2px; }
.owned-badge.other { background: var(--surface-2); color: var(--muted); font-size: 10.5px; }
h2.year { margin: 18px 0 8px; color: var(--muted); font-size: 15px; }
.set-list { display: grid; gap: 6px; }
@media (min-width: 700px) { .set-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.set-row:hover { border-color: var(--gold); }
.set-row-main { display: grid; min-width: 0; flex: 1; }
.set-row-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.set-controls .seg { flex: 1 1 100%; }
.set-controls select { flex: 1 1 40%; min-width: 0; }
@media (min-width: 700px) { .set-controls .seg { flex: 0 0 auto; } }

/* ---------- 2.5: start path, finder, shared decks ---------- */
.save-status { cursor: pointer; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start h2 { margin-bottom: 6px; }
.steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--gold); color: var(--gold-ink); }
.step.done .step-n { background: rgba(111, 210, 154, 0.18); color: var(--good); }
.step.done b { color: var(--muted); text-decoration: line-through; }
.step .actions { margin-top: 6px; }
.section-title { margin: 22px 0 4px; }
.finder-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.finder-controls label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.finder-controls .span-all { grid-column: 1 / -1; }
.finder-controls input, .finder-controls select { min-width: 0; width: 100%; }
.row.wrap { flex-wrap: wrap; }
.finder-list { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 900px) { .finder-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.finder-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); min-width: 0; }
.finder-art { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--surface); }
.finder-art img { width: 100%; height: 100%; object-fit: cover; }
.finder-main { display: grid; gap: 4px; min-width: 0; }
.finder-main details summary { cursor: pointer; color: var(--muted); }
.finder-main .actions { margin-top: 4px; }
.share-actions { margin: 12px 0; }
.about { white-space: pre-wrap; }
.checks { margin: 6px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.list-head { margin: 12px 0 4px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.share-link { margin-top: 12px; display: grid; gap: 8px; }
.share-link input { width: 100%; font-size: 12px; }
.field { display: grid; gap: 4px; margin: 8px 0; }
.field textarea, .field input { width: 100%; }

/* ---------- 2.6: compact symbols everywhere, clearer swaps ---------- */
/* Mana symbols are always icon-sized, whatever container they land in. */
img.ms { width: 18px !important; height: 18px !important; max-width: none !important; min-width: 0; object-fit: contain; flex: none; display: inline-block; }
img.ms.inline { width: 1.05em !important; height: 1.05em !important; }
.cd-text .mana img.ms, .meter.two img.ms, .mb-row img.ms { width: 20px !important; height: 20px !important; }
.mana, .dots { flex-wrap: wrap; row-gap: 2px; }
.swap-mana { min-height: 20px; }
.swap-why { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.swap-why li { display: grid; grid-template-columns: 16px 1fr; gap: 4px; }
.swap-why li span { font-weight: 800; text-align: center; }
.swap-why .gain span { color: var(--good); }
.swap-why .lose span { color: var(--warn); }
.swap-why .same span { color: var(--muted); }
.swap-choose { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }

/* ---------- 2.7: accounts ---------- */
.account-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.account-head div { display: grid; min-width: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; }
.sync-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); margin: 8px 0; font-size: 14px; }
.sync-line.synced b { color: var(--good); }
.sync-line.error b, .sync-line.decide b { color: var(--bad); }
.email-row { margin-top: 10px; }
.sync-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.sync-side { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sync-side b { font-size: 18px; }

/* ---------- 2.8: formats ---------- */
.fmt-chip { cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.15); }
.tag.bad { background: rgba(240, 138, 126, 0.15); color: var(--bad); }
.more-legal { margin: 6px 0; }
.more-legal summary { cursor: pointer; }
.deck-legal { margin: 8px 0 4px; font-weight: 600; }

/* ---------- 2.9: deck generator ---------- */
.build-seed { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; margin: 4px 0 8px; }
.build-seed .mini-art, .build-seed .img-missing { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.build-seed div { display: grid; min-width: 0; }
.fmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tiers { display: grid; gap: 10px; margin: 12px 0; }
.tier { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); }
.tier.on { border-color: var(--gold); }
.tier-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
.tier-stats b { color: var(--text); }
.tier .actions { margin-top: 8px; }
.tier .mini-row small { margin-left: 4px; }
.tier .mini-row > span:last-child { white-space: nowrap; flex: none; }

/* ---------- 3.0: three games ---------- */
body[data-game="ygo"] { --gold: #b99bff; --gold-ink: #150a2c; background: radial-gradient(120% 60% at 50% -10%, rgba(120, 80, 220, 0.16), transparent 60%) var(--bg); }
body[data-game="ptcg"] { --gold: #ff7566; --gold-ink: #2a0d09; background: radial-gradient(120% 60% at 50% -10%, rgba(230, 60, 50, 0.14), transparent 60%) var(--bg); }
body[data-game="mtg"] { background: radial-gradient(120% 60% at 50% -10%, rgba(232, 185, 91, 0.07), transparent 60%) var(--bg); }
body { background-attachment: fixed; }
.game-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.game-pill svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.game-pill span:last-child { color: var(--muted); font-size: 11px; }
@media (max-width: 420px) { .brand span:not(.mark) { display: none; } .save-status { max-width: 30vw; } }
.binders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.binder { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px; min-height: 92px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; overflow: hidden; transition: border-color 0.15s, transform 0.1s; }
.binder:active { transform: scale(0.98); }
.binder::after { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 120%; border-radius: 50%; opacity: 0.18; filter: blur(18px); }
.binder.b-mtg::after { background: #e8b95b; } .binder.b-ygo::after { background: #8b5cf6; } .binder.b-ptcg::after { background: #ef4444; }
.binder.b-mtg .binder-icon { color: #e8b95b; } .binder.b-ygo .binder-icon { color: #b99bff; } .binder.b-ptcg .binder-icon { color: #ff7566; }
.binder-icon svg { width: 22px; height: 22px; }
.binder b { font: 800 15px Manrope, sans-serif; }
.binder small { color: var(--muted); font-size: 11.5px; }
.binder.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tdeck-list { display: grid; gap: 8px; }
@media (min-width: 700px) { .tdeck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tdeck { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.tdeck-art, .tdeck .img-missing { width: 64px; height: 88px; object-fit: cover; border-radius: 6px; }
.tdeck-body { display: grid; gap: 2px; min-width: 0; }
.tdeck-body small { color: var(--muted); font-size: 12.5px; }
.tdeck-body .tag { justify-self: start; margin-top: 2px; }
.tag.ok { color: var(--good); background: rgba(111, 210, 154, 0.12); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 12px 0; }
.stat-grid div { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.stat-grid small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-grid b { overflow-wrap: anywhere; }
.right { text-align: right; }
.cd-text .oracle { white-space: pre-wrap; }
.deck-add { margin: 12px 0 6px; }
.add-results { display: grid; gap: 4px; padding: 8px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.add-results .mini-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; }
.add-results .mini-art, .add-results .img-missing { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; }
.issues-panel { border-color: rgba(240, 138, 126, 0.4); }
.set-logo { width: 72px; height: 32px; object-fit: contain; flex: none; }
.set-logo.big { width: 120px; height: 64px; }
#content .card-grid .card-img { aspect-ratio: 63 / 88; object-fit: cover; }
body[data-game="ygo"] #content .card-grid .card-img { aspect-ratio: 59 / 86; }

/* ---------- 3.1: art-first card page ---------- */
.sheet-head.overlay { position: sticky; top: 0; z-index: 4; background: transparent; padding: 10px 0 0; margin-bottom: -58px; pointer-events: none; }
.sheet-head.overlay .icon { pointer-events: auto; background: rgba(10, 12, 16, 0.55); border-color: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(8px); }
.cs-hero { position: relative; margin: -8px calc(var(--gutter) * -1) 0; height: 240px; overflow: hidden; background: var(--surface-2); }
@media (min-width: 700px) { .cs-hero { height: 300px; border-radius: 22px 22px 0 0; } }
.cs-art { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.cs-hero.ptcg .cs-art { object-position: center 22%; transform: scale(1.35); transform-origin: center 20%; }
.cs-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 55%, var(--bg) 100%); }
.cs-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: -36px; position: relative; z-index: 2; }
.cs-title h2 { font-size: 24px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.cs-title .type-line { margin: 4px 0 0; color: var(--text); font-weight: 600; font-size: 14px; }
.cs-title .mana img.ms { width: 22px !important; height: 22px !important; }
.cs-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 4px; }
.cs-meta .cd-set { flex: 1 1 200px; margin: 0; }
.cs-tabs { position: sticky; top: 52px; z-index: 3; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 10px 0 6px; background: var(--bg); scrollbar-width: none; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; }
.cs-tabs button.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.cs-panel { animation: fade 0.15s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cs-card { display: grid; grid-template-columns: minmax(0, 42%) 1fr; gap: 14px; align-items: start; margin: 6px 0 12px; }
.cs-card-side { display: grid; gap: 8px; min-width: 0; }
.cs-card-side .stat-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.src-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.price-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 8px 0; }
.pt-head, .pt-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; padding: 10px 12px; align-items: center; font-size: 14px; }
.pt-head { background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.pt-head b { color: var(--text); text-align: right; }
.pt-head b.foil { color: #ff9f68; }
.pt-row { border-top: 1px solid var(--line); }
.pt-row > span:not(.pt-label) { text-align: right; font-variant-numeric: tabular-nums; }
.pt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rulings { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; }
.rulings li { padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.rulings p { margin: 0 0 4px; }

/* ---------- rules reference ---------- */
.rules-table td { vertical-align: top; font-size: 13.5px; }
.rules-list details { border-top: 1px solid var(--line); padding: 10px 0; }
.rules-list details:first-child { border-top: 0; }
.rules-list summary { cursor: pointer; }
.rules-list p { margin: 8px 0 0; color: var(--text); line-height: 1.55; }
.ban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ban-item { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font-size: 13px; min-width: 0; cursor: pointer; }
.ban-item img { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; }
.ban-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Home art banner ---------- */
.home-hero { position: relative; margin: -8px calc(var(--gutter) * -1) 14px; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; background: var(--surface-2); }
@media (min-width: 900px) { .home-hero { margin: 0 0 16px; border-radius: 22px; min-height: 340px; } }
.hh-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.home-hero.ptcg .hh-art { object-position: center 25%; transform: scale(1.25); transform-origin: center 30%; }
.hh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 40%, var(--bg) 100%); }
.hh-body { position: relative; z-index: 1; width: 100%; padding: 0 var(--gutter) 16px; }
.hh-body .eyebrow { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.hh-body h1 { font-size: 30px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); margin-bottom: 12px; }
.hh-search { display: flex; gap: 8px; }
.hh-search input { flex: 1; min-width: 0; min-height: 48px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(15, 17, 21, 0.72); backdrop-filter: blur(10px); color: #fff; padding: 0 14px; font-size: 16px; }
.hh-search .btn { min-height: 48px; }
.hh-credit { margin-top: 10px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; backdrop-filter: blur(6px); }
.binders { margin-top: 0; }
.binder { min-height: 76px; padding: 10px; }
/* compact start checklist */
.start h2 { font-size: 17px; }
.step p.muted { font-size: 12.5px; margin: 2px 0 0; }
.step .actions { margin-top: 6px; }
.small-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
.version { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.comp .meter { grid-template-columns: 80px 1fr 32px; }

/* ---------- emblems ---------- */
.emb { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.emb.sm { width: 16px; height: 16px; }
.emblems { display: inline-flex; align-items: center; gap: 4px; flex: none; vertical-align: middle; }
.cs-title .emblems .emb { width: 28px; height: 28px; }
.cs-title .emblems { gap: 6px; }
.lvl { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 13px; }
.lvl .emb.star { width: 16px; height: 16px; }
.cs-title .lvl { font-size: 18px; } .cs-title .lvl .emb.star { width: 22px; height: 22px; }
.link-mark { font-size: 9px; font-weight: 900; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 4px; background: #1d4fa5; color: #fff; margin-right: 3px; }
.hp { font-weight: 800; font-size: 13px; margin-left: 2px; }
.cs-title .hp { font-size: 18px; }
.costs { display: inline-flex; gap: 2px; margin-right: 6px; }
.tset { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); vertical-align: middle; white-space: nowrap; }
.tset small { font-size: 10px; color: var(--muted); font-weight: 700; }
.tset.super small { color: #9ad0ff; } .tset.ultra small { color: #ffd166; } .tset.secret small { color: #ff8fd8; } .tset.rare small { color: #cfd6e0; }
.rar { font-size: 11px; color: var(--muted); letter-spacing: -1px; }
.rar.gold { color: #f2c94c; } .rar.ace { color: #ff7eb6; } .rar.shiny { color: #9ad0ff; }
.tile-emb { position: absolute; top: 6px; left: 6px; display: flex; gap: 3px; padding: 3px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); color: #fff; }
.tile-emb:empty, .tile-emb:has(.emblems:empty) { display: none; }
.tile-emb .emb { width: 16px; height: 16px; } .tile-emb .lvl, .tile-emb .hp { font-size: 11px; color: #fff; }
.tile-set { position: absolute; top: 6px; right: 6px; }
.lot-sub .emblems { margin-right: 4px; } .lot-sub .emblems .emb { width: 16px; height: 16px; }
.lot-sub .tset { margin-right: 4px; }
.cd-text.pk .pk-ability { padding: 8px 10px; border-radius: 10px; background: rgba(220, 60, 60, 0.12); margin-bottom: 8px; }
.pk-tag { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: #ff8a7a; }
.pk-ability p, .pk-attack p { margin: 4px 0 0; }
.pk-attack { padding: 8px 0; border-top: 1px solid var(--line); }
.pk-attack:first-of-type { border-top: 0; }
.dmg { font: 800 18px Manrope, sans-serif; }
.pk-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pk-strip span { display: inline-flex; align-items: center; gap: 3px; }

/* ---------- Did you know? ---------- */
.fact{margin:14px 0 4px;padding:10px 12px;border-left:3px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--gold) 8%,transparent)}
.fact-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.fact p{margin:0 0 4px;font-size:14px;line-height:1.45}
.fact .link{padding:0}

/* ---------- Pokémon set & rarity symbols ---------- */
/* The symbols are dark ink on transparent, so they sit on a small light chip like on a printed card. */
img.pks, img.pkr { display: inline-block; vertical-align: middle; object-fit: contain; background: none; }
/* The symbols are dark ink on transparent: invert the lightness and rotate hues back, so black
   becomes white (like Magic's set icons) and the few colored ones keep their color family. */
img.pks, img.pkr.ink { filter: invert(1) hue-rotate(180deg) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
img.pks { width: 16px; height: 16px; }
img.pkr { width: auto; height: 11px; max-width: 28px; }
img.pks.big { width: 34px; height: 34px; flex: 0 0 auto; }
h1 img.pks.big { width: 28px; height: 28px; margin-right: 4px; }
.cd-set small img.pkr { height: 9px; }

/* ---------- Meta decks & ideas (Yu-Gi-Oh!, Pokémon) ---------- */
.meta-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; margin-bottom: 8px; }
.meta-row:hover { border-color: var(--gold); }
.meta-art { display: flex; gap: 2px; align-items: center; justify-content: center; min-height: 44px; }
.meta-art .mini-art { width: 64px; height: 46px; }
.meta-main { display: grid; gap: 2px; min-width: 0; }
.meta-own { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.meta-own small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pk-icon { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; }
.arch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arch { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.arch:hover { border-color: var(--gold); }
.arch small { color: var(--muted); font-size: 11px; }
.arch-icons { display: flex; gap: 2px; min-height: 30px; }
.build-own h3 { margin: 0 0 4px; }
.idea-row .lot-side { align-self: center; }
.seed-list { max-height: 52vh; overflow: auto; margin: 8px 0; }
.seed-row { cursor: pointer; }
.seed-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); }
.seed-thumb { width: 28px; height: 40px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
.seed-row .row { gap: 8px; min-width: 0; flex-wrap: nowrap; }
.sheet-foot { position: sticky; bottom: 0; padding: 8px 0 4px; background: linear-gradient(transparent, var(--bg) 30%); }
.build-seed.multi { grid-template-columns: auto 1fr; }
.seed-strip { display: flex; }
.seed-strip .mini-art, .seed-strip .img-missing { width: 34px !important; height: 48px !important; border-radius: 4px !important; margin-right: -12px; box-shadow: 0 0 0 2px var(--bg); }
.tier.meta { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }

/* ---------- evidence, drafts, adaptations ---------- */
.evidence { color: var(--muted); border-left: 3px solid var(--gold); padding: 4px 8px; margin: 6px 0; background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: 0 6px 6px 0; }
.draft-path { color: var(--warn); margin: 4px 0; }
.swaps { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 6px; font-size: 13px; }
.swaps li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.swaps small { display: block; margin-top: 2px; }
.sheet-actions { margin-top: 12px; }
.mini-row .tag { font-size: 10px; padding: 0 5px; vertical-align: middle; color: var(--muted); background: var(--surface-2); }
.mini-row .tag.ok { color: var(--good); background: rgba(111, 210, 154, 0.12); }

/* ---------- adaptive Home ---------- */
.home-hero.compact { min-height: 190px; }
@media (min-width: 900px) { .home-hero.compact { min-height: 220px; } }
.home-hero.compact .hh-body h1 { font-size: 24px; margin-bottom: 10px; }
.game-switch { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.game-switch button { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 0; justify-content: center; min-height: 40px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.game-switch button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.game-switch button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.next-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 18px; background: var(--surface); margin: 0 0 16px; }
.nc-art { position: absolute; inset: 0 0 auto auto; width: 45%; height: 100%; background-size: cover; background-position: center; opacity: 0.35; mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); }
.nc-body { position: relative; padding: 16px; }
.nc-body h2 { margin: 2px 0 6px; font-size: 21px; overflow-wrap: anywhere; }
.nc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.nc-stats span { display: grid; gap: 1px; min-width: 0; }
.nc-stats b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-stats small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .nc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- filter chips & saved searches ---------- */
.filter-chips, .saved-searches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip span { color: var(--muted); font-size: 14px; }
.schip { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; max-width: 100%; }
.schip button { border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.schip button + button { color: var(--muted); padding: 5px 8px; border-left: 1px solid var(--line); }
.filters .list-head { margin-top: 6px; }
details.advanced { margin-top: 8px; }
details.advanced > summary { font-size: 13px; color: var(--muted); cursor: pointer; }

/* toast with an Undo action */
#toast { display: flex; align-items: center; gap: 12px; }
#toast.has-action { pointer-events: auto; }
.toast-undo { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 6px 12px; background: #15130e; color: #f4f1ea; font: inherit; font-weight: 700; cursor: pointer; min-height: 32px; }

/* Page headers wrap their buttons under the title on small phones instead of widening the page. */
.page-head { flex-wrap: wrap; }
.page-head h1 { min-width: 0; overflow-wrap: anywhere; }
.page-head > .row, .page-head > span.row { flex-wrap: wrap; gap: 6px; max-width: 100%; }

/* ---------- one look across games: art rows, buy links, readable tiles ---------- */
a.pp { text-decoration: none; display: grid; place-items: center; color: inherit; }
a.pp.buy { color: var(--gold); }
.print-name small .tset { font-size: 10px; }
.art-row { justify-content: flex-start; gap: 10px; }
.art-row > .ellip { flex: 1; min-width: 0; }
.art-row > .small { margin-left: auto; flex: 0 0 auto; }
.row-thumb { width: 32px; height: 45px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.row-thumb.img-missing { display: inline-block; }
.grid-meta.stacked { display: grid; gap: 1px; justify-content: stretch; }
.grid-meta.stacked b { color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.25; }
.grid-meta.stacked small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Top decks" tiles with the deck's key card art (all games) */
.arch { position: relative; overflow: hidden; }
.arch.has-art { min-height: 132px; align-content: end; border-color: color-mix(in srgb, var(--gold) 25%, var(--line)); }
.arch-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.9; }
.arch.has-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 45%, var(--surface) 92%); z-index: 1; }
.arch.has-art > :not(.arch-art) { position: relative; z-index: 2; }
.arch.has-art .arch-icons { min-height: 0; }
.arch.has-art b { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.arch.has-art small { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

/* Yu-Gi-Oh! set row: the booster/product art as the set's emblem */
.ygo-pack { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.ygo-pack.none { display: grid; place-items: center; font-size: 9px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
/* Magic set badges use the same rarity gradients as the big set icons */
.set-badge .set-icon { background: #d9dce2; }
.set-badge.r-uncommon .set-icon { background: linear-gradient(135deg, #8a9aa8, #e6eef4 50%, #7d8b96); }
.set-badge.r-rare .set-icon { background: linear-gradient(135deg, #8d6d2b, #f5d78a 50%, #9b7a33); }
.set-badge.r-mythic .set-icon { background: linear-gradient(135deg, #b4421c, #ffb15e 50%, #c2471b); }

/* One scrolling area per sheet: the dialog never scrolls itself, and lists inside don't either. */
dialog.sheet { overflow: hidden; }
#sheetBody { box-sizing: border-box; max-height: 92vh; }
.print-list { max-height: none !important; overflow: visible !important; }
/* Tournament decks: a shorter banner so the list starts sooner */
.cs-hero.compact { height: 150px; }
.facts-list { margin: 6px 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }

/* ---------- scanner ---------- */
.scan-panel .seg { margin-bottom: 10px; }
.cam-wrap { position: relative; overflow: hidden; border-radius: 14px; background: #000; margin-bottom: 10px; }
.cam-wrap video { display: block; width: 100%; height: auto; }
.cam-wrap .scan-drop { margin: 0; }
/* The card-shaped guide; everything outside it is shaded. Colour + words show the state. */
.cam-guide { position: absolute; border: 3px solid #e5484d; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); transition: border-color 0.15s; pointer-events: none; }
.cam-guide.amber { border-color: #f5a524; }
.cam-guide.green { border-color: #30c48d; border-width: 4px; }
.cam-status { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center; max-width: 92%; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; background: rgba(20, 20, 24, 0.85); border: 2px solid #e5484d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-status.amber { border-color: #f5a524; }
.cam-status.green { border-color: #30c48d; background: rgba(16, 70, 50, 0.9); }
/* The crop area is exactly the photo (no letterbox), so box fractions = photo fractions. */
.crop-wrap { position: relative; touch-action: none; user-select: none; margin: 6px auto 10px; border-radius: 12px; overflow: hidden; width: fit-content; max-width: 100%; }
.crop-wrap img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; pointer-events: none; }
.crop-box { position: absolute; border: 2px dashed var(--gold); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); pointer-events: none; }
.scan-cands { display: grid; gap: 10px; margin: 8px 0 12px; }
.scan-cand2 { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.scan-cand2.exact { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.scan-cand2 img { width: 96px; border-radius: 6px; }
.sc-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sc-body b { font-size: 16px; }
.sc-body small { color: var(--muted); }
.sc-body .tag { justify-self: start; }
details.trouble summary { font-size: 13px; color: var(--muted); cursor: pointer; }
details.trouble code { word-break: break-word; }
/* Collectible versions: readable labels beside complete, uncropped card art. */
.variant-row { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.variant-art { padding:0; border:0; background:none; cursor:pointer; border-radius:8px; }
.variant-art-frame { position:relative; display:grid; place-items:center; width:72px; height:101px; overflow:hidden; border-radius:6px; background:var(--surface-2); }
.variant-art img { width:100%; height:100%; object-fit:contain; }
.art-unavailable-label { display:none; padding:6px; color:var(--muted); font-size:10px; text-align:center; }
.art-unavailable .art-unavailable-label, .variant-art-frame:not(:has(img)) .art-unavailable-label { display:block; }
.variant-copy { display:grid; gap:5px; overflow-wrap:anywhere; }
.variant-copy small { font-size:11px; line-height:1.4; }
.variant-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.variant-art-large { display:flex; justify-content:center; padding:12px; }
.variant-art-large .card-img { max-width:100%; width:320px; height:auto; object-fit:contain; }
.artwork-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px; }
.artwork-item { display:grid; justify-items:center; gap:7px; text-align:center; font-size:12px; }
.artwork-item .variant-art-frame { width:100px; height:140px; }
.variant-gallery { margin-top:20px; }
@media (max-width:480px) { .variant-row { grid-template-columns:64px minmax(0,1fr); gap:10px; } .variant-art-frame { width:64px; height:90px; } .variant-actions { grid-column:2; justify-content:flex-start; } .variant-row > .variant-art { grid-row:1 / span 2; align-self:start; } }

.account-signup { margin:18px 0; padding:12px; border:1px solid var(--line); border-radius:12px; }
.account-signup summary { cursor:pointer; font-weight:600; }
.account input[type="password"] { min-height:44px; }

/* Settings: one focused task per tab, with secondary controls tucked away. */
.settings-page { max-width:960px; margin:0 auto; }
.settings-header { margin:8px 0 26px; }
.settings-header h1 { margin:4px 0 8px; font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; }
.settings-header p { margin:0; }
.settings-tabs,.auth-tabs { display:flex; gap:4px; padding:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.settings-tabs { margin-bottom:24px; width:fit-content; max-width:100%; }
.settings-tabs button,.auth-tabs button { border:0; padding:12px 18px; border-radius:10px; background:transparent; color:var(--muted); font-weight:650; cursor:pointer; min-height:44px; }
.settings-tabs button[aria-selected="true"],.auth-tabs button[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:0 2px 8px #0002; }
.settings-pane[hidden],.auth-pane[hidden] { display:none !important; }
.settings-account-layout { display:grid; grid-template-columns:minmax(0,600px) minmax(180px,1fr); align-items:start; gap:28px; }
.settings-page .panel { margin:0 0 18px; border-radius:20px; padding:26px; }
.settings-card-heading { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.settings-card-heading h2 { margin:3px 0 0; font-size:23px; }
.settings-card-heading .eyebrow { margin:0; font-size:10px; }
.settings-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:13px; color:var(--gold); background:var(--surface-2); flex:none; font-size:24px; }
.auth-tabs { margin:24px 0 20px; }
.auth-tabs button { flex:1; padding:10px; }
.auth-pane .field { display:grid; gap:8px; margin-bottom:17px; font-size:13px; font-weight:600; }
.auth-pane input { width:100%; min-height:48px; padding:12px 14px; border-radius:11px; }
.auth-pane .btn.block { margin-top:8px; min-height:48px; }
.auth-secondary { display:block; margin:16px auto; font-size:13px; }
.auth-privacy { padding-top:20px; margin:20px 0 0; border-top:1px solid var(--line); font-size:12px; line-height:1.6; color:var(--muted); }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:11px; }
.auth-divider:before,.auth-divider:after { content:""; height:1px; background:var(--line); flex:1; }
.settings-disclosure { border-top:1px solid var(--line); padding:17px 0; margin-top:18px; }
.settings-disclosure summary { cursor:pointer; font-size:13px; color:var(--muted); }
.settings-disclosure[open] summary { color:var(--text); margin-bottom:14px; }
.settings-disclosure .actions { margin-top:14px; }
.settings-danger,.settings-source { border:1px solid var(--line); padding:20px; border-radius:16px; }
.settings-danger summary { color:var(--bad); }
.settings-aside { display:grid; gap:12px; padding:26px 4px; }
.settings-aside p { margin:0; line-height:1.6; }
.settings-aside .link { text-align:left; margin-top:8px; }
.settings-status-dot { width:8px; height:8px; border-radius:50%; background:var(--good); }
.settings-version { color:var(--muted); font-size:12px; }
@media(max-width:700px) { .settings-account-layout { grid-template-columns:1fr; gap:0; } .settings-aside { border:1px solid var(--line); border-radius:16px; padding:18px; } .settings-page .panel { padding:20px; } .settings-tabs { width:100%; } .settings-tabs button { flex:1; padding:10px 8px; font-size:12px; } }

/* CardStashy: physical binders with restrained motion and full-card pockets. */
.brand .mark { background:none; width:36px; height:36px; border-radius:10px; }
.brand .mark img { display:block; width:100%; height:100%; }
.binders,.stash-shelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:12px 0 28px; }
.stash-shelf { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.stash-binder { --binder:#6848ac; --binder-light:#a88bdc; display:grid; justify-items:center; gap:16px; padding:20px 12px 16px; border:1px solid transparent; border-radius:20px; background:transparent; color:var(--text); cursor:pointer; perspective:900px; text-align:center; min-width:0; }
.stash-mtg { --binder:#805b24; --binder-light:#edc777; }
.stash-ptcg { --binder:#176b69; --binder-light:#76e3d0; }
.stash-ygo { --binder:#634198; --binder-light:#c3a0ff; }
.stash-binder[aria-pressed="true"] { border-color:var(--line); background:var(--surface); }
.stash-book { position:relative; display:block; width:145px; height:195px; transform:rotateY(-12deg) rotateZ(-3deg); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(8px 13px 9px #0005); }
.stash-pages { position:absolute; inset:4px -5px 3px 9px; background:repeating-linear-gradient(90deg,#c4c7d3 0px,#a2a8b8 1px,#e2e5ed 2px,#e2e5ed 4px); border-radius:4px 10px 10px 4px; box-shadow:inset 0 0 0 1px #fff4; }
.stash-pages i { position:absolute; width:26px; height:38px; top:44px; background:#263543; border:3px solid #ffffff40; border-radius:3px; }
.stash-pages i:nth-child(1) { left:22px; }.stash-pages i:nth-child(2) { left:54px; }.stash-pages i:nth-child(3) { left:86px; }
.stash-cover { position:absolute; inset:0; border-radius:5px 12px 12px 5px; background:linear-gradient(130deg,color-mix(in srgb,var(--binder),white 10%),var(--binder) 65%,#111827); transform-origin:8px center; transform:rotateY(0); transition:transform .55s cubic-bezier(.2,.8,.2,1); box-shadow:inset 0 0 0 1px #fff2,inset 3px 0 6px #fff2; overflow:hidden; display:flex; flex-direction:column; align-items:center; padding:23px 12px 14px 20px; backface-visibility:hidden; }
.stash-spine { position:absolute; left:5px; top:0; bottom:0; width:9px; border-left:1px solid #ffffff30; border-right:1px solid #0007; background:#0002; }
.stash-foil { position:absolute; inset:0; opacity:.15; background:linear-gradient(120deg,transparent 30%,#fff 47%,transparent 60%); transform:translateX(-80%); transition:transform .6s ease; pointer-events:none; }
.stash-emblem { width:65px; height:75px; display:grid; place-items:center; border:1px solid #ffffff40; border-radius:10px; overflow:hidden; background:#0d142044; }
.stash-emblem img { width:100%; height:100%; object-fit:cover; }
.stash-cover-title { font:800 14px Manrope,sans-serif; letter-spacing:.02em; color:#fff6e3; margin-top:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stash-cover-brand { font-size:7px; letter-spacing:.18em; color:var(--binder-light); margin-top:auto; }
.stash-binder-label { display:grid; gap:5px; min-width:0; }
.stash-binder-label b { font-size:15px; overflow-wrap:anywhere; }
.stash-binder-label small { font-size:11px; color:var(--muted); }
.stash-open-hint { color:var(--binder-light); font-size:11px; }
.stash-binder:hover .stash-book,.stash-binder:focus-visible .stash-book { transform:rotateY(-3deg) rotateZ(0) translateY(-8px); }
.stash-binder:hover .stash-cover,.stash-binder:focus-visible .stash-cover { transform:rotateY(-32deg); }
.stash-binder:hover .stash-foil,.stash-binder:focus-visible .stash-foil { transform:translateX(90%); }
.stash-binder:active .stash-book { transform:rotateY(0deg) scale(.97); }
.stash-page-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; margin:10px 0 18px; }
.stash-open-book { display:grid; grid-template-columns:20px minmax(0,1fr); gap:8px; background:linear-gradient(100deg,#17202b,#233140); border:1px solid #536574; border-radius:16px; padding:16px 14px 16px 5px; box-shadow:inset 0 0 18px #0007; perspective:1000px; }
.stash-rings { display:flex; flex-direction:column; justify-content:space-around; gap:30px; }
.stash-rings i { width:25px; height:14px; border:4px solid #a1acb6; border-radius:9px; box-shadow:0 2px 3px #0007,inset 0 1px 2px white; position:relative; z-index:2; }
.stash-pocket-page { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; transform-origin:left center; animation:stash-page-turn .38s cubic-bezier(.2,.8,.2,1) both; }
.stash-pocket-page[data-direction="previous"] { transform-origin:right center; }
.stash-pocket { position:relative; min-width:0; padding:5px; border:1px solid #a4c0d04d; border-radius:6px; background:linear-gradient(150deg,#ffffff12,#ffffff04); color:var(--text); text-align:left; box-shadow:inset 0 1px 0 #fff2; cursor:pointer; overflow:hidden; }
.pocket-image { display:grid; place-items:center; position:relative; aspect-ratio:5/7; background:#0b111980; overflow:hidden; border-radius:4px; }
.pocket-image img { width:100%; height:100%; object-fit:contain; transition:transform .25s ease; }
.pocket-placeholder { display:none; font-size:10px; text-align:center; color:var(--muted); padding:8px; }
.pocket-image.missing .pocket-placeholder,.pocket-image:not(:has(img)) .pocket-placeholder { display:block; }
.pocket-glint { position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,transparent 42%,#ffffff16 50%,transparent 60%); }
.stash-pocket:hover img { transform:scale(1.035); }
.pocket-caption { display:grid; gap:2px; padding:6px 1px 2px; }
.pocket-caption b { display:block; font-size:11px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pocket-caption small { font-size:9px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pocket-qty { position:absolute; right:6px; top:6px; border-radius:5px; background:#0b111ee6; padding:3px 5px; font-size:10px; }
.empty-pocket { aspect-ratio:5/8; display:grid; place-items:center; cursor:default; color:#ffffff25; font-size:26px; }
@keyframes stash-page-turn { from { opacity:.3; transform:rotateY(-24deg) translateX(8px); } to { opacity:1; transform:rotateY(0) translateX(0); } }
@media(max-width:520px) { .binders { gap:4px; } .binders .stash-binder { padding:12px 3px; } .binders .stash-book { width:88px; height:124px; } .binders .stash-cover { padding:14px 6px 9px 13px; } .binders .stash-emblem { width:42px; height:45px; } .binders .stash-cover-title { font-size:10px; margin-top:8px; } .binders .stash-cover-brand { font-size:5px; } .binders .stash-binder-label b { font-size:12px; } .binders .stash-binder-label small { font-size:10px; } .stash-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .stash-shelf .stash-book { width:118px; height:163px; } .stash-pocket-page { gap:6px; } .stash-open-book { padding-right:8px; gap:5px; } }
@media(prefers-reduced-motion:reduce) { .stash-book,.stash-cover,.stash-foil,.pocket-image img { transition:none !important; } .stash-pocket-page { animation:none !important; } .stash-binder:hover .stash-book,.stash-binder:focus-visible .stash-book,.stash-binder:hover .stash-cover,.stash-binder:focus-visible .stash-cover { transform:none; } }
.stash-custom-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; pointer-events:none; }
.stash-cover .stash-emblem,.stash-cover-title,.stash-cover-brand { position:relative; z-index:1; }
.stash-pocket-page { position:relative; transform-style:preserve-3d; will-change:transform; }
.pocket-open { padding:0; width:100%; border:0; border-radius:4px; background:none; color:inherit; text-align:left; cursor:pointer; }
.pocket-star { position:absolute; bottom:30px; right:7px; width:27px; height:27px; border:1px solid #ffffff60; border-radius:50%; background:#111827e8; color:#b6c0ce; cursor:pointer; z-index:3; }
.pocket-star.on { color:#f9d476; border-color:#f9d476; }
.binder-page-edge { position:absolute; top:0; bottom:0; width:20px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none; z-index:4; border-radius:5px; }
.binder-page-edge.next { right:-9px; }.binder-page-edge.previous { left:-9px; }
.binder-page-edge:disabled { display:none; }.binder-page-edge:active { cursor:grabbing; }
.binder-page-edge:hover,.binder-page-edge:focus-visible { background:linear-gradient(90deg,transparent,#b7d7ff25); outline:1px solid #b7d7ff55; }

/* Keep card imagery and controls compact without sacrificing touch targets. */
.upgrade-card-row {display:flex;gap:10px;min-height:56px;align-items:center;text-align:left;}
.upgrade-card-row .mini-art{width:68px;height:42px;object-fit:cover;border-radius:7px;flex:none;}
.upgrade-card-row .ellip {flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;}
.upgrade-card-row small {display:block;line-height:1.35;}
.card-tile,.card-item,.lot {content-visibility:auto;contain-intrinsic-size:auto 200px;}
.mana .ms,.dots .ms {width:1.15em;height:1.15em;max-width:24px;max-height:24px;flex:none;}
.mini-row > span:last-child {flex-shrink:0;}
@media(max-width:540px){.tier-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.upgrade-card-row .mini-art{width:52px;}}

.swap-art-pair{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:10px;align-items:center;}.swap-art-pair .mini-art{width:100%;height:70px;object-fit:cover;border-radius:8px;}.swap-art-pair small,.swap-art-pair b{display:block;overflow-wrap:anywhere;}

/* Native hidden state must win over component display rules. */
[hidden]{display:none !important;}

.auth-feedback{padding:12px 14px;margin:0 0 16px;border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:1.6;}.auth-feedback.error{color:#ffb8b8;background:#542b2b33;border-color:#a3515166;}.auth-feedback.success{color:#9ee1bd;background:#1b4b3033;border-color:#47835f66;}

/* Modern collection binders: restrained materials, clear corners and real card artwork. */
.stash-shelf{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:18px 0;}
.stash-binder{padding:12px 10px;border-radius:10px;gap:14px;perspective:1100px;}
.stash-book{width:156px;height:208px;transform:rotateY(-8deg);filter:drop-shadow(4px 8px 8px #0004);}
.stash-pages{inset:3px -3px 3px 11px;border-radius:3px 6px 6px 3px;background:repeating-linear-gradient(90deg,#bcc1c8 0 1px,#e1e4e9 1px 3px);}
.stash-pages i{display:none;}
.stash-cover{padding:19px 13px 15px 22px;border-radius:3px 7px 7px 3px;background:var(--binder);box-shadow:inset 0 0 0 1px #ffffff22,inset 1px 0 2px #ffffff18;justify-content:center;}
.stash-spine{left:6px;width:9px;border-left:1px solid #ffffff18;border-right:1px solid #0005;background:#0002;}
.stash-foil{opacity:.035;background:linear-gradient(115deg,transparent 40%,#fff 51%,transparent 63%);}
.stash-emblem{width:100%;height:146px;padding:7px;border:1px solid #ffffff33;border-radius:3px;background:#10141924;box-shadow:0 1px 2px #0002;}
.stash-emblem img{object-fit:contain;}
.stash-emblem img[src="icon.svg"]{width:54px;height:54px;opacity:.7;}
.stash-cover-title{font-size:10px;font-weight:600;letter-spacing:.025em;line-height:1.4;margin-top:10px;color:#fff;}
.stash-custom-background{opacity:.8;}
.stash-binder-label b{font-size:14px;font-weight:650;line-height:1.45;}
.stash-binder-label small{font-size:12px;}
.stash-open-hint{font-size:11px;color:var(--muted);}
.stash-binder:hover .stash-book,.stash-binder:focus-visible .stash-book{transform:rotateY(-4deg) translateY(-4px);}
.stash-binder:hover .stash-cover,.stash-binder:focus-visible .stash-cover{transform:rotateY(-16deg);}
.stash-open-book{border-radius:8px;background:#181c23;border:1px solid #3b424d;padding-top:12px;padding-bottom:12px;box-shadow:inset 2px 0 8px #0003;}
.stash-pocket{border-radius:3px;padding:4px;border-color:#69778555;background:#ffffff03;box-shadow:inset 0 1px 0 #ffffff12;}
.pocket-image{border-radius:2px;background:#101319;}
.pocket-glint{background:linear-gradient(115deg,transparent 48%,#ffffff08 50%,transparent 52%);}
.pocket-star{bottom:31px;right:6px;border-radius:5px;width:28px;height:28px;background:#171c23e8;border-color:#ffffff33;}
.stash-rings i{height:12px;width:22px;border-width:3px;border-radius:5px;}
.binder-page-edge{width:24px;border-radius:2px;}
.brand .mark{border-radius:7px;background:transparent;box-shadow:none;}
.game-choice-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;}
.game-choice{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:16px 12px;cursor:pointer;min-height:72px;}
.game-choice[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-2);}
.game-choice-icon svg{width:25px;height:25px;}.game-choice b,.game-choice small{display:block;}.game-choice b{font-size:13px;}.game-choice small{font-size:11px;color:var(--muted);margin-top:5px;}.game-choice-check{color:var(--accent);}
@media(max-width:540px){.stash-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.stash-shelf .stash-book{width:125px;height:175px;}.stash-shelf .stash-emblem{height:119px;}.stash-cover{padding:13px 9px 12px 17px;}.stash-cover-title{font-size:9px;margin-top:8px;}.game-choice-list{grid-template-columns:1fr;gap:8px;}.game-choice{padding:12px 14px;min-height:62px;}.stash-page-tools{flex-wrap:wrap;gap:8px;}}
@media(prefers-reduced-motion:reduce){.stash-binder:hover .stash-book,.stash-binder:focus-visible .stash-book,.stash-binder:hover .stash-cover,.stash-binder:focus-visible .stash-cover{transform:none;}}

/* Binders 3.9.3: clear acrylic covers that show your starred cards, and real page turns. */
.stash-book{width:156px;height:214px;transform:rotateY(-6deg);filter:drop-shadow(4px 10px 12px #0006);}
.stash-pages{inset:4px -4px 4px 12px;border-radius:3px 8px 8px 3px;background:linear-gradient(90deg,#0003,#0000 12%),repeating-linear-gradient(90deg,#c9ced6 0 1px,#eef0f3 1px 3px);}
.stash-cover.clear{display:flex;flex-direction:column;gap:6px;padding:10px 9px 8px 19px;border-radius:4px 10px 10px 4px;overflow:hidden;
  background:linear-gradient(140deg,color-mix(in srgb,var(--binder) 30%,transparent),color-mix(in srgb,var(--binder) 12%,transparent) 60%,color-mix(in srgb,var(--binder) 26%,transparent));
  border:1px solid color-mix(in srgb,var(--binder) 70%,#fff 20%);box-shadow:inset 0 0 0 1px #ffffff26,inset 0 0 18px color-mix(in srgb,var(--binder) 35%,transparent);backdrop-filter:blur(1.5px);}
.stash-cover.clear .stash-custom-background{opacity:.35;mix-blend-mode:luminosity;}
.stash-window{position:relative;z-index:1;flex:1;display:grid;gap:3px;min-height:0;}
.stash-window.w1{grid-template-columns:1fr;}
.stash-window.w4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);}
.stash-window.w9{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;}
.stash-slot{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:3px;background:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff1f;}
.stash-slot img{width:100%;height:100%;object-fit:contain;filter:saturate(1.08);}
.stash-slot.empty{background:repeating-linear-gradient(135deg,#ffffff08 0 6px,#ffffff03 6px 12px);}
.stash-slot.only img{width:48px;height:48px;opacity:.55;}
.stash-slot.starred::after{content:"★";position:absolute;top:1px;right:2px;font-size:9px;color:#ffd76a;text-shadow:0 0 3px #000;}
.stash-window.w9 .stash-slot.starred::after{font-size:7px;}
.stash-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,#ffffff00 30%,#ffffff2e 42%,#ffffff08 50%,#ffffff00 58%),linear-gradient(180deg,#ffffff14,#ffffff00 30%);transition:transform .6s ease;}
.stash-cover.clear .stash-spine{z-index:2;left:5px;width:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--binder) 85%,#000),color-mix(in srgb,var(--binder) 55%,transparent));}
.stash-cover.clear .stash-cover-title{position:relative;z-index:3;margin:0;padding:3px 7px;border-radius:999px;align-self:flex-start;max-width:100%;background:#0b0f15b8;font-size:10px;font-weight:700;color:#fff;}
.stash-binder:hover .stash-sheen,.stash-binder:focus-visible .stash-sheen{transform:translateX(30%);}
.stash-binder:hover .stash-cover,.stash-binder:focus-visible .stash-cover{transform:rotateY(-12deg);}
@media(max-width:540px){.stash-shelf .stash-book{width:132px;height:182px;}.stash-cover.clear{padding:8px 7px 7px 16px;}}

/* Open binder: page sheets that turn around the rings. */
.stash-open-book{position:relative;perspective:1600px;perspective-origin:30% 50%;background:linear-gradient(100deg,#141920,#1c232d);border:1px solid color-mix(in srgb,var(--binder,#3b424d) 55%,#3b424d);}
.stash-pocket-page,.stash-leaf{animation:none !important;padding:8px;border-radius:6px;background:linear-gradient(90deg,#0000002e,#0000 6%),linear-gradient(160deg,#222a35,#1a2029);box-shadow:0 1px 0 #ffffff10 inset,2px 3px 10px #0005;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.stash-leaf{pointer-events:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;box-sizing:border-box;}
.stash-leaf .binder-page-edge{display:none;}
.stash-turn-shade{position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(90deg,#000c,#0004 55%,#0000);}
.stash-pocket.starred{box-shadow:inset 0 0 0 1px #ffd76a88,0 0 10px #ffd76a22;}
.pocket-image img{-webkit-user-drag:none;}
.binder-page-edge.next{right:-4px;width:30px;}
.binder-page-edge.previous{left:-4px;width:24px;}
.page-curl{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:0 0 6px 0;background:linear-gradient(135deg,#0000 50%,#cfd6df 50%,#8e99a6);box-shadow:-2px -2px 4px #0006;animation:page-curl-hint 2.4s ease-in-out 1s 2;}
@keyframes page-curl-hint{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}}
.stash-turn-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 4px;}
.stash-turn-bar .btn{min-width:96px;min-height:44px;}
.stash-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
.stash-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff2e;transition:background .2s,transform .2s;}
.stash-dots i.on{background:var(--gold,#e8b95b);transform:scale(1.3);}
.stash-page-count{font-size:12px;color:var(--muted);}
@media(prefers-reduced-motion:reduce){.page-curl{animation:none;}}

.location-picker{display:grid;gap:8px;min-width:0;}.location-picker>label{font-weight:600;font-size:13px;}.location-picker select,.location-picker input{width:100%;min-height:46px;}.location-picker>small{font-size:11px;line-height:1.45;font-weight:400;}

/* Quiet shared Home tools, with artwork retained in the primary shortcuts. */
.home-tools { margin: 20px 0; border: 1px solid var(--line,#30343d); border-radius: 16px; padding: 16px; }
.home-tools > summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.home-tools[open] > summary { margin-bottom: 16px; }
.img-missing { display: grid; place-content: center; text-align: center; gap: 6px; background: linear-gradient(145deg,#252a35,#171b22); }
.img-missing small { font-size: 11px; color: #aab2c1; }
.lot-sub { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .home-tools * { animation: none !important; } }
/* Shared card browsing: quiet controls, three density levels, contextual actions. */
.head-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.view-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.view-option { display:grid; gap:12px; text-align:left; padding:18px; border:1px solid var(--line,#303744); border-radius:16px; background:var(--surface); color:inherit; cursor:pointer; }
.view-option.on { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.view-option small { line-height:1.5; color:var(--muted,#aab2c1); }
.view-preview { display:grid; place-content:center; min-height:90px; background:linear-gradient(145deg,#303847,#171c24); border-radius:10px; font-size:26px; white-space:pre-line; color:#c5cede; }
.view-symbols .display-list .lot-art { width:32px; min-width:32px; height:40px; background:none; }
.view-symbols .display-list .lot-art > img,.view-symbols .display-list .lot-art > .img-missing,.view-symbols .display-list .art-price { display:none; }
.view-symbols .display-list .lot-art::before { content:'◈'; color:var(--gold); font-size:22px; }
.view-symbols .display-list .lot { padding:10px 8px; min-height:60px; }
.view-gallery .display-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; background:none; border:none; }
.view-gallery .display-list .lot { position:relative; display:flex; flex-direction:column; align-items:stretch; padding:10px; gap:10px; border:1px solid var(--line,#303744); border-radius:16px; background:var(--surface); min-width:0; }
.view-gallery .display-list .lot-art { width:100%; height:auto; aspect-ratio:63/88; border-radius:10px; overflow:hidden; }
.view-gallery .display-list .lot-art img { width:100%; height:100%; object-fit:contain; }
.view-gallery .display-list .lot-art .img-missing { width:100%; height:100%; }
.view-gallery .display-list .lot-side { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; }
.view-gallery .display-list .lot-info { width:100%; }
.view-gallery .display-list .lot-name { white-space:normal; }
.view-gallery .display-list .lot-sub { flex-wrap:wrap; font-size:11px; line-height:1.5; }
.view-compact .card-grid,.view-symbols .card-grid { display:flex; flex-direction:column; gap:8px; }
.view-compact .card-grid > .grid-card,.view-symbols .card-grid > .grid-card { display:flex; align-items:center; flex-wrap:wrap; gap:12px; text-align:left; padding:10px; min-height:60px; }
.view-compact .card-grid > .grid-card > img { width:48px; height:67px; object-fit:contain; border-radius:5px; }
.view-compact .card-grid .grid-meta,.view-symbols .card-grid .grid-meta { flex:1; min-width:120px; padding:0; }
.view-symbols .card-grid > .grid-card > .card-img { display:none; }
.view-compact .card-grid .owned-badge,.view-symbols .card-grid .owned-badge { position:static; }
.batch-mark { flex:none; align-self:center; padding:6px; }
.batch-mark input { width:20px; height:20px; accent-color:var(--gold); }
.view-gallery .batch-mark { position:absolute; top:12px; left:12px; z-index:2; background:#161b24e8; border-radius:8px; }
.batch-tray { position:sticky; bottom:18px; z-index:15; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:14px; margin:20px 0; border:1px solid var(--line,#465060); border-radius:18px; background:#1b2230f5; backdrop-filter:blur(16px); box-shadow:0 12px 35px #0006; }
.batch-compare { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.batch-compare article { min-width:0; padding:12px; background:var(--surface); border-radius:14px; }
.batch-compare img { width:100%; max-height:230px; object-fit:contain; }
.batch-compare p { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.market-panel { padding:18px; margin:18px 0; border:1px solid var(--line,#303744); border-radius:18px; background:linear-gradient(145deg,#202735,#151b25); }
.market-chart { width:100%; height:160px; color:var(--gold); margin-top:16px; }
.market-card { display:flex; align-items:center; gap:16px; }
.market-card img { width:90px; border-radius:8px; }
.history-inspector { margin:12px 0; font-size:12px; color:var(--muted,#aab2c1); }
.market-panel summary { cursor:pointer; margin-top:14px; }
@media(max-width:700px) { .view-options { grid-template-columns:1fr; } .view-option { grid-template-columns:72px 1fr; gap:8px 14px; } .view-preview { grid-row:span 2; min-height:72px; font-size:20px; } .batch-tray { bottom:100px; } .view-gallery .display-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .page-head { flex-wrap:wrap; gap:12px; } .head-actions .btn { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .view-option,.batch-tray { transition:none; } }
.price-version { display:grid; gap:8px; padding:16px; border:1px solid var(--line,#303744); border-radius:14px; }
.market-details { border-top:1px solid var(--line,#303744); margin-top:24px; padding-top:14px; }
.market-details > summary { cursor:pointer; font-weight:600; font-size:13px; }
.market-details[open] > summary { margin-bottom:18px; }
.view-compact .display-list .lot-art { height:80px; width:58px; }
.view-compact .display-list .lot-art img { object-fit:contain; }
.view-compact .card-grid .tile-emb,.view-symbols .card-grid .tile-emb,
.view-compact .card-grid .tile-set,.view-symbols .card-grid .tile-set,
.view-compact .card-grid .grid-set,.view-symbols .card-grid .grid-set { position:static; max-width:160px; background:transparent; padding:0; }
.view-control { margin-bottom:8px; }
.view-compact .display-list .lot { grid-template-columns:58px minmax(0,1fr) auto; }
.view-symbols .display-list .lot { grid-template-columns:32px minmax(0,1fr) auto; }
.view-compact .display-list .lot:has(> .batch-mark) { grid-template-columns:30px 58px minmax(0,1fr) auto; }
.view-symbols .display-list .lot:has(> .batch-mark) { grid-template-columns:30px 32px minmax(0,1fr) auto; }
.compare-facts { display:grid; gap:5px; font-size:12px; }
.compare-facts > div { display:flex; justify-content:space-between; gap:8px; }
.compare-facts dt { color:var(--muted); }
.compare-facts dd { margin:0; font-weight:600; }
@media(max-width:480px) { .view-compact .display-list .lot:has(> .batch-mark) > .lot-side,.view-symbols .display-list .lot:has(> .batch-mark) > .lot-side { grid-column:3/5; display:flex; justify-content:flex-end; gap:10px; } }
.view-compact .card-grid .grid-meta,.view-symbols .card-grid .grid-meta { font-size:14px; line-height:1.5; }
.view-compact .card-grid .grid-meta > span:last-child,.view-symbols .card-grid .grid-meta > span:last-child { font-size:13px; }

/* Sheets: once scrolled past the art, the close button sits in a solid title bar instead of on text. */
.sheet-head.overlay .sh-title { display: none; }
.sheet-head.overlay.scrolled { pointer-events: auto; top: -12px; padding-top: 16px !important; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 8px var(--gutter); box-shadow: 0 6px 14px #0006; border-bottom: 1px solid var(--line); }
.sheet-head.overlay.scrolled .sh-title { display: block; flex: 1; min-width: 0; font: 700 16px/1.3 Manrope, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head.overlay.scrolled .icon { background: var(--surface-2); }
/* Versions rows on phones: the set and number get the full width; Buy and price sit underneath. */
@media (max-width: 520px) {
  .print { flex-wrap: wrap; }
  .print-main { flex-basis: 100%; }
  .print-name .ellip, .print-name small { white-space: normal; overflow: visible; }
  .print-prices { max-width: none; width: 100%; justify-content: flex-start; padding-left: 4px; }
}

/* Deck-building emblems: a small hex seal on tiles, explained chips on the card sheet. */
.imp-tile { position: absolute; top: 40%; left: 3px; z-index: 2; display: grid; filter: drop-shadow(0 2px 3px #000a); pointer-events: none; }
.imp-tile.imp-core .imp-ico { animation: imp-glint 3.5s ease-in-out infinite; }
@keyframes imp-glint { 0%, 80%, 100% { filter: none; } 88% { filter: brightness(1.35) drop-shadow(0 0 4px #ffd76a); } }
.imp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.imp-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.imp-chip > span { display: grid; min-width: 0; }
.imp-chip b { font-size: 13px; }
.imp-chip small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.imp-chip.imp-core { border-color: #d6a53188; background: linear-gradient(90deg, #d6a5311f, var(--surface) 60%); }
.imp-chip.imp-meta { border-color: #9aa6b588; }
.imp-chip.imp-flex { border-color: #3c97d688; }
.imp-chip.imp-edh { border-color: #8e54d688; }
.imp-row { display: inline-grid; vertical-align: -3px; margin-left: 4px; }
.imp-ico { flex: none; }
@media (prefers-reduced-motion: reduce) { .imp-tile.imp-core .imp-ico { animation: none; } }
.view-compact .card-grid .imp-tile { left: 2px; }

/* Tile emblems, same layout in every game: type top-left, set + rarity bottom-left, importance seal
   bottom-right. The overlay matches the card image (all tiles use the 488:680 card shape). */
.tile-chrome { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 488 / 680; z-index: 2; pointer-events: none; }
.tile-chrome .tile-emb, .tile-chrome .tile-set { position: absolute; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(8, 10, 14, 0.66); backdrop-filter: blur(4px); color: #fff; box-shadow: 0 1px 3px #0006; }
.tile-chrome .tile-emb { top: 5px; left: 5px; }
.tile-chrome .tile-set { bottom: 5px; left: 5px; top: auto; right: auto; }
.tile-chrome .tile-emb:has(.emblems:empty), .tile-chrome .tile-emb:empty { display: none; }
.tile-chrome .emblems { display: inline-flex; align-items: center; gap: 2px; }
.tile-chrome .emb, .tile-chrome .energy, .tile-chrome .ms { width: 15px; height: 15px; }
.tile-chrome .lvl { font-size: 11px; color: #fff; }
.tile-chrome .more { font-size: 10px; font-weight: 700; color: #fff; opacity: 0.85; }
.tile-chrome .tset { padding: 0; border: 0; background: none; font-size: 10.5px; color: #fff; gap: 3px; }
.tile-chrome .tset small { font-size: 9.5px; }
.tile-chrome img.pks { width: 15px; height: 15px; }
.tile-chrome img.pkr { height: 10px; }
.tile-chrome .imp-tile { top: auto; left: auto; bottom: 3px; right: 3px; }
.view-compact .card-grid .tile-chrome .tile-emb, .view-symbols .card-grid .tile-chrome .tile-emb,
.view-compact .card-grid .tile-chrome .tile-set, .view-symbols .card-grid .tile-chrome .tile-set { position: absolute; max-width: none; background: rgba(8, 10, 14, 0.66); padding: 0 5px; }
.view-compact .card-grid .tile-chrome .imp-tile { left: auto; }

/* Proven decks: one summary line instead of three big boxes. */
.proven-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 14px; }
.cs-hero.compact { background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--gold, #e8b95b) 22%, transparent), transparent 60%), var(--surface-2); }
/* Card tabs that don't fit fade at the right edge, so it's clear they scroll. */
.cs-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; }

/* Trade advice, deck emblem tally, card Meta tab. */
.advice > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.advice[open] > summary { margin-bottom: 8px; }
.adv-row .ellip { display: grid; } .adv-row small { color: var(--muted); font-size: 11.5px; }
.adv-row b { display: inline; }
.deck-emb { display: grid; gap: 8px; }
.emb-tally { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.emb-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.emb-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.emb-swap .strong { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.emb-swap .emb-why { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; margin-top: -4px; }
.meta-use { margin: 14px 0; }
.meta-use h3 { margin: 0 0 4px; font-size: 16px; }
.meta-use-row .ellip { display: grid; } .meta-use-row small { color: var(--muted); font-size: 11.5px; }

/* Play guide tab. */
.guide-sec { margin: 14px 0; }
.guide-sec h3 { margin: 0 0 6px; font-size: 16px; }
.guide-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.guide-what { margin: 4px 0; line-height: 1.5; }
.guide-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guide-card { display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; min-width: 0; font-size: 12px; cursor: pointer; }
.guide-card img { width: 100%; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 6px; background: var(--surface-2); }

/* Play guide: rules and ranked pairings with reasons. */
.guide-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-bottom: 8px; }
.guide-limits span { display: grid; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.guide-limits small { color: var(--muted); font-size: 11px; }
.guide-limits b { font-size: 13px; } .guide-limits b.bad { color: var(--bad, #e5484d); }
.pair-list { display: grid; gap: 8px; }
.pair-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.pair-row img, .pair-noimg { width: 54px; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.pair-txt { display: grid; gap: 3px; min-width: 0; }
.pair-txt b { font-size: 14px; } .pair-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.pair-score { font-size: 12px; font-weight: 800; color: var(--gold, #e8b95b); padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold, #e8b95b) 40%, transparent); }

/* ====================================================================
   Shell polish 3.15: one icon family, game-colored emblems, live sync mark.
   ==================================================================== */
:root { --game-color: #f08a5d; }
.ico { width: 20px; height: 20px; flex: none; display: block; }

/* Header: translucent glass with a thin game-colored edge. */
.topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--game-color) 45%, var(--line)) 50%, transparent) 1; }
.brand .mark { position: relative; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 4px 14px #0005; }
.brand .mark .ico { width: 22px; height: 22px; }
.brand .mark .sync-loop { stroke: var(--muted); transition: stroke 0.3s; transform-origin: 15.8px 9.8px; }
.brand .mark[data-state="ok"] .sync-loop { stroke: var(--good, #3ccf91); }
.brand .mark[data-state="bad"] .sync-loop { stroke: var(--bad, #e5484d); }
.brand .mark[data-state="bad"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad, #e5484d) 60%, transparent), 0 0 14px color-mix(in srgb, var(--bad, #e5484d) 30%, transparent); }
.brand .mark[data-state="busy"] .sync-loop { stroke: var(--gold); animation: sync-spin 1.1s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .save-status { display: none; } }
.topbar .icon .ico { width: 21px; height: 21px; }

/* Game pill: the mark sits in a tinted chip; the border picks up the game's color. */
.game-pill { gap: 8px; min-height: 40px; padding: 0 12px 0 5px; border-color: color-mix(in srgb, var(--game-color) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--game-color) 10%, var(--surface)), var(--surface)); box-shadow: 0 0 18px color-mix(in srgb, var(--game-color) 14%, transparent); font-weight: 700; }
.game-pill .pill-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--game-color) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-color) 45%, transparent); }
.game-pill .pill-mark .ico { width: 19px; height: 19px; color: var(--game-color); }
.game-pill .chev { width: 16px; height: 16px; color: var(--muted); }
.game-pill span:last-child { font-size: inherit; color: inherit; }

/* Game choices (Home and the game menu): an emblem chip per game, glowing when active. */
.game-choice { position: relative; overflow: hidden; border-radius: 16px; padding: 14px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr) 22px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s; }
.game-choice:active { transform: scale(0.985); }
.game-choice-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--game-color); background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--game-color) 30%, transparent), color-mix(in srgb, var(--game-color) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--game-color) 40%, transparent); }
.game-choice-icon .ico { width: 26px; height: 26px; }
.game-choice b { font-size: 15px; }
.game-choice[aria-pressed="true"] { border-color: color-mix(in srgb, var(--game-color) 60%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--game-color) 14%, var(--surface)), var(--surface) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--game-color) 25%, transparent), 0 8px 26px color-mix(in srgb, var(--game-color) 16%, transparent); }
.game-choice[aria-pressed="true"] .game-choice-icon { color: #fff; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--game-color) 85%, #fff 10%), color-mix(in srgb, var(--game-color) 55%, #000)); box-shadow: 0 0 18px color-mix(in srgb, var(--game-color) 45%, transparent); }
.game-choice[aria-pressed="false"] .game-choice-icon .ico { opacity: 0.85; }
.game-choice-check .ico { width: 20px; height: 20px; color: var(--game-color); }
.game-switch button svg.ico { width: 18px; height: 18px; color: var(--game-color); }
.game-switch button.on { border-color: color-mix(in srgb, var(--game-color) 60%, transparent); background: color-mix(in srgb, var(--game-color) 14%, var(--surface)); }

/* Bottom nav: glass bar, drawn icons, a soft pill on the active tab. */
.bottom-nav { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px) saturate(1.3); border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.bottom-nav button { gap: 3px; font-size: 11px; letter-spacing: 0.01em; transition: color 0.15s; }
.bottom-nav button span { width: 56px; height: 32px; border-radius: 16px; transition: background 0.2s, transform 0.15s; }
.bottom-nav button span .ico { width: 23px; height: 23px; }
.bottom-nav button.on { color: var(--text); }
.bottom-nav button.on span { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); --nav-fill: color-mix(in srgb, var(--gold) 25%, transparent); }
.bottom-nav button:active span { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .brand .mark[data-state="busy"] .sync-loop { animation: none; } }

/* Tap-to-zoom card viewer. */
.cd-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4.75% / 3.5%; }
.cd-zoom .card-img { transition: transform 0.18s, box-shadow 0.18s; }
.cd-zoom:active .card-img { transform: scale(0.97); }
.zoom-badge { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: #fff; background: rgba(8, 10, 14, 0.62); backdrop-filter: blur(6px); box-shadow: 0 2px 8px #0007, inset 0 0 0 1px #ffffff2a; }
.zoom-badge .ico { width: 18px; height: 18px; }
dialog.zoom { --fade: 1; position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(4 5 8 / calc(0.985 * var(--fade))); color: #fff; overflow: hidden; }
dialog.zoom::backdrop { background: transparent; }
.zoom-stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; overflow: hidden; cursor: zoom-in; }
dialog.zoom.zoomed .zoom-stage { cursor: grab; }
.zoom-img { max-width: min(94vw, 680px); max-height: calc(100dvh - 150px); border-radius: 3.5% / 2.5%; box-shadow: 0 24px 70px #000c; user-select: none; -webkit-user-select: none; will-change: transform; }
.zoom-top { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.zoom-top > * { pointer-events: auto; }
.zoom-res { font-size: 11px; color: #ffffffa0; padding: 4px 8px; border-radius: 999px; background: #0007; }
.zoom-res:empty { visibility: hidden; }
.zoom-bar { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 36px); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(20, 22, 28, 0.78); backdrop-filter: blur(12px); box-shadow: 0 8px 28px #0008, inset 0 0 0 1px #ffffff18; }
.zoom-btn { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 0; background: #ffffff14; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.zoom-btn:hover { background: #ffffff26; }
.zoom-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #0006; }
.zoom-seg button { height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #ffffffb0; font-weight: 700; }
.zoom-seg button[aria-selected="true"] { background: var(--gold); color: var(--gold-ink); }
.zoom-hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 10px); margin: 0; text-align: center; font-size: 11.5px; color: #ffffff80; }
dialog.zoom.zoomed .zoom-hint { opacity: 0; }
html.zoom-open, html.zoom-open body { overflow: hidden; }
.game-pill .pill-mark .ico { color: color-mix(in srgb, var(--game-color) 65%, #fff); }

/* Drawn icons that replace emoji in buttons and labels. */
.gl { display: inline-flex; vertical-align: -0.2em; margin-right: 0.4em; }
.gl .ico { width: 1.2em; height: 1.2em; }
.gl.lone { margin: 0; vertical-align: middle; }
.gl.lone .ico { width: 20px; height: 20px; }
.btn .gl .ico { stroke-width: 2; }
.empty-mark .ico { width: 44px; height: 44px; color: var(--game-color, var(--gold)); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--game-color, var(--gold)) 40%, transparent)); }

/* Scanner, camera off: a centered card-shaped viewfinder with game-colored corner brackets. */
.cam-wrap:has(.scan-drop) { background: radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--game-color) 10%, transparent), transparent 70%), var(--surface); }
.cam-wrap .scan-drop { position: relative; margin: 14px auto; border: 0; max-height: 420px; width: min(100%, 300px); padding: 28px 22px; gap: 12px;
  background:
    linear-gradient(var(--game-color), var(--game-color)) top left / 26px 3px no-repeat, linear-gradient(var(--game-color), var(--game-color)) top left / 3px 26px no-repeat,
    linear-gradient(var(--game-color), var(--game-color)) top right / 26px 3px no-repeat, linear-gradient(var(--game-color), var(--game-color)) top right / 3px 26px no-repeat,
    linear-gradient(var(--game-color), var(--game-color)) bottom left / 26px 3px no-repeat, linear-gradient(var(--game-color), var(--game-color)) bottom left / 3px 26px no-repeat,
    linear-gradient(var(--game-color), var(--game-color)) bottom right / 26px 3px no-repeat, linear-gradient(var(--game-color), var(--game-color)) bottom right / 3px 26px no-repeat;
  border-radius: 6px; }
.cam-wrap .scan-drop::before { content: ""; position: absolute; inset: 10px; border-radius: 4.75% / 3.5%; border: 1px dashed color-mix(in srgb, var(--game-color) 35%, transparent); pointer-events: none; }
.cam-wrap .scan-drop > * { position: relative; }
.cam-status .gl.lone .ico { width: 18px; height: 18px; }
.btn .gl, .chip .gl, .seg button .gl { margin-right: 0.15em; }

/* Toolbar: one-tap view switch and icon tool buttons. */
.empty-mark { display: none; }
.view-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.view-switch button { display: grid; place-items: center; width: 40px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.view-switch button .ico { width: 20px; height: 20px; }
.view-switch button.on { background: color-mix(in srgb, var(--gold) 18%, var(--surface-2)); color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.view-switch button:not(.on):hover { color: var(--text); }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; }
.tool-btn .ico { width: 18px; height: 18px; color: var(--gold); }
.tool-btn.on { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.view-preview .ico { width: 34px; height: 34px; color: var(--gold); }
.head-actions { align-items: center; }
.actions + label, .actions + .field, .actions + .scan-language { margin-top: 14px; display: block; }

/* ====================================================================
   Glass 3.16: frosted surfaces over a blurred art backdrop.
   The backdrop art is already blurred, so most surfaces only need translucency
   (cheap on phones); real backdrop blur is kept for the header, nav and sheets.
   ==================================================================== */
#ambient { display: none; }
body.glass #ambient { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
body.glass #ambient .amb-art { position: absolute; inset: -8%; background-size: cover; background-position: center 30%; filter: blur(42px) saturate(1.35) brightness(0.5); transform: scale(1.08); opacity: 0.85; transition: background-image 0.6s ease, opacity 0.6s ease; }
body.glass #ambient::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 85% 0%, color-mix(in srgb, var(--game-color) 26%, transparent), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--game-color) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.35), rgba(10, 12, 16, 0.78) 60%, rgba(10, 12, 16, 0.92)); }
body.glass #app { position: relative; z-index: 1; }
body.glass {
  --glass: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-2: color-mix(in srgb, var(--surface-2) 62%, transparent);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  background: var(--bg);
}
/* Panels, stat tiles, choices and list rows: frosted, with a light top edge and a faint sheen. */
body.glass :is(.panel, .kpi, .game-choice, .lot, .meta-row, .print, .cd-text, .price-pill, .advice, .deck-emb, .pair-row, .guide-limits span, .imp-chip, .proven-sum, .settings-card, .stash-binder[aria-pressed="true"]) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 45%), var(--glass);
  border-color: var(--glass-line);
  box-shadow: var(--glass-hi), 0 10px 30px rgba(0, 0, 0, 0.22);
}
body.glass :is(.btn.ghost, .chip:not(.on):not(.pick.on), .seg, .view-switch, .game-switch button:not(.on), .tool-btn:not(.on), .cs-tabs button:not(.on):not([aria-selected="true"]), input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: var(--glass-2);
  border-color: var(--glass-line);
  box-shadow: var(--glass-hi);
}
body.glass .seg button.on, body.glass .seg [aria-selected="true"] { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
body.glass .game-choice[aria-pressed="true"] { background: linear-gradient(110deg, color-mix(in srgb, var(--game-color) 20%, transparent), var(--glass) 70%); }
/* Header, nav and sheets: real frosted glass. */
body.glass .topbar { background: rgba(12, 14, 19, 0.45); backdrop-filter: blur(20px) saturate(1.5); }
body.glass .bottom-nav { background: rgba(12, 14, 19, 0.55); backdrop-filter: blur(22px) saturate(1.5); }
body.glass dialog.sheet { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 120px), rgba(18, 20, 26, 0.72); backdrop-filter: blur(28px) saturate(1.4); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -20px 60px rgba(0, 0, 0, 0.45); }
body.glass dialog.sheet::backdrop { background: rgba(4, 5, 8, 0.45); backdrop-filter: blur(3px); }
/* The sheet title bar stays readable over scrolled content: frosted, edge to edge. */
body.glass .sheet-head:not(.overlay) { background: rgba(18, 20, 26, 0.95); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body.glass .sheet-head.overlay.scrolled { background: rgba(18, 20, 26, 0.7); backdrop-filter: blur(20px); }
body.glass .cs-tabs { background: transparent; }
/* Home hero blends into the backdrop instead of ending in a hard edge. */
body.glass .home-hero { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
@media (prefers-reduced-transparency: reduce) {
  body.glass #ambient { display: none; }
  body.glass :is(.panel, .kpi, .game-choice, .lot, .meta-row, .print, .cd-text, .price-pill, .advice, .deck-emb, .pair-row, .proven-sum, .settings-card) { background: var(--surface); }
  body.glass dialog.sheet, body.glass .topbar, body.glass .bottom-nav { background: var(--bg); backdrop-filter: none; }
}
.quick-btn span .gl.lone .ico { width: 20px; height: 20px; color: var(--gold); }
body.glass .bottom-nav { background: rgba(12, 14, 19, 0.74); }
body.glass .topbar { background: rgba(12, 14, 19, 0.58); }

/* A view switch above every card list. */
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.list-bar > p, .list-bar > span { margin: 0; }
.list-bar .view-switch button { width: 36px; height: 30px; }
.view-compact .card-grid .tile-chrome, .view-symbols .card-grid .tile-chrome { display: none; }

/* Scanner 3.17: immersive camera with a control rail, defaults pill and a scan list. */
.cam-wrap.immersive { height: min(64dvh, 560px); border-radius: 18px; }
.cam-wrap.immersive video { width: 100%; height: 100%; object-fit: cover; }
.cam-rail { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(10, 12, 16, 0.55); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cam-rail button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.cam-rail button .ico { width: 22px; height: 22px; }
.cam-rail button.on { background: color-mix(in srgb, var(--gold) 85%, transparent); color: var(--gold-ink); }
.scan-defaults { display: flex; justify-content: space-between; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(10, 12, 16, 0.6); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cam-wrap .scan-defaults { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; width: min(92%, 380px); }
.scan-panel > .scan-defaults, .scan-panel .actions + .scan-defaults { margin: 12px auto 0; max-width: 380px; background: var(--surface-2); }
.scan-defaults button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; }
.scan-defaults button:active { background: rgba(255, 255, 255, 0.12); }
.cam-wrap .cam-status { bottom: 70px; }
.scan-flash { position: absolute; left: 50%; top: 14px; z-index: 4; transform: translate(-50%, -12px); opacity: 0; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--good, #3ccf91) 88%, #000); color: #04150d; font-weight: 800; font-size: 13px; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.scan-flash.show { animation: scan-flash 1.6s ease forwards; }
@keyframes scan-flash { 0% { opacity: 0; transform: translate(-50%, -12px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.scan-under { margin-top: 10px; }
.scan-session .ss-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scan-session .ss-head b { font-size: 16px; display: block; }
.scan-session .ss-head small { color: var(--muted); }
.ss-add { margin: 10px 0; }
.ss-list { display: grid; gap: 6px; max-height: 46dvh; overflow: auto; margin: 4px -4px; padding: 0 4px; }
.ss-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "img txt chip qty" "img txt price price"; gap: 2px 8px; align-items: center; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.ss-row img, .ss-noimg { grid-area: img; width: 40px; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 3px; background: var(--surface-2); }
.ss-txt { grid-area: txt; display: grid; min-width: 0; }
.ss-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-txt small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-chip { grid-area: chip; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.ss-qty { grid-area: qty; display: inline-flex; align-items: center; gap: 2px; }
.ss-qty button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-weight: 800; cursor: pointer; }
.ss-qty b { min-width: 22px; text-align: center; }
.ss-price { grid-area: price; justify-self: end; font-size: 12px; color: var(--muted); }
.ss-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ss-foot input { flex: 1 1 160px; }
.ss-set { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }
.ss-set span { display: grid; gap: 2px; } .ss-set small { color: var(--muted); font-size: 12px; }
.ss-chip.fixed { display: inline-grid; place-items: center; opacity: 0.7; cursor: default; }

/* Scan defaults: glass segments with a caption, opening a glass dropdown. */
.scan-defaults button { display: grid; place-items: center; gap: 0; padding: 4px 6px; line-height: 1.1; }
.scan-defaults button small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.scan-defaults button span { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; }
.scan-defaults .chev { width: 14px; height: 14px; opacity: 0.7; }
.scan-defaults button[aria-expanded="true"], .scan-defaults button:focus-visible { background: rgba(255, 255, 255, 0.12); }
.glass-pop { position: fixed; z-index: 60; min-width: 210px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; padding: 8px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 40%), rgba(16, 18, 24, 0.72);
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 50px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%; animation: pop-in 0.16s cubic-bezier(.2,.9,.3,1.2); }
.glass-pop.down { transform-origin: 50% 0; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(6px); } to { opacity: 1; transform: none; } }
.gp-title { margin: 4px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.glass-pop button { display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "l c" "s c"; align-items: center; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.glass-pop button b { grid-area: l; font-size: 15px; } .glass-pop button small { grid-area: s; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.glass-pop .gp-check { grid-area: c; width: 18px; height: 18px; color: var(--gold); opacity: 0; }
.glass-pop button.on { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.glass-pop button.on .gp-check { opacity: 1; }
.glass-pop button:hover, .glass-pop button:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }

/* Idle viewfinder: a gentle sweep and a ghost card, three tip chips. */
.cam-wrap .scan-drop { overflow: hidden; }
.scan-sweep { position: absolute; left: 10px; right: 10px; top: 10px; height: 38%; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--game-color) 22%, transparent) 85%, color-mix(in srgb, var(--game-color) 70%, transparent) 99%, transparent); border-radius: 4.75% / 3.5%; animation: sweep 3.2s cubic-bezier(.45,.05,.55,.95) infinite; opacity: 0.8; }
@keyframes sweep { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } 100% { transform: translateY(170%); opacity: 0; } }
.scan-ghost { position: absolute; inset: 22% 26% 30%; border-radius: 6% / 4.5%; border: 1.5px solid rgba(255, 255, 255, 0.08); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 60%); transform: rotate(-4deg); pointer-events: none; }
.scan-drop b { font: 800 22px/1.15 Manrope, sans-serif; letter-spacing: -0.01em; }
.scan-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.scan-tips > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.scan-tips .ico { width: 15px; height: 15px; color: var(--game-color); }
.scan-go { min-height: 52px; padding: 0 26px; font-size: 16px; box-shadow: 0 10px 30px color-mix(in srgb, var(--gold) 30%, transparent); }
.scan-tip-line { font-size: 11.5px; }

/* Scan list: stat chips, an illustrated empty state, and a glow on cards that just landed. */
.ss-stats { display: flex; gap: 8px; }
.ss-stat { display: grid; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); line-height: 1.15; }
.ss-stat b { font: 800 18px Manrope, sans-serif; } .ss-stat small { font-size: 11px; color: var(--muted); }
.ss-save { box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 28%, transparent); }
.ss-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 8px 8px; text-align: center; }
.ss-empty b { font-size: 15px; } .ss-empty small { color: var(--muted); max-width: 300px; line-height: 1.45; }
.ss-fan { position: relative; width: 92px; height: 70px; margin-bottom: 4px; }
.ss-fan i { position: absolute; left: 30px; top: 4px; width: 40px; height: 56px; border-radius: 5px; border: 1.5px dashed color-mix(in srgb, var(--game-color) 55%, transparent); background: color-mix(in srgb, var(--game-color) 7%, transparent); transform-origin: 50% 110%; }
.ss-fan i:nth-child(1) { transform: rotate(-16deg); } .ss-fan i:nth-child(3) { transform: rotate(16deg); }
.ss-row.fresh { animation: row-land 1.4s ease; }
@keyframes row-land { 0% { transform: translateY(-8px) scale(0.98); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good, #3ccf91) 70%, transparent), 0 0 24px color-mix(in srgb, var(--good, #3ccf91) 45%, transparent); } 30% { transform: none; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .scan-sweep, .ss-row.fresh, .glass-pop { animation: none; } .scan-sweep { display: none; } }
@media (max-width: 360px) { .scan-defaults button span { font-size: 13.5px; } .scan-defaults button small { font-size: 8.5px; } .ss-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "img txt qty" "img chip price"; } .ss-chip { justify-self: start; } }

/* Scanner: card from another game, Google Lens backup */
.scan-other { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 0.9rem; border: 1px solid color-mix(in srgb, var(--game-color) 55%, transparent); background: color-mix(in srgb, var(--game-color) 14%, transparent); }
.scan-other b { color: var(--game-color); }
.scan-lens { display: inline-flex; align-items: center; gap: 8px; }
.scan-lens .ico { width: 18px; height: 18px; }
@media (max-width: 360px) {
  .scan-defaults { gap: 0; padding: 4px; }
  .scan-defaults button { padding: 4px 3px; }
  .scan-defaults button small { font-size: 8.5px; letter-spacing: 0.04em; }
}
/* Set identity: generous product art, readable titles, consistent code/symbol placement. */
.set-row { min-height:92px; gap:16px; padding:12px 16px; }
.set-row .set-logo { width:96px; height:64px; object-fit:contain; }
.set-row .set-pack { height:72px; }
.set-row-main > b { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
.set-code-mark { display:inline-flex; padding:2px 6px; margin-right:5px; border:1px solid var(--line); border-radius:5px; font-size:10px; color:var(--gold); vertical-align:middle; }
.set-product { width:96px; height:72px; flex:none; display:grid; place-items:center; }
.set-product img { max-width:96px; max-height:72px; object-fit:contain; }
.set-product > .set-icon { display:none; }
.set-product.no-product > .set-icon { display:block; }
.set-row-main .set-icon { vertical-align:middle; }
.browse-return { display:inline-flex; align-items:center; gap:8px; padding:10px 0; margin-bottom:8px; }
@media(max-width:480px){ .set-row { gap:12px; padding:10px 12px; } .set-row .set-logo,.set-product { width:78px; } .set-product img { max-width:78px; } .set-row-count { flex:none; } }

/* Shared set catalogue: stable art slots, readable names, quiet metadata. */
.set-row { min-height:108px; gap:16px; align-items:center; }
.set-media { width:104px; height:80px; flex:none; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.025); }
.set-media > img { width:100%;height:100%;object-fit:contain; padding:5px; }
.set-media-fallback { display:none; }
.set-media.no-art > img { display:none; }
.set-media.no-art .set-media-fallback { display:grid;place-items:center; }
.set-media-fallback .set-icon,.set-media-fallback .pks { width:42px;height:42px; }
.set-art-code { color:var(--muted);font-size:13px;font-weight:650;letter-spacing:.04em; }
.set-row-main > b { display:flex;gap:8px;align-items:baseline;font-size:16px; }
.set-row-main > b > .pks,.set-row-main > b > .set-icon { flex:none; }
.set-row-detail { display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.45; }
.set-code-mark { margin:0; }
.set-row-count { display:grid;gap:2px;text-align:right;min-width:44px; }
.set-row-count > b { font-size:17px;font-weight:650;color:var(--text); }
.set-row-count > small { font-size:11px; }
.set-catalog-status { display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin:12px 0; }
@media(max-width:480px){.set-row{gap:12px;padding:12px;}.set-media{width:78px;height:70px;}.set-row-main > b{font-size:15px;line-height:1.4;}.set-row-detail{font-size:11px;}.set-row-count > b{font-size:16px;}}

.set-catalog-toolbar { display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin:12px 0; }
.set-catalog-toolbar > .check { grid-column:1/-1; }
.set-hero h1 { overflow-wrap:anywhere; }
@media(max-width:480px){.set-hero .set-logo.big{width:82px;height:58px;}.set-hero h1{font-size:28px;line-height:1.2;}.list-bar > p{font-size:12px;line-height:1.4;}}

.auto-browse-status { min-height:28px;display:grid;place-items:center;margin:8px 0;color:var(--muted);font-size:12px; }
.card-grid > .grid-card { content-visibility:auto;contain-intrinsic-size:auto 280px; }
.view-compact .card-grid > .grid-card,.view-symbols .card-grid > .grid-card { contain-intrinsic-size:auto 70px; }

.binder-empty-state { padding:28px 20px;margin-top:20px;border:1px dashed var(--line);border-radius:16px;text-align:center; }
.binder-empty-state h3 { margin:0 0 8px; }.binder-empty-state p { max-width:340px;margin:0 auto 18px; }
.pocket-image .img-missing { position:absolute;inset:0;display:grid;place-content:center;gap:6px;color:var(--muted);font-size:12px;text-align:center; }
.pocket-image .img-missing small { font-size:10px; }
.pocket-image .binder-card-art { -webkit-user-drag:none;user-select:none; }

/* Scan result: your capture beside the match, big enough to compare; other options as rows */
.scan-cand2 .sc-art { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; border-radius: 8px; }
.scan-cand2 .sc-img { width: 96px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; display: block; }
.scan-cand2 .img-missing.sc-img { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 22px; }
.scan-cand2 .img-missing small { font-size: 10px; }
.scan-cand2.lead { grid-template-columns: 1fr; }
.sc-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.sc-compare figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.sc-compare .sc-art, .sc-compare .sc-img { width: 100%; max-width: 220px; }
.sc-compare .sc-img { border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.sc-compare figcaption { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scan-cand2.exact .sc-compare figure:last-child figcaption { color: var(--good); }
.ss-row .ss-img { width: 40px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; }
.cam-status .cam-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.btn .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }

/* Install nudge on Home */
.install-nudge { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; margin: 12px 0; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--game-color, #f08a5d) 40%, var(--line)); background: color-mix(in srgb, var(--game-color, #f08a5d) 10%, var(--surface)); }
.install-nudge img { border-radius: 11px; }
.install-nudge b { display: block; }
.install-nudge p { margin: 4px 0 8px; color: var(--muted); font-size: 0.92rem; }
.install-nudge .ico { width: 16px; height: 16px; vertical-align: -3px; }
.install-nudge .actions { display: flex; gap: 12px; align-items: center; }
.cmp-art { padding: 0; border: 0; background: none; cursor: pointer; }
.cmp-facts { display: grid; gap: 2px; margin: 4px 0; font-size: 13px; }
.cmp-facts div { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.cmp-facts dt { color: var(--muted); }
.cmp-facts dd { margin: 0; font-weight: 700; text-align: right; }

/* Price history on card pages */
.price-hist { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.price-hist .spark { display: block; color: var(--muted); }
.price-hist .spark.up { color: var(--good); }
.price-hist .spark.down { color: var(--bad, #ef5350); }
.price-hist .btn { justify-self: start; }
.stat-reg span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.stat-help { margin-top: 8px; font-size: 13px; }
.stat-help summary { cursor: pointer; color: var(--muted); }
.stat-help p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }

/* ================= Feel: motion ================= */
/* Sheets spring up; the backdrop fades. */
@keyframes sheet-spring { 0% { transform: translateY(46px) scale(0.985); opacity: 0.2; } 60% { transform: translateY(-4px) scale(1.002); opacity: 1; } 100% { transform: none; } }
dialog.sheet[open] { animation: sheet-spring 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.1); }
dialog.sheet[open]::backdrop { animation: fade 0.3s ease-out; }

/* A new page glides in, section by section. */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#content.page-enter > * { animation: page-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#content.page-enter > *:nth-child(2) { animation-delay: 0.04s; }
#content.page-enter > *:nth-child(3) { animation-delay: 0.08s; }
#content.page-enter > *:nth-child(4) { animation-delay: 0.12s; }
#content.page-enter > *:nth-child(5) { animation-delay: 0.16s; }
#content.page-enter > *:nth-child(n + 6) { animation-delay: 0.2s; }
/* Card grids deal in like a hand of cards. */
@keyframes deal { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(0.97); } to { opacity: 1; transform: none; } }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > * { animation: deal 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(2) { animation-delay: 0.03s; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(3) { animation-delay: 0.06s; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(4) { animation-delay: 0.09s; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(5) { animation-delay: 0.12s; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(6) { animation-delay: 0.15s; }
#content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *:nth-child(n + 7) { animation-delay: 0.18s; }

/* Press: buttons give a little, and a soft ripple spreads from your finger. */
.btn, .tool-btn, .chip, .kpi, .mini-row, nav button, .seg button { transition: transform 0.12s ease, background-color 0.15s, box-shadow 0.15s; }
.btn:active, .tool-btn:active, .chip:active, .kpi:active, .mini-row:active, .seg button:active { transform: scale(0.965); }
nav button:active { transform: scale(0.92); }
.rippling { position: relative; overflow: hidden; isolation: isolate; }
.rippling::after { content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: 0.22; pointer-events: none; z-index: -1; animation: ripple 0.55s ease-out forwards; }
@keyframes ripple { to { transform: scale(28); opacity: 0; } }

/* A card flying into Collection, and the tab catching it. */
.fly-card { position: fixed; z-index: 1000; border-radius: 8px; object-fit: cover; pointer-events: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 2px color-mix(in srgb, var(--game-color, #f08a5d) 60%, transparent); will-change: transform, opacity; }
@keyframes nav-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22) translateY(-3px); } 65% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes nav-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--game-color, #f08a5d) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
[data-nav].nav-pop { animation: nav-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
[data-nav].nav-pop::before { content: ""; position: absolute; inset: 4px 18%; border-radius: 14px; animation: nav-glow 0.6s ease-out; pointer-events: none; }
nav [data-nav] { position: relative; }

/* Toasts spring up; a success toast draws its own check. */
#toast { transition: opacity 0.2s, transform 0.42s cubic-bezier(0.2, 1.3, 0.3, 1); }
#toast .toast-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: #1f9d62; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#toast .toast-ico circle { stroke-dasharray: 63; stroke-dashoffset: 63; }
#toast .toast-ico path { stroke-dasharray: 16; stroke-dashoffset: 16; }
#toast.show .toast-ico circle { animation: draw 0.45s ease-out forwards; }
#toast.show .toast-ico path { animation: draw 0.3s 0.3s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Tabs: the selected one settles in. */
@keyframes tab-settle { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
:is(.seg, .segmented, [role="tablist"]) :is(.on, [aria-selected="true"]) { animation: tab-settle 0.3s cubic-bezier(0.3, 1.3, 0.5, 1); }

@media (prefers-reduced-motion: reduce) {
  dialog.sheet[open], #content.page-enter > *, #content.page-enter :is(.card-grid, .deck-grid, .tdeck-list) > *, [data-nav].nav-pop, :is(.seg, .segmented, [role="tablist"]) :is(.on, [aria-selected="true"]) { animation: none !important; }
  .rippling::after { display: none; }
  .btn:active, .tool-btn:active, .chip:active, .kpi:active, .mini-row:active, nav button:active, .seg button:active { transform: none; }
  #toast .toast-ico circle, #toast .toast-ico path { stroke-dashoffset: 0; animation: none !important; }
}

/* Loading placeholders */
.skel-card { display: grid; gap: 6px; }
.skel-img, .skel-line { display: block; border-radius: 10px; background: linear-gradient(100deg, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.13) 40%, rgba(255,255,255,0.05) 60%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; }
.skel-img { aspect-ratio: 63 / 88; }
.skel-line { height: 10px; border-radius: 5px; }
.skel-line.short { width: 55%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-img, .skel-line { animation: none; } }
/* Opened card lists deal in. */
.tier.on .card-grid > * { animation: deal 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tier.on .card-grid > *:nth-child(2) { animation-delay: 0.04s; }
.tier.on .card-grid > *:nth-child(3) { animation-delay: 0.08s; }
.tier.on .card-grid > *:nth-child(n + 4) { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .tier.on .card-grid > * { animation: none; } }
.price-gap { margin: 6px 0 0; }
.cd-prices .price-gap { flex-basis: 100%; }
/* Narrow phones: tool buttons in page headers go icon-only so the row fits on one line. */
@media (max-width: 420px) {
  .page-head .head-actions .tool-btn span { display: none; }
  .page-head .head-actions .tool-btn { padding-inline: 10px; }
}

/* Gestures */
.lot.swiping { position: relative; }
.lot.swiping::after { content: "Remove one"; position: absolute; top: 0; bottom: 0; left: 100%; width: 140px; display: grid; place-items: center; border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--bad, #ef5350) 30%, var(--surface)); color: #fff; font-weight: 800; font-size: 13px; transition: background 0.15s; }
.lot.swipe-armed::after { background: var(--bad, #ef5350); }
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 70px); z-index: 30; width: 38px; height: 38px; margin-top: -40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); opacity: 0; transform: translate(-50%, 0); pointer-events: none; transition: opacity 0.2s; }
.ptr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ptr.armed { color: var(--game-color, #f08a5d); }
.ptr.done { transition: opacity 0.25s, transform 0.25s; }

/* Search suggestions */
.suggest { position: absolute; z-index: 60; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; background: rgba(22, 24, 30, 0.97); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); animation: pop-in 0.16s ease-out; }
.suggest button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.suggest button:hover, .suggest button.on { background: rgba(255, 255, 255, 0.08); }
.suggest-head { margin: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.suggest .sg-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }

/* First-run tour */
.tour { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center; padding: 16px; background: rgba(6, 7, 10, 0.72); backdrop-filter: blur(6px); animation: fade 0.25s ease-out; }
.tour.leaving { opacity: 0; transition: opacity 0.25s; }
.tour-card { position: relative; width: min(100%, 440px); margin-bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 28px 22px 20px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--game-color, #f08a5d) 16%, #191b21), #14161b 60%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); animation: sheet-spring 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.1); }
.tour-art { width: 96px; height: 96px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 28px; color: var(--game-color, #f08a5d); background: color-mix(in srgb, var(--game-color, #f08a5d) 14%, transparent); }
.tour-art svg { width: 64px; height: 64px; }
.tour-card h2 { margin: 0 0 8px; font-size: 1.45rem; }
.tour-card p { margin: 0 auto; max-width: 34ch; color: var(--muted); line-height: 1.5; }
.tour-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0; }
.tour-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); transition: width 0.25s, background 0.25s; }
.tour-dots i.on { width: 22px; background: var(--game-color, #f08a5d); }
.tour-actions { display: flex; justify-content: space-between; gap: 10px; }
.tour-actions .btn { min-width: 110px; }
.tour-skip { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; padding: 6px; }
.tour-card[data-step] .tour-art, .tour-card[data-step] h2, .tour-card[data-step] p { animation: page-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (min-width: 700px) { .tour { place-items: center; } }
@media (prefers-reduced-motion: reduce) { .tour, .tour-card, .tour-card[data-step] * { animation: none !important; } }

/* Tablets and landscape: card pages in two columns, the art pinned on the left. */
/* "Roomy" screens: tablets (800+ wide) and foldable inner screens (about 680+ wide and roughly
   square, like the Galaxy Z Fold, Pixel Fold and iPhone Fold). Normal phones stay in phone mode. */
@media (min-width: 680px) and (min-height: 560px) and (min-aspect-ratio: 3/4), (min-width: 800px) and (min-height: 560px) {
  dialog.sheet:has(.cs-hero) { max-width: 1040px; width: min(94vw, 1040px); }
  #sheetBody:has(> .cs-hero) { display: grid; grid-template-columns: minmax(300px, 40%) 1fr; column-gap: 28px; align-items: start; }
  #sheetBody:has(> .cs-hero) > * { grid-column: 2; min-width: 0; }
  #sheetBody:has(> .cs-hero) > .sheet-head { grid-column: 1 / -1; }
  #sheetBody:has(> .cs-hero) > .cs-hero { grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 64px; height: min(78vh, 640px); margin: 0; border-radius: 18px; overflow: hidden; }
  #sheetBody:has(> .cs-hero) > .cs-hero .cs-art { width: 100%; height: 100%; object-fit: cover; }
  #sheetBody:has(> .cs-hero) > .cs-title { margin-top: 0; padding-right: 60px; }
}

/* Roomy screens: Home lays its sections side by side under the full-width hero. */
@media (min-width: 680px) and (min-height: 560px) and (min-aspect-ratio: 3/4), (min-width: 800px) and (min-height: 560px) {
  body[data-view="home"] #content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
  body[data-view="home"] #content > * { grid-column: auto; min-width: 0; margin-top: 0; }
  body[data-view="home"] #content > :is(.home-hero, .game-switch, .game-choice-list, .install-nudge, .note, .kpis, .page-head, details, p, .route-back) { grid-column: 1 / -1; }
  body[data-view="home"] #content > .game-choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body[data-view="home"] #content > .quick { display: grid; grid-template-columns: 1fr; gap: 10px; }
  body[data-view="home"] #content > .quick > * { width: auto; max-width: none; }
  body[data-view="home"] #content > section, body[data-view="home"] #content > div { margin-bottom: 16px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
/* Dual-screen devices that report a fold down the middle (screen spanning): art on one side of
   the fold, details on the other. */
@media (horizontal-viewport-segments: 2) {
  dialog.sheet:has(.cs-hero) { max-width: none; width: 100vw; }
  #sheetBody:has(> .cs-hero) { display: grid; grid-template-columns: env(viewport-segment-width 0 0, 50vw) 1fr; column-gap: calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw) + 16px); }
  #sheetBody:has(> .cs-hero) > * { grid-column: 2; min-width: 0; }
  #sheetBody:has(> .cs-hero) > .sheet-head { grid-column: 1 / -1; }
  #sheetBody:has(> .cs-hero) > .cs-hero { grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 64px; height: min(80vh, 680px); }
}

/* Deliberate card actions: generous targets, compact art, no nested name picker. */
.quick-card-heading { display:flex; align-items:center; gap:16px; margin:4px 0 18px; }
.quick-card-heading > div { min-width:0; display:grid; gap:5px; }
.quick-card-heading b { font-size:1.1rem; line-height:1.35; }
.quick-card-heading small { color:var(--muted); }
.quick-card-thumb { width:56px; height:78px; flex:none; object-fit:contain; border-radius:7px; }
.card-action-list { display:grid; gap:6px; }
.card-action-list > button { display:flex; align-items:center; gap:14px; min-height:58px; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 16px; color:var(--text); touch-action:pan-y; transition:background .16s, border-color .16s; }
.card-action-list > button:hover, .card-action-list > button:focus-visible { border-color:var(--gold); background:var(--surface-2); }
.card-action-list > button > .ico { width:22px; height:22px; color:var(--gold); flex:none; }
.card-action-list span:not(.binder-swatch) { display:grid; gap:3px; }
.card-action-list small { color:var(--muted); font-weight:400; }
.binder-swatch { width:24px; height:30px; border-radius:4px; background:var(--binder-color); box-shadow:inset 3px 0 #0003; }
.compare-tray { position:fixed; z-index:45; bottom:calc(90px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 24px)); padding:12px 14px; border-radius:18px; border:1px solid var(--line); background:var(--surface); box-shadow:0 12px 35px #0006; display:flex; align-items:center; justify-content:space-between; gap:12px; animation:compare-tray-in .2s ease-out; }
.compare-tray > div { display:flex; align-items:center; gap:12px; min-width:0; }
.compare-tray span { display:grid; gap:3px; min-width:0; }
.compare-tray b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-tray small { color:var(--muted); }
.compare-tray .compare-thumb { width:36px; height:50px; object-fit:contain; border-radius:5px; }
.choosing-compare #content { padding-bottom:180px; }
.choosing-compare [data-act="card"],.choosing-compare [data-act="tCard"] { cursor:copy; }
[data-act="card"], [data-act="tCard"] { -webkit-touch-callout:none; user-select:none; }
.quote-warning { margin:12px 0; padding:12px 14px; border:1px solid #d6b35b66; background:#d6b35b0c; border-radius:12px; }
.quote-warning summary { color:#e6c780; font-size:.85rem; }
#sheetBody.sheet-step { animation:sheet-step-in .18s ease-out; }
@keyframes sheet-step-in { from { opacity:.35; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes compare-tray-in { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@media(min-width:900px) { .compare-tray { bottom:24px; } }
@media(prefers-reduced-motion:reduce) { #sheetBody.sheet-step,.compare-tray { animation:none; } .card-action-list > button { transition:none; } }

.cs-panel.tab-enter { animation:sheet-step-in .18s ease-out; }
@media(prefers-reduced-motion:reduce) { .cs-panel.tab-enter { animation:none; } }

.cmp-effects { text-align:left; font-size:13px; margin:10px 0; width:100%; }
.cmp-effects summary { color:var(--muted); cursor:pointer; }
.cmp-effects p { white-space:pre-line; line-height:1.55; padding-top:8px; }

.cam-status { white-space:normal; overflow:visible; text-overflow:clip; text-align:center; line-height:1.3; width:max-content; max-width:calc(100% - 24px); border-radius:18px; }
.cam-status .cam-dot { flex:none; }

/* ---------- Deck Power (all games) ---------- */
.power-chip { display: inline-flex; align-items: baseline; gap: 3px; }
.power-chip em { font-style: normal; font-weight: 800; font-size: 13px; padding: 0 6px; border-radius: 6px; }
.power-chip.p-hi em { background: rgba(111, 210, 154, 0.25); color: #a6f0c4; }
.power-chip.p-mid em { background: rgba(232, 185, 91, 0.25); color: #ffd98a; }
.power-chip.p-lo em { background: rgba(240, 138, 126, 0.25); color: #ffb3a8; }
.meta-match { display: grid; gap: 6px; }
.meta-match.hit { border-left: 3px solid var(--good, #6fd29a); padding-left: 10px; }
.meta-match .link.small { padding: 0; }
/* Pokémon / Yu-Gi-Oh! tiles use the full card picture: frame the artwork area. */
.tcg-tile .tile-card-art, .tcg-tile .tile-art .img-missing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transform: scale(1.35); transform-origin: 50% 22%; }
.tile-ygo .tile-card-art { object-position: 50% 30%; transform: scale(1.55); transform-origin: 50% 32%; }
.tcg-tile .tile-art { position: absolute; inset: 0; overflow: hidden; }
.chip.bad-chip { color: #ffb3a8; }
.chip.ok-chip { color: #a6f0c4; }
.tcg-tile .tile-card-art.cropped { transform: none; object-position: 50% 35%; }

/* Binder: the next/previous page lies underneath and is revealed as you drag the page. */
.stash-open-book > .stash-under, .stash-open-book > .stash-pocket-page { grid-column: 2; grid-row: 1; }
.stash-under { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px; border-radius: 6px; background: linear-gradient(160deg, #1f2631, #171c24); z-index: 1; pointer-events: none; filter: brightness(calc(0.45 + var(--reveal, 0) * 0.55)); }
.stash-under[hidden] { display: none; }
.stash-pocket-page { z-index: 2; }
.stash-pocket-page.turning::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 7; opacity: calc(var(--turn, 0) * 1.4); background: linear-gradient(90deg, #0000 0%, #0000 35%, #0006 70%, #000b 100%); }
.stash-pocket-page.turning[style*="right center"]::after { background: linear-gradient(270deg, #0000 0%, #0000 35%, #0006 70%, #000b 100%); }
.stash-pocket-page.turning { box-shadow: calc(var(--turn, 0) * -18px) 6px 22px #000a; }
@media (max-width: 520px) { .stash-under { gap: 6px; } }
.upgrade-row { gap: 10px; }
.upgrade-row .ellip small { display: block; }
.upgrade-side { display: flex; align-items: center; gap: 8px; flex: none; }
/* ================= Collection: calm header, tidy rows ================= */
/* One slim line: the value (tap for the Value tab), the count, a refresh button. */
.coll-summary { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.coll-summary .cs-value { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.coll-summary .cs-value b { font: 800 28px/1.1 Manrope, system-ui, sans-serif; letter-spacing: -0.02em; }
.coll-summary .cs-value span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-summary .icon .ico, .coll-summary .icon svg { width: 20px; height: 20px; }
/* Search on top, filters as a single row of small pills that scrolls sideways. */
.coll-tools { display: grid; gap: 8px; margin-bottom: 12px; }
.coll-tools input[type="search"] { width: 100%; }
.filter-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; mask-image: linear-gradient(90deg, #000 88%, transparent); }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills select { flex: none; width: auto; max-width: 62vw; min-height: 36px; padding: 6px 30px 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background-position: right 10px center; }
/* Rows: details wrap onto a second line instead of being cut; a slimmer stepper. */
.display-list .lot { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
.display-list .lot-name { font-size: 16px; line-height: 1.25; text-align: left; }
.display-list .lot-sub { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 4px; line-height: 1.35; }
.display-list .lot-sub > span:last-child { overflow: visible; }
.display-list .lot-sub .tset, .display-list .lot-sub .set-badge, .display-list .lot-sub .emblems { flex: none; }
.display-list .lot-side { align-self: stretch; align-content: space-between; gap: 6px; }
.display-list .lot-side .stepper { gap: 2px; padding: 2px; }
.display-list .lot-side .stepper button { width: 30px; height: 30px; min-height: 30px; }
.display-list .lot-side .stepper b { min-width: 18px; font-size: 14px; }
@media (max-width: 380px) { .display-list .lot { grid-template-columns: 52px minmax(0, 1fr) auto; } .display-list .lot-name { font-size: 15px; } }

/* Trade tab */
.trade { display: grid; gap: 14px; }
.trade-head { display: flex; align-items: baseline; gap: 10px; }
.trade-head b { font: 800 26px/1 Manrope, system-ui, sans-serif; }
.trade-block h3 { margin: 0; }
.trade-block > p { margin: 2px 0 10px; }
.trade-row { display: flex; align-items: center; gap: 8px; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.trade-card { flex: 1; min-width: 0; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.trade-card .mini-art, .trade-card img { grid-row: span 2; width: 44px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; }
.trade-card span { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card small { color: var(--muted); font-size: 12px; }
.trade-plus { color: var(--muted); font-weight: 800; }
.trade-total { flex: none; display: grid; justify-items: end; gap: 2px; }
.trade-total b { font-size: 15px; }
.tdiff { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.tdiff.even { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.tdiff.over { color: #f5b335; background: rgba(245, 179, 53, 0.14); }
.tdiff.under { color: #8fb8ff; background: rgba(143, 184, 255, 0.14); }
.trade-empty { color: var(--muted); font-size: 14px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); }

/* Deck Power: weaknesses, simulation, breakdown */
.power .pw-headline { margin-top: 6px; color: var(--text); }
.pw-profile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pw-profile span { flex: 1 1 72px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .78rem; color: var(--muted); }
.pw-profile b { font-size: 1.05rem; color: var(--text); }
.pw-issue { padding: 12px 0 12px 14px; border-left: 3px solid color-mix(in srgb, var(--warn, #e0a240) 55%, transparent); margin: 10px 0; }
.pw-issue.major { border-left-color: var(--bad, #e5534b); }
.pw-issue.mid { border-left-color: var(--warn, #e0a240); }
.pw-issue p { margin: 4px 0; line-height: 1.45; }
.pw-issue-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pw-lost { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; color: var(--bad, #e5534b); }
.pw-issue:not(.major) .pw-lost { color: var(--warn, #e0a240); }
.pw-cards { font-size: .82rem; line-height: 1.6; color: var(--muted); }
.pw-cards .link { font-size: inherit; padding: 0; min-height: 0; }
.pw-fix { color: var(--muted); font-style: italic; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-chip { padding: 6px 10px; border-radius: 999px; font-size: .8rem; background: color-mix(in srgb, var(--good, #3fb68b) 14%, transparent); color: var(--text); }
.pw-chip b { color: var(--good, #3fb68b); font-weight: 650; }
.pw-sim { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.pw-sim:first-of-type { border-top: 0; }
.pw-sim b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.pw-sim.ok b { color: var(--good, #3fb68b); }
.pw-sim.near b { color: var(--warn, #e0a240); }
.pw-sim.bad b { color: var(--bad, #e5534b); }
.pw-track { position: relative; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.pw-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: currentColor; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.pw-sim.ok .pw-fill { color: var(--good, #3fb68b); }
.pw-sim.near .pw-fill { color: var(--warn, #e0a240); }
.pw-sim.bad .pw-fill { color: var(--bad, #e5534b); }
.pw-goal { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; opacity: .7; }
details.ingredient { border-top: 1px solid var(--line); padding: 8px 0; }
details.ingredient > summary { list-style: none; cursor: pointer; display: grid; gap: 6px; }
details.ingredient > summary::-webkit-details-marker { display: none; }
details.ingredient[open] > summary b { color: var(--accent); }
.role-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.role-chip { font-size: .68rem; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); white-space: nowrap; }
.odds-name { font-weight: 600; text-align: left; padding: 0; min-height: 0; }
.score-panel.power { flex-wrap: wrap; }
.score-panel.power > div:not(.pw-profile) { flex: 1 1 180px; min-width: 0; }
.pw-profile { flex: 1 1 100%; }
.pw-profile span { flex: 1 1 56px; }
.metrics td .role-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; padding: 0; }
.metrics td .role-chips .role-chip { display: inline-block; margin: 0; padding: 2px 7px; }

/* Pokémon art crop: the card picture framed to its art window, covering the box like an art crop */
.pk-crop { container-type: size; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.pk-crop .pk-win { position: relative; overflow: hidden; flex: none; aspect-ratio: 1.68; width: max(100cqw, 168cqh); }
.pk-crop .pk-win img { position: absolute; left: 0; top: 0; width: 122%; max-width: none; height: auto; transform: translate(-9%, -10.8%); }
.home-hero.ptcg .hh-art.pk-crop { transform: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-art .tile-pk { position: absolute; inset: 0; width: 100%; height: 100%; }
.nc-art:has(.nc-pk) { background: none; }
.nc-art .nc-pk { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== Card tiers: rarity + price, one colour scale for all three games ===== */
[data-tier] { --tier: #9aa3ad; }
.tier-gem { position: absolute; top: 6px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 99px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: rgba(8, 10, 16, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 55%, transparent); pointer-events: none; }
.tier-gem i { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; background: var(--tier); box-shadow: 0 0 8px var(--tier); }
[data-tier="t0"] .tier-gem { display: none; }
/* List views: a slim tier rail and a ring around the art. */
.display-list .lot[data-tier] { position: relative; }
.display-list .lot[data-tier]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tier); opacity: .9; }
.display-list .lot[data-tier="t0"]::before { opacity: .35; }
.display-list .lot[data-tier] .lot-art { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tier) 75%, transparent); }
.display-list .lot[data-tier] .lot-side .price { color: color-mix(in srgb, var(--tier) 70%, var(--text)); }
.display-list .lot .tile-chrome, .display-list .lot .tier-gem { display: none; }
/* Search and set tiles get the same frame. */
.card-grid .grid-card[data-tier] .card-img { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tier) 80%, transparent), 0 10px 26px -14px var(--tier); }
.card-grid .grid-card[data-tier="t0"] .card-img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent); }
.card-grid .grid-card[data-tier] .grid-meta span:last-child { color: color-mix(in srgb, var(--tier) 70%, var(--text)); }

/* ===== Wanted cards (the wishlist, inside the collection) ===== */
.lot.wanted { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 3.5%, transparent) 9px 10px), var(--surface); }
.lot.wanted .lot-art img { filter: grayscale(1) brightness(.6) contrast(1.05); opacity: .8; transition: filter .45s ease, opacity .45s ease; }
.lot.wanted .lot-art::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; border: 1.5px dashed color-mix(in srgb, var(--text) 40%, transparent); background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 42%); pointer-events: none; }
.lot.wanted:is(:hover, .peek) .lot-art img { filter: none; opacity: 1; }
.lot.wanted .lot-name { color: color-mix(in srgb, var(--text) 72%, transparent); }
.lot.wanted .lot-side .price { color: var(--muted); }
.want-tag { position: absolute; left: 50%; bottom: 8px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: rgba(10, 10, 16, .82); color: #ff8fa3; box-shadow: inset 0 0 0 1px #ff8fa355; }
.want-tag svg { width: 12px; height: 12px; fill: currentColor; }
.display-list:not(.view-gallery *) .want-tag { font-size: 0; padding: 3px; bottom: 3px; gap: 0; }
.view-gallery .display-list .want-tag { font-size: 10px; padding: 3px 9px; gap: 4px; bottom: 8px; }
.view-gallery .display-list .lot.wanted .tile-chrome { opacity: .55; }
.want-chip { display: inline-block; font-size: 11px; font-weight: 700; color: #ff8fa3; background: rgba(255, 120, 150, .12); padding: 1px 8px; border-radius: 99px; margin-right: 6px; }
.want-actions { display: inline-flex; align-items: center; gap: 6px; }
.want-got { min-height: 32px; padding: 4px 11px; }
.want-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.want-add { margin: 4px 0 10px; }
.want-add .btn svg { width: 16px; height: 16px; }

/* ===== Motion: cards are dealt in on a new page, lean toward your finger with a holo shine ===== */
@media (prefers-reduced-motion: no-preference) {
  #content.page-enter .display-list.deal .lot { animation: deal-in .58s cubic-bezier(.2, .9, .25, 1.12) backwards; animation-delay: calc(var(--i, 0) * 34ms); transform-origin: 50% 90%; }
  @keyframes deal-in { from { opacity: 0; transform: perspective(800px) translateY(22px) rotateX(22deg) rotateY(-12deg) scale(.92); } }
  :is(.lot-art, .cd-img, .tile-art, .quick-card-thumb) { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .tilting { transform: perspective(700px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(1.035); transition: transform .08s linear; z-index: 4; }
  .lot-art.tilting::before, .cd-img.tilting::before, .tile-art.tilting::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 42%), linear-gradient(115deg, transparent 20%, rgba(255, 0, 170, .28) 36%, rgba(0, 220, 255, .28) 50%, rgba(255, 240, 0, .24) 64%, transparent 80%); background-size: 100% 100%, 220% 220%; background-position: 0 0, var(--mx, 50%) var(--my, 50%); }
  .view-symbols .lot-art.tilting::before { content: '◈'; mix-blend-mode: normal; background: none; opacity: 1; position: static; }
  /* Hold menu: the card flips up out of the pack. */
  .quick-card-thumb { animation: pocket-pop .6s cubic-bezier(.2, 1.35, .35, 1) both; transform-origin: 50% 60%; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
  @keyframes pocket-pop { 0% { opacity: 0; transform: perspective(700px) rotateY(160deg) translateY(30px) scale(.55); } 60% { opacity: 1; transform: perspective(700px) rotateY(-12deg) translateY(-6px) scale(1.06); } 100% { transform: none; } }
  .card-action-list > button { animation: menu-rise .42s cubic-bezier(.2, .9, .3, 1.1) backwards; }
  .card-action-list > button:nth-child(2) { animation-delay: 40ms; } .card-action-list > button:nth-child(3) { animation-delay: 80ms; } .card-action-list > button:nth-child(4) { animation-delay: 120ms; } .card-action-list > button:nth-child(5) { animation-delay: 160ms; }
  @keyframes menu-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
  /* While you hold a card, it sinks a little and a ring fills, so you know the menu is coming. */
  .holding { transform: scale(.96); transition: transform .45s ease; }
  .holding::after { content: ""; position: absolute; inset: -3px; z-index: 5; border-radius: 12px; pointer-events: none; border: 2px solid var(--accent); animation: hold-ring .48s linear forwards; }
  @keyframes hold-ring { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
}
.quick-card-heading .quick-card-thumb { width: 86px; height: 120px; border-radius: 9px; }
.pw-field { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); border-left: 3px solid var(--muted); }
.pw-field.warn { border-left-color: var(--warn, #e0a240); }
.pw-field.ok { border-left-color: var(--good, #3fb68b); }
.pw-field p { margin: 6px 0 0; line-height: 1.45; }
/* Emblem icons on collection cards keep their own size (card-art image rules don't apply). */
.lot-art .tile-chrome img, .lot-art .tile-chrome .img-missing { width: 15px !important; height: 15px !important; object-fit: contain !important; display: inline-block; border-radius: 0 !important; }
.lot-art .tile-chrome img.pkr { width: auto !important; height: 10px !important; }
.lot-art .tile-chrome .ygo-pack { width: auto !important; }

/* ===== Collection gallery: the clean search-tile look ===== */
/* Full card, emblem pills on the art, name and price under it, a thin price-tier ring. No boxes. */
.view-gallery .display-list { gap: 18px 14px; }
.view-gallery .display-list .lot { background: none; border: 0; box-shadow: none; padding: 0; gap: 8px; border-radius: 0; }
.view-gallery .display-list .lot::before { display: none; }
.view-gallery .display-list .lot .lot-art { border-radius: 4.6% / 3.3%; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tier, #9aa3ad) 70%, transparent), 0 10px 24px -14px rgba(0,0,0,.8); }
.view-gallery .display-list .lot:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]) .lot-art { box-shadow: 0 0 0 2px var(--tier), 0 0 22px -6px var(--tier), 0 10px 24px -14px rgba(0,0,0,.8); }
.view-gallery .display-list .lot[data-tier="t0"] .lot-art { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -14px rgba(0,0,0,.8); }
.view-gallery .display-list .lot .lot-art img { border-radius: 0; }
.view-gallery .display-list .lot .tile-chrome { display: block; }
.view-gallery .display-list .lot .tier-gem { display: none; }
.view-gallery .display-list .lot .lot-info { display: block; min-width: 0; padding: 0 2px; }
.view-gallery .display-list .lot .lot-name { display: block; width: 100%; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.view-gallery .display-list .lot .lot-name :is(.imp, .row-emb) { display: none; }
.view-gallery .display-list .lot .lot-sub { display: none; }
.view-gallery .display-list .lot .lot-side { padding: 0 2px; flex-wrap: nowrap; gap: 6px; }
.view-gallery .display-list .lot .lot-side .price { font-weight: 700; font-size: 15px; color: color-mix(in srgb, var(--tier, #9aa3ad) 75%, var(--text)); }
.view-gallery .display-list .lot[data-tier="t0"] .lot-side .price { color: var(--muted); }
.view-gallery .display-list .lot .stepper { transform: scale(.86); transform-origin: right center; }
/* Wanted in the gallery: the same card, greyed, a dashed outline instead of the ring. */
.view-gallery .display-list .lot.wanted { background: none; border: 0; }
.view-gallery .display-list .lot.wanted .lot-art { box-shadow: none; outline: 1.5px dashed rgba(255,255,255,.28); outline-offset: 3px; }
.view-gallery .display-list .lot.wanted .lot-sub { display: block; margin-top: 2px; }
.view-gallery .display-list .lot.wanted .lot-sub > :not(.want-chip) { display: none; }
.view-gallery .display-list .lot.wanted .want-got { min-height: 30px; padding: 3px 10px; font-size: 13px; }
#content.view-gallery .display-list .lot, #content.view-gallery .display-list .lot.wanted { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#content.view-gallery .display-list .lot[data-tier]::before { display: none; }
#content.view-gallery .display-list .lot.wanted .lot-sub { font-size: 0; }
#content.view-gallery .display-list .lot.wanted .lot-sub .want-chip { font-size: 11px; }
#content.view-gallery .display-list .lot.wanted .lot-side .price { font-size: 14px; }
#content.view-gallery .display-list .lot.wanted .want-x { width: 28px; height: 28px; font-size: 16px; flex: none; }

/* ===== Tier effects on collection cards: thicker ring; purple swirls, gold shines, orange glitters ===== */
#content.view-gallery .display-list .lot:not(.wanted) .lot-art { box-shadow: 0 0 0 3px var(--tier, #9aa3ad), 0 10px 24px -14px rgba(0,0,0,.8); isolation: isolate; }
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art { box-shadow: 0 0 0 3px #8b939c, 0 10px 24px -14px rgba(0,0,0,.8); }
#content.view-gallery .display-list .lot[data-tier="t2"]:not(.wanted) .lot-art { box-shadow: 0 0 0 3px var(--tier), 0 0 18px -4px var(--tier), 0 10px 24px -14px rgba(0,0,0,.8); }
#content.view-gallery .display-list .lot:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]):not(.wanted) .lot-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
/* Purple: a slow holographic swirl over the card and a breathing glow. */
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art { animation: tier-breathe 3.2s ease-in-out infinite; }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art::after { background: conic-gradient(from var(--swirl), rgba(180,108,255,.0), rgba(180,108,255,.38), rgba(80,200,255,.30), rgba(255,110,220,.32), rgba(180,108,255,.0)); mix-blend-mode: color-dodge; opacity: .55; animation: tier-swirl 7s linear infinite; }
/* Gold: a bright shine that sweeps across every few seconds. */
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { box-shadow: 0 0 0 3px var(--tier), 0 0 22px -4px var(--tier), 0 10px 24px -14px rgba(0,0,0,.8); }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art::after { background: linear-gradient(115deg, transparent 35%, rgba(255,240,180,.0) 40%, rgba(255,246,200,.75) 50%, rgba(255,214,90,.0) 60%, transparent 65%); background-size: 250% 100%; mix-blend-mode: overlay; animation: tier-shine 3.4s cubic-bezier(.45,.05,.3,1) infinite; }
/* Orange: glitter that twinkles, and a fiery glow that flickers. */
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { animation: tier-fire 2.4s ease-in-out infinite; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art::after {
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px) 0 0 / 23px 29px,
    radial-gradient(circle, #ffd27a 0 1.2px, transparent 2px) 9px 13px / 31px 37px,
    radial-gradient(circle, #fff3 0 1.5px, transparent 2.4px) 17px 5px / 41px 33px,
    linear-gradient(125deg, rgba(255,140,40,.0) 30%, rgba(255,170,60,.28) 50%, rgba(255,90,30,.0) 70%) 0 0 / 260% 100%;
  mix-blend-mode: screen; animation: tier-glitter 2.2s steps(6) infinite, tier-shine 3s ease-in-out infinite; }
@property --swirl { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tier-swirl { to { --swirl: 360deg; } }
@keyframes tier-breathe { 50% { box-shadow: 0 0 0 3px var(--tier), 0 0 26px -2px var(--tier), 0 10px 24px -14px rgba(0,0,0,.8); } 0%, 100% { box-shadow: 0 0 0 3px var(--tier), 0 0 12px -6px var(--tier), 0 10px 24px -14px rgba(0,0,0,.8); } }
@keyframes tier-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
@keyframes tier-glitter { 0% { opacity: .9; filter: hue-rotate(0deg); } 33% { opacity: .45; } 66% { opacity: 1; filter: hue-rotate(-15deg); } 100% { opacity: .6; } }
@keyframes tier-fire { 0%, 100% { box-shadow: 0 0 0 3px #ff7a1a, 0 0 18px -4px #ff7a1a, 0 10px 24px -14px rgba(0,0,0,.8); } 50% { box-shadow: 0 0 0 3px #ffa040, 0 0 30px 0 #ff5a10, 0 10px 24px -14px rgba(0,0,0,.8); } }
/* Orange glitter drifts: shift the sparkle layers so they don't sit still. */
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art::after { animation: tier-glitter 2.2s steps(6) infinite, tier-drift 6s linear infinite; }
@keyframes tier-drift { to { background-position: 23px -29px, -22px 50px, 58px -28px, -130% 0; } }
@media (prefers-reduced-motion: reduce) { #content.view-gallery .display-list .lot .lot-art, #content.view-gallery .display-list .lot .lot-art::after { animation: none !important; } }
#content.view-gallery .display-list .lot { overflow: visible; }
#content.view-gallery .display-list .lot:not(.wanted) .lot-art { outline: 3px solid var(--tier, #8b939c); outline-offset: -1px; }
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art { outline-color: #8b939c; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { animation: tier-fire 2.4s ease-in-out infinite, tier-fire-ring 2.4s ease-in-out infinite; }
@keyframes tier-fire-ring { 50% { outline-color: #ffb050; } }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { animation: tier-gold-ring 3.4s ease-in-out infinite; }
@keyframes tier-gold-ring { 50% { outline-color: #fff0b0; } }
/* Tier frame: a solid 5px band of the tier colour around the card (padding, so nothing covers it). */
#content.view-gallery .display-list .lot:not(.wanted) .lot-art { outline: 0; padding: 5px; border-radius: 12px; background: var(--tier, #8b939c); }
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art { background: linear-gradient(160deg, #a7afb8, #6f7780); }
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art { background: linear-gradient(160deg, #7be3a8, #2fae68); }
#content.view-gallery .display-list .lot[data-tier="t2"]:not(.wanted) .lot-art { background: linear-gradient(160deg, #8cc6ff, #2f7fe0); }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art { background: conic-gradient(from var(--swirl), #b46cff, #6fd0ff, #ff7ad9, #b46cff); animation: tier-swirl 6s linear infinite, tier-breathe 3.2s ease-in-out infinite; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { background: linear-gradient(115deg, #b8860b 0%, #ffd34d 30%, #fff6c9 45%, #ffd34d 60%, #b8860b 100%) 0 0 / 300% 100%; animation: tier-shine 3.4s cubic-bezier(.45,.05,.3,1) infinite; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { background: linear-gradient(115deg, #c2410c 0%, #ff7a1a 30%, #ffd08a 45%, #ff7a1a 60%, #c2410c 100%) 0 0 / 300% 100%; animation: tier-shine 2.6s ease-in-out infinite, tier-fire 2.4s ease-in-out infinite; }
#content.view-gallery .display-list .lot:not(.wanted) .lot-art > img, #content.view-gallery .display-list .lot:not(.wanted) .lot-art > .img-missing { border-radius: 7px; position: relative; z-index: 1; }
#content.view-gallery .display-list .lot:not(.wanted) .lot-art::after { inset: 5px; border-radius: 7px; }
#content.view-gallery .display-list .lot:not(.wanted) .lot-art .tile-chrome { left: 5px; right: 5px; top: 5px; }

/* ===== One look for every card thumbnail in the app: a price-tier ring drawn inside the edge ===== */
img[data-tier] { outline: 2px solid var(--tier); outline-offset: -2px; border-radius: 6px; }
img[data-tier="t0"] { outline-color: #8b939c; }
img[data-tier]:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]) { box-shadow: 0 0 12px -3px var(--tier); }
img[data-tier="t4"] { animation: tier-gold-ring 3.4s ease-in-out infinite; }
img[data-tier="t5"] { animation: tier-fire-ring 2.4s ease-in-out infinite; }
:is(.card-grid .grid-card, .grid-card) img.card-img[data-tier] { outline-width: 3px; outline-offset: -3px; border-radius: 4.6% / 3.3%; }
/* The collection gallery draws its own animated frame. */
#content.view-gallery .display-list .lot .lot-art > img[data-tier] { outline: 0; box-shadow: none; animation: none; }
.lot.wanted img[data-tier] { outline-style: dashed; }
@media (prefers-reduced-motion: reduce) { img[data-tier] { animation: none !important; } }
.card-grid .grid-card[data-tier] .card-img { box-shadow: none; }
.card-grid .grid-card:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]) .card-img { box-shadow: 0 0 16px -4px var(--tier); }

/* Deck Power: goldfish panel */
.pw-gold-head { font-weight: 600; line-height: 1.45; margin: 4px 0 12px; }
.pw-turns { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 18px 0 0; }
.pw-turn { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; gap: 4px; }
.pw-turn span { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); transition: height .6s cubic-bezier(.2,.8,.2,1); }
.pw-turn small { font-size: 10px; color: var(--muted); }
.pw-turn em { position: absolute; top: -2px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--text); }
.pw-outcomes { display: grid; gap: 8px; margin: 8px 0 12px; }
.pw-out .pw-fill { color: var(--good, #3fb68b); }
.pw-out.fragile .pw-fill { color: var(--warn, #e0a240); }
.pw-out.interOnly .pw-fill { color: #4aa3ff; }
.pw-out.brick .pw-fill { color: var(--bad, #e5534b); }
.pw-gmetrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.pw-gmetrics span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .8rem; color: var(--muted); border-left: 3px solid var(--good, #3fb68b); }
.pw-gmetrics span.bad { border-left-color: var(--warn, #e0a240); }
.pw-gmetrics b { font-size: 1.1rem; color: var(--text); }
.pw-plan { display: grid; gap: 8px; margin: 12px 0; }
.pw-plan p { margin: 0; line-height: 1.45; }
.pw-plan b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pw-sample { border-top: 1px solid var(--line); padding: 10px 0; }
.pw-sample summary { cursor: pointer; font-weight: 650; }
.pw-sample ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pw-sample li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; font-size: .88rem; line-height: 1.4; }
.pw-sample li b { color: var(--accent); }
.pw-hand { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pw-hand span { font-size: .78rem; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Cards with no tier (no price known) get no frame rather than a misleading grey one. */
#content.view-gallery .display-list .lot:not([data-tier]) .lot-art { padding: 0; background: var(--surface-2); box-shadow: none; animation: none; }
#content.view-gallery .display-list .lot[data-tier="tn"] .lot-art { padding: 0; background: var(--surface-2); box-shadow: none; animation: none; }
.display-list .lot[data-tier="tn"]::before { display: none; }
.pw-turn .pw-bar { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent, #e8b85a), color-mix(in srgb, var(--accent, #e8b85a) 40%, transparent)); }
.pw-turn em { top: -16px; } .pw-turns { padding-top: 22px; height: 130px; }

/* ===== Tier outlines v2: list (text) and compact (small card) views =====
   The whole row outline is the tier colour, drawn as a ring (mask) so it works on glass panels.
   Each tier loops on its own seamless rhythm: full-turn rotations and symmetric pulses only, so
   nothing jumps or restarts visibly. Same rules in all three games. */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.view-symbols .display-list .lot-art { display: none; }
.view-symbols .display-list .lot { grid-template-columns: minmax(0, 1fr) auto; }
.view-symbols .display-list .lot:has(.batch-mark) { grid-template-columns: auto minmax(0, 1fr) auto; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier] { border-color: transparent; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier] .lot-art { box-shadow: none; }
:is(.view-symbols, .view-compact) .display-list .lot img[data-tier] { outline: 0; box-shadow: none; animation: none; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier]::before {
  content: ""; position: absolute; inset: 0; width: auto; top: 0; bottom: 0; left: 0; right: 0; border-radius: inherit; padding: 2px; opacity: 1; pointer-events: none;
  background: var(--tier);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="tn"]::before { display: none; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="tn"] { border-color: var(--line); }
/* Grey: a quiet silver ring with a slow, faint gleam travelling around it. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t0"]::before { background: conic-gradient(from var(--ring), #6f7780, #b8c0c8, #6f7780 30%, #6f7780 70%, #a2aab3, #6f7780); animation: ring-spin 14s linear infinite; }
/* Green: a soft emerald ring that breathes. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t1"]::before { background: conic-gradient(from var(--ring), #2fae68, #7be3a8, #2fae68 40%, #1f8a50, #2fae68); animation: ring-spin 11s linear infinite, ring-breathe 4s ease-in-out infinite alternate; }
/* Blue: a cool sheen that circles steadily. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t2"]::before { background: conic-gradient(from var(--ring), #2f7fe0, #9fd2ff, #2f7fe0 35%, #1d5fb0 65%, #2f7fe0); animation: ring-spin 8s linear infinite; }
/* Purple: holographic colours swirling around the edge. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t3"]::before { padding: 2.5px; background: conic-gradient(from var(--ring), #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #b46cff); animation: ring-spin 6s linear infinite; }
/* Gold: a bright glint chasing around a gold ring. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t4"]::before { padding: 2.5px; background: conic-gradient(from var(--ring), #b8860b, #ffd34d 20%, #fffbe6 25%, #ffd34d 30%, #b8860b 50%, #ffd34d 70%, #fffbe6 75%, #ffd34d 80%, #b8860b); animation: ring-spin 4.5s linear infinite; }
/* Orange: a fiery ring with a flickering glow. */
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t5"]::before { padding: 3px; background: conic-gradient(from var(--ring), #c2410c, #ff7a1a, #ffd08a, #ff7a1a, #c2410c, #ff5a10, #ffb050, #c2410c); animation: ring-spin 3.5s linear infinite; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t5"] { box-shadow: 0 0 18px -8px #ff7a1a; animation: ring-glow 1.8s ease-in-out infinite alternate; }
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t4"] { box-shadow: 0 0 16px -10px #ffd34d; }
/* Wanted rows: the ring dims and stays still. */
:is(.view-symbols, .view-compact) .display-list .lot.wanted::before { opacity: .4; animation: none; }
@keyframes ring-spin { to { --ring: 360deg; } }
@keyframes ring-breathe { from { opacity: .7; } to { opacity: 1; } }
@keyframes ring-glow { from { box-shadow: 0 0 12px -8px #ff7a1a; } to { box-shadow: 0 0 22px -6px #ff5a10; } }

/* Gallery frames: same seamless language (full-turn rotation), replacing the sweep that reset. */
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #6f7780, #b8c0c8, #6f7780 30%, #6f7780 70%, #a2aab3, #6f7780); animation: ring-spin 14s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #2fae68, #7be3a8, #2fae68 40%, #1f8a50, #2fae68); animation: ring-spin 11s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t2"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #2f7fe0, #9fd2ff, #2f7fe0 35%, #1d5fb0 65%, #2f7fe0); animation: ring-spin 8s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #b46cff); animation: ring-spin 6s linear infinite, tier-breathe 3.2s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #b8860b, #ffd34d 20%, #fffbe6 25%, #ffd34d 30%, #b8860b 50%, #ffd34d 70%, #fffbe6 75%, #ffd34d 80%, #b8860b); animation: ring-spin 4.5s linear infinite; box-shadow: 0 0 20px -6px #ffd34d, 0 10px 24px -14px rgba(0,0,0,.8); }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #c2410c, #ff7a1a, #ffd08a, #ff7a1a, #c2410c, #ff5a10, #ffb050, #c2410c); animation: ring-spin 3.5s linear infinite, tier-fire 1.8s ease-in-out infinite alternate; }
/* Gold gloss over the art: a soft rotating sheen instead of a sweep that restarts. */
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art::after { background: conic-gradient(from var(--ring) at 50% 50%, transparent 0 40%, rgba(255,246,200,.35) 50%, transparent 60% 100%); background-size: auto; mix-blend-mode: overlay; animation: ring-spin 4.5s linear infinite; }
/* Orange glitter: layers drift by exactly one tile, so the loop is invisible. */
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art::after {
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.6px) 0 0 / 23px 29px,
    radial-gradient(circle, #ffd27a 0 1.2px, transparent 2px) 9px 13px / 31px 37px,
    radial-gradient(circle, #fff6 0 1.5px, transparent 2.4px) 17px 5px / 41px 33px;
  animation: tier-twinkle 1.6s ease-in-out infinite alternate, tier-drift2 6s linear infinite; }
@keyframes tier-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes tier-drift2 { to { background-position: 23px -29px, -22px 50px, 58px -28px; } }
@media (prefers-reduced-motion: reduce) { .display-list .lot::before, .display-list .lot, .display-list .lot .lot-art, .display-list .lot .lot-art::after { animation: none !important; } }
/* Gallery cards on deck pages: badges on the art like everywhere else; the price moves to the free top-right corner. */
#content.view-gallery .display-list .lot .lot-art .tile-chrome { display: block; }
#content.view-gallery .display-list .lot .art-price { left: auto; right: 9px; bottom: auto; top: 9px; z-index: 3; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(8, 10, 16, .78); }
#content.view-gallery .display-list .deck-row:not([data-tier]) .lot-art .tile-chrome, #content.view-gallery .display-list .lot[data-tier="tn"] .lot-art .tile-chrome { left: 0; right: 0; top: 0; }

/* ===== Gallery frames v3: every tier visibly alive, each in its own way, all seamless ===== */
/* One animation on the frame (the rotation); glows pulse on the card row instead. */
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #6f7780 0%, #6f7780 38%, #dfe5ea 46%, #ffffff 50%, #dfe5ea 54%, #6f7780 62%, #6f7780 100%); animation: ring-spin 7s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #1f8a50 0%, #2fae68 20%, #b9ffd6 25%, #2fae68 30%, #1f8a50 50%, #2fae68 70%, #b9ffd6 75%, #2fae68 80%, #1f8a50 100%); animation: ring-spin 6s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t2"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #1d5fb0 0%, #2f7fe0 15%, #d6f0ff 20%, #2f7fe0 25%, #1d5fb0 33%, #2f7fe0 48%, #d6f0ff 53%, #2f7fe0 58%, #1d5fb0 66%, #2f7fe0 81%, #d6f0ff 86%, #2f7fe0 91%, #1d5fb0 100%); animation: ring-spin 5s linear infinite reverse; }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #7dffb2, #b46cff); animation: ring-spin 4s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #9a6f08 0%, #ffd34d 18%, #fffbe6 25%, #ffd34d 32%, #9a6f08 50%, #ffd34d 68%, #fffbe6 75%, #ffd34d 82%, #9a6f08 100%); animation: ring-spin 3.2s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { background: conic-gradient(from var(--ring), #a3330a, #ff7a1a, #ffe0a0, #ff5a10, #a3330a, #ff9a3a, #fff0c0, #ff5a10, #a3330a); animation: ring-spin 2.2s linear infinite; }
/* Glows: purple breathes, gold shimmers, orange flickers (symmetric, so the loop never jumps). */
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) { animation: glow-purple 3s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) { animation: glow-gold 2.4s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) { animation: glow-fire 1.1s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]):not(.wanted) { box-shadow: none !important; }
#content.view-gallery .display-list .lot:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]):not(.wanted) .lot-art { box-shadow: var(--glow, none), 0 10px 24px -14px rgba(0,0,0,.8); }
@property --glow-a { syntax: "<length>"; inherits: true; initial-value: 10px; }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) { --glow: 0 0 var(--glow-a) -2px #b46cff; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) { --glow: 0 0 var(--glow-a) -2px #ffd34d; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) { --glow: 0 0 var(--glow-a) 0 #ff6a14; }
@keyframes glow-purple { from { --glow-a: 8px; } to { --glow-a: 26px; } }
@keyframes glow-gold { from { --glow-a: 10px; } to { --glow-a: 24px; } }
@keyframes glow-fire { from { --glow-a: 14px; } to { --glow-a: 32px; } }

/* ===== Tier borders v4: animated with plain background-position (works in every browser).
   Each pattern tile slides exactly one tile per loop, so the loop is seamless. ===== */
.tierfx-reset {}
:is(#content.view-gallery .display-list .lot:not(.wanted) .lot-art, :is(.view-symbols, .view-compact) .display-list .lot[data-tier]::before) { --ring: 0deg; }
/* Grey: a slow silver gleam passing along the edge. */
#content.view-gallery .display-list .lot[data-tier="t0"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t0"]::before { background: linear-gradient(90deg, #6f7780 0 38%, #e9eef2 50%, #6f7780 62% 100%) 0 0 / 320px 100% repeat-x; animation: fx-x320 7s linear infinite; }
/* Green: two soft emerald glints and a gentle pulse. */
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t1"]::before { background: linear-gradient(90deg, #1f8a50 0%, #2fae68 20%, #c4ffde 25%, #2fae68 30%, #1f8a50 50%, #2fae68 70%, #c4ffde 75%, #2fae68 80%, #1f8a50 100%) 0 0 / 260px 100% repeat-x; animation: fx-x260 5s linear infinite, fx-pulse 2.6s ease-in-out infinite alternate; }
/* Blue: a crisp electric sheen running the other way. */
#content.view-gallery .display-list .lot[data-tier="t2"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t2"]::before { background: linear-gradient(90deg, #1d5fb0 0%, #2f7fe0 30%, #e2f4ff 45%, #7fc3ff 50%, #2f7fe0 65%, #1d5fb0 100%) 0 0 / 200px 100% repeat-x; animation: fx-x200r 3.6s linear infinite; }
/* Purple: holographic colours flowing upward through the frame. */
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t3"]::before { background: linear-gradient(180deg, #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #7dffb2, #b46cff) 0 0 / 100% 360px repeat-y; animation: fx-y360 4.5s linear infinite; }
/* Gold: a bright glint racing across a gold frame. */
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t4"]::before { background: linear-gradient(90deg, #9a6f08 0%, #e2b53a 30%, #ffd34d 42%, #fffbe6 50%, #ffd34d 58%, #e2b53a 70%, #9a6f08 100%) 0 0 / 240px 100% repeat-x; animation: fx-x240 2.4s linear infinite; }
/* Orange: fire, two layers moving against each other, and a flickering glow. */
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art,
:is(.view-symbols, .view-compact) .display-list .lot[data-tier="t5"]::before {
  background: linear-gradient(90deg, rgba(255,240,190,0) 0%, rgba(255,240,190,.85) 50%, rgba(255,240,190,0) 100%) 0 0 / 160px 100% repeat-x,
              linear-gradient(180deg, #a3330a 0%, #ff7a1a 25%, #ffb050 50%, #ff5a10 75%, #a3330a 100%) 0 0 / 100% 140px repeat-y;
  animation: fx-fire 1.6s linear infinite; }
#content.view-gallery .display-list .lot:is([data-tier="t3"], [data-tier="t4"], [data-tier="t5"]):not(.wanted) { animation: none; }
#content.view-gallery .display-list .lot[data-tier="t3"]:not(.wanted) .lot-art { animation: fx-y360 4.5s linear infinite, fx-glow-p 3s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot[data-tier="t4"]:not(.wanted) .lot-art { animation: fx-x240 2.4s linear infinite, fx-glow-g 2.4s ease-in-out infinite alternate; }
#content.view-gallery .display-list .lot[data-tier="t5"]:not(.wanted) .lot-art { animation: fx-fire 1.6s linear infinite, fx-glow-f 0.9s ease-in-out infinite alternate; }
@keyframes fx-x320 { to { background-position: 320px 0; } }
@keyframes fx-x260 { to { background-position: 260px 0; } }
@keyframes fx-x200r { to { background-position: -200px 0; } }
@keyframes fx-y360 { to { background-position: 0 -360px; } }
@keyframes fx-x240 { to { background-position: 240px 0; } }
@keyframes fx-fire { to { background-position: 160px 0, 0 -140px; } }
@keyframes fx-pulse { from { filter: brightness(.9); } to { filter: brightness(1.15); } }
@keyframes fx-glow-p { from { box-shadow: 0 0 8px -2px #b46cff, 0 10px 24px -14px rgba(0,0,0,.8); } to { box-shadow: 0 0 26px 0 #b46cff, 0 10px 24px -14px rgba(0,0,0,.8); } }
@keyframes fx-glow-g { from { box-shadow: 0 0 10px -2px #ffd34d, 0 10px 24px -14px rgba(0,0,0,.8); } to { box-shadow: 0 0 24px 0 #ffd34d, 0 10px 24px -14px rgba(0,0,0,.8); } }
@keyframes fx-glow-f { from { box-shadow: 0 0 12px 0 #ff6a14, 0 10px 24px -14px rgba(0,0,0,.8); } to { box-shadow: 0 0 32px 2px #ff4a08, 0 10px 24px -14px rgba(0,0,0,.8); } }
/* The green pulse uses filter; keep it on the frame only (the art sits on top, unfiltered). */
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art { animation: fx-x260 5s linear infinite; }
#content.view-gallery .display-list .lot[data-tier="t1"]:not(.wanted) .lot-art { box-shadow: 0 0 14px -6px #2fae68, 0 10px 24px -14px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { #content .display-list .lot .lot-art, #content .display-list .lot::before { animation: none !important; } }

/* ===== Search, set and shared-deck grids: the same card design as collection rows (all games) ===== */
/* List views (small card and text): a row with the art, name + price, and the badges under the name. */
:is(.view-compact, .view-symbols) .card-grid > .grid-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "img meta" "img chrome"; align-items: center; column-gap: 12px; row-gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.view-symbols .card-grid > .grid-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "chrome"; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card > img, :is(.view-compact, .view-symbols) .card-grid > .grid-card > .img-missing { grid-area: img; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card > img[data-tier] { outline: 0; box-shadow: none; animation: none; }
:is(.view-compact, .view-symbols) .card-grid .grid-meta { grid-area: meta; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
:is(.view-compact, .view-symbols) .card-grid .grid-meta > span:first-child { font-weight: 650; font-size: 15px; }
:is(.view-compact, .view-symbols) .card-grid .grid-meta > span:last-child { font-weight: 700; color: color-mix(in srgb, var(--tier, #9aa3ad) 70%, var(--text)); }
:is(.view-compact, .view-symbols) .card-grid .tile-chrome { grid-area: chrome; display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; position: static; aspect-ratio: auto; pointer-events: none; }
:is(.view-compact, .view-symbols) .card-grid .tile-chrome > * { position: static !important; inset: auto !important; height: 24px; padding: 0 8px !important; border-radius: 99px; background: color-mix(in srgb, var(--text) 7%, transparent) !important; }
:is(.view-compact, .view-symbols) .card-grid .tile-chrome .tset { color: var(--text); }
:is(.view-compact, .view-symbols) .card-grid .owned-badge { position: absolute; right: 10px; bottom: 8px; }
/* The tier outline around the whole row, animated exactly like collection rows. */
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier]:not([data-tier="tn"]) { border-color: transparent; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier]:not([data-tier="tn"])::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t0"]::before { background: linear-gradient(90deg, #6f7780 0 38%, #e9eef2 50%, #6f7780 62% 100%) 0 0 / 320px 100% repeat-x; animation: fx-x320 7s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t1"]::before { background: linear-gradient(90deg, #1f8a50 0%, #2fae68 20%, #c4ffde 25%, #2fae68 30%, #1f8a50 50%, #2fae68 70%, #c4ffde 75%, #2fae68 80%, #1f8a50 100%) 0 0 / 260px 100% repeat-x; animation: fx-x260 5s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t2"]::before { background: linear-gradient(90deg, #1d5fb0 0%, #2f7fe0 30%, #e2f4ff 45%, #7fc3ff 50%, #2f7fe0 65%, #1d5fb0 100%) 0 0 / 200px 100% repeat-x; animation: fx-x200r 3.6s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t3"]::before { padding: 2.5px; background: linear-gradient(180deg, #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #7dffb2, #b46cff) 0 0 / 100% 360px repeat-y; animation: fx-y360 4.5s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t4"]::before { padding: 2.5px; background: linear-gradient(90deg, #9a6f08 0%, #e2b53a 30%, #ffd34d 42%, #fffbe6 50%, #ffd34d 58%, #e2b53a 70%, #9a6f08 100%) 0 0 / 240px 100% repeat-x; animation: fx-x240 2.4s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t5"]::before { padding: 3px; background: linear-gradient(90deg, rgba(255,240,190,0) 0%, rgba(255,240,190,.85) 50%, rgba(255,240,190,0) 100%) 0 0 / 160px 100% repeat-x, linear-gradient(180deg, #a3330a 0%, #ff7a1a 25%, #ffb050 50%, #ff5a10 75%, #a3330a 100%) 0 0 / 100% 140px repeat-y; animation: fx-fire 1.6s linear infinite; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card[data-tier="t5"] { animation: ring-glow 1.8s ease-in-out infinite alternate; }

/* Big-card view: the card sits in an animated 5px tier frame (padding + background on the image). */
.view-gallery .card-grid > .grid-card[data-tier]:not([data-tier="tn"]) > img.card-img, .card-grid:not(.small-grid) > .grid-card[data-tier]:not([data-tier="tn"]) > img.card-img { padding: 5px; border-radius: 12px; outline: 0; box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); }
.card-grid > .grid-card[data-tier] > img.card-img { outline: 0 !important; }
.card-grid > .grid-card[data-tier="t0"] > img.card-img { background: linear-gradient(90deg, #6f7780 0 38%, #e9eef2 50%, #6f7780 62% 100%) 0 0 / 320px 100% repeat-x; animation: fx-x320 7s linear infinite; }
.card-grid > .grid-card[data-tier="t1"] > img.card-img { background: linear-gradient(90deg, #1f8a50 0%, #2fae68 20%, #c4ffde 25%, #2fae68 30%, #1f8a50 50%, #2fae68 70%, #c4ffde 75%, #2fae68 80%, #1f8a50 100%) 0 0 / 260px 100% repeat-x; animation: fx-x260 5s linear infinite; }
.card-grid > .grid-card[data-tier="t2"] > img.card-img { background: linear-gradient(90deg, #1d5fb0 0%, #2f7fe0 30%, #e2f4ff 45%, #7fc3ff 50%, #2f7fe0 65%, #1d5fb0 100%) 0 0 / 200px 100% repeat-x; animation: fx-x200r 3.6s linear infinite; }
.card-grid > .grid-card[data-tier="t3"] > img.card-img { background: linear-gradient(180deg, #b46cff, #6fd0ff, #ff7ad9, #ffe27a, #7dffb2, #b46cff) 0 0 / 100% 360px repeat-y; animation: fx-y360 4.5s linear infinite, fx-glow-p 3s ease-in-out infinite alternate; }
.card-grid > .grid-card[data-tier="t4"] > img.card-img { background: linear-gradient(90deg, #9a6f08 0%, #e2b53a 30%, #ffd34d 42%, #fffbe6 50%, #ffd34d 58%, #e2b53a 70%, #9a6f08 100%) 0 0 / 240px 100% repeat-x; animation: fx-x240 2.4s linear infinite, fx-glow-g 2.4s ease-in-out infinite alternate; }
.card-grid > .grid-card[data-tier="t5"] > img.card-img { background: linear-gradient(90deg, rgba(255,240,190,0) 0%, rgba(255,240,190,.85) 50%, rgba(255,240,190,0) 100%) 0 0 / 160px 100% repeat-x, linear-gradient(180deg, #a3330a 0%, #ff7a1a 25%, #ffb050 50%, #ff5a10 75%, #a3330a 100%) 0 0 / 100% 140px repeat-y; animation: fx-fire 1.6s linear infinite, fx-glow-f .9s ease-in-out infinite alternate; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card > img.card-img { padding: 0 !important; background: none !important; animation: none !important; box-shadow: none !important; }
.card-grid > .grid-card[data-tier]:not([data-tier="tn"]) > .tile-chrome { left: 5px; right: 5px; top: 5px; }
:is(.view-compact, .view-symbols) .card-grid > .grid-card > .tile-chrome { left: auto; right: auto; top: auto; }
@media (prefers-reduced-motion: reduce) { .card-grid > .grid-card::before, .card-grid > .grid-card > img.card-img, .card-grid > .grid-card { animation: none !important; } }
/* Selection never remounts the card or interrupts its tier animation. */
.display-list .lot:has(.batch-mark) { position:relative; }
#content.view-gallery .display-list .lot > .batch-mark { position:absolute; top:12px; left:12px; z-index:8; padding:6px; border-radius:10px; background:rgba(12,16,23,.85); }
.batch-mark input { width:23px; height:23px; cursor:pointer; }
.display-list .lot.batch-selected { outline:3px solid var(--gold); outline-offset:2px; }
.display-list .lot.batch-selected .lot-info { background:color-mix(in srgb,var(--gold) 9%,transparent); border-radius:8px; }
.display-list .lot::before,.display-list .lot::after,.lot-art::before,.lot-art::after,.tier-gem { pointer-events:none; }
.trade-intent { margin:16px 0; }
.trade-intent summary { cursor:pointer; font-weight:650; margin-bottom:12px; }
.trade-proposal { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:14px; }
.trade-proposal progress { width:100%; height:6px; accent-color:var(--gold); }
.display-list .lot:has(.batch-mark input:checked) { outline:3px solid var(--gold); outline-offset:2px; }
.watch-status { display:grid; text-align:left; gap:4px; padding:10px 12px; margin-bottom:12px; border:1px solid var(--gold); border-radius:12px; color:var(--gold); background:var(--surface); }
.watch-status small { color:var(--muted); font-weight:400; }

/* 3.35: contained dialogs, swipeable bundles and coherent fold layouts. */
#sheetBody, .cs-panel, .trade, .trade-block, .trade-intent, .trade-proposal { min-width:0; max-width:100%; }
#sheetBody { overflow-wrap:anywhere; }
#sheetBody .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
#sheetBody label, #sheetBody select { min-width:0; max-width:100%; }
.trade-row { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x pan-y; scrollbar-width:thin; scroll-snap-type:x proximity; }
.trade-card { flex:0 0 152px; min-width:152px; scroll-snap-align:start; min-height:64px; }
.trade-plus,.trade-total { flex-shrink:0; }
.trade-proposal > .row { flex-wrap:wrap; gap:8px; }
.trade-card img,.trade-card .mini-art { object-fit:contain; }
.cs-hero:not(.compact) { height:auto; aspect-ratio:63/88; max-height:65dvh; margin:0; border-radius:14px; }
.cs-hero:not(.compact) .cs-art, .cs-hero.ptcg:not(.compact) .cs-art { object-fit:contain; object-position:center; transform:none; }
.cs-hero:not(.compact) .cs-shade { display:none; }
.cs-title { margin-top:16px; }
.sheet-head.overlay { margin-bottom:8px; padding-bottom:8px; background:var(--bg); }
.cs-tabs { max-width:100%; isolation:isolate; background:var(--bg); }
.cs-panel { position:relative; z-index:0; }
.set-media > img { padding:10px; }
.set-media .set-icon { width:52px; height:52px; }
.upgrade-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; }
.upgrade-row .mini-art { width:44px; height:62px; object-fit:contain; }
.upgrade-row .ellip { white-space:normal; overflow-wrap:anywhere; }
.upgrade-side { display:grid; gap:5px; justify-items:end; }
@media(max-width:480px) { #sheetBody .grid2 { grid-template-columns:minmax(0,1fr); } .upgrade-row { grid-template-columns:44px minmax(0,1fr); } .upgrade-side { grid-column:2; justify-items:start; } }
@media(min-width:680px) {
 body[data-view="home"] #content > .home-deck-section { grid-column:1/-1; }
 .home-deck-section .deck-grid { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); }
 #sheetBody:has(> .cs-hero) { grid-template-columns:minmax(0,40%) minmax(0,1fr); column-gap:20px; }
 #sheetBody:has(> .cs-hero) > .cs-hero:not(.compact) { height:auto; max-height:72dvh; aspect-ratio:63/88; }
 #sheetBody:has(> .cs-hero) > .cs-hero:not(.compact) .cs-art { object-fit:contain; transform:none; }
}

@media(prefers-reduced-motion:no-preference) {
 .set-row,.deck-tile,.grid-card,.card-action-list>button { transition:transform .18s ease,border-color .18s ease,background .18s ease; }
 .set-row:active,.deck-tile:active,.grid-card:active,.card-action-list>button:active { transform:scale(.985); }
 .home-deck-section,.trade-proposal { animation:stash-arrive .24s ease-out both; }
 .trade-proposal:nth-of-type(2) { animation-delay:.035s; }
 .trade-proposal:nth-of-type(3) { animation-delay:.07s; }
 @keyframes stash-arrive { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:translateY(0); } }
}

.history-single { display:grid;gap:8px;padding:24px 16px;margin:16px 0;border:1px solid var(--line);border-radius:14px;background:var(--surface); }
.history-single b { font-size:28px; }
.history-single small,.history-single span { color:var(--muted); }
.market-chart { max-width:100%; }

body.glass .cs-tabs { background:rgba(18,20,26,.98); }
.history-single-chart { width:100%;height:140px;display:block; }

/* Card entry is triggered once by its identity, independent of price refreshes. */
dialog.sheet[open][data-card-popup="true"] { animation:none; transform-origin:center bottom; }

/* CardStashy field notes: one visual language, each game's own accent. */
.effect-card{position:relative;border-left:3px solid var(--accent);background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%);}
.effect-card .effect-label{letter-spacing:.12em;opacity:.8;margin:0 0 14px;}
.effect-line{margin:0 0 16px;line-height:1.7;text-wrap:pretty;}
.effect-line:last-child{margin-bottom:0;}
.rule-word{display:inline;padding:0;margin:0;border:0;border-bottom:1px dotted currentColor;border-radius:0;background:none;color:var(--accent);font:inherit;line-height:inherit;cursor:help;vertical-align:baseline;}
.rule-word:hover,.rule-word:focus-visible{background:color-mix(in srgb,var(--accent) 16%,transparent);outline:2px solid var(--accent);outline-offset:3px;}
.logic-condition{color:color-mix(in srgb,var(--accent) 65%,white);font-weight:650;}
.logic-activation{background:color-mix(in srgb,var(--accent) 9%,transparent);}
.logic-resolution{color:var(--text);}
.effect-card .flavor{margin:22px 0 6px;padding:16px 0 0 18px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);font-style:italic;opacity:.8;}
.flavor .eyebrow{display:block;font-style:normal;font-size:10px;margin-bottom:8px;}
.rule-glass{position:fixed;z-index:10000;max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:20px;background:rgba(22,25,35,.94);backdrop-filter:blur(24px);box-shadow:0 16px 70px #0009;color:var(--text);animation:rule-reveal .18s ease-out;}
.rule-glass h3{margin:12px 0 8px;}.rule-glass p{line-height:1.6;}.rule-glass a{font-size:12px;color:var(--accent);}.rule-dismiss{border:0;background:none;color:inherit;padding:6px;}
.printing-quote{display:inline-flex;flex-direction:column;gap:3px;padding:4px 6px;}.print-prices{flex-wrap:wrap;}.trade-valuation{margin-bottom:12px;}
@keyframes rule-reveal{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rule-glass{animation:none}}

/* Artwork has its own proportions; the shared chrome never stretches a crop into a card scan. */
#sheetBody > .cs-hero:not(.compact) {
 width:100%; max-height:none; border-radius:22px; border:1px solid color-mix(in srgb,var(--gold) 32%,var(--line));
 box-shadow:0 18px 42px #0005,0 0 24px color-mix(in srgb,var(--gold) 10%,transparent);
 background:radial-gradient(ellipse at center,color-mix(in srgb,var(--gold) 14%,var(--surface-2)),var(--surface));
}
#sheetBody > .cs-hero.mtg:not(.compact) { aspect-ratio:4/3; }
#sheetBody > .cs-hero.ygo:not(.compact) { aspect-ratio:1; }
#sheetBody > .cs-hero.mtg:not(.compact) .cs-art,
#sheetBody > .cs-hero.ygo:not(.compact) .cs-art { object-fit:cover; object-position:center; transform:none; }
#sheetBody > .cs-hero.ptcg:not(.compact),
#sheetBody > .cs-hero.ygo:not(.compact):has(.cs-art[data-f]) { width:min(100%,calc(65dvh * 63 / 88)); aspect-ratio:63/88; justify-self:center; margin-inline:auto; }
#sheetBody > .cs-hero.ptcg:not(.compact) .cs-art,
#sheetBody > .cs-hero.ygo:not(.compact) .cs-art[data-f] { object-fit:contain; object-position:center; }
#sheetBody > .cs-hero.mtg:not(.compact) .cs-shade,
#sheetBody > .cs-hero.ygo:not(.compact) .cs-shade { display:block; pointer-events:none; background:linear-gradient(180deg,transparent 72%,#0005); }
.cs-title h2 { text-wrap:balance; }
.budget-explanation { padding:12px 14px; border-left:3px solid var(--gold); background:color-mix(in srgb,var(--gold) 6%,var(--surface)); border-radius:0 12px 12px 0; }
.budget-next { margin-block:12px; padding:12px; border:1px solid var(--line); border-radius:14px; }
.budget-next summary { cursor:pointer; font-weight:650; }
@media(prefers-reduced-motion:no-preference) {
 dialog.sheet[open] .cs-hero { animation:art-reveal .32s cubic-bezier(.2,.8,.2,1) both; }
 @keyframes art-reveal { from { opacity:0;transform:translateY(8px) scale(.985); } to { opacity:1;transform:none; } }
}

#sheetBody > .sheet-head.overlay:not(.scrolled) { background:transparent; margin-bottom:-58px; padding-bottom:0; }

/* 3.39.1: restore the original artwork banner requested by the user. */
.cs-banner { position:relative; margin:-8px calc(var(--gutter) * -1) 0; overflow:hidden; border-radius:22px 22px 0 0; }
.cs-banner > .cs-hero:not(.compact) { width:100%; height:clamp(240px,62vw,360px); max-height:none; aspect-ratio:auto; margin:0; border:0; border-radius:0; box-shadow:none; }
.cs-banner > .cs-hero:not(.compact) .cs-art { width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%; transform:none; }
.cs-banner > .cs-hero.ptcg:not(.compact) .cs-art { object-position:center 22%; transform:scale(1.35); transform-origin:center 20%; }
.cs-banner > .cs-hero:not(.compact) .cs-shade { display:block; pointer-events:none; background:linear-gradient(180deg,#0002 0%,transparent 35%,transparent 48%,#101116bb 78%,var(--bg) 100%); }
.cs-banner > .cs-title { position:absolute; inset:auto var(--gutter) 0; display:flex; align-items:flex-end; margin:0; padding:20px 0 14px; gap:12px; }
.cs-banner > .cs-title > div:first-child { min-width:0; }
.cs-banner > .cs-title h2 { font-size:clamp(24px,4vw,32px); line-height:1.12; text-wrap:balance; color:#fff; text-shadow:0 2px 14px #0009; }
.cs-banner > .cs-title .type-line { color:#fff; margin-top:6px; text-shadow:0 2px 10px #000; }
.cs-banner > .cs-title > :last-child:not(:first-child) { flex-shrink:0; }
@media(min-width:700px) { dialog.sheet:has(.cs-banner) { width:min(94vw,780px); max-width:780px; } .cs-banner > .cs-hero:not(.compact) { height:340px; } }

/* Build decks: progress pop-up */
.build-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(6, 8, 12, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in .2s ease both; }
.build-pop { width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 22px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); animation: pocket-pop .5s cubic-bezier(.2, 1.3, .35, 1) both; }
.build-pop b { font-size: 1.15rem; }
.build-pop p { margin: 0; font-weight: 600; color: var(--accent); min-height: 2.6em; line-height: 1.3; }
.build-pop small { color: var(--muted); line-height: 1.4; }
.build-fan { position: relative; width: 84px; height: 70px; margin-bottom: 4px; }
.build-fan i { position: absolute; left: 50%; bottom: 0; width: 40px; height: 56px; margin-left: -20px; border-radius: 6px; border: 2px solid var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--surface-2)), var(--surface-2)); transform-origin: 50% 110%; animation: fan 1.6s ease-in-out infinite; }
.build-fan i:nth-child(1) { --r: -24deg; animation-delay: 0s; }
.build-fan i:nth-child(2) { --r: 0deg; animation-delay: .12s; }
.build-fan i:nth-child(3) { --r: 24deg; animation-delay: .24s; }
@keyframes fan { 0%, 100% { transform: rotate(0deg); } 40%, 60% { transform: rotate(var(--r)) translateY(-4px); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .build-fan i { animation: none; transform: rotate(var(--r)); } .build-overlay, .build-pop { animation: none; } }
.build-fan i { display: block; border-color: var(--accent, #e8b85a); background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #e8b85a) 35%, #20242c), #1a1d24); }
.build-pop p { color: var(--accent, #e8b85a); }
.build-fan i { border: 2px solid var(--accent, #e8b85a); transform: rotate(var(--r)); animation: fan2 1.8s ease-in-out infinite alternate; }
@keyframes fan2 { from { transform: rotate(var(--r)) translateY(0); } to { transform: rotate(calc(var(--r) * 1.5)) translateY(-6px); } }

/* Deck Power: Competitive + Engine, and the scouting report */
.pw-dual { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pw-dual span { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .78rem; color: var(--muted); border-left: 3px solid var(--line); }
.pw-dual span b { font-size: 1.5rem; color: var(--text); line-height: 1.1; }
.pw-dual span small { font-size: .72rem; }
.pw-dual span.ok { border-left-color: var(--good, #3fb68b); }
.pw-dual span.warn { border-left-color: var(--warn, #e0a240); }
.pw-dual span.bad { border-left-color: var(--bad, #e5534b); }
.pw-dual span.dim b { color: var(--muted); }
.scout { display: grid; gap: 4px; }
.scout-row { padding: 10px 0; border-top: 1px solid var(--line); }
.scout-row:first-of-type { border-top: 0; }
.scout-row h3 { margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.scout-row p { margin: 0; line-height: 1.55; }
.scout-row:last-of-type p b:first-child { color: var(--accent, #e8b85a); }
.diff-tag { display: inline-block; font-size: .78rem; padding: 2px 9px; border-radius: 99px; }
.diff-tag.easy { color: #4fd18b; background: rgba(79, 209, 139, .12); }
.diff-tag.medium { color: #ffc93c; background: rgba(255, 201, 60, .12); }
.diff-tag.hard { color: #ff7a6a; background: rgba(255, 122, 106, .12); }

/* 3.44: the card page banner melts into the sheet like the deck page hero, whatever the sheet's
   background (glass or solid): the artwork itself fades out instead of ending on a painted colour. */
.cs-banner { border-radius:22px 22px 0 0; }
.cs-banner > .cs-hero:not(.compact) { height:clamp(280px,74vw,420px); background:transparent;
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%);
 mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%); }
.cs-banner > .cs-hero:not(.compact) .cs-shade { background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.35) 100%); }
.cs-banner > .cs-title { padding-bottom:18px; }
@media(min-width:700px) { .cs-banner > .cs-hero:not(.compact) { height:380px; } }
/* Pokémon art windows end on the card's small-print strip: fade out before it. */
.cs-banner > .cs-hero.ptcg:not(.compact) { -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 76%,transparent 100%); }
.cs-banner > .cs-hero.ptcg:not(.compact) .cs-art.pk-crop { position:absolute; inset:0; width:100%; height:100%; display:flex; transform:none; }
.cs-banner > .cs-hero.ptcg .pk-crop .pk-win { transform:scale(1.05); transform-origin:center 60%; }

/* Deck Power: deal-breakers that cap the score */
.pw-caps { border-left: 3px solid var(--warn, #e0a03a); }
.pw-cap { padding: 10px 0; border-top: 1px solid var(--line); }
.pw-cap:first-of-type { border-top: 0; }
.pw-cap p { margin: 6px 0 0; line-height: 1.45; }

/* ---------- Matchups (all three games) ---------- */
.mu-head { display: flex; gap: 16px; align-items: center; }
.mu-head-text { min-width: 0; }
.mu-head-text h2 { margin: 2px 0 4px; }
.mu-ring { width: 92px; height: 92px; flex: none; transform: rotate(-90deg); }
.mu-ring text { transform: rotate(90deg); transform-origin: 42px 42px; font: 800 19px Manrope, sans-serif; fill: var(--text); }
.mu-ring-track { fill: none; stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 7; }
.mu-ring-fill { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); animation: mu-ring 1.1s cubic-bezier(.2,.8,.2,1) both; }
.mu-ring.good .mu-ring-fill { stroke: var(--good); } .mu-ring.even .mu-ring-fill { stroke: var(--gold); } .mu-ring.bad .mu-ring-fill { stroke: var(--bad); }
@keyframes mu-ring { from { stroke-dashoffset: var(--c); } }
.mu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mu-chip { font-size: .75rem; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); }
.mu-chip.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.mu-chip.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.mu-logbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 8px; }
.mu-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.mu-seg button { border: 0; background: none; color: var(--muted); font: 600 13px inherit; padding: 6px 12px; border-radius: 9px; transition: background .2s, color .2s; }
.mu-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px #0004; }
.mu-list { display: grid; gap: 8px; }
.mu-row { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; animation: mu-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms); transition: border-color .2s, box-shadow .25s; }
.mu-row[open] { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--tone) 60%, transparent); }
.mu-row.good { --tone: var(--good); } .mu-row.even { --tone: var(--gold); } .mu-row.bad { --tone: var(--bad); }
@keyframes mu-in { from { opacity: 0; transform: translateY(10px); } }
.mu-row > summary { list-style: none; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; }
.mu-row > summary::-webkit-details-marker { display: none; }
.mu-art { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.mu-list.ptcg .mu-art { object-fit: contain; padding: 4px; }
.mu-name { min-width: 0; display: grid; gap: 2px; }
.mu-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-name small { color: var(--muted); font-size: .75rem; }
.mu-bar { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); margin-top: 5px; overflow: hidden; }
.mu-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 60%, transparent), var(--tone)); animation: mu-bar 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes mu-bar { from { width: 0; } }
.mu-pct { text-align: right; display: grid; }
.mu-pct b { font: 800 1.3rem Manrope, sans-serif; color: var(--tone); }
.mu-pct small { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mu-body { padding: 2px 14px 14px; animation: mu-open .3s ease both; }
@keyframes mu-open { from { opacity: 0; transform: translateY(-4px); } }
.mu-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mu-split span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: .72rem; color: var(--muted); }
.mu-split b { font: 800 1.05rem Manrope, sans-serif; color: var(--text); }
.mu-why { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 5px; font-size: .88rem; line-height: 1.45; }
.mu-plan { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tone) 7%, var(--surface-2)); border-left: 3px solid var(--tone); margin-bottom: 10px; }
.mu-plan.dim { background: var(--surface-2); border-left-color: var(--line); }
.mu-plan ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; line-height: 1.45; }
.mu-plan-h { margin: 0 0 6px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mu-delta { font-size: .78rem; padding: 2px 8px; border-radius: 99px; background: var(--surface); }
.mu-delta.up { color: var(--good); } .mu-delta.down { color: var(--bad); }
.mu-io { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mu-io > div { display: grid; gap: 5px; align-content: start; }
.mu-io small { font-weight: 800; letter-spacing: .08em; font-size: .68rem; }
.mu-swap { display: grid; padding: 6px 8px; border-radius: 10px; background: var(--surface); font-size: .82rem; line-height: 1.3; }
.mu-swap small { color: var(--muted); font-size: .7rem; }
.mu-swap.in b { color: var(--good); } .mu-swap.out b { color: var(--bad); }
.mu-log { display: flex; gap: 6px; flex-wrap: wrap; }
.mu-log .btn { flex: 1 1 0; min-width: 0; }
.mu-log .mu-w { background: var(--good); color: #10251a; border-color: transparent; }
.mu-rec-chip { color: var(--text); font-weight: 700; animation: mu-pop .5s cubic-bezier(.2,1.4,.4,1) both; display: inline-block; }
@keyframes mu-pop { from { transform: scale(.6); opacity: 0; } }
.mu-other { margin-top: 12px; } .mu-other summary { cursor: pointer; font-weight: 600; }
.mu-other-row { display: grid; gap: 8px; margin-top: 10px; }
.mu-hist summary { cursor: pointer; font-weight: 600; }
.mu-games { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.mu-games li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .86rem; }
.mu-games li.W b { color: var(--good); } .mu-games li.L b { color: var(--bad); } .mu-games li.D b { color: var(--gold); }
.mu-games small { grid-column: 2; }
.mu-games .link { grid-row: 1; grid-column: 3; }
.mu-empty { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 28px 18px; }
.mu-empty-mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--gold) 14%, var(--surface-2)); color: var(--gold); animation: mu-float 3s ease-in-out infinite; }
@keyframes mu-float { 50% { transform: translateY(-4px) rotate(-4deg); } }
.mu-row.skel { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 10px 12px; }
.mu-row.skel b, .mu-row.skel small { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); }
.mu-row.skel small { width: 50%; margin-top: 6px; }
.mu-burst { position: fixed; z-index: 80; pointer-events: none; }
.mu-burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--good); animation: mu-burst .8s cubic-bezier(.15,.8,.3,1) forwards; }
.mu-burst i:nth-child(3n) { background: var(--gold); } .mu-burst i:nth-child(3n+1) { border-radius: 50%; }
@keyframes mu-burst { to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mu-row, .mu-bar span, .mu-ring-fill, .mu-body, .mu-rec-chip, .mu-empty-mark { animation: none; } }
@media (max-width: 380px) { .mu-io { grid-template-columns: 1fr; } .mu-split { grid-template-columns: 1fr 1fr; } }
.mu-seg button { white-space: nowrap; padding: 6px 10px; }
.mu-logbar > span { white-space: nowrap; }
/* A card with no artwork anywhere: a short, intentional banner instead of a big empty box. */
.cs-banner.no-art > .cs-hero:not(.compact) { height: 150px; background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent, var(--gold)) 18%, transparent), transparent 60%), var(--surface-2); -webkit-mask-image: none; mask-image: none; }
.cs-banner.no-art .cs-art.img-missing { display: none; }
.price-pill .pill-note { display: block; font-size: .66rem; color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: 1px; }

/* Card page actions: the same block in every game. Primary pair, then a tidy row of tools. */
.card-actions { display: grid; gap: 8px; margin: 12px 0; }
.ca-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.ca-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ca-main .btn, .ca-more .btn { width: 100%; justify-content: center; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile-menu button small { display: block; color: var(--muted); font-size: .74rem; }
.deck-tile.holding, .stash-binder.holding { transform: scale(.97); transition: transform .3s ease; }
.page-head .search-tools { flex: 1 1 100%; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.search-tools .tool-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .85rem; white-space: nowrap; }
.search-tools .tool-chip svg { width: 16px; height: 16px; }
/* Sticky sheet titles are solid, so scrolled text never shows through behind them. */
.sheet-head.overlay.scrolled, body.glass .sheet-head.overlay.scrolled { background: var(--surface, var(--bg)); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Home: the primary shortcut spans the row, the other two sit side by side. */
.quick > .quick-btn.primary:first-child { grid-column: 1 / -1; }

/* Game marks: white on the game's color, crisp at small sizes (header pill and game chooser). */
.game-pill .pill-mark { width: 30px; height: 30px; border-radius: 999px; background: var(--game-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--game-color) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--game-color) 40%, transparent); }
.game-pill .pill-mark .ico, .game-pill .pill-mark .ico.game-mark { width: 18px; height: 18px; color: #fff; opacity: 1; }
.game-choice-icon, .game-choice[aria-pressed] .game-choice-icon { color: #fff; background: var(--game-color); box-shadow: 0 2px 10px color-mix(in srgb, var(--game-color) 35%, transparent); }
.game-choice[aria-pressed="false"] .game-choice-icon { opacity: .9; }
.game-choice[aria-pressed="false"] .game-choice-icon .ico { opacity: 1; }
.game-choice-icon .ico { width: 24px; height: 24px; }
.quick > .quick-btn:only-child { grid-column: 1 / -1; }
.ico.game-mark { background: none; width: auto; height: auto; border-radius: 0; color: inherit; display: inline-block; }
.game-pill .pill-mark .ico.game-mark { width: 18px; height: 18px; color: #fff; }
.game-choice-icon .ico.game-mark { width: 24px; height: 24px; color: #fff; }

/* Direction-aware page moves: forward pages arrive from the right, going back slides the page
   you came from in from the left, already at the spot you left it (no re-dealing the grid). */
@keyframes page-fwd { from { opacity: 0; transform: translateX(22px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes page-back { from { opacity: 0; transform: translateX(-22px) scale(.995); } to { opacity: 1; transform: none; } }
#content.page-enter.page-fwd > * { animation-name: page-fwd; }
#content.page-enter.page-back > * { animation: page-back .32s cubic-bezier(.2, .8, .2, 1) both !important; }
#content.page-enter.page-back :is(.card-grid, .deck-grid, .tdeck-list) > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #content.page-enter.page-back > *, #content.page-enter.page-fwd > * { animation: none !important; } }

/* Card art on touch screens: no iOS lift-out ghost or text selection when you press a card, the
   tilt follows the phone smoothly, and a new card page catches the light once. */
:is(.lot-art, .cd-img, .tile-art, .quick-card-thumb) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:is(.lot-art, .cd-img, .tile-art, .quick-card-thumb) img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.cd-img { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .cd-img.tilting.gyro { transform: perspective(700px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .18s ease-out; }
  .cd-img.gyro::before { transition: background-position .18s ease-out; }
  .cd-img.shine-once { animation: card-catch 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .cd-img.shine-once::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, rgba(0,220,255,.3) 52%, rgba(255,0,170,.25) 58%, transparent 70%) no-repeat; background-size: 250% 100%; animation: shine-sweep 1.1s cubic-bezier(.3, .6, .3, 1) .15s both; }
  @keyframes shine-sweep { from { background-position: 120% 0; } to { background-position: -30% 0; } }
  @keyframes card-catch { 0% { transform: perspective(700px) rotateY(-9deg) rotateX(3deg); } 55% { transform: perspective(700px) rotateY(5deg) rotateX(-1deg); } 100% { transform: none; } }
}

/* In-app confirm/prompt (dialog.js): a small glass card that springs in over a blurred backdrop.
   Destructive questions get a solid red action. */
.cf-dialog { border: 0; padding: 0; background: transparent; max-width: min(420px, calc(100vw - 32px)); width: 100%; color: var(--text); overflow: visible; }
.cf-dialog::backdrop { background: rgba(6, 8, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cf-fade .2s ease both; }
.cf-dialog-card { margin: 0; padding: 22px 20px 16px; border-radius: 20px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05); animation: cf-pop .32s cubic-bezier(.2, 1.3, .35, 1) both; }
.cf-dialog-msg { margin: 0 0 16px; font-size: 16px; line-height: 1.45; font-weight: 600; text-wrap: pretty; }
.cf-dialog-input { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.cf-dialog-input:focus { outline: 2px solid var(--game-color, var(--gold)); outline-offset: 1px; }
.cf-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cf-dialog-actions .btn { min-width: 96px; min-height: 44px; }
.cf-dialog.danger .btn.danger { background: var(--bad); color: #1a0806; border-color: transparent; }
.cf-dialog.closing .cf-dialog-card { animation: cf-out .16s ease-in both; }
.cf-dialog.closing::backdrop { animation: cf-fade .16s ease-in reverse both; }
@keyframes cf-pop { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cf-out { to { opacity: 0; transform: scale(.96); } }
@keyframes cf-fade { from { opacity: 0; } }
@media (max-width: 520px) { .cf-dialog { margin: auto auto 16px; } .cf-dialog-actions .btn { flex: 1; } }

/* Matchups: open the opponent's list from its row. */
.mu-see { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s; }
.mu-see:hover { border-color: var(--game-color, var(--gold)); }
.mu-see:active { transform: scale(.98); }
.mu-see > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.mu-see small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-see > i { font-style: normal; font-size: 22px; color: var(--muted); }
.mu-see-art { width: 46px; height: 34px; border-radius: 8px; overflow: hidden; background: var(--surface-2); flex: none; }
.mu-see-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-dialog-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.cf-dialog-msg.sub { font-weight: 500; color: var(--muted); font-size: 15px; }
.cf-dialog-check { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--good); flex: none; animation: cf-check .5s cubic-bezier(.2, 1.4, .4, 1) .05s both; }
.cf-dialog-check svg { width: 18px; height: 18px; fill: none; stroke: #062014; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: cf-draw .4s ease-out .25s forwards; }
@keyframes cf-check { from { transform: scale(.3); opacity: 0; } }
@keyframes cf-draw { to { stroke-dashoffset: 0; } }

/* Build decks: each version lists its cards as the same tiles as the deck page, in folding groups,
   with one action bar (Save, Buy on TCGplayer, See all) and a ⋯ menu for the rest. */
.tier-group { margin: 12px 0 0; }
.tier-group > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 2px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tier-group > summary::-webkit-details-marker { display: none; }
.tier-group > summary b { color: var(--text); letter-spacing: 0; }
.tier-group > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.tier-group:not([open]) > summary::after { transform: rotate(-45deg); }
.tier-group[open] > .tier-tiles { animation: tier-open .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tier-open { from { opacity: 0; transform: translateY(-6px); } }
.tier-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tier-tiles .lot { margin: 0; }
.tier-qty { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.tier-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.tier-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.tier-actions .btn svg { width: 16px; height: 16px; }
.tier-actions .tier-save { flex: 1 1 auto; justify-content: center; }
.tier-more { position: relative; }
.tier-more > summary { list-style: none; cursor: pointer; min-width: 40px; justify-content: center; }
.tier-more > summary::-webkit-details-marker { display: none; }
.tier-more-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 260px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform-origin: bottom right; animation: tier-menu .22s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes tier-menu { from { opacity: 0; transform: scale(.92) translateY(6px); } }
.tier-more-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tier-more-menu button:hover, .tier-more-menu button:focus-visible { background: var(--surface); }
.tier-more-menu button svg { width: 20px; height: 20px; flex: none; color: var(--game-color, var(--gold)); }
.tier-more-menu button span { display: grid; }
.tier-more-menu small { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .tier-tiles { grid-template-columns: 1fr; } .tier-more-menu { min-width: min(280px, calc(100vw - 48px)); } }
/* Builder tiles keep a fixed card-tile layout wherever they're shown: portrait art, name and status,
   then the copy count, never overlapping. */
.tier-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tier-tiles .lot.tier-row { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) auto !important; gap: 12px; align-items: center; padding: 8px; position: relative; }
.tier-tiles .tier-row .lot-art { width: 62px !important; height: 86px !important; aspect-ratio: auto; }
.tier-tiles .tier-row .lot-art img { width: 100%; height: 100%; object-fit: cover; }
.tier-tiles .tier-row .lot-side { position: static !important; display: flex; align-items: center; }
.tier-tiles .tier-row .lot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 700; }
.tier-tiles .tier-row .lot-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Set tiles: the symbol stays inside its tile, and Scryfall's black set symbols show light on the dark UI. */
.set-media { overflow: hidden; }
.set-media > img { box-sizing: border-box; max-width: 100%; max-height: 100%; }
.set-media > img[src*="svgs.scryfall.io"], .set-media > img[src*="/sets/"][src$=".svg"] { filter: invert(.9) drop-shadow(0 1px 0 rgba(0,0,0,.3)); padding: 14px; }
/* Press-and-hold targets: no text selection or iOS callout while holding. */
[data-hold] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* Optional evidence-backed AI second opinion. */
.ai-review{border-color:color-mix(in srgb,var(--accent,#b69aff) 38%,transparent);background:linear-gradient(140deg,#b69aff12,transparent 65%),var(--panel,#191d25)}
.ai-review h3{margin-top:0}.ai-finding{padding:18px 0;border-top:1px solid #ffffff14}.ai-finding:first-of-type{margin-top:20px}.ai-finding q{display:block;margin-top:8px;color:var(--muted,#b0b5c1);overflow-wrap:anywhere}.ai-finding .row{gap:12px;align-items:start}.ai-plan{font-size:1.05rem;line-height:1.65}.ai-review [role=status]:empty{display:none}

/* AI review: a compact, game-colored invitation and an accessible glass dialog. */
.ai-review-launch{position:relative;overflow:hidden;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--game-color,var(--gold)) 16%,transparent),transparent 70%),var(--surface-2);border-color:color-mix(in srgb,var(--game-color,var(--gold)) 40%,var(--line))}
.ai-launch-top{display:flex;align-items:center;gap:14px}.ai-launch-top>div{flex:1}.ai-launch-top .eyebrow{margin:0 0 4px}.ai-launch-top h3{margin:0}.ai-sigil{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:16px;font-size:28px;color:var(--game-color,var(--gold));background:color-mix(in srgb,var(--game-color,var(--gold)) 12%,transparent);border:1px solid color-mix(in srgb,var(--game-color,var(--gold)) 35%,transparent)}
.ai-launch-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ai-launch-actions .btn{box-shadow:0 4px 24px color-mix(in srgb,var(--game-color,var(--gold)) 18%,transparent)}
.ai-review-dialog{padding:0;border:1px solid #ffffff24;border-radius:28px;width:min(720px,calc(100vw - 24px));max-width:720px;max-height:85dvh;margin:auto;color:var(--text);background:color-mix(in srgb,var(--surface-2) 96%,transparent);box-shadow:0 30px 100px #0009;overflow:hidden;animation:ai-arrive .35s cubic-bezier(.2,.8,.2,1) both}
.ai-review-dialog::backdrop{background:#06080dc9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:cf-fade .25s ease both}
.ai-dialog-shell{display:flex;flex-direction:column;max-height:85dvh}.ai-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#b69aff14,transparent)}.ai-dialog-head .eyebrow{margin:0 0 3px}.ai-dialog-head h2{margin:0;font-size:23px}.ai-dialog-head .icon{flex:none}.ai-dialog-body{padding:24px;overflow:auto;overscroll-behavior:contain;min-height:0}.ai-state{text-align:center;padding:18px 0;max-width:530px;margin:auto}.ai-state>p:not(.eyebrow){line-height:1.65;color:var(--muted)}.ai-state h3{font-size:23px;margin:16px 0 10px}.ai-state-symbol{display:grid;place-items:center;width:64px;height:64px;margin:auto;border-radius:22px;border:1px solid #ffffff25;font-size:32px;color:var(--gold);background:#f4bf5812}
.ai-orbit{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:4px auto 28px;border:1px solid #b69aff35;border-radius:50%;background:radial-gradient(circle,#b69aff35,transparent 70%)}.ai-orbit span{font-size:46px;color:#d2bbff;animation:ai-breathe 2s ease-in-out infinite}.ai-orbit i{position:absolute;inset:8px;border:2px solid transparent;border-top-color:#ceb6ff;border-right-color:#ceb6ff66;border-radius:50%;animation:ai-orbit 1.8s linear infinite}.ai-orbit:after{content:"";position:absolute;inset:-8px;border:1px dashed #b69aff40;border-radius:50%}
.ai-review-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px 0}.ai-review-steps span{font-size:12px;padding:7px 10px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}.ai-review-steps .current{color:#e5d7ff;border-color:#b69aff70;background:#b69aff16}.ai-ready{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#71d9a41a;color:var(--good);font-weight:700;animation:ai-arrive .3s ease both}.ai-ready span{font-size:22px}.ai-dialog-body .ai-finding{animation:ai-arrive .3s ease both}
@keyframes ai-arrive{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ai-orbit{to{transform:rotate(360deg)}}@keyframes ai-breathe{50%{opacity:.65;transform:scale(.88)}}
@media(max-width:520px){.ai-review-dialog{border-radius:24px;margin:auto auto max(12px,env(safe-area-inset-bottom));max-height:88dvh}.ai-dialog-shell{max-height:88dvh}.ai-dialog-head,.ai-dialog-body{padding:18px}.ai-launch-top .chip{display:none}}
@media(prefers-reduced-motion:reduce){.ai-review-dialog,.ai-review-dialog::backdrop,.ai-orbit i,.ai-orbit span,.ai-ready,.ai-dialog-body .ai-finding{animation:none!important}}
/* AI coach results: decision first, three tabs, app-checked cards rising in one by one. */
.air-hero{position:relative;overflow:hidden;margin:16px 0 14px;padding:20px 20px 16px;border-radius:22px;border:1px solid color-mix(in srgb,var(--game-color,var(--gold)) 55%,transparent);background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--game-color,var(--gold)) 26%,transparent),transparent 60%),linear-gradient(160deg,#ffffff0d,#ffffff03);box-shadow:0 10px 40px color-mix(in srgb,var(--game-color,var(--gold)) 18%,transparent),inset 0 1px 0 #ffffff1a;animation:air-pop .6s cubic-bezier(.2,.9,.2,1.15) both}
.air-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff22 45%,transparent 60%);transform:translateX(-120%);animation:air-sweep 1.4s .35s ease-out both;pointer-events:none}
.air-kicker{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--game-color,var(--gold))}
.air-headline{margin:10px 0 14px;font-size:clamp(19px,4.6vw,23px);line-height:1.35;font-weight:750;color:var(--text);text-wrap:pretty}
.air-stats{display:flex;flex-wrap:wrap;gap:8px}.air-stats span{font-size:12.5px;padding:6px 10px;border-radius:999px;background:#ffffff0f;border:1px solid #ffffff17;color:var(--muted)}.air-stats b{color:var(--text);font-size:14px}
.air-tabs{position:sticky;top:-24px;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;margin:0 -2px 14px;border-radius:16px;background:color-mix(in srgb,var(--surface-2) 92%,#000);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.air-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 4px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.air-tabs button:active{transform:scale(.96)}.air-tabs button.on{color:#0d0f14;background:var(--game-color,var(--gold));box-shadow:0 4px 18px color-mix(in srgb,var(--game-color,var(--gold)) 40%,transparent)}
.air-tabs em{font-style:normal;font-size:11px;min-width:18px;padding:1px 6px;border-radius:999px;background:#ffffff1c}.air-tabs .on em{background:#0000002a}
.air-panel{display:grid;gap:12px}
.air-card{--i:0;padding:16px;border-radius:18px;background:linear-gradient(180deg,#ffffff0b,#ffffff04);border:1px solid #ffffff16;animation:air-rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.air-card h4{margin:6px 0 6px;font-size:17px;line-height:1.3}.air-card p{margin:6px 0;line-height:1.55}.air-lead{color:var(--text);font-size:15.5px}
.air-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.air-label{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.air-check{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.air-check.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 12%,transparent)}.air-check.warn{color:#f4bf58;border-color:#f4bf5866;background:#f4bf5814}.air-check.bad{color:#f07c7c;border-color:#f07c7c66;background:#f07c7c14;white-space:normal}
.air-verdict{font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:12px;animation:air-pop .5s .3s cubic-bezier(.2,.9,.2,1.3) both}.air-verdict.keep{color:#0d1a12;background:var(--good)}.air-verdict.mulligan{color:#1b1406;background:#f4bf58}
.air-fan{display:flex;justify-content:center;padding:18px 6px 10px;margin:4px 0 6px}
.air-fan span{--k:0;display:flex;flex-direction:column;justify-content:space-between;width:74px;height:100px;margin-left:-14px;padding:7px 6px;border-radius:9px;background:linear-gradient(160deg,#2b303c,#1a1d25);border:1px solid #ffffff2a;box-shadow:0 6px 16px #0008;transform:rotate(calc(var(--k) * 5deg)) translateY(calc(var(--k) * var(--k) * 1.6px));transform-origin:50% 120%;animation:air-deal .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc((var(--k) + 4) * 60ms)}
.air-fan span:first-child{margin-left:0}.air-fan b{font-size:10.5px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.air-fan small{font-size:10px;color:var(--game-color,var(--gold));font-weight:700}
.air-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:10px 0 4px}.air-dl dt{font-size:12px;font-weight:800;color:var(--game-color,var(--gold));padding-top:2px;white-space:nowrap}.air-dl dd{margin:0;line-height:1.5}
.air-steps{list-style:none;margin:12px 0 8px;padding:0;position:relative}.air-steps:before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--game-color,var(--gold)),transparent);opacity:.5}
.air-steps li{position:relative;display:flex;gap:12px;padding:6px 0;animation:air-rise .45s ease both;animation-delay:calc(var(--i,0) * 70ms + 200ms)}.air-steps li>div{flex:1;min-width:0}.air-steps p{margin:2px 0}.air-steps q{display:block;font-size:13px;color:var(--muted);font-style:italic;overflow-wrap:anywhere}
.air-turn{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:12.5px;font-weight:900;color:#0d0f14;background:var(--game-color,var(--gold));box-shadow:0 0 0 4px var(--surface-2),0 0 18px color-mix(in srgb,var(--game-color,var(--gold)) 45%,transparent);z-index:1}
.air-cost{margin-left:8px;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:7px;background:#ffffff12;color:var(--muted)}
.air-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;padding:10px 12px;border-radius:12px;margin:8px 0 0}.air-row b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.air-row.good{background:color-mix(in srgb,var(--good) 10%,transparent)}.air-row.good b{color:var(--good)}.air-row.bad{background:#f07c7c12}.air-row.bad b{color:#f07c7c}
.air-flags{margin:10px 0 0;padding:10px 12px 10px 30px;border-radius:12px;background:#f4bf5812;color:#f6d79a;line-height:1.5}
.air-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.air-chips span{font-size:12.5px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--game-color,var(--gold)) 14%,transparent);border:1px solid color-mix(in srgb,var(--game-color,var(--gold)) 35%,transparent)}
.air-swap-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}.air-swap-pair>span:not(.air-arrow){display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;font-weight:750;line-height:1.3;overflow-wrap:anywhere}.air-swap-pair small{font-size:10.5px;letter-spacing:.1em;font-weight:900}
.air-swap-pair .out{background:#f07c7c14;border:1px solid #f07c7c40}.air-swap-pair .out small{color:#f07c7c}.air-swap-pair .in{background:color-mix(in srgb,var(--good) 12%,transparent);border:1px solid color-mix(in srgb,var(--good) 40%,transparent)}.air-swap-pair .in small{color:var(--good)}
.air-arrow{align-self:center;font-size:22px;color:var(--game-color,var(--gold));animation:air-nudge 1.6s ease-in-out 3}
.air-verdict-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}.air-verdict-row small{color:var(--muted)}
.air-score{font-weight:800;padding:6px 12px;border-radius:12px;background:#ffffff10}.air-score b{margin-left:6px}.air-score.up{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}.air-score.down{color:#f07c7c;background:#f07c7c14}
.air-pm{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}.air-pm li{display:flex;gap:10px;line-height:1.5}.air-pm i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-style:normal;font-weight:900;font-size:13px;background:#ffffff12}.air-pm .good i{color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent)}.air-pm .bad i{color:#f07c7c;background:#f07c7c18}
.air-tests ol{margin:10px 0 0;padding-left:22px;display:grid;gap:8px;line-height:1.5}
.air-ev{margin-top:10px}.air-ev summary{cursor:pointer;font-size:13px;color:var(--muted)}.air-ev p{font-size:13px}.air-ev q{display:block;margin-top:4px;color:var(--muted);font-style:italic;overflow-wrap:anywhere}
.air-note{font-size:12.5px;color:var(--muted)}.air-empty{padding:24px 8px;text-align:center;color:var(--muted)}
@keyframes air-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes air-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes air-sweep{to{transform:translateX(120%)}}
@keyframes air-deal{from{opacity:0;transform:translateY(-40px) rotate(0) scale(.8)}}
@keyframes air-nudge{50%{transform:translateX(4px)}}
@media(max-width:520px){.air-tabs{top:-18px}.air-tabs button{font-size:12.5px}.air-fan span{width:60px;height:86px;margin-left:-16px}.air-swap-pair{grid-template-columns:1fr;}.air-arrow{justify-self:center;transform:rotate(90deg);animation:none}}
@media(prefers-reduced-motion:reduce){.air-hero,.air-hero:after,.air-card,.air-steps li,.air-fan span,.air-verdict,.air-arrow{animation:none!important}.air-hero:after{display:none}}
.air-panel>*,.air-card{min-width:0}.air-fan{max-width:100%;overflow:hidden}
@media(max-width:520px){.air-fan span{width:54px;height:80px;margin-left:-19px}.air-fan b{font-size:9.5px}}

/* Coach "Deck" tab: Deck Power, explained. Power owns the numbers and colors; the coach adds words. */
.air-kicker em{font-style:normal;color:var(--text);letter-spacing:.04em}
.air-idrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.air-idrow .air-chips{margin:0}
.air-power-nums{display:flex;gap:6px}.air-power-nums span{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--muted);padding:4px 9px;border-radius:999px;background:#ffffff0d}.air-power-nums b{font-size:15px;color:var(--text)}
.air-area{--tone:var(--muted);position:relative;margin-top:10px;padding:12px 12px 12px 15px;border-radius:14px;background:#ffffff07;border:1px solid #ffffff12;animation:air-rise .45s ease both;animation-delay:calc(var(--i) * 60ms)}
.air-area:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--tone)}
.air-area.bad{--tone:#f07c7c}.air-area.warn{--tone:#f4bf58}.air-area.ok{--tone:#8fa3c0}.air-area.good{--tone:var(--good)}
.air-area-top{display:flex;align-items:center;gap:10px}.air-area-top b{flex:1;font-size:15px}
.air-num{font-weight:900;font-size:17px;font-variant-numeric:tabular-nums}.air-num small{font-weight:600;color:var(--muted);font-size:12px}
.air-status{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--tone);background:color-mix(in srgb,var(--tone) 14%,transparent)}
.air-status.bad{--tone:#f07c7c}.air-status.warn{--tone:#f4bf58}.air-status.ok{--tone:#8fa3c0}.air-status.good{--tone:var(--good)}
.air-meter{height:6px;margin:9px 0 4px;border-radius:6px;background:#ffffff12;overflow:hidden}.air-meter span{display:block;height:100%;border-radius:6px;background:var(--tone);transform-origin:left;animation:air-grow .8s .2s cubic-bezier(.2,.8,.2,1) both}
.air-max{display:inline-block;margin:6px 0 2px;font-size:12px;font-weight:800;color:#f07c7c}
.air-area>p{margin:8px 0 2px;line-height:1.5}
.air-beyond{margin-top:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--game-color,var(--gold)) 9%,transparent);border:1px dashed color-mix(in srgb,var(--game-color,var(--gold)) 40%,transparent)}.air-beyond p{margin:4px 0 0}
.air-jump{margin-top:8px;font-size:13px;font-weight:700;color:var(--game-color,var(--gold))}
.air-fixes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
@keyframes air-grow{from{transform:scaleX(0)}}
@media(max-width:520px){.air-tabs button{font-size:12px;gap:4px}.air-tabs button>span{display:none}}
@media(prefers-reduced-motion:reduce){.air-area,.air-meter span{animation:none!important}}

.air-better{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--good) 9%,transparent);border:1px solid color-mix(in srgb,var(--good) 35%,transparent)}.air-better p{margin:4px 0 0;line-height:1.7}.air-better .air-score{padding:3px 8px;font-size:13px}

.air-meta{border-left:4px solid var(--tone,#8fa3c0)}.air-meta.bad{--tone:#f07c7c}.air-meta.warn{--tone:#f4bf58}.air-meta.good{--tone:var(--good)}
.air-chips.them span{background:#f07c7c14;border-color:#f07c7c45}
.air-sub{margin:18px 2px 4px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Ask AI: orb, listening wave, thinking dots, answer cards popping in. */
.ask-dialog{padding:0;border:1px solid #ffffff24;border-radius:28px;width:min(640px,calc(100vw - 20px));max-width:640px;height:min(760px,88dvh);margin:auto;color:var(--text);background:color-mix(in srgb,var(--surface-2) 97%,transparent);box-shadow:0 30px 100px #000a;overflow:hidden;animation:ask-in .45s cubic-bezier(.2,.9,.2,1.1) both}
.ask-dialog::backdrop{background:#05070cd0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:cf-fade .25s ease both}
.ask-shell{display:flex;flex-direction:column;height:100%}
.ask-head{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);background:radial-gradient(120% 160% at 0 0,color-mix(in srgb,var(--game-color,var(--gold)) 20%,transparent),transparent 60%)}
.ask-head>div:nth-child(2){flex:1}.ask-head .eyebrow{margin:0 0 2px}.ask-head h2{margin:0;font-size:21px}
.ask-orb{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6,transparent 45%),conic-gradient(from 0deg,var(--game-color,var(--gold)),#b69aff,#6fd3ff,var(--game-color,var(--gold)));box-shadow:0 0 28px color-mix(in srgb,var(--game-color,var(--gold)) 55%,transparent);animation:ask-spin 8s linear infinite}
.ask-orb span{font-size:22px;color:#fff;text-shadow:0 0 12px #fff;animation:ask-spin 8s linear infinite reverse}
.ask-orb i{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--game-color,var(--gold)) 55%,transparent);opacity:0;animation:ask-ring 2.4s ease-out infinite}.ask-orb i:nth-child(2){animation-delay:.8s}.ask-orb i:nth-child(3){animation-delay:1.6s}
.ask-dialog.thinking .ask-orb{animation-duration:1.6s}.ask-dialog.thinking .ask-orb i{animation-duration:1.2s}
.ask-dialog.listening .ask-orb{animation-duration:3s;box-shadow:0 0 40px #ff5d7a99}
.ask-log{flex:1;overflow:auto;overscroll-behavior:contain;padding:18px 18px 8px;display:flex;flex-direction:column;gap:12px}
.ask-empty{margin:auto 0;text-align:center;padding:10px 4px}.ask-hello{font-size:20px;font-weight:750;line-height:1.35;margin:0 0 8px;text-wrap:balance}
.ask-examples{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}.ask-examples button{font:inherit;font-size:14px;padding:10px 14px;border-radius:999px;color:var(--text);background:#ffffff0c;border:1px solid #ffffff1f;cursor:pointer;animation:ask-pop .4s cubic-bezier(.2,.9,.2,1.3) both;animation-delay:calc(var(--i) * 80ms + 150ms)}
.ask-examples button:hover{border-color:color-mix(in srgb,var(--game-color,var(--gold)) 60%,transparent)}.ask-examples.follow{justify-content:flex-start;margin-top:10px}.ask-examples.follow button{font-size:13px;padding:7px 11px}
.ask-msg{max-width:88%;padding:12px 15px;border-radius:20px;line-height:1.5;animation:ask-pop .35s cubic-bezier(.2,.9,.2,1.2) both}.ask-msg p{margin:0}.ask-msg p+p{margin-top:6px}
.ask-msg.me{align-self:flex-end;background:var(--game-color,var(--gold));color:#0d0f14;font-weight:600;border-bottom-right-radius:6px}
.ask-msg.ai{align-self:flex-start;background:#ffffff0d;border:1px solid #ffffff17;border-bottom-left-radius:6px}.ask-msg.error{border-color:#f07c7c55;color:#f6b3b3}
.ask-msg.thinking{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.ask-dots{display:flex;gap:5px}.ask-dots i{width:8px;height:8px;border-radius:50%;background:var(--game-color,var(--gold));animation:ask-tink 1s ease-in-out infinite}.ask-dots i:nth-child(2){animation-delay:.15s}.ask-dots i:nth-child(3){animation-delay:.3s}
.ask-step{animation:cf-fade .3s ease both}
.ask-source{display:inline-block;margin-bottom:6px!important;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}.ask-source.app{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}.ask-source.general{color:#f4bf58;background:#f4bf5818}.ask-source.mixed{color:#b9c6ff;background:#8fa3ff18}
.ask-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.ask-item{display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:var(--text);padding:8px;border-radius:14px;background:#0000002a;border:1px solid #ffffff1c;cursor:pointer;animation:ask-deal .5s cubic-bezier(.2,.9,.2,1.2) both;animation-delay:calc(var(--i) * 110ms + 120ms);transition:transform .2s,border-color .2s}
.ask-item:hover,.ask-item:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--game-color,var(--gold)) 60%,transparent)}
.ask-item img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:9px;background:#ffffff0a}.ask-item.wide img{aspect-ratio:16/9}.ask-item b{font-size:13px;line-height:1.25}.ask-item small{color:var(--muted);font-size:11.5px}.ask-item em{font-style:normal;font-weight:800;color:var(--game-color,var(--gold));font-size:13px}
.ask-bar{display:flex;align-items:center;gap:8px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#00000022}
.ask-input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);padding:13px 16px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff0a}.ask-input:focus{outline:none;border-color:color-mix(in srgb,var(--game-color,var(--gold)) 70%,transparent)}
.ask-send,.ask-mic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;font-size:20px;font-weight:900;cursor:pointer}
.ask-send{background:var(--game-color,var(--gold));color:#0d0f14}.ask-mic{position:relative;background:#ffffff12;color:var(--text)}.ask-mic svg{width:22px;height:22px}.ask-mic[hidden]{display:none}
.ask-mic .ask-wave{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:3px}.ask-mic .ask-wave i{width:3px;height:10px;border-radius:2px;background:#fff;animation:ask-wave .9s ease-in-out infinite}.ask-mic .ask-wave i:nth-child(2){animation-delay:.1s}.ask-mic .ask-wave i:nth-child(3){animation-delay:.2s}.ask-mic .ask-wave i:nth-child(4){animation-delay:.3s}.ask-mic .ask-wave i:nth-child(5){animation-delay:.4s}
.ask-mic.on{background:#ff5d7a;box-shadow:0 0 0 6px #ff5d7a33,0 0 24px #ff5d7a88;animation:ask-breathe 1.2s ease-in-out infinite}.ask-mic.on svg{display:none}.ask-mic.on .ask-wave{display:flex}
@keyframes ask-in{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ask-spin{to{transform:rotate(360deg)}}
@keyframes ask-ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
@keyframes ask-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ask-deal{from{opacity:0;transform:translateY(-24px) rotate(-6deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes ask-tink{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-7px);opacity:1}}
@keyframes ask-wave{0%,100%{height:6px}50%{height:20px}}
@keyframes ask-breathe{50%{box-shadow:0 0 0 10px #ff5d7a22,0 0 34px #ff5d7aaa}}
@media(max-width:520px){.ask-dialog{border-radius:24px;height:92dvh;margin:auto auto max(8px,env(safe-area-inset-bottom))}.ask-msg{max-width:94%}}
@media(prefers-reduced-motion:reduce){.ask-dialog,.ask-orb,.ask-orb span,.ask-orb i,.ask-msg,.ask-examples button,.ask-item,.ask-dots i,.ask-mic.on,.ask-mic .ask-wave i{animation:none!important}}
/* Ask AI launchers: next to the search bar and as a tile. */
.ask-launch{flex:none;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:800;font-size:14px;color:#0d0f14;padding:0 14px;min-height:44px;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(120deg,var(--game-color,var(--gold)),#b69aff,#6fd3ff,var(--game-color,var(--gold)));background-size:300% 100%;animation:ask-shimmer 6s ease-in-out infinite;box-shadow:0 4px 18px color-mix(in srgb,var(--game-color,var(--gold)) 35%,transparent)}
.ask-launch span{font-size:16px}
@keyframes ask-shimmer{50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.ask-launch{animation:none}}

/* Coach uses the app's card art: dealt hand, line steps, swap tiles. */
.air-fan span.art{padding:0;overflow:hidden;background:#000;width:78px;height:109px}.air-fan span.art img{width:100%;height:100%;object-fit:cover;display:block}
.air-hand-names{margin:0 0 6px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.5}
.air-thumb{flex:none;width:42px;height:58px;object-fit:cover;border-radius:6px;box-shadow:0 3px 10px #0007;align-self:flex-start;margin-top:2px}
.air-swap-pair>span img{width:100%;max-width:120px;aspect-ratio:5/7;object-fit:cover;border-radius:9px;margin-bottom:6px;box-shadow:0 6px 16px #0008}
@media(max-width:520px){.air-fan span.art{width:58px;height:81px}}
/* Tour v2: looping mini replays of the app (tap marker + screens), card art from the app's data. */
.tour-v2{max-width:430px}.tour-v2 h2{margin-top:6px}
.tour-v2[data-dir="1"]{animation:tv-from-r .4s cubic-bezier(.2,.8,.2,1) both}.tour-v2[data-dir="-1"]{animation:tv-from-l .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes tv-from-r{from{opacity:0;transform:translateX(40px)}}@keyframes tv-from-l{from{opacity:0;transform:translateX(-40px)}}
.tour-demo{display:flex;justify-content:center;margin:4px 0 12px}
.tv-phone{position:relative;width:196px;height:300px;flex:none;border-radius:30px;padding:7px;background:#07080c;border:2px solid #ffffff26;box-shadow:0 22px 50px #000b,0 0 44px color-mix(in srgb,var(--game-color,var(--gold)) 22%,transparent)}
.tv-notch{position:absolute;top:12px;left:50%;width:50px;height:11px;border-radius:8px;background:#000;transform:translateX(-50%);z-index:6}
.tv-screen{position:relative;height:100%;border-radius:23px;overflow:hidden;background:linear-gradient(#191c24,#0e1015);font-size:11px;color:var(--text);text-align:left}
.tv-top{display:flex;justify-content:space-between;align-items:center;padding:28px 12px 6px;font-size:13px}
.tv-card{display:block;width:58px;aspect-ratio:5/7;border-radius:5px;overflow:hidden;background:linear-gradient(150deg,var(--game-color,var(--gold)),#6a4cff);box-shadow:0 6px 14px #000a}.tv-card img{width:100%;height:100%;object-fit:cover;display:block}.tv-card.mini{width:26px;border-radius:3px}
.tv-tap{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#ffffffd9;opacity:0;z-index:7;box-shadow:0 0 0 0 #ffffff80}
@keyframes tv-ripple{0%{box-shadow:0 0 0 0 #ffffffa0}100%{box-shadow:0 0 0 16px #ffffff00}}
/* 1 scan */
.tv-cam{position:relative;margin:2px 10px;height:186px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#252a36,#090b0f);overflow:hidden}
.tv-guide{position:absolute;inset:26px 40px;border:2px solid #f07c7c;border-radius:10px;animation:tv-guide 5s infinite}
@keyframes tv-guide{0%,38%{border-color:#f07c7c;box-shadow:none}46%,82%{border-color:var(--good);box-shadow:0 0 22px color-mix(in srgb,var(--good) 55%,transparent)}100%{border-color:#f07c7c}}
.tv-scanned{position:absolute;left:50%;top:50%;width:76px;animation:tv-slide 5s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes tv-slide{0%{opacity:0;transform:translate(-50%,90%) rotate(14deg)}28%,72%{opacity:1;transform:translate(-50%,-50%) rotate(0)}86%{opacity:0;transform:translate(-50%,40%) scale(.5)}100%{opacity:0}}
.tv-beam{position:absolute;left:20px;right:20px;height:2px;top:30px;background:linear-gradient(90deg,transparent,var(--good),transparent);opacity:0;animation:tv-beam 5s infinite}
@keyframes tv-beam{0%,28%{opacity:0;top:30px}30%{opacity:1}44%{opacity:1;top:150px}46%,100%{opacity:0}}
.tv-toast{position:absolute;left:12px;right:12px;bottom:16px;padding:9px;border-radius:11px;background:var(--good);color:#0d1a12;font-weight:800;text-align:center;opacity:0;animation:tv-toast 5s infinite}
@keyframes tv-toast{0%,48%{opacity:0;transform:translateY(12px)}56%,88%{opacity:1;transform:none}100%{opacity:0}}
.t-scan{left:50%;top:248px;animation:tv-t-scan 5s infinite}@keyframes tv-t-scan{0%,32%{opacity:0}36%{opacity:1;animation-timing-function:ease-out;box-shadow:0 0 0 0 #fff9}44%{opacity:0;box-shadow:0 0 0 16px #fff0}100%{opacity:0}}
/* 2 build */
.tv-chips,.tv-budget{display:flex;gap:5px;padding:4px 10px;flex-wrap:wrap}.tv-chips span,.tv-budget span{padding:5px 8px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff1c;font-weight:700}
.tv-hit{animation:tv-hit 6s infinite}@keyframes tv-hit{0%,20%{background:#ffffff12;color:var(--text)}24%,100%{background:var(--game-color,var(--gold));color:#0d0f14}}
.tv-budget{opacity:0;animation:tv-in 6s infinite;--at:30%}.tv-hit2{animation:tv-hit2 6s infinite}@keyframes tv-hit2{0%,44%{background:#ffffff12;color:var(--text)}48%,100%{background:var(--game-color,var(--gold));color:#0d0f14}}
@keyframes tv-in{0%,28%{opacity:0;transform:translateY(8px)}34%,94%{opacity:1;transform:none}100%{opacity:0}}
.tv-deal{position:relative;height:110px;margin-top:8px}.tv-deal .tv-card{position:absolute;left:calc(50% - 29px);top:10px;opacity:0;animation:tv-deal 6s infinite;animation-delay:calc(var(--n) * .18s)}
@keyframes tv-deal{0%,52%{opacity:0;transform:translateY(-60px) rotate(0)}62%,94%{opacity:1;transform:translateX(calc((var(--n) - 2) * 46px)) rotate(calc((var(--n) - 2) * 8deg))}100%{opacity:0}}
.tv-bar{position:absolute;left:10px;right:10px;bottom:14px;padding:9px;border-radius:11px;background:#ffffff12;font-weight:800;text-align:center;opacity:0;animation:tv-bar 6s infinite}.tv-bar span{color:var(--good)}
@keyframes tv-bar{0%,74%{opacity:0;transform:translateY(10px)}80%,94%{opacity:1;transform:none}100%{opacity:0}}
.t-build{animation:tv-t-build 6s infinite}@keyframes tv-t-build{0%{opacity:0;left:150px;top:200px}10%{opacity:1;left:150px;top:200px}18%{left:96px;top:72px;box-shadow:0 0 0 0 #fff9}24%{box-shadow:0 0 0 14px #fff0}36%{left:96px;top:72px}44%{left:72px;top:100px;box-shadow:0 0 0 0 #fff9}50%{box-shadow:0 0 0 14px #fff0;opacity:1}56%,100%{opacity:0;left:72px;top:100px}}
/* 3 power */
@property --tv-num{syntax:'<integer>';initial-value:0;inherits:false}
.tv-ring{position:relative;width:110px;height:110px;margin:6px auto 4px}.tv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.tv-ring circle{fill:none;stroke-width:3.2;stroke-linecap:round}.tv-track{stroke:#ffffff16}.tv-arc{stroke:var(--game-color,var(--gold));stroke-dasharray:100;stroke-dashoffset:100;animation:tv-arc 6s infinite}
@keyframes tv-arc{0%,8%{stroke-dashoffset:100}40%,92%{stroke-dashoffset:14}100%{stroke-dashoffset:100}}
.tv-score{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;font-weight:900;counter-reset:n var(--tv-num);animation:tv-count 6s infinite}.tv-score:after{content:counter(n)}
@keyframes tv-count{0%,8%{--tv-num:0}40%,92%{--tv-num:86}100%{--tv-num:0}}
.tv-bars{padding:2px 14px;display:grid;gap:6px}.tv-bars div{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:6px}.tv-bars span{color:var(--muted);font-size:10px}.tv-bars i{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--game-color,var(--gold)) var(--w),#ffffff14 var(--w));transform-origin:left;animation:tv-grow 6s infinite}
@keyframes tv-grow{0%,30%{transform:scaleX(0)}55%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.tv-coach{margin:12px 14px 0;padding:9px;border-radius:999px;text-align:center;font-weight:800;color:#0d0f14;background:linear-gradient(120deg,var(--game-color,var(--gold)),#b69aff);animation:tv-glow 6s infinite}
@keyframes tv-glow{0%,64%{box-shadow:none;transform:none}72%{box-shadow:0 0 22px #b69affaa;transform:scale(1.05)}80%,100%{box-shadow:0 0 14px #b69aff66;transform:none}}
.t-power{left:96px;top:262px;animation:tv-t-power 6s infinite}@keyframes tv-t-power{0%,64%{opacity:0}70%{opacity:1;box-shadow:0 0 0 0 #fff9}78%{opacity:0;box-shadow:0 0 0 16px #fff0}100%{opacity:0}}
/* 4 prices */
.tv-bell{display:inline-block;transform-origin:50% 0;animation:tv-bell 6s infinite}@keyframes tv-bell{0%,68%,86%,100%{transform:none}72%{transform:rotate(18deg)}76%{transform:rotate(-16deg)}80%{transform:rotate(10deg)}}
.tv-value{padding:2px 14px}.tv-value small{display:block;color:var(--muted)}.tv-value b{font-size:24px}.tv-value em{font-style:normal;color:var(--good);font-weight:800;margin-left:6px;opacity:0;animation:tv-in 6s infinite}
.tv-chart{display:block;width:calc(100% - 20px);height:90px;margin:8px 10px}.tv-chart path{fill:none;stroke:var(--good);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:tv-draw 6s infinite;vector-effect:non-scaling-stroke}
@keyframes tv-draw{0%,6%{stroke-dashoffset:200}50%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:200}}
.tv-row{display:flex;align-items:center;gap:8px;margin:4px 10px;padding:8px;border-radius:11px;background:#ffffff0d;opacity:0;animation:tv-row 6s infinite}.tv-row span{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tv-row b{color:var(--game-color,var(--gold))}
@keyframes tv-row{0%,52%{opacity:0;transform:translateX(30px)}60%,94%{opacity:1;transform:none}100%{opacity:0}}
.t-prices{left:150px;top:44px;animation:tv-t-power 6s infinite}
/* 5 ask */
.tv-askbtn{padding:4px 9px;border-radius:999px;font-weight:900;color:#0d0f14;background:linear-gradient(120deg,var(--game-color,var(--gold)),#b69aff,#6fd3ff)}
.tv-orb{position:relative;display:grid;place-items:center;width:58px;height:58px;margin:10px auto 8px;border-radius:50%;background:conic-gradient(from 0deg,var(--game-color,var(--gold)),#b69aff,#6fd3ff,var(--game-color,var(--gold)));box-shadow:0 0 26px #b69aff88;opacity:0;animation:tv-orb 7s infinite,ask-spin 3s linear infinite}
.tv-orb span{font-size:22px;color:#fff}.tv-orb i{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #b69aff99;animation:ask-ring 1.6s ease-out infinite}.tv-orb i:nth-child(2){animation-delay:.8s}
@keyframes tv-orb{0%,12%{opacity:0;transform:scale(.4)}18%,94%{opacity:1;transform:none}100%{opacity:0}}
.tv-q{margin:4px 12px;display:flex;justify-content:flex-end}.tv-q span{display:inline-block;max-width:100%;padding:7px 10px;border-radius:12px 12px 3px 12px;background:var(--game-color,var(--gold));color:#0d0f14;font-weight:700;white-space:nowrap;overflow:hidden;width:0;animation:tv-type 7s steps(30,end) infinite}
@keyframes tv-type{0%,22%{width:0;padding:7px 0}23%{padding:7px 10px}44%,94%{width:156px;padding:7px 10px}100%{width:0}}
.tv-dots{display:flex;gap:4px;margin:8px 14px;opacity:0;animation:tv-dots 7s infinite}.tv-dots i{width:7px;height:7px;border-radius:50%;background:var(--game-color,var(--gold));animation:ask-tink 1s ease-in-out infinite}.tv-dots i:nth-child(2){animation-delay:.15s}.tv-dots i:nth-child(3){animation-delay:.3s}
@keyframes tv-dots{0%,46%{opacity:0}50%,62%{opacity:1}66%,100%{opacity:0}}
.tv-answer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;margin:-14px 12px 0;padding:9px;border-radius:12px 12px 12px 3px;background:#ffffff10;border:1px solid #ffffff1c;opacity:0;animation:tv-answer 7s infinite}.tv-answer small{grid-column:1/-1;color:var(--good);font-weight:800;font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.tv-answer .tv-card{width:34px}.tv-answer b{font-size:12px;line-height:1.25}
@keyframes tv-answer{0%,64%{opacity:0;transform:translateY(14px) scale(.9)}70%,94%{opacity:1;transform:none}100%{opacity:0}}
.t-ask{left:158px;top:40px;animation:tv-t-ask 7s infinite}@keyframes tv-t-ask{0%{opacity:0}4%{opacity:1;box-shadow:0 0 0 0 #fff9}12%{opacity:0;box-shadow:0 0 0 16px #fff0}100%{opacity:0}}
.tour-examples{display:flex;flex-direction:column;gap:6px;margin:-4px 0 12px}.tour-examples span{font-size:14px;padding:8px 12px;border-radius:12px;background:#ffffff0c;border:1px solid #ffffff1a;animation:ask-pop .4s both;animation-delay:calc(var(--i) * 120ms + 200ms)}
@media(max-height:700px){.tv-phone{transform:scale(.82);margin:-27px 0}}
@media(prefers-reduced-motion:reduce){.tv-screen *,.tv-screen *::after,.tour-v2{animation:none!important}.tv-tap{display:none}.tv-scanned,.tv-toast,.tv-budget,.tv-deal .tv-card,.tv-bar,.tv-row,.tv-orb,.tv-dots,.tv-answer,.tv-value em{opacity:1}.tv-q span{width:auto}.tv-arc{stroke-dashoffset:14}.tv-chart path{stroke-dashoffset:0}.tv-score{--tv-num:86}}

/* Shared search rhythm on Home and Search, across all three games. */
.page-head .search-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.search-tools .tool-chip { min-width: 0; min-height: 44px; justify-content: center; padding: 7px 8px; }
.search-query, .hh-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; gap: 8px; }
.search-query input, .hh-search input { width: 100%; min-width: 0; }
.search-query .btn, .hh-search .btn { padding-inline: 12px; min-width: 0; font-size: 14px; }
.search-query .ask-launch, .hh-search .ask-launch { padding-inline: 12px; gap: 5px; min-height: 48px; box-shadow: 0 3px 12px color-mix(in srgb,var(--game-color,var(--gold)) 22%,transparent); }
@media (max-width: 359px) {
  .search-query, .hh-search { gap: 6px; }
  .search-query .btn, .hh-search .btn, .search-query .ask-launch, .hh-search .ask-launch { padding-inline: 9px; font-size: 13px; }
}

/* Actual app screens, isolated from live controls and workspace writes. */
.tour-card.tour-v2 { width:min(100%,480px); max-width:480px; max-height:calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow:auto; padding-top:46px; }
.tour-preview { position:relative; width:100%; height:clamp(190px,42dvh,350px); overflow:hidden; border-radius:16px; border:1px solid var(--line); margin:0 0 18px; background:var(--bg); }
.tour-preview iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; background:var(--bg); }
.tour-preview iframe:not(:only-child) { animation:tour-screen-cycle 12s infinite; animation-delay:calc(var(--frame) * -6s); }
@keyframes tour-screen-cycle { 0%,45%,100%{opacity:1} 50%,95%{opacity:0} }
@media(prefers-reduced-motion:reduce) { .tour-preview iframe {animation:none!important} .tour-preview iframe:not(:first-child){display:none} }

/* One visual family for Ask and deck coaching. */
.ai-companion { border-radius:28px; background:color-mix(in srgb,var(--surface-2) 97%,transparent); animation:ask-in .45s cubic-bezier(.2,.9,.2,1.1) both; }
.ai-companion::backdrop { background:#05070cd0; backdrop-filter:blur(16px); }
.ai-companion .ask-head { gap:12px; padding:18px 20px; background:radial-gradient(120% 160% at 0 0,color-mix(in srgb,var(--game-color,var(--gold)) 20%,transparent),transparent 60%); }
.ai-companion .ask-head>div:nth-child(2) { flex:1; min-width:0; }
.ai-companion .ask-head h2 { font-size:21px; overflow-wrap:anywhere; }
.ask-new { display:flex; align-items:center; gap:3px; flex:none; min-height:40px; padding:6px 8px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:transparent; font:inherit; cursor:pointer; }
.ask-deck { min-height:160px; position:relative; overflow:hidden; justify-content:flex-end; padding:16px; isolation:isolate; background:var(--surface); }
.ask-deck .ask-deck-art { position:absolute; inset:0; width:100%; height:100%; z-index:-2; object-fit:cover; border-radius:0; }
.ask-deck::after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent,#0b0d12e8 72%)}
.ask-deck b {font-size:16px;text-shadow:0 2px 8px #000}.ask-deck small{color:#d4dae4}.ask-items:has(.ask-deck){grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
@media(max-width:380px){.ai-companion .ask-head{gap:8px;padding:14px}.ai-companion .ask-head h2{font-size:18px}.ai-companion .ask-orb{width:40px;height:40px}.ask-new span{display:none}}
@media(prefers-reduced-motion:reduce){.ai-companion,.ai-companion::backdrop{animation:none!important}}

.ai-companion.thinking .ask-orb{animation-duration:1.6s}.ai-companion.thinking .ask-orb i{animation-duration:1.2s}