/* Collectibles economy — theme vars only.
   Rarity colours: common=grey(--muted), rare=blue(--accent),
   epic=green(--brand), legendary=gold(--warn). */

/* ----- notices / CTA ----- */
.co-notice{
  background:rgba(22,199,132,.12);border:1px solid var(--brand);color:var(--brand);
  border-radius:var(--radius);padding:.7rem 1rem;margin:0 0 1rem;font-weight:600
}
.co-cta-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;text-align:center;max-width:520px;margin:1rem auto
}
.co-cta-card h2{margin:0 0 .5rem}
.co-cta-actions{display:flex;gap:.6rem;justify-content:center;margin:1rem 0 .6rem;flex-wrap:wrap}

/* ----- top bar: balance pill + progress ----- */
.co-topbar{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem 1rem;margin:0 0 1.1rem
}
.co-balance{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.co-progress{display:flex;align-items:center;gap:.8rem}
.co-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(240,180,41,.14);border:1px solid var(--warn);color:var(--warn);
  border-radius:999px;padding:.32rem .8rem;font-weight:800
}
.co-pill-ico{font-size:1rem}
.co-pill-num{font-size:1.15rem}
.co-pill-lbl{font-size:.78rem;font-weight:700;opacity:.85}
.co-pill.bump{animation:co-bump .4s ease}
@keyframes co-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ----- free daily pack ----- */
.co-pack{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:0 0 1.4rem;
  box-shadow:0 6px 24px rgba(0,0,0,.28)
}
.co-pack-inner{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.co-pack-art{font-size:3rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(240,180,41,.35))}
.co-pack-copy{flex:1;min-width:200px}
.co-pack-copy h2{margin:0 0 .25rem}
.co-pack-copy .btn{margin:.5rem 0 .35rem}

/* reveal area */
.co-reveal{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.1rem;
  padding-top:1.1rem;border-top:1px dashed var(--line)
}

/* ----- shop / grids ----- */
.co-shop-head{margin:0 0 .6rem}
.co-shop-head h2{margin:0}
.co-rarity-block{margin:0 0 1.5rem}
.co-rarity-title{
  text-transform:capitalize;font-size:.95rem;letter-spacing:.03em;
  margin:0 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)
}
.co-grid{
  display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
}

/* ----- pack shop (FUT-style pack tiles) ----- */
.co-pool-note{
  background:var(--surface);border:1px dashed var(--line);border-radius:12px;
  padding:.55rem .8rem;margin:0 0 1rem
}
.co-packs{
  display:grid;gap:1rem;margin:0 0 1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))
}
.co-packtile{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:16px;padding:1.1rem 1rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:.15s
}
.co-packtile:hover{transform:translateY(-3px);border-color:var(--warn)}
.co-packtile-art{font-size:2.6rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(240,180,41,.3))}
.co-packtile-name{margin:.1rem 0 0;font-size:1.02rem}
.co-packtile-blurb{margin:0}
.co-packtile-spec{list-style:none;padding:0;margin:.2rem 0;display:flex;flex-direction:column;gap:.15rem}
.co-packtile-spec li{font-size:.74rem}
.co-packtile-cost{font-weight:900;color:var(--warn);font-size:1.05rem;margin:.2rem 0}
.co-buy-pack{width:100%;margin-top:.1rem}

/* ----- card tile -----
   Smooth, GPU-friendly: the tile only ever animates transform/opacity/box-shadow.
   Desktop hover = subtle 3D tilt + travelling shine, driven by CSS vars the JS
   sets (--rx,--ry = tilt deg; --mx,--my = pointer % for the shine). Defaults
   below render a flat, glitch-free card if JS never runs. */
.co-card{
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:.8rem;display:flex;flex-direction:column;gap:.45rem;align-items:center;
  text-align:center;position:relative;overflow:hidden;
  transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease,border-color .2s ease;
  transform-style:preserve-3d
}
.co-card::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent
}
/* travelling shine — opacity-only reveal, no layout cost */
.co-card-shine{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .25s ease;mix-blend-mode:screen;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 60%)
}
/* desktop: lift + activate tilt/shine on pointer devices only */
@media (hover:hover) and (pointer:fine){
  .co-card.is-tilting{will-change:transform;box-shadow:var(--shadow)}
  .co-card.is-tilting .co-card-shine{opacity:1}
}
.co-card-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.4rem;position:relative;z-index:2}
.co-rar-tag{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.co-cost{font-size:.78rem;font-weight:800;color:var(--warn)}
.co-card-art{height:64px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.co-crest{max-width:56px;max-height:56px;object-fit:contain}
.co-emoji{font-size:2.6rem;line-height:1}
/* graceful photo placeholder (no image / broken image) */
.co-photo-ph{
  width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2rem;line-height:1;background:var(--surface-2);border:2px solid var(--line);color:var(--muted)
}
/* player / manager photo (round head-shot) */
.co-photo{
  width:60px;height:60px;border-radius:50%;object-fit:cover;
  background:var(--surface-2);border:2px solid var(--line)
}
.co-card.rar-rare .co-photo,.co-card.rar-rare .co-photo-ph{border-color:rgba(59,130,246,.6)}
.co-card.rar-epic .co-photo,.co-card.rar-epic .co-photo-ph{border-color:rgba(22,199,132,.6)}
.co-card.rar-legendary .co-photo,.co-card.rar-legendary .co-photo-ph{border-color:rgba(240,180,41,.75)}
.co-pos{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.co-pos.is-gaffer{color:var(--warn)}
.co-card-name{font-weight:700;font-size:.9rem;line-height:1.2;position:relative;z-index:2}
.co-card-meta{margin-top:-.2rem;position:relative;z-index:2}
/* club line under the name (THE CLUB the player plays for) */
.co-card-club{margin-top:-.15rem;font-size:.74rem;line-height:1.25;position:relative;z-index:2}

/* card click-through: real <a> on photo + name + a 'View card' affordance.
   Keeps the unlock/buy <button> OUTSIDE the link so controls keep working. */
.co-card-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.co-card-name .co-card-link{display:inline}
.co-card-link:hover{text-decoration:none}
.co-card-name .co-card-link:hover{color:var(--brand)}
.co-card-art .co-card-link:hover .co-photo,
.co-card-art .co-card-link:hover .co-crest{filter:brightness(1.06)}
.co-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.co-view-card{
  position:relative;z-index:2;
  margin-top:.15rem;font-size:.68rem;font-weight:700;letter-spacing:.02em;
  color:var(--muted);text-decoration:none;opacity:.85;transition:color .15s ease,opacity .15s ease
}
.co-view-card:hover,.co-view-card:focus-visible{color:var(--brand);opacity:1}
.co-view-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.co-unlock-btn{width:100%;margin-top:.2rem;position:relative;z-index:2}
.co-owned-badge{
  position:relative;z-index:2;
  margin-top:.2rem;font-size:.74rem;font-weight:800;color:var(--brand);
  background:rgba(22,199,132,.12);border-radius:999px;padding:.2rem .6rem
}
.co-card.is-owned{opacity:.96}

/* ----- Gaffer Cards (managers) — distinct gold-edged styling ----- */
.co-card.is-gaffer{
  background:linear-gradient(170deg,rgba(240,180,41,.05),var(--surface) 72%)
}
.co-card.is-gaffer .co-photo,.co-card.is-gaffer .co-photo-ph{
  border-radius:14px;border-color:rgba(240,180,41,.6)
}
.co-card.is-gaffer .co-photo-ph{background:linear-gradient(170deg,var(--surface-2),var(--surface))}

/* ----- Scout Report (ai-take inside an owned card) — keep it compact ----- */
.co-card .ai-take{
  position:relative;z-index:2;width:100%;margin-top:.5rem;text-align:left;
  padding:.6rem .7rem!important;font-size:.78rem
}
.co-card .ai-take .ai-take-body{font-size:.78rem;line-height:1.4}
.co-card .ai-take .ai-take-foot{font-size:.66rem}

/* rarity colour treatments (border + glow + tag) */
.rar-common{color:var(--muted)}
.co-card.rar-common{border-color:var(--line)}
.co-card.rar-common .co-rar-tag{color:var(--muted)}

.rar-rare{color:var(--accent)}
.co-card.rar-rare{border-color:rgba(59,130,246,.55);box-shadow:0 0 0 1px rgba(59,130,246,.15)}
.co-card.rar-rare .co-rar-tag{color:var(--accent)}

.rar-epic{color:var(--brand)}
.co-card.rar-epic{border-color:rgba(22,199,132,.6);box-shadow:0 0 14px rgba(22,199,132,.18)}
.co-card.rar-epic .co-rar-tag{color:var(--brand)}

.rar-legendary{color:var(--warn)}
.co-card.rar-legendary{
  border-color:rgba(240,180,41,.7);
  box-shadow:0 0 18px rgba(240,180,41,.28);
  background:linear-gradient(170deg,rgba(240,180,41,.06),var(--surface))
}
.co-card.rar-legendary .co-rar-tag{color:var(--warn)}

/* ----- edition badge + special cards ----- */
.co-edition-badge{
  align-self:center;font-size:.58rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.16rem .55rem;line-height:1.3;
  border:1px solid transparent;white-space:nowrap
}
/* World Cup 2026 = gold premium */
.co-edition-badge.ed-wc2026{
  color:#3a2c05;
  background:linear-gradient(100deg,#f7d774,#f0b429 55%,#d99413);
  border-color:rgba(240,180,41,.9);
  box-shadow:0 1px 6px rgba(240,180,41,.45)
}
/* Icon = distinct violet/silver */
.co-edition-badge.ed-icon{
  color:#0e1116;
  background:linear-gradient(100deg,#e8e3f5,#b9a7e6 60%,#8c7bd1);
  border-color:rgba(160,140,220,.9)
}
/* generic SPECIAL fallback */
.co-edition-badge:not(.ed-wc2026):not(.ed-icon){
  color:var(--accent);background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.6)
}

/* special-card frame + glow (overrides rarity look, additive) */
.co-card.is-special{position:relative}
.co-card.is-special.ed-wc2026{
  border-color:rgba(240,180,41,.85);
  background:linear-gradient(170deg,rgba(240,180,41,.10),var(--surface) 70%);
  box-shadow:0 0 20px rgba(240,180,41,.30),inset 0 0 0 1px rgba(240,180,41,.30)
}
.co-card.is-special.ed-wc2026::before{
  box-shadow:inset 0 0 0 1px rgba(247,215,116,.45);
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(247,215,116,.18),transparent 60%)
}
.co-card.is-special.ed-wc2026 .co-photo{border-color:rgba(240,180,41,.85)}
.co-card.is-special.ed-icon{
  border-color:rgba(160,140,220,.8);
  background:linear-gradient(170deg,rgba(160,140,220,.10),var(--surface) 70%);
  box-shadow:0 0 18px rgba(160,140,220,.26)
}
.co-card.is-special.ed-icon .co-photo{border-color:rgba(160,140,220,.8)}
/* generic special (unknown edition) */
.co-card.is-special:not(.ed-wc2026):not(.ed-icon){
  border-color:rgba(59,130,246,.65);box-shadow:0 0 16px rgba(59,130,246,.22)
}

/* ----- World Cup pack tile (premium look) ----- */
.co-packtile.is-worldcup{
  position:relative;
  border-color:rgba(240,180,41,.8);
  background:linear-gradient(165deg,rgba(240,180,41,.14),var(--surface-2) 55%,var(--surface));
  box-shadow:0 8px 28px rgba(240,180,41,.22),inset 0 0 0 1px rgba(247,215,116,.25)
}
.co-packtile.is-worldcup:hover{border-color:var(--warn);transform:translateY(-4px)}
.co-packtile.is-worldcup .co-packtile-cost{color:var(--warn)}
.co-packtile-tag{
  position:absolute;top:.55rem;right:.55rem;
  font-size:.56rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:#3a2c05;background:linear-gradient(100deg,#f7d774,#f0b429 60%,#d99413);
  border-radius:999px;padding:.16rem .5rem;box-shadow:0 1px 5px rgba(240,180,41,.4)
}

/* ----- reveal / flip animation -----
   GLITCH FIX: the reveal now animates ONLY opacity + transform (no width/height
   /layout changes during the sequence), with will-change scoped to the active
   moment and removed after, and a single compositor-friendly cubic-bezier. Each
   flip enters with a staggered drop-in (handled by the .is-in class the JS adds
   on the next frame) so the row paints once, then animates smoothly. */
.co-flip{
  width:140px;height:188px;perspective:900px;
  /* entrance start state — JS adds .is-in to play it (frame-aligned) */
  opacity:0;transform:translateY(14px) scale(.94)
}
.co-flip.is-in{
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)
}
.co-flip-inner{
  position:relative;width:100%;height:100%;
  transition:transform .62s cubic-bezier(.34,1.2,.4,1);
  transform-style:preserve-3d;backface-visibility:hidden
}
.co-flip.is-flipping .co-flip-inner{will-change:transform}
.co-flip.is-revealed .co-flip-inner{transform:rotateY(180deg)}
.co-flip-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;transform:translateZ(0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem;text-align:center;border:1px solid var(--line);background:var(--surface)
}
.co-flip-back{
  background:linear-gradient(135deg,var(--surface-2),#11161d);
  font-size:2rem;color:var(--muted)
}
/* subtle idle shimmer on the pack back while it waits to flip */
.co-flip-back::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
  background-size:250% 250%;animation:co-shimmer 2.6s linear infinite
}
.co-flip.is-revealed .co-flip-back::after{animation:none;opacity:0}
@keyframes co-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.co-flip-front{transform:rotateY(180deg)}
.co-flip-front .co-card-name{font-size:.82rem}
.co-flip-front .co-crest{max-width:48px;max-height:48px}
.co-flip-front .co-photo,.co-flip-front .co-photo-ph{width:52px;height:52px}
.co-flip-front .co-photo-ph{font-size:1.7rem}
.co-flip-front .co-emoji{font-size:2.2rem}
/* legendary pulls get an extra glow on reveal (opacity/box-shadow only) */
.co-flip.rar-legendary.is-revealed .co-flip-front{
  box-shadow:0 0 22px rgba(240,180,41,.45);animation:co-pulse 1.2s ease 1
}
.co-flip.rar-epic.is-revealed .co-flip-front{box-shadow:0 0 16px rgba(22,199,132,.3)}
@keyframes co-pulse{0%{box-shadow:0 0 6px rgba(240,180,41,.2)}50%{box-shadow:0 0 28px rgba(240,180,41,.6)}100%{box-shadow:0 0 22px rgba(240,180,41,.45)}}
.co-refund-tag{
  position:absolute;bottom:6px;right:6px;font-size:.58rem;font-weight:800;
  background:rgba(240,180,41,.16);color:var(--warn);border-radius:6px;padding:.1rem .3rem;z-index:2
}
.co-flip .co-new-tag{
  position:absolute;top:6px;left:6px;font-size:.6rem;font-weight:900;
  background:var(--brand);color:#06231a;border-radius:6px;padding:.1rem .35rem;z-index:2
}
.co-flip .co-dupe-tag{
  position:absolute;top:6px;left:6px;font-size:.6rem;font-weight:800;
  background:var(--surface-2);color:var(--muted);border-radius:6px;padding:.1rem .35rem;z-index:2
}

/* ----- empty / mine ----- */
.co-empty{
  text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:2.2rem 1rem;margin:1rem 0
}
.co-empty-art{font-size:3rem;margin-bottom:.4rem}

.co-rg{margin-top:1.4rem;text-align:center}

/* ----- mobile: tap-to-flip the card to its back (Scout/details hint) ----- */
.co-card.is-flipped{transform:perspective(700px) rotateY(180deg)}
.co-card.is-flipped > *:not(.co-card-back):not(.co-card-shine){opacity:0;transition:opacity .12s ease}
.co-card-back{
  position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;transform:rotateY(180deg);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:.7rem;text-align:center;background:linear-gradient(135deg,var(--surface-2),var(--surface));
  color:var(--muted);font-size:.74rem;z-index:4
}
/* only expose the tap-flip affordance on touch / no-hover devices */
@media (hover:none){
  .co-card[data-flippable] .co-card-back{display:flex}
}

@media(max-width:520px){
  .co-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .co-flip{width:120px;height:162px}
}

/* ----- respect reduced-motion: no tilt, no flips, instant reveal ----- */
@media (prefers-reduced-motion:reduce){
  .co-card,.co-card-shine,.co-flip,.co-flip.is-in,.co-flip-inner,
  .co-packtile,.co-pill.bump{transition:none!important;animation:none!important}
  .co-card{transform:none!important}
  .co-card.is-flipped{transform:none!important}
  .co-card-shine{opacity:0!important}
  .co-flip{opacity:1!important;transform:none!important}
  /* show the front face directly instead of flipping */
  .co-flip .co-flip-inner{transform:none!important}
  .co-flip .co-flip-back{display:none}
  .co-flip .co-flip-front{transform:none!important;position:relative}
  .co-flip-back::after{animation:none!important}
}

/* Initials chip for photoless player/manager cards (e.g. football-data WC squads).
   Reads as a real card face, not a generic silhouette. */
.co-photo-ph.co-initials{
  font-size:1.5rem;font-weight:800;letter-spacing:.02em;color:var(--text);
  background:radial-gradient(120% 120% at 30% 20%, var(--brand-tint, rgba(22,199,132,.18)), var(--surface-2));
  font-variant-numeric:normal;text-transform:uppercase
}
.co-card.rar-legendary .co-photo-ph.co-initials{background:radial-gradient(120% 120% at 30% 20%, rgba(240,180,41,.22), var(--surface-2))}
.co-flip-front .co-photo-ph.co-initials{font-size:1.25rem}