/* WrongTrump — Arcade Arena Design System (v3)
   Neon, playful, motion-rich game UI: magenta/violet/cyan/lime on deep space purple.
   All third-party assets are self-hosted under /assets/vendor. */
:root {
  --wt-bg: #0a0518;
  --wt-bg-soft: #130a2c;
  --wt-surface: rgba(30, 18, 62, 0.68);
  --wt-surface-solid: #1a1036;
  --wt-surface-2: rgba(44, 26, 84, 0.76);
  --wt-surface-3: #2b1a55;
  --wt-border: rgba(255, 255, 255, 0.10);
  --wt-border-strong: rgba(255, 255, 255, 0.20);

  /* Arcade brand ramp (legacy --wt-gold-* names kept so every page keeps working) */
  --wt-brand: #ff3ea5;
  --wt-brand-rgb: 255, 62, 165;
  --wt-brand-2: #8b5cf6;
  --wt-brand-3: #22e0ff;
  --wt-lime: #b6ff3c;
  --wt-mango: #ffb020;
  --wt-gold: var(--wt-brand);
  --wt-gold-dark: #c11f7c;
  --wt-gold-light: #ff9ad8;

  --wt-accent: #8b5cf6;
  --wt-accent-2: #22e0ff;
  --wt-pro: #22c55e;
  --wt-pro-glow: rgba(34, 197, 94, 0.42);
  --wt-con: #ff2d6f;
  --wt-con-glow: rgba(255, 45, 111, 0.45);
  --wt-neutral: #22e0ff;
  --wt-neutral-glow: rgba(34, 224, 255, 0.42);
  --wt-text: #f4f1ff;
  --wt-muted: #a99cd4;
  --wt-radius: 20px;
  --wt-radius-sm: 14px;
  --wt-radius-lg: 30px;
  --wt-shadow: 0 20px 45px -20px rgba(6, 0, 20, 0.9);
  --wt-shadow-lg: 0 40px 90px -35px rgba(6, 0, 20, 0.98);
  --wt-glow-gold: 0 0 45px -8px rgba(255, 62, 165, 0.55);
  --wt-glow-cyan: 0 0 45px -8px rgba(34, 224, 255, 0.5);
  --wt-play: linear-gradient(120deg, #ff3ea5 0%, #8b5cf6 45%, #22e0ff 100%);
  --wt-play-warm: linear-gradient(120deg, #ffb020 0%, #ff3ea5 55%, #8b5cf6 100%);
  --wt-ease: cubic-bezier(.16, .84, .44, 1);
  --wt-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --bs-body-bg: var(--wt-bg);
  --bs-body-color: var(--wt-text);
  --bs-border-color: var(--wt-border);
  --bs-primary: var(--wt-brand);
  --bs-primary-rgb: 255, 62, 165;
  --bs-body-font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-border-radius: var(--wt-radius-sm);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-body-font-family);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
  background: var(--wt-bg);
  color: var(--wt-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.65;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display-1, .display-2, .display-3, .navbar-brand {
  letter-spacing: -0.03em;
}

/* ---------- Vector backdrop (SVG mesh + grid + aurora orbs) ---------- */
.wt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(255, 62, 165, 0.22), transparent 62%),
    radial-gradient(900px 620px at 88% 4%, rgba(34, 224, 255, 0.18), transparent 60%),
    radial-gradient(1200px 800px at 50% 105%, rgba(139, 92, 246, 0.28), transparent 68%),
    linear-gradient(180deg, #140a30 0%, var(--wt-bg) 48%, #05010f 100%);
}
.wt-backdrop-grid {
  position: absolute;
  inset: -10%;
  background: url('/assets/img/grid.svg') repeat;
  background-size: 72px 72px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-72px, -72px, 0); }
}
.wt-backdrop-mesh {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 78vh;
  background: url('/assets/img/hero-mesh.svg') no-repeat top center;
  background-size: 140% 100%;
  opacity: .5;
  filter: blur(28px) saturate(1.25);
  animation: meshShift 26s ease-in-out infinite alternate;
}
@keyframes meshShift {
  from { transform: translate3d(-3%, 0, 0) scale(1.05); }
  to { transform: translate3d(3%, 2%, 0) scale(1.15); }
}
.wt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}
.wt-orb-1 {
  width: 40vw; height: 40vw; top: -12%; left: -8%;
  background: radial-gradient(circle, rgba(255, 62, 165, 0.55), transparent 70%);
  animation: orbFloat 22s ease-in-out infinite alternate;
}
.wt-orb-2 {
  width: 46vw; height: 46vw; bottom: -20%; right: -12%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.55), transparent 70%);
  animation: orbFloat 28s ease-in-out -8s infinite alternate;
}
.wt-orb-3 {
  width: 30vw; height: 30vw; top: 35%; left: 45%;
  background: radial-gradient(circle, rgba(34, 224, 255, 0.45), transparent 70%);
  animation: orbFloat 34s ease-in-out -14s infinite alternate;
}
.wt-orb-4 {
  width: 26vw; height: 26vw; top: 8%; right: 18%;
  background: radial-gradient(circle, rgba(182, 255, 60, 0.28), transparent 70%);
  animation: orbFloat 30s ease-in-out -20s infinite alternate;
}
@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6%, -5%, 0) scale(1.18); }
}

#wt-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 1090;
  background: linear-gradient(90deg, var(--wt-gold), #ff7a1a 45%, var(--wt-accent) 100%);
  box-shadow: 0 0 16px rgba(255, 62, 165, .55);
  transition: width .1s linear;
}

#wt-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}
.wt-main { flex: 1 0 auto; position: relative; z-index: 2; }
.wt-navbar, .wt-footer, .flash-container, .auth-wrap { position: relative; z-index: 3; }

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--wt-play);
  color: #150726;
  border-radius: 14px;
  box-shadow: 0 8px 26px -8px rgba(255, 62, 165, 0.8), inset 0 1px 0 rgba(255,255,255,.55);
  animation: brandPulse 3.4s var(--wt-ease) infinite;
}
.brand-icon svg { display: block; }
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(255, 62, 165, .7), inset 0 1px 0 rgba(255,255,255,.5); transform: translateY(0); }
  50% { box-shadow: 0 14px 34px -8px rgba(255, 62, 165, .95), inset 0 1px 0 rgba(255,255,255,.6); transform: translateY(-2px); }
}
.brand-text {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-weight: 700;
  font-size: 1.12rem;
  background: linear-gradient(100deg, #fff, var(--wt-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-chip {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  padding: .2rem .5rem;
  border-radius: 999px;
  color: var(--wt-gold);
  border: 1px solid rgba(255, 62, 165, .35);
  background: rgba(255, 62, 165, .1);
}
.text-gold { color: var(--wt-gold) !important; }
.bg-gold { background: var(--wt-gold) !important; }

.wt-navbar {
  background: rgba(8, 10, 20, 0.72) !important;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--wt-border);
  padding-top: .7rem;
  padding-bottom: .7rem;
  transition: background .3s var(--wt-ease), box-shadow .3s var(--wt-ease), padding .3s var(--wt-ease);
}
.wt-navbar.is-stuck {
  background: rgba(6, 7, 15, 0.92) !important;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 1);
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.wt-navbar .nav-link {
  position: relative;
  color: var(--wt-muted) !important;
  font-weight: 500;
  font-size: .93rem;
  padding: .45rem .85rem !important;
  border-radius: 10px;
  transition: color .2s var(--wt-ease), background .2s var(--wt-ease);
}
.wt-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: .15rem;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--wt-play);
  transform: translateX(-50%);
  transition: width .25s var(--wt-ease);
}
.wt-navbar .nav-link:hover,
.wt-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
}
.wt-navbar .nav-link:hover::after,
.wt-navbar .nav-link.active::after { width: 42%; }
.nav-avatar { object-fit: cover; border: 2px solid rgba(255, 62, 165, .8); }

.btn {
  border-radius: 12px;
  font-weight: 600;
  transition: transform .2s var(--wt-bounce), box-shadow .2s var(--wt-ease), background .25s var(--wt-ease), color .2s var(--wt-ease), background-position .5s var(--wt-ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: var(--wt-play);
  background-size: 200% auto;
  color: #10021f !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 12px 30px -12px rgba(255, 62, 165, 0.9), inset 0 1px 0 rgba(255,255,255,.5);
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--wt-ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:hover {
  background-position: 100% center;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 44px -14px rgba(34, 224, 255, 0.85), inset 0 1px 0 rgba(255,255,255,.6);
  color: #10021f !important;
}
.btn-outline-gold {
  border: 1px solid rgba(255, 62, 165, .55);
  color: var(--wt-gold) !important;
  font-weight: 600;
  background: rgba(255, 62, 165, .06);
  backdrop-filter: blur(6px);
}
.btn-outline-gold:hover {
  background: rgba(255, 62, 165, 0.16);
  color: var(--wt-gold-light) !important;
  box-shadow: 0 0 24px -6px rgba(255, 62, 165, 0.5);
  transform: translateY(-2px);
}
.btn-outline-light {
  border-color: var(--wt-border-strong);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
}
.btn-pro {
  background: linear-gradient(135deg, #4ade80, var(--wt-pro));
  color: #06210f; border: none; font-weight: 700;
  box-shadow: 0 12px 28px -12px var(--wt-pro-glow);
}
.btn-con {
  background: linear-gradient(135deg, #fb7185, var(--wt-con));
  color: #fff; border: none; font-weight: 700;
  box-shadow: 0 12px 28px -12px var(--wt-con-glow);
}
.btn-neutral {
  background: linear-gradient(135deg, #a5f3ff, var(--wt-neutral));
  color: #0b1220; border: none; font-weight: 700;
  box-shadow: 0 12px 28px -12px var(--wt-neutral-glow);
}

.wt-card {
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: border-color .3s var(--wt-ease), transform .3s var(--wt-ease), box-shadow .3s var(--wt-ease);
}
.wt-card:hover { border-color: var(--wt-border-strong); }
.wt-card-hover { position: relative; overflow: hidden; }
.wt-card-hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 62, 165,.6), rgba(139, 92, 246,.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--wt-ease);
  pointer-events: none;
}
.wt-card-hover:hover::before { opacity: 1; }
.wt-card-hover:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: var(--wt-shadow-lg), var(--wt-glow-gold);
}
.card-glass {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
}

/* Interactive 3D tilt + cursor spotlight (driven by app.js) */
.tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--wt-ease);
  position: relative;
}
.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 62, 165, .14), transparent 60%);
  opacity: 0;
  transition: opacity .3s var(--wt-ease);
  pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

.wt-hero {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
}
.wt-hero h1 {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.wt-hero h1 .text-gold {
  background: linear-gradient(100deg, var(--wt-gold-light), var(--wt-gold) 35%, #ff7a1a 75%, var(--wt-accent));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: gradientPan 7s linear infinite;
}
@keyframes gradientPan {
  to { background-position: 220% center; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--wt-border-strong);
  color: var(--wt-gold-light);
  padding: .45rem 1rem;
  border-radius: 50px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  animation: badgeGlow 3s var(--wt-ease) infinite;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 62, 165, 0); }
  50% { box-shadow: 0 0 28px -6px rgba(255, 62, 165, 0.55); }
}

.taunt-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.15rem;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 62, 165, 0.12), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(255, 62, 165, 0.3);
  font-weight: 600;
  font-size: .95rem;
  position: relative;
  overflow: hidden;
}
.taunt-banner .taunt-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 62, 165, 0.2);
  color: var(--wt-gold);
  animation: spinSlow 8s linear infinite;
}
.taunt-banner .taunt-text {
  flex: 1;
  min-height: 1.4em;
  transition: opacity .35s, transform .35s;
}
.taunt-banner .taunt-text.is-swap {
  opacity: 0;
  transform: translateY(8px);
}
.taunt-banner.pro {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), transparent);
  border-color: rgba(34, 197, 94, 0.4);
}
.taunt-banner.con {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), transparent);
  border-color: rgba(239, 68, 68, 0.4);
}
.taunt-banner.tie {
  background: linear-gradient(90deg, rgba(34, 224, 255, 0.16), transparent);
  border-color: rgba(34, 224, 255, 0.35);
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.side-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 767.98px) {
  .side-pick-grid { grid-template-columns: 1fr; }
}
.side-pick {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  padding: 1.5rem 1.15rem;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--wt-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .3s var(--wt-ease), border-color .3s var(--wt-ease), box-shadow .3s var(--wt-ease);
  text-align: center;
  height: 100%;
  user-select: none;
}
.side-pick::before {
  content: '';
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 70%;
  background: radial-gradient(circle at 50% 100%, currentColor, transparent 70%);
  opacity: .1;
  pointer-events: none;
  transition: opacity .3s var(--wt-ease), transform .4s var(--wt-ease);
  transform: translateY(20%);
}
.side-pick:hover::before { opacity: .22; transform: translateY(0); }
.side-pick-pro { color: var(--wt-pro); }
.side-pick-con { color: var(--wt-con); }
.side-pick-neutral { color: var(--wt-neutral); }
.side-pick h3, .side-pick p { color: var(--wt-text); position: relative; }
.side-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.side-pick .side-pick-icon {
  position: relative;
  width: 58px; height: 58px;
  margin: 0 auto .9rem;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border: 1px solid currentColor;
  box-shadow: 0 12px 30px -14px currentColor;
  transition: transform .35s var(--wt-ease), box-shadow .35s var(--wt-ease);
}
.side-pick-pro .side-pick-icon {
  background: rgba(34, 197, 94, 0.15);
  color: var(--wt-pro);
}
.side-pick-con .side-pick-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--wt-con);
}
.side-pick-neutral .side-pick-icon {
  background: rgba(34, 224, 255, 0.15);
  color: var(--wt-neutral);
}
.side-pick:hover {
  transform: translateY(-6px);
  border-color: var(--wt-border-strong);
  box-shadow: var(--wt-shadow-lg);
}
.side-pick:hover .side-pick-icon { transform: scale(1.08) rotate(-5deg); box-shadow: 0 18px 40px -16px currentColor; }
.side-pick.is-selected,
.side-pick:has(input:checked) {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--wt-shadow);
}
.side-pick-pro.is-selected,
.side-pick-pro:has(input:checked) {
  border-color: var(--wt-pro);
  box-shadow: 0 0 0 1px var(--wt-pro), 0 12px 30px var(--wt-pro-glow);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), var(--wt-surface));
}
.side-pick-con.is-selected,
.side-pick-con:has(input:checked) {
  border-color: var(--wt-con);
  box-shadow: 0 0 0 1px var(--wt-con), 0 12px 30px var(--wt-con-glow);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), var(--wt-surface));
}
.side-pick-neutral.is-selected,
.side-pick-neutral:has(input:checked) {
  border-color: var(--wt-neutral);
  box-shadow: 0 0 0 1px var(--wt-neutral), 0 12px 30px var(--wt-neutral-glow);
  background: linear-gradient(180deg, rgba(34, 224, 255, 0.12), var(--wt-surface));
}
.side-pick h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .35rem; }
.side-pick p { font-size: .82rem; color: var(--wt-muted); margin: 0; }

.arena-panel { position: relative; overflow: hidden; }
.arena-panel::before {
  content: 'VS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255, 62, 165, 0.08);
  pointer-events: none;
  letter-spacing: .1em;
}

.score-bar-wrap {
  height: 14px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wt-border);
  display: flex;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}
.score-bar-pro {
  background: linear-gradient(90deg, #16a34a, var(--wt-pro), #86efac);
  height: 100%;
  transition: width .7s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px var(--wt-pro-glow);
}
.score-bar-con {
  background: linear-gradient(90deg, #fca5a5, var(--wt-con), #b91c1c);
  height: 100%;
  transition: width .7s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px var(--wt-con-glow);
}
.score-labels { font-size: .85rem; font-weight: 700; }
.score-pro { color: var(--wt-pro); }
.score-con { color: var(--wt-con); }
.score-neutral { color: var(--wt-neutral); }

.debate-card .card-img-top {
  height: 160px;
  object-fit: cover;
  border-radius: var(--wt-radius) var(--wt-radius) 0 0;
}
.side-indicator {
  width: 5px;
  border-radius: 3px;
  align-self: stretch;
}
.side-pro { background: var(--wt-pro); box-shadow: 0 0 10px var(--wt-pro-glow); }
.side-con { background: var(--wt-con); box-shadow: 0 0 10px var(--wt-con-glow); }
.side-neutral { background: var(--wt-neutral); box-shadow: 0 0 10px var(--wt-neutral-glow); }

.side-pill { letter-spacing: .02em; }
.side-pill-pro { box-shadow: 0 0 12px var(--wt-pro-glow); }
.side-pill-con { box-shadow: 0 0 12px var(--wt-con-glow); }
.side-pill-neutral { box-shadow: 0 0 12px var(--wt-neutral-glow); }

.form-control, .form-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--wt-border) !important;
  color: var(--wt-text) !important;
  border-radius: 12px;
  padding: .75rem 1rem;
  backdrop-filter: blur(8px);
  transition: border-color .2s var(--wt-ease), box-shadow .2s var(--wt-ease), background .2s var(--wt-ease);
}
.form-control:hover, .form-select:hover { background: rgba(255,255,255,.06) !important; }
.form-control:focus, .form-select:focus {
  border-color: rgba(255, 62, 165, .7) !important;
  box-shadow: 0 0 0 .22rem rgba(255, 62, 165, 0.18) !important;
}
.form-label { font-weight: 600; font-size: .88rem; color: var(--wt-muted); letter-spacing: .01em; }
.form-control::placeholder { color: #6b7290; }
.input-group-text {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--wt-border) !important;
  color: var(--wt-muted);
}

.auth-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  padding: 2rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 62, 165, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(239, 68, 68, 0.08) 0%, transparent 40%);
}
.auth-card {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem;
  animation: fadeInUp .55s ease;
}
.auth-card.auth-wide { max-width: 720px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--wt-muted);
  font-size: .85rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wt-border);
}
.btn-facebook {
  background: #1877f2;
  color: #fff !important;
  font-weight: 600;
  border: none;
}
.btn-facebook:hover { background: #166fe5; color: #fff !important; }

.dash-sidebar {
  background: rgba(12, 14, 26, 0.7);
  border-right: 1px solid var(--wt-border);
  min-height: calc(100vh - 70px);
  padding: 1.5rem 0;
  backdrop-filter: blur(12px);
}
.dash-sidebar .nav-link {
  color: var(--wt-muted);
  border-radius: 10px;
  margin: .15rem .75rem;
  padding: .65rem 1rem;
  font-weight: 500;
  font-size: .92rem;
  transition: all .2s;
}
.dash-sidebar .nav-link:hover,
.dash-sidebar .nav-link.active {
  background: rgba(255, 62, 165, 0.12);
  color: var(--wt-gold);
  transform: translateX(3px);
}
.dash-sidebar .nav-link i { width: 1.4rem; }
.stat-card {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), var(--wt-surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 62, 165, 0.4);
}
.stat-card .stat-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  opacity: .18;
  color: var(--wt-gold);
}
.stat-value {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(135deg, #fff, var(--wt-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-size: .8rem;
  color: var(--wt-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.table-dark-wt {
  --bs-table-bg: transparent;
  --bs-table-color: var(--wt-text);
  --bs-table-border-color: var(--wt-border);
  --bs-table-hover-bg: rgba(255, 62, 165, 0.07);
}
.table-dark-wt th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wt-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}

.wt-footer {
  background: linear-gradient(180deg, rgba(10, 12, 24, 0.55), rgba(5, 6, 14, 0.92));
  border-top: 1px solid var(--wt-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.footer-links li { margin-bottom: .4rem; }
.footer-links a {
  color: var(--wt-muted);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s, padding-left .15s;
}
.footer-links a:hover { color: var(--wt-gold); padding-left: 3px; }

.badge { font-weight: 600; letter-spacing: .02em; }

.argument-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.9), rgba(18, 18, 31, 0.95));
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  margin-bottom: 1rem;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.argument-item:hover {
  border-color: rgba(255, 62, 165, 0.35);
  transform: translateX(3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.vote-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 40px;
}
.vote-btn {
  background: transparent;
  border: 1px solid var(--wt-border);
  color: var(--wt-muted);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.vote-btn:hover {
  border-color: var(--wt-gold);
  color: var(--wt-gold);
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(255, 62, 165, 0.3);
}
.vote-btn.voted-up {
  border-color: var(--wt-pro);
  color: var(--wt-pro);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 14px var(--wt-pro-glow);
}
.vote-btn.voted-down {
  border-color: var(--wt-con);
  color: var(--wt-con);
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 14px var(--wt-con-glow);
}
.vote-score { font-weight: 800; font-size: .95rem; }

.ticket-reply {
  padding: 1rem 1.25rem;
  border-radius: var(--wt-radius);
  margin-bottom: .75rem;
  border: 1px solid var(--wt-border);
}
.ticket-reply.staff {
  background: rgba(255, 62, 165, 0.08);
  border-color: rgba(255, 62, 165, 0.3);
}
.ticket-reply.user { background: var(--wt-surface); }

.error-code {
  background: linear-gradient(135deg, var(--wt-gold), var(--wt-gold-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-title {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-weight: 700;
}
.text-muted-wt { color: var(--wt-muted) !important; }
.border-wt { border-color: var(--wt-border) !important; }
.bg-surface { background: var(--wt-surface) !important; }
.bg-surface-2 { background: var(--wt-surface-2) !important; }
.rounded-wt { border-radius: var(--wt-radius) !important; }
.shadow-wt { box-shadow: var(--wt-shadow); }
.hover-lift { transition: transform .2s; }
.hover-lift:hover { transform: translateY(-3px); }

.winning-banner {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), transparent);
  border-left: 3px solid var(--wt-pro);
  padding: .75rem 1rem;
  border-radius: 0 10px 10px 0;
}
.losing-banner {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), transparent);
  border-left: 3px solid var(--wt-con);
  padding: .75rem 1rem;
  border-radius: 0 10px 10px 0;
}
.tie-banner {
  background: linear-gradient(90deg, rgba(34, 224, 255, 0.16), transparent);
  border-left: 3px solid var(--wt-neutral);
  padding: .75rem 1rem;
  border-radius: 0 10px 10px 0;
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.rank-1 { color: #ffd166; text-shadow: 0 0 12px rgba(255, 62, 165, 0.5); }
.rank-2 { color: #c0c7d1; }
.rank-3 { color: #cd7f32; }

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wt-border);
  font-size: .82rem;
  color: var(--wt-muted);
  transition: all .2s;
}
.feature-chip:hover {
  border-color: rgba(255, 62, 165, 0.45);
  color: var(--wt-text);
  transform: translateY(-2px);
}

#wt-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 12px;
  top: -12px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

.alert {
  border-radius: 12px;
  border: none;
  backdrop-filter: blur(8px);
}

.pagination .page-link {
  background: var(--wt-surface);
  border-color: var(--wt-border);
  color: var(--wt-text);
}
.pagination .page-item.active .page-link {
  background: var(--wt-gold);
  border-color: var(--wt-gold);
  color: #111;
}
.pagination .page-link:hover {
  background: var(--wt-surface-2);
  border-color: var(--wt-gold);
  color: var(--wt-gold);
}

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(6px);
  transition: opacity .75s var(--wt-ease), transform .75s var(--wt-ease), filter .75s var(--wt-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (max-width: 991.98px) {
  .dash-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--wt-border); }
  .auth-card { padding: 1.75rem; }
  .wt-hero { padding: 3.2rem 0 2.5rem; }
}
@media (max-width: 575.98px) {
  .argument-item { flex-direction: column; }
  .vote-controls { flex-direction: row; }
  .stat-value { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #wt-particles { display: none; }
  .wt-orb, .wt-backdrop-mesh, .wt-backdrop-grid { animation: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

@media print {
  .wt-navbar, .wt-footer, .dash-sidebar, #wt-particles, .wt-backdrop, #wt-scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-in { animation: fadeInUp .55s ease forwards; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.float-y { animation: floatY 4s ease-in-out infinite; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wt-bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--wt-gold), #ff7a1a); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wt-gold-dark); }

pre, code {
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  font-size: .85rem;
}

.dropdown-menu-dark {
  background: rgba(12, 14, 26, 0.92);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--wt-border);
  backdrop-filter: blur(12px);
  box-shadow: var(--wt-shadow);
}

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--wt-radius);
  padding: 2.5rem 1.5rem;
  background:
    radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.15), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(239, 68, 68, 0.15), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--wt-border-strong);
  backdrop-filter: blur(18px);
  text-align: center;
}
.cta-band h2 { margin-bottom: .75rem; }

.marquee-strip {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid rgba(255, 62, 165, 0.15);
  background: rgba(18, 18, 31, 0.7);
  padding: .65rem 0;
}
.marquee-track {
  display: inline-block;
  animation: marquee 28s linear infinite;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--wt-gold);
}
.marquee-track span { margin: 0 1.5rem; opacity: .85; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* —— Facebook showcase —— */
.btn-facebook {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1877f2;
  --bs-btn-border-color: #1877f2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0f65d8;
  --bs-btn-hover-border-color: #0f65d8;
  --bs-btn-active-bg: #0b57bf;
  --bs-btn-active-border-color: #0b57bf;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.25);
}
.fb-showcase-section {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(24, 119, 242, 0.18), transparent 45%),
    radial-gradient(ellipse at 90% 100%, rgba(255, 62, 165, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(7, 7, 18, 0.2), transparent);
}
.fb-account-card { border: 1px solid rgba(24, 119, 242, 0.35); }
.fb-cover {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #1c2a44;
}
.fb-cover-fallback {
  background:
    linear-gradient(135deg, rgba(24, 119, 242, 0.55), rgba(255, 62, 165, 0.25)),
    repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(255,255,255,0.03) 12px, rgba(255,255,255,0.03) 24px);
}
.fb-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 3px solid var(--wt-surface-solid);
  background: #1877f2;
}
.fb-avatar-fallback {
  width: 72px;
  height: 72px;
  font-size: 1.75rem;
  color: #fff;
  background: linear-gradient(145deg, #1877f2, #0b57bf);
  border: 3px solid var(--wt-surface-solid);
}
.fb-posts-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .fb-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fb-post-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-color: rgba(24, 119, 242, 0.2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fb-post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 119, 242, 0.55);
  box-shadow: 0 12px 32px rgba(24, 119, 242, 0.15);
}
.fb-post-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #12121f;
}
.fb-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.fb-post-card:hover .fb-post-media img { transform: scale(1.04); }
.fb-post-message {
  white-space: pre-wrap;
  word-break: break-word;
  color: #e8e8f0;
  font-size: .95rem;
  line-height: 1.45;
}
.fb-plugin-wrap {
  border: 1px solid rgba(24, 119, 242, 0.25);
  background: rgba(12, 16, 28, 0.85);
}
.fb-plugin-frame {
  border-radius: .75rem;
  overflow: hidden;
  background: #0b0b14;
  min-height: 480px;
}
.letter-space { letter-spacing: .06em; }

/* ============================================================
   Modern layer — v2 components, micro-interactions, vectors
   ============================================================ */

.section-title {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wt-gold);
  margin-bottom: .5rem;
}
.section-eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wt-gold));
}

.marquee-strip {
  background: linear-gradient(90deg, rgba(255, 62, 165, .08), rgba(139, 92, 246, .08));
  border-block: 1px solid var(--wt-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { color: var(--wt-gold-light); }

.badge {
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .35em .7em;
}

/* Magnetic / shine buttons (JS sets --mx/--my) */
.magnetic { transition: transform .25s var(--wt-ease); }

/* Skeleton shimmer for async content */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border-radius: var(--wt-radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Bento-ish equal-height grid helper */
.wt-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Divider with animated gradient hairline */
.wt-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--wt-border-strong), transparent);
  opacity: 1;
}

/* Toasts + alerts get the glass treatment */
.alert {
  border-radius: 14px;
  border: 1px solid var(--wt-border);
  background-color: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.toast { border-radius: 14px; backdrop-filter: blur(14px); }

/* Modern focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--wt-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Navbar toggler */
.navbar-toggler {
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  padding: .35rem .55rem;
}
.navbar-toggler:focus { box-shadow: none; }

/* Card media / avatar polish */
.rounded-circle { box-shadow: 0 6px 18px -10px rgba(0,0,0,.9); }

/* Back-to-top floating action */
#wt-top {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 1080;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wt-border-strong);
  border-radius: 14px;
  background: rgba(12, 14, 26, .8);
  color: var(--wt-gold);
  backdrop-filter: blur(14px);
  box-shadow: var(--wt-shadow);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s var(--wt-ease), transform .3s var(--wt-ease), box-shadow .3s var(--wt-ease);
}
#wt-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#wt-top:hover { box-shadow: var(--wt-glow-gold), var(--wt-shadow); transform: translateY(-2px); }

@media (max-width: 991.98px) {
  .wt-backdrop-mesh { height: 60vh; filter: blur(38px); }
  .wt-orb { filter: blur(70px); opacity: .45; }
}

/* ============================================================
   AI fact-check bot
   ============================================================ */

.ai-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, .45);
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(34, 224, 255, .14));
  color: #dcd2ff;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform .25s var(--wt-ease), box-shadow .25s var(--wt-ease), border-color .25s var(--wt-ease);
}
.ai-verify-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, .9);
  box-shadow: 0 10px 26px -12px rgba(139, 92, 246, .9);
}
.ai-verify-btn:disabled { opacity: .5; cursor: not-allowed; }
.ai-verify-btn.is-working { animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-verify-btn.has-verdict { border-color: rgba(34, 224, 255, .5); }
.ai-verify-price {
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  font-size: .68rem;
  letter-spacing: .02em;
}

@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .5); }
  50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
}

.ai-thinking {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1rem;
  border-radius: var(--wt-radius);
  border: 1px dashed rgba(139, 92, 246, .4);
  background: rgba(139, 92, 246, .07);
  font-size: .85rem;
  color: var(--wt-text-muted, #a99cd4);
}
.ai-thinking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4b5fd;
  animation: ai-bounce 1s infinite ease-in-out;
}
.ai-thinking-dot:nth-child(2) { animation-delay: .15s; }
.ai-thinking-dot:nth-child(3) { animation-delay: .3s; }
.ai-thinking-text { margin-left: .5rem; }

@keyframes ai-bounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-5px); opacity: 1; }
}

.ai-verdict {
  position: relative;
  padding: 1.1rem 1.2rem;
  border-radius: var(--wt-radius);
  border: 1px solid var(--wt-border);
  background:
    linear-gradient(160deg, rgba(139, 92, 246, .09), rgba(6, 7, 15, 0) 55%),
    var(--wt-surface, rgba(255, 255, 255, .03));
  overflow: hidden;
}
.ai-verdict::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #c4b5fd, #22e0ff);
}
.ai-verdict-true::before { background: linear-gradient(180deg, #22c55e, #a3e635); }
.ai-verdict-mixed::before { background: linear-gradient(180deg, #ff3ea5, #ff9d4d); }
.ai-verdict-misleading::before { background: linear-gradient(180deg, #ff9d4d, #f43f5e); }
.ai-verdict-false::before { background: linear-gradient(180deg, #f43f5e, #b91c1c); }

.ai-verdict-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}
.ai-verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--wt-border);
}
.ai-verdict-true .ai-verdict-badge { background: rgba(34, 197, 94, .16); color: #86efac; border-color: rgba(34, 197, 94, .4); }
.ai-verdict-mixed .ai-verdict-badge { background: rgba(255, 62, 165, .16); color: #ffb3e2; border-color: rgba(255, 62, 165, .4); }
.ai-verdict-misleading .ai-verdict-badge { background: rgba(255, 157, 77, .16); color: #fdba74; border-color: rgba(255, 157, 77, .4); }
.ai-verdict-false .ai-verdict-badge { background: rgba(244, 63, 94, .16); color: #fda4af; border-color: rgba(244, 63, 94, .4); }
.ai-verdict-unknown .ai-verdict-badge { background: rgba(148, 163, 184, .14); color: #cbd5e1; }

.ai-verdict-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: var(--wt-text-muted, #a99cd4);
}
.ai-chip {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--wt-border);
}

.ai-verdict-headline {
  font-weight: 600;
  margin-bottom: .75rem;
}

.ai-verdict-meters {
  display: grid;
  gap: .4rem;
  margin-bottom: .85rem;
}
.ai-meter {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3rem;
  align-items: center;
  gap: .6rem;
  font-size: .74rem;
  color: var(--wt-text-muted, #a99cd4);
}
.ai-meter-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.ai-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c4b5fd, #22e0ff);
  animation: ai-meter-grow .9s var(--wt-ease) both;
}
.ai-meter-fill-alt { background: linear-gradient(90deg, #ff3ea5, #22c55e); }
.ai-meter-value { text-align: right; font-variant-numeric: tabular-nums; }

@keyframes ai-meter-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

.ai-verdict-summary { font-size: .9rem; margin-bottom: .85rem; }

.ai-sides {
  display: grid;
  gap: .7rem;
  margin-bottom: .85rem;
}
@media (min-width: 768px) {
  .ai-sides { grid-template-columns: 1fr 1fr; }
}
.ai-side {
  padding: .7rem .85rem;
  border-radius: 14px;
  border: 1px solid var(--wt-border);
  background: rgba(255, 255, 255, .03);
  font-size: .84rem;
}
.ai-side h6 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.ai-side p { margin-bottom: 0; }
.ai-side-pro { border-color: rgba(34, 197, 94, .3); }
.ai-side-pro h6 { color: #86efac; }
.ai-side-con { border-color: rgba(244, 63, 94, .3); }
.ai-side-con h6 { color: #fda4af; }

.ai-debunk {
  padding: .7rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(244, 63, 94, .32);
  background: rgba(244, 63, 94, .08);
  font-size: .85rem;
  margin-bottom: .85rem;
}
.ai-debunk h6 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fda4af;
  margin-bottom: .35rem;
}
.ai-debunk p { margin-bottom: 0; }

.ai-claims { list-style: none; padding: 0; margin: 0 0 .85rem; }
.ai-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .45rem 0;
  border-top: 1px solid var(--wt-border);
  font-size: .84rem;
}
.ai-claim-rating {
  flex: 0 0 auto;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(148, 163, 184, .16);
}
.ai-claim-true .ai-claim-rating { background: rgba(34, 197, 94, .2); color: #86efac; }
.ai-claim-false .ai-claim-rating { background: rgba(244, 63, 94, .2); color: #fda4af; }
.ai-claim-mixed .ai-claim-rating { background: rgba(255, 62, 165, .2); color: #ffb3e2; }
.ai-claim-note { width: 100%; font-size: .78rem; color: var(--wt-text-muted, #a99cd4); }

.ai-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  font-size: .78rem;
}
.ai-sources-label { color: var(--wt-text-muted, #a99cd4); }
.ai-source {
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--wt-border);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--wt-ease), transform .2s var(--wt-ease);
}
a.ai-source:hover { border-color: var(--wt-gold); transform: translateY(-1px); }

.ai-verdict-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--wt-border);
  font-size: .76rem;
  color: var(--wt-text-muted, #a99cd4);
}
.ai-disclaimer {
  margin: .45rem 0 0;
  font-size: .7rem;
  opacity: .65;
}

.ai-panel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(34, 224, 255, .25));
  border: 1px solid rgba(139, 92, 246, .45);
  font-size: 1.1rem;
}
.ai-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--wt-border);
  background: rgba(255, 255, 255, .04);
}
.ai-wallet strong { color: var(--wt-gold); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ai-verify-btn.is-working,
  .ai-thinking-dot,
  .ai-meter-fill { animation: none; }
}

/* ── Social autopilot + Post Studio ─────────────────────────────────────── */

.social-table td,
.social-table th { vertical-align: middle; }

.social-score-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.social-score-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wt-gold-dark), var(--wt-gold));
}

.studio-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 992px) {
  .studio-grid { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  .studio-grid { grid-template-columns: 290px minmax(0, 1fr) 320px; }
}

.studio-panel {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  .studio-panel { position: static; max-height: none; }
}

.studio-stage { min-width: 0; }

.studio-canvas-wrap {
  position: relative;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 25%, transparent 0% 50%) 50% / 32px 32px;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  padding: 0.75rem;
  display: flex;
  justify-content: center;
}
.studio-canvas-wrap canvas {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--wt-radius-sm);
  box-shadow: var(--wt-shadow);
  touch-action: none;
  cursor: grab;
}
.studio-canvas-wrap canvas:active { cursor: grabbing; }

.studio-safe {
  position: absolute;
  inset: 10%;
  border: 2px dashed rgba(255, 62, 165, 0.55);
  border-radius: var(--wt-radius-sm);
  pointer-events: none;
}

.studio-layers { max-height: 240px; overflow-y: auto; }
.studio-layer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius-sm);
  margin-bottom: 0.35rem;
  background: var(--wt-surface-2);
}
.studio-layer.is-active { border-color: var(--wt-gold); }
.studio-layer-name {
  flex: 1 1 auto;
  background: none;
  border: 0;
  color: var(--wt-text);
  text-align: left;
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-layer-toggle {
  background: none;
  border: 0;
  color: var(--wt-muted);
  padding: 0.45rem 0.6rem;
}
.studio-layer-toggle:hover { color: var(--wt-gold); }

.studio-swatches { display: flex; gap: 0.35rem; }
.studio-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--wt-border-strong);
  display: inline-block;
}

.share-btn {
  background: none;
  border: 0;
  color: var(--wt-muted);
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.share-btn:hover { color: var(--wt-gold); }
.share-btn[disabled] { opacity: 0.6; cursor: default; }

/* ── Membership: plan cards, checkout options, allowance meters ───────────── */
.wt-plan-card {
  display: flex;
  flex-direction: column;
}
.wt-plan-card-featured {
  border-color: rgba(255, 62, 165, .45);
  box-shadow: var(--wt-shadow), var(--wt-glow-gold);
}
.wt-plan-price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.wt-plan-amount {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--wt-gold);
  line-height: 1;
}
.wt-plan-option {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius-sm);
  background: var(--wt-surface-2);
  cursor: pointer;
  transition: border-color .25s var(--wt-ease), background .25s var(--wt-ease);
}
.wt-plan-option:hover { border-color: var(--wt-border-strong); }
.wt-plan-option.is-selected {
  border-color: rgba(255, 62, 165, .6);
  background: rgba(255, 62, 165, .08);
}
.wt-plan-meter .progress { background: rgba(255, 255, 255, .07); }
.wt-plan-meter .progress-bar.bg-gold { background: var(--wt-gold) !important; }
.wt-upgrade-card {
  border-color: rgba(255, 62, 165, .4);
  background: linear-gradient(165deg, rgba(255, 62, 165, .12), rgba(255, 255, 255, .015)), var(--wt-surface);
}
.wt-limit-alert { border-radius: var(--wt-radius-sm); }
.wt-comment {
  display: flex;
  gap: .65rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--wt-border);
}
.wt-comment:last-of-type { border-bottom: 0; }
.wt-comment-form { margin-top: .75rem; }

/* ── First-year special ─────────────────────────────────────────────────── */
.wt-plan-price { flex-wrap: wrap; }
.wt-plan-was {
  color: var(--wt-text-muted, #a99cd4);
  text-decoration: line-through;
  font-size: 1.05rem;
  font-weight: 600;
}
.wt-plan-save { align-self: center; }
.wt-offer-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .75rem 1rem;
  border-radius: var(--wt-radius-sm);
  border: 1px solid rgba(255, 62, 165, .45);
  background: linear-gradient(120deg, rgba(255, 62, 165, .16), rgba(255, 255, 255, .02));
  box-shadow: var(--wt-glow-gold);
  font-size: .95rem;
}
.wt-offer-flag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--wt-gold);
  color: #20063a;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  animation: wt-offer-pulse 2.6s ease-in-out infinite;
}
@keyframes wt-offer-pulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-offer-flag { animation: none; }
}

/* ── Argument window (Facebook-style feed) ──────────────────────────────── */
.wt-arena-shell { position: relative; z-index: 1; }
.wt-fb-card {
  background: var(--wt-surface);
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow);
  padding: 1.15rem 1.25rem;
  backdrop-filter: blur(14px);
}
@media (min-width: 768px) {
  .wt-fb-card { padding: 1.5rem 1.75rem; }
}
.wt-arg-window {
  position: relative;
  overflow: hidden;
  animation: wt-fb-rise .5s var(--wt-ease) both;
}
.wt-arg-window::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--wt-neutral);
  box-shadow: 0 0 24px 2px var(--wt-neutral-glow);
}
.wt-arg-window.side-pro::before { background: var(--wt-pro); box-shadow: 0 0 24px 2px var(--wt-pro-glow); }
.wt-arg-window.side-con::before { background: var(--wt-con); box-shadow: 0 0 24px 2px var(--wt-con-glow); }
.wt-arg-window::after {
  content: '';
  position: absolute;
  top: -60%;
  right: -25%;
  width: 60%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255, 62, 165, .13), transparent);
  pointer-events: none;
  animation: wt-fb-drift 12s ease-in-out infinite alternate;
}
@keyframes wt-fb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes wt-fb-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-8%, 6%, 0); }
}
.wt-fb-card-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .9rem;
}
.wt-fb-avatar {
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--wt-border-strong);
}
.wt-fb-author {
  color: var(--wt-text);
  font-weight: 700;
  text-decoration: none;
}
.wt-fb-author:hover { color: var(--wt-gold); }
.wt-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--wt-border-strong);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.wt-rank-chip.is-champ {
  color: #20063a;
  background: var(--wt-gold);
  border-color: transparent;
  box-shadow: var(--wt-glow-gold);
}
.wt-arg-title {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.wt-arg-body {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--wt-text);
  overflow-wrap: anywhere;
}
.wt-fb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--wt-border);
  font-size: .88rem;
  color: var(--wt-muted);
}
.wt-fb-net.is-positive { color: var(--wt-pro); }
.wt-fb-net.is-negative { color: var(--wt-con); }
.wt-fb-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding-top: .5rem;
}
.wt-fb-mainaction {
  flex: 1 1 0;
  min-width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .7rem;
  border-radius: var(--wt-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--wt-muted);
  font-weight: 600;
  font-size: .92rem;
  transition: background .2s var(--wt-ease), color .2s var(--wt-ease), transform .18s var(--wt-ease);
}
.wt-fb-mainaction:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06);
  color: var(--wt-text);
  transform: translateY(-1px);
}
.wt-fb-mainaction:disabled { opacity: .5; cursor: not-allowed; }
.wt-fb-mainaction.is-active { color: var(--wt-gold); }
.wt-fb-mainaction.voted-up.is-active { color: var(--wt-pro); text-shadow: 0 0 18px var(--wt-pro-glow); }
.wt-fb-mainaction.voted-down.is-active { color: var(--wt-con); text-shadow: 0 0 18px var(--wt-con-glow); }
.wt-fb-count {
  font-size: .78rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

/* Thread */
.wt-fb-thread-head {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.wt-fb-sort { display: flex; gap: .25rem; }
.wt-fb-sort-btn {
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wt-muted);
  text-decoration: none;
}
.wt-fb-sort-btn:hover { background: rgba(255, 255, 255, .07); color: var(--wt-text); }
.wt-fb-sort-btn.is-active { background: var(--wt-gold); color: #20063a; }
.wt-fb-comment-list { display: flex; flex-direction: column; gap: .35rem; }
.wt-fb-comment {
  display: flex;
  gap: .6rem;
  padding: .35rem 0;
  animation: wt-fb-rise .35s var(--wt-ease) both;
}
.wt-fb-comment.is-reply { margin-left: .35rem; }
.wt-fb-comment-main { min-width: 0; flex: 1 1 auto; }
.wt-fb-bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: .55rem .85rem .7rem;
  border-radius: 18px;
  background: var(--wt-surface-2);
  border: 1px solid var(--wt-border);
}
.wt-fb-bubble-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
}
.wt-fb-text {
  font-size: .95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.wt-fb-text a { color: var(--wt-gold); }
.wt-mention { color: var(--wt-accent-2); font-weight: 600; }
.wt-fb-sticker {
  display: block;
  margin-top: .45rem;
  border-radius: var(--wt-radius-sm);
  max-width: 140px;
  height: auto;
}
.wt-fb-reaction-summary {
  position: absolute;
  right: .4rem;
  bottom: -.7rem;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--wt-surface-3);
  border: 1px solid var(--wt-border-strong);
  font-size: .74rem;
  box-shadow: 0 4px 14px -6px #000;
}
.wt-fb-reaction-chip { font-size: .82rem; line-height: 1; }
.wt-fb-reaction-total { color: var(--wt-muted); font-weight: 600; }
.wt-fb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: .5rem .35rem 0;
  font-size: .8rem;
}
.wt-fb-action {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--wt-muted);
  font-weight: 700;
  font-size: .8rem;
  text-decoration: none;
}
.wt-fb-action:hover:not(:disabled) { color: var(--wt-text); text-decoration: underline; }
.wt-fb-action:disabled { opacity: .55; cursor: not-allowed; }
.wt-fb-action.is-active { color: var(--wt-gold); }
.wt-fb-action-emoji { font-size: .95rem; }
.wt-fb-time { color: var(--wt-muted); font-size: .76rem; }
.wt-fb-react-wrap { position: relative; }
.wt-fb-react-pop {
  position: absolute;
  bottom: 115%;
  left: 0;
  display: flex;
  gap: .15rem;
  padding: .3rem .4rem;
  border-radius: 999px;
  background: var(--wt-surface-3);
  border: 1px solid var(--wt-border-strong);
  box-shadow: var(--wt-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.92);
  transition: all .18s var(--wt-ease);
  z-index: 5;
}
.wt-fb-react-wrap:hover .wt-fb-react-pop,
.wt-fb-react-wrap:focus-within .wt-fb-react-pop,
.wt-fb-react-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.wt-fb-react-opt {
  border: 0;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  padding: .1rem .15rem;
  transition: transform .16s var(--wt-ease);
}
.wt-fb-react-opt:hover:not(:disabled) { transform: translateY(-6px) scale(1.35); }
.wt-fb-replies { display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; }
.wt-fb-replies:not(:empty) { padding-left: .9rem; border-left: 2px solid var(--wt-border); }
.wt-fb-reply-slot { margin-top: .4rem; }

/* Composer */
.wt-fb-composer {
  display: flex;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.wt-fb-composer-main {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--wt-border);
  border-radius: var(--wt-radius);
  background: var(--wt-surface-2);
  padding: .55rem .75rem;
  transition: border-color .2s var(--wt-ease), box-shadow .2s var(--wt-ease);
}
.wt-fb-composer-main:focus-within {
  border-color: rgba(255, 62, 165, .5);
  box-shadow: var(--wt-glow-gold);
}
.wt-fb-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--wt-text);
  resize: none;
  outline: none;
  font-size: .95rem;
  line-height: 1.5;
  max-height: 220px;
}
.wt-fb-input::placeholder { color: var(--wt-muted); }
.wt-fb-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .4rem;
}
.wt-fb-tools { display: flex; gap: .2rem; }
.wt-fb-tool {
  border: 0;
  background: none;
  color: var(--wt-muted);
  font-size: 1.05rem;
  padding: .15rem .35rem;
  border-radius: 8px;
  transition: color .18s var(--wt-ease), background .18s var(--wt-ease);
}
.wt-fb-tool:hover, .wt-fb-tool.is-open { color: var(--wt-gold); background: rgba(255, 255, 255, .07); }
.wt-fb-gif-badge {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  padding: 0 .22rem;
}
.wt-fb-panel {
  margin-top: .5rem;
  padding: .55rem;
  border-radius: var(--wt-radius-sm);
  background: var(--wt-surface-3);
  border: 1px solid var(--wt-border);
  animation: wt-fb-rise .22s var(--wt-ease) both;
}
.wt-fb-emoji {
  border: 0;
  background: none;
  font-size: 1.2rem;
  padding: .1rem .25rem;
  transition: transform .16s var(--wt-ease);
}
.wt-fb-emoji:hover { transform: scale(1.35); }
.wt-fb-panel-stickers { max-height: 320px; overflow-y: auto; }
.wt-fb-sticker-group + .wt-fb-sticker-group { margin-top: .6rem; }
.wt-fb-sticker-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wt-muted);
  margin-bottom: .3rem;
}
.wt-fb-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: .35rem;
}
.wt-fb-sticker-btn {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--wt-radius-sm);
  padding: .2rem;
  transition: transform .18s var(--wt-ease), border-color .18s var(--wt-ease);
}
.wt-fb-sticker-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(255, 62, 165, .55);
}
.wt-fb-sticker-btn img { width: 100%; height: auto; display: block; }
.wt-fb-sticker-preview { position: relative; display: inline-block; margin-top: .45rem; }
.wt-fb-sticker-preview img { border-radius: var(--wt-radius-sm); }
.wt-fb-sticker-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--wt-border-strong);
  background: var(--wt-surface-solid);
  color: var(--wt-text);
  font-size: .7rem;
  line-height: 1;
}
.wt-fb-login-prompt {
  text-align: center;
  padding: 1rem;
  border: 1px dashed var(--wt-border-strong);
  border-radius: var(--wt-radius-sm);
  margin-bottom: 1rem;
}

/* Sidebar */
.wt-rival-list a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .1rem;
  color: var(--wt-text);
  text-decoration: none;
  border-bottom: 1px solid var(--wt-border);
}
.wt-rival-list li:last-child a { border-bottom: 0; }
.wt-rival-list a:hover .wt-rival-title { color: var(--wt-gold); }
.wt-rival-rank { color: var(--wt-gold); font-weight: 700; }
.wt-rival-title { flex: 1 1 auto; min-width: 0; }
.wt-rival-score {
  font-weight: 700;
  font-size: .78rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

/* Floating like burst */
.wt-float-emoji {
  position: fixed;
  z-index: 1090;
  pointer-events: none;
  font-size: 1.6rem;
  animation: wt-float-up 1s ease-out forwards;
}
@keyframes wt-float-up {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-70px) scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-arg-window, .wt-fb-comment, .wt-fb-panel { animation: none; }
  .wt-arg-window::after { animation: none; }
  .wt-float-emoji { display: none; }
}
@media (max-width: 575.98px) {
  .wt-fb-mainaction span:not(.wt-fb-count) { font-size: .82rem; }
  .wt-fb-mainaction { min-width: 0; }
  .wt-fb-bubble { border-radius: 14px; }
}

/* ============================================================
   Arcade vector layers, playful shapes & game-style motion (v3)
   ============================================================ */

/* Perspective "arcade floor" that runs under the whole site */
.wt-backdrop-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -6%;
  height: 46vh;
  background:
    repeating-linear-gradient(90deg, rgba(34, 224, 255, .30) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg, rgba(255, 62, 165, .26) 0 2px, transparent 2px 70px);
  transform: perspective(520px) rotateX(70deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 5%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 88%);
  opacity: .55;
  animation: floorRun 6s linear infinite;
}
@keyframes floorRun {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 0, 0 70px; }
}

/* Floating vector shape confetti (SVG sprite layer) */
.wt-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wt-shape {
  position: absolute;
  display: block;
  opacity: .3;
  will-change: transform;
  filter: drop-shadow(0 10px 26px rgba(255, 62, 165, .35));
  animation: shapeFloat 18s var(--wt-ease) infinite alternate;
}
.wt-shape svg { display: block; width: 100%; height: 100%; }
.wt-shape-1 { width: 96px;  height: 96px;  top: 9%;   left: 2.5%; animation-duration: 17s; }
.wt-shape-2 { width: 70px;  height: 70px;  top: 26%;  right: 9%;  animation-duration: 21s; animation-delay: -4s; }
.wt-shape-3 { width: 120px; height: 120px; bottom: 14%; left: 3%;  animation-duration: 24s; animation-delay: -9s; }
.wt-shape-4 { width: 62px;  height: 62px;  top: 58%;  right: 16%; animation-duration: 19s; animation-delay: -6s; }
.wt-shape-5 { width: 84px;  height: 84px;  top: 4%;   right: 3%;  animation-duration: 26s; animation-delay: -12s; }
.wt-shape-6 { width: 54px;  height: 54px;  bottom: 8%; right: 38%; animation-duration: 15s; animation-delay: -3s; }
@keyframes shapeFloat {
  from { transform: translate3d(0, 0, 0) rotate(-12deg) scale(.94); }
  to { transform: translate3d(28px, -46px, 0) rotate(18deg) scale(1.1); }
}

/* Neon light rays sweeping over the hero */
.wt-rays {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 160vw;
  height: 110vh;
  transform: translateX(-50%);
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 0deg, rgba(255, 62, 165, .16) 12deg, transparent 26deg,
      transparent 40deg, rgba(34, 224, 255, .14) 54deg, transparent 70deg,
      transparent 290deg, rgba(139, 92, 246, .16) 306deg, transparent 322deg);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 10%, transparent 78%);
  animation: raySweep 24s linear infinite;
  opacity: .85;
}
@keyframes raySweep {
  from { transform: translateX(-50%) rotate(-6deg); }
  50% { transform: translateX(-50%) rotate(6deg); }
  to { transform: translateX(-50%) rotate(-6deg); }
}

/* Playful "game" helpers usable on any page */
.wt-play-text {
  background: var(--wt-play);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: gradientPan 6s linear infinite;
}
.btn-play {
  background: var(--wt-play);
  background-size: 200% auto;
  border: none;
  color: #10021f !important;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 14px 34px -14px rgba(255, 62, 165, .95), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .2s var(--wt-bounce), box-shadow .25s var(--wt-ease), background-position .5s var(--wt-ease);
}
.btn-play:hover {
  background-position: 100% center;
  transform: translateY(-3px) scale(1.03);
  color: #10021f !important;
  box-shadow: 0 22px 48px -16px rgba(34, 224, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Neon frame that can wrap any card for an arcade cabinet feel */
.wt-neon-frame {
  position: relative;
  isolation: isolate;
}
.wt-neon-frame::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--wt-play);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: neonPan 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes neonPan {
  to { background-position: 300% center; }
}

/* Score/stat pop, used for live counters */
.wt-pop { animation: wtPop .45s var(--wt-bounce); }
@keyframes wtPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-shape, .wt-rays, .wt-backdrop-floor, .wt-neon-frame::before { animation: none !important; }
}
@media (max-width: 767.98px) {
  .wt-shape-3, .wt-shape-5, .wt-shape-6 { display: none; }
  .wt-backdrop-floor { height: 32vh; opacity: .4; }
}
@media print {
  .wt-shapes, .wt-rays, .wt-backdrop-floor { display: none !important; }
}

/* ---------- Arcade polish on core components ---------- */
#wt-scroll-progress {
  height: 4px;
  background: var(--wt-play);
  background-size: 200% auto;
  box-shadow: 0 0 18px rgba(255, 62, 165, .7);
  animation: neonPan 4s linear infinite;
}

.hero-badge {
  color: #fff;
  background: linear-gradient(120deg, rgba(255, 62, 165, .22), rgba(34, 224, 255, .18));
  border-color: rgba(255, 62, 165, .5);
}

.stat-value {
  background: var(--wt-play);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientPan 8s linear infinite;
}

/* Live scoreboard reads like an arcade cabinet */
.arena-panel {
  border-color: rgba(255, 62, 165, .28);
  box-shadow: var(--wt-shadow), 0 0 60px -30px rgba(255, 62, 165, .8);
}
.arena-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.section-title { letter-spacing: -0.03em; }
.section-title .text-gold,
.section-title .wt-play-text { background: var(--wt-play); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.wt-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 10, 44, 0.65), rgba(5, 1, 15, 0.95));
}
.wt-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--wt-play);
  background-size: 200% auto;
  animation: neonPan 7s linear infinite;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  #wt-scroll-progress, .stat-value, .wt-footer::before { animation: none !important; }
}