/* Stage and Crowd playing cards: the band card and the member card.
   Same build as the Dare League player card and the ifsingle / Scavora
   profile cards, re-skinned for a stage: warm dark plate, stage-light amber.
   Used by Bands/card.cfm and Account/card.cfm. Rarity frame comes from
   .sc-tier-1..4 (Open Mic, Local Act, Headliner, Legend). The stage/crowd
   scene, radar and badges are drawn by JS/card.js. */

/* fonts on the card itself too, so a card shown outside .scp-layout still renders */
.scp-layout,.sc-card{--font-card:"Bricolage Grotesque",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--font-display:"Space Grotesk",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.scp-layout{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px;align-items:start;max-width:1100px;margin:0 auto}
@media (max-width:880px){.scp-layout{grid-template-columns:minmax(0,1fr);gap:24px}}
.scp-stage{position:sticky;top:80px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0 18px;border-radius:24px;
  background:radial-gradient(closest-side,rgba(232,150,42,.16),transparent),radial-gradient(60% 40% at 50% 100%,rgba(214,69,61,.12),transparent)}
@media (max-width:880px){.scp-stage{position:static}}
.scp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.scp-hint{margin:0;font-size:12px;color:var(--text-2);text-align:center;max-width:320px}
.scp-sheet{display:grid;gap:16px;min-width:0}
.scp-sheet h1{margin:0;font-family:var(--font-card);font-weight:800;font-style:italic;font-variation-settings:"wdth" 80;font-size:clamp(28px,4vw,40px);line-height:1.05}
.scp-sheet h2{margin:0 0 10px;font-size:18px}
.scp-rows{display:grid;gap:8px}
.scp-row{display:grid;grid-template-columns:74px 1fr 36px;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.scp-row b{font:700 12px var(--font-display);letter-spacing:.12em;color:var(--c)}
.scp-row span{font-size:13px;color:var(--text-2);min-width:0}
.scp-row strong{font:800 18px/1 var(--font);text-align:right;font-variant-numeric:tabular-nums}
.scp-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.scp-badge{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.scp-badge.off{opacity:.5}
.scp-badge svg{display:block;width:34px;height:34px}
.scp-badge b{display:block;font-size:14px}
.scp-badge small{display:block;color:var(--text-2);font-size:12px;line-height:1.35}

/* stat colors (same order as the stats on both cards) */
.scp-layout,.sc-card{--s1:#F5A524;--s2:#F2545B;--s3:#2DD4BF;--s4:#A78BFA;--s5:#60A5FA;--rookie:#CBD5E1;--gold:#FFC94D;--amber:#E8962A}

.sc-card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--flip:0deg;--holo:0;
  width:330px;max-width:100%;aspect-ratio:5/7;perspective:1300px;cursor:pointer;outline:none;color:#fff;font-family:var(--font-card,var(--font));font-size:13px;line-height:1.35;-webkit-tap-highlight-color:transparent}
.sc-card:focus-visible .scc-in{box-shadow:0 0 0 3px var(--amber);border-radius:20px}
.scc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sc-card.tilting .scc-in{transition:transform .08s linear}
.scc-face{position:absolute;inset:0;border-radius:20px;padding:7px;background:var(--frame);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85),0 0 40px -6px var(--glow)}
.scc-back{transform:rotateY(180deg)}
.scc-plate{position:relative;height:100%;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;gap:7px;padding:9px 11px 0;
  background:radial-gradient(120% 60% at 50% 0%,rgba(232,150,42,.28),transparent 60%),linear-gradient(180deg,#2a1d12 0%,#1a120c 55%,#0e0a07 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 0 0 3px rgba(0,0,0,.35)}

/* rarity frames */
/* --holo is lower than Dare League's (.16/.32/.5): color-dodge over the warm
   plate washes the whole card out at those levels */
.sc-tier-1{--holo:0;--glow:rgba(203,213,225,.22);--frame:linear-gradient(150deg,#f1f5f9,#94a3b8 30%,#334155 52%,#cbd5e1 74%,#f8fafc)}
.sc-tier-2{--holo:.08;--glow:rgba(217,119,6,.4);--frame:linear-gradient(150deg,#fde7c8,#c2773a 28%,#5c2d0e 52%,#e4a066 74%,#fff1df)}
.sc-tier-3{--holo:.14;--glow:rgba(242,84,91,.55);--frame:linear-gradient(150deg,#ffd5d7,#f2545b 26%,#7a1016 50%,#ff8a8f 72%,#e8962a 90%,#ffe5d0)}
.sc-tier-4{--holo:.24;--glow:rgba(255,201,77,.6);--frame:linear-gradient(120deg,#fff4c9,#e7a400 18%,#7a4a00 34%,#ffe38a 50%,#b7791f 66%,#fff1b8 80%,#d39a12)}
.sc-tier-4 .scc-face{background-size:300% 300%;animation:scc-gold 6s ease-in-out infinite}
@keyframes scc-gold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* front */
.scc-head{display:flex;align-items:center;gap:8px;font:700 10px var(--font-display);letter-spacing:.22em;color:rgba(255,255,255,.9)}
.scc-head::before,.scc-head .dash{content:"";display:block;flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 7px,transparent 7px 11px)}
.scc-lvl{position:absolute;right:8px;top:6px;z-index:3;display:grid;place-items:center;width:42px;height:46px;color:#2a1600;text-align:center;
  clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);background:linear-gradient(140deg,#fff 0%,var(--gold) 55%,#e7a400)}
.scc-lvl small{display:block;font:700 7px var(--font-display);letter-spacing:.14em;margin-bottom:-2px}
.scc-lvl b{font:800 17px/1 var(--font-card);font-variation-settings:"wdth" 80}
.scc-ribbon{position:relative;margin:2px -14px 0;padding:6px 22px 7px;transform:rotate(-2.2deg);
  background:linear-gradient(90deg,#8a2a12,#d6453d 40%,#e8962a 80%,#b45309);box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25)}
.scc-ribbon::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.4px) 0 0/7px 7px;opacity:.25;mix-blend-mode:overlay}
.scc-name{margin:0;font-family:var(--font-card);font-weight:800;font-style:italic;font-variation-settings:"wdth" 75,"opsz" 96;font-size:30px;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;text-shadow:0 2px 0 rgba(90,30,0,.6),0 0 18px rgba(255,200,140,.5);padding-right:34px}
.scc-art{position:relative;height:148px;flex:none;border-radius:8px;overflow:hidden;border:1.5px solid rgba(255,255,255,.26);background:#120c08}
.scc-scene{position:absolute;inset:0;width:100%;height:100%}
.scc-portrait{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-56%);border-radius:50%;display:grid;place-items:center;overflow:hidden;
  border:2.5px dashed rgba(255,255,255,.85);background:radial-gradient(circle at 40% 30%,rgba(120,60,20,.85),rgba(30,14,6,.92));box-shadow:0 0 24px rgba(232,150,42,.5)}
.scc-portrait img{width:100%;height:100%;object-fit:cover}
.scc-portrait span{font:800 40px/1 var(--font-card);font-style:italic;font-variation-settings:"wdth" 80;background:linear-gradient(180deg,#fff,#ffd29a);-webkit-background-clip:text;background-clip:text;color:transparent}
.scc-chip{position:absolute;left:7px;top:7px;padding:3px 8px;border-radius:999px;font:700 9px var(--font-display);letter-spacing:.16em;background:rgba(18,10,6,.75);border:1px solid var(--glow);color:#fff}
.scc-tag{position:absolute;right:7px;bottom:7px;max-width:60%;padding:3px 8px;border-radius:999px;font:700 9px var(--font-display);letter-spacing:.1em;background:rgba(18,10,6,.75);color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scc-class{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:5px;border-bottom:1px dashed rgba(255,255,255,.22)}
.scc-class strong{font-family:var(--font-card);font-weight:800;font-style:italic;font-variation-settings:"wdth" 82;font-size:18px;line-height:1;color:var(--c1)}
.scc-class em{font:700 9px var(--font-display);font-style:normal;letter-spacing:.14em;color:rgba(255,255,255,.6);text-align:right}
.scc-stats{display:grid;gap:4px}
.scc-stat{display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:8px;font:700 10px var(--font-display);letter-spacing:.12em}
.scc-stat span{color:var(--c)}
.scc-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.scc-bar i{display:block;height:100%;width:var(--v);border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.15),var(--c));box-shadow:0 0 10px var(--c)}
.scc-stat b{font:800 14px/1 var(--font-card);text-align:right;font-variant-numeric:tabular-nums}
.scc-move{margin:1px 0 0;text-align:center;font-weight:700;font-style:italic;font-size:13px;line-height:1.25;color:#fff;text-wrap:balance;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.scc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:7px 2px 9px;border-top:1px solid rgba(255,255,255,.14);
  font:800 10px var(--font-display);font-style:italic;letter-spacing:.12em;color:var(--gold);text-shadow:0 0 10px rgba(255,201,77,.35);position:relative}
.scc-foot::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--amber),#fff,var(--amber),transparent);box-shadow:0 0 14px var(--amber)}
.scc-foot span:last-child{color:rgba(255,255,255,.75);font-style:normal;font-variant-numeric:tabular-nums}

/* holo foil follows the pointer; the shine sweeps once when the card appears */
.scc-holo{position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:var(--holo);mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(115deg,#f2545b 0%,#ffc94d 6%,#2dd4bf 12%,#a78bfa 18%,#f2545b 24%) calc(var(--mx) * 1.2) calc(var(--my) * 1.2)/240% 240%,
             radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 45%)}
.sc-tier-4 .scc-holo{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 40%),
  radial-gradient(rgba(255,255,255,.9) .8px,transparent 1.3px) 0 0/13px 13px,
  repeating-linear-gradient(115deg,#ffc94d 0%,#f2545b 7%,#2dd4bf 14%,#ffc94d 21%) calc(var(--mx) * 1.2) calc(var(--my) * 1.2)/240% 240%}
.scc-shine{position:absolute;inset:0;border-radius:20px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);transform:translateX(-120%)}
.sc-card.revealing .scc-front .scc-shine{animation:scc-shine 1.3s .25s ease-out}
@keyframes scc-shine{to{transform:translateX(120%)}}

/* back */
.scc-back .scc-plate{gap:8px}
.scc-back h3{margin:2px 0 0;padding:3px 4px 4px;text-align:center;font-family:var(--font-card);font-weight:800;font-style:italic;font-variation-settings:"wdth" 78;font-size:22px;line-height:1;color:#fff;text-shadow:0 0 16px rgba(232,150,42,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scc-radar{display:block;width:150px;height:140px;margin:-2px auto -4px}
.scc-facts{margin:0;display:grid;gap:3px}
.scc-facts div{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:baseline;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.scc-facts dt{font:700 9px var(--font-display);letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase}
.scc-facts dd{margin:0;font-weight:600;font-size:12px;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scc-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;justify-items:center}
.scc-badges svg{width:34px;height:34px}
.scc-badges .off,.scp-badge .off{opacity:.22;filter:grayscale(1)}
.scc-bcount{text-align:center;font:700 9px var(--font-display);letter-spacing:.14em;color:rgba(255,255,255,.55)}

/* small card link (team lists, band lineup) */
.scp-lineup{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.scp-mini{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);text-decoration:none;color:var(--text) !important}
.scp-mini .avatar{width:36px;height:36px;font-size:13px}
.scp-mini small{display:block;color:var(--text-2);font-size:12px}

@media (prefers-reduced-motion:reduce){.scc-in{transition:none}.sc-tier-4 .scc-face{animation:none}.sc-card.revealing .scc-front .scc-shine{animation:none}}