/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 2863:0 Unexpected "<"

**/
<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

  .dc-page {
    /* brand */
    --nen-red: #F21F2A;
    --nen-gold: #EFC441;
    --nen-green: #02EB94;

    /* surfaces */
    --ink: #070A0F;
    --surface: #0C121A;
    --surface-2: #121A24;
    --surface-3: #18222E;
    --line: rgba(122, 152, 180, .14);
    --line-strong: rgba(122, 152, 180, .26);

    /* text */
    --tx: #E8EFF5;
    --tx-dim: #93A7BA;
    --tx-mute: #5F7488;

    /* signals */
    --up: #26E39B;
    --down: #FF5B6B;

    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;

    --shadow: 0 18px 48px rgba(0, 0, 0, .55);
    --glow-gold: 0 0 0 1px rgba(239, 196, 65, .35), 0 12px 34px rgba(239, 196, 65, .12);
  }

  .dc-page *,
  .dc-page *::before,
  .dc-page *::after { box-sizing: border-box; }

  .dc-page {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
    max-width: 100%;
    overflow-x: clip;
    padding: 26px 18px 70px;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tx);
    background:
      radial-gradient(900px 460px at 8% -6%, rgba(242, 31, 42, .14), transparent 62%),
      radial-gradient(820px 460px at 92% -4%, rgba(239, 196, 65, .13), transparent 60%),
      radial-gradient(760px 520px at 50% 108%, rgba(2, 235, 148, .10), transparent 62%),
      var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* faint grid — trading-floor texture */
  .dc-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(122, 152, 180, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(122, 152, 180, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 620px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 620px);
  }

  .dc-page > * { position: relative; z-index: 1; }

  .shell { max-width: 1420px; margin: 0 auto; width: 100%; min-width: 0; }

  /* nothing may push the layout wider than the device */
  .dc-page img,
  .dc-page svg,
  .dc-page table { max-width: 100%; }

  .dc-page :focus-visible {
    outline: 2px solid var(--nen-gold);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* ══ HEADER ══════════════════════════════════════════════ */
  .dc-header {
    max-width: 1420px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  .dc-header img {
    width: 54px; height: 54px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 18px rgba(242, 31, 42, .38));
  }

  .dc-header-text h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.02;
    color: #fff;
  }

  .dc-header-text h1 em {
    font-style: normal;
    background: linear-gradient(92deg, var(--nen-gold), #fff 60%, var(--nen-green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .dc-header-text p {
    margin: 5px 0 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
  }

  .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(2, 235, 148, .08);
    border: 1px solid rgba(2, 235, 148, .26);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--up);
    text-transform: uppercase;
  }

  .live-dot i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--up);
    box-shadow: 0 0 0 0 rgba(38, 227, 155, .6);
    animation: pulse 2.4s infinite;
  }

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(38, 227, 155, .55); }
    70% { box-shadow: 0 0 0 9px rgba(38, 227, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(38, 227, 155, 0); }
  }

  /* ══ TOOLBAR ═════════════════════════════════════════════ */
  .exchange-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
    max-width: 1420px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 13px 16px;
    background: rgba(12, 18, 26, .86);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
  }

  .exchange-toolbar .brand {
    display: none;
  }

  .exchange-toolbar .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 10px;
    flex: 1 1 auto;
  }

  .exchange-toolbar .filters label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tx-mute);
    text-transform: uppercase;
    letter-spacing: .14em;
  }

  .exchange-toolbar select,
  .exchange-toolbar input[type="number"],
  .exchange-toolbar input[type="text"] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 13.5px;
    font-family: var(--font-mono);
    color: var(--tx);
    min-height: 40px;
    transition: border-color .16s, box-shadow .16s, background .16s;
  }

  .exchange-toolbar select { padding-right: 30px; cursor: pointer; }

  .exchange-toolbar input::placeholder { color: var(--tx-mute); }

  .exchange-toolbar select:hover,
  .exchange-toolbar input:hover { border-color: var(--line-strong); }

  .exchange-toolbar select:focus,
  .exchange-toolbar input:focus {
    outline: none;
    border-color: rgba(239, 196, 65, .55);
    box-shadow: 0 0 0 3px rgba(239, 196, 65, .12);
    background: var(--surface-3);
  }

  .exchange-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-2);
    color: var(--tx);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
    transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
  }

  .exchange-toolbar .btn:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    background: var(--surface-3);
  }

  .exchange-toolbar .btn.gold {
    background: linear-gradient(135deg, var(--nen-gold), #f7d777);
    border-color: transparent;
    color: #14100a;
    font-weight: 800;
  }

  .exchange-toolbar .btn.gold:hover { box-shadow: var(--glow-gold); }

  #reindexBtn { display: none; }

  .exchange-toolbar .clear {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-mute);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 999px;
    transition: color .16s, background .16s;
  }

  .exchange-toolbar .clear:hover {
    color: var(--nen-red);
    background: rgba(242, 31, 42, .09);
  }

  .tb-sep {
    width: 1px;
    height: 26px;
    background: var(--line);
    flex-shrink: 0;
  }

  /* ── Multiselect ── */
  .ms { position: relative; display: inline-block; }

  .ms-btn { display: inline-flex; align-items: center; gap: 8px; }

  .ms-btn .badge {
    background: rgba(239, 196, 65, .16);
    color: var(--nen-gold);
    border-radius: 999px;
    padding: 1px 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
  }

  .ms-btn .badge.on {
    background: var(--nen-gold);
    color: #14100a;
  }

  .ms-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: 8px;
    min-width: 210px;
    max-height: 330px;
    overflow: auto;
    box-shadow: var(--shadow);
    display: none;
  }

  .ms-pop.right { left: auto; right: 0; }

  .ms-pop.open {
    display: block;
    animation: popIn .16s cubic-bezier(.22, 1, .36, 1);
  }

  @keyframes popIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }

  .ms-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--tx-dim);
    transition: background .12s, color .12s;
  }

  .ms-opt:hover { background: rgba(239, 196, 65, .09); color: var(--tx); }

  .ms-opt input {
    accent-color: var(--nen-gold);
    width: 15px; height: 15px;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* ══ TAPE ════════════════════════════════════════════════ */
  .tape {
    position: relative;
    overflow: hidden;
    height: 46px;
    max-width: 1420px;
    margin: 0 auto 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
  }

  .tape::before,
  .tape::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
  }

  .tape::before { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
  .tape::after { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }

  .tape-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: crawl 78s linear infinite;
  }

  .tape:hover .tape-track { animation-play-state: paused; }

  @keyframes crawl {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .tape-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 22px;
    height: 100%;
    border-right: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s;
  }

  .tape-item:hover { background: rgba(239, 196, 65, .07); }
  .tape-item .tk { color: var(--tx-mute); }
  .tape-item .pr { color: var(--tx); font-weight: 600; }
  .tape-item .ch { font-size: 12px; font-weight: 600; }

  .up { color: var(--up); }
  .down { color: var(--down); }
  .flat { color: var(--tx-mute); }

  /* ══ BANNERS ═════════════════════════════════════════════ */
  .banner,
  .upgrade-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1420px;
    margin: 0 auto 18px;
    padding: 14px 20px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    background: rgba(239, 196, 65, .07);
    border: 1px solid rgba(239, 196, 65, .24);
    color: var(--nen-gold);
  }

  .upgrade-banner { justify-content: space-between; flex-wrap: wrap; }
  .upgrade-banner .btn {
    background: var(--nen-gold);
    color: #14100a;
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
  }

  .data-note {
    max-width: 1420px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: rgba(255, 91, 107, .07);
    border: 1px solid rgba(255, 91, 107, .28);
    font-size: 14px;
    color: #ffb3ba;
  }

  .data-note b { color: #fff; }

  .data-note details { margin-top: 10px; }

  .data-note summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-dim);
  }

  .diff-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 0;
  }

  .diff-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(122, 152, 180, .1);
    color: var(--tx-dim);
  }

  .diff-table td.dup { color: var(--down); font-weight: 600; }
  .diff-table td.okc { color: var(--up); }

  .spin { display: inline-block; animation: sp 1s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg); } }

  /* ══ SECTION HEADS ═══════════════════════════════════════ */
  .sec-h {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
  }

  .sec-h h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .sec-h h3::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--nen-gold);
  }

  .sec-h.green h3::before { background: var(--up); }
  .sec-h.red h3::before { background: var(--down); }

  .fbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--tx-dim);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    min-height: 34px;
    transition: border-color .16s, color .16s, background .16s;
  }

  .sec-h .fbtn, .board-h .fbtn { margin-left: auto; }
  .fbtn:hover { border-color: var(--line-strong); color: var(--tx); }
  .fbtn.on { border-color: rgba(239, 196, 65, .5); color: var(--nen-gold); background: rgba(239, 196, 65, .08); }

  .fcount {
    font-family: var(--font-mono);
    font-size: 10.5px;
    min-width: 19px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(122, 152, 180, .16);
    color: var(--tx-dim);
  }

  .fcount.on { background: var(--nen-gold); color: #14100a; font-weight: 700; }

  .sec-filters {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 10px;
    padding: 13px 15px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    background: rgba(122, 152, 180, .05);
    border: 1px dashed var(--line-strong);
  }

  .sec-filters.open { display: flex; animation: fadeUp .22s cubic-bezier(.22, 1, .36, 1); }

  .sec-filters label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tx-mute);
  }

  .sec-filters input {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--tx);
    min-height: 36px;
  }

  .sec-filters input::placeholder { color: var(--tx-mute); }
  .sec-filters input:focus {
    outline: none;
    border-color: rgba(239, 196, 65, .5);
    box-shadow: 0 0 0 3px rgba(239, 196, 65, .1);
  }

  .sec-filters .btn {
    background: var(--surface-2);
    color: var(--tx);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: border-color .16s, background .16s;
  }

  .sec-filters .btn:hover { border-color: var(--line-strong); background: var(--surface-3); }

  .fstate {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-mute);
  }

  .fstate .dotm { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-mute); }
  .fstate.own { color: var(--nen-gold); }
  .fstate.own .dotm { background: var(--nen-gold); }

  .period-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .period-inline label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
  }

  .period-inline select {
    background: var(--surface-3);
    border: 1px solid rgba(239, 196, 65, .28);
    color: var(--nen-gold);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    min-height: 34px;
    transition: border-color .16s, background .16s;
  }

  .period-inline select:hover { border-color: rgba(239, 196, 65, .55); background: rgba(239, 196, 65, .08); }

  .empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .empty-actions .pill { background: rgba(239, 196, 65, .10); border-color: rgba(239, 196, 65, .26); color: var(--nen-gold); }
  .empty-actions .pill:hover { background: rgba(239, 196, 65, .2); }

  .tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
  }

  /* ══ KPI STRIP ═══════════════════════════════════════════ */
  .kpis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }

  .kpi--hero { grid-column: span 4; }
  .kpi--sm { grid-column: span 2; }
  .kpi--wide { grid-column: span 4; }

  .kpi {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
  }

  .kpi .k {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx-mute);
    margin-bottom: 7px;
  }

  .kpi .v {
    font-family: var(--font-mono);
    font-size: clamp(19px, 2.1vw, 26px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .kpi .s {
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
  }

  .kpi.hero {
    background:
      radial-gradient(320px 140px at 100% 0%, rgba(239, 196, 65, .14), transparent 70%),
      linear-gradient(160deg, var(--surface-2), var(--surface));
    border-color: rgba(239, 196, 65, .22);
  }

  .kpi.hero .v { font-size: clamp(24px, 3.2vw, 38px); }

  .kpi.click { cursor: pointer; transition: border-color .18s, transform .18s; }
  .kpi.click:hover { border-color: var(--line-strong); transform: translateY(-2px); }

  /* rarity median mini-table inside a kpi */
  .rarline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 3px 0;
    color: var(--tx-dim);
  }

  .rarline .rk { width: 52px; color: var(--tx); font-weight: 600; }
  .rarline .rn { color: var(--tx-mute); font-size: 11px; width: 34px; }
  .rarline .rbar { flex: 1; height: 4px; border-radius: 3px; background: rgba(122, 152, 180, .12); overflow: hidden; }
  .rarline .rbar i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .8s cubic-bezier(.22, 1, .36, 1); }
  .rarline .rv { font-variant-numeric: tabular-nums; color: var(--tx); }

  /* ══ CARD TILE (signature element) ═══════════════════════ */
  .ctile {
    position: relative;
    flex: 0 0 auto;
    width: 178px;
    padding: 12px 12px 14px;
    border-radius: var(--r-md);
    background: linear-gradient(165deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s, box-shadow .28s;
  }

  .ctile:hover {
    transform: translateY(-6px);
    border-color: rgba(239, 196, 65, .40);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  }

  .ctile .art {
    position: relative;
    aspect-ratio: 5 / 7;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-3);
    margin-bottom: 11px;
  }

  .ctile .art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }

  .ctile:hover .art img { transform: scale(1.06); }

  /* foil sheen sweep — the collector's tilt */
  .ctile .art::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .30) 48%, rgba(239, 196, 65, .22) 54%, transparent 64%);
    transform: translateX(-120%);
    transition: transform .75s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }

  .ctile:hover .art::after { transform: translateX(120%); }

  .ph-art {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--tx-mute);
    background:
      repeating-linear-gradient(45deg, rgba(122, 152, 180, .05) 0 8px, transparent 8px 16px),
      var(--surface-3);
  }

  .ctile .rk {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
    letter-spacing: -.05em;
  }

  .ctile .tk {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nen-gold);
    letter-spacing: .04em;
  }

  .ctile .nm {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin: 3px 0 9px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
  }

  .ctile .foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
  }

  .ctile .px {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .ctile .dl {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* rail */
  .rail-wrap { position: relative; margin-bottom: 26px; }

  .rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 152, 180, .3) transparent;
  }

  .rail > * { scroll-snap-align: start; }
  .rail::-webkit-scrollbar { height: 6px; }
  .rail::-webkit-scrollbar-track { background: transparent; }
  .rail::-webkit-scrollbar-thumb { background: rgba(122, 152, 180, .28); border-radius: 99px; }

  .rail-nav {
    position: absolute;
    top: 40%;
    z-index: 5;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(12, 18, 26, .92);
    border: 1px solid var(--line-strong);
    color: var(--tx);
    cursor: pointer;
    transition: background .16s, transform .16s;
  }

  .rail-nav:hover { background: var(--surface-3); transform: scale(1.08); }
  .rail-nav.prev { left: -8px; }
  .rail-nav.next { right: -8px; }

  /* ══ MOVERS SPLIT ════════════════════════════════════════ */
  .movers-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 26px;
  }

  .mv-panel {
    padding: 16px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
  }

  .mvrow {
    display: grid;
    grid-template-columns: 24px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 9px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .16s, transform .16s;
  }

  .mvrow:hover { background: rgba(122, 152, 180, .08); transform: translateX(3px); }

  .mvrow .rk {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tx-mute);
    font-variant-numeric: tabular-nums;
  }

  .mvthumb {
    width: 34px;
    aspect-ratio: 5 / 7;
    border-radius: 5px;
    object-fit: cover;
    background: var(--surface-3);
    display: block;
  }

  .mvthumb.ph {
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--tx-mute);
  }

  .mvrow .t {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nen-gold);
  }

  .mvrow .n {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mvrow .bar {
    height: 3px;
    border-radius: 3px;
    background: rgba(122, 152, 180, .12);
    margin-top: 5px;
    overflow: hidden;
  }

  .mvrow .bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width .85s cubic-bezier(.22, 1, .36, 1);
  }

  .mvrow .bar i.g { background: linear-gradient(90deg, rgba(38, 227, 155, .35), var(--up)); }
  .mvrow .bar i.l { background: linear-gradient(90deg, rgba(255, 91, 107, .35), var(--down)); }

  .mvrow .right { text-align: right; }

  .mvrow .p {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .mvrow .c {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* ══ BOARD ═══════════════════════════════════════════════ */
  .board {
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    /* NOT overflow:hidden — it clipped the board's own filter dropdowns.
       Children that need clipping (.board-scroll) carry their own radius. */
  }

  .board > .tabs-rule:last-of-type { border-radius: 0; }

  .board-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px 0;
  }

  .board-h h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
  }

  .count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--tx-mute);
  }

  .tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 20px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    position: relative;
    background: transparent;
    border: 0;
    color: var(--tx-mute);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 15px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    transition: color .18s, background .18s;
  }

  .tab:hover { color: var(--tx); background: rgba(122, 152, 180, .06); }
  .tab.active { color: #fff; }

  .tab .cnt {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(122, 152, 180, .14);
    margin-left: 6px;
    color: var(--tx-dim);
  }

  .tab.active .cnt { background: rgba(239, 196, 65, .18); color: var(--nen-gold); }

  .tab-ink {
    position: absolute;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nen-gold), var(--nen-green));
    transition: left .32s cubic-bezier(.22, 1, .36, 1), width .32s cubic-bezier(.22, 1, .36, 1);
  }

  .tabs-rule { height: 1px; background: var(--line); }

  .view { padding: 18px 20px 22px; animation: fadeUp .3s cubic-bezier(.22, 1, .36, 1); }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  /* view toolbar (layout switch) */
  .view-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line);
  }

  .seg button {
    background: transparent;
    border: 0;
    color: var(--tx-mute);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s, color .18s;
  }

  .seg button.on { background: rgba(239, 196, 65, .16); color: var(--nen-gold); }

  /* ── Grid layout of cards ── */
  .cgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
  }

  .cgrid .ctile { width: auto; }

  /* ── Table layout ── */
  .board-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); }

  .dc-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 860px;
  }

  .dc-page thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .16s;
  }

  .dc-page thead th:hover { color: var(--nen-gold); }
  .dc-page thead th .arw { color: var(--nen-gold); }

  .dc-page tbody tr {
    cursor: pointer;
    transition: background .14s;
    border-bottom: 1px solid rgba(122, 152, 180, .07);
  }

  .dc-page tbody tr:hover { background: rgba(239, 196, 65, .06); }
  .dc-page tbody td { padding: 10px 14px; vertical-align: middle; }

  .rowart {
    width: 30px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    object-fit: cover;
    background: var(--surface-3);
    display: block;
  }

  .tk-cell { font-family: var(--font-mono); font-size: 12px; color: var(--nen-gold); white-space: nowrap; }
  .nm-cell { font-weight: 600; color: var(--tx); }
  .px-cell { font-family: var(--font-mono); font-weight: 700; text-align: right; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ch-cell { font-family: var(--font-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

  .spark { display: block; }

  /* ── chips ── */
  .chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .05em;
    border: 1px solid transparent;
    white-space: nowrap;
    font-weight: 500;
  }

  .chip.set { background: rgba(239, 196, 65, .10); color: var(--nen-gold); border-color: rgba(239, 196, 65, .22); }
  .chip.source { background: rgba(38, 227, 155, .10); color: var(--up); border-color: rgba(38, 227, 155, .18); }
  .chip.carried { background: rgba(122, 152, 180, .10); color: var(--tx-dim); border-color: rgba(122, 152, 180, .18); }
  .chip.no-price { background: rgba(255, 91, 107, .10); color: var(--down); border-color: rgba(255, 91, 107, .18); }
  .chip.scrape { background: rgba(77, 150, 255, .10); color: #8ab6ff; border-color: rgba(77, 150, 255, .18); }
  .chip.floored { background: rgba(170, 120, 255, .10); color: #c0a0ff; border-color: rgba(170, 120, 255, .18); }

  .c-rojo { background: rgba(255, 91, 107, .14); color: #ff8a95; }
  .c-verde { background: rgba(38, 227, 155, .14); color: #5fe3b4; }
  .c-azul { background: rgba(77, 150, 255, .14); color: #8ab6ff; }
  .c-morado { background: rgba(170, 120, 255, .14); color: #c0a0ff; }
  .c-negro { background: rgba(150, 168, 184, .14); color: #aebfce; }
  .c-amarillo { background: rgba(239, 196, 65, .16); color: var(--nen-gold); }
  .c-multicolor {
    background: linear-gradient(90deg, rgba(255,91,107,.18), rgba(239,196,65,.18), rgba(38,227,155,.18), rgba(138,182,255,.18));
    color: #e6d6a8;
  }

  .rar { font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-dim); }

  /* ── pagination ── */
  .pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 2px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tx-mute);
  }

  .pagination.pagination-top { padding: 0 2px 14px; }
  .pagination .info { margin-right: auto; }

  .pagination button {
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--tx);
    border-radius: 999px;
    width: 34px; height: 34px;
    cursor: pointer;
    transition: background .16s, border-color .16s;
  }

  .pagination button:hover:not(:disabled) { background: rgba(239, 196, 65, .14); border-color: rgba(239, 196, 65, .3); }
  .pagination button:disabled { opacity: .35; cursor: not-allowed; }

  .pagination .page-num { color: var(--tx); font-weight: 700; min-width: 28px; text-align: center; }

  .pagination .page-size-select,
  .view-bar .page-size-select {
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--tx);
    border-radius: 999px;
    padding: 6px 30px 6px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    min-height: 34px;
    transition: border-color .16s, box-shadow .16s, background .16s, color .16s;
  }

  .view-bar .page-size-select:hover,
  .pagination .page-size-select:hover {
    border-color: var(--line-strong);
    background: rgba(239, 196, 65, .08);
  }

  .view-bar .page-size-select:focus,
  .pagination .page-size-select:focus {
    outline: none;
    border-color: rgba(239, 196, 65, .5);
    box-shadow: 0 0 0 3px rgba(239, 196, 65, .1);
  }

  .view-bar .page-size-select option,
  .pagination .page-size-select option {
    background: var(--surface-2);
    color: var(--tx);
  }

  /* ══ MOVERS FULL VIEW ════════════════════════════════════ */
  .mv-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  .sumtile {
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--surface-3);
    border: 1px solid var(--line);
  }

  .sumtile .k {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
    margin-bottom: 6px;
  }

  .sumtile .v { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1.1; }
  .sumtile .sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-mute); margin-top: 4px; }

  .mv-list { display: flex; flex-direction: column; gap: 2px; }

  /* ══ SETS VIEW — MARKET MATCHUP ══════════════════════════ */
  .sets-view { display: flex; flex-direction: column; gap: 16px; }

  .set-battle-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .62fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    background:
      radial-gradient(420px 180px at 0 0, rgba(239,196,65,.13), transparent 65%),
      radial-gradient(420px 180px at 100% 0, rgba(138,182,255,.12), transparent 65%),
      linear-gradient(160deg, rgba(24,34,46,.94), rgba(12,18,26,.98));
    overflow: hidden;
  }

  .set-battle-head::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(239,196,65,.05), transparent 34%, transparent 66%, rgba(138,182,255,.05));
  }

  .set-battle-side,
  .set-battle-center { position: relative; z-index: 1; min-width: 0; }

  .set-battle-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: rgba(7,10,15,.36);
    border: 1px solid var(--line);
  }

  .set-battle-side.a { border-color: rgba(239,196,65,.28); box-shadow: inset 3px 0 0 rgba(239,196,65,.78); }
  .set-battle-side.b { border-color: rgba(138,182,255,.26); box-shadow: inset -3px 0 0 rgba(138,182,255,.72); text-align: right; }

  .set-side-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--tx-mute);
  }

  .set-battle-side select {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .set-battle-side.a select { border-color: rgba(239,196,65,.42); }
  .set-battle-side.b select { border-color: rgba(138,182,255,.42); }

  .set-battle-side strong {
    font-family: var(--font-mono);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
  }
  .set-battle-side.a strong { color: var(--nen-gold); }
  .set-battle-side.b strong { color: #8ab6ff; }
  .set-battle-side small { color: var(--tx-mute); font-family: var(--font-mono); font-size: 10.5px; }

  .set-battle-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 10px 4px;
  }

  .set-swap {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(239,196,65,.36);
    background: rgba(239,196,65,.1);
    color: var(--nen-gold);
    font-size: 21px;
    cursor: pointer;
    transition: transform .24s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s;
  }
  .set-swap:hover { transform: rotate(180deg) scale(1.07); background: rgba(239,196,65,.18); border-color: rgba(239,196,65,.58); }

  .set-battle-center > span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    color: var(--tx-mute);
  }
  .set-battle-center > b { font-size: 13px; line-height: 1.25; color: #fff; }
  .set-battle-center > small { font-family: var(--font-mono); font-size: 9.5px; color: var(--tx-mute); }

  .set-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-radius: var(--r-md);
    background: rgba(122,152,180,.045);
    border: 1px solid var(--line);
  }
  .set-filterbar > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .set-filter-label,
  .set-filter-note,
  .set-muted {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--tx-mute);
  }
  .set-filter-label { text-transform: uppercase; letter-spacing: .14em; }
  .set-filterbar .rar-pills { margin: 0; }

  .rar-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
  .pill {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .05em;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--tx-dim);
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s, transform .16s;
  }
  .pill:hover { border-color: var(--line-strong); color: var(--tx); transform: translateY(-1px); }
  .pill.on { background: rgba(239,196,65,.16); border-color: rgba(239,196,65,.42); color: var(--nen-gold); }

  .set-scorecard,
  .set-history-panel,
  .set-rarity-panel,
  .set-structure-panel,
  .set-card-battle {
    padding: 18px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, rgba(24,34,46,.86), rgba(12,18,26,.92));
    border: 1px solid var(--line);
  }

  .set-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .set-section-head > div:first-child { display: flex; align-items: center; gap: 9px; }
  .set-section-head > div:first-child > span {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    color: var(--nen-gold);
    border: 1px solid rgba(239,196,65,.25);
    border-radius: 999px;
    padding: 2px 7px;
  }
  .set-section-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
  .set-section-head small { font-family: var(--font-mono); font-size: 9.5px; color: var(--tx-mute); }

  .set-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
  }

  .set-metric {
    position: relative;
    padding: 12px 13px;
    border-radius: var(--r-sm);
    background: rgba(122,152,180,.055);
    border: 1px solid rgba(122,152,180,.11);
    overflow: hidden;
  }
  .set-metric.win-a { box-shadow: inset 2px 0 0 rgba(239,196,65,.75); }
  .set-metric.win-b { box-shadow: inset -2px 0 0 rgba(138,182,255,.75); }
  .set-metric-name {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-mute);
    margin-bottom: 8px;
  }
  .set-metric-name span {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--tx-mute); font-size: 8px; cursor: help;
  }
  .set-metric-values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 7px; }
  .set-metric-values b { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .set-metric-values b.a { color: var(--nen-gold); }
  .set-metric-values b.b { color: #8ab6ff; text-align: right; }
  .set-metric-values em { font-family: var(--font-mono); font-size: 8px; color: var(--tx-mute); font-style: normal; text-transform: uppercase; }

  .set-breadth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
  .set-breadth {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: var(--r-sm); background: rgba(7,10,15,.28); border: 1px solid var(--line);
  }
  .set-breadth b { font-family: var(--font-mono); font-size: 11px; color: var(--tx); }
  .set-breadth.a b { color: var(--nen-gold); }
  .set-breadth.b b { color: #8ab6ff; }
  .set-breadth span { display: flex; gap: 9px; font-family: var(--font-mono); font-size: 10px; }
  .set-breadth i { font-style: normal; }

  .set-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(7,10,15,.34);
    border: 1px solid var(--line);
  }
  .set-seg button {
    border: 0; background: transparent; color: var(--tx-mute);
    border-radius: 999px; padding: 6px 11px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
  }
  .set-seg button.on { background: rgba(239,196,65,.15); color: var(--nen-gold); }

  .set-chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-family: var(--font-mono); font-size: 10px; }
  .set-chart-legend .a { color: var(--nen-gold); }
  .set-chart-legend .b { color: #8ab6ff; }
  .set-chart-legend em { margin-left: auto; color: var(--tx-mute); font-style: normal; }
  .set-chart-wrap { overflow-x: auto; }
  .set-history-chart { width: 100%; min-width: 640px; height: auto; display: block; }
  .set-chart-grid { stroke: rgba(122,152,180,.10); stroke-width: 1; }
  .set-chart-axis { fill: #5F7488; font: 9px var(--font-mono); }
  .set-chart-line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,255,255,.04)); }
  .set-chart-line.a { stroke: var(--nen-gold); }
  .set-chart-line.b { stroke: #8ab6ff; }
  .set-chart-dot { stroke: var(--surface); stroke-width: 2; cursor: crosshair; transition: r .14s; }
  .set-chart-dot.a { fill: var(--nen-gold); }
  .set-chart-dot.b { fill: #8ab6ff; }
  .set-chart-dot:hover { r: 7px; }
  .set-chart-empty { padding: 42px 16px; text-align: center; color: var(--tx-mute); font-family: var(--font-mono); font-size: 11px; }
  .set-history-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--tx-mute); font-family: var(--font-mono); font-size: 9.5px; }

  .set-mid-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
  .set-rarity-head { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: var(--tx-mute); text-align: center; }
  .set-rarity-head .a { color: var(--nen-gold); text-align: left; }
  .set-rarity-head .b { color: #8ab6ff; text-align: right; }
  .set-rarity-list { display: flex; flex-direction: column; gap: 7px; }
  .set-rarity-row { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 8px; align-items: center; }
  .set-rarity-code {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    min-width: 46px;
    padding: 3px 7px;
    border-radius: 999px;
    text-align: center;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
    color: var(--rar); border: 1px solid color-mix(in srgb, var(--rar) 38%, transparent);
    background: color-mix(in srgb, var(--rar) 10%, transparent);
  }
  .set-rarity-side { min-width: 0; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
  .set-rarity-side.a { grid-column: 1; grid-row: 1; justify-content: flex-end; color: var(--nen-gold); }
  .set-rarity-side.b { grid-column: 3; grid-row: 1; color: #8ab6ff; }
  .set-rarity-side i { display: block; height: 5px; width: min(62%, var(--w)); min-width: 2px; border-radius: 9px; }
  .set-rarity-side.a i { background: linear-gradient(90deg, rgba(239,196,65,.20), var(--nen-gold)); }
  .set-rarity-side.b i { background: linear-gradient(90deg, #8ab6ff, rgba(138,182,255,.20)); }

  .set-structure-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .set-structure { padding: 14px; border-radius: var(--r-sm); background: rgba(7,10,15,.28); border: 1px solid var(--line); }
  .set-structure > span { font-family: var(--font-mono); font-size: 9.5px; color: var(--tx-mute); text-transform: uppercase; letter-spacing: .08em; }
  .set-structure > strong { display: block; margin: 4px 0 8px; font-family: var(--font-mono); font-size: 25px; color: #fff; }
  .set-structure.a > strong { color: var(--nen-gold); }
  .set-structure.b > strong { color: #8ab6ff; }
  .set-structure > div { height: 5px; border-radius: 99px; background: rgba(122,152,180,.12); overflow: hidden; }
  .set-structure > div i { display: block; width: var(--w); height: 100%; border-radius: inherit; }
  .set-structure.a > div i { background: var(--nen-gold); }
  .set-structure.b > div i { background: #8ab6ff; }
  .set-structure small { display: block; margin-top: 8px; color: var(--tx-dim); font-size: 10.5px; line-height: 1.35; }
  .set-callout { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(122,152,180,.045); color: var(--tx-mute); font-family: var(--font-mono); font-size: 9.5px; line-height: 1.55; }

  .set-card-battle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .set-card-list { min-width: 0; }
  .set-card-list h4 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; }
  .set-card-list h4.a { color: var(--nen-gold); }
  .set-card-list h4.b { color: #8ab6ff; }
  .set-card-row {
    width: 100%;
    display: grid;
    grid-template-columns: 22px 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid rgba(122,152,180,.075);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s, transform .15s;
  }
  .set-card-row:hover { background: rgba(122,152,180,.065); transform: translateX(2px); }
  .set-card-rank { font-family: var(--font-mono); font-size: 10px; color: var(--tx-mute); }
  .set-card-art { width: 36px; aspect-ratio: 5/7; border-radius: 4px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; }
  .set-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .set-card-ph { color: var(--tx-mute); font-family: var(--font-mono); font-size: 8px; }
  .set-card-copy { min-width: 0; display: block; }
  .set-card-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); font-size: 11.5px; }
  .set-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-mute); font-family: var(--font-mono); font-size: 9px; margin-top: 2px; }
  .set-card-price, .set-card-move { font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .set-card-row.a .set-card-price { color: var(--nen-gold); }
  .set-card-row.b .set-card-price { color: #8ab6ff; }
  .set-empty-mini { padding: 20px 10px; color: var(--tx-mute); font-family: var(--font-mono); font-size: 10px; text-align: center; }

  @media (max-width: 980px) {
    .set-battle-head { grid-template-columns: 1fr 1fr; }
    .set-battle-center { grid-column: 1 / -1; grid-row: 2; min-height: 92px; }
    .set-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .set-mid-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 680px) {
    .sets-view { gap: 12px; }
    .set-battle-head { grid-template-columns: 1fr; padding: 10px; }
    .set-battle-center { grid-column: auto; grid-row: auto; order: 2; }
    .set-battle-side.a { order: 1; }
    .set-battle-side.b { order: 3; text-align: left; box-shadow: inset 3px 0 0 rgba(138,182,255,.72); }
    .set-metric-grid, .set-breadth-grid, .set-structure-cards, .set-card-battle-grid { grid-template-columns: 1fr; }
    .set-scorecard, .set-history-panel, .set-rarity-panel, .set-structure-panel, .set-card-battle { padding: 14px; }
    .set-chart-legend em { width: 100%; margin-left: 0; }
    .set-rarity-head, .set-rarity-row { grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); }
    .set-rarity-side { font-size: 9px; }
    .set-rarity-code { min-width: 40px; }
  }

  /* ══ EMPTY ═══════════════════════════════════════════════ */
  .empty {
    padding: 52px 20px;
    text-align: center;
    color: var(--tx-mute);
    font-family: var(--font-mono);
    font-size: 12.5px;
  }

  .empty .big { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--tx-dim); margin-bottom: 6px; }

  .footer-note {
    max-width: 1420px;
    margin: 26px auto 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--tx-mute);
    line-height: 1.9;
  }

  /* ══ CARD DETAIL DRAWER ══════════════════════════════════ */
  .cd-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 100000;
    background: rgba(3, 6, 10, .80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0px, 2vw, 24px);
    padding-bottom: max(clamp(0px, 2vw, 24px), env(safe-area-inset-bottom));
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease;
  }

  .cd-backdrop.open { opacity: 1; pointer-events: auto; }

  .cd {
    position: relative;
    width: min(1080px, 100%);
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(22px) scale(.985);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }

  .cd-backdrop.open .cd { transform: none; }
  .cd::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* card art stays put while the data column scrolls */
  @media (min-width: 861px) {
    .cd-left { position: sticky; top: 0; }
  }

  .cd-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(12, 18, 26, .9);
    border: 1px solid var(--line-strong);
    color: var(--tx);
    font-size: 18px;
    cursor: pointer;
    transition: background .16s, transform .16s, color .16s;
  }

  .cd-close:hover { background: rgba(242, 31, 42, .18); color: #fff; transform: rotate(90deg); }

  .cd-body {
    display: grid;
    grid-template-columns: clamp(180px, 24%, 250px) minmax(0, 1fr);
    gap: clamp(16px, 2.2vw, 24px);
    padding: clamp(16px, 2.2vw, 22px);
    align-items: start;
  }

  .cd-left, .cd-right { min-width: 0; max-width: 100%; }

  .cd-art {
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--line);
  }

  .cd-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .cd-left .tk { font-family: var(--font-mono); font-size: 11.5px; color: var(--nen-gold); letter-spacing: .06em; margin-top: 12px; }
  .cd-left h2 { margin: 3px 0 9px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
  .cd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }

  .cd-price { font-family: var(--font-mono); font-size: clamp(24px, 3.2vw, 33px); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .cd-delta { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: 6px; }

  .cd-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--nen-gold), #f7d777);
    color: #14100a;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
  }

  .cd-cta:hover { box-shadow: var(--glow-gold); transform: translateY(-1px); color: #14100a; }

  /* secondary action — outlined so the store button stays the primary one */
  .cd-cta.tcg {
    margin-top: 9px;
    background: transparent;
    border: 1px solid rgba(138, 182, 255, .45);
    color: #8ab6ff;
  }

  .cd-cta.tcg:hover {
    background: rgba(138, 182, 255, .12);
    border-color: rgba(138, 182, 255, .75);
    color: #a9caff;
    box-shadow: none;
  }

  .cd-sec { margin-bottom: 18px; }
  .cd-sec:last-child { margin-bottom: 0; }

  /* keep the range switch clear of the close button */
  .cd-right > .cd-sec:first-child .cd-sec-h { padding-right: 44px; }

  .cd-sec-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--line);
  }

  .cd-sec-h h4 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tx-dim);
  }

  .cd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }

  .cd-stat { padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); min-width: 0; }
  .cd-stat .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-mute); line-height: 1.35; }
  .cd-stat .v { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; color: #fff; margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  /* per-period performance */
  .perf { display: flex; flex-direction: column; gap: 3px; }

  .perfrow {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 11px;
    padding: 5px 3px;
  }

  .perfrow .pk { font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-dim); }
  .perfrow .ptrack { height: 6px; border-radius: 3px; background: rgba(122, 152, 180, .1); position: relative; overflow: hidden; }
  .perfrow .ptrack i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 3px; transition: width .8s cubic-bezier(.22, 1, .36, 1); }
  .perfrow .ptrack i.g { left: 50%; background: linear-gradient(90deg, rgba(38, 227, 155, .4), var(--up)); }
  .perfrow .ptrack i.l { right: 50%; background: linear-gradient(270deg, rgba(255, 91, 107, .4), var(--down)); }
  .perfrow .ptrack::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(122, 152, 180, .3); }
  .perfrow .pv { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

  /* chart */
  .cd-chart {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* NOT hidden: the tooltip needs to sit above the plot area.
       The SVG itself is width-locked below, so nothing can escape sideways. */
    overflow: visible;
    border-radius: var(--r-sm);
    margin-top: 4px;
  }

  /* !important on purpose: some themes ship a global `svg { width: … }` rule
     that would otherwise blow this chart up to thousands of pixels wide. */
  .cd-chart > svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible;
  }

  .chart-hit { fill: transparent; cursor: crosshair; }

  .cd-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
    background: rgba(7, 10, 15, .97);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--tx);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 14px));
    transition: opacity .14s;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
  }

  /* flips under the point when the point sits near the top of the plot */
  .cd-tip.below { transform: translate(-50%, 14px); }

  .cd-tip.on { opacity: 1; }
  .cd-tip .d { color: var(--tx-mute); font-size: 10px; display: block; }
  .cd-tip .p { color: #fff; font-weight: 700; font-size: 13.5px; display: block; }

  .range-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); }

  .range-seg button {
    background: transparent;
    border: 0;
    color: var(--tx-mute);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s, color .16s;
  }

  .range-seg button.on { background: rgba(239, 196, 65, .16); color: var(--nen-gold); }

  /* ══ RESPONSIVE ══════════════════════════════════════════ */
  /* ── tablets / small laptops ── */
  @media (max-width: 1024px) {
    .kpi--hero { grid-column: span 6; }
    .kpi--sm { grid-column: span 3; }
    .kpi--wide { grid-column: span 12; }
  }

  @media (max-width: 860px) {
    .movers-split { grid-template-columns: 1fr; }
    .cmp-grid { grid-template-columns: 1fr; }
    .cd-body { grid-template-columns: 1fr; }
    .cd-art { max-width: 220px; margin: 0 auto; }
    .cd-left { text-align: center; }
    .cd-chips { justify-content: center; }
    .cd-cta { max-width: 320px; margin-left: auto; margin-right: auto; }
  }

  /* ── phones ── */
  @media (max-width: 640px) {
    .dc-page { padding: 16px 10px 56px; font-size: 15px; }

    .dc-header { gap: 12px; margin-bottom: 14px; }
    .dc-header img { width: 42px; height: 42px; }
    .live-dot { display: none; }

    .kpi--hero { grid-column: span 12; }
    .kpi--sm { grid-column: span 6; }
    .kpi--wide { grid-column: span 12; }
    .kpi { padding: 13px 14px; }

    .exchange-toolbar { padding: 10px; border-radius: var(--r-md); gap: 8px; }
    .exchange-toolbar .filters { gap: 8px; }
    .exchange-toolbar .filters label { width: 100%; margin-bottom: -4px; }
    .exchange-toolbar select,
    .exchange-toolbar input[type="number"],
    .exchange-toolbar input[type="text"],
    .exchange-toolbar .btn { min-height: 44px; font-size: 16px; }
    .exchange-toolbar input[type="text"] { flex: 1 1 100%; min-width: 0; }
    .tb-sep { display: none; }

    .ctile { width: 144px; }
    .cgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
    .rail-nav { display: none; }

    .view { padding: 14px 12px 18px; }
    .board-h, .tabs { padding-left: 12px; padding-right: 12px; }
    .tab { padding: 11px 11px; font-size: 13px; }

    .setstats { grid-template-columns: 1fr 1fr; }
    .set-pickers { gap: 10px; }
    .set-pick { flex: 1 1 42%; }
    .set-pick select { min-width: 0; width: 100%; }
    .vs { display: none; }

    .mv-summary { grid-template-columns: 1fr; }
    .mvrow { grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 9px; }

    .sec-filters { padding: 11px 12px; gap: 8px; }
    .sec-filters .ms { flex: 1 1 30%; }
    .sec-filters .ms-btn { width: 100%; justify-content: center; }
    .sec-filters input[data-f="min"],
    .sec-filters input[data-f="max"] { flex: 1 1 40%; width: auto !important; }
    .sec-filters input[data-f="q"] { flex: 1 1 100%; min-width: 0 !important; }
    .sec-filters input, .sec-filters .btn { font-size: 16px; min-height: 42px; }
    .sec-filters .fstate { margin-left: 0; flex: 1 1 100%; }
    .sec-filters .btn[data-f="reset"] { flex: 1 1 100%; justify-content: center; }
    .sec-filters .ms-pop { left: 0; right: auto; }
    #filters-board { margin: 12px 12px 0 !important; }

    .pagination { font-size: 11.5px; gap: 8px; }
    .pagination .info { flex: 1 1 100%; margin-right: 0; }

    /* drawer goes full-bleed sheet on phones */
    .cd-backdrop { padding: 0; align-items: flex-end; }
    .cd {
      width: 100%;
      max-height: 94vh;
      max-height: 94dvh;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .cd-body { padding: 18px 14px 26px; gap: 18px; }
    .cd-close { top: 10px; right: 10px; width: 40px; height: 40px; }
    .cd-sec-h { gap: 8px; }
    .cd-stats { grid-template-columns: 1fr 1fr; }
    .cd-stat { padding: 10px 12px; }
    .perfrow { grid-template-columns: 58px minmax(0, 1fr) 60px; gap: 9px; }
    .range-seg button { padding: 7px 11px; }
  }

  @media (max-width: 380px) {
    .ctile { width: 130px; }
    .cgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .cd-stats { grid-template-columns: 1fr; }
  }

  /* touch devices: no hover-only affordances, bigger hit targets */
  @media (hover: none) {
    .ctile:hover { transform: none; }
    .ctile:hover .art img { transform: none; }
    .ctile .art::after { display: none; }
    .mvrow:hover { transform: none; }
    .tape:hover .tape-track { animation-play-state: running; }
    .rail-nav { display: none; }
    .ctile, .mvrow, .tcrow, .pill, .tab { -webkit-tap-highlight-color: rgba(239, 196, 65, .18); }
  }

  /* landscape phones: the sheet would otherwise eat the whole screen */
  @media (max-height: 520px) and (orientation: landscape) {
    .cd-backdrop { align-items: center; padding: 8px; }
    .cd { max-height: 96vh; border-radius: var(--r-lg); }
    .cd-art { max-width: 150px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dc-page *, .dc-page *::before, .dc-page *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .tape-track { animation: none; }
  }

  /* ══════════════════════════════════════════════════════════════════
   ADD THIS TO: exchange-board.css
   Social Media Export Feature - Button & Modal Styles
   ═════════════════════════════════════════════════════════════════ */

/* ── EXPORT BUTTON ─────────────────────────────────────────────── */
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--nen-gold), #f7d777);
  color: #14100a;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  margin-left: auto;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.16s;
  white-space: nowrap;
  flex-shrink: 0;
}

.export-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(239, 196, 65, 0.35), 0 12px 34px rgba(239, 196, 65, 0.12);
}

.export-btn:active {
  transform: translateY(0);
}

.export-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.export-btn.loading {
  animation: pulse-btn 1.2s infinite;
}

@keyframes pulse-btn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ── EXPORT MENU MODAL ─────────────────────────────────────────── */
.export-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.export-menu-inner {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  min-width: min(320px, 100%);
  text-align: center;
  animation: slideUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.export-menu-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

/* ── EXPORT OPTIONS ────────────────────────────────────────────── */
.export-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 11px;
  background: linear-gradient(135deg, var(--nen-gold), #f7d777);
  color: #14100a;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.16s;
}

.export-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(239, 196, 65, 0.35), 0 12px 34px rgba(239, 196, 65, 0.12);
}

.export-option:active {
  transform: translateY(0);
}

.export-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.export-option.loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid rgba(20, 16, 10, 0.3);
  border-radius: 50%;
  border-top-color: #14100a;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── CLOSE BUTTON ──────────────────────────────────────────────── */
.export-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--tx);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.16s;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.export-close:hover {
  transform: rotate(90deg);
  color: var(--nen-gold);
  background: rgba(239, 196, 65, 0.1);
}

/* ── SUCCESS & ERROR TOASTS ────────────────────────────────────── */
.export-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000000;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  animation: slideInRight 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.export-toast.success {
  background: rgba(38, 227, 155, 0.12);
  border: 1px solid rgba(38, 227, 155, 0.3);
  color: #5fe3b4;
}

.export-toast.error {
  background: rgba(255, 91, 107, 0.12);
  border: 1px solid rgba(255, 91, 107, 0.3);
  color: #ff8a95;
}

.export-toast.info {
  background: rgba(239, 196, 65, 0.12);
  border: 1px solid rgba(239, 196, 65, 0.3);
  color: var(--nen-gold);
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .export-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  .export-menu-inner {
    min-width: min(280px, 90vw);
    padding: 20px 16px;
  }

  .export-menu-title {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .export-option {
    padding: 11px 14px;
    font-size: 12.5px;
    margin-bottom: 9px;
  }

  .export-toast {
    bottom: 12px;
    right: 12px;
    left: 12px;
    font-size: 13px;
  }
}

/* ── TOUCH DEVICES ─────────────────────────────────────────────── */
@media (hover: none) {
  .export-btn:hover {
    transform: none;
    box-shadow: none;
  }

  .export-option:hover {
    transform: none;
  }

  .export-btn, .export-option {
    -webkit-tap-highlight-color: rgba(239, 196, 65, 0.18);
  }
}

/* ── REDUCED MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .export-btn,
  .export-option,
  .export-close,
  .export-menu,
  .export-menu-inner,
  .export-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   APPEND TO: exchange-board.css
   Per-section snapshot picker

   Every value here is copied from a rule that already exists:
     · base       → .sec-filters input  +  .exchange-toolbar select
     · pinned     → .period-inline select
     · phone      → the .sec-filters block inside @media (max-width:640px)
   Nothing new is introduced.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────────
   .sec-filters styled input and .btn but never select, so the
   snapshot dropdown was rendering with default browser chrome.
   Native caret kept, matching .exchange-toolbar select. */
.sec-filters select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 30px 7px 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--tx);
  min-height: 36px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s, color .16s;
}

.sec-filters select:hover { border-color: var(--line-strong); }

.sec-filters select:focus {
  outline: none;
  border-color: rgba(239, 196, 65, .5);
  box-shadow: 0 0 0 3px rgba(239, 196, 65, .1);
}

/* some platforms ignore the control's colours for the dropdown list */
.sec-filters select option { background: var(--surface-2); color: var(--tx); }

/* ── Pinned to its own date ─────────────────────────────────────
   Same treatment as .period-inline select — the page's existing
   "this changes what you're comparing against" control. */
.sec-filters select.pinned {
  background: var(--surface-3);
  border-color: rgba(239, 196, 65, .28);
  color: var(--nen-gold);
}

.sec-filters select.pinned:hover {
  border-color: rgba(239, 196, 65, .55);
  background: rgba(239, 196, 65, .08);
}

/* ── Drawer note spacing ────────────────────────────────────────
   The chip itself is .chip.set, already used in .cd-chips above it. */
.cd-snapnote { margin-top: 10px; }

/* ── Phones ─────────────────────────────────────────────────────
   Matches the existing rule that bumps .sec-filters input/.btn to
   16px (iOS zoom guard) and gives the search field its own row. */
@media (max-width: 640px) {
  .sec-filters select { font-size: 16px; min-height: 42px; }
  .sec-filters select[data-f="snap"] { flex: 1 1 100%; min-width: 0; }
}

/* ── Reduced motion ─────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .sec-filters select { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TEXT SELECTION — gold instead of the browser's blue
   ═══════════════════════════════════════════════════════════════ */
.dc-page ::selection {
  background: rgba(239, 196, 65, .32);
  color: #fff;
}

.dc-page ::-moz-selection {
  background: rgba(239, 196, 65, .32);
  color: #fff;
}
/* ═══════════════════════════════════════════════════════════════
   DRAWER — VIEW TOGGLE

   Two ways to read the same card. 'Datos' is chart-led (the
   original); 'Carta' hands the space to the artwork and demotes the
   chart to a supporting role.

   Layout only — no second render path, so both views always show
   the same numbers.
   ═══════════════════════════════════════════════════════════════ */

.dc-page .cd-viewtog {
  position: absolute;
  top: 14px;
  right: 60px;                    /* clears the close button */
  z-index: 5;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(12, 18, 26, .92);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

/* The sliding pill. Its position is driven by data-view on the parent
   rather than measured in JS — two states, no layout reads. */
.dc-page .cd-viewtog .cd-tog-ink {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: rgba(239, 196, 65, .16);
  border: 1px solid rgba(239, 196, 65, .34);
  transition: transform .42s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
}

.dc-page .cd-viewtog[data-view="show"] .cd-tog-ink { transform: translateX(100%); }

.dc-page .cd-viewtog button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  color: var(--tx-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .32s ease;
}

.dc-page .cd-viewtog button[aria-pressed="true"] { color: var(--nen-gold); }
.dc-page .cd-viewtog button:hover { color: var(--tx); }

/* the chart header shares the top row — keep it clear of both controls */
.dc-page .cd-right > .cd-sec:first-child .cd-sec-h { padding-right: 188px; }

/* ── The ticker line goes; the title takes its colour ───────────
   "OP09-002 · Promo OP09-002 3" duplicated what the name already
   says, so the row was dead weight. The gold moves to the title,
   which is what people actually read. */
.dc-page .cd-left .tk { display: none; }

.dc-page .cd-left h2 {
  color: var(--nen-gold);
  margin-top: 10px;
}

/* ── THE CREST — a rendered numeral on the corner mark ───────────
   Sits over .cd::before, the ambient diamond at the panel's corner.
   Positioned by its own centre so it can be aimed at the diamond
   directly, rather than by matching the mark's box — two clamp()
   values that must stay in sync would eventually drift apart.

   On .cd, not .cd-body, so the paging ghost never clones it.

   These are transparent PNGs of extruded metal, rendered offline —
   the bevel, the side wall and the specular highlights are baked into
   the image. CSS supplies only the cast shadow and the ambient glow.
   drop-shadow() reads the alpha channel, so both trace the numeral's
   real silhouette rather than a box.

   Ranks 1-3 are gold, silver and bronze; 4-10 are glossy white.
   Above 10 there is no asset, so the crest doesn't render at all. */

/* Showcase only — in Datos view the chart and stats fill that corner,
   and a numeral behind them is just noise. */
.dc-page .cd-crest { display: none; }

/* Carta view AND a rank we have an image for. The rank list is the
   guard: a card outside the top 10 matches nothing here and stays
   hidden, instead of showing an empty box where the image would be. */
.dc-page .cd:has(.cd-body.view-show) .cd-crest:is(.m1, .m2, .m3, .r4, .r5, .r6, .r7, .r8, .r9, .r10) {
  display: block;
}

/* The mark steps back when the numeral is over it, easing rather than
   snapping — matches the .55s the panel takes to resize. Conditioned
   on the same rank list, or the diamond would dim on cards that have
   nothing sitting over it. */
.dc-page .cd:has(.cd-body.view-show):has(.cd-crest:is(.m1, .m2, .m3, .r4, .r5, .r6, .r7, .r8, .r9, .r10))::before {
  opacity: .045;
}

.dc-page .cd-crest {
  position: absolute;
  right: 187px;
  bottom: 128px;
  transform: translate(50%, 50%);
  z-index: 1;
  pointer-events: none;
  width: clamp(134px, 16.8vw, 235px);
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .34));
  animation: crestBreath 5.5s ease-in-out infinite;
}

/* Single digits fill their canvas; the 10's numeral was pushed back to
   fit two glyphs in the same square, so it renders smaller inside the
   same box. Trimming the single digits brings them down to match. */
.dc-page .cd-crest:not(.r10) { width: clamp(100px, 12.6vw, 176px); }

/* 1, 4, 5 and 7 are narrower glyphs, so at a shared box width they read
   smaller than the round digits even though their height matches. About
   8% up evens out the apparent size; the 2 wants a little more still. */
.dc-page .cd-crest:is(.m1, .r4, .r5, .r7) { width: clamp(108px, 13.6vw, 190px); }
.dc-page .cd-crest.m2:not(.r10) { width: clamp(114px, 14.3vw, 200px); }

/* The image lives here, not on .cd-crest, because the parent's transform
   is doing the centring — scaling it too would move the numeral instead
   of resizing it. Scale peaks at 1: the crest never grows past its
   declared box, it only settles below it and returns. */
.dc-page .cd-crest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--crest) center / contain no-repeat;
  transform-origin: 50% 50%;
  animation: crestSwell 5.5s ease-in-out infinite;
}

.dc-page .cd-crest.m1 { --crest: url("/cdn/shop/files/crest-1.png?v=1787026234"); animation-name: crestGold; }
.dc-page .cd-crest.m2 { --crest: url("/cdn/shop/files/crest-2.png?v=1787026234"); animation-name: crestSilver; }
.dc-page .cd-crest.m3 { --crest: url("/cdn/shop/files/crest-3.png?v=1787026235"); animation-name: crestCopper; }

/* ── Ranks 4-10, glossy white ──────────────────────────────────── */
.dc-page .cd-crest.r4  { --crest: url("/cdn/shop/files/crest-4-white.png?v=1787026234"); }
.dc-page .cd-crest.r5  { --crest: url("/cdn/shop/files/crest-5-white.png?v=1787026234"); }
.dc-page .cd-crest.r6  { --crest: url("/cdn/shop/files/crest-6-white.png?v=1787026234"); }
.dc-page .cd-crest.r7  { --crest: url("/cdn/shop/files/crest-7-white.png?v=1787026234"); }
.dc-page .cd-crest.r8  { --crest: url("/cdn/shop/files/crest-8-white.png?v=1787026234"); }
.dc-page .cd-crest.r9  { --crest: url("/cdn/shop/files/crest-9-white.png?v=1787026234"); }
.dc-page .cd-crest.r10 { --crest: url("/cdn/shop/files/crest-10-white.png?v=1787026234"); }

/* The white renders clip near the top of the range — the lit face is
   already at maximum, so there's nowhere for a highlight to travel and
   the numeral reads as paper. Pulling brightness down and contrast up
   restores the tonal separation without a re-export.

   On ::before, not the element: the parent's filter carries the cast
   shadow and is driven by the glow keyframes, so anything declared
   there is overwritten the moment the animation starts. ::before only
   animates transform, so its filter is free. */
.dc-page .cd-crest:is(.r4, .r5, .r6, .r7, .r8, .r9, .r10)::before {
  filter: brightness(.88) contrast(1.12);
}

/* ── The glow ───────────────────────────────────────────────────
   Only the halo animates — the cast shadow stays fixed, or the numeral
   would appear to lift off the panel and settle back. Each medal glows
   in its own metal; ranks 4-10 use the neutral crestBreath. */
@keyframes crestBreath {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(214,226,238,.16)); }
  50%      { filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)) drop-shadow(0 0 34px rgba(214,226,238,.46)); }
}

@keyframes crestGold {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(0,0,0,.36)) drop-shadow(0 0 16px rgba(239,167,60,.26)); }
  50%      { filter: drop-shadow(0 10px 22px rgba(0,0,0,.36)) drop-shadow(0 0 38px rgba(239,167,60,.62)); }
}

@keyframes crestSilver {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)) drop-shadow(0 0 15px rgba(246,243,236,.22)); }
  50%      { filter: drop-shadow(0 10px 22px rgba(0,0,0,.34)) drop-shadow(0 0 36px rgba(246,243,236,.54)); }
}

@keyframes crestCopper {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(0,0,0,.36)) drop-shadow(0 0 15px rgba(200,127,58,.24)); }
  50%      { filter: drop-shadow(0 10px 22px rgba(0,0,0,.36)) drop-shadow(0 0 36px rgba(200,127,58,.58)); }
}

/* Peaks at 1, troughs at .94 — so the crest's largest state is exactly the
   size it was, and the motion reads as breathing rather than pulsing
   outward. Same 5.5s and easing as the glow, so brightest lands with
   largest instead of drifting against it. */
@keyframes crestSwell {
  0%, 100% { transform: scale(.94); }
  50%      { transform: scale(1); }
}

/* ── THE PANEL ITSELF ──────────────────────────────────────────
   .cd is width:min(1080px,100%) in the main stylesheet, and the grid
   split only divides that fixed width between the two columns — it
   can never change the total. This is the rule that actually narrows
   the window.

   :has() is required: view-show lives on .cd-body, the CHILD. If your
   browser doesn't support it, have applyCdView() toggle the class on
   #cdPanel too and swap this for `.dc-page .cd.view-show`.

   Both widths are min() against 100%, so a phone still gets a
   full-bleed sheet. */
.dc-page .cd { transition: width .55s cubic-bezier(.19, 1, .22, 1); }
.dc-page .cd:has(.cd-body.view-show) { width: min(940px, 100%); }

/* ── The switch itself ─────────────────────────────────────────
   grid-template-columns animates, so the two panes glide into their
   new proportions instead of jumping. */
.dc-page .cd-body {
  transition: grid-template-columns .55s cubic-bezier(.19, 1, .22, 1);
}

.dc-page .cd-body.view-show {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (min-width: 861px) {

  /* The column becomes a positioning context so the closing row —
     [ NENSONS ] ◆ [ TCGplayer ] — can be pinned to its bottom. The
     padding reserves that band; if the buttons ever change height,
     this number has to grow with them. */
  .dc-page .cd-body.view-show .cd-left {
    position: relative;
    align-items: center;
    text-align: center;
    padding-bottom: 62px;
  }

  .dc-page .cd-body.view-show .cd-rank,
  .dc-page .cd-body.view-show .cd-snapnote { justify-content: center; }

  /* The delta reads "▬ 0.0% · $0.00 vs previo" on a card that hasn't
     moved — nothing, taking a full row. The chips say something real:
     set, colour, rarity, price source. */
  .dc-page .cd-body.view-show .cd-chips {
    display: flex;
    justify-content: center;
    margin: 7px 0 14px;
  }

  .dc-page .cd-body.view-show .cd-delta { display: none; }

  /* ── Rank row above the card, at full size ─────────────────── */
  .dc-page .cd-body.view-show .cd-rank { margin-bottom: 11px; gap: 11px; }

  .dc-page .cd-body.view-show .cd-rank .rk-badge.lg {
    min-width: 46px;
    height: 46px;
    font-size: 23px;
    border-radius: 13px;
  }

  .dc-page .cd-body.view-show .cd-rank-lbl { font-size: 12.5px; letter-spacing: .1em; }

  /* ── The artwork claims the room ───────────────────────────── */
  .dc-page .cd-body.view-show .cd-art { max-width: 430px; }

  /* ── Info below the card ───────────────────────────────────── */
  .dc-page .cd-body.view-show .cd-left h2 {
    font-size: clamp(14px, 1.6vw, 17px);
    margin: 10px 0 7px;
    line-height: 1.15;
  }

  /* the one thing that gets louder, not quieter */
  .dc-page .cd-body.view-show .cd-price {
    font-size: clamp(25px, 3.4vw, 36px);
    letter-spacing: -.035em;
  }

  .dc-page .cd-body.view-show .cd-snapnote { margin-top: 8px; }

  /* ── The closing row: [ NENSONS ]  ◆  [ TCGplayer ] ─────────────
     The hallmark is .cd-left::after, a pseudo-element, so the buttons
     can't be its flex siblings. The hallmark is centred absolutely in
     the reserved band and the two CTAs are pinned to either side. */
  .dc-page .cd-body.view-show .cd-left::after {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    margin: 0;
  }

  /* the hairline would cut across the button row — redundant here */
  .dc-page .cd-body.view-show .cd-left::before { display: none; }

  .dc-page .cd-body.view-show .cd-cta {
    position: absolute;
    bottom: 14px;
    width: calc(50% - 40px);
    max-width: 172px;
    margin: 0;
    padding: 8px 10px;
    font-size: 11.5px;
    border-radius: 999px;
  }

  .dc-page .cd-body.view-show .cd-cta:not(.tcg) { left: 0; }
  .dc-page .cd-body.view-show .cd-cta.tcg { right: 0; }

  /* the data column steps back further */
  .dc-page .cd-body.view-show .cd-sec { margin-bottom: 12px; }
  .dc-page .cd-body.view-show .cd-sec-h { padding-bottom: 5px; margin-bottom: 7px; }
  .dc-page .cd-body.view-show .cd-sec-h h4 { font-size: 9px; letter-spacing: .13em; }
  .dc-page .cd-body.view-show .cd-stats { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 5px; }
  .dc-page .cd-body.view-show .cd-stat { padding: 5px 7px; }
  .dc-page .cd-body.view-show .cd-stat .k { font-size: 8px; }
  .dc-page .cd-body.view-show .cd-stat .v { font-size: 11.5px; }
  .dc-page .cd-body.view-show .perfrow { grid-template-columns: 54px minmax(0, 1fr) 52px; gap: 7px; padding: 3px 2px; }
  .dc-page .cd-body.view-show .perfrow .pk { font-size: 10px; }
  .dc-page .cd-body.view-show .perfrow .pv { font-size: 10.5px; }
}

@media (max-width: 860px) {
  /* single column on a sheet, so the art just gets more of it */
  .dc-page .cd-body.view-show .cd-art { max-width: 320px; }
  .dc-page .cd-body.view-show .cd-price { font-size: clamp(28px, 8vw, 38px); }
  .dc-page .cd-viewtog { top: 12px; right: 58px; }
  .dc-page .cd-viewtog button { padding: 6px 11px; font-size: 10.5px; }
}

@media (max-width: 640px) {
  .dc-page .cd-right > .cd-sec:first-child .cd-sec-h { padding-right: 0; }
  .dc-page .cd-viewtog { right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-page .cd-viewtog .cd-tog-ink,
  .dc-page .cd-body { transition: none !important; }
  .dc-page .cd-crest,
  .dc-page .cd-crest::before { animation: none !important; }
}

/* ── A second mark, centred behind the chart ────────────────────
   Showcase only. Larger and fainter than the corner stamp, so it
   reads as a watermark under the data rather than competing with it.
   On .cd-right's ::before — the panel's own ::before and ::after are
   both already in use. */
.dc-page .cd-right { position: relative; }

.dc-page .cd:has(.cd-body.view-show) .cd-right::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: clamp(230px, 30vw, 400px);
  height: clamp(230px, 30vw, 400px);
  z-index: 0;
  pointer-events: none;
  background: var(--nen-logo) center / contain no-repeat;
  filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(255, 255, 255, .4));
  opacity: .035;
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
}

/* the chart and stats sit above it */
.dc-page .cd-body.view-show .cd-right > .cd-sec { position: relative; z-index: 1; }
</style>