/* ---------- Animation studio (step 5) ---------- */
/* inventory-style layout: tools column | big preview | customization grid */
.anim-studio {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr) minmax(200px, 1.3fr);
  gap: 16px;
  min-height: 460px;
}
.anim-col {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.08);
}
.anim-col h3 {
  margin: 0 0 4px;
  font: 700 1.15rem "Barlow Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #22d3ee; text-align: center;
}
.anim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.anim-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 8px;
  font: 600 0.95rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.anim-grid .anim-box { min-height: 96px; }
.anim-box span { font-size: 1.4rem; line-height: 1; }
.anim-box:hover:not(:disabled), .anim-box:focus-visible {
  border-color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); outline: none;
}
.anim-box:disabled { cursor: default; opacity: 0.5; }
.anim-empty { font-style: italic; color: #64748b; }
.anim-locked { background: rgba(127, 29, 29, 0.35); }
.anim-box[aria-pressed="true"] { border-color: #22d3ee; background: rgba(34, 211, 238, 0.14); color: #fff; }

/* right panel: option sections for the picked part */
.anim-sections { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding-right: 2px; }
.anim-sec { padding: 8px 10px 10px; background: rgba(2, 6, 23, 0.55); border: 1px solid rgba(34, 211, 238, 0.18); border-radius: 8px; }
.anim-sec[hidden] { display: none; }
.anim-sec h4 {
  margin: 0 0 6px; font: 700 0.85rem "Barlow Condensed", sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgba(34, 211, 238, 0.85);
}
.anim-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.anim-chip {
  padding: 4px 9px; font: 600 0.8rem "Barlow", sans-serif; color: #cbd5e1;
  background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 999px; cursor: pointer;
}
.anim-chip:hover { border-color: #22d3ee; color: #fff; }
.anim-chip[aria-pressed="true"] { background: #22d3ee; border-color: #22d3ee; color: #0b1220; }
.anim-swatches .anim-chip { width: 24px; height: 24px; padding: 0; background: var(--sw); border-color: rgba(255, 255, 255, 0.2); }
.anim-swatches .anim-chip[aria-pressed="true"] { background: var(--sw); box-shadow: 0 0 0 2px #0b1220, 0 0 0 4px #22d3ee; }
.anim-range { display: flex; align-items: center; gap: 8px; margin-top: 7px; font: 500 0.8rem "Barlow", sans-serif; color: #94a3b8; }
.anim-range input { flex: 1; accent-color: #22d3ee; min-width: 0; }
/* sub-groups inside a section (Glow / Drop shadow / Oval shadow …): a thin line + a little room so each block reads on
   its own. Any chip row that follows sliders starts a new block too, so every section gets split the same way */
.anim-group, .anim-sec > .anim-range + .anim-chips, .anim-sec > .anim-range + .anim-group {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(34, 211, 238, 0.18);
}
.anim-group[hidden], .anim-sec > .anim-chips[hidden] { display: none; }
.anim-sub { margin: 0 0 6px; font: 700 0.72rem "Barlow Condensed", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #7dd3e6; }
.anim-text { width: 100%; padding: 5px 8px; font: 600 0.9rem "Barlow", sans-serif; color: #e2e8f0; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 6px; }
.anim-grid.anim-slots { margin-bottom: 7px; }
.anim-grid.anim-slots .anim-box { min-height: 48px; border-color: var(--slot); box-shadow: inset 0 0 10px color-mix(in srgb, var(--slot) 30%, transparent); }
.anim-preview {
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 85%, rgba(34, 211, 238, 0.25), transparent 60%), rgba(2, 6, 23, 0.6);
  border: 1px dashed rgba(34, 211, 238, 0.3);
  font: 600 1.3rem "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(226, 232, 240, 0.45);
}

/* ---------- 3D: side panels angled toward the centre, curved preview, motion ---------- */
/* animations restart each time the step opens (.hidden = display none) */
@media (min-width: 761px) {
  .anim-studio { perspective: 1400px; perspective-origin: 50% 40%; }
  .anim-col { transform-style: preserve-3d; }
  /* whole layout drifts; each panel bobs on its own period so they stay out of sync */
  /* (no preserve-3d here: the angled panels would sink behind this plane and stop taking clicks) */
  .anim-studio { animation: anim-drift 11s ease-in-out infinite; }
  .anim-tools { transform: rotateY(18deg); transform-origin: left center; animation: anim-in-left 0.6s cubic-bezier(.2,.8,.2,1) both, anim-bob-left 5.3s 0.6s ease-in-out infinite; }
  .anim-custom { transform: rotateY(-18deg); transform-origin: right center; animation: anim-in-right 0.6s cubic-bezier(.2,.8,.2,1) both, anim-bob-right 6.1s 0.6s ease-in-out infinite; }
  .anim-preview {
    transform: rotateX(6deg); transform-origin: center bottom;
    border-radius: 50% 50% 12px 12px / 8% 8% 12px 12px; /* slight curved top like the reference */
    animation: anim-in-up 0.7s 0.1s cubic-bezier(.2,.8,.2,1) both, anim-glow 4s 0.8s ease-in-out infinite, anim-bob-mid 4.4s 0.8s ease-in-out infinite;
  }
  .anim-preview > span { animation: anim-float 3.5s ease-in-out infinite; }
  .anim-box { transition: transform 0.18s, border-color 0.15s, box-shadow 0.15s; }
  .anim-box:hover:not(:disabled) { transform: translateZ(18px) rotateY(var(--tilt, 0deg)) scale(1.03); }
  .anim-tools .anim-box { --tilt: -6deg; }
  .anim-custom .anim-box { --tilt: 6deg; }
}
@keyframes anim-in-left { from { opacity: 0; transform: translateX(-60px) rotateY(55deg); } }
@keyframes anim-in-right { from { opacity: 0; transform: translateX(60px) rotateY(-55deg); } }
@keyframes anim-in-up { from { opacity: 0; transform: translateY(30px) rotateX(20deg) scale(0.95); } }
@keyframes anim-glow {
  50% { box-shadow: 0 0 34px rgba(34, 211, 238, 0.28), inset 0 -30px 60px rgba(34, 211, 238, 0.12); }
}
@keyframes anim-float { 50% { transform: translateY(-8px); } }
@keyframes anim-drift {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0); }
  33% { transform: rotateX(2deg) rotateY(-2.5deg) translateY(-14px); }
  66% { transform: rotateX(-1.5deg) rotateY(2deg) translateY(8px); }
}
/* panels hover in the air: up/down with a soft shadow that shrinks as they rise */
@keyframes anim-bob-left {
  0%, 100% { transform: rotateY(18deg) translateY(0); box-shadow: 0 26px 30px -18px rgba(0, 0, 0, 0.7); }
  50% { transform: rotateY(22deg) translateY(-22px) translateZ(20px); box-shadow: 0 50px 40px -30px rgba(0, 0, 0, 0.45); }
}
@keyframes anim-bob-right {
  0%, 100% { transform: rotateY(-18deg) translateY(0); box-shadow: 0 26px 30px -18px rgba(0, 0, 0, 0.7); }
  50% { transform: rotateY(-22deg) translateY(-18px) translateZ(20px); box-shadow: 0 50px 40px -30px rgba(0, 0, 0, 0.45); }
}
@keyframes anim-bob-mid {
  50% { transform: rotateX(6deg) translateY(-12px); }
}
@keyframes anim-bob-flat { 50% { transform: translateY(-10px); } }
/* phone: no 3D, just a gentle float, each block on its own beat */
@media (max-width: 760px) {
  .anim-col, .anim-preview { animation: anim-bob-flat 5s ease-in-out infinite; }
  .anim-custom { animation-duration: 6s; animation-delay: -2s; }
  .anim-preview { animation-duration: 4.4s; animation-delay: -1s; }
}
/* reduced motion: no slide-in or hover tilt, but keep a slow, small float (owner wants it floating) */
@media (prefers-reduced-motion: reduce) {
  .anim-studio, .anim-preview > span { animation: none !important; }
  .anim-col, .anim-preview { animation: anim-bob-flat 8s ease-in-out infinite !important; }
  .anim-tools, .anim-custom { transform: none; }
  .anim-custom { animation-delay: -3s !important; }
  .anim-preview { animation-delay: -5s !important; }
  .anim-box { transition: none; }
  .anim-box:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .anim-tools { animation-name: anim-bob-left !important; }
  .anim-custom { animation-name: anim-bob-right !important; }
  .anim-preview { animation-name: anim-bob-mid !important; }
}

/* ---------- Weapon card (anim-studio.js "Weapon card preview") ---------- */
/* per part: --c color, --g glow px, --dur / --delay intro timing */
.anim-preview > span { display: none; }
.wc { position: relative; width: min(92%, 460px); padding: 8px 0 34px; text-align: center; }
.wc-title {
  font: italic 800 30px "Barlow Condensed", sans-serif; color: var(--c); line-height: 1.1; margin-bottom: 6px;
  text-shadow: 0 2px 0 #000, 0 0 var(--g) var(--c);
}
.wc-card { position: relative; aspect-ratio: 16 / 9; }
.wc-in { --g: 0px; }
.wc-fill, .wc-glowwrap, .wc-gunwrap, .wc-slotswrap, .wc-ammowrap { position: absolute; }
.wc-fill { inset: 0; }
.wc-look { width: 100%; height: 100%; transition: transform 0.35s; }
.wc-bg {
  position: relative; border: 2px solid var(--c); border-radius: 6px;
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,calc(var(--pat) * 0.12)) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #0b0b1e), #0a0a18 70%);
  box-shadow: 0 0 var(--g) var(--c), inset 0 0 calc(var(--g) * 1.5) color-mix(in srgb, var(--c) 40%, transparent);
}
.wc-bg[data-frame="tech"] { border-radius: 2px; clip-path: polygon(0 0, 92% 0, 100% 10%, 100% 100%, 8% 100%, 0 90%); }
.wc-bg[data-frame="tech"] i { position: absolute; height: 2px; background: var(--c); }
.wc-bg[data-frame="tech"] i:first-child { top: 6px; left: 6px; width: 30%; }
.wc-bg[data-frame="tech"] i:last-child { bottom: 6px; right: 6px; width: 22%; }
.wc-bg[data-frame="rounded"] { border-radius: 18px; }
.wc-bg[data-frame="none"] { border-color: transparent; background: none; box-shadow: none; }
.wc-glowwrap { left: 25%; top: 8%; width: 50%; height: 60%; pointer-events: none; }
.wc-glow {
  border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent);
  opacity: calc(var(--g) / 24px * 0.9); transform: scale(var(--gs, 1)) !important; filter: blur(10px);
}
.wc-gunwrap { left: 18%; top: 10%; width: 64%; height: 55%; }
.wc-gunwrap .wc-look { display: flex; align-items: center; justify-content: center; }
.wc-spin { width: 100%; filter: drop-shadow(0 0 var(--g) var(--sgc, var(--c))); }
.wc-gun { display: block; width: 100%; height: auto; }
.wc-s-turntable { animation: wc-turn var(--spd) linear infinite; }
.wc-s-spinonce { animation: wc-turn var(--spd) cubic-bezier(.3,.7,.3,1) 1 calc(var(--delay, 0s) + 0.3s); }
.wc-s-sway { animation: wc-sway var(--spd) ease-in-out infinite; }
.wc-s-off { animation: none; }
@keyframes wc-turn { to { transform: rotateY(360deg); } }
@keyframes wc-sway { 0%, 100% { transform: rotateY(-25deg); } 50% { transform: rotateY(25deg); } }
.wc-slotswrap { left: 0; right: 0; bottom: 20%; height: 18%; }
.wc-slots { display: flex; justify-content: center; gap: 8px; }
.wc-slots b {
  height: 100%; aspect-ratio: 1; border: 2px solid var(--slot); border-radius: 4px;
  background: color-mix(in srgb, var(--slot) 18%, #0b0b1e);
  box-shadow: 0 0 var(--g) var(--slot), inset 0 0 8px color-mix(in srgb, var(--c) 50%, transparent);
}
.wc-slots b[hidden] { display: none; }
/* gun footage with parts going on (Bobcat attach): a slot waits for its part, then snaps on */
.wc-slots b { transition: scale .3s cubic-bezier(.3, 1.7, .5, 1); }
.wc-slots b.wc-wait { visibility: hidden; scale: .3; transition: none; }
.wc-ammowrap { left: 3%; right: 3%; bottom: 4%; height: 12%; }
.wc-ammo {
  display: flex; justify-content: space-between; align-items: center; padding: 0 8px;
  font: 600 13px "Barlow", sans-serif; color: var(--c); border-top: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.wc-ammo em { font-style: normal; }
.wc-ammo[hidden] { display: none; }
.wc-replay {
  position: absolute; right: 0; bottom: 0; padding: 4px 10px; font: 600 0.8rem "Barlow", sans-serif;
  color: #0b1220; background: #22d3ee; border: 0; border-radius: 999px; cursor: pointer;
}
/* intros (restarted by anim-studio.js intro()) */
.wc-fade { animation: wc-fade var(--dur) ease both var(--delay); }
.wc-slide { animation: wc-slide var(--dur) cubic-bezier(.2,.8,.2,1) both var(--delay); }
.wc-pop:not(.wc-slotswrap) { animation: wc-pop var(--dur) cubic-bezier(.3,1.6,.5,1) both var(--delay); }
.wc-spinin { animation: wc-spinin calc(var(--dur) * 1.6) cubic-bezier(.2,.8,.2,1) both var(--delay); }
.wc-draw { animation: wc-draw calc(var(--dur) * 1.4) ease-out both var(--delay); }
.wc-bloom { animation: wc-bloom calc(var(--dur) * 1.4) cubic-bezier(.2,.8,.3,1) both var(--delay); }
@keyframes wc-fade { from { opacity: 0; } }
@keyframes wc-bloom { from { opacity: 0; transform: scale(0.4); } } /* glow only: on .wc-glowwrap, the blur + --gs scale stay on .wc-glow */
@keyframes wc-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes wc-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes wc-spinin { from { opacity: 0; transform: rotate(-200deg) scale(0.2); } }
@keyframes wc-draw { from { clip-path: inset(-60% 100% -60% -60%); } to { clip-path: inset(-60%); } } /* ends wider than the card: inset(0) held by `both` cut off the glow / shadow */
/* ---------- 3D intros ---------- (lengths × anim-studio.js LONGER) */
/* Real springs (CSS linear() easing, sampled from a damped spring): the motion overshoots and settles smoothly instead
   of stopping dead. Opacity rides its own quick fade (wc-in3d-fade) so the spring doesn't flicker it. */
.wc-flip, .wc-swing, .wc-fly3d, .wc-tumble, .wc-door {
  --spring: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.6%, 0.43 4.3%, 0.668 6.1%, 0.857 7.9%, 0.99 9.8%, 1.068 11.7%, 1.1 13.5%, 1.1 15.4%,
    1.079 17.4%, 1.05 19.4%, 1.019 21.6%, 0.996 24.2%, 0.984 26.8%, 0.982 30%, 0.989 34.5%, 0.999 40.4%, 1.004 47.7%, 1.003 58.6%, 1);
  --spring-bouncy: linear(0, 0.03 1%, 0.12 2.2%, 0.5 5.4%, 0.84 8.4%, 1.1 11.5%, 1.24 14.6%, 1.26 16.9%, 1.2 19.6%, 1.06 24.2%,
    0.96 28.4%, 0.92 31.5%, 0.94 35.4%, 1.02 42%, 1.04 46.5%, 1.02 52.8%, 0.995 60.5%, 0.99 66%, 1.002 77%, 1);
  --spring-soft: linear(0, 0.02 1%, 0.1 3%, 0.33 7%, 0.6 12%, 0.82 18%, 0.94 24%, 1.01 31%, 1.03 37%, 1.025 44%, 1.008 56%, 0.999 70%, 1);
  transform-style: preserve-3d; will-change: transform, opacity;
}
.wc-flip { animation: wc-flip calc(var(--dur) * 1.3) var(--spring) both var(--delay), wc-in3d-fade calc(var(--dur) * 0.45) ease-out both var(--delay); }
.wc-swing { transform-origin: 50% 0; animation: wc-swing calc(var(--dur) * 1.6) var(--spring-bouncy) both var(--delay), wc-in3d-fade calc(var(--dur) * 0.45) ease-out both var(--delay); }
.wc-fly3d { animation: wc-fly3d calc(var(--dur) * 1.4) var(--spring-soft) both var(--delay), wc-in3d-fade calc(var(--dur) * 0.6) ease-out both var(--delay); }
.wc-tumble { animation: wc-tumble calc(var(--dur) * 1.6) var(--spring) both var(--delay), wc-in3d-fade calc(var(--dur) * 0.5) ease-out both var(--delay); }
.wc-door { transform-origin: 0 50%; animation: wc-door calc(var(--dur) * 1.4) var(--spring-bouncy) both var(--delay), wc-in3d-fade calc(var(--dur) * 0.4) ease-out both var(--delay); }
@keyframes wc-in3d-fade { from { opacity: 0; } }
/* each starts somewhere in 3D and springs to rest; translateZ pulls it back in space so it grows as it arrives */
@keyframes wc-flip { from { transform: perspective(900px) translateZ(-260px) rotateY(-120deg) rotateZ(-6deg) scale(0.85); } }
@keyframes wc-swing { from { transform: perspective(800px) translateZ(-80px) rotateX(-105deg); } }
@keyframes wc-fly3d { from { transform: perspective(1000px) translate3d(-70%, 35%, -1100px) rotateY(70deg) rotateX(28deg) rotateZ(-12deg); } }
@keyframes wc-tumble { from { transform: perspective(900px) translateZ(-500px) rotateX(250deg) rotateY(-160deg) rotateZ(40deg) scale(0.4); } }
@keyframes wc-door { from { transform: perspective(800px) translateZ(-40px) rotateY(-118deg); } }
.wc-slots b:is(.wc-flip, .wc-swing, .wc-fly3d, .wc-tumble, .wc-door) {
  animation-name: var(--in3d), wc-in3d-fade, wc-float; animation-duration: calc(var(--dur) * 1.5), calc(var(--dur) * 0.45), 3.2s;
  animation-timing-function: var(--spring), ease-out, ease-in-out;
  animation-fill-mode: both, both, none; animation-iteration-count: 1, 1, infinite;
  animation-delay: calc(var(--delay) + var(--i) * var(--stag, 0.25s)), calc(var(--delay) + var(--i) * var(--stag, 0.25s)), calc(var(--i) * -0.8s);
}
.wc-slots b.wc-flip { --in3d: wc-flip; } .wc-slots b.wc-swing { --in3d: wc-swing; } .wc-slots b.wc-fly3d { --in3d: wc-fly3d; }
.wc-slots b.wc-tumble { --in3d: wc-tumble; } .wc-slots b.wc-door { --in3d: wc-door; }
/* ---------- FX intros ---------- glitch / electric / fire (best on the weapon; the video card draws its own versions) */
.wc-glitch { animation: wc-glitch calc(var(--dur) * 1.2) linear both var(--delay); }
@keyframes wc-glitch {
  0% { opacity: 0; clip-path: inset(42% 0 48% 0); transform: translate(-14px, 0) skewX(22deg); filter: drop-shadow(-7px 0 #ff00e6) drop-shadow(7px 0 #00f0ff); }
  8% { opacity: 1; clip-path: inset(8% 0 74% 0); transform: translate(12px, 0); }
  16% { clip-path: inset(66% 0 6% 0); transform: translate(-9px, 0) skewX(-16deg); }
  24% { opacity: 0.4; clip-path: inset(28% 0 34% 0); transform: translate(7px, 2px); }
  32% { opacity: 1; clip-path: inset(0 0 52% 0); transform: translate(-5px, 0) skewX(8deg); filter: drop-shadow(-5px 0 #ff00e6) drop-shadow(5px 0 #00f0ff); }
  44% { clip-path: inset(50% 0 0 0); transform: translate(4px, 0); }
  56% { clip-path: inset(0); transform: translate(-2px, 0); filter: drop-shadow(-3px 0 #ff00e6) drop-shadow(3px 0 #00f0ff); }
  70% { transform: translate(1px, 0); filter: drop-shadow(-1px 0 #ff00e6) drop-shadow(1px 0 #00f0ff); }
  100% { clip-path: inset(-60%); transform: none; filter: none; } /* not inset(0): it stays after the intro and crops the glow */
}
.wc-glitch { animation-timing-function: steps(1, end); } /* hard cuts between the slices, like a bad signal */
/* power-up: short flickers, then a cyan-hot glow that cools off (no drawn arcs: they read cartoony) */
.wc-electric { animation: wc-electric calc(var(--dur) * 1.6) cubic-bezier(.2, .7, .3, 1) both var(--delay); }
@keyframes wc-electric {
  0% { opacity: 0; filter: brightness(3) saturate(0) drop-shadow(0 0 14px #38bdf8); }
  4% { opacity: .7; } 8% { opacity: .1; } 13% { opacity: 1; } 17% { opacity: .35; }
  24% { opacity: 1; filter: brightness(2.2) saturate(.4) drop-shadow(0 0 16px #38bdf8) drop-shadow(0 0 4px #e0f2fe); }
  100% { opacity: 1; filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
}
/* burns on left → right along the gun: soft edge, hot orange tint cooling to normal */
@property --burn { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
.wc-fire { animation: wc-fire calc(var(--dur) * 2.2) ease-in-out both var(--delay); }
@keyframes wc-fire {
  0% { --burn: -15%; filter: sepia(1) saturate(6) hue-rotate(-20deg) brightness(1.8) drop-shadow(0 0 12px #f97316); }
  75% { filter: sepia(.5) saturate(2.5) hue-rotate(-10deg) brightness(1.3) drop-shadow(0 0 10px #fb923c); }
  100% { --burn: 130%; filter: sepia(0) saturate(1) hue-rotate(0deg) brightness(1) drop-shadow(0 0 0 transparent); }
}
.wc-fire { -webkit-mask: linear-gradient(to right, #000 calc(var(--burn) - 14%), rgba(0,0,0,.6) calc(var(--burn) - 4%), transparent var(--burn));
  mask: linear-gradient(to right, #000 calc(var(--burn) - 14%), rgba(0,0,0,.6) calc(var(--burn) - 4%), transparent var(--burn)); }
.wc-fire.wc-rev, .wc-glitch.wc-rev, .wc-electric.wc-rev { animation-direction: reverse; }
.anim-chip-fx::after { content: "FX"; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 0.6em; font-weight: 800; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; vertical-align: 1px; }
.anim-chip-3d::after { content: "3D"; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 0.6em; font-weight: 800; background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0b1220; vertical-align: 1px; }

/* ---------- Mockup look (owner's "floating inventory" image) ---------- */
/* glowing cyan frames with cut corners, tool rows with chevrons, big tiles + one open section, player bar */
.anim-col {
  border: 1.5px solid rgba(34, 211, 238, 0.7); border-radius: 4px;
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  background:
    radial-gradient(circle at 1px 1px, rgba(34, 211, 238, 0.12) 1px, transparent 1.5px) 0 0 / 8px 8px,
    linear-gradient(180deg, rgba(14, 40, 70, 0.85), rgba(6, 14, 30, 0.9));
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.35), inset 0 0 30px rgba(34, 211, 238, 0.12);
  padding: 16px 14px;
}
.anim-col h3.anim-head { text-align: left; color: #fff; font-size: 1.7rem; font-style: italic; letter-spacing: 0.02em; margin: 0; }
.anim-head em { color: #22d3ee; font-style: inherit; }
.anim-label {
  margin: 6px 0 4px; padding-bottom: 4px; font: 700 0.95rem "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(34, 211, 238, 0.85); border-bottom: 1px solid rgba(34, 211, 238, 0.2);
}
.anim-tools .anim-box {
  flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 0 14px;
  font-size: 1.1rem; background: rgba(8, 20, 40, 0.85); border-color: rgba(34, 211, 238, 0.22);
}
.anim-tools .anim-box span { width: 26px; text-align: center; }
.anim-tools .anim-box::after { content: "›"; margin-left: auto; font-size: 1.5rem; color: rgba(34, 211, 238, 0.8); }
.anim-tools .anim-box[aria-pressed="true"] { border: 2px solid #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.55), inset 0 0 14px rgba(34, 211, 238, 0.25); }
.anim-tiles { gap: 8px; }
.anim-tiles .anim-box { min-height: 82px; font-size: 1rem; background: rgba(8, 20, 40, 0.85); }
.anim-tiles .anim-box span { font-size: 1.6rem; }
.anim-tiles .anim-box[aria-pressed="true"] { border: 2px solid #22d3ee; box-shadow: 0 0 16px rgba(34, 211, 238, 0.6), inset 0 0 16px rgba(34, 211, 238, 0.2); }
.anim-sections { max-height: none; overflow: visible; }
.anim-sec { background: rgba(4, 12, 26, 0.85); border-color: rgba(34, 211, 238, 0.3); padding: 10px 12px 12px; }
.anim-sec h4 { display: flex; font-size: 1.05rem; color: #22d3ee; padding-bottom: 6px; border-bottom: 1px solid rgba(34, 211, 238, 0.2); }
.anim-sec h4::after { content: "⌃"; margin-left: auto; }
.anim-range output {
  min-width: 42px; padding: 2px 6px; text-align: center; font: 600 0.85rem "Barlow", sans-serif; color: #e2e8f0;
  background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 4px;
}
.anim-swatches .anim-chip { width: 28px; height: 28px; border-radius: 4px; }
.wc { width: min(96%, 520px); }
.wc-title { font-size: 46px; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 0 calc(var(--g) * 2) #a855f7, 0 3px 0 #000; }
.anim-player {
  display: flex; align-items: center; gap: 14px; width: min(100%, 720px); margin: 18px auto 0; padding: 10px 18px;
  background: rgba(6, 16, 32, 0.9); border: 1.5px solid rgba(34, 211, 238, 0.5); border-radius: 999px;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}
.anim-play {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #22d3ee; background: rgba(34, 211, 238, 0.12);
  color: #22d3ee; font-size: 0.9rem; cursor: pointer; box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}
.anim-player input[type="range"] { accent-color: #22d3ee; }
#animScrub { flex: 1; min-width: 0; }
#animVol { width: 80px; }
.anim-time { font: 600 0.9rem "Barlow", sans-serif; color: #cbd5e1; white-space: nowrap; padding-right: 10px; border-right: 1px solid rgba(148, 163, 184, 0.25); }
.anim-vol { color: #cbd5e1; }
@media (max-width: 760px) {
  .anim-player { gap: 8px; padding: 8px 12px; }
  #animVol, .anim-vol { display: none; }
  .anim-tools .anim-box::after { display: none; }
  .wc-title { font-size: 32px; }
}

/* ---------- Your own images (gun PNG, slot icons) ---------- */
.anim-drop {
  display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 8px; margin-bottom: 6px;
  text-align: center; font: 500 0.85rem "Barlow", sans-serif; color: #94a3b8; cursor: pointer;
  border: 1.5px dashed rgba(34, 211, 238, 0.45); border-radius: 6px;
  background: rgba(2, 6, 23, 0.6) center / contain no-repeat;
}
.anim-drop:hover, .anim-drop.drag-over { border-color: #22d3ee; color: #e2e8f0; background-color: rgba(34, 211, 238, 0.08); }
.anim-drop.has-img span { display: none; }
.anim-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.anim-icons .anim-drop { min-height: 0; aspect-ratio: 1; margin: 0; font-weight: 700; }
.anim-hint { margin: 2px 0 6px; font: 400 0.78rem "Barlow", sans-serif; color: #94a3b8; }
.wc-gun-img { max-height: 100%; object-fit: contain; }
.wc-slots b { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wc-slots b img { width: 82%; height: 82%; object-fit: contain; }
.wc-card.drag-over, .wc-slots b.drag-over { outline: 2px dashed #22d3ee; outline-offset: 3px; }

/* ---------- Mockup details: slant, hologram arcs, notched frames, card trim ---------- */
@media (min-width: 761px) {
  .anim-studio { position: relative; perspective: 1100px; padding: 18px 0 30px; }
  /* curved hologram line over the top + glowing floor ring under the card */
  .anim-studio::before, .anim-studio::after { content: ""; position: absolute; left: -4%; right: -4%; pointer-events: none; z-index: 0; }
  .anim-studio::before { top: -6px; height: 90px; border-top: 2px solid rgba(34, 211, 238, 0.55); border-radius: 50% 50% 0 0 / 100% 100% 0 0; filter: drop-shadow(0 0 6px #22d3ee); }
  .anim-studio::after { bottom: 0; height: 70px; border-bottom: 2px solid rgba(34, 211, 238, 0.45); border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: radial-gradient(ellipse at 50% 100%, rgba(34, 211, 238, 0.18), transparent 60%); filter: drop-shadow(0 0 6px #22d3ee); }
  .anim-col, .anim-preview { position: relative; z-index: 1; }
  /* stronger slant toward the centre */
  @keyframes anim-bob-left {
    0%, 100% { transform: rotateY(26deg) translateY(0); box-shadow: 0 0 22px rgba(34, 211, 238, 0.35); }
    50% { transform: rotateY(29deg) translateY(-18px) translateZ(16px); box-shadow: 0 0 30px rgba(34, 211, 238, 0.5); }
  }
  @keyframes anim-bob-right {
    0%, 100% { transform: rotateY(-26deg) translateY(0); box-shadow: 0 0 22px rgba(34, 211, 238, 0.35); }
    50% { transform: rotateY(-29deg) translateY(-15px) translateZ(16px); box-shadow: 0 0 30px rgba(34, 211, 238, 0.5); }
  }
  .anim-tools { transform: rotateY(26deg); }
  .anim-custom { transform: rotateY(-26deg); }
}
/* panel trim: diagonal stripes in the cut corner, bright edge strip, inner hairline frame */
.anim-col::before {
  content: ""; position: absolute; top: 6px; left: 6px; width: 46px; height: 14px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(34, 211, 238, 0.85) 0 3px, transparent 3px 7px);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}
.anim-custom::before { left: auto; right: 6px; }
.anim-col::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(34, 211, 238, 0.18);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(90deg, transparent 0 60%, rgba(34, 211, 238, 0.9) 60% 90%, transparent 90%) bottom / 100% 2px no-repeat;
}
.anim-col > * { position: relative; z-index: 1; }

/* card look 1:1 with the owner's reference cards: thin dark frame, flat background, plain slots, navy ammo strip */
.wc-card { filter: none; }
.wc-bg, .wc-bg[data-frame] { border: 3px solid #26222e; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; clip-path: none; }
.wc-bg i { display: none; }
.wc-bg[data-frame="none"] { border-color: transparent; box-shadow: none; }
.wc-ammowrap { left: 3px; right: 3px; bottom: 3px; height: 16.5%; }
.wc-ammo {
  padding: 0 2.4% 0 2.2%; border-top: 1px solid #2c2f3a; border-radius: 0 0 7px 7px; background: #0a0e18;
  font: 400 clamp(14px, 3.6vw, 34px) Arial, Helvetica, sans-serif; letter-spacing: 0; color: #e4e7ec;
}
.wc-ammo span { display: flex; align-items: center; gap: 0; }
.wc-bullets { width: 1.1em; height: 0.85em; margin-right: 0.4em; color: #e4e7ec; }
.wc-badge {
  margin-left: 0.3em; padding: 0.05em 0; font: 400 1.05em "Times New Roman", serif; line-height: 1; color: #b9c5d1;
  border-top: 2px solid #b9c5d1; border-bottom: 2px solid #b9c5d1; border-radius: 0; box-shadow: none;
}
.wc-slots { gap: 3.5%; }
.wc-slots b { border-width: 3px; border-radius: 9px; background: #0c1220; box-shadow: none; }
.wc-title { transform: none; filter: none; }
/* phone: preview on top, tools as a row, customization grid below */
@media (max-width: 760px) {
  .anim-studio { grid-template-columns: 1fr; min-height: 0; }
  .anim-preview { order: -1; min-height: 260px; }
  .anim-tools { flex-direction: row; flex-wrap: wrap; }
  .anim-tools h3 { flex-basis: 100%; }
  .anim-tools .anim-box { flex: 1 1 30%; }
  .anim-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Rounded hologram pass: no box behind the card, smooth corners, extruded side panels ---------- */
.anim-preview { background: none; border: 0; box-shadow: none; }
.wc-bg, .wc-bg[data-frame="tech"], .wc-card, .wc-card::before { clip-path: none; border-radius: 10px; }
.wc-card::before { border-radius: 16px; }
.wc-bg::before, .wc-bg::after { display: none; }
.anim-col, .anim-col::after { clip-path: none; }
.anim-col {
  border-radius: 20px; overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(34, 211, 238, 0.06) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 1px 1px, rgba(34, 211, 238, 0.12) 1px, transparent 1.5px) 0 0 / 8px 8px,
    linear-gradient(160deg, rgba(34, 211, 238, 0.22), rgba(14, 40, 70, 0.55) 35%, rgba(6, 14, 30, 0.75));
  backdrop-filter: blur(6px);
}
.anim-col::after { inset: 6px; border-radius: 15px; }
.anim-col::before { border-radius: 4px; }
@media (min-width: 761px) {
  /* extruded depth: stacked edge layers on the side facing away + soft glow */
  .anim-tools {
    box-shadow: -2px 0 0 rgba(34, 211, 238, 0.55), -4px 0 0 rgba(20, 90, 120, 0.9), -6px 0 0 rgba(16, 70, 100, 0.9),
      -8px 0 0 rgba(12, 55, 85, 0.9), -10px 0 0 rgba(10, 40, 70, 0.9), -11px 0 0 rgba(34, 211, 238, 0.6),
      0 0 30px rgba(34, 211, 238, 0.4), inset 0 0 30px rgba(34, 211, 238, 0.15) !important;
  }
  .anim-custom {
    box-shadow: 2px 0 0 rgba(34, 211, 238, 0.55), 4px 0 0 rgba(20, 90, 120, 0.9), 6px 0 0 rgba(16, 70, 100, 0.9),
      8px 0 0 rgba(12, 55, 85, 0.9), 10px 0 0 rgba(10, 40, 70, 0.9), 11px 0 0 rgba(34, 211, 238, 0.6),
      0 0 30px rgba(34, 211, 238, 0.4), inset 0 0 30px rgba(34, 211, 238, 0.15) !important;
  }
  @keyframes anim-bob-left {
    0%, 100% { transform: rotateY(26deg) translateY(0); }
    50% { transform: rotateY(29deg) translateY(-18px) translateZ(16px); }
  }
  @keyframes anim-bob-right {
    0%, 100% { transform: rotateY(-26deg) translateY(0); }
    50% { transform: rotateY(-29deg) translateY(-15px) translateZ(16px); }
  }
}
/* hologram shimmer sweeping down the panels */
.anim-col > :first-child::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: -16px; height: 60px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.14), transparent);
  animation: anim-holo-sweep 4.5s linear infinite;
}
@keyframes anim-holo-sweep { from { transform: translateY(-60px); } to { transform: translateY(520px); } }

/* ---------- Background styles (owner's reference cards) ---------- */
/* swoosh: dark purple fade with a curve in the background colour sweeping up from the bottom-left */
.wc-bg[data-style="swoosh"] {
  --trim: color-mix(in srgb, var(--sgc, var(--c)) 45%, #7c3aed);
  background:
    radial-gradient(ellipse 140% 165% at 100% 0%, transparent 0 69.5%, var(--c) 70%) left 0 top 62.4% / 33% 55.6% no-repeat,
    linear-gradient(110deg, color-mix(in srgb, var(--c) 12%, #26142f), #1a1228 50%, #0b0f1c);
}
/* sunset: near-black top fading into the background colour, soft horizontal bands just above the ammo strip */
.wc-bg[data-style="sunset"] {
  --trim: color-mix(in srgb, var(--c) 80%, #3a1a10);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 13px) left 0 top 79.5% / 100% 17% no-repeat,
    linear-gradient(180deg, #1c1619, color-mix(in srgb, var(--c) 18%, #241818) 35%, color-mix(in srgb, var(--c) 50%, #2a140c) 65%, var(--c) 83.3%);
}/* Other: ammo / durability / level can each be hidden */
.wc-ammo u { text-decoration: none; }
.wc-ammo [hidden] { display: none !important; }
.anim-swatches .anim-auto { font: 800 0.75rem "Barlow", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
/* trims (Background > Trim): thin lines in --trim, faint fills, picked by data-trim */
.wc-trim { position: absolute; left: 0; top: 0; width: 100%; height: 83.3%; pointer-events: none; color: var(--trim, var(--c)); }
.wc-trim g { display: none; fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.wc-trim * { vector-effect: non-scaling-stroke; }
.wc-bg[data-trim="angular"] .wc-t-angular, .wc-bg[data-trim="faceted"] .wc-t-faceted, .wc-bg[data-trim="orbital"] .wc-t-orbital { display: inline; }
.wc-trim .d { stroke-width: 0.8; opacity: 0.45; }
.wc-trim .f { fill: currentColor; stroke: none; opacity: 0.55; }
.wc-trim .s { fill: currentColor; stroke: none; opacity: 0.3; }
.wc-trim .tick { stroke-width: 5; stroke-dasharray: 1.2 46; opacity: 0.8; }
.wc-trim .dash { stroke-width: 5; stroke-dasharray: 12 16; opacity: 0.7; }
.wc-trim .tri, .wc-trim .dot { stroke: none; }
#wcTri path { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.22; }
#wcDot circle { fill: currentColor; opacity: 0.6; }

/* ---------- Attachments art + bottom icons + title font (match owner refs) ---------- */
.wc-slots { gap: 4.4%; }
.wc-slots b.wc-art { border: 0; background: var(--art) center / cover no-repeat; border-radius: 13%; box-shadow: 0 0 calc(var(--g) * 0.6) color-mix(in srgb, var(--slot) 60%, transparent), 0 6px 12px rgba(0, 0, 0, .6); }
/* icon sizes from the refs: icon ≈ 1.15× the number height */
.wc-ammo .wc-ico, .wc-ammo .wc-bullets { flex: none; height: 1.05em; width: auto; }
.wc-bullets { aspect-ratio: 22 / 24; margin-right: 0.4em; }
.wc-magico { aspect-ratio: 1; margin-right: 0.4em; color: #cfd8dc; }
.wc-warn { aspect-ratio: 24 / 22; height: 0.95em !important; margin-right: 0.25em; }
.wc-gear { aspect-ratio: 1; height: 1.2em !important; margin-left: 0.3em; }
.wc-ammo:not([data-icons="mag"]) :is(.wc-magico, .wc-warn, .wc-gear) { display: none; }
.wc-ammo[data-icons="mag"] :is(.wc-bullets, .wc-badge) { display: none !important; }
.wc-title {
  font: 700 34px Arial, Helvetica, sans-serif; font-style: normal; letter-spacing: 0.01em; color: #e4e7ec;
  -webkit-text-stroke: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); transform: none; filter: none;
}
.wc-gun-vid { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 calc(var(--g) * 0.6) var(--c)); }

/* ---------- Title look ---------- (Text tab: font / style / spacing / tilt set inline by anim-studio.js; video card: core() title) */
.wc-title { color: var(--c); }
.wc-title i { display: inline-block; font-style: inherit; white-space: pre; }
.wc-title:is([data-style="outline"], [data-style="3d"], [data-style="chrome"], [data-style="gradient"]) i { -webkit-text-stroke: var(--tow) #000; paint-order: stroke fill; }
.wc-title[data-style="neon"] { color: #fff; text-shadow: 0 0 calc(var(--tfx) * 6px) var(--c), 0 0 calc(var(--tfx) * 18px) var(--c), 0 0 calc(var(--tfx) * 36px) var(--c); }
.wc-title[data-style="3d"] { text-shadow: 1px 1px 0 color-mix(in srgb, var(--c) 55%, #000), 2px 2px 0 color-mix(in srgb, var(--c) 55%, #000),
  3px 3px 0 color-mix(in srgb, var(--c) 50%, #000), calc(var(--tfx) * 6px) calc(var(--tfx) * 6px) 0 color-mix(in srgb, var(--c) 40%, #000), 0 8px 10px rgba(0, 0, 0, 0.5); }
.wc-title[data-style="chrome"] i { background: linear-gradient(#fff, #cbd5e1 48%, #475569 52%, #e2e8f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc-title[data-style="gradient"] i { background: linear-gradient(90deg, var(--c), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc-title[data-style="chrome"], .wc-title[data-style="gradient"] { text-shadow: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.wc-title[data-style="box"] { display: inline-block; padding: 0.05em 0.35em; border-radius: 0.2em; color: #0b0b1e; text-shadow: none;
  background: color-mix(in srgb, var(--c) calc(40% + var(--tfx) * 60%), transparent); }
/* title intros: per letter (staggered by --i; out = backwards from the end via --ri) or the whole line */
.wc-ttype .wc-title i { animation: wc-ttype 0.01s steps(1) both calc(var(--delay) + var(--i) * var(--st) * 1.6); }
.wc-tpop .wc-title i { animation: wc-pop calc(var(--dur) * 0.6) cubic-bezier(.3,1.6,.5,1) both calc(var(--delay) + var(--i) * var(--st)); }
.wc-tdrop .wc-title i { animation: wc-tdrop calc(var(--dur) * 0.6) cubic-bezier(.3,1.5,.5,1) both calc(var(--delay) + var(--i) * var(--st)); }
.wc-twave .wc-title i { animation: wc-twave calc(var(--dur) * 0.6) cubic-bezier(.2,.8,.2,1) both calc(var(--delay) + var(--i) * var(--st)); }
.wc-rev :is(.wc-ttype, .wc-tpop, .wc-tdrop, .wc-twave) .wc-title i, :is(.wc-ttype, .wc-tpop, .wc-tdrop, .wc-twave).wc-rev .wc-title i {
  animation-direction: reverse; animation-delay: calc(var(--delay) + var(--ri) * var(--st));
}
.wc-tzoom { animation: wc-tzoom calc(var(--dur) * 1.2) cubic-bezier(.2,.8,.2,1) both var(--delay); }
.wc-ttrack .wc-title { animation: wc-ttrack calc(var(--dur) * 1.5) cubic-bezier(.2,.8,.2,1) both var(--delay); }
.wc-ttrack.wc-rev .wc-title { animation-direction: reverse; }
@keyframes wc-ttype { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-tdrop { from { opacity: 0; transform: translateY(-0.9em); } 30% { opacity: 1; } }
@keyframes wc-twave { from { opacity: 0; transform: translateY(0.6em); } }
@keyframes wc-tzoom { from { opacity: 0; transform: scale(2.2); filter: blur(8px); } }
@keyframes wc-ttrack { from { opacity: 0; letter-spacing: 0.5em; } }

/* ---------- Bottom strip type + icons like the in-game card (owner screenshot) ---------- */
.wc-ammowrap { height: 12.5%; }
.wc-ammo { font: 500 clamp(11px, 2.3vw, 21px) "Barlow", sans-serif; letter-spacing: 0.02em; color: #d9dde2; padding: 0 2.6% 0 2.4%; }
.wc-ammo .wc-ico, .wc-ammo .wc-bullets { height: 0.95em; }
.wc-bullets, .wc-magico { margin-right: 0.45em; }
.wc-warn { height: 0.9em !important; margin-right: 0.4em; }
.wc-gear { height: 1.15em !important; margin-left: 0.4em; }
.wc-badge {
  margin-left: 0.45em; padding: 0 0.04em; font: 700 1.3em "Times New Roman", Georgia, serif; line-height: 0.82;
  letter-spacing: -0.08em; color: #8f99a5; border-top: 0.11em solid #8f99a5; border-bottom: 0.11em solid #8f99a5;
}
/* bars sit right on the numeral's serifs (connected, like the game) */
.wc-badge { line-height: 0.7; padding: 0.02em 0.03em 0; }

/* ---------- On-card arrows (flip through the picked part's looks) ---------- */
/* small, faint until hovered; shapes come from anim-studio.js SHAPES (one look per part and axis) */
.wc-arrows { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.wc-arrow {
  position: absolute; display: grid; place-items: center; padding: 6px; transform: translate(-50%, -50%);
  /* easy to see on any card: full colour on a dark disc, stronger glow (was 45% see-through, no backing) */
  pointer-events: auto; cursor: pointer; border: 1px solid rgba(103, 232, 249, 0.55); border-radius: 999px;
  background: rgba(6, 12, 24, 0.72); color: #a5f3fc; opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.95)); transition: opacity 0.15s, color 0.15s, background 0.15s;
  scale: calc(1 / var(--zoom, 1)); /* stays the same size when the camera zooms in */
  animation: wc-arrow-in 0.3s cubic-bezier(.3, 1.6, .5, 1) both, var(--nudge) 1.4s 0.3s ease-in-out infinite;
}
.wc-arrow svg { display: block; overflow: visible; }
.wc-arrow:hover, .wc-arrow:focus-visible { opacity: 1; color: #fff; background: rgba(8, 47, 73, 0.9); }
.wc-a-left { --nudge: wc-nudge-x; --d: -3px; }
.wc-a-right { --nudge: wc-nudge-x; --d: 3px; }
.wc-a-right svg { transform: scaleX(-1); }
.wc-a-up { --nudge: wc-nudge-y; --d: -3px; }
.wc-a-down { --nudge: wc-nudge-y; --d: 3px; }
.wc-a-down svg { transform: scaleY(-1); }
@keyframes wc-arrow-in { from { opacity: 0; } }
@keyframes wc-nudge-x { 50% { translate: var(--d) 0; } }
@keyframes wc-nudge-y { 50% { translate: 0 var(--d); } }
/* dev view: Move arrows toggle + drag */
.wc-devmove {
  position: absolute; left: 0; bottom: 0; padding: 4px 10px; font: 600 0.75rem "Barlow", sans-serif; color: #22d3ee; cursor: pointer;
  background: rgba(8, 20, 40, 0.8); border: 1px solid rgba(34, 211, 238, 0.5); border-radius: 999px;
}
.wc-devmove[aria-pressed="true"] { background: #22d3ee; color: #0b1220; }
body:not(.view-dev) .wc-devmove { display: none; }
.wc-moving .wc-arrow { opacity: 1; cursor: move; animation: none; outline: 1px dashed #facc15; outline-offset: 2px; }
/* camera: the card zooms inside the preview, never over the side panels */
.anim-preview { overflow: clip; }
.wc { transform-origin: 50% 50%; will-change: transform; }
.wc-card { width: 88%; margin-inline: auto; }
/* weapon picked: attachments drop away and fade, then come back */
.wc-slotswrap { transition: translate 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
.wc-hide-slots .wc-slotswrap { translate: 0 60%; opacity: 0; pointer-events: none; }
/* attachments picked: the ammo row below drops away the same way */
.wc-ammowrap { transition: translate 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
.wc-hide-ammo .wc-ammowrap { translate: 0 60%; opacity: 0; pointer-events: none; }
/* pre-spun gun footage: no filter on the gun itself (glow layer behind does the glow), no pulse/turn animations */
.wc-flat .wc-spin, .wc-flat .wc-gun-vid { filter: none; animation: none; }
/* video guns (flat footage) sway with a 2D rock + bob, not the rotateY sway (paper-thin on footage) */
.wc-flat .wc-spin.wc-s-sway { animation: wc-sway2d var(--spd) ease-in-out infinite; }
@keyframes wc-sway2d { 0%, 100% { transform: rotate(-4deg) translateY(2%); } 50% { transform: rotate(4deg) translateY(-2%); } }
/* drop shadow under the pre-spun gun: dark and offset down, so it grounds the gun without fogging its edge */
.wc-flat .wc-gun-vid { filter: drop-shadow(0 0 calc(var(--g) * 0.9) var(--c)) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55)); } /* glow (Glow tab) + drop shadow */

/* ---------- Attachments: each slot floats on its own, and the intro plays per slot (staggered by Slot order) ---------- */
/* float uses `translate` so it never fights the intro's `transform` */
.wc-slots b { animation: wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
.wc-slots b.wc-fade { animation: wc-fade var(--dur) ease both calc(var(--delay) + var(--i) * var(--stag, 0.25s)), wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
.wc-slots b.wc-slide { animation: wc-slide var(--dur) cubic-bezier(.2,.8,.2,1) both calc(var(--delay) + var(--i) * var(--stag, 0.25s)), wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
.wc-slots b.wc-pop { animation: wc-pop var(--dur) cubic-bezier(.3,1.6,.5,1) both calc(var(--delay) + var(--i) * var(--stag, 0.25s)), wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
.wc-slots b.wc-spinin { animation: wc-spinin calc(var(--dur) * 1.6) cubic-bezier(.2,.8,.2,1) both calc(var(--delay) + var(--i) * var(--stag, 0.25s)), wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
.wc-slots b.wc-draw { animation: wc-draw calc(var(--dur) * 1.4) ease-out both calc(var(--delay) + var(--i) * var(--stag, 0.25s)), wc-float 3.2s ease-in-out calc(var(--i) * -0.8s) infinite; }
@keyframes wc-float { 50% { translate: 0 -7%; } }

/* out animation = the part's intro played backwards (beats the per-intro shorthands) */
.wc .wc-rev.wc-rev, .wc .wc-slots b.wc-rev.wc-rev { animation-direction: reverse; }
.wc-tilt { transform-origin: 50% 50%; }

/* ---------- Interactive polish ---------- */
/* boxes + chips: grow a touch on hover, sink on press, light sweep across; uses `scale` so it never fights the 3D tilt transforms */
.anim-box, .anim-chip, .anim-drop { position: relative; overflow: hidden; transition: scale 0.22s cubic-bezier(.3, 1.5, .5, 1), border-color 0.15s, box-shadow 0.2s, background-color 0.2s, color 0.15s; }
.anim-box:hover:not(:disabled), .anim-drop:hover { scale: 1.05; box-shadow: 0 0 18px rgba(34, 211, 238, 0.45), inset 0 0 12px rgba(34, 211, 238, 0.15); }
.anim-chip:hover { scale: 1.08; box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); }
.anim-box:active:not(:disabled), .anim-chip:active, .anim-drop:active { scale: 0.96; transition-duration: 0.08s; }
.anim-box::before, .anim-chip::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  translate: -120% 0; transition: translate 0s;
}
.anim-box:hover:not(:disabled)::before, .anim-chip:hover::before { translate: 120% 0; transition: translate 0.6s ease; }
@keyframes anim-bob { 40% { translate: 0 -4px; rotate: -6deg; } }
.anim-box[aria-pressed="true"] > span { filter: drop-shadow(0 0 6px #22d3ee); }
.anim-chip[aria-pressed="true"] { box-shadow: 0 0 12px rgba(34, 211, 238, 0.6); animation: anim-pick 0.3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes anim-pick { from { scale: 0.85; } }
/* menu details: corner brackets, scanline sheen and a glowing accent bar on each section */
.anim-sec { position: relative; background-image: repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.035) 0 1px, transparent 1px 4px); }
.anim-sec::before, .anim-sec::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; border: 2px solid #22d3ee; opacity: 0.8;
}
.anim-sec::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.anim-sec::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.anim-sec h4 { position: relative; text-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.anim-sec h4::before { content: ""; width: 4px; align-self: stretch; margin-right: 8px; border-radius: 2px; background: linear-gradient(#22d3ee, rgba(34, 211, 238, 0.2)); box-shadow: 0 0 8px #22d3ee; }
.anim-sec:not([hidden]) { animation: anim-open 0.28s cubic-bezier(.2, .8, .2, 1); }
@keyframes anim-open { from { opacity: 0; translate: 0 8px; } }
.anim-range input { accent-color: #22d3ee; }
.anim-range input:hover { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }
.wc-replay { transition: scale 0.2s cubic-bezier(.3, 1.5, .5, 1), box-shadow 0.2s; }
.wc-replay:hover { scale: 1.08; box-shadow: 0 0 14px rgba(34, 211, 238, 0.6); }
.wc-replay:active { scale: 0.95; }
@media (prefers-reduced-motion: reduce) {
  .anim-box, .anim-chip, .anim-drop, .wc-replay { transition: none; }
  .anim-box:hover:not(:disabled), .anim-chip:hover, .anim-drop:hover, .wc-replay:hover { scale: none; }
  .anim-box::before, .anim-chip::before, .anim-sec:not([hidden]), .anim-box > span, .anim-chip[aria-pressed="true"] { animation: none; display: revert; }
}

/* ---------- UI refresh: whole box pops out fast (not just its icon) ---------- */
.anim-box, .anim-chip, .anim-drop { transition: scale 0.12s cubic-bezier(.2, 1.6, .4, 1), translate 0.12s cubic-bezier(.2, 1.6, .4, 1), border-color 0.12s, box-shadow 0.15s, background-color 0.15s, color 0.12s; }
.anim-box:hover:not(:disabled), .anim-drop:hover {
  scale: 1.08; translate: 0 -3px; z-index: 2; border-color: #67e8f9;
  background-color: rgba(34, 211, 238, 0.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 22px rgba(34, 211, 238, 0.55), inset 0 0 14px rgba(34, 211, 238, 0.2);
}
.anim-chip:hover { scale: 1.12; translate: 0 -1px; z-index: 2; }
.anim-box:active:not(:disabled), .anim-chip:active, .anim-drop:active { scale: 0.95; translate: 0 0; }
.anim-box { background-image: linear-gradient(160deg, rgba(34, 211, 238, 0.08), transparent 45%); }
.anim-player { display: none; } /* owner: no playback bar; the card plays in, holds, ▶ Replay = out then in */

/* ---------- Gun glow: traced around the gun, smooth ---------- */
/* stacked drop-shadows: a tight one hugs the silhouette, the wider ones are blurry enough to hide jaggy alpha edges,
   so the glow follows the spinning gun every frame. Glow tab: Opacity (--go), Drop shadow (--sh, 1 = default) */
.wc-flat .wc-gun-vid, .wc-gun-vid {
  --gc: color-mix(in srgb, var(--c) var(--go, 100%), transparent);
  filter: url(#wcClean) drop-shadow(0 0 3px color-mix(in srgb, var(--gc) 90%, transparent)) drop-shadow(0 0 calc(var(--g) * 0.7) var(--gc))
    drop-shadow(0 0 calc(var(--g) * 1.6) color-mix(in srgb, var(--c2, var(--c)) calc(var(--goa, 1) * 70%), transparent))
    drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0.5)));
}
.wc-glow { opacity: calc(var(--g) / 24px * 0.9 * var(--goa, 1)); }
.wc-gunwrap .wc-look { animation: wc-hover 4s ease-in-out infinite; } /* gentle float while it spins */
@keyframes wc-hover { 50% { translate: 0 -2.5%; } }
@media (prefers-reduced-motion: reduce) { .wc-gunwrap .wc-look { animation: none; } }
/* card frame glow: off unless "Background glow" is picked */
.wc-bg { box-shadow: none; }
.wc-bgglow .wc-bg { box-shadow: 0 0 calc(var(--g) * 1.4 + 16px) color-mix(in srgb, var(--cs, var(--c)) var(--go, 100%), transparent), inset 0 0 calc(var(--g) * 1.5) color-mix(in srgb, var(--cs, var(--c)) 40%, transparent); }.wc-noglow .wc-gun-vid { filter: url(#wcClean) drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0.5))); }
/* sharp attachments: will-change kept the zoomed card (scale 1.06) as a bitmap drawn at 1x then stretched = soft slots;
   without it Chrome redraws at the zoomed size once the camera move ends. Float stays on whole pixels-ish. */
.wc { will-change: auto; }
.wc-slots b { image-rendering: -webkit-optimize-contrast; }

/* attachments: same Shadow tab drop shadow under each slot */
.wc-slotswrap .wc-look { filter: drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0.5))); }
/* ▶ Replay pressed: the button spins its arrow and sends out a ring */
.wc-replay.wc-replaying { animation: wc-replay-spin 0.55s cubic-bezier(.3, 1.4, .5, 1); }
.wc-replay.wc-replaying::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #22d3ee; pointer-events: none;
  animation: wc-replay-ring 0.6s ease-out forwards;
}
@keyframes wc-replay-spin { 30% { scale: 0.88; rotate: -8deg; } 70% { scale: 1.12; rotate: 4deg; } }
@keyframes wc-replay-ring { from { opacity: 0.9; scale: 1; } to { opacity: 0; scale: 1.6; } }

/* ---------- Replay button: top right, alive ---------- */
.wc-replay {
  top: 0; bottom: auto; right: 0; z-index: 5; display: inline-flex; align-items: center; gap: 5px; overflow: visible;
  background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 45%, #a5f3fc 50%, #67e8f9 55%, #22d3ee 100%) 0 0 / 250% 100%;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
  animation: wc-replay-idle 2.6s ease-in-out infinite, wc-replay-sheen 3.5s linear infinite;
}
.wc-replay i { display: inline-block; font-style: normal; transition: rotate 0.35s cubic-bezier(.3, 1.5, .5, 1); }
.wc-replay:hover i { rotate: -180deg; }
.wc-replay:hover { scale: 1.12; box-shadow: 0 0 20px rgba(34, 211, 238, 0.85); }
.wc-replay.wc-replaying { animation: wc-replay-spin 0.6s cubic-bezier(.3, 1.4, .5, 1), wc-replay-sheen 3.5s linear infinite; }
.wc-replay.wc-replaying i { animation: wc-replay-turn 0.7s cubic-bezier(.2, .8, .2, 1); }
.wc-replay.wc-replaying::before { /* second, later ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #a5f3fc; pointer-events: none;
  animation: wc-replay-ring 0.8s ease-out 0.15s both;
}
@keyframes wc-replay-idle { 50% { box-shadow: 0 0 18px rgba(34, 211, 238, 0.85); } }
@keyframes wc-replay-sheen { to { background-position: -250% 0; } }
@keyframes wc-replay-turn { to { rotate: -720deg; } }
@media (prefers-reduced-motion: reduce) { .wc-replay, .wc-replay i, .wc-replay::before, .wc-replay::after { animation: none !important; } }/* ↶ Undo / ⟲ Reset on every section */
.anim-sec-tools { display: flex; gap: 6px; justify-content: flex-end; margin: -2px 0 8px; }
.anim-sec-tools button {
  padding: 2px 9px; font: 600 0.72rem "Barlow", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #a5f3fc;
  background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.35); border-radius: 999px; cursor: pointer;
  transition: scale 0.12s cubic-bezier(.2, 1.6, .4, 1), background-color 0.15s, box-shadow 0.15s;
}
.anim-sec-tools button:hover { scale: 1.08; background: rgba(34, 211, 238, 0.2); box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); color: #fff; }
.anim-sec-tools button:active { scale: 0.94; }
/* focus mode (studio open): landing page loops stop while you're in the studio */
.anim-focus .hero, .anim-focus .hero *, .anim-focus [class*="show-"], .anim-focus [class*="show-"] * { animation-play-state: paused !important; }

/* lag fix: the panels' glow used to be animated inside the bob keyframes = both big panels (with backdrop blur) repainted
   every frame; now a fixed glow, only the transform moves (GPU-only) */
.anim-col.anim-tools, .anim-col.anim-custom { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.45)); }
/* Swoosh / Sunset: the owner's exact card pictures (assets/anim/bg-*.webp, 2000×1315, red warning removed from sunset);
   the picture is the whole card incl. its ammo strip, so the drawn strip and frame are hidden */
.wc-card.wc-picbg { aspect-ratio: 2000 / 1315; }
.wc-picbg .wc-bg { border: 0; border-radius: 0; box-shadow: none; background: var(--pic, url(assets/anim/bg-swoosh-clean.webp)) 0 0 / 100% 100% no-repeat !important; }
.wc-picbg .wc-bg[data-style="sunset"] { background-image: var(--pic, url(assets/anim/bg-sunset-clean.webp)) !important; }
.wc-picbg .wc-bg > i { display: none; }
/* *-clean pictures = baked strip text painted out (tools/cleanstrip.py): the live strip (Other tab) sits on the picture's
   own bar, no line of its own. Boxes = anim-studio.js STRIP_AT */
.wc-picbg .wc-ammowrap { top: 83%; bottom: auto; height: 16%; left: 1%; right: 1%; }
.wc-picbg[data-pic="split"] .wc-ammowrap { top: 79.7%; height: 14.7%; left: 3%; right: 2.5%; }
.wc-picbg .wc-ammo { border-top: 0; height: 100%; }
/* type like the pictures' own baked strip: Swoosh / Sunset = light regular, right number grey; Split = bold square, silver */
.wc-picbg .wc-ammo { font: 400 clamp(13px, 3.4vw, 31px) "Barlow", sans-serif; color: #eceef1; }
.wc-picbg .wc-ammo .wc-bullets, .wc-picbg .wc-ammo .wc-ico { height: 1.15em; }
.wc-picbg .wc-dur { color: #9aa0a8; }
.wc-picbg[data-pic="split"] .wc-ammo { font: 400 clamp(12px, 3vw, 28px) "Russo One", sans-serif; }
.wc-picbg[data-pic="split"] :is(.wc-mag, .wc-dur) {
  color: transparent; background: linear-gradient(#fff 35%, #c7ccd3 60%, #eef0f3); -webkit-background-clip: text; background-clip: text;
}
.wc-picbg[data-pic="split"] .wc-badge { font-size: 1.55em; color: #e5e7eb; border-color: #cfd4da; margin-left: 1em; }
/* background: drop shadow (Glow tab) + Background glow both as filters, so they follow the picture cards' rounded edges */
.wc-picbg .wc-bg, .wc-bg { filter: drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0))); }
/* own base size (14px + the Glow size) and two layers, else Soft / No glow made it ~0–8px = invisible */
.wc-bgglow .wc-bg {
  filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000) drop-shadow(0 0 1px #000) /* thin black bar between card and glow */
    drop-shadow(0 0 calc(var(--g) * 0.8 + 14px) color-mix(in srgb, var(--cs, var(--c)) var(--go, 100%), transparent))
    drop-shadow(0 0 calc(var(--g) * 0.3 + 5px) color-mix(in srgb, var(--cs, var(--c)) var(--go, 100%), transparent))
    drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0)));
}

/* Pulse glow: the glow size (--g) itself breathes in and out, eased (registered so it can animate smoothly);
   on .wc-look so it never fights the intro animation on the part box */
@property --g { syntax: "<length>"; inherits: true; initial-value: 0px; }
.wc-pulse > .wc-look { animation: wc-gpulse 1.8s ease-in-out infinite alternate; }
.wc-gunwrap.wc-pulse > .wc-look { animation: wc-hover 4s ease-in-out infinite, wc-gpulse 1.8s ease-in-out infinite alternate; }
@keyframes wc-gpulse { from { --g: calc(var(--gb, 16px) * 0.35); } to { --g: calc(var(--gb, 16px) * 1.4); } }

/* weapon shadow: a soft oval on the "floor" under the gun (above the attachments) that widens / narrows with the turn,
   instead of a drop-shadow on the cut-out (glitchy edges). Width set per frame from the footage time (anim-studio.js) */
.wc-floor {
  position: absolute; left: 50%; bottom: calc(-6% - var(--oy, 0%)); width: calc(62% * var(--osz, 1)); height: calc(12% * var(--osz, 1)); translate: -50% 0;
  border-radius: 50%; pointer-events: none; z-index: -1; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, var(--osha, 0.5)) 0%, rgba(0, 0, 0, calc(var(--osha, 0.5) * 0.55)) 45%, transparent 100%);
  filter: blur(var(--obl, 4px));
}
.wc-gunwrap .wc-look { position: relative; }/* gun: glow + drop shadow (Drop shadow chip); the floor oval = Oval shadow chip */
.wc-flat .wc-gun-vid, .wc-gun-vid {
  filter: url(#wcClean) drop-shadow(0 0 3px color-mix(in srgb, var(--gc) 90%, transparent)) drop-shadow(0 0 calc(var(--g) * 0.7) var(--gc))
    drop-shadow(0 0 calc(var(--g) * 1.6) color-mix(in srgb, var(--c2, var(--c)) calc(var(--goa, 1) * 70%), transparent))
    drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0.5)));
}
.wc-noglow .wc-gun-vid { filter: url(#wcClean) drop-shadow(var(--shx, 0px) var(--shy, 10px) var(--shb, 9px) rgba(0, 0, 0, var(--sha, 0.5))); }/* ▦ Templates (top left of the card) */
.wc-tplbtn {
  position: absolute; left: 0; top: 0; z-index: 5; padding: 4px 11px; font: 700 0.8rem "Barlow Condensed", sans-serif; letter-spacing: 0.06em;
  text-transform: uppercase; color: #a5f3fc; background: rgba(8, 20, 40, 0.85); border: 1px solid rgba(34, 211, 238, 0.55); border-radius: 999px;
  cursor: pointer; transition: scale 0.12s cubic-bezier(.2, 1.6, .4, 1), box-shadow 0.15s;
}
.wc-tplbtn:hover, .wc-tplbtn[aria-expanded="true"] { scale: 1.08; box-shadow: 0 0 14px rgba(34, 211, 238, 0.6); color: #fff; }
.wc-tplmenu {
  position: absolute; left: 0; top: 34px; z-index: 6; width: min(260px, 90%); padding: 8px; display: flex; flex-direction: column; gap: 5px;
  background: rgba(4, 12, 26, 0.96); border: 1px solid rgba(34, 211, 238, 0.45); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  text-align: left; animation: anim-open 0.2s cubic-bezier(.2, .8, .2, 1);
}
.wc-tplmenu[hidden] { display: none; }
.wc-tplrow, .wc-tplsave { display: flex; gap: 4px; }
.wc-tplmenu button, .wc-tplmenu input {
  font: 600 0.8rem "Barlow", sans-serif; color: #e2e8f0; background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 6px; padding: 5px 8px; cursor: pointer;
}
.wc-tplmenu input { flex: 1; min-width: 0; cursor: text; }
.wc-tplrow [data-tpl] { flex: 1; text-align: left; }
.wc-tplmenu button:hover { border-color: #22d3ee; color: #fff; background: rgba(34, 211, 238, 0.15); }
.wc-tplrow [aria-pressed="true"] { color: #fde047; border-color: #fde047; }
.wc-tplsave [data-save] { background: #22d3ee; color: #0b1220; border-color: #22d3ee; }
.wc-tplrow [data-tpl] { display: flex; align-items: center; gap: 8px; }
.wc-tplrow [data-tpl] img { width: 72px; aspect-ratio: 192 / 126; border-radius: 4px; flex: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35); }
.wc-tplmenu { width: min(300px, 92%); }

/* Templates / Replay sit above the card, out of the way */
.wc-tplbtn, .wc-replay { top: -30px !important; }
.wc-tplmenu { top: 2px; }
/* ＋ Add to video: middle, same row as Templates / Replay */
.wc-addvid {
  position: absolute; left: 50%; top: -30px; z-index: 5; translate: -50% 0; padding: 4px 13px; font: 700 0.8rem "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: #0b1220; background: #a5f3fc; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.55); transition: scale 0.12s cubic-bezier(.2, 1.6, .4, 1), box-shadow 0.15s;
}
.wc-addvid:hover { scale: 1.08; box-shadow: 0 0 18px rgba(34, 211, 238, 0.8); }
.wc-addvid.on { color: #a5f3fc; background: rgba(8, 20, 40, 0.85); outline: 1px solid #22d3ee; }
/* AMPLIFIED / NON-AMPLIFIED: above Add to video; orange when amplified */
.wc-amp {
  position: absolute; left: 50%; top: -60px; z-index: 5; translate: -50% 0; padding: 3px 12px; font: 700 0.74rem "Barlow Condensed", sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; background: rgba(8, 14, 26, 0.85); border: 1px solid #334155; border-radius: 999px;
  cursor: pointer; transition: scale 0.12s cubic-bezier(.2, 1.6, .4, 1), box-shadow 0.15s, color 0.15s;
}
.wc-amp:hover { scale: 1.06; }
.wc-amp.on { color: #1a0a00; background: linear-gradient(90deg, #f97316, #fb923c); border-color: #fdba74; box-shadow: 0 0 14px rgba(249, 115, 22, 0.7); }

/* Split: owner's orange / blue card picture (1509×943) */
.wc-card.wc-picbg[data-pic="split"] { aspect-ratio: 1509 / 943; }
.wc-picbg .wc-bg[data-style="split"] { background-image: var(--pic, url(assets/anim/bg-orangeblue-clean.webp)) !important; }
/* Corner: the owner's blue card recoloured to the Background colour at runtime (anim-studio.js tintCorner → --pic) */
.wc-card.wc-picbg[data-pic="corner"] { aspect-ratio: 1436 / 852; }
.wc-picbg .wc-bg[data-style="corner"] { background-image: var(--pic, url(assets/anim/bg-corner-clean.webp)) !important; }
.wc-picbg[data-pic="corner"] .wc-ammowrap { top: 81%; height: 18.3%; left: 1.2%; right: 1.2%; }
/* Circuit / Gold: owner's painted cards (1546×1017), the look picked on ▲▼ comes in as --pic (anim-studio.js LOOKS) */
.wc-card.wc-picbg:is([data-pic="circuit"], [data-pic="gold"]) { aspect-ratio: 1546 / 1017; }
.wc-picbg .wc-bg[data-style="circuit"] { background-image: var(--pic, url(assets/anim/bg-circuit-0-clean.webp)) !important; }
.wc-picbg .wc-bg[data-style="gold"] { background-image: var(--pic, url(assets/anim/bg-gold-0-clean.webp)) !important; }
.wc-picbg:is([data-pic="circuit"], [data-pic="gold"]) .wc-ammowrap { top: 80%; height: 18%; left: 2%; right: 2%; }
/* chip / mod tile after a gun's attachments (Canto) */
.wc-slots .wc-chiptile { height: 100%; aspect-ratio: 1; background: url(assets/anim/chip.png) center / contain no-repeat; } /* owner's settings icon */
.wc-slots .wc-chiptile[hidden] { display: none; }
/* "Frame 2 / 4" pop-up next to a clicked ▲▼ */
.wc-stepnum {
  position: absolute; z-index: 7; translate: -50% -50%; padding: 2px 9px; white-space: nowrap; pointer-events: none;
  font: 700 0.78rem "Barlow Condensed", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #0b1220;
  background: #22d3ee; border-radius: 999px; box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
}
.wc-stepnum[hidden] { display: none; }
.wc-stepnum-pop { animation: wc-stepnum 1.3s ease both; }
@keyframes wc-stepnum { 0% { opacity: 0; scale: 0.6; } 12% { opacity: 1; scale: 1.1; } 22% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.wc-tplnote { margin: 2px 0 0; font: 600 0.75rem "Barlow", sans-serif; color: #a5f3fc; }

/* ---------- UI refresh 2: cleaner panels, stronger tilt, thicker slabs, more motion ---------- */
/* cleaner: plain glass gradient (no scanlines / dot grid), no corner brackets or scanlines on the option sections */
.anim-col {
  background: linear-gradient(165deg, rgba(34, 211, 238, 0.16), rgba(10, 30, 56, 0.82) 30%, rgba(5, 12, 26, 0.92)) !important;
}
.anim-sec { background-image: none !important; }
.anim-sec::before, .anim-sec::after { content: none !important; }
@media (min-width: 761px) {
  .anim-studio { perspective: 1400px; }
  /* thicker: a 22 px extruded edge on the side facing away from the card */
  .anim-col.anim-tools {
    box-shadow: -3px 0 0 rgba(34, 211, 238, 0.7), -6px 0 0 #155e75, -9px 0 0 #134e66, -12px 0 0 #0f3f55, -15px 0 0 #0c3346,
      -18px 0 0 #0a2a3a, -21px 0 0 #082231, -22px 0 0 rgba(34, 211, 238, 0.55), -30px 30px 40px rgba(0, 0, 0, 0.55) !important;
    transform: rotateY(34deg) rotateX(3deg); transform-origin: left center;
    animation: anim-in-left 0.7s cubic-bezier(.2, .8, .2, 1) both, anim-tilt-left 6s 0.7s ease-in-out infinite !important;
  }
  .anim-col.anim-custom {
    box-shadow: 3px 0 0 rgba(34, 211, 238, 0.7), 6px 0 0 #155e75, 9px 0 0 #134e66, 12px 0 0 #0f3f55, 15px 0 0 #0c3346,
      18px 0 0 #0a2a3a, 21px 0 0 #082231, 22px 0 0 rgba(34, 211, 238, 0.55), 30px 30px 40px rgba(0, 0, 0, 0.55) !important;
    transform: rotateY(-34deg) rotateX(3deg); transform-origin: right center;
    animation: anim-in-right 0.7s cubic-bezier(.2, .8, .2, 1) both, anim-tilt-right 6.6s 0.7s ease-in-out infinite !important;
  }
  /* stronger vertical-axis tilt toward the card, with a slow sway (transform only = cheap) */
  @keyframes anim-tilt-left {
    0%, 100% { transform: rotateY(34deg) rotateX(3deg) translateY(0); }
    50% { transform: rotateY(37deg) rotateX(1deg) translateY(-14px); }
  }
  @keyframes anim-tilt-right {
    0%, 100% { transform: rotateY(-34deg) rotateX(3deg) translateY(0); }
    50% { transform: rotateY(-37deg) rotateX(1deg) translateY(-12px); }
  }
}
/* more motion: part buttons slide in one after another, option tiles pop in, the open section rises in */
.anim-tools [data-part] { animation: anim-rise-in 0.45s cubic-bezier(.2, .9, .3, 1.2) both; }
.anim-tools [data-part]:nth-child(1) { animation-delay: 0.15s; } .anim-tools [data-part]:nth-child(2) { animation-delay: 0.22s; }
.anim-tools [data-part]:nth-child(3) { animation-delay: 0.29s; } .anim-tools [data-part]:nth-child(4) { animation-delay: 0.36s; }
.anim-tools [data-part]:nth-child(5) { animation-delay: 0.43s; } .anim-tools [data-part]:nth-child(6) { animation-delay: 0.5s; }
.anim-tiles .anim-box { animation: anim-pop-in 0.35s cubic-bezier(.3, 1.5, .5, 1) both; }
.anim-tiles .anim-box:nth-child(2) { animation-delay: 0.04s; } .anim-tiles .anim-box:nth-child(3) { animation-delay: 0.08s; }
.anim-tiles .anim-box:nth-child(4) { animation-delay: 0.12s; } .anim-tiles .anim-box:nth-child(5) { animation-delay: 0.16s; }
.anim-tiles .anim-box:nth-child(6) { animation-delay: 0.2s; } .anim-tiles .anim-box:nth-child(7) { animation-delay: 0.24s; }
.anim-tools [data-part][aria-pressed="true"]::after { animation: anim-nudge 1.4s ease-in-out infinite; }
@keyframes anim-rise-in { from { opacity: 0; translate: -18px 0; } }
@keyframes anim-pop-in { from { opacity: 0; scale: 0.7; } }
@keyframes anim-nudge { 50% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) {
  .anim-col.anim-tools, .anim-col.anim-custom, .anim-tools [data-part], .anim-tiles .anim-box, .anim-tools [data-part]::after { animation: none !important; }
}

/* background change (anim-studio.js bgSwap): old picture slides off and fades over the new one, which slides in */
.wc-bgold {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background: 0 0 / 100% 100% no-repeat; border-radius: inherit;
  animation: wc-bgout 0.42s cubic-bezier(.4, 0, .2, 1) forwards;
}
.wc-bg.wc-bgin { animation: wc-bgin 0.42s cubic-bezier(.2, .8, .3, 1); }
@keyframes wc-bgout { to { opacity: 0; translate: var(--dx) var(--dy); scale: 0.96; filter: blur(3px); } }
@keyframes wc-bgin { from { opacity: 0.2; translate: var(--dx) var(--dy); scale: 1.04; filter: blur(3px) brightness(1.4); } }

/* ---------- Socials in the title spot (anim-studio.js "Socials"): in / out with the title's own animation ---------- */
.wc-soc { display: none; position: relative; height: 84px; margin-bottom: 6px; }
.wc-socon .wc-soc { display: block; }
.wc-soc canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--sh) * 6px) calc(var(--sh) * 8px) rgba(0,0,0,calc(var(--sh) * 1.2))) drop-shadow(0 0 var(--g) var(--c)); }
.wc-pulse .wc-soc canvas { animation: wc-soc-pulse 1.6s ease-in-out infinite; }
@keyframes wc-soc-pulse { 50% { filter: drop-shadow(0 calc(var(--sh) * 6px) calc(var(--sh) * 8px) rgba(0,0,0,calc(var(--sh) * 1.2))) drop-shadow(0 0 calc(var(--g) * 2) var(--sgc, var(--c))); } }
.wc-soc::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 60%; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); filter: blur(10px);
}
.anim-socnames { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.anim-socname, .anim-socsel { width: 100%; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid #1e3a5f; background: #0b1220; color: inherit; font: inherit; }
.anim-socanim { display: grid; gap: 4px; margin: 8px 0; }
.wc-soc { height: auto; } .wc-soc canvas { height: 84px; }
.wc-socname {
  font: 400 30px Impact, "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: #fff; line-height: 1; margin-top: 2px; opacity: 0;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 0 calc(var(--g) + 6px) var(--sgc, var(--c)), 0 3px 0 #000;
}
.anim-soctoggle { width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 8px; border: 1px solid #22d3ee66; background: #0b1220; color: #e2e8f0; font: 700 1rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.anim-soctoggle.on { background: #22d3ee; color: #04121c; box-shadow: 0 0 14px #22d3ee88; }
.anim-socbody[hidden] { display: none; }
.wc-socname[data-look="plain"] { -webkit-text-stroke: 0; text-shadow: none; }
.wc-socname[data-look="glow"] { -webkit-text-stroke: 0; text-shadow: 0 0 calc(var(--g) + 10px) var(--sgc, var(--c)), 0 0 4px var(--sgc, var(--c)); }
.wc-socname[data-look="neon"] { -webkit-text-stroke: 0; color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 12px var(--sgc, var(--c)), 0 0 26px var(--sgc, var(--c)); }