/* ==========================================================================
   BotCodes — card component (Scrap Zine)
   Ported from card_name_lab_v9.html per BUILD_HANDOFF §2. Phase 3.
   ==========================================================================
   ONE stylesheet for both the reveal and the binder. The reveal shows a card
   at full size; the binder shows the same markup scaled down via `.mini`.
   Two copies of these stocks would drift the moment a tier is retouched —
   the same lesson the duplicated tint maths taught in Phase 2.
   ========================================================================== */

.card {
  border-radius: 16px; overflow: hidden; position: relative;
  --att: var(--att-unattuned); --attglow: transparent;
}
.card .art { position: relative; display: flex; justify-content: center; padding: 18px 0 6px; }
.card .art canvas, .card .art img {
  width: 62%; display: block; position: relative; z-index: 2;
  filter: drop-shadow(0 0 22px var(--attglow)) drop-shadow(0 0 8px var(--attglow));
}
/* Radial wash behind the art. Transparent when unattuned, so an unattuned
   part sits on bare stock with no glow and no wash — per ATTUNEMENTS.md. */
.card .art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .55;
  background: radial-gradient(ellipse at 50% 55%, var(--attglow) 0%, transparent 60%);
}
.tiertag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font: 700 10px var(--font-mono); letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
}
.namebox { padding: 4px 16px 14px; position: relative; z-index: 2; }
.pname { font: 900 20px/1.1 var(--font-display); text-transform: uppercase; }
.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; }

/* PWR badge — tilted, hard-shadowed, top-right. Gold-plated on legendary. */
.pwrbadge {
  position: absolute; top: 8px; right: 34px; z-index: 3; text-align: center;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 5px 10px;
  transform: rotate(2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.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. `.card.unattuned` hides it entirely — an unattuned part
   shows no dot, no glow, no crown (ATTUNEMENTS.md §"Unattuned baseline"). */
.attdot {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 14px; height: 14px; border-radius: 99px;
  background: var(--att); box-shadow: 0 0 10px var(--attglow);
}
.card.unattuned .attdot { display: none; }

/* ---------- COMMON — white card stock ---------- */
.c-common { background: #fdfdfa; color: var(--ink); border: 3px solid 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; border: 3px solid #6e5c3c; box-shadow: 4px 4px 0 rgba(62,50,30,.55); }
.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; border: 3px solid #3a424c; box-shadow: 5px 5px 0 rgba(20,26,34,.6); }
.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; border: 3px solid #12161c; box-shadow: 5px 5px 0 rgba(10,14,20,.55);
  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 ---------- */
.c-legendary { background: #101010; color: #fff; border: 4px solid transparent; position: relative;
  border-image: linear-gradient(120deg,#f6f2e8,var(--foil) 30%,#fff 50%,var(--foil) 70%,#f6f2e8) 1; }
.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 { font-size: 23px; color: transparent;
  background: linear-gradient(110deg,#f6f2e8,var(--foil) 30%,#fff 50%,var(--foil) 70%,#f6f2e8);
  -webkit-background-clip: text; background-clip: text; }
/* Legendary is the only stock with a banner above the art, so every
   absolutely-positioned overlay has to clear it. Without this the foil
   header renders *under* the PWR badge and the set diamonds. */
.c-legendary .tiertag  { top: 44px; }
.c-legendary .pwrbadge { top: 40px; }
.c-legendary .attdot   { top: 44px; }
.c-legendary.setdone .corner-d { top: 68px; }
.card.mini.c-legendary .tiertag  { top: 26px; }
.card.mini.c-legendary .pwrbadge { top: 24px; }
.card.mini.c-legendary .attdot   { top: 26px; }
.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; }
.setname { font: 900 21px/1.1 var(--font-display); text-transform: uppercase; }
.oldname { font: 700 11px var(--font-mono); letter-spacing: 1px; opacity: .7; margin-top: 3px; }
.card.setdone { box-shadow: 0 0 0 3px var(--att), 0 0 30px var(--attglow); }
.card.setdone .corner-d { position: absolute; z-index: 4;
  font: 900 13px var(--font-display); color: var(--att); }
.cd1 { top: 36px; left: 10px } .cd2 { top: 36px; right: 10px }

/* ==========================================================================
   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 .card   { 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 .card, .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 .card, .reveal .art, .reveal .namebox, .reveal .flavor,
  .reveal .stats, .reveal .serial, .reveal .origin { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Binder mini-card — same markup, smaller. Tier stock still reads at 3-up.
   ========================================================================== */
.card.mini .foilhead { padding: 5px 8px; font-size: 8px; letter-spacing: 0; }
.card.mini { border-radius: 10px; }
.card.mini .art { padding: 10px 0 2px; }
.card.mini .art canvas { width: 74%; }
.card.mini .tiertag { top: 6px; left: 6px; font-size: 8px; padding: 2px 5px; letter-spacing: 1px; }
.card.mini .attdot { top: 6px; right: 6px; width: 9px; height: 9px; }
.card.mini .pwrbadge { top: 4px; right: 20px; padding: 2px 6px; border-radius: 7px; }
.card.mini .pwrbadge b { font-size: 11px; } .card.mini .pwrbadge span { font-size: 6px; }
.card.mini .namebox { padding: 2px 8px 8px; }
.card.mini .pname { font-size: 11px; line-height: 1.15; }
.card.mini .psub { font-size: 7px; letter-spacing: 1px; margin-top: 2px; }
.card.mini .setband { font-size: 7px; letter-spacing: 1px; padding: 3px 4px; }
/* Rivets are a full-card detail. At mini size the bottom pair lands on top
   of the subtitle — "unattuned · bare metal" was rendering with its first
   letter under a rivet — and the top pair fights the tier tag. Nothing is
   lost by dropping them: at 118px they read as dust, not hardware. */
.card.mini .rivet { display: none; }
.card.mini.c-legendary { border-width: 3px; }