/* Wank Battles standalone — extracted theme + battle UI */

/* porn4betas.com - Beta Social Hub Theme
   Colors locked — polish is hierarchy, type, elevation, motion, a11y */
:root {
  /* Brand colors (do not change) */
  --bg: #0a0a0f;
  --card: #121217;
  --accent: #ff2e63;
  --accent2: #c026ff;
  --text: #f0e6ff;
  --muted: #9a8aa3;
  --beta-pink: #ff69b4;
  --denied: #4a0e2e;

  /* Surfaces & borders (same palette family) */
  --surface-elevated: #15151c;
  --surface-hover: #1a1220;
  --border: #2a1f2f;
  --border-strong: #3f2a40;
  --border-soft: rgba(255, 240, 255, 0.06);
  --accent-soft: rgba(255, 46, 99, 0.14);
  --accent-glow: rgba(255, 46, 99, 0.28);
  --pink-soft: rgba(255, 105, 180, 0.16);
  --purple-soft: rgba(192, 38, 255, 0.14);

  /* Typography */
  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "DM Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* Spacing & radius (8pt scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.15rem;
  --radius-xl: 1.35rem;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 2px 8px -4px rgb(0 0 0 / 0.55);
  --shadow-md: 0 12px 32px -16px rgb(0 0 0 / 0.75);
  --shadow-lg: 0 24px 48px -20px rgb(0 0 0 / 0.85);
  --shadow-accent: 0 12px 40px -14px var(--accent-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  /* Quiet OLED base — subtle brand wash only at top */
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(192, 38, 255, 0.045), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(255, 46, 99, 0.35);
  color: #fff;
}

/* Global interactive polish */
button,
[role="button"],
.beta-btn,
.nav-tab,
.feed-mode-tab,
.discover-tag,
.beta-tag,
.site-footer__link,
a {
  cursor: pointer;
}

button:disabled,
.beta-btn:disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.beta-btn:focus-visible,
.nav-tab:focus-visible,
.feed-mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.text-muted,
.muted {
  color: var(--muted);
}

.site-footer__link {
  color: var(--beta-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__link:hover {
  color: #ff8cc8;
}

.site-footer {
  border-top-color: var(--border) !important;
  color: var(--muted);
}

.site-footer strong {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Visually hidden (a11y labels) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.font-display {
  font-family: var(--font-display);
}

.beta-header {
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.92) 0%, rgba(18, 12, 22, 0.88) 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 28px -18px rgb(0 0 0 / 0.8);
}

.beta-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--text) 0%, #ffb3d9 55%, var(--beta-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beta-header__badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--pink-soft);
  color: var(--beta-pink);
  border: 1px solid rgba(255, 105, 180, 0.28);
  font-family: var(--font-mono);
}

.post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: none;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

@media (min-width: 640px) {
  .post-card {
    margin-bottom: 1.15rem;
  }

  .post-card:hover {
    border-color: rgba(255, 105, 180, 0.2);
    box-shadow: 0 10px 28px -18px rgb(0 0 0 / 0.7);
  }
}

.post-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

}

.beta-btn {
  background: #1f1624;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  font-weight: 500;
}

.beta-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.beta-btn:active {
  transform: scale(0.97);
}

.beta-btn.accent {
  background: linear-gradient(135deg, #ff2e63 0%, #e11d48 55%, #c026ff 160%);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px var(--accent-glow);
}

.beta-btn.accent:hover {
  filter: brightness(1.08);
  color: white;
  border-color: transparent;
}

.beta-btn.accent:active {
  filter: brightness(0.96);
}

/* Primary CTA used in age gate / join */
.btn-primary {
  background: linear-gradient(135deg, #ff2e63 0%, #ff4d7a 50%, #e11d48 100%);
  color: #fff;
  border: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 28px -10px var(--accent-glow);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 36px -10px var(--accent-glow);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}

.age-gate {
  background:
    radial-gradient(800px 400px at 50% 20%, rgba(255, 46, 99, 0.12), transparent 60%),


.modal input:not([type="checkbox"]):not([type="radio"]),
.modal-sheet input:not([type="checkbox"]):not([type="radio"]),
.modal textarea,
.modal-sheet textarea,
.modal select,
.modal-sheet select {
  border-radius: var(--radius-md) !important;
  min-height: 2.75rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.modal input:focus,
.modal-sheet input:focus,
.modal textarea:focus,
.modal-sheet textarea:focus,
.modal select:focus,
.modal-sheet select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.disclaimer {
  font-size: 0.75rem;
  color: #77667f;
}

.tag-filter.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 46, 99, 0.25);
}

/* Beta timer FAB */
.beta-timer-fab {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, #241a2c 0%, #1f1624 100%);
  color: #ff69b4;
  font-size: 1.35rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.beta-timer-fab:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

}

.modal-sheet {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 1.35rem 1.35rem 0 0;
  position: relative;
}

.modal-sheet::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  margin: 0.55rem auto 0.15rem;
}

@media (min-width: 640px) {
  .modal-sheet {
    border-radius: var(--radius-xl);
    max-width: 36rem;
  }

  .modal-sheet::before {
    display: none;
  }
}

.modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop > .modal,
.modal-backdrop > .modal-sheet {
  animation: popIn var(--dur) var(--ease-out);
}

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  background: linear-gradient(180deg, var(--surface-elevated), var(--card));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  animation: popIn var(--dur-fast) var(--ease-out);
}

.user-menu button,
.user-menu a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.user-menu button:hover,
.user-menu a:hover {
  background: var(--surface-hover);
  color: var(--beta-pink);
}

.discover-tag {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;

}

.p4b-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
  max-width: calc(100vw - 2rem);
  z-index: 999;
  text-align: center;
}

@media (min-width: 640px) {
  .p4b-toast {
    left: auto;
    right: 1rem;
    transform: none;
    bottom: 1rem;
    text-align: left;
  }

  .beta-timer-hud {
    right: 6.5rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 639px) {
  .post-card:hover {
    box-shadow: none;
    border-color: var(--border);
  }

  .post-image-container img {
    max-height: 70vh;
  }

  .beta-timer-hud {
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 8.5rem);
    min-width: 4.75rem;
    padding: 0.45rem 0.6rem;
  }

  .beta-timer-hud__time {
    font-size: 1rem;
  }

  .age-gate .flex {
    flex-direction: column;
  }
}

@media (hover: none) {
  .beta-btn:hover,
  .beta-timer-fab:hover,
  .post-card:hover,
  .discover-tag:hover {
    transform: none;
  }
}

/* Reduced motion: kill decorative animation, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Empty / loading feed polish */
.feed-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.feed-skeleton__card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--card) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.feed-skeleton__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem 0.7rem;
}

}

.feed-empty__actions .beta-btn,
.feed-empty__actions .btn-primary {
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
}

.feed-error {
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 46, 99, 0.28);
  background: rgba(74, 14, 46, 0.25);
}

.feed-error__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fda4af;
  margin-bottom: 0.35rem;
}

.feed-error__desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.like-btn.liked {
  color: var(--accent);
  border-color: rgba(255, 46, 99, 0.45);
  background: var(--accent-soft);
}

.favorite-btn.favorited {
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
}


}

.beta-bits-chip--claimable {
  animation: beta-bits-chip-pulse 2s ease-in-out infinite;
  border-color: rgba(255, 105, 180, 0.55);
}

.nav-tab--claim-pulse {
  color: #fcd34d !important;
  animation: daily-claim-pulse 2.4s ease-in-out infinite;
}

@keyframes beta-bits-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

.feed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feed-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.18rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.feed-mode-tab {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  min-height: 2.25rem;
}

.feed-mode-tab:hover {
  color: var(--text);
}

.feed-mode-tab.active {

}

.beta-bits-chip--lg {
  font-size: 0.85rem;
  padding: 0.3rem 0.65rem;
}

.beta-bits-balance {
  background: linear-gradient(135deg, #1a1410 0%, #121217 100%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}

.beta-bits-balance__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251, 191, 36, 0.75);
}

.beta-bits-balance__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fcd34d;
  margin-top: 0.15rem;
}

.beta-bits-balance__today {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.goddess-diamond-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  color: #f0abfc;
  font-weight: 600;
}


  }
}
.beta-bits-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fcd34d;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.beta-bits-chip__icon {
  font-size: 0.62rem;
  opacity: 0.85;
}

.trading-card-feed {
  background: linear-gradient(145deg, #1a1410 0%, #121217 55%, #121217 100%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08);
}

.trading-card-feed__frame {
  position: relative;
  background: #0a0a0f;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  overflow: hidden;
}

.trading-card-feed__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trading-card-feed__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  background: rgba(251, 191, 36, 0.9);
  color: #1a1410;
}

.trading-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.trading-card-grid--polished {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 0.85rem;
}

.trading-card-item {
  background: #121217;
  border: 1px solid #2a1f2f;
  border-radius: 0.85rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.trading-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}

.trading-card-item--uncommon { border-color: rgb(110 231 183 / 0.35); }
.trading-card-item--rare { border-color: rgb(147 197 253 / 0.4); }
.trading-card-item--epic { border-color: rgb(196 181 253 / 0.45); }
.trading-card-item--legendary {
  border-color: rgb(252 211 77 / 0.55);
  box-shadow: 0 0 0 1px rgb(252 211 77 / 0.12);
}

.trading-card-item--trigger {
  box-shadow: 0 0 0 1px rgb(255 105 180 / 0.35);
}

.trading-card-item__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  background: #0a0a0f;
}

.trading-card-item__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trading-card-item__badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.7rem;
  color: #fcd34d;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

.trading-card-item__body {
  padding: 0.55rem 0.6rem 0.65rem;
}

.trading-card-item__caption {
  font-size: 0.68rem;
  line-height: 1.35;
}

.trading-card-item__caption-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}

.trading-card-item__caption-btn:hover {
  color: #fcd34d;
}

.trading-card-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: 0.58rem;
  color: var(--muted);
}

.trading-card-item__record {
  color: rgb(251 113 133 / 0.85);
  font-weight: 600;
}

.trading-card-item__quick-tip {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgb(251 191 36 / 0.35);
  background: rgb(251 191 36 / 0.08);
  color: #fcd34d;
  cursor: pointer;
}

.trading-card-item__status {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
  background: rgb(0 0 0 / 0.65);
  border: 1px solid rgb(255 255 255 / 0.12);
}

.trading-card-item__status--trigger { color: #f9a8d4; }
.trading-card-item__status--frame { color: #fcd34d; }

.trading-card-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.cards-collection-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid rgb(251 191 36 / 0.22);
  background: linear-gradient(135deg, rgb(26 20 16 / 0.9), rgb(18 18 23 / 0.95));
}

.cards-rarity-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.15rem;
}

.cards-rarity-chip {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(42, 31, 47, 0.9);
  background: rgba(10, 10, 15, 0.45);
  color: #d4c4e8;
}

.cards-rarity-chip--legendary { border-color: rgba(251, 191, 36, 0.45); color: #fcd34d; }
.cards-rarity-chip--epic { border-color: rgba(192, 132, 252, 0.45); color: #c084fc; }
.cards-rarity-chip--rare { border-color: rgba(96, 165, 250, 0.4); color: #93c5fd; }
.cards-rarity-chip--uncommon { border-color: rgba(52, 211, 153, 0.35); color: #6ee7b7; }

}

.trading-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.trading-card-stats__name {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fef3c7;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.85);
}

.trading-card-stats__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  color: #e5e7eb;
}

.trading-card-stats__stat strong {
  color: #fcd34d;
  font-weight: 700;
}

.trading-card-stats__rarity {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  background: rgb(0 0 0 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.12);
}

.trading-card-rarity--common { color: #9ca3af; }
.trading-card-rarity--uncommon { color: #6ee7b7; border-color: rgb(110 231 183 / 0.35); }
.trading-card-rarity--rare { color: #93c5fd; border-color: rgb(147 197 253 / 0.35); }
.trading-card-rarity--epic { color: #c4b5fd; border-color: rgb(196 181 253 / 0.35); }
.trading-card-rarity--legendary { color: #fcd34d; border-color: rgb(252 211 77 / 0.45); }

.trading-card-stats--compact .trading-card-stats__name {
  font-size: 0.62rem;
}

.trading-card-stats--compact .trading-card-stats__row {
  font-size: 0.55rem;
  gap: 0.3rem;
}

/* Wank Battles */
.wank-battles-header h1 {
  letter-spacing: 0.02em;
}

.wank-deck-panel {
  border: 1px solid rgba(255, 105, 180, 0.18);
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgb(22 14 24 / 0.7), #121217);
}

.wank-deck-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

@media (min-width: 480px) {
  .wank-deck-panel__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wank-deck-stat {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #2a1f2f;
  border-radius: 0.65rem;
  padding: 0.5rem 0.65rem;
}

.wank-deck-stat__label {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.wank-deck-stat__value {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.wank-deck-panel__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wank-deck-chip {
  position: relative;
  width: 2.75rem;
  height: 3.75rem;
  border-radius: 0.45rem;
  overflow: hidden;
  border: 1px solid #2a1f2f;
  background: #000;
}

.wank-deck-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wank-deck-chip__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.9rem;
  color: var(--muted);
}

.wank-deck-chip__atk {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.75);
  color: #fbbf24;
  padding: 0.1rem 0;
}

.wank-history-row {
  border-color: rgba(255, 105, 180, 0.12);
}

.wank-battles-section__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(251 113 133 / 0.9);
  margin-bottom: 0.65rem;
}

.wank-battle-card {
  background: #121217;
  border: 1px solid rgb(251 113 133 / 0.25);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
}

.wank-battle-card--compact {
  padding: 0.65rem 0.85rem;
}

.wank-battle-card__header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fecdd3;
  margin-bottom: 0.65rem;
}

.wank-battle-card__versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.wank-battle-card__versus--small {
  gap: 0.5rem;
}

.wank-battle-card__vs {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fb7185;
  letter-spacing: 0.1em;
}

.wank-battle-thumb {
  width: 4.5rem;
  text-align: center;
  flex-shrink: 0;
}

.wank-battle-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid #2a1f2f;
}

.wank-battle-thumb__empty {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0c;
  border-radius: 0.45rem;
  border: 1px solid #2a1f2f;
  color: #6b7280;
  font-size: 1.25rem;
}

.wank-battle-thumb__empty--npc {
  background: rgb(251 113 133 / 0.08);
  border-color: rgb(251 113 133 / 0.35);
  font-size: 1.5rem;
}

.wank-battle-queue-active .wank-battle-card {
  animation: wank-queue-pulse 2s ease-in-out infinite;
}

@keyframes wank-queue-pulse {
  0%, 100% { border-color: rgb(251 113 133 / 0.25); }
  50% { border-color: rgb(251 113 133 / 0.55); }
}

/* Wank Battlefield — TCG board (Hearthstone-inspired layout, beta theme) */
.wank-battlefield-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, rgb(251 113 133 / 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at center, #1a0f24 0%, #06040a 72%);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.wank-battlefield-overlay.hidden {
  display: none !important;
}

.wank-bf {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.wank-bf__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55), transparent);
  flex-shrink: 0;
}

.wank-bf__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fecdd3;
}

.wank-bf__wager {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.04em;
}

.wank-bf__leave {
  font-size: 0.65rem;
  font-weight: 600;
  color: #9ca3af;
  background: rgb(0 0 0 / 0.45);
  border: 1px solid rgb(251 113 133 / 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wank-bf__leave:hover {
  color: #fecdd3;
  border-color: rgb(251 113 133 / 0.5);
}

.wank-bf__table {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.25rem 0.35rem 0.5rem;
  min-height: min(100%, 100vh);
}

.wank-bf__table-rim {
  display: none;
}

.wank-bf__table-inner {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 3.5rem);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 0.35rem;
  padding: 0.75rem 3.25rem 0.85rem;
  border-radius: 1.35rem;
  background:
    linear-gradient(165deg, #2a1528 0%, #1a0f1f 18%, #3d2238 42%, #2a1528 58%, #1a0f1f 82%, #120a14 100%);
  border: 3px solid #5c3a4a;
  box-shadow:
    inset 0 0 0 1px rgb(251 113 133 / 0.15),
    inset 0 2px 24px rgb(0 0 0 / 0.45),
    0 12px 40px rgb(0 0 0 / 0.65);
}

.wank-bf__deck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  z-index: 1;
  /* Decorative only — must not steal board-card taps */
  pointer-events: none;
}

.wank-bf__deck--mine {
  left: 0.35rem;
}

.wank-bf__deck--opp {
  right: 0.35rem;
}

.wank-bf__deck-stack {
  width: 2.35rem;
  height: 3.25rem;
  border-radius: 0.4rem;
  background-size: cover;
  background-position: center;
  border: 1px solid #3f2a40;
  box-shadow:
    3px 3px 0 #0a0a0c,
    6px 6px 0 rgb(0 0 0 / 0.35);
}

.wank-bf__deck-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  background: rgb(0 0 0 / 0.7);
  border: 1px solid rgb(251 113 133 / 0.35);
  border-radius: 999px;
  min-width: 1.35rem;
  text-align: center;
  padding: 0.05rem 0.35rem;
}

.wank-bf__deck-label {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.wank-bf__opponent-bar,
.wank-bf__player-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 3;
}

.wank-bf__player-bar {
  flex-wrap: wrap;
}

.wank-bf__hero {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wank-bf__hero--opp {
  flex-direction: row-reverse;
}

.wank-bf__hero-frame {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(145deg, #fcd34d, #fb7185 45%, #7c3aed);
  box-shadow: 0 0 14px rgb(251 113 133 / 0.35);
  flex-shrink: 0;
}

.wank-bf__hero--opp .wank-bf__hero-frame {
  background: linear-gradient(145deg, #a78bfa, #fb7185 50%, #4c1d4f);
}

.wank-bf__hero-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a0f1f, #0a0a0f);
  border: 2px solid #2a1f2f;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--beta-pink);
}

.wank-bf__hero-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.wank-bf__hero--opp .wank-bf__hero-plate {
  align-items: center;
}

.wank-bf__hero-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #e5e7eb;
  max-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wank-bf__hero-score {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ef4444, #991b1b 70%);
  border: 2px solid #fca5a5;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  font-variant-numeric: tabular-nums;
}

.wank-bf__prompt {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  text-align: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  max-width: 14rem;
  line-height: 1.35;
}

.wank-bf__prompt.is-active {
  color: #fecdd3;
  border-color: rgb(251 113 133 / 0.45);
  background: rgb(251 113 133 / 0.1);
  animation: wank-prompt-pulse 1.6s ease-in-out infinite;
}

@keyframes wank-prompt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(251 113 133 / 0.25); }
  50% { box-shadow: 0 0 12px 2px rgb(251 113 133 / 0.2); }
}

.wank-bf__hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 6.5rem;
  padding: 0 0.5rem;
  z-index: 3;
  gap: 0.35rem;
  position: relative;
}

/* During attack, hand must not sit above the mat and eat board taps */
.wank-bf__hand--attack-phase {
  z-index: 2;
  min-height: 5.5rem;
  opacity: 0.92;
}

.wank-bf__hand--attack-phase .wank-play-card--in-hand {
  width: clamp(3.5rem, 9vw, 5rem);
  pointer-events: none;
}

.wank-bf__hand-slot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  color: inherit;
  font: inherit;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(251 113 133 / 0.35);
}

.wank-bf__hand-slot--playable {
  cursor: pointer;
  position: relative;
  z-index: 30;
  min-width: 4.5rem;
  padding-bottom: 0.15rem;
}

.wank-bf__hand-slot--playable:active .wank-play-card {
  transform: translateY(-10px) scale(1.05);
}

.wank-bf__play-hint {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fda4af;
  line-height: 1;
  pointer-events: none;
}

/* In-overlay bal ATK/DEF chooser (above battlefield z-index) */
.wank-v2-bal-pick {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.wank-v2-bal-pick.hidden {
  display: none !important;
}

.wank-v2-bal-pick__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 0.55);
  cursor: pointer;
}

.wank-v2-bal-pick__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1rem 1rem;
  border-radius: 1.15rem 1.15rem 0.85rem 0.85rem;
  border: 1px solid rgb(251 113 133 / 0.35);
  background: linear-gradient(165deg, #1a1220 0%, #121217 100%);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.65);
}

.wank-v2-bal-pick__title {
  font-weight: 700;
  font-size: 1rem;
  color: #fecdd3;
  text-align: center;
  margin-bottom: 0.15rem;
}

.wank-v2-bal-pick__btn {
  min-height: 3rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
}

.wank-v2-bal-pick__btn--atk {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
}

.wank-v2-bal-pick__btn--def {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff;
}

.wank-v2-bal-pick__cancel {
  min-height: 2.5rem;
  border: 0;
  background: transparent;
  color: #9a8aa3;
  font-size: 0.85rem;
  cursor: pointer;
}

.wank-bf__hand--pickable {
  align-items: flex-end;
  min-height: 11rem;
  padding: 0.65rem 0.5rem 0.5rem;
  overflow-x: auto;
  overflow-y: visible;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.55rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
  z-index: 25;
  touch-action: pan-x;
}

.wank-bf__hand--pickable .wank-play-card,
.wank-bf__hand--pickable .wank-bf__hand-slot .wank-play-card {
  margin-left: 0 !important;
  transform: none !important;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(251 113 133 / 0.35);
}

.wank-bf__hand--pickable .wank-bf__hand-slot--playable .wank-play-card {
  width: clamp(6.5rem, 28vw, 9.5rem);
}

.wank-bf__table-inner--picking {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  grid-template-rows: auto auto minmax(8rem, 1fr) auto auto;
}

.wank-bf__table-inner--picking .wank-bf__deck {
  opacity: 0.35;
  pointer-events: none;
}

.wank-bf__table-inner--picking .wank-bf__mat {
  min-height: clamp(8rem, 22vh, 14rem);
}

.wank-bf--pick-phase .wank-bf__prompt.is-active {
  max-width: none;
  font-size: 0.72rem;
}

.wank-bf__hand--opp {
  align-items: flex-start;
  min-height: 3.75rem;
  transform: rotate(180deg);
}

.wank-bf__hand--opp .wank-play-card__stats {
  transform: rotate(180deg);
}

.wank-bf__hand--player .wank-play-card {
  margin-left: -0.55rem;
  transform-origin: bottom center;
}

.wank-bf__hand--player .wank-play-card:first-child {
  margin-left: 0;
}

.wank-bf__hand--player .wank-play-card:nth-child(1) { transform: rotate(-14deg) translateY(4px); z-index: 1; }
.wank-bf__hand--player .wank-play-card:nth-child(2) { transform: rotate(-8deg) translateY(2px); z-index: 2; }
.wank-bf__hand--player .wank-play-card:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
.wank-bf__hand--player .wank-play-card:nth-child(4) { transform: rotate(3deg); z-index: 4; }
.wank-bf__hand--player .wank-play-card:nth-child(5) { transform: rotate(8deg) translateY(2px); z-index: 5; }
.wank-bf__hand--player .wank-play-card:nth-child(6) { transform: rotate(14deg) translateY(4px); z-index: 6; }

.wank-bf__hand--opp .wank-play-card {
  margin-left: -0.85rem;
}

.wank-bf__hand--opp .wank-play-card:first-child {
  margin-left: 0;
}

.wank-bf__mat {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  /* Keep mat short enough that board cards + hand fit without overlapping */
  min-height: clamp(11rem, 28vh, 18rem);
  max-height: min(42vh, 22rem);
  margin: 0.25rem 0;
  border-radius: 0.85rem;
  overflow: visible;
  border: 2px solid #4a3050;
  box-shadow: inset 0 4px 28px rgb(0 0 0 / 0.35);
  z-index: 6;
  isolation: isolate;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgb(90 55 75 / 0.35) 0%, rgb(45 28 42 / 0.2) 48%, rgb(35 22 38 / 0.25) 52%, rgb(70 40 58 / 0.3) 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgb(0 0 0 / 0.04) 18px,
      rgb(0 0 0 / 0.04) 19px
    ),
    linear-gradient(160deg, #3d2840 0%, #2a1a2e 40%, #352238 60%, #2a1a2e 100%);
}

.wank-bf__mat-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 50%, rgb(251 113 133 / 0.08), transparent 70%);
  pointer-events: none;
}

.wank-bf__mat-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgb(251 113 133 / 0.35), transparent);
  pointer-events: none;
  z-index: 1;
}

.wank-bf__zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.35rem 0.4rem;
  position: relative;
  z-index: 3;
  padding: 0.3rem 0.4rem;
  min-height: 0;
  overflow: visible;
}

.wank-bf__zone--opp {
  align-items: flex-end;
  align-content: flex-end;
  padding-bottom: 0.35rem;
}

.wank-bf__zone--player {
  align-items: flex-start;
  align-content: flex-start;
  padding-top: 0.35rem;
}

/* Board slots — real hit targets for attack pick / target */
.wank-bf__board-slot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0.15rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  color: inherit;
  font: inherit;
  cursor: default;
  position: relative;
  z-index: 10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(251 113 133 / 0.35);
  border-radius: 0.55rem;
  pointer-events: auto;
}

.wank-bf__board-slot--ready {
  cursor: pointer;
}

.wank-bf__board-slot--ready:hover .wank-play-card--board,
.wank-bf__board-slot--ready:focus-visible .wank-play-card--board {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 8px 14px rgb(251 113 133 / 0.45));
}

.wank-bf__board-slot--pending {
  z-index: 8;
  box-shadow: 0 0 0 2px rgb(251 113 133 / 0.85), 0 0 16px rgb(251 113 133 / 0.35);
  border-radius: 0.55rem;
}

.wank-bf__board-slot--targetable {
  cursor: crosshair;
}

.wank-bf__board-slot--targetable:hover .wank-play-card--board,
.wank-bf__board-slot--targetable:focus-visible .wank-play-card--board {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
  filter: drop-shadow(0 0 12px rgb(252 211 77 / 0.55));
}

.wank-bf__board-slot--blocked {
  opacity: 0.72;
  cursor: not-allowed;
}

.wank-bf__board-hint {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  line-height: 1;
  max-width: 5.5rem;
  text-align: center;
  pointer-events: none;
}

.wank-bf__board-slot--ready .wank-bf__board-hint {
  color: #fda4af;
}

.wank-bf__board-slot--pending .wank-bf__board-hint {
  color: #fecdd3;
}

.wank-bf__clash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fb7185;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 16px rgb(251 113 133 / 0.9);
  z-index: 8;
  white-space: nowrap;
}

.wank-bf__clash.is-active {
  animation: wank-clash-pop 0.55s ease-out forwards;
}

.wank-bf__clash-cards {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 3vw, 1.25rem);
}

.wank-bf__clash-bolt {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  filter: drop-shadow(0 0 12px rgb(251 113 133 / 0.95));
}

.wank-bf__clash-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(6rem, 18vw, 9rem);
  aspect-ratio: 5 / 7;
  border-radius: 0.5rem;
  border: 2px dashed rgb(251 113 133 / 0.65);
  background: rgb(0 0 0 / 0.45);
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  letter-spacing: 0.12em;
  color: #fda4af;
}

@keyframes wank-clash-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

.wank-bf__round {
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(251 113 133 / 0.75);
  background: rgb(0 0 0 / 0.55);
  border: 1px solid rgb(251 113 133 / 0.2);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  z-index: 7;
  pointer-events: none;
}

.wank-play-card {
  width: clamp(4.75rem, 11vw, 6.5rem);
  aspect-ratio: 5 / 7;
  position: relative;
  border-radius: 0.5rem;
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
  flex-shrink: 0;
}

.wank-play-card--in-hand {
  width: clamp(5.75rem, 15vw, 9rem);
}

.wank-bf__hand--pickable .wank-play-card--in-hand {
  width: clamp(7.25rem, 22vw, 11rem);
}

.wank-play-card--lg {
  width: clamp(7.5rem, 22vw, 11rem);
}

/* Hero summon/ritual card: must fit viewport + chrome (label, Proceed, actions).
   min-width:80vw was wrong on desktop — 5:7 aspect made height >> 100vh and
   buried controls off-screen. Cap by both width and available height. */
.wank-play-card--hero {
  width: min(92vw, 22rem, calc((100dvh - 12rem) * 5 / 7));
  max-height: calc(100dvh - 12rem);
  filter: drop-shadow(0 12px 28px rgb(251 113 133 / 0.45));
}

/* Board cards must fit half-mat height (was 8.5–12.5rem → taller than zone → overlap + blocked taps) */
.wank-play-card--board {
  width: clamp(3.6rem, 8.5vw, 5.5rem);
  max-height: min(7.5rem, 14vh);
  height: auto;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.55));
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Attack-phase selectable on board: no huge lift (that shoved cards under the hand) */
.wank-play-card--board.wank-play-card--selectable {
  z-index: 5 !important;
  animation: wank-card-pick-pulse 1.4s ease-in-out infinite;
}

.wank-play-card--board.wank-play-card--selectable:hover,
.wank-play-card--board.wank-play-card--selectable:focus-visible {
  transform: translateY(-4px) scale(1.04) !important;
  z-index: 6 !important;
}

.wank-play-card--board .wank-play-card__art {
  inset: 0.3rem 0.3rem 0.55rem;
}

.wank-play-card--board .wank-play-card__stats {
  display: none;
}

.wank-play-card__abilities {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  right: 0.15rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  pointer-events: none;
}

.wank-play-card__ability {
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.08rem 0.22rem;
  border-radius: 0.25rem;
  background: rgb(0 0 0 / 0.72);
  border: 1px solid rgb(251 191 36 / 0.45);
  color: #fde68a;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wank-bf__board-slot--taunt {
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.65);
}

.wank-play-card__sick {
  position: absolute;
  top: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.85rem;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8));
}

.wank-play-card__attacked {
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
  z-index: 4;
  font-size: 0.7rem;
  font-weight: 800;
  color: #86efac;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8));
}

.wank-play-card--board:has(.wank-play-card__attacked) {
  opacity: 0.72;
  filter: grayscale(0.25);
}

.wank-play-card__bal-badge {
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 0.5);
}

.wank-play-card__bal-badge--atk {
  background: rgb(251 113 133 / 0.85);
  color: #fff;
}

.wank-play-card__bal-badge--def {
  background: rgb(96 165 250 / 0.85);
  color: #fff;
}

.wank-play-card__def-bar {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 1.65rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  z-index: 3;
  overflow: hidden;
}

.wank-play-card__def-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
  border-radius: inherit;
}

.wank-play-card__gem {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  border: 2px solid rgb(0 0 0 / 0.45);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.45);
  font-variant-numeric: tabular-nums;
}

.wank-play-card__gem--atk {
  left: -0.35rem;
  bottom: 0.55rem;
  color: #fef3c7;
  background: radial-gradient(circle at 35% 30%, #fbbf24, #b45309);
}

.wank-play-card__gem--def {
  right: -0.35rem;
  bottom: 0.55rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ef4444, #991b1b);
}

.wank-play-card__layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.wank-play-card__bg {
  background-size: cover;
  background-position: center;
}

.wank-play-card__art {
  position: absolute;
  inset: 0.35rem 0.35rem 1.6rem;
  border-radius: 0.25rem;
  overflow: hidden;
  background: #0a0a0c;
}

.wank-play-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wank-play-card__npc-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: rgb(251 113 133 / 0.1);
}

.wank-play-card__border {
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wank-play-card__back {
  background-size: cover;
  background-position: center;
}

.wank-play-card__stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.15rem 0.25rem 0.2rem;
  font-size: 0.48rem;
  line-height: 1.15;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.85));
  color: #f3f4f6;
  z-index: 2;
}

.wank-play-card__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wank-play-card--face-down .wank-play-card__front {
  display: none;
}

.wank-play-card--face-up .wank-play-card__back {
  display: none;
}

.wank-play-card--selectable {
  cursor: pointer;
  box-shadow: 0 0 0 3px rgb(251 113 133 / 0.65);
  pointer-events: auto;
  z-index: 30 !important;
  animation: wank-card-pick-pulse 1.4s ease-in-out infinite;
}

.wank-play-card--selectable .wank-play-card__layer,
.wank-play-card--selectable .wank-play-card__art,
.wank-play-card--selectable .wank-play-card__art img {
  pointer-events: none;
}

.wank-play-card--selectable:hover,
.wank-play-card--selectable:focus-visible {
  transform: translateY(-14px) scale(1.08) !important;
  box-shadow: 0 0 24px rgb(251 113 133 / 0.75);
  z-index: 40 !important;
  animation: none;
}

@keyframes wank-card-pick-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(251 113 133 / 0.55); }
  50% { box-shadow: 0 0 0 5px rgb(251 113 133 / 0.85), 0 0 18px rgb(251 113 133 / 0.35); }
}

.wank-play-card--in-hand.wank-play-card--played {
  opacity: 0.42;
  filter: grayscale(0.45);
  pointer-events: none;
  z-index: 1 !important;
}

.wank-play-card--winner {
  box-shadow: 0 0 16px rgb(252 211 77 / 0.65);
  transform: scale(1.05);
}

.wank-play-card--fly-in {
  animation: wank-card-fly-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wank-card-fly-in {
  from { opacity: 0; transform: translateY(24px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wank-battlefield__result {
  text-align: center;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgb(251 113 133 / 0.2);
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.45));
  flex-shrink: 0;
}

.wank-battlefield__result.hidden {
  display: none;
}

.wank-v2-controls-wrap {
  width: 100%;
  justify-content: center;
  z-index: 8;
  position: relative;
}

@media (max-width: 480px) {
  .wank-bf__table-inner {
    padding: 0.5rem 1.75rem 0.45rem;
    min-height: calc(100dvh - 3rem);
    transform: none;
  }

  .wank-bf__table-inner--picking {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .wank-bf__hand--pickable {
    min-height: 10.5rem;
    gap: 0.5rem;
  }

  .wank-bf__hand--pickable .wank-play-card--in-hand {
    width: clamp(6.75rem, 42vw, 8.75rem);
  }

  .wank-bf__deck-stack {
    width: 2rem;
    height: 2.85rem;
  }

  .wank-bf__hero-frame {
    width: 2.85rem;
    height: 2.85rem;
  }

  .wank-bf__hero-score {
    min-width: 1.85rem;
    height: 1.85rem;
    font-size: 0.9rem;
  }

  .wank-play-card--in-hand {
    width: clamp(4.35rem, 18vw, 5.5rem);
  }

  .wank-play-card--board {
    width: clamp(3.25rem, 14vw, 4.75rem);
    max-height: min(6.5rem, 13vh);
  }

  .wank-bf__mat {
    min-height: clamp(9.5rem, 26vh, 14rem);
    max-height: min(38vh, 16rem);
  }

  .wank-bf__board-hint {
    font-size: 0.48rem;
    max-width: 4.5rem;
  }

  .wank-bf__hand--player .wank-play-card {
    margin-left: -0.4rem;
  }

  .wank-bf__hand {
    min-height: 5.75rem;
  }

  .wank-bf__mat {
    min-height: 10rem;
  }

  .wank-bf__player-bar {
    flex-direction: column;
  }

  .wank-bf__prompt {
    max-width: 100%;
  }
}

.wank-battle-thumb__label {
  font-size: 0.58rem;
  margin-top: 0.25rem;
  color: #d1d5db;
  line-height: 1.2;
}

.wank-battle-thumb__stat {
  font-size: 0.58rem;
  color: #fb7185;
  font-weight: 600;
}

.wank-battle-result__powers {
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: rgb(251 113 133 / 0.08);
  border: 1px solid rgb(251 113 133 / 0.2);
}

.trading-card-feed__stats,
.trading-card-item__stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.65rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.88));
  pointer-events: none;
}

/* ── Betafy shrine ───────────────────────────────────────── */

.betafy-hub {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.betafy-hub--veiled {
  padding-top: 2.5rem;
}

.betafy-header {
  position: relative;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.betafy-header__title {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fcd34d 0%, #e879f9 45%, #ff69b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  text-shadow: 0 0 40px rgba(192, 38, 255, 0.25);
}

.admin-stat-chip:focus-visible,
.status-tab:focus-visible,
.beta-btn:focus-visible,
.pipeline-active-item:focus-visible,
.admin-switch:focus-within {
  outline: 2px solid rgba(255, 105, 180, 0.85);
  outline-offset: 2px;
}

.status-tab__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.queue-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #2a1f2f;
  background: rgba(0, 0, 0, 0.35);
  color: #c4b5fd;
}

.queue-status-chip--approval {
  color: #ffb6e0;
  border-color: rgba(255, 105, 180, 0.45);
  background: rgba(255, 105, 180, 0.12);
}

.queue-status-chip--failed {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
}

.queue-status-chip--running {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.4);

}

.wank-v2-deck__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
}

.wank-v2-deck-card {
  position: relative;
  border: 1px solid #2a1f2f;
  border-radius: 0.4rem;
  padding: 0;
  background: #0a0a0a;
  cursor: pointer;
  overflow: hidden;
}

.wank-v2-deck-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.wank-v2-deck-card--selected { border-color: #ff2e63; box-shadow: 0 0 0 1px #ff2e63; }
.wank-v2-deck-card__stats {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 0.55rem; text-align: center; background: rgba(0,0,0,0.75); color: #fda4af;
}

.wank-v2-stamina {
  display: flex; gap: 1rem; font-size: 0.7rem; color: #fda4af; margin-bottom: 0.35rem;
}

.wank-v2-controls, .wank-v2-controls-wrap {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0;
}

.wank-v2-ritual {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.wank-v2-ritual__hero {
  text-align: center;
  max-width: min(92vw, 28rem);
  width: 100%;
  margin: auto;
}
.wank-v2-ritual__hero .wank-play-card--hero { margin: 0 auto 1rem; }
.wank-v2-ritual__title { font-size: 1.1rem; color: #fecdd3; margin-bottom: 0.75rem; }
.wank-v2-ritual__timer { font-size: 2rem; font-weight: bold; color: #ff2e63; margin-bottom: 1rem; }
.wank-v2-ritual__winner-status {
  font-size: 1rem; color: #fda4af; letter-spacing: 0.04em;
  animation: wank-v2-pulse 1.6s ease-in-out infinite;
}
.wank-v2-ritual__actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.wank-v2-summon {
  position: fixed; inset: 0; z-index: 11500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgb(0 0 0 / 0.78);
  pointer-events: none; /* pass-through dim — buttons re-enable below */
  padding: 1rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  box-sizing: border-box;
}

.wank-v2-summon__shimmer {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgb(251 113 133 / 0.22), transparent 55%);
  animation: wank-v2-summon-glow 1.8s ease-in-out infinite;
  pointer-events: none;
}

.wank-v2-summon__shimmer--static {
  animation: none;
  opacity: 0.7;
}

.wank-v2-summon__card { position: relative; z-index: 1; pointer-events: none; }
.wank-v2-summon__label {
  position: relative; z-index: 1;
  margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fda4af;
  pointer-events: none;
}

.wank-v2-summon__waiting {
  position: relative; z-index: 2;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted, #9a8aa3);
  pointer-events: none;
}

.wank-v2-summon__proceed {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  margin-top: 1.1rem;
  min-height: 3rem;
  min-width: min(18rem, 86vw);
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #ff2e63 0%, #e11d48 55%, #c026ff 160%);
  box-shadow: 0 12px 32px -10px rgb(255 46 99 / 0.55);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wank-v2-summon__proceed:active {
  transform: scale(0.98);
}

@keyframes wank-v2-summon-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes wank-v2-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* === Betafy + Dailies revamp (2026-07-09) === */
.betafy-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.betafy-header__lead {
  max-width: 28rem;
  margin: 0 auto 0.5rem;
  line-height: 1.45;
  text-align: center;
}

.betafy-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.betafy-header__error {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(69, 26, 3, 0.4);
  color: #fde68a;
  font-size: 0.75rem;
  text-align: center;
}

.betafy-step {

}

.betafy-processing__actions .beta-btn {
  min-height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .daily-claim-btn,
  .nav-tab--claim-pulse,
  .betafy-shrine__orbit,
  .betafy-shrine__swirl,
  .betafy-shrine__pixel,
  .betafy-processing__ring,
  .betafy-sacrifice__btn-glow {
    animation: none !important;
  }
}

/* Standalone shell chrome */
.wb-shell-header { font-family: var(--font-display, Outfit, system-ui, sans-serif); }
.beta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #2a1f2f);
  background: var(--surface-elevated, #15151c);
  color: var(--text, #f0e6ff);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.beta-btn:hover { background: var(--surface-hover, #1a1220); }
.beta-btn.accent {
  background: var(--accent, #ff2e63);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.beta-btn.accent:hover { filter: brightness(1.08); }
.text-muted { color: var(--muted, #9a8aa3); }
.bg-beta-card { background: var(--card, #121217); }
.p4b-toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 300; max-width: min(92vw, 28rem); text-align: center;
  pointer-events: none;
}
.modal-backdrop.hidden { display: none !important; }
.hidden { display: none !important; }
.font-display { font-family: var(--font-display, Outfit, system-ui, sans-serif); }

/* === Wank Battles Auto (prepare / combat) === */
.wa-prepare__head h1 { font-family: var(--font-display, Outfit, system-ui, sans-serif); }
.wa-synergies { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.wa-chip {
  font-size: 10px; padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid rgba(255,46,99,0.35); color: #fecdd3; background: rgba(255,46,99,0.08);
}
.wa-grid { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
.wa-grid__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.wa-slot {
  aspect-ratio: 3/4; border-radius: 0.65rem; border: 1px dashed #3f2a40;
  background: #121217; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: #9a8aa3; overflow: hidden; position: relative;
}
.wa-slot--filled { border-style: solid; border-color: #ff2e63; }
.wa-slot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.85; }
.wa-slot__stat {
  position: relative; z-index: 1; font-size: 10px; font-weight: 700; color: #f0e6ff;
  background: rgba(0,0,0,0.65); padding: 0.15rem 0.35rem; border-radius: 0.35rem;
}
.wa-bench {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem;
  max-height: 12rem; overflow-y: auto;
}
.wa-bench-card {
  width: 4.5rem; border-radius: 0.5rem; border: 1px solid #2a1f2f; background: #15151c;
  padding: 0.25rem; text-align: center; font-size: 9px; color: #9a8aa3;
}
.wa-bench-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 0.35rem; display: block; }
.wa-bench-card--sel { border-color: #ff2e63; box-shadow: 0 0 0 1px #ff2e63; }
.wa-bench-card--used { opacity: 0.35; }
.wa-replay-stage {
  min-height: 10rem; border-radius: 1rem; border: 1px solid #2a1f2f;
  background: linear-gradient(180deg, #1a1220, #0a0a0f); padding: 1rem;
}
.wa-clash { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; min-height: 8rem; }
.wa-clash__card {
  min-width: 6rem; padding: 1rem; border-radius: 0.75rem; border: 1px solid #ff2e63;
  background: #121217; font-weight: 600; color: #fecdd3; text-align: center;
}
.wa-ritual, .wa-result { max-width: 28rem; margin: 0 auto; }