/* ==========================================================================
   BotCodes — card component · FRAME v10 (CARD_FRAME_V10.md)
   ==========================================================================
   MTG discipline: one constant anatomy — rim, header band, square art
   window, nameplate, stat tray, serial footer. The tier expresses itself as
   the MATERIAL inside the frame, never as a different layout. This kills
   two shipped bugs by construction: tier-tag/PWR corner collisions on
   minis, and long forged-name overflow.

   ONE stylesheet for both the reveal and the binder (.mini scales it).

   FRAME KNOBS — single source, same contract as the recolor knobs.
   A rim-weight change is a one-constant change here.
   ========================================================================== */
:root {
  --rim-padding: 9px;       /* RIM_PADDING  (approved) */
  --rim-color: #0b0b0b;     /* RIM_COLOR */
  --art-scale: 78%;         /* ART_SCALE */
  --name-min-h: 66px;       /* NAME_MIN_H */
  /* v2.1 attunement-visibility knobs */
  --window-field: #14161a;         /* dark neutral stage behind attuned parts */
  --window-field-strength: 32%;    /* WINDOW_FIELD_STRENGTH: element share of
                                      the radial glow at its centre */
  --aura-radius: 22px;             /* AURA_RADIUS: outer drop-shadow blur */
  --aura-opacity: 0.5;             /* AURA_OPACITY: aura colour alpha */
}

/* ---- rim: the one constant silhouette ---------------------------------- */
.cardrim {
  background: var(--rim-color); padding: var(--rim-padding);
  border-radius: 20px; box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.card {
  border-radius: 12px; overflow: hidden; position: relative; border: 0;
  --att: var(--att-unattuned); --attglow: transparent;
}

/* ---- header band: static row, nothing absolute, nothing rotated -------- */
.chdr { display: flex; align-items: center; justify-content: space-between;
        padding: 10px 12px 0; min-height: 40px; position: relative; z-index: 3; }
.chdr-r { display: flex; align-items: center; gap: 8px; }
.tiertag { font: 700 10px var(--font-mono); letter-spacing: 2px;
           text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.pwrbadge { text-align: center; background: var(--ink); color: #fff;
            border-radius: 10px; padding: 4px 9px; }
.pwrbadge b { display: block; font: 900 17px var(--font-display); line-height: 1; }
.pwrbadge span { font: 700 7px var(--font-mono); letter-spacing: 1px; }
.c-legendary .pwrbadge { background: var(--foil); color: var(--ink); }
.c-epic .pwrbadge { background: #12161c; }
/* Attunement dot. Unattuned renders NO dot (markup omits it). */
.attdot { width: 13px; height: 13px; border-radius: 99px;
          background: var(--att); box-shadow: 0 0 10px var(--attglow); }

/* ---- art window: square, inset frame line ------------------------------ */
.card .art {
  position: relative; aspect-ratio: 1 / 1; margin: 8px 12px 4px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);     /* light stocks: dark line */
}
.c-epic .art, .c-legendary .art {
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); /* dark stocks: light line */
}
.card .art canvas, .card .art img {
  width: var(--art-scale); display: block; position: relative; z-index: 2;
}

/* ---- v2.1 ELEMENT WINDOW + AURA (attuned cards only) -------------------
   The art window becomes the ELEMENT'S stage: a dark neutral field with a
   radial glow in the element colour behind the part. Element legibility no
   longer depends on the stock — volt reads on kraft, sonic reads on steel.
   Unattuned keeps the plain stock inset above: bare metal stays a statement. */
.card:not(.unattuned) .art {
  background:
    radial-gradient(ellipse at 50% 55%,
      color-mix(in srgb, var(--att) var(--window-field-strength), var(--window-field)) 0%,
      var(--window-field) 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);  /* dark field: light line */
}
/* The v9-style soft aura, reinstated: the part carries its own halo in the
   element colour, layered over the window glow. Uniform across tiers —
   element is orthogonal to tier. */
.card:not(.unattuned) .art canvas, .card:not(.unattuned) .art img {
  filter:
    drop-shadow(0 0 var(--aura-radius)
      color-mix(in srgb, var(--att) calc(var(--aura-opacity) * 100%), transparent))
    drop-shadow(0 0 calc(var(--aura-radius) / 2.75)
      color-mix(in srgb, var(--att) calc(var(--aura-opacity) * 100%), transparent));
}
/* Radial wash behind the art (soft, additive with the field above).
   Transparent when unattuned. */
.card .art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .55;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 55%, var(--attglow) 0%, transparent 60%);
}

/* ---- nameplate: long forged names WRAP, never clip --------------------- */
.namebox { min-height: var(--name-min-h); padding: 8px 16px 14px;
           position: relative; z-index: 2; }
.pname { font: 900 17px/1.08 var(--font-display); text-transform: uppercase;
         word-break: break-word; overflow-wrap: anywhere; }
.pname.setname { font-size: 16px; }
.oldname { font: 700 11px var(--font-mono); letter-spacing: 1px; opacity: .7; margin-top: 3px; }
.psub { font: 700 10px var(--font-mono); letter-spacing: 2px; margin-top: 4px; text-transform: uppercase; }
.flavor { padding: 0 16px 12px; position: relative; z-index: 2;
          font: italic 500 12px/1.5 var(--font-body); opacity: .78; }
.origin {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  font: 700 9px var(--font-mono); letter-spacing: 2px; text-transform: uppercase;
  border: 2px solid currentColor; border-radius: 6px; padding: 4px 9px;
  margin: 0 16px 12px;
}
.origin i { font-style: normal; font: 900 9px var(--font-display); }
.stats { display: flex; gap: 8px; padding: 0 16px 16px; position: relative; z-index: 2; }
.st { flex: 1; text-align: center; border-radius: 8px; padding: 7px 4px; }
.st b { display: block; font: 900 16px var(--font-display); }
.st span { font: 700 8px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.serial { margin: 0 16px 14px; padding: 8px; border-radius: 8px; text-align: center;
          position: relative; z-index: 2; }
.serial .bars { height: 18px; }
.serial small { font: 700 10px var(--font-mono); letter-spacing: 3px; }

/* ---------- COMMON — white card stock ---------- */
.c-common { background: #fdfdfa; color: var(--ink); }
.c-common .tiertag { background: #e8e6de; color: #6e6a5e; border: 1px solid #cfccc2; }
.c-common .psub { color: var(--grey); }
.c-common .st { background: #f0efe9; border: 1px solid #d8d5cb; }
.c-common .serial { border: 2px dashed #b9b5a8; }
.c-common .bars { background: repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 11px,var(--ink) 11px 14px,transparent 14px 17px); }
.c-common .serial small { color: var(--grey); }

/* ---------- UNCOMMON — cardboard / kraft, corrugated ---------- */
.c-uncommon { background: linear-gradient(160deg,#cdb98f 0%,#c1ab7e 40%,#d3c09a 100%);
  color: #3d3424; }
.c-uncommon::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,rgba(110,92,60,.08) 0 2px,transparent 2px 6px); }
.c-uncommon .tiertag { background: #3d3424; color: #d3c09a; }
.c-uncommon .pname { color: #3d3424; }
.c-uncommon .psub { color: #7a684a; }
.c-uncommon .st { background: rgba(255,250,238,.35); border: 2px solid #6e5c3c; }
.c-uncommon .st b, .c-uncommon .st span { color: #3d3424; }
.c-uncommon .serial { border: 2px dashed #6e5c3c; }
.c-uncommon .bars { background: repeating-linear-gradient(90deg,#3d3424 0 2px,transparent 2px 5px,#3d3424 5px 6px,transparent 6px 11px,#3d3424 11px 14px,transparent 14px 17px); }
.c-uncommon .serial small { color: #7a684a; }

/* ---------- RARE — brushed steel plate, 4 rivets ---------- */
.c-rare { background: linear-gradient(160deg,#9aa2ac 0%,#7d8590 45%,#a8b0ba 100%);
  color: #1a2028; }
.c-rare::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 3px); }
.c-rare .rivet { position: absolute; width: 10px; height: 10px; border-radius: 99px;
  background: radial-gradient(circle at 35% 30%,#e7ebef,#5c646e 70%); z-index: 3; }
.c-rare .r1{top:8px;left:8px} .c-rare .r2{top:8px;right:8px}
.c-rare .r3{bottom:8px;left:8px} .c-rare .r4{bottom:8px;right:8px}
.c-rare .tiertag { background: #2b333d; color: #cfd6de; }
.c-rare .psub { color: #3f4b58; }
.c-rare .st { background: rgba(255,255,255,.35); border: 2px solid #3a424c; }
.c-rare .serial { border: 2px solid #3a424c; background: rgba(255,255,255,.25); }
.c-rare .bars { background: repeating-linear-gradient(90deg,#1a2028 0 2px,transparent 2px 5px,#1a2028 5px 6px,transparent 6px 11px,#1a2028 11px 14px,transparent 14px 17px); }
.c-rare .serial small { color: #3f4b58; }

/* ---------- EPIC — chrome, animated mirror sheen ---------- */
.c-epic { color: #12161c;
  background: linear-gradient(120deg,#e8ecf1 0%,#aab2bd 20%,#f5f8fb 40%,#8b939f 60%,#e2e7ee 80%,#b3bbc6 100%);
  background-size: 220% 100%; animation: chrome 4s linear infinite; }
@keyframes chrome { 0%{background-position:0 0} 100%{background-position:220% 0} }
.c-epic .tiertag { background: #12161c; color: #e8ecf1; }
.c-epic .psub { color: #4a5560; }
.c-epic .st { background: rgba(255,255,255,.55); border: 2px solid #12161c; }
.c-epic .serial { border: 2px solid #12161c; background: rgba(255,255,255,.4); }
.c-epic .bars { background: repeating-linear-gradient(90deg,#12161c 0 2px,transparent 2px 5px,#12161c 5px 6px,transparent 6px 11px,#12161c 11px 14px,transparent 14px 17px); }
.c-epic .serial small { color: #4a5560; }

/* ---------- LEGENDARY — black stock, animated gold foil ---------- */
/* v10: NO gold outer border — legendary identity is the stock, the foil
   header and the gold interior accents, composed inside the same rim as
   every other card ("composed, not demoted" — approved verdict). */
.c-legendary { background: #101010; color: #fff; position: relative; }
.c-legendary .foilhead { padding: 9px 14px; font: 900 12px var(--font-display);
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(110deg,#f6f2e8,var(--foil) 25%,#fff 45%,var(--foil) 65%,#f6f2e8);
  background-size: 220% 100%; animation: sheen 3.2s linear infinite; }
@keyframes sheen { 0%{background-position:0 0} 100%{background-position:220% 0} }
.c-legendary .pname { color: transparent;
  background: linear-gradient(110deg,#f6f2e8,var(--foil) 30%,#fff 50%,var(--foil) 70%,#f6f2e8);
  -webkit-background-clip: text; background-clip: text; }
.c-legendary .psub { color: #b8b2a4; }
.c-legendary .flavor { color: #d9d2bd; }
.c-legendary .st { background: #1c1c1c; border: 2px solid var(--foil); }
.c-legendary .st b { color: var(--foil); }
.c-legendary .serial { border: 2px solid var(--foil); }
.c-legendary .bars { background: repeating-linear-gradient(90deg,var(--foil) 0 2px,transparent 2px 5px,var(--foil) 5px 6px,transparent 6px 11px,var(--foil) 11px 14px,transparent 14px 17px); }
.c-legendary .serial small { color: #b8b2a4; }

/* ---------- set treatment ---------- */
.setband { position: relative; z-index: 3; text-align: center;
  font: 700 10px var(--font-mono); letter-spacing: 3px; text-transform: uppercase;
  padding: 7px 10px; background: var(--att); color: #0d0d0d; }
.oldname { font: 700 11px var(--font-mono); letter-spacing: 1px; opacity: .7; margin-top: 3px; }
.card.setdone { outline: 2px solid var(--att, #888); outline-offset: -2px; }
.corner-d { display: none; }  /* v10: corner diamonds removed */

/* ==========================================================================
   Reveal choreography — stock, then art, then name, then flavor.
   Budget ~1.4s total (handoff: under ~1.5s, skippable on tap).
   `.done` short-circuits every step to its end state, which is what the tap
   handler and prefers-reduced-motion both use — one code path, not two.
   ========================================================================== */
@keyframes cardIn  { from { opacity:0; transform: translateY(14px) scale(.96) rotate(-1.4deg) } }
@keyframes artIn   { from { opacity:0; transform: scale(.82) } }
@keyframes stampIn { from { opacity:0; transform: scale(1.12) } }
@keyframes lineIn  { from { opacity:0 } }

.reveal .cardrim { animation: cardIn  .34s cubic-bezier(.2,.9,.3,1.2) both; }
.reveal .art    { animation: artIn   .30s ease-out .28s both; }
.reveal .namebox{ animation: stampIn .18s cubic-bezier(.2,1.4,.4,1) .62s both; }
.reveal .flavor { animation: lineIn  .34s ease-out .86s both; }
.reveal .stats,
.reveal .serial,
.reveal .origin { animation: lineIn  .28s ease-out 1.10s both; }

.reveal.done .cardrim, .reveal.done .art, .reveal.done .namebox,
.reveal.done .flavor, .reveal.done .stats, .reveal.done .serial,
.reveal.done .origin { animation: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .c-epic, .c-legendary .foilhead { animation: none; }
  .reveal .cardrim, .reveal .art, .reveal .namebox, .reveal .flavor,
  .reveal .stats, .reveal .serial, .reveal .origin { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Binder mini-card — same ANATOMY scaled (CARD_FRAME_V10 §mini).
   Rim thins, header collapses to tag + dot + PWR in one static row (flex =
   collision-free by construction), nameplate clamps to 2 wrapped lines.
   One silhouette, five materials — the point survives at thumbnail.
   ========================================================================== */
.cardrim.mini-rim { padding: 4px; border-radius: 12px;
                    box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.card.mini { border-radius: 8px; }
.card.mini .chdr { padding: 5px 7px 0; min-height: 22px; }
.card.mini .chdr-r { gap: 4px; }
.card.mini .tiertag { font-size: 8px; padding: 2px 5px; letter-spacing: 1px; }
.card.mini .attdot { width: 9px; height: 9px; }
.card.mini .pwrbadge { padding: 2px 6px; border-radius: 7px; }
.card.mini .pwrbadge b { font-size: 11px; } .card.mini .pwrbadge span { font-size: 6px; }
.card.mini .art { margin: 4px 7px 2px; border-radius: 7px; }
.card.mini .namebox { min-height: 34px; padding: 3px 8px 8px; }
.card.mini .pname { font-size: 11px; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.card.mini .pname.setname { font-size: 10px; }
.card.mini .oldname { display: none; }
.card.mini .psub { font-size: 7px; letter-spacing: 1px; margin-top: 2px; }
.card.mini .setband { font-size: 7px; letter-spacing: 1px; padding: 3px 4px; }
.card.mini .foilhead { padding: 4px 8px; font-size: 8px; letter-spacing: 0; }
/* Rivets are a full-card detail; at 118px they read as dust, not hardware. */
.card.mini .rivet { display: none; }