/* Showtime: concert-stage playmat, holo foil and live effects (see showtime.js).
   Each page keeps its own colours through --st-a / --st-b / --st-floor. */
.st-stage{--st-a:#84ebcb;--st-b:#a5bfff;--st-c:#ff8fc8;--st-floor:#0f2227;--st-deep:#070b14;
 position:relative;isolation:isolate;overflow:hidden;
 background:radial-gradient(ellipse 70% 38% at 50% 50%,color-mix(in srgb,var(--st-a) 16%,transparent),transparent 70%),
  radial-gradient(ellipse 120% 60% at 50% 115%,color-mix(in srgb,var(--st-b) 22%,transparent),transparent 60%),
  radial-gradient(ellipse 120% 60% at 50% -15%,color-mix(in srgb,var(--st-c) 16%,transparent),transparent 62%),
  linear-gradient(180deg,var(--st-deep),var(--st-floor) 48%,var(--st-deep));
 border:1px solid color-mix(in srgb,var(--st-a) 45%,#20303a);
 box-shadow:0 0 0 1px #0008 inset,0 18px 50px -20px color-mix(in srgb,var(--st-a) 40%,transparent),0 0 60px -30px var(--st-c)}
#theater .st-stage{--st-a:#91e6d4;--st-b:#a5bfff;--st-c:#ffd086;--st-floor:#14202a}
#playPage .st-stage{--st-a:#84ebcb;--st-b:#a5bfff;--st-c:#ff8fc8;--st-floor:#10272b}
.st-stage>.p-side,.st-stage>.p-divider{position:relative;z-index:2}

/* Lighting rig: wash, moving beams, truss bulbs, LED floor, crowd glowsticks and haze. */
.st-rig{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.st-rig>i{position:absolute;display:block}
.st-wash{inset:0;background:conic-gradient(from 200deg at 50% 50%,transparent,color-mix(in srgb,var(--st-a) 10%,transparent),transparent 30%,color-mix(in srgb,var(--st-c) 9%,transparent),transparent 60%,color-mix(in srgb,var(--st-b) 10%,transparent),transparent);animation:stWash 14s linear infinite;mix-blend-mode:screen;opacity:.8}
.st-beam{top:-12%;width:26%;height:135%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(2px);
 background:linear-gradient(180deg,color-mix(in srgb,var(--beam) 60%,transparent),color-mix(in srgb,var(--beam) 14%,transparent) 55%,transparent 85%);
 clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.55}
.st-b1{--beam:var(--st-a);left:2%;animation:stSwayL 7s ease-in-out infinite}
.st-b2{--beam:var(--st-c);left:24%;animation:stSwayR 9s ease-in-out infinite;opacity:.42}
.st-b3{--beam:var(--st-b);left:50%;animation:stSwayL 8s ease-in-out -3s infinite;opacity:.42}
.st-b4{--beam:var(--st-a);left:72%;animation:stSwayR 6.5s ease-in-out -2s infinite}
.st-truss{left:0;right:0;height:14px;top:0;background:
  radial-gradient(circle at 50% 60%,#fff 0 1.4px,color-mix(in srgb,var(--st-a) 90%,#fff) 2.2px,transparent 5px) 0 0/34px 14px repeat-x,
  linear-gradient(#1a1d2b,#0c0f19);border-bottom:1px solid #ffffff14;animation:stBulbs 2.4s steps(2) infinite}
.st-floor{left:-10%;right:-10%;top:42%;height:16%;opacity:.35;
 background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--st-a) 55%,transparent) 0 1px,transparent 1px 46px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--st-b) 45%,transparent) 0 1px,transparent 1px 16px);
 transform:perspective(380px) rotateX(58deg);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.st-crowd{left:0;right:0;bottom:0;height:26px;opacity:.85;
 background:radial-gradient(ellipse 3px 9px at 50% 60%,var(--st-c) 60%,transparent 70%) 0 0/23px 26px repeat-x,
  radial-gradient(ellipse 3px 9px at 50% 55%,var(--st-a) 60%,transparent 70%) 11px 4px/29px 26px repeat-x,
  radial-gradient(ellipse 3px 9px at 50% 65%,var(--st-b) 60%,transparent 70%) 6px 2px/37px 26px repeat-x,
  linear-gradient(transparent,#000a);filter:drop-shadow(0 0 4px var(--st-c));animation:stCrowd 1.1s ease-in-out infinite alternate;
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.st-haze{inset:0;background:radial-gradient(ellipse 50% 30% at 30% 70%,#ffffff0d,transparent 70%),radial-gradient(ellipse 40% 25% at 75% 30%,#ffffff0b,transparent 70%);animation:stHaze 18s ease-in-out infinite alternate}
/* Keep looping lights on one page-wide clock (--st-t is set by Showtime.board) so re-renders don't restart them. */
.st-stage .st-wash,.st-stage .st-b1,.st-stage .st-b2,.st-stage .st-truss,.st-stage .st-crowd,.st-stage .st-haze,
.st-stage.st-stage .p-center,.st-stage.st-stage .p-divider b,.st-stage img[data-foil]{animation-delay:var(--st-t,0s)}
.st-stage .st-b3{animation-delay:calc(var(--st-t,0s) - 3s)}
.st-stage .st-b4{animation-delay:calc(var(--st-t,0s) - 2s)}
@keyframes stWash{to{transform:rotate(360deg) scale(1.4)}}
@keyframes stSwayL{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(14deg)}}
@keyframes stSwayR{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-16deg)}}
@keyframes stBulbs{50%{filter:brightness(1.5) hue-rotate(40deg)}}
@keyframes stCrowd{to{transform:translateY(-4px) skewX(-6deg)}}
@keyframes stHaze{to{transform:translate(4%,-3%) scale(1.1)}}

/* Stage zones: glass risers with neon trim; the Center gets a spotlight pool. */
.st-stage .p-side{padding-bottom:4px}
.st-stage .p-side header{background:linear-gradient(90deg,color-mix(in srgb,var(--team,var(--st-a)) 18%,transparent),transparent 70%);border-radius:8px}
.st-stage .p-side header>b{color:var(--team,var(--st-a));text-shadow:0 0 12px color-mix(in srgb,var(--team,var(--st-a)) 70%,transparent);letter-spacing:.3px}
.st-stage .p-zone{border:1px solid color-mix(in srgb,var(--team,var(--st-a)) 38%,transparent);
 background:linear-gradient(180deg,#ffffff0b,#00000033);backdrop-filter:blur(1.5px);
 box-shadow:0 0 0 1px #0006 inset,0 0 18px -8px color-mix(in srgb,var(--team,var(--st-a)) 70%,transparent)}
.st-stage .p-zone-label{color:color-mix(in srgb,var(--team,var(--st-a)) 75%,#fff);text-shadow:0 0 8px color-mix(in srgb,var(--team,var(--st-a)) 60%,transparent)}
.st-stage .p-center{background:radial-gradient(ellipse 55% 70% at 50% 58%,color-mix(in srgb,#fff 16%,var(--team,var(--st-a)) 18%),transparent 72%),linear-gradient(180deg,#ffffff0d,#00000033);
 border-color:color-mix(in srgb,var(--team,var(--st-a)) 70%,transparent);animation:stPool 4s ease-in-out infinite}
.st-stage .p-collab{background:radial-gradient(ellipse 50% 60% at 50% 60%,color-mix(in srgb,var(--st-c) 12%,transparent),transparent 72%),linear-gradient(180deg,#ffffff0b,#00000033)}
@keyframes stPool{50%{box-shadow:0 0 0 1px #0006 inset,0 0 30px -6px color-mix(in srgb,var(--team,var(--st-a)) 80%,transparent)}}
.st-stage .p-empty{color:color-mix(in srgb,var(--team,var(--st-a)) 45%,#6c7a85)}
.st-stage .p-divider{border:0;margin:8px 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--st-a) 22%,transparent) 20%,color-mix(in srgb,var(--st-c) 28%,transparent) 50%,color-mix(in srgb,var(--st-b) 22%,transparent) 80%,transparent);
 box-shadow:0 1px 0 color-mix(in srgb,var(--st-a) 50%,transparent),0 -1px 0 color-mix(in srgb,var(--st-b) 50%,transparent);color:#eaf6f8;align-items:center;flex-wrap:wrap}
.st-stage .p-divider b{font-size:20px;font-weight:900;font-style:italic;letter-spacing:2px;background:linear-gradient(90deg,var(--st-a),#fff,var(--st-c));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px var(--st-c));animation:stVs 2.2s ease-in-out infinite}
@keyframes stVs{50%{filter:drop-shadow(0 0 16px var(--st-a));transform:scale(1.08)}}
.fit-table .st-stage .p-divider b{font-size:14px}

/* Cards on stage */
.st-stage .p-card{background:#0b1218;border-color:color-mix(in srgb,var(--team,var(--st-a)) 40%,#334);box-shadow:0 6px 14px -6px #000c,0 0 0 1px #0008;transition:box-shadow .2s,transform .2s}
.st-stage .p-card:hover{box-shadow:0 10px 22px -8px #000,0 0 16px -2px color-mix(in srgb,var(--team,var(--st-a)) 80%,transparent)}
.st-stage .p-center .p-card{box-shadow:0 10px 24px -8px #000,0 0 22px -6px color-mix(in srgb,var(--team,var(--st-a)) 85%,transparent)}
.st-stage .p-health-meter{background:#0a0f14}
.st-stage .p-health-meter i{background:linear-gradient(90deg,var(--team,var(--st-a)),color-mix(in srgb,var(--team,var(--st-a)) 50%,#fff));box-shadow:0 0 6px var(--team,var(--st-a));transition:width .6s ease}
.st-stage .st-low .p-health-meter i{background:linear-gradient(90deg,#ff5d73,#ffb36b);box-shadow:0 0 8px #ff5d73}
.st-stage .st-low>small{color:#ffb3bd}
.st-member.st-target>.p-card{outline:2px solid #ffd36e;outline-offset:2px;box-shadow:0 0 22px #ffd36e99}
.st-member.st-source>.p-card{outline:2px solid #9fe8ff;outline-offset:2px;box-shadow:0 0 22px #9fe8ff88}
.st-impact{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:3;font:900 18px/1 system-ui,sans-serif;color:#fff;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,#ff5d73,#ff9b5e);box-shadow:0 0 12px #ff5d73;pointer-events:none;white-space:nowrap}
.st-member.st-moving{z-index:5;position:relative}
.st-member.st-fading{animation:stFade 1s ease forwards}
@keyframes stFade{to{opacity:.25;filter:grayscale(1) blur(1px)}}
.st-hit{animation:stHit .65s cubic-bezier(.36,.07,.19,.97)}
@keyframes stHit{0%{filter:brightness(2.2) saturate(1.4)}15%{transform:translate(-7px,2px) rotate(-2deg)}30%{transform:translate(6px,-2px) rotate(2deg)}45%{transform:translate(-4px,1px)}60%{transform:translate(3px,0)}100%{transform:none;filter:none}}
.st-stage .p-counter-life.st-hit .p-counter-value{color:#ff8fa0;text-shadow:0 0 14px #ff5d73}

/* Theater card sizes when Fit board is off */
#board[data-size=compact] .st-stage .p-member,#board[data-size=compact] .st-stage .p-empty{max-width:92px}
#board[data-size=compact] .st-stage .p-front .p-empty{width:92px}
#board[data-size=xl] .st-stage .p-member,#board[data-size=xl] .st-stage .p-empty{max-width:158px}
#board[data-size=xl] .st-stage .p-front .p-empty{width:158px}
#board[data-size=xl] .st-stage .p-hand .p-card{width:150px;min-width:150px}
#board .p-hand{position:relative}
.p-hand .hand-switch,.p-hidden-hand .hand-switch{margin-left:10px;font-size:10px;padding:2px 8px}

/* Shared basics for pages that do not load the replay theater stylesheet (Live Training). */
.st-stage .numbers{display:flex;align-items:center;gap:3px;flex-wrap:wrap;justify-content:space-between;font-size:10px;color:#adbac5}
.st-stage .meter{display:block;height:4px;border-radius:3px;overflow:hidden}
.st-stage .meter i{display:block;height:100%}

/* ---------- Holo foil ---------- */
img.st-art{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform-style:preserve-3d;will-change:auto}
img.st-art.st-tilting{transition:transform .06s linear,box-shadow .2s;position:relative;z-index:4;box-shadow:0 18px 30px -10px #000c,0 0 0 1px #fff3}
img[data-foil]{box-shadow:0 0 0 1px color-mix(in srgb,var(--foil-edge,#ffe7a8) 70%,transparent),0 0 10px -3px var(--foil-edge,#ffe7a8)}
img[data-foil=r],img[data-foil=rr]{--foil-edge:#b9e6ff}
img[data-foil=sr],img[data-foil=hr],img[data-foil=sy]{--foil-edge:#ffd36e}
img[data-foil=ur],img[data-foil=sec]{--foil-edge:#ff9be0;animation:stFoilIdle 5s ease-in-out infinite}
img[data-foil=osr]{--foil-edge:#ffe28a;animation:stFoilIdle 6s ease-in-out infinite}
img[data-foil=our]{--foil-edge:#c9a2ff;animation:stFoilIdle 4.5s ease-in-out infinite}
@keyframes stFoilIdle{0%,100%{filter:none}50%{filter:brightness(1.12) saturate(1.2)}}
.st-glare{position:fixed;z-index:80;pointer-events:none;display:block;overflow:hidden;mix-blend-mode:soft-light;
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffffb0,#ffffff30 22%,transparent 55%);opacity:.9}
.st-glare.foil{mix-blend-mode:color-dodge;opacity:.75;
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffffc8,transparent 40%),
  repeating-linear-gradient(115deg,#ff8fc84d 0%,#ffd36e4d 6%,#8fffd64d 12%,#9fe8ff4d 18%,#c9a2ff4d 24%,#ff8fc84d 30%);
 background-size:100% 100%,260% 260%;background-position:center,var(--pos,50%) var(--pos,50%)}
.st-glare.foil-r,.st-glare.foil-rr{opacity:.45;background:radial-gradient(circle at var(--mx) var(--my),#ffffffb0,transparent 42%),linear-gradient(115deg,transparent 30%,#b9e6ff66 calc(var(--pos) - 10%),#ffffff88 var(--pos),#b9e6ff66 calc(var(--pos) + 10%),transparent 70%)}
.st-glare.foil-sr,.st-glare.foil-hr,.st-glare.foil-sy{opacity:.7}
.st-glare.foil-ur,.st-glare.foil-sec{opacity:.85;filter:saturate(1.4)}
.st-glare.foil-osr{opacity:.85;background:radial-gradient(circle at var(--mx) var(--my),#fff7d6e0,transparent 38%),repeating-linear-gradient(115deg,#ffd36e66 0%,#fff3c066 5%,#ffb35e66 10%,#ffd36e66 15%);background-size:100% 100%,240% 240%;background-position:center,var(--pos) var(--pos)}
.st-glare.foil-our{opacity:.95;filter:saturate(1.6) contrast(1.1);background:radial-gradient(circle at var(--mx) var(--my),#ffffffe0,transparent 36%),repeating-conic-gradient(from calc(var(--hyp,0) * 720deg) at var(--mx) var(--my),#ff8fc855 0 8deg,#ffd36e55 8deg 16deg,#8fffd655 16deg 24deg,#9fe8ff55 24deg 32deg,#c9a2ff55 32deg 40deg)}
.st-glare.foil::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(100% - var(--mx)) calc(100% - var(--my)),#ffffff66 0 1px,transparent 2px) 0 0/19px 23px,radial-gradient(circle,#ffffff99 0 1px,transparent 1.5px) 7px 9px/31px 29px;opacity:calc(.25 + var(--hyp,0));mix-blend-mode:overlay}

/* ---------- Effect layer ---------- */
.st-fxhost{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.st-fxhost>*{position:fixed}
.st-spark{display:block;font-style:normal;line-height:1;text-shadow:0 0 8px currentColor,0 0 2px #fff;will-change:transform,opacity}
.st-ring{border-radius:50%;border:3px solid var(--ring);box-shadow:0 0 18px var(--ring),inset 0 0 18px var(--ring);animation:stRing .7s ease-out forwards}
.st-ring.bloom{border-width:4px}
@keyframes stRing{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}
.st-dmg{transform:translate(-50%,-50%);font:900 34px/1 "Segoe UI",system-ui,sans-serif;color:#fff;-webkit-text-stroke:2px #b3122e;paint-order:stroke fill;text-shadow:0 0 14px #ff5d73,0 3px 0 #6d0b1b;animation:stDmg 1.3s cubic-bezier(.2,.8,.3,1) forwards}
.st-dmg.special{-webkit-text-stroke-color:#5d21b3;text-shadow:0 0 14px #c48bff,0 3px 0 #2b0b6d}
@keyframes stDmg{0%{transform:translate(-50%,-30%) scale(.3);opacity:0}18%{transform:translate(-50%,-70%) scale(1.35);opacity:1}40%{transform:translate(-50%,-85%) scale(1)}100%{transform:translate(-50%,-190%) scale(.9);opacity:0}}
.st-ghost{border-radius:6px;overflow:hidden;animation:stGhost 1.5s ease-in forwards}
.st-ghost img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes stGhost{0%{opacity:1;filter:none}25%{filter:brightness(1.8) saturate(.4);transform:scale(1.04)}100%{opacity:0;filter:grayscale(1) blur(6px) brightness(1.4);transform:translateY(-46px) scale(.82) rotate(-4deg)}}

/* LIVE START */
.st-livestart{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;animation:stLsIn .45s ease-out both}
.st-livestart.out{animation:stLsOut .45s ease-in forwards}
.st-ls-beams{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 50%,#ff8fc833,transparent 8%,#9fe8ff33 16%,transparent 24%,#fff3a133 32%,transparent 40%,#b8a0ff33 48%,transparent 56%,#8fffd633 64%,transparent 72%,#ff8fc833 80%,transparent 88%);animation:stSpin 3s linear infinite;mask-image:radial-gradient(circle,#000 10%,transparent 65%)}
.st-ls-word{position:relative;display:flex;gap:.35em;font:900 italic clamp(34px,calc(var(--w,100vw) * .11),120px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.04em}
.st-ls-word span{background:linear-gradient(100deg,#fff 0%,#ffd36e 25%,#ff8fc8 50%,#9fe8ff 75%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 18px #ff8fc8) drop-shadow(0 4px 0 #0008);animation:stShine 1.6s linear infinite,stPop .7s cubic-bezier(.2,1.6,.4,1) both}
.st-ls-word span+span{animation-delay:0s,.18s}
.st-livestart small{position:relative;max-width:92%;overflow-wrap:anywhere;font:700 13px/1.2 system-ui,sans-serif;letter-spacing:4px;text-transform:uppercase;color:#eaf6f8;text-shadow:0 0 10px #000}
@keyframes stLsIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
@keyframes stLsOut{to{opacity:0;transform:scale(1.15);filter:blur(6px)}}
@keyframes stPop{from{transform:scale(.2) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes stShine{to{background-position:-220% 0}}
@keyframes stSpin{to{transform:rotate(360deg)}}

/* Oshi / SP skill banner */
.st-skill{display:grid;place-items:center;background:radial-gradient(ellipse at center,#0009,transparent 70%);animation:stLsIn .3s ease-out both}
.st-skill.out{animation:stSkillOut .4s ease-in forwards}
.st-skill-band{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);width:min(94%,760px);padding:14px clamp(14px,3vw,34px);
 background:linear-gradient(100deg,#0c1424f0,#1d2140f2 50%,#0c1424f0);border-block:2px solid #9fe8ff;box-shadow:0 0 40px #9fe8ff55,0 0 0 1px #000;
 clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);animation:stBand .55s cubic-bezier(.2,1.2,.3,1) both}
.st-skill.sp .st-skill-band{border-color:#ffd36e;background:linear-gradient(100deg,#2a1406f2,#3d1236f2 50%,#2a1406f2);box-shadow:0 0 50px #ffd36e66,0 0 90px #ff8fc844}
.st-skill-card{flex:none;width:clamp(78px,10vw,130px);aspect-ratio:5/7;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #fff6,0 0 26px #9fe8ff;animation:stCardIn .6s cubic-bezier(.2,1.4,.3,1) both}
.st-skill.sp .st-skill-card{box-shadow:0 0 0 2px #ffe9a8,0 0 34px #ffd36e}
.st-skill-card img{width:100%;height:100%;object-fit:cover;display:block}
.st-skill-text{display:grid;gap:4px;min-width:0}
.st-skill-text small{font:800 12px/1 system-ui,sans-serif;letter-spacing:3px;color:#9fe8ff}
.st-skill.sp .st-skill-text small{color:#ffd36e}
.st-skill-text strong{font:900 italic clamp(22px,3.6vw,46px)/1.05 "Segoe UI",system-ui,sans-serif;color:#fff;text-shadow:0 0 18px #9fe8ff,0 3px 0 #000a;overflow-wrap:anywhere}
.st-skill.sp .st-skill-text strong{background:linear-gradient(100deg,#fff,#ffd36e,#ff8fc8,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px #ffd36e);animation:stShine 1.8s linear infinite}
.st-skill-text span{font-size:13px;color:#c9d6e2}
@keyframes stBand{from{transform:translateX(-30%) skewX(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes stCardIn{from{transform:translateY(30px) rotate(-14deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes stSkillOut{to{opacity:0;transform:translateX(12%)}}

/* Victory */
.st-victory{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(ellipse at center,#141a35e6,#03050bf2 70%);animation:stLsIn .5s ease-out both;cursor:pointer}
.st-v-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg,#ffd36e1f 0 6deg,transparent 6deg 18deg);animation:stSpin 26s linear infinite;mask-image:radial-gradient(circle,#000 15%,transparent 60%)}
.st-victory.lose .st-v-rays{background:repeating-conic-gradient(from 0deg,#9fb4ff14 0 6deg,transparent 6deg 18deg)}
.st-v-panel{position:relative;display:flex;align-items:center;gap:clamp(18px,4vw,48px);padding:24px;max-width:min(92vw,900px);cursor:default}
.st-v-card{flex:none;width:clamp(150px,22vw,280px);aspect-ratio:5/7;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px #ffe9a8,0 0 60px #ffd36e,0 30px 60px -20px #000;animation:stVCard 1s cubic-bezier(.2,1.3,.3,1) both,stVFloat 4s ease-in-out 1s infinite}
.st-victory.lose .st-v-card{box-shadow:0 0 0 3px #a9b8e6,0 0 50px #7d8fd6}
.st-v-card img{width:100%;height:100%;object-fit:cover;display:block}
.st-v-text{display:grid;gap:8px;min-width:0}
.st-v-text small{font:800 clamp(14px,1.6vw,20px)/1.2 system-ui,sans-serif;letter-spacing:2px;color:#cfe9ff;overflow-wrap:anywhere}
.st-v-text strong{font:900 italic clamp(44px,8vw,104px)/.95 "Segoe UI",system-ui,sans-serif;background:linear-gradient(100deg,#fff 0%,#ffd36e 30%,#ff8fc8 60%,#9fe8ff 85%,#fff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #ffd36e88) drop-shadow(0 5px 0 #000a);animation:stShine 2s linear infinite,stPop .8s cubic-bezier(.2,1.6,.4,1) .2s both}
.st-victory.lose .st-v-text strong,.st-victory.draw .st-v-text strong{background:linear-gradient(100deg,#e7ecff,#9fb4ff,#e7ecff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.st-v-text p{margin:0;color:#d5dfea;font-size:15px}
.st-v-close{justify-self:start;margin-top:8px;padding:9px 22px;border-radius:999px;font-weight:750;border:1px solid #ffe9a8;background:#ffd36e22;color:#fff}
@keyframes stVCard{from{transform:translateY(80px) rotateY(180deg) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes stVFloat{50%{transform:translateY(-10px) rotate(1deg)}}
@media(max-width:600px){.st-v-panel{flex-direction:column;text-align:center}.st-v-close{justify-self:center}.st-skill-band{flex-direction:row}}

/* Card library and deck tiles share the foil hover */
#gallery .gallerycard{transition:transform .25s,box-shadow .25s}
#gallery .gallerycard:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px #000,0 0 18px -6px var(--mint,#91e6d4)}
.lib-hit{display:block;font-style:normal;font-size:10.5px;line-height:1.3;color:#cfe9e2;margin-top:3px;max-height:4em;overflow:hidden}
.lib-hit mark{background:#91e6d433;color:#fff;border-radius:2px;padding:0 1px}
.lib-rarity{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.5px;padding:0 5px;border-radius:999px;margin-left:4px;border:1px solid #ffffff33;color:#e9eef2;vertical-align:1px}
.lib-rarity.foil{border-color:#ffd36e;color:#ffe9a8;background:linear-gradient(90deg,#ffd36e22,#ff8fc822,#9fe8ff22)}
.lib-chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.lib-chips button{font-size:11px;padding:3px 9px;border-radius:999px}
.lib-chips button[aria-pressed=true]{border-color:var(--mint,#91e6d4);color:var(--mint,#91e6d4);background:#1d3a3a}
.lib-help{font-size:11px;color:var(--muted,#adbac5);margin:0 0 6px}

@media (prefers-reduced-motion:reduce){
 .st-rig>i,.st-stage .p-center,.st-stage .p-divider b,img[data-foil]{animation:none!important}
 .st-ls-word span,.st-skill-band,.st-skill-card,.st-v-card,.st-v-text strong{animation:none!important}
}
.st-pilot{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--team,#84ebcb) 60%,transparent);color:var(--team,#84ebcb);background:#0006;white-space:nowrap}
.st-pilot.learner{background:#173029;font-weight:700}
.st-verdict{font-size:10px;font-weight:800;letter-spacing:1px;padding:2px 9px;border-radius:999px;text-transform:uppercase}
.st-verdict.winner{background:linear-gradient(90deg,#ffd36e,#ff8fc8);color:#2a1406;box-shadow:0 0 12px #ffd36e88}
.st-verdict.loss{background:#ffffff1a;color:#c9d6e2}.st-verdict.draw{background:#9fb4ff33;color:#e7ecff}

/* Fit board: give the space to card art, keep the furniture compact. */
.st-stage{padding-top:18px}
.fit-table .st-stage{padding:16px 6px 10px}
.fit-table .st-stage .p-side header{padding:1px 4px;min-height:0;line-height:16px}
.fit-table .st-stage .p-counter .p-counter-value{font-size:19px}
.fit-table .st-stage .p-counter .p-counter-label{font-size:9px;line-height:10px}
.fit-table .st-stage .p-supply-counts .p-resource-stack{--back-width:15px;--back-height:21px;--pile-density:.45}
.fit-table .st-stage .p-supply-counts .p-resource-back>span{font-size:10px}
.fit-table .st-stage .p-counter-power .p-resource-stack{--back-width:18px;--back-height:25px;--pile-density:.55}
.fit-table .st-stage .p-counter-power .p-resource-back>span{font-size:12px}
.st-stage .p-hand{position:relative}
.st-stage .p-hand>.hand-switch{position:absolute;right:6px;top:3px;margin:0}
.fit-table .st-stage .p-hand{padding:1px 5px;margin:2px 0 0}
.fit-table .st-stage .p-hand>b{font-size:9px;line-height:11px}
.fit-table .st-stage .p-hand>.hand-switch{font-size:9px;padding:0 6px;top:1px}
.fit-table .st-stage .p-hand>div{padding:1px 0}
.fit-table .st-stage .p-hand .p-card{width:calc(var(--fit-unit) * .62);min-width:calc(var(--fit-unit) * .62)}
.fit-table .st-stage .p-hidden-hand{margin:1px}
.fit-table .st-stage .p-divider{margin:2px 0;padding:1px 0}
.fit-table .st-stage .p-front{margin:2px 0}
.fit-table .st-stage .p-zone{padding-top:12px}