/* 3OT Cards — dedicated collectible card styling. Edit this file only for card design. */
.cards-hero{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  background:radial-gradient(circle at top right,rgba(255,159,26,.18),transparent 36%),#20242d;
}
.cards-kicker{margin:0 0 6px;color:#ffb347;text-transform:uppercase;letter-spacing:.12em}
.cards-hero h1{margin:0;font-size:38px}
.cards-hero-count{width:150px;height:110px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#151923;display:grid;place-content:center;text-align:center}
.cards-hero-count strong{font-size:32px}
.cards-hero-count span{color:#aeb7c8}
.cards-tabs,.cards-view-tabs{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.cards-tabs a,.cards-view-tabs a{background:#20242d;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:11px 16px;color:#fff;text-decoration:none;font-weight:400}
.cards-tabs a.active,.cards-view-tabs a.active{background:#303744;border-color:rgba(255,159,26,.35)}
.cards-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cards-actions form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cards-actions button,.cards-buy-credits{min-height:42px;padding:0 20px;border-radius:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.cards-buy-credits{background:#1a2233;color:#fff;border:2px solid #ff7a1a;font-weight:400}
.cards-buy-credits:hover{background:#24304a;border-color:#ffb11a}
.cards-reveal{text-align:center;overflow:hidden}
.cards-reveal .threeot-card,
.cards-reveal .threeot-card-inner,
.cards-reveal .threeot-card-player,
.cards-reveal .threeot-card-team,
.cards-reveal .threeot-card-extra {
  text-align:left;
}
.cards-reveal-grid{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;perspective:900px}
.cards-reveal-grid .threeot-card{animation:card-pop-reveal .72s cubic-bezier(.2,1.1,.25,1) both}
.cards-reveal-grid .threeot-card:nth-child(2){animation-delay:.12s}
.cards-reveal-grid .threeot-card:nth-child(3){animation-delay:.24s}
.threeot-card-grid,.cards-market-grid{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:14px;align-items:start}
.cards-market-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.threeot-card{display:block;width:150px;height:210px;flex:0 0 150px;text-decoration:none;color:#fff}
.threeot-card-inner{border:solid 1px #000;width:150px;height:210px;border-radius:10px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--card-primary,#1f2937),#10131b 60%,var(--card-secondary,#ff9f1a));box-shadow:0 10px 24px rgba(0,0,0,.34);transform:translateZ(0)}
.threeot-card-inner:before{display:none;}
.threeot-card-inner:after{content:"";position:absolute;top:-35%;bottom:-35%;left:-80%;width:48%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(18deg);animation:card-shimmer 4.8s ease-in-out infinite;pointer-events:none}
.threeot-card-top,.threeot-card-footer{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.threeot-card-top span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.35);padding:5px 7px;border-radius:999px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.threeot-card-player{
  position:relative;
  z-index:1;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  word-break:normal;
  overflow:visible;
  min-height:90px;
  max-height:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
}

.threeot-card-name-first{
  display:block;
  font-size:22px;
  opacity:0.7;
  font-family:"Smooch Sans", sans-serif;
  font-weight:300;
  line-height:1.02;
  letter-spacing:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.threeot-card-name-last{
  z-index:1;
  display:block;
  font-size:26px;
  font-family:"Smooch Sans", sans-serif;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  overflow:visible;
  overflow-wrap:normal;
  word-break:normal;
  white-space:normal;
  max-height:none;
}

.card-teams .threeot-card-name-first,
.card-teams .threeot-card-name-last {
  display:block;
  font-family:"Smooch Sans", sans-serif;
  font-size:26px;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  opacity:1;
}

.threeot-card-team{position:relative;z-index:1;color:rgba(255,255,255,.84);font-size:13px;line-height:1.2}
.threeot-card-footer span,.threeot-card-footer em{background:rgba(0,0,0,.35);border-radius:999px;padding:4px 7px;font-style:normal;font-size:12px}
.rarity-goat .threeot-card-inner,.card-goat .threeot-card-inner{border-color:rgba(255,215,0,.72)}
.rarity-legends .threeot-card-inner,.card-legends .threeot-card-inner{}
.rarity-stars .threeot-card-inner,.card-stars .threeot-card-inner{}
.rarity-next-gen .threeot-card-inner,.card-next-gen .threeot-card-inner{}
.rarity-teams .threeot-card-inner,.card-teams .threeot-card-inner{}
.is-missing .threeot-card-inner{filter:grayscale(1);opacity:.52;background:#1f232d!important}
.is-missing .threeot-card-player{color:#939aa7}
.is-missing .threeot-card-inner:after{display:none}
.cards-market-item{background:#20242d;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px;display:grid;gap:10px}.cards-market-item .threeot-card{margin:auto}
.cards-trade-form,.cards-inline-form{display:grid;gap:8px}.cards-offer-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.cards-offer-row form{display:flex;gap:8px}.threeot-card-mini{width:150px;height:210px}.threeot-card-mini .threeot-card-inner{width:150px;height:210px}

.threeot-card-mini .threeot-card-player{
  min-height:90px;
  max-height:none;
  overflow:visible;
}
.threeot-card-mini .threeot-card-name-first{font-size:16px}
.threeot-card-mini .threeot-card-name-last{font-size:19px}

@keyframes card-shimmer{0%,42%{left:-85%;opacity:0}50%{opacity:.75}64%,100%{left:138%;opacity:0}}
@keyframes card-pop-reveal{0%{opacity:0;transform:translateY(24px) rotateX(18deg) scale(.82)}62%{opacity:1;transform:translateY(-5px) rotateX(0) scale(1.05)}100%{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@media(max-width:760px){.cards-hero{display:block}.cards-hero-count{margin-top:14px}.threeot-card-grid{grid-template-columns:repeat(auto-fill,150px);justify-content:center;gap:12px}.cards-market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cards-actions{display:grid}.cards-actions form{display:grid}.cards-offer-row{display:block}.cards-offer-row form{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.threeot-card-inner:after,.cards-reveal-grid .threeot-card{animation:none}}

/* Limited edition card variants */
.threeot-card-top{gap:6px}

.threeot-card-limited-badge{
  margin-left:auto;
  font-style:normal;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  color:#e8bd0f;
  padding:5px;
  white-space:nowrap;
  font-family:courier;
}

.threeot-card-limited-serial,
.threeot-card-limited-badge {
  background: linear-gradient(
    90deg,
    #ffd76a 0%,
    #fff4b8 22%,
    #ffb300 45%,
    #fff7c8 60%,
    #d89400 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: limited-number-shimmer 2.4s linear infinite;
  text-shadow: 0 0 12px rgba(255, 196, 40, .45);
}

@keyframes limited-number-shimmer {
  0% { background-position: 220% center; }
  100% { background-position: -220% center; }
}

/* Base limited styling */
.limited-card .threeot-card-inner{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.1),
    0 14px 34px rgba(0,0,0,.42);
}

/* Shared limited foil overlay */
.limited-card .threeot-card-inner:before{
  display:block;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.18),transparent 18%),
    radial-gradient(circle at 84% 18%,rgba(250,204,21,.2),transparent 22%),
    linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.16) 45%,transparent 56%);
  mix-blend-mode:screen;
  opacity:.78;
  z-index:0;
}

/* 1/25 = Silver / Blue */
.limited-one-of-25 .threeot-card-inner{
  border:2px solid #1263f8;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12),
    0 0 22px rgba(96,165,250,.45),
    0 14px 34px rgba(0,0,0,.42);
 
}

.limited-one-of-25 .threeot-card-limited-badge{
  background:linear-gradient(90deg,#9ecbff,#ffffff,#60a5fa,#dbeafe);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 1/5 = Ruby */
.limited-one-of-five .threeot-card-inner{
  border:2px solid #ff2d55;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12),
    0 0 26px rgba(255,45,85,.58),
    0 14px 34px rgba(0,0,0,.42);
 
}

.limited-one-of-five .threeot-card-limited-badge{
  background:linear-gradient(90deg,#ff2d55,#ffd1dc,#ff4f73,#ffffff,#b0002a);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* 1/1 = Gold */
.limited-one-of-one .threeot-card-inner{
  border:2px solid #ffd700;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.16),
    0 0 16px rgba(255,215,0,.78),
    0 0 38px rgba(255,215,0,.5),
    0 14px 34px rgba(0,0,0,.5);
 
}

.limited-one-of-one .threeot-card-limited-badge{
  background:linear-gradient(90deg,#ffd700,#fff7b0,#ffffff,#ffb300,#8a5a00);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.threeot-card-extra{
  position:relative;
  z-index:1;
  margin-top:-8px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.58);
  font-family:"Smooch Sans",sans-serif;
  line-height:1;
}
.threeot-card-number{
  font-size:28px;
  font-weight:700;
  opacity:.26;
}
.threeot-card-achievement{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.88);
  min-height:15px;
}

.threeot-card-team {display:none!important}