/* mop-card.css — GENERATED by scripts/build-mop-card.js from mop-pages.css. Do not edit.
 * The old card (R.cardFrame) for the new shell: scoped to .cardbox, px→cqw so it
 * scales with its box, 2.5:3.5, contain-fit art on a thin matte, tier treatments. */
.cardbox{container-type:inline-size;display:block;width:100%;
  --cosmos:#080D1A;--gold:#C9A84C;--gold-hi:#F1DDA0;--teal:#00B8A9;--silver:#A8B5BD;--ink:#F5F1E6;
  --mgu-orange:#E8782C;--mgu-teal:#1FA38B;--mgu-green:#7CDB3A;--t1:#1FA38B;--t2:#E8782C;--t3:#C9A84C;--t4:#F1DDA0;
  --spectrum:conic-gradient(from 0deg,#F1DDA0,#1FA38B,#E8782C,#7CDB3A,#F1DDA0)}
.cardbox .card{width:100cqw;height:147.692cqw;border-radius:4.615cqw;position:relative;overflow:hidden;--tier:var(--t1);
  background:radial-gradient(circle at 30% 20%,rgba(31,163,139,.10),transparent 40%),radial-gradient(circle at 80% 85%,rgba(232,120,44,.08),transparent 40%),#07100E;
  box-shadow:0 7.692cqw 15.385cqw rgba(0,0,0,.7),0 0 0 0.385cqw rgba(255,255,255,.08);display:flex;flex-direction:column;padding:4.615cqw 5.385cqw 3.846cqw}
.cardbox .card .frame{position:absolute;inset:2.308cqw;border-radius:3.462cqw;border:0.577cqw solid var(--tier);pointer-events:none;opacity:.9;z-index:1}
.cardbox .card>*:not(.frame){position:relative;z-index:2}
.cardbox .card .frame::after{content:"";position:absolute;inset:1.154cqw;border-radius:2.692cqw;border:0.192cqw solid rgba(255,255,255,.12)}
.cardbox .card .top{display:flex;justify-content:space-between;align-items:center;z-index:2;height:10cqw;flex:none}
.cardbox .card .helix{width:9.231cqw;height:9.231cqw}
.cardbox .card .pills{display:flex;gap:1.538cqw}
.cardbox .card .pill{font-family:'DM Mono',monospace;font-size:2.5cqw;letter-spacing:.2em;color:var(--cosmos);background:var(--tier);padding:1.154cqw 2.308cqw;border-radius:1.154cqw;font-weight:500}
.cardbox .card .pill.v{background:var(--teal)}
.cardbox .card .pill.ap{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.cardbox .card .art{margin-top:2.308cqw;height:89.231cqw;border-radius:2.692cqw;overflow:hidden;position:relative;flex:none;box-shadow:inset 0 0 0 0.385cqw rgba(255,255,255,.1),0 3.846cqw 11.538cqw rgba(0,0,0,.6)}
.cardbox .card .art img{width:100%;height:100%;object-fit:contain;display:block}
.cardbox .card .art .stamp{position:absolute;right:2.308cqw;bottom:2.308cqw;font-family:'DM Mono',monospace;font-size:2.308cqw;letter-spacing:.2em;color:var(--gold-hi);background:rgba(8,13,26,.75);border:0.385cqw solid rgba(201,168,76,.5);padding:0.769cqw 1.923cqw;border-radius:1.154cqw}
.cardbox .card .band{margin-top:1.923cqw;height:5.385cqw;flex:none;display:flex;align-items:center;justify-content:center;border-radius:1.154cqw;font-family:'DM Mono',monospace;font-size:2.5cqw;letter-spacing:.16em;color:var(--cosmos);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2.308cqw}
.cardbox .card .band.v{background:var(--teal)}
.cardbox .card .band.ap{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.cardbox .card .band.none{visibility:hidden}
.cardbox .card .name{margin-top:1.923cqw;z-index:2;min-width:0}
.cardbox .card .name .t{font-family:'Permanent Marker',cursive;font-size:5.769cqw;color:var(--mgu-green);line-height:1.1;text-shadow:0 0.769cqw 0 rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardbox .card .name .s{font-family:'DM Mono',monospace;font-size:2.5cqw;letter-spacing:.16em;color:var(--silver);margin-top:1.154cqw;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardbox .card .meta{margin-top:auto;display:grid;grid-template-columns:1.1fr .75fr .9fr;gap:1.538cqw;z-index:2}
.cardbox .card .meta div{font-family:'DM Mono',monospace;font-size:2.231cqw;letter-spacing:.14em;color:var(--silver);text-transform:uppercase;min-width:0}
.cardbox .card .meta b{display:block;font-family:'Exo 2',sans-serif;font-weight:700;font-size:3.462cqw;color:var(--ink);letter-spacing:0;margin-top:0.385cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardbox .card .meta b.serial{font-family:'DM Mono',monospace;color:var(--tier)}
.cardbox .card .foot{margin-top:2.308cqw;border-top:0.385cqw solid rgba(255,255,255,.1);padding-top:1.538cqw;display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:2.154cqw;letter-spacing:.18em;color:var(--silver);white-space:nowrap}
.cardbox .card .foot b{color:var(--gold);font-weight:500}
.cardbox .card.t2{--tier:var(--t2)}
.cardbox .card.t2 .frame{box-shadow:0 0 5.385cqw rgba(232,120,44,.25)}
.cardbox .card.t3{--tier:var(--t3)}
.cardbox .card.t3 .frame{border-width:0.962cqw;box-shadow:0 0 6.923cqw rgba(201,168,76,.35),inset 0 0 0 0.385cqw rgba(241,221,160,.4)}
.cardbox .card.t3 .name .t{color:var(--gold-hi)}
.cardbox .card.t4{--tier:var(--t4)}
.cardbox .card.t4 .frame{border:1.154cqw solid transparent;background:linear-gradient(#07100E,#07100E) padding-box,conic-gradient(from 0deg,#F1DDA0,#1FA38B,#E8782C,#7CDB3A,#F1DDA0) border-box;opacity:1;animation:mgucard-hue 8s linear infinite}
.cardbox .card.t4 .name .t{color:#fff;text-shadow:0 0 4.615cqw rgba(241,221,160,.8)}
.cardbox .card.t4::after,.cardbox .card.ap::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 58%);mix-blend-mode:screen;animation:mgucard-sheen 3.4s ease-in-out infinite;pointer-events:none}
.cardbox .card.v .frame{border-style:double;border-width:1.154cqw}
.cardbox .card.v .meta b.serial{color:var(--teal)}
.cardbox .card.ap .frame{border:0.962cqw solid var(--gold);box-shadow:0 0 6.923cqw rgba(201,168,76,.35),inset 0 0 0 0.385cqw rgba(241,221,160,.4)}
.cardbox .card.ap .name .t{color:var(--gold-hi)}
.cardbox .card.ap .meta b.serial{color:var(--gold-hi)}
.cardbox .back{width:100cqw;height:147.692cqw;border-radius:4.615cqw;background:#000;display:grid;place-items:center;box-shadow:0 7.692cqw 15.385cqw rgba(0,0,0,.7),0 0 0 0.385cqw rgba(201,168,76,.25)}
.cardbox .back svg{width:73.077cqw;height:73.077cqw}
.cardbox .back circle{fill:none;stroke:#C9A84C;stroke-width:.7;opacity:.95}
.cardbox .back .outer{stroke-width:1.1;opacity:1}
.cardbox .back .tick{stroke:#C9A84C;stroke-width:.9}
.cardbox .card .art{background:#07100E}
.cardbox .card .art img{width:100%;height:100%;object-fit:contain;display:block}
.cardbox .back{width:100cqw;height:147.692cqw;border-radius:4.615cqw;background:#000;display:grid;place-items:center;
  box-shadow:0 7.692cqw 15.385cqw rgba(0,0,0,.7),0 0 0 0.385cqw rgba(201,168,76,.25);color:#C9A84C}
.cardbox .back svg{width:73.077cqw;height:73.077cqw}
@keyframes mgucard-hue{to{filter:hue-rotate(360deg)}}
@keyframes mgucard-sheen{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

/* ── SPEC §12.7: one 2.5:3.5 frame; the card scales with its box ── */
.cardbox .card,.cardbox .back{width:100%;height:auto;aspect-ratio:5/7;box-sizing:border-box;margin:0}
.cardbox .card *,.cardbox .back *{box-sizing:border-box;margin:0;padding:0}
.cardbox .card{padding:4.615cqw 5.385cqw 3.846cqw;color:var(--ink);font-family:'Exo 2',Arial,sans-serif;text-decoration:none;line-height:1.35}
.cardbox .card .top,.cardbox .card .band,.cardbox .card .name,.cardbox .card .meta,.cardbox .card .foot{flex:none}
/* The art window takes what the fixed rows leave; the art is contain-fit on a
   thin matte, never cropped or stretched. Cards are sized so the <img> is never
   drawn past its native pixels (grid 360px, detail 635px; card boxes top out at
   300px CSS, so a 2x screen needs ≤600). */
.cardbox .card .art{flex:1 1 auto;height:auto;min-height:0;margin-top:2.308cqw;padding:1.9cqw;background:#07100E;display:flex;align-items:center;justify-content:center}
/* The matte HUGS the artwork: the <img> keeps its own proportions (auto size,
   shrink-only max limits — so it is never cropped, stretched, or drawn past its
   native pixels) and carries the thin matte as its border: black for Type, the
   tier colour for Sport and Chimera, the spectrum for Myth. The art window's
   own ground stays the card's dark, as in the old design. */
.cardbox .card .art img{width:auto;height:auto;max-width:calc(100% - 2.7cqw);max-height:calc(100% - 2.7cqw);object-fit:contain;display:block;
  box-sizing:content-box;border:1.35cqw solid #000;background:#000}
.cardbox .card.t2 .art img{border-color:var(--t2);background:var(--t2)}
.cardbox .card.t3 .art img{border-color:var(--t3);background:var(--t3)}
.cardbox .card.t4 .art img{border-color:transparent;background:var(--spectrum) border-box}
.cardbox .back svg{width:73%;height:auto}
.cardbox a.card:hover{box-shadow:0 7.7cqw 15.4cqw rgba(0,0,0,.7),0 0 0 .77cqw var(--gold)}

/* ── TIER TREATMENTS (owner, 2026-09-11) ──
   Type: a flat frame. Sport: a subtle gold edge. Chimera: a full gold frame.
   Myth: the spectrum frame. */
.cardbox .card.t1 .frame{border:max(1px,.462cqw) solid var(--t1);box-shadow:none;opacity:.85}
.cardbox .card.t2 .frame{border:max(1px,.577cqw) solid rgba(201,168,76,.8);box-shadow:0 0 3.5cqw rgba(201,168,76,.3),inset 0 0 0 .2cqw rgba(241,221,160,.25);opacity:1}
.cardbox .card.t3 .frame{border:max(2px,1.23cqw) solid var(--gold);box-shadow:0 0 6.9cqw rgba(201,168,76,.45),inset 0 0 0 .385cqw rgba(241,221,160,.55);opacity:1}
.cardbox .card.t4 .frame{border:max(2px,1.308cqw) solid transparent;background:linear-gradient(#07100E,#07100E) padding-box,var(--spectrum) border-box;opacity:1}
@media (prefers-reduced-motion:reduce){.cardbox .card .frame,.cardbox .card::after{animation:none!important}}

/* A THUMBNAIL is the same card; below ~110px the words are unreadable noise, so
   they drop out and the frame, matte and art stay (the layout does not move). */
@container (max-width:110px){.cardbox .card .top,.cardbox .card .band,.cardbox .card .name,.cardbox .card .meta,.cardbox .card .foot,.cardbox .card .stamp{visibility:hidden}}