@font-face {
  font-family: "DSEG7";
  src: url("/fonts/DSEG7ClassicMini-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #16132a;
  --panel: #1e1a38;
  --panel-2: #120f24;
  --blue: #2f8fff;
  --red: #ff3a3d;
  --pack-color: #ff0066;
  --white: #ffffff;
  --muted: #c8c4e0;
  --success: #35cf7a;
  --line: #3a3460;
  --font: "Montserrat", "Segoe UI", sans-serif;
  --font-display: "Montserrat", "Segoe UI", sans-serif;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 10px 36px rgba(5, 7, 20, 0.6);
  --shadow-drop: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* Type scale */
  --text-xs: clamp(11px, 1.2vw, 14px);
  --text-sm: clamp(14px, 1.6vw, 18px);
  --text-md: clamp(18px, 2.4vw, 28px);
  --text-lg: clamp(24px, 3.4vw, 42px);
  --text-xl: clamp(32px, 6vw, 62px);

  /* Nav button base */
  --nav-btn-font-size: var(--text-lg);
  --nav-btn-font-weight: 800;
  --nav-btn-radius: var(--radius-lg);
  --nav-btn-padding: 10px 14px;

  /* Layout */
  --play-card-width: clamp(220px, 28vw, 370px);
  --play-footer-height: clamp(72px, 10vh, 112px);
  --gameplay-action-btn-height: clamp(54px, 8.4vh, 74px);
  --result-card-ratio: 6 / 10;
  --result-layout-gap: clamp(8px, 1.1vw, 14px);
  --result-screen-radius: var(--radius-lg);
  --result-footer-row-height: clamp(62px, 10vh, 90px);
  --gameplay-alt-outline: var(--pack-color);
  --pack-card-bg: var(--pack-color);
  --pack-card-fg: #ffffff;
  --pack-card-border: color-mix(in oklab, var(--pack-color) 70%, #ffffff);
  --pack-card-back-logo: url("../assets/logo-no-sub.svg");
  --pack-card-back-logo-size: 72px 28px;
}

@media (max-width: 900px) {
  body.standalone-app .app-frame {
    width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: none;
    aspect-ratio: auto;
    margin: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
}

@media (max-height: 520px) {
  body.standalone-app .app-frame {
    position: fixed;
    inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width: auto;
    height: auto;
    margin: 0;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #16132a;
  color: var(--white);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16132a;
}

/* ── Splash screen ── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16132a;
  transition: opacity 0.3s ease-out;
}
#splash.hidden {
  opacity: 0;
  pointer-events: none;
}
#splash img {
  width: clamp(120px, 20vw, 200px);
  animation: splash-pulse 1.5s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
/* Auto-hide fallback if JS fails */
@keyframes splash-auto-hide { to { opacity: 0; pointer-events: none; } }
#splash:not(.hidden) { animation: splash-pulse 1.5s ease-in-out infinite, splash-auto-hide 0s 8s forwards; }

button,
input {
  font-family: inherit;
}

.app-frame {
  width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16 / 9;
  margin: auto;
  border: none;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.beta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff0000;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 3px 10px 2px;
  margin-top: -2px;
}

.screen {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: none;
}

.screen.active {
  display: block;
}

#screen-shape-reveal,
#screen-attempt,
#screen-judge,
#screen-deliberation,
#screen-result,
#screen-scoreboard,
#screen-collection {
  padding: 0;
}

.screen-brand-lockup {
  position: absolute;
  left: 50%;
  top: clamp(6px, 1.2vh, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}

.screen-brand-logo {
  width: 126px;
  max-width: 20.6vw;
  filter: drop-shadow(var(--shadow-drop));
}

#screen-home {
  padding-top: 0;
}

#screen-home.home-main {
  background: #ffffff;
}

#screen-home.home-main .bl-letters .bl-st5 {
  fill: #6600ff;
}

body.home-main-body {
  background: radial-gradient(circle at top right, #2a2548, #120f24 60%);
}

body.home-main-body .app-frame {
  background: #ffffff;
}

body.white-card-pack .app-frame,
body.black-card-pack .app-frame {
  border: none;
}

.home-main .pack-grid {
  scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.08);
}

.home-main .pack-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
}

.home-main .pack-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
}

.topline {
  font-size: 18px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.brand-corner {
  position: absolute;
  left: 18px;
  bottom: 14px;
  width: 92px;
  opacity: 0.95;
}

.pack-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  height: calc(100% - 124px);
}

.pack-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  height: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  align-items: stretch;
  padding: 8px 2px 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 16px;
}

.pack-grid::-webkit-scrollbar {
  display: none;
}

/* ── Pack scroll nav cards (flip-card style) ── */
.pack-scroll-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  align-self: center;
}

.pack-scroll-flip {
  perspective: 600px;
  width: clamp(27px, 3.75vw, 42px);
  aspect-ratio: 5 / 7;
}

.pack-scroll-flip-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s ease-in-out;
}

.pack-scroll-flip.is-flipped .pack-scroll-flip-inner {
  transform: rotateY(180deg);
}

.pack-scroll-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: clamp(3px, 0.5vw, 5px) clamp(2px, 0.3vw, 4px);
}

.pack-scroll-flip-front {
  background: #ffffff;
  transform: rotate(-4deg);
}

.pack-scroll-flip-back {
  background: #d0d0d0;
  transform: rotateY(180deg) rotate(-4deg);
}

.pack-scroll-flip-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(7px, 1.1vw, 11px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000000;
  line-height: 1;
  flex-shrink: 0;
}

.pack-scroll-flip-icon {
  flex: 1 1 0;
  width: 80%;
  min-height: 0;
  object-fit: contain;
  display: block;
}

.pack-scroll-flip:not(.is-flipped):hover .pack-scroll-flip-inner,
.pack-scroll-flip:not(.is-flipped):focus-visible .pack-scroll-flip-inner {
  transform: scale(1.1);
}

.pack-scroll-flip:not(.is-flipped):active .pack-scroll-flip-inner {
  transform: scale(0.95);
}

.pack-scroll-flip.is-flipped {
  cursor: default;
  pointer-events: none;
}

.pack-scroll-end-msg {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(5px, 0.8vw, 8px);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #888;
  line-height: 1.25;
  text-align: center;
  margin: auto;
}

#pack-scroll-left {
  transition: opacity 0.35s ease-in-out;
}

@media (hover: none), (pointer: coarse) {
  .pack-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pack-scroll-btn {
    display: none;
  }
}

@media (min-width: 1200px) {
  .pack-card {
    min-height: 380px;
    padding: 10px;
  }
}

.home-coming-soon {
  margin: 8px 0 0;
  color: #b7bdd8;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.2px;
}

.home-money-spent {
  margin: 4px 0 0;
  color: #b7bdd8;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.2px;
}

.home-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: clamp(50px, 7vh, 80px);
  padding-block: clamp(2px, 0.4vh, 6px);
  margin-bottom: 0;
}

.home-brand-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
}

.home-title-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 10px;
}

.home-subtitle {
  margin: 0;
  color: #d6dcf6;
}

.home-main .home-subtitle {
  color: #6600ff;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.4;
}

.home-htp-inline {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  color: #9d8aff;
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: inherit;
}

.home-htp-inline:hover,
.home-htp-inline:focus-visible {
  color: #c4b8ff;
  outline: none;
}


/* Home footer — desktop only */
.home-footer {
  display: none;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #screen-home.active {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .pack-strip {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .home-footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;
    padding: 0 18px;
    flex-shrink: 0;
    height: 40px;
    background: #000;
  }

  .home-footer a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s;
  }

  .home-footer a:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-sep {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    align-self: center;
  }

  .footer-social {
    display: inline-flex;
    align-items: center;
  }

  .footer-social img {
    width: 14px;
    height: 14px;
    filter: invert(1);
    opacity: 0.45;
    transition: opacity 0.15s;
  }

  .footer-social:hover img {
    opacity: 0.8;
  }

  .footer-copy {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15px;
  }

  .home-main .home-footer {
    background: #fff;
  }

  .home-main .home-footer a {
    color: rgba(0, 0, 0, 0.35);
  }

  .home-main .home-footer a:hover {
    color: rgba(0, 0, 0, 0.7);
  }

  .home-main .footer-sep {
    background: rgba(0, 0, 0, 0.15);
  }

  .home-main .footer-social img {
    filter: none;
    opacity: 0.35;
  }

  .home-main .footer-social:hover img {
    opacity: 0.7;
  }

  .home-main .footer-copy {
    color: rgba(0, 0, 0, 0.35);
  }
}

/* Typewriter tagline rotation */
.tagline-text {
  display: inline;
  transition: opacity 0.3s ease-out;
}

.tagline-fade-out {
  opacity: 0;
}

.tagline-cursor::after {
  content: "|";
  display: inline;
  color: #9d8aff;
  font-weight: 300;
  margin-left: 1px;
  animation: tagline-blink 600ms step-end infinite;
}

@keyframes tagline-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tagline-clickable {
  cursor: pointer;
  color: #9d8aff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tagline-clickable:hover {
  color: #c4b8ff;
}

.home-settings-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(30px, 3.3vw, 42px);
  height: clamp(30px, 3.3vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px;
  background: rgba(22, 24, 34, 0.72);
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(16px, 1.65vw, 22px);
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.home-settings-btn:hover,
.home-settings-btn:focus-visible {
  background: rgba(38, 41, 58, 0.85);
  border-color: rgba(255, 255, 255, 0.46);
  color: rgba(255, 255, 255, 0.65);
  outline: none;
}

.home-logo {
  width: 205px;
  max-width: 30vw;
  filter: drop-shadow(var(--shadow-drop));
}

.home-logo[data-variant="rudebits"] {
  width: 280px;
  max-width: 40vw;
}

.home-main .home-logo {
  filter: none;
}

/* ── Menu flip card (replaces hamburger button) ── */
.menu-flip-card {
  perspective: 600px;
  flex-shrink: 0;
  cursor: pointer;
  width: clamp(36px, 5vw, 56px);
  z-index: 901;
  position: relative;
}
.menu-flip-card-inner {
  width: 100%;
  aspect-ratio: 5 / 7;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s ease-in-out;
}
.menu-flip-card.is-flipped .menu-flip-card-inner {
  transform: rotateY(180deg);
}
.menu-flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  aspect-ratio: unset !important;
  height: 100%;
  box-sizing: border-box;
}
.menu-flip-card .menu-flip-card-front {
  transform: rotate(-4deg);
  background: #ffffff !important;
}
.menu-flip-card .menu-flip-card-back {
  transform: rotateY(180deg) rotate(-4deg);
  background: #ffffff !important;
}
.menu-flip-emoji {
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-flip-card .menu-flip-label {
  color: #1a1a1a;
}

.hamburger-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.hamburger-menu[hidden] {
  display: none;
}

.hamburger-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.hamburger-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  max-width: 70vw;
  height: 100%;
  background: #1a1a2e;
  display: flex;
  flex-direction: column;
  padding: 72px 24px 32px;
  gap: 4px;
}

.home-main .hamburger-menu-panel {
  background: #ffffff;
}

.hamburger-menu-link {
  display: block;
  padding: 12px 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.hamburger-menu-link:hover,
.hamburger-menu-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger-not-yet {
  position: relative;
}
.hamburger-not-yet::after {
  content: "NOT YET";
  display: inline-block;
  margin-left: 10px;
  background: #ff3366;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

.home-main .hamburger-menu-link {
  color: #333;
}

.home-main .hamburger-menu-link:hover,
.home-main .hamburger-menu-link:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

#screen-mode-select {
  background: var(--pack-color);
  color: #ffffff;
}

.mode-select-screen {
  position: relative;
  height: 100%;
  --gameplay-alt-outline: #ffffff;
}

/* Two-card mode-select layout */
.mode-select-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.6vh, 24px);
  padding: clamp(4px, 1.2vh, 14px) clamp(12px, 3vw, 24px);
}

.mode-select-cards .mode-select-footer {
  margin-top: auto;
}

.mode-card-pair {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  max-width: 900px;
  justify-content: center;
  align-items: center;
}

.mode-card {
  position: relative;
  flex: none;
  width: clamp(200px, 30vw, 340px);
  aspect-ratio: 10 / 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: clamp(10px, 1.5vh, 18px);
  border: 12px solid #ffffff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: center;
}

.mode-card-badge {
  position: absolute;
  top: clamp(-18px, -2.5vh, -10px);
  right: clamp(-18px, -2.5vh, -10px);
  font-size: clamp(28px, 4vh, 42px);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.mode-card:hover,
.mode-card:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.03);
}

.mode-card:active {
  transform: scale(0.97);
}

.mode-card--cobwebbed {
  position: relative;
}

.mode-card-cobwebs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: screen;
  backdrop-filter: blur(3px);
  border-radius: inherit;
  overflow: hidden;
}

.mode-card-label {
  margin: 0;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1;
}

.mode-card-sub {
  font-size: clamp(10px, 1.3vw, 14px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.35;
  max-width: 22ch;
}

.mode-card-or {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 900;
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  align-self: center;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

.mode-card-figures {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.mode-card-fig {
  height: clamp(36px, 6vh, 56px);
  width: auto;
}

.mode-card-team {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.mode-card-figures--vs {
  gap: 0;
}

.mode-card-figures-gap {
  width: clamp(8px, 1.4vw, 16px);
}

.mode-card-fig--vs {
  display: inline-block;
  aspect-ratio: 48 / 150;
  height: clamp(36px, 6vh, 56px);
  width: auto;
  background: var(--pack-color);
  -webkit-mask: url('../assets/misc/player-icon-little-adult.svg') center / contain no-repeat;
  mask: url('../assets/misc/player-icon-little-adult.svg') center / contain no-repeat;
}

/* 2 VS 2 card: white bg, pack-colour text */
#mode-vs {
  background: #ffffff;
  border-color: #ffffff;
}

#mode-vs .mode-card-label {
  font-size: clamp(10px, 1.2vw, 14px);
  color: color-mix(in oklab, var(--pack-color) 70%, transparent);
}

#mode-vs .mode-card-sub {
  color: color-mix(in oklab, var(--pack-color) 70%, #000000);
}

#mode-vs:hover,
#mode-vs:focus-visible {
  background: #ffffffee;
  border-color: #ffffff;
}

#mode-vs:active {
  background: #ffffffdd;
}

/* ── League + button ── */
.league-plus-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  align-self: center;
}
.league-plus-btn:hover,
.league-plus-btn:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}
.league-plus-btn:active {
  transform: scale(0.92);
}

.league-team-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}
.league-minus-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  align-self: center;
}
.league-minus-btn:hover,
.league-minus-btn:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}
.league-minus-btn:active {
  transform: scale(0.92);
}

/* ── League toast ── */
.league-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
}
.league-toast.--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── League table screen ── */
.league-table-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: 20px;
}

.league-table-title {
  font-size: clamp(20px, 3.5vw, 36px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.league-table-wrapper {
  width: min(600px, 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

.league-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, 2vw, 18px);
  text-align: center;
}

.league-table thead {
  background: rgba(255, 255, 255, 0.08);
}

.league-table th {
  padding: 10px 8px;
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

.league-table-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

.league-table-row td {
  padding: 12px 8px;
}

.league-table-row--leader {
  background: rgba(255, 255, 255, 0.08);
}

.league-table-row--finalist {
  background: rgba(255, 255, 255, 0.06);
}

.league-table-name {
  text-align: left !important;
  font-weight: 700;
}

.league-table-pts {
  font-weight: 800;
  color: var(--pack-color, #fff);
}

.league-table-cs {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9em;
}

.league-commentary {
  width: min(500px, 100%);
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.league-commentary-text {
  font-size: clamp(14px, 1.8vw, 18px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0;
}

.league-table-continue {
  font-size: clamp(16px, 2.2vw, 22px);
  padding: 14px 40px;
}

/* ── Final splash screen ── */
.final-splash-screen {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 70%);
}

.final-splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 24px);
  animation: final-splash-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.final-splash-cup {
  width: clamp(120px, 20vw, 220px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.3));
  animation: trophy-float 3s ease-in-out infinite;
}

.final-splash-title {
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
  margin: 0;
}

.final-splash-sub {
  font-size: clamp(14px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

@keyframes final-splash-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes trophy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Tale of the Tape screen ── */
.tale-of-tape-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: 20px;
}

.tale-of-tape-title {
  font-size: clamp(24px, 4vw, 42px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tape-comparison {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: min(800px, 100%);
}

.tape-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.tape-team-name {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}

.tape-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  text-align: center;
}

.tape-stat-value {
  display: block;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 900;
}

.tape-stat-label {
  display: block;
  font-size: clamp(10px, 1.2vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.tape-vs {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  flex: none;
}

.tape-continue {
  font-size: clamp(16px, 2.2vw, 22px);
  padding: 14px 40px;
}

/* ── Trophy ceremony screen ── */
.trophy-ceremony-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vh, 24px);
  padding: 20px;
  overflow-y: auto;
}

.trophy-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trophy-cup {
  width: clamp(100px, 16vw, 180px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
  animation: trophy-float 3s ease-in-out infinite;
}

.trophy-winner-name {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.trophy-subtitle {
  font-size: clamp(12px, 1.6vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.trophy-roast {
  width: min(500px, 100%);
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.trophy-roast-text {
  font-size: clamp(14px, 1.8vw, 18px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0;
}

.trophy-favourites {
  width: min(700px, 100%);
  text-align: center;
}

.trophy-favourites-title {
  font-size: clamp(12px, 1.4vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}

.trophy-favourites-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.trophy-fav-card {
  width: clamp(100px, 14vw, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8px;
}

.trophy-fav-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trophy-fav-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.08);
}

.trophy-fav-team {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

.trophy-fav-shape {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.trophy-actions {
  display: flex;
  gap: 12px;
}

.trophy-share-btn {
  font-size: clamp(14px, 2vw, 18px);
  padding: 12px 32px;
}

.trophy-home-btn {
  font-size: clamp(14px, 2vw, 18px);
  padding: 12px 32px;
}

/* ── Solo nudge screen ── */
#screen-solo-nudge {
  background: var(--pack-color);
  color: #ffffff;
}

.solo-nudge-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: clamp(12px, 2vh, 24px) clamp(16px, 4vw, 40px);
  text-align: center;
}


.solo-nudge-content {
  max-width: 520px;
}

.solo-nudge-headline {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 clamp(12px, 2vh, 24px);
}

.solo-nudge-steps {
  list-style: none;
  counter-reset: nudge;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
}

.solo-nudge-steps li {
  counter-increment: nudge;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.4;
  padding-left: 2em;
  position: relative;
}

.solo-nudge-steps li::before {
  content: counter(nudge) ".";
  position: absolute;
  left: 0;
  font-weight: 800;
  opacity: 0.6;
}

.solo-nudge-actions {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
}

/* Solo nudge toast */
.solo-nudge-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.9);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: clamp(16px, 2.5vw, 28px) clamp(24px, 4vw, 48px);
  border-radius: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80%;
}
.solo-nudge-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.solo-nudge-toast-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.5vw, 24px);
  text-transform: uppercase;
}
.solo-nudge-toast-body {
  font-size: clamp(13px, 1.8vw, 18px);
  opacity: 0.8;
}

.mode-timer-group {
  width: min(540px, 100%);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.mode-timer-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.timer-pill-toggle {
  width: min(540px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  overflow: hidden;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.16);
}

.timer-pill-option {
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  font-size: inherit;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  padding: clamp(6px, 1.2vh, 10px) 10px;
  cursor: pointer;
  white-space: nowrap;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.timer-pill-option:first-child {
  border-radius: 999px 0 0 999px;
}

.timer-pill-option:last-child {
  border-radius: 0 999px 999px 0;
}

.timer-pill-option.is-active {
  background: color-mix(in oklab, var(--pack-color) 68%, #000000);
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.timer-pill-option:hover,
.timer-pill-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.timer-pill-seconds {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: none;
}

.timer-pill-sub {
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Footnotes toggle */
.mode-footnotes-group {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.footnotes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.footnotes-toggle.is-active {
  color: rgba(255, 255, 255, 0.88);
}

.footnotes-toggle:hover,
.footnotes-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.footnotes-toggle-label {
  font-style: italic;
}

.footnotes-toggle-indicator {
  font-style: normal;
  font-weight: 800;
  font-size: 0.85em;
  opacity: 0.7;
}

.footnotes-toggle.is-active .footnotes-toggle-indicator {
  opacity: 1;
}

/* ── Volume segmented control ── */
.volume-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.volume-control-label {
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* ── Volume flip-cards ── */
.vol-cards {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  perspective: 600px;
}

.vol-card {
  width: clamp(36px, 5vw, 56px);
  aspect-ratio: 5 / 7;
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 6px;
}

.vol-card-front,
.vol-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: 6px;
}

.vol-card-front {
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  font-size: clamp(16px, 2.5vw, 28px);
  line-height: 1;
}

.vol-card-back {
  background: #6633ff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transform: rotateY(180deg);
}

.vol-card.is-face-down {
  transform: rotateY(180deg);
}

.vol-card:not(.is-face-down):hover,
.vol-card:not(.is-face-down):focus-visible {
  outline: none;
}

.vol-card.is-face-down:hover,
.vol-card.is-face-down:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 2px;
  z-index: 1;
}

.mode-select-privacy-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

.mode-settings-btn {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.8vw, 46px);
  height: clamp(34px, 3.8vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mode-settings-btn:hover,
.mode-settings-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.mode-select-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mode-select-disclaimer {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  max-width: 480px;
}

.mode-select-back {
  align-self: flex-start;
}
/* .mode-select-back uses .btn-nav-back */
/* .mode-select-next uses .btn-nav-primary */

/* ── Settings screen ── */
#screen-settings {
  background: #6633ff;
  color: #ffffff;
}

.settings-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(12px, 2.2vh, 24px);
}

.settings-main {
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(14px, 2.8vh, 28px);
  padding: clamp(4px, 1.2vh, 14px) clamp(0px, 2vw, 10px);
}

/* .settings-title uses .screen-title */

.settings-timer-toggle {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.countdown-music-toggle {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.settings-extras {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn.settings-reset-btn {
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 20px;
  cursor: pointer;
}

.btn.settings-reset-btn:hover,
.btn.settings-reset-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.settings-help-btn {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  background: #6633ff;
}

.settings-footer {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

/* .settings-back uses .btn-nav-back with flex override */
.btn.settings-back {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ── Settings screen: portrait layout (iPhone) ── */
@media (orientation: portrait) and (max-width: 580px) {
  .settings-main {
    align-content: start;
    padding: clamp(12px, 3vw, 20px) clamp(16px, 5vw, 32px);
    gap: clamp(16px, 4vw, 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .volume-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .vol-card {
    width: clamp(48px, 16vw, 64px);
  }

  .vol-card-front {
    font-size: clamp(20px, 5vw, 30px);
  }

  .settings-help-btn {
    position: static;
    transform: rotate(-4deg);
    align-self: center;
    margin: 4px 0;
  }

  .settings-footer {
    padding: 0 clamp(16px, 5vw, 32px) clamp(12px, 3vw, 20px);
  }
}

/* ── Admin stats screen ── */
.admin-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(12px, 2.2vh, 24px);
  background: var(--bg, #16132a);
}

.admin-main {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(8px, 2vh, 20px) clamp(12px, 3vw, 32px);
}

.admin-title {
  margin-bottom: clamp(12px, 2vh, 24px);
}

.admin-body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}

.admin-section-title {
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  color: #a855f7;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 1.4vw, 15px);
}

.admin-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.admin-loading,
.admin-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(13px, 1.6vw, 16px);
}

.admin-footer {
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 5vw, 32px) clamp(16px, 4vh, 32px);
}

/* ── Header audio buttons (skip + mute) ── */
/* ── Header pills (top bar utility buttons) ── */
.home-header-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-pill {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  background: #333;
  border: none;
  border-radius: 9999px;
  padding: 5px 12px;
  min-width: 56px;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.header-pill:hover {
  background: #444;
  color: #ccc;
}
.header-pill:active {
  background: #2a2a2a;
}
.header-pill--weeks {
  background: #e24b4a;
  color: #fff;
}
.header-pill--weeks:hover {
  background: #c9403f;
}
.header-pill-weeks-count {
  font-family: "DSEG7", monospace;
  font-weight: 700;
  margin-left: 4px;
}
.header-pill-divider {
  width: 1px;
  height: 20px;
  background: #333;
  flex-shrink: 0;
}
.header-menu-dots {
  font-size: 20px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  position: relative;
  z-index: 901;
}
.header-menu-dots:hover {
  color: #ccc;
}
/* Icons hidden on mobile, shown on desktop */
.header-pill-icon {
  display: none;
}
/* Flip card hidden on mobile */
.home-header > .menu-flip-card {
  display: none;
}

/* WEEKS: hide in header at very narrow screens, show in menu instead */
@media (max-width: 350px) {
  .header-pill--weeks { display: none; }
}
.hamburger-weeks-link { display: none; }
@media (max-width: 350px) {
  .hamburger-weeks-link { display: block; }
}

/* ── Desktop: card-style buttons ── */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* Hide mobile-only elements */
  .header-pill-divider,
  .header-menu-dots { display: none; }

  /* Show flip card */
  .home-header > .menu-flip-card { display: block; }

  /* Pill group: keep auto-margin to push right, tighten gap for card spacing */
  .home-header-pills {
    gap: 0;
  }

  /* Morph pills into skip-cards */
  .header-pill {
    width: clamp(36px, 5vw, 56px);
    aspect-ratio: 5 / 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #d0d0d0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 6px;
    padding: clamp(3px, 0.5vw, 5px) clamp(2px, 0.3vw, 4px) clamp(2px, 0.3vw, 4px);
    transform: scale(0.75) rotate(-4deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: clamp(7px, 1.1vw, 11px);
    font-weight: 800;
    letter-spacing: 0.5px;
    overflow: hidden;
  }
  .header-pill:hover {
    background: #d0d0d0;
    color: #fff;
    transform: scale(0.85) rotate(-4deg);
  }
  .header-pill:active {
    background: #d0d0d0;
    transform: scale(0.7) rotate(-4deg);
  }
  .header-pill-label {
    line-height: 1;
    flex-shrink: 0;
  }
  .header-pill-icon {
    display: block;
    flex: 1 1 0;
    width: 80%;
    min-height: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  /* Weeks card on desktop */
  .header-pill--weeks {
    transform: scale(0.75) rotate(2deg);
  }
  .header-pill--weeks:hover {
    background: #e24b4a;
    transform: scale(0.85) rotate(2deg);
  }
  .header-pill--weeks:active {
    transform: scale(0.7) rotate(2deg);
  }
  .header-pill-weeks-count {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2.2vw, 22px);
    margin-left: 0;
  }

  /* Mute card slight tilt */
  .header-pill#home-mute-btn {
    margin-left: -2px;
    transform: scale(0.75) rotate(3deg);
  }
  .header-pill#home-mute-btn:hover {
    transform: scale(0.85) rotate(3deg);
  }

  /* Flip card desktop overrides */
  .home-header .menu-flip-card {
    transform: scale(0.75);
    transform-origin: center center;
    transition: transform 0.2s ease;
  }
  .home-header .menu-flip-card:not(.is-flipped):hover {
    transform: scale(0.85);
  }
  .home-header .menu-flip-card:not(.is-flipped):active {
    transform: scale(0.7);
  }
}

/* ── Mobile video hero (above carousel, hidden on desktop) ── */
.mobile-video-hero {
  display: none;
}

/* ── Mobile description (below carousel, hidden on desktop) ── */
.mobile-desc-block {
  display: none;
}

/* ── Featured card description (inside desktop carousel card) ── */
.featured-card-desc {
  padding: 12px 14px 8px;
  font-family: var(--font);
  font-size: var(--text-xs);
  color: #7c3aed;
  line-height: 1.45;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.featured-card-desc p {
  margin: 0 0 6px;
}
.featured-card-title {
  font-weight: 800;
  font-size: clamp(12px, 1.3vw, 16px);
  margin-bottom: 8px !important;
}
.featured-card-footnote {
  font-size: clamp(9px, 1vw, 11px);
  opacity: 0.65;
  font-style: italic;
}
.featured-card-desc a,
.mobile-desc-block a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.featured-card-desc a:hover,
.mobile-desc-block a:hover {
  opacity: 0.75;
}
/* Rude Bits dark variant */
#screen-home:not(.home-main) .featured-card-desc,
#screen-home:not(.home-main) .mobile-desc-block {
  color: var(--muted);
}

/* ── Responsive: mobile layout ── */
@media (max-width: 767px) {
  .home-header {
    min-height: auto;
    padding-block: 4px;
  }
  .pack-strip {
    height: auto;
  }
  .pack-grid {
    align-items: flex-start;
    height: auto;
    padding-left: 8px;
    max-height: none;
    gap: 6px;
  }
  .pack-card,
  .sixpack-card {
    min-height: 0;
  }
  .pack-card {
    grid-template-rows: auto auto auto;
  }
  .mobile-video-hero {
    display: block;
    width: 100%;
    padding: 0 8px;
    margin-bottom: 8px;
  }
  .mobile-video-hero .video-card {
    border-radius: 14px;
  }
  .video-skip-wrap {
    display: none !important;
  }
  .mobile-desc-block {
    display: block;
    padding: 8px 14px;
    font-family: var(--font);
    font-size: var(--text-xs);
    color: #7c3aed;
    line-height: 1.45;
  }
  .mobile-desc-block p {
    margin: 0 0 6px;
  }
}

/* Cap mobile video height on short landscape viewports */
@media (max-width: 767px) and (max-height: 520px) {
  .mobile-video-hero .video-card {
    max-height: 25vh;
  }
}

/* ── Video + skip wrapper ── */
.video-skip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc(clamp(180px, 18vw, 230px) * 2 + 16px);
}

/* ── Video promo card ── */
@keyframes video-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.video-card {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: linear-gradient(90deg, #16132a 25%, #2a2548 50%, #16132a 75%);
  background-size: 200% 100%;
  animation: video-shimmer 1.8s ease-in-out infinite;
  box-shadow: var(--shadow-card);
}

.video-card iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 0;
}

.video-card-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-card-play:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-chip {
  position: absolute;
  top: 36px;
  right: -48px;
  z-index: 2;
  width: 220px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 6px 0;
  text-indent: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: rotate(45deg);
  transform-origin: center;
}

.video-chip[hidden] {
  display: none;
}

@keyframes mute-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.pack-card {
  background: var(--pack-accent, #152955);
  border: none;
  padding: 14px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--white);
  text-align: left;
  display: grid;
  grid-template-rows: auto 1fr auto;
  flex: 0 0 clamp(180px, 18vw, 230px);
  min-height: 420px;
  height: auto;
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .pack-card {
    min-height: 0;
    grid-template-rows: auto auto auto;
  }
}

.pack-card.wee,
.pack-card.big-and-little,
.pack-card.paddington,
.pack-card.wee-dinosaur,
.pack-card.wee-pirates,
.pack-card.wee-easter,
.pack-card.wee-space {
  background: #ffffff;
  outline-offset: -2px;
}

.pack-card.wee {
  color: #6633ff;
  outline: 2px solid #6600ff;
}

.pack-card.big-and-little {
  color: #E88A3A;
  outline: 2px solid #E88A3A;
}

.pack-card.paddington {
  color: #0a45a1;
}

.pack-card.wee-dinosaur {
  color: #5B8C3E;
  outline: 2px solid #5B8C3E;
}

.pack-card.wee-pirates {
  color: #E8872B;
  outline: 2px solid #E8872B;
}

.pack-card.wee-easter {
  color: #cc99ff;
  outline: 2px solid #cc99ff;
}

.pack-card.wee-space {
  color: #3366ff;
  outline: 2px solid #3366ff;
}


.pack-card:hover,
.pack-card:focus-visible {
  outline: 2px solid var(--white);
  transform: translateY(-3px);
}

/* ── Unplayed purchase (no animation) ── */

.pack-card.wee:hover,
.pack-card.wee:focus-visible {
  outline: 2px solid #6633ff;
}

.pack-card.big-and-little:hover,
.pack-card.big-and-little:focus-visible {
  outline: 2px solid #E88A3A;
}

.pack-card.paddington:hover,
.pack-card.paddington:focus-visible {
  outline: 2px solid #0a45a1;
}

.pack-card.wee-dinosaur:hover,
.pack-card.wee-dinosaur:focus-visible {
  outline: 2px solid #5B8C3E;
}

.pack-card.wee-pirates:hover,
.pack-card.wee-pirates:focus-visible {
  outline: 2px solid #E8872B;
}

.pack-card.wee-easter:hover,
.pack-card.wee-easter:focus-visible {
  outline: 2px solid #cc99ff;
}

.pack-card.wee-space:hover,
.pack-card.wee-space:focus-visible {
  outline: 2px solid #3366ff;
}


.pack-card.british-bods {
  background: #1a1a1a url("../assets/packs/british-bods/britishFlag.webp") center / cover no-repeat;
}

.pack-card.is-locked {
  cursor: pointer;
  opacity: 0.9;
}

.pack-card:disabled {
  cursor: not-allowed;
  opacity: 0.9;
}

.pack-card.is-locked:hover,
.pack-card.is-locked:focus-visible,
.pack-card:disabled:hover,
.pack-card:disabled:focus-visible {
  outline: none;
  transform: none;
}

/* ── First-visit funnel ── */
.first-visit-dimmed {
  position: relative;
  overflow: hidden;
}
/* Frosted glass overlay — keeps card colours vibrant underneath */
.first-visit-dimmed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.first-visit-dimmed--out::before {
  opacity: 0;
}
.first-visit-dimmed::after {
  content: "NOT YET";
  position: absolute;
  top: 14px;
  right: -28px;
  background: #ff3366;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 40px;
  transform: rotate(35deg);
  z-index: 3;
  pointer-events: none;
  text-transform: uppercase;
}
.first-visit-dimmed--out {
  filter: none;
}
.first-visit-dimmed--out::after {
  display: none;
}
/* Blur collection, suggest cards during first visit (sixpack handled by .first-visit-dimmed) */
.pack-grid[data-first-visit="1"] .collection-card,
.pack-grid[data-first-visit="1"] .suggest-pack-card {
  filter: blur(3px);
  transition: filter 0.4s ease;
}
/* ── Welcome pill toggle ── */
.welcome-pill[hidden] {
  display: none;
}
.welcome-pill {
  position: relative;
  z-index: 20;
  display: flex;
  width: calc(100% - 36px);
  margin: 12px auto 0;
  border: 2px solid #6600ff;
  border-radius: 9999px;
  overflow: hidden;
  white-space: nowrap;
  animation: welcome-pill-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes welcome-pill-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-pill-seg {
  flex: 1;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 700;
  padding: 8px 18px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.welcome-pill-seg[aria-pressed="true"] {
  background: #6600ff;
  color: #fff;
}
.welcome-pill-seg[aria-pressed="false"] {
  background: transparent;
  color: #6600ff;
}
.welcome-pill-seg[aria-pressed="false"]:hover {
  background: rgba(102, 0, 255, 0.12);
}
.welcome-pill-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 700;
  color: #6600ff;
  background: transparent;
  border: none;
  border-left: 2px solid #6600ff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.welcome-pill-dismiss:hover {
  background: rgba(102, 0, 255, 0.12);
}

/* ── Admin pill (header-pill variant for staging toggle) ── */
.header-pill--admin {
  background: #333;
  color: #999;
}
.header-pill--admin[aria-pressed="true"] {
  background: #6600ff;
  color: #fff;
}
.header-pill--admin[aria-pressed="true"]:hover {
  background: #5500dd;
}

/* ── "What's Bods?" bottom drawer (mobile only) ── */
@media (max-width: 767px) {
  .whats-bods-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    pointer-events: none;
  }
  .whats-overlay-backdrop {
    display: none;
  }
  .whats-overlay-desc {
    pointer-events: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 55vh;
    overflow-y: auto;
    background: rgba(22, 19, 42, 0.97);
    border-top: 1px solid #3a3460;
    border-radius: 14px 14px 0 0;
    padding: 16px 18px 24px;
    color: #c8c4e0;
    font-family: var(--font);
    font-size: var(--text-xs);
    line-height: 1.45;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .whats-bods-overlay.drawer-open .whats-overlay-desc {
    transform: translateY(0);
  }
  .whats-overlay-desc p {
    margin: 0 0 8px;
  }
  .whats-overlay-desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .whats-overlay-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
  }
  .whats-overlay-close:hover {
    color: #fff;
  }
  .welcome-pill.welcome-overlay-active {
    position: relative;
    z-index: 210;
  }
}

.first-visit-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(22, 19, 42, 0.92);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 20px;
  animation: fv-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.first-visit-toast--out {
  animation: fv-toast-out 0.3s ease forwards;
}
@keyframes fv-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fv-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

.pack-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.pack-hidden-badge {
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: #ff3366;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
}

.pack-card-subline {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  margin-top: 2px;
  letter-spacing: 0.3px;
  text-transform: none;
}

.pack-card.wee .pack-card-subline,
.pack-card.big-and-little .pack-card-subline,
.pack-card.paddington .pack-card-subline,
.pack-card.wee-dinosaur .pack-card-subline,
.pack-card.wee-pirates .pack-card-subline,
.pack-card.wee-easter .pack-card-subline,
.pack-card.wee-space .pack-card-subline {
  color: color-mix(in oklab, var(--pack-accent, #152955) 70%, transparent);
}

.pack-card-age {
  color: color-mix(in oklab, var(--pack-accent, #152955) 55%, white 45%);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pack-card-features {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.pack-feature-icon {
  height: clamp(21px, 2.25vw, 27px);
  width: auto;
  opacity: 0.85;
}

.pack-card.wee .pack-feature-icon,
.pack-card.paddington .pack-feature-icon,
.pack-card.wee-dinosaur .pack-feature-icon,
.pack-card.wee-pirates .pack-feature-icon,
.pack-card.wee-easter .pack-feature-icon,
.pack-card.wee-space .pack-feature-icon {
  filter: brightness(0) saturate(100%);
  opacity: 0.5;
}

.pack-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
}

.pack-preview-wrap {
  position: relative;
  background: transparent;
  border-radius: 10px;
  border: none;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.pack-sticker-overlay {
  position: absolute;
  top: 0;
  right: 8px;
  display: inline-grid;
  place-items: center;
  z-index: 2;
}

.pack-preview {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  object-fit: contain;
  object-position: center center;
}

.pack-name {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 30px);
  text-transform: capitalize;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  font-weight: 800;
  line-height: 0.95;
}

.pack-name-subtitle-line {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.25px;
  text-transform: none;
}

.pack-card.wee .pack-name {
  color: #6633ff;
  text-shadow: none;
}

.pack-card.big-and-little .pack-name {
  color: #E88A3A;
  text-shadow: none;
}

.pack-card.wee-dinosaur .pack-name {
  color: #5B8C3E;
  text-shadow: none;
}

.pack-card.wee-pirates .pack-name {
  color: #E8872B;
  text-shadow: none;
}

.pack-card.wee-easter .pack-name {
  color: #cc99ff;
  text-shadow: none;
}

.pack-card.wee-space .pack-name {
  color: #3366ff;
  text-shadow: none;
}

.pack-card.paddington .pack-name {
  color: #0a45a1;
  text-shadow: none;
}


.pack-card.paddington .pack-card-logo {
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(1800%) hue-rotate(205deg) brightness(0.85);
}

.pack-meta {
  margin: 0;
  color: #d4dbff;
  font-size: 12px;
  letter-spacing: 0.4px;
  font-weight: 400;
}

.pack-card-foot {
  margin-top: 2px;
  color: color-mix(in oklab, var(--pack-accent, #152955) 55%, white 45%);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pack-card-foot-wrap {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.pack-card-logo {
  width: clamp(96px, 11vw, 144px);
  height: auto;
  display: block;
  opacity: 1;
}

.pack-postit {
  display: grid;
  flex: 0 0 clamp(168px, 19.8vw, 252px);
  margin: 0 calc(-1 * clamp(84px, 9.9vw, 126px));
  align-self: center;
  z-index: 3;
  pointer-events: none;
  transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) rotate(-4deg);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  animation: postit-spin 6.7s linear 3;
  animation-fill-mode: forwards;
}

@keyframes postit-spin {
  0% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(0deg) rotateX(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(3px);
  }
  3% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(70deg) rotateX(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(3px);
  }
  5% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(200deg) rotateX(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(3px);
  }
  8% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(350deg) rotateX(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(1px);
  }
  10% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(380deg) rotateX(8deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(0px);
  }
  14% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-6deg) rotateY(352deg) rotateX(-5deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(0px);
  }
  18% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-3deg) rotateY(365deg) rotateX(3deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(0px);
  }
  22% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-5deg) rotateY(358deg) rotateX(-1deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(0px);
  }
  25%, 100% {
    transform: translateX(calc(-1 * clamp(4px, 0.5vw, 8px))) perspective(800px) rotate(-4deg) rotateY(360deg) rotateX(0deg);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) blur(0px);
  }
}

.pack-card-glow {
  animation: pack-glow 6.7s ease 3;
  animation-fill-mode: forwards;
}
@keyframes pack-glow {
  0%, 20% { box-shadow: none; }
  28% { box-shadow: 0 0 20px 6px rgba(255, 220, 80, 0.6); }
  45% { box-shadow: 0 0 25px 8px rgba(255, 220, 80, 0.8); }
  75% { box-shadow: 0 0 20px 6px rgba(255, 220, 80, 0.6); }
  85% { box-shadow: none; }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-postit {
    animation: none;
  }
  .pack-card-glow {
    animation: none;
  }
}
.pack-postit > img,
.pack-postit-text {
  grid-area: 1 / 1;
}
.pack-postit > img {
  width: 100%;
  height: auto;
  display: block;
}
.pack-postit-text {
  position: relative;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 29px);
  line-height: 1.1;
  color: #4a0080;
}
.postit-line {
  position: absolute;
  white-space: nowrap;
}
.postit-name {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: underline;
  text-transform: uppercase;
}
.postit-headline {
  top: 14%;
  left: 8%;
  right: 8%;
  white-space: normal;
}
.pack-postit-text:not(.has-name) .postit-headline {
  top: 4%;
}
.postit-bigkids {
  top: calc(42% - 4px);
  left: 10%;
}
.postit-kids {
  top: 42%;
  right: 12%;
}
.postit-bods {
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
}
.postit-x {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.pack-price-sticker-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: clamp(56px, 6.6vw, 84px);
}

.pack-price-sticker {
  width: clamp(56px, 6.6vw, 84px);
  height: auto;
  display: block;
}

.pack-price-sticker.is-lock {
  width: clamp(25px, 3vw, 36px);
}

.pack-price-sticker-text {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(var(--price-text-rotate, -16.761deg));
  color: #000000;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Krab Key Balance (floating pill) ── */
.coin-balance {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  background: rgba(22, 19, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(102, 0, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(102, 0, 255, 0.15);
  animation: krabPillEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  cursor: pointer;
}

.krab-key-icon {
  width: clamp(24px, 3vw, 36px);
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.coin-count {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}

.coin-signin-cta {
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 700;
  color: #0dca0e;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: coin-cta-pulse 2s ease-in-out infinite;
}

.coin-signin-cta:hover {
  text-decoration: underline;
}

@keyframes coin-cta-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ── Krab lock on home pack card ── */
.pack-card-krab-lock {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(48px, 6vw, 72px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.pack-card-krab-lock.coin-spin-intent {
  animation: coinSpinAway 0.6s ease-in forwards;
}

/* ── Krab key in purchase modal button ── */
.modal-coin-icon {
  width: 20px;
  height: auto;
  vertical-align: middle;
  margin-right: 4px;
}

.credits-remaining {
  font-size: 0.85em;
  opacity: 0.7;
}

@keyframes krabPillEnter {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Last key/lock animation ── */
@keyframes coinSpinAway {
  0%   { transform: rotateY(0deg) scale(1); opacity: 1; }
  50%  { transform: rotateY(360deg) scale(1.3); opacity: 1; }
  100% { transform: rotateY(720deg) scale(0); opacity: 0; }
}

.coin-last-spend .krab-key-icon {
  animation: coinSpinAway 0.8s ease-in forwards;
}

/* ── Krab keys toast ── */
.crab-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #1e1a38;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  padding: 18px 24px 14px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 280px;
  animation: crabToastIn 0.3s ease-out forwards, crabToastOut 0.3s ease-in 2.7s forwards;
}

.crab-toast-img {
  width: 100px;
  height: auto;
  display: block;
}

@keyframes crabToastIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes crabToastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ── Key-earned celebration overlay ── */

.key-earned-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(8, 10, 20, 0);
  transition: background-color 0.35s ease-out;
}

.key-earned-overlay--visible {
  background-color: rgba(8, 10, 20, 0.94);
}

.key-earned-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vh, 18px);
  text-align: center;
  padding: 24px;
}

.key-earned-img {
  width: auto;
  height: clamp(120px, 26vh, 200px);
  opacity: 0;
  transform: scale(0);
  filter: drop-shadow(0 0 40px rgba(255, 200, 50, 0.4));
}

.key-earned-overlay--visible .key-earned-img {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              opacity 0.3s ease-out 0.2s;
}

.key-earned-title {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  opacity: 0;
}

.key-earned-overlay--visible .key-earned-title {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.7s;
}

.key-earned-sub {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
  opacity: 0;
}

.key-earned-overlay--visible .key-earned-sub {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.9s;
}

.key-earned-actions {
  display: flex;
  gap: 12px;
  margin-top: clamp(8px, 1vh, 16px);
  opacity: 0;
}

.key-earned-btn {
  flex: 0 1 auto !important;
  white-space: nowrap;
}
.key-earned-btn--greedy {
  font-size: clamp(11px, 1.4vw, 14px) !important;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.key-earned-btn--greedy:hover {
  opacity: 0.8;
}

.key-earned-overlay--visible .key-earned-actions {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .key-earned-img {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 40px rgba(255, 200, 50, 0.4));
  }
  .key-earned-overlay--visible .key-earned-img,
  .key-earned-overlay--visible .key-earned-title,
  .key-earned-overlay--visible .key-earned-sub,
  .key-earned-overlay--visible .key-earned-actions {
    transition: none;
    opacity: 1;
  }
}

/* ── Post-key upsell overlay ── */

.post-key-upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #16132a);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.post-key-upsell-overlay--visible {
  opacity: 1;
}

.post-key-upsell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vh, 18px);
  text-align: center;
  padding: 24px;
  max-width: 700px;
}

.post-key-upsell-title {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.upsell-pack-grid {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  justify-content: center;
  flex-wrap: wrap;
}

.upsell-pack-thumb {
  width: clamp(60px, 9vw, 90px);
  height: clamp(80px, 12vw, 120px);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  background: var(--thumb-accent, #2f8fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.upsell-pack-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upsell-pack-thumb-placeholder {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-lg);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
}

.post-key-upsell-price {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-md);
  color: var(--muted, #c8c4e0);
  margin: 0;
}

.post-key-upsell-sub {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-sm);
  color: var(--muted, #c8c4e0);
  margin: 0;
  opacity: 0.7;
}

.post-key-upsell-actions {
  display: flex;
  gap: 12px;
  margin-top: clamp(8px, 1vh, 16px);
  width: 100%;
  max-width: 520px;
  justify-content: center;
}

.post-key-upsell-btn {
  flex: 0 1 auto !important;
  white-space: nowrap;
  min-width: 0;
  font-size: clamp(16px, 2.2vw, 24px) !important;
  padding: 10px 20px !important;
}

.upsell-btn-key {
  width: 28px;
  height: auto;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Ask Grown-Up Overlay ────────────────────────────── */
.ask-grownup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #16132a);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.ask-grownup-overlay--visible {
  opacity: 1;
}

.ask-grownup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vh, 18px);
  text-align: center;
  padding: 24px;
  max-width: 700px;
}

.ask-grownup-content--hidden {
  display: none;
}

.ask-grownup-title {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.ask-grownup-sub {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-md);
  color: var(--muted, #c8c4e0);
  margin: 0;
}

.ask-grownup-pitch {
  font-family: "Montserrat", sans-serif;
  font-size: var(--text-sm);
  color: var(--muted, #c8c4e0);
  margin: 0;
  opacity: 0.7;
}

.ask-grownup-actions {
  display: flex;
  gap: 12px;
  margin-top: clamp(8px, 1vh, 16px);
  width: 100%;
  max-width: 520px;
  justify-content: center;
}

.ask-grownup-actions--stacked {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ask-grownup-btn {
  flex: 0 1 auto !important;
  white-space: nowrap;
  min-width: 0;
  font-size: clamp(16px, 2.2vw, 24px) !important;
  padding: 10px 20px !important;
}

.ask-grownup-btn--secondary {
  opacity: 0.85;
}

/* ── Gift Compose Overlay ────────────────────────────── */
.gift-compose-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(8, 10, 20, 0);
  transition: background-color 0.35s ease-out;
}
.gift-compose-overlay--visible {
  background-color: rgba(8, 10, 20, 0.94);
}
.gift-compose-card {
  width: min(420px, 90vw);
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
}
.gift-compose-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: var(--text-xl, clamp(24px, 4vw, 40px));
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.gift-compose-title-key {
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.2em;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255, 200, 50, 0.3));
}
.gift-compose-sub {
  font-size: var(--text-sm, clamp(13px, 1.6vw, 16px));
  color: var(--muted, #c8c4e0);
  margin: 0 0 24px;
}
.gift-compose-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.gift-compose-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #c8c4e0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gift-compose-input {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
textarea.gift-compose-input {
  resize: vertical;
  min-height: 70px;
}
.gift-compose-input:focus {
  border-color: rgba(255,255,255,0.4);
}
.gift-compose-input::placeholder {
  color: rgba(255,255,255,0.3);
}
.gift-compose-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  justify-content: center;
}
.gift-compose-btn {
  flex: 0 1 auto !important;
  white-space: nowrap;
  min-width: 0;
  font-size: clamp(14px, 2vw, 20px) !important;
  padding: 10px 20px !important;
}
.gift-compose-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.gift-preset-btn {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.gift-preset-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.gift-preset-btn--active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.gift-compose-error {
  color: #ff6b6b;
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
}

/* ── Gift Claim Page ─────────────────────────────────── */
.gift-claim-page {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background-color: var(--bg, #16132a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gift-claim-page--visible {
  opacity: 1;
}
.gift-claim-inner {
  width: min(480px, 90vw);
  padding: clamp(24px, 5vw, 48px) 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gift-claim-logo {
  height: 40px;
  width: auto;
  margin-bottom: 8px;
}
.gift-claim-key {
  height: 100px;
  width: auto;
  filter: drop-shadow(0 0 24px rgba(255, 200, 50, 0.35));
  animation: gift-key-float 3s ease-in-out infinite;
}
.gift-claim-key--used {
  filter: grayscale(0.6) opacity(0.5);
  animation: none;
}
@keyframes gift-key-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.gift-claim-loading {
  font-size: var(--text-sm, 14px);
  color: var(--muted, #c8c4e0);
  animation: gift-pulse 1.5s ease-in-out infinite;
}
@keyframes gift-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.gift-claim-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 4vw, 32px);
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.gift-claim-message {
  font-size: clamp(14px, 2.5vw, 18px);
  color: var(--muted, #c8c4e0);
  font-style: italic;
  margin: 0;
}
.gift-claim-pack {
  font-size: clamp(13px, 2vw, 16px);
  color: var(--muted, #c8c4e0);
  margin: 0;
}
.gift-claim-pack strong {
  color: #fff;
}
.gift-claim-explain {
  font-size: clamp(12px, 1.8vw, 15px);
  color: rgba(200, 196, 224, 0.7);
  line-height: 1.5;
  margin: 4px 0 0;
  max-width: 400px;
}
.gift-claim-btn {
  margin-top: 8px;
  flex: 0 1 auto !important;
  white-space: nowrap;
  font-size: clamp(16px, 2.5vw, 22px) !important;
  padding: 12px 32px !important;
}
.gift-claim-note {
  font-size: 12px;
  color: rgba(200, 196, 224, 0.5);
  margin: 0;
}

/* Portrait-friendly: gift claim page works in portrait */
@media (orientation: portrait) {
  .gift-claim-page {
    display: flex !important;
  }
  .gift-claim-key {
    height: 80px;
  }
}

/* ── Key-Earned: GIFT IT button (secondary style) ──── */
.btn-nav-secondary {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  padding: 10px 20px;
  border-radius: 60px;
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 0 1 auto !important;
  white-space: nowrap;
}
.btn-nav-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}

.pack-played-sticker {
  width: clamp(56px, 6.6vw, 84px);
  height: auto;
  display: block;
  transform: rotate(7deg);
  transform-origin: center;
}

.pack-lock-copy {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.2px;
  text-transform: none;
  text-align: center;
}

.pack-card.classic .pack-price-sticker-text {
  color: var(--pack-accent, #0000ff);
}

.pack-card.wee .pack-meta,
.pack-card.wee .pack-card-foot {
  color: #6633ff;
}

.pack-card.wee-dinosaur .pack-meta,
.pack-card.wee-dinosaur .pack-card-foot {
  color: #5B8C3E;
}

.pack-card.wee-pirates .pack-meta,
.pack-card.wee-pirates .pack-card-foot {
  color: #E8872B;
}

.pack-card.wee-easter .pack-meta,
.pack-card.wee-easter .pack-card-foot {
  color: #cc99ff;
}

.pack-card.wee-space .pack-meta,
.pack-card.wee-space .pack-card-foot {
  color: #3366ff;
}

/* ── Scoreboard card (Every Bods Ever Forever) ── */

.scoreboard-card {
  background: #0a0a0a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 clamp(180px, 18vw, 230px);
}

.scoreboard-card .pack-sticker-overlay {
  top: 35%;
}

/* Card hover only on interactive (game-over) cards */
.scoreboard-card--interactive:hover,
.scoreboard-card--interactive:focus-visible {
  transform: scale(1.04);
  filter: brightness(1.15);
  z-index: 2;
  outline: none;
}

.scoreboard-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.scoreboard-title {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 900;
  text-transform: capitalize;
  letter-spacing: 1.5px;
  line-height: 1;
  color: #ff6633;
  text-align: left;
}

.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Courier New", "Consolas", monospace;
  font-size: clamp(9px, 1vw, 13px);
  line-height: 1.1;
  text-align: left;
}

.scoreboard-header th {
  color: rgba(51, 255, 102, 0.4);
  font-weight: 600;
  font-size: clamp(7px, 0.8vw, 10px);
  letter-spacing: 1.5px;
  padding: 0 0 4px 0;
  border-bottom: 1px solid rgba(51, 255, 102, 0.15);
  text-transform: uppercase;
}

.scoreboard-row td {
  padding: 2px 0;
  white-space: nowrap;
}

.scoreboard-row.filled td {
  color: #33ff66;
}

.scoreboard-row.active td {
  color: #ff6633;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 102, 51, 0.5);
}

.scoreboard-row.empty td {
  color: rgba(51, 255, 102, 0.18);
}

.sb-rank {
  width: 15%;
  color: rgba(51, 255, 102, 0.35);
  font-variant-numeric: tabular-nums;
}

.sb-name {
  width: 40%;
}

.sb-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  vertical-align: middle;
  animation: sb-blink 1s step-end infinite;
}

@keyframes sb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.sb-price {
  width: 45%;
  text-align: right;
  padding-right: 8px !important;
}

.scoreboard-tagline {
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: clamp(7px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 6px;
  line-height: 1.3;
}

.scoreboard-tagline-sub {
  font-family: "Montserrat", "Segoe UI", sans-serif;
  font-size: clamp(6px, 0.7vw, 9px);
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 102, 51, 0.5);
  text-align: center;
  text-transform: uppercase;
  padding-top: 2px;
}

/* ── Six Pack card ── */

@keyframes sixpack-glow {
  0% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
  100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
}

.sixpack-card {
  background: linear-gradient(180deg, #7700ff 0%, #9933ff 100%);
  border: none;
  padding: 14px;
  border-radius: 14px;
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 clamp(180px, 18vw, 230px);
  min-height: 420px;
  height: auto;
  box-shadow: var(--shadow-card);
  cursor: default;
  position: relative;
}

.sixpack-card.first-visit-dimmed {
  overflow: hidden;
}
.first-visit-dimmed .sixpack-slots {
  z-index: 0;
  filter: blur(3px);
  transition: filter 0.4s ease;
}
.first-visit-dimmed--out .sixpack-slots {
  filter: none;
}

.sixpack-card[data-bd] {
  background: linear-gradient(180deg, #cc4400 0%, #ff6633 100%);
}

.sixpack-card[data-bd] .sixpack-slots {
  overflow: visible;
}

.sixpack-card[data-bd] .sixpack-slots svg {
  overflow: visible;
  max-height: none;
}

.sixpack-card--buy {
  cursor: pointer;
}

.sixpack-card--buy:hover,
.sixpack-card--buy:focus-visible {
  outline: 2px solid var(--white);
}

.sixpack-card--done {
  background: linear-gradient(135deg, #b8860b, #ffd700, #daa520);
  pointer-events: none;
  opacity: 0.85;
}

.sixpack-card--completing {
  animation: sixpack-glow 1.2s ease-out forwards;
}

.sixpack-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sixpack-title {
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  line-height: 0.95;
  margin: 0;
}

.sixpack-subline {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(8px, 0.9vw, 11px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.sixpack-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
  color: #ffd700;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 10px;
  border-radius: 6px;
  align-self: center;
}

.sixpack-slots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.sixpack-slots svg {
  width: 80%;
  height: auto;
  overflow: visible;
}

.sixpack-card .pack-card-foot-wrap {
  margin-top: auto;
  z-index: 4;
}

.sixpack-card .pack-sticker-overlay {
  position: relative;
  top: auto;
  right: auto;
  z-index: 4;
}

.coming-soon-card {
  background: #000000;
  border: 2px solid #000000;
  box-shadow: none;
  cursor: default;
}

.coming-soon-card:hover,
.coming-soon-card:focus-visible {
  outline: none;
  transform: none;
}

.coming-soon-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(18px, 1.8vw, 30px);
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 800;
  line-height: 0.95;
}

.coming-soon-list {
  margin-top: 6px;
  display: grid;
  align-content: end;
  gap: 4px;
}

.coming-soon-list p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0.3px;
  text-transform: none;
}

.coming-soon-foot-spacer {
  min-height: 1px;
}

/* ── Bodsday subline (below title) ── */
.bodsday-subline {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(8px, 0.85vw, 11px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

/* ── Bodsday sign-up ── */
.bodsday-foot {
  padding: 8px 0 4px;
  text-align: center;
}


.bodsday-footnote {
  margin: 0;
  color: #ffffff;
  font-size: clamp(8px, 0.85vw, 11px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

.bodsday-footnote sup {
  font-size: 0.7em;
}

.bodsday-cta {
  display: block;
  width: 100%;
  background: #f9d233;
  border: none;
  color: #1a1a1a;
  font-family: inherit;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 10px;
  letter-spacing: 0.5px;
  border-radius: 4px;
  transform: rotate(-2deg);
  margin-top: 6px;
  box-sizing: border-box;
}

.bodsday-cta:hover {
  background: #fcf8c2;
}

.coming-soon-card {
  cursor: pointer;
}

/* ── Zeffie card ── */
.zeffie-card {
  background: #1a1a1a url("../assets/misc/zeffie.webp") center / cover no-repeat;
  border: 2px solid #333;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.zeffie-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.35) 100%);
  border-radius: inherit;
}
.zeffie-card .pack-card-head,
.zeffie-card .pack-preview-wrap,
.zeffie-card .pack-card-foot-wrap {
  position: relative;
  z-index: 1;
}
.zeffie-preview-wrap {
  display: flex;
  align-items: flex-end;
}
.zeffie-card-sub {
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* ── Zeffie popup ── */
.zeffie-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.zeffie-popup-overlay:not([hidden]) {
  display: flex;
}
.zeffie-popup {
  background: #111;
  border: 1px solid #333;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  padding: 32px 28px 28px;
}
.zeffie-popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #999;
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.zeffie-popup-close:hover {
  color: #fff;
}
.zeffie-popup-body {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}
.zeffie-popup-body p {
  margin: 0 0 12px;
}
.zeffie-popup-body p:last-child {
  margin-bottom: 0;
}

.bodsday-email-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.bodsday-email-input {
  flex: 1;
  background: #000;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 1vw, 14px);
  padding: 5px 8px;
  outline: none;
}

.bodsday-email-input:focus {
  border-color: #f9d233;
}

.bodsday-email-input::placeholder {
  color: #666;
}

.bodsday-email-submit {
  background: #fff;
  border: none;
  border-radius: 4px;
  color: #000;
  font-family: inherit;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
}

.bodsday-email-submit:hover {
  background: #f9d233;
}

.bodsday-email-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.bodsday-confirmed {
  margin: 0;
  color: #f9d233;
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* ── Suggest-a-Pack card ── */
.suggest-pack-card {
  cursor: default;
}
.suggest-pack-card:hover,
.suggest-pack-card:focus-visible {
  outline: none;
  transform: none;
}
.suggest-pack-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
}
.suggest-pack-copy {
  color: #ffffff;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}
.suggest-pack-placeholder {
  cursor: text;
}
.suggest-selection {
  background: rgba(255, 255, 255, 0.92);
  color: #6633ff;
  font-weight: 800;
  line-height: 1.6;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 4px;
}
.suggest-pack-brand {
  display: inline;
}
.suggest-pack-input {
  display: none;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font);
  font-size: inherit;
  font-weight: 800;
  text-transform: uppercase;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  cursor: text;
  resize: none;
  overflow: hidden;
  line-height: inherit;
  margin-bottom: 2px;
}
.suggest-pack-card .pack-card-foot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.suggest-pack-btn {
  background: #ffffff;
  color: #6633ff;
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 18px;
  font-family: var(--font);
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 0 0 #b3b3b3, 0 6px 8px rgba(0,0,0,0.15);
  position: relative;
  top: 0;
  transition: top 0.08s, box-shadow 0.08s;
  margin-bottom: -12px;
}
.suggest-pack-btn:hover {
  top: 2px;
  box-shadow: 0 2px 0 0 #b3b3b3, 0 3px 4px rgba(0,0,0,0.12);
}
.suggest-pack-btn:active {
  top: 4px;
  box-shadow: 0 0 0 0 #b3b3b3, 0 1px 2px rgba(0,0,0,0.1);
}
.suggest-pack-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 4px 0 0 #b3b3b3;
}
.suggest-pack-response {
  color: #ffffff;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  flex: 1;
}

.pack-card.grown-up-card {
  background: #cccccc;
  border: 2px solid #cccccc;
  color: #000000;
  cursor: pointer;
}

.grown-up-card .pack-name,
.grown-up-card .pack-card-subline {
  color: #000000;
}

.grown-up-card:hover,
.grown-up-card:focus-visible {
  outline: 2px solid #000000;
  outline-offset: -2px;
  transform: translateY(-3px);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

#screen-team-setup {
  background: var(--pack-color);
  color: #ffffff;
}

.team-setup-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding-bottom: 8px;
  --gameplay-alt-outline: #ffffff;
}

.team-setup-main {
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
}

.team-setup-vs .team-setup-main {
  height: 100%;
  width: min(1160px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(10px, 1.8vw, 26px);
  row-gap: clamp(10px, 2vh, 20px);
  justify-items: stretch;
  align-items: center;
  padding-bottom: 40px;
}

.team-setup-coop .team-setup-main {
  height: 100%;
}

.team-setup-vs .team-setup-title-row {
  grid-column: 1 / -1;
  grid-row: 1;
}

.team-setup-vs .team-setup-block[data-team-index="0"] {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

.team-setup-vs .team-setup-vs-center {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: clamp(3px, 0.6vh, 6px);
  /* offset to vertically centre shuffle btn with the team-name-input:
     team-block padding-top + (input-height − btn-height) / 2           */
  padding-top: calc(clamp(10px, 1.8vh, 16px) + (48px - clamp(32px, 4vw, 44px)) / 2);
}

.team-setup-vs .team-setup-block[data-team-index="1"] {
  grid-column: 3;
  grid-row: 2;
  width: 100%;
}

/* ── League team setup ── */
.team-setup-league .team-setup-main {
  height: 100%;
  width: min(1200px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  align-content: center;
  padding-bottom: 20px;
}

.league-team-grid {
  display: grid;
  gap: clamp(8px, 1.5vw, 16px);
  width: 100%;
  align-content: center;
}
.league-team-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.league-team-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.league-team-grid .team-setup-block {
  width: 100%;
}

.league-shuffle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  padding-top: 4px;
}

/* ── League-mode compact layout ── */
.team-setup-league .age-pill-label {
  display: none;
}
.team-setup-league .age-pill-group {
  gap: 3px;
  margin-top: 6px;
}
.team-setup-league .age-pill-toggle {
  width: 100%;
  padding: 3px;
  gap: 3px;
}
.team-setup-league .age-pill-option {
  aspect-ratio: unset;
  min-height: clamp(36px, 5.5vh, 52px);
  padding: clamp(3px, 0.5vh, 6px) 2px clamp(2px, 0.4vh, 4px);
  gap: 1px;
}
.team-setup-league .age-pill-svg--kid {
  height: clamp(18px, 3vh, 28px);
  width: clamp(10px, 1.6vh, 16px);
}
.team-setup-league .age-pill-svg--tween {
  height: clamp(22px, 3.6vh, 34px);
  width: clamp(11px, 1.8vh, 18px);
}
.team-setup-league .age-pill-svg--teen {
  height: clamp(24px, 3.8vh, 38px);
  width: clamp(12px, 2vh, 20px);
}
.team-setup-league .age-pill-svg--adult {
  height: clamp(26px, 4vh, 40px);
  width: clamp(13px, 2.2vh, 22px);
}
.team-setup-league .team-name-input {
  min-height: 36px;
  font-size: clamp(14px, 1.8vw, 22px);
  padding: 5px 10px;
}
.team-setup-league .team-setup-block {
  padding: clamp(6px, 1vh, 12px);
}
.team-setup-league .age-pill-option-label {
  font-size: clamp(6px, 0.8vw, 9px);
}

/* ── Crab league badge ── */
.crab-league-badge {
  display: inline-block;
  width: clamp(32px, 5vw, 56px);
  height: auto;
  opacity: 0.5;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
  vertical-align: middle;
  flex-shrink: 0;
}
.crab-league-badge--lg {
  width: clamp(48px, 7vw, 80px);
  opacity: 0.6;
}

/* ── League quit confirm overlay ── */
.league-quit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.league-quit-card {
  background: #1a1730;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: clamp(24px, 4vh, 40px) clamp(32px, 5vw, 56px);
  text-align: center;
  max-width: 420px;
}
.league-quit-card h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.league-quit-card p {
  font-size: clamp(13px, 1.6vw, 17px);
  opacity: 0.7;
  margin: 0 0 24px;
}
.league-quit-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.league-quit-actions .btn {
  min-width: 140px;
}

/* ── League table title row ── */
.league-table-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}
.league-table-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* .team-setup-title uses .screen-title — slightly smaller variant */
.team-setup-title {
  font-size: clamp(28px, 5.2vw, 56px);
}

.team-setup-title-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 10px);
}

.team-setup-block {
  width: min(620px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: color-mix(in oklab, var(--pack-color) 78%, #000000);
  padding: clamp(10px, 1.8vh, 16px);
}

.team-setup-coop .team-setup-block {
  width: min(500px, 100%);
}

.team-name-shell {
  position: relative;
}

.team-name-input {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 13px;
  background: rgba(16, 16, 20, 0.9);
  color: #d7d7d7;
  font-size: clamp(19px, 2.4vw, 32px);
  font-weight: 800;
  font-style: italic;
  text-transform: none;
  padding: 8px 14px;
}

.team-name-input::placeholder {
  color: #d7d7d7;
  font-style: italic;
  text-transform: none;
  opacity: 1;
}

.team-name-input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
}

/* ── AGE SELECTOR PILL ── */

.age-pill-group {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

@keyframes age-pill-enter {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 0.6; }
  80%  { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.5; }
}

.team-setup-block .age-pill-group:first-child {
  margin-top: 0;
}

.age-pill-label {
  margin: 0;
  font-size: clamp(10px, 1.2vw, 14px);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
}

.age-pill-toggle {
  width: min(360px, 75%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px;
  overflow: visible;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.16);
}

.age-pill-option {
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 7px;
  background: #ffffff;
  color: rgba(255, 255, 255, 0.35);
  padding: clamp(6px, 1vh, 10px) 4px clamp(4px, 0.6vh, 6px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: clamp(54px, 8vh, 76px);
  aspect-ratio: 5 / 7;
  opacity: 0;
  transform: scale(0);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.age-pill-option.age-pill-entered {
  animation: age-pill-enter 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.age-pill-option:first-child {
  border-radius: 7px;
}

.age-pill-option:last-child {
  border-radius: 7px;
}

.age-pill-option.is-active {
  background: var(--pack-color);
  border-color: #fff;
  border-radius: 7px;
  opacity: 1;
  transform: scale(1);
}

.age-pill-option.is-active .age-pill-svg {
  background: #fff;
}

.age-pill-option-label {
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #16132a;
  margin-top: 2px;
  transition: color 0.2s ease;
}

.age-pill-option.is-active .age-pill-option-label {
  color: #fff;
}

.age-pill-option:hover,
.age-pill-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
}

.age-pill-icon {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 100%;
}

.age-pill-svg {
  display: inline-block;
  background: #16132a;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  transition: background 0.2s ease;
}

.age-pill-svg--kid {
  height: clamp(26px, 4.4vh, 40px);
  width: clamp(14px, 2.4vh, 22px);
  -webkit-mask-image: url('../assets/misc/player-icon-little-kid.svg');
  mask-image: url('../assets/misc/player-icon-little-kid.svg');
}
.age-pill-svg--tween {
  height: clamp(32px, 5.4vh, 48px);
  width: clamp(16px, 2.8vh, 26px);
  -webkit-mask-image: url('../assets/misc/player-icon-little-tween.svg');
  mask-image: url('../assets/misc/player-icon-little-tween.svg');
}
.age-pill-svg--teen {
  height: clamp(36px, 5.8vh, 54px);
  width: clamp(17px, 3vh, 28px);
  -webkit-mask-image: url('../assets/misc/player-icon-little-teen.svg');
  mask-image: url('../assets/misc/player-icon-little-teen.svg');
}
.age-pill-svg--adult {
  height: clamp(38px, 6.2vh, 58px);
  width: clamp(18px, 3.2vh, 30px);
  -webkit-mask-image: url('../assets/misc/player-icon-little-adult.svg');
  mask-image: url('../assets/misc/player-icon-little-adult.svg');
}

.team-setup-vs-copy {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(14px, 2.75vw, 29px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 1px;
}

.btn.team-setup-name-shuffle {
  width: clamp(32px, 4vw, 44px);
  height: clamp(32px, 4vw, 44px);
  margin-bottom: clamp(4px, 1vh, 10px);
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.btn.team-setup-name-shuffle:disabled {
  opacity: 0.62;
}

.team-setup-name-shuffle-icon {
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  display: block;
  background: var(--pack-color);
  -webkit-mask: url('../assets/misc/shuffle_on.svg') center / contain no-repeat;
  mask: url('../assets/misc/shuffle_on.svg') center / contain no-repeat;
}

.team-setup-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.25px;
  text-align: center;
  max-width: min(920px, 100%);
  justify-self: center;
}

.team-setup-safety-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

.team-setup-safety-note a {
  color: #fff;
  text-decoration: underline;
}

.team-setup-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: stretch;
  padding-top: 4px;
}

.team-setup-coop .team-setup-actions {
  width: 100%;
}

/* .team-setup-back uses .btn-nav-back */
/* .team-setup-play uses .btn-nav-primary */

/* ── Age-select toast ── */
.age-toast {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
  z-index: 10;
}

.age-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ── PACK SELECT ── */

#screen-pack-select {
  background: #120f24;
  color: #ffffff;
}

.pack-select-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}


.pack-select-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: clamp(10px, 1.8vw, 26px);
  width: min(1160px, 100%);
  margin: 0 auto;
}

.pack-select-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 16px);
  width: 100%;
  overflow: visible;
}

.pack-select-nav {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  width: 100%;
  justify-content: center;
  overflow: visible;
}

.btn.pack-select-arrow {
  min-width: 0;
  min-height: 0;
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.btn.pack-select-arrow:hover {
  opacity: 0.7;
  background: transparent;
}

.pack-select-arrow-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.pack-select-arrow-flip {
  transform: scaleX(-1);
}

.pack-select-card {
  flex: 1;
  max-width: clamp(135px, 21vw, 240px);
  min-width: 105px;
  position: relative;
  overflow: visible;
  aspect-ratio: 6 / 10;
}

/* ── Fan-peek card carousel ── */

.pack-select-fan-card {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.pack-select-fan-card .pack-select-card-inner {
  height: 100%;
  aspect-ratio: auto;
}

.fan-card-front {
  transform: translateX(0) rotate(0deg) scale(1);
  opacity: 1;
  z-index: 2;
}

.fan-card-behind-right {
  transform: translateX(12px) rotate(3deg) scale(0.95);
  opacity: 0.6;
  z-index: 0;
}

.fan-card-behind-left {
  transform: translateX(-12px) rotate(-3deg) scale(0.95);
  opacity: 0.6;
  z-index: 0;
}

/* Front card flies off */
.fan-flyoff-left {
  animation: fanFlyLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 3;
}

@keyframes fanFlyLeft {
  0%   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  40%  { transform: translateX(-30px) rotate(-6deg) scale(1.02); opacity: 1; }
  100% { transform: translateX(-200px) rotate(-25deg) scale(0.8); opacity: 0; }
}

.fan-flyoff-right {
  animation: fanFlyRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 3;
}

@keyframes fanFlyRight {
  0%   { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
  40%  { transform: translateX(30px) rotate(6deg) scale(1.02); opacity: 1; }
  100% { transform: translateX(200px) rotate(25deg) scale(0.8); opacity: 0; }
}

/* Behind card promotes to front */
.fan-promote-from-right {
  animation: fanPromoteRight 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  z-index: 2;
}

@keyframes fanPromoteRight {
  0%   { transform: translateX(12px) rotate(3deg) scale(0.95); opacity: 0.6; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

.fan-promote-from-left {
  animation: fanPromoteLeft 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  z-index: 2;
}

@keyframes fanPromoteLeft {
  0%   { transform: translateX(-12px) rotate(-3deg) scale(0.95); opacity: 0.6; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

/* New behind card enters */
.fan-new-behind-right {
  animation: fanNewBehindRight 0.35s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes fanNewBehindRight {
  0%   { transform: translateX(24px) rotate(6deg) scale(0.9); opacity: 0; }
  100% { transform: translateX(12px) rotate(3deg) scale(0.95); opacity: 0.6; }
}

.fan-new-behind-left {
  animation: fanNewBehindLeft 0.35s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes fanNewBehindLeft {
  0%   { transform: translateX(-24px) rotate(-6deg) scale(0.9); opacity: 0; }
  100% { transform: translateX(-12px) rotate(-3deg) scale(0.95); opacity: 0.6; }
}

/* Reduced motion: skip animations */
@media (prefers-reduced-motion: reduce) {
  .fan-flyoff-left,
  .fan-flyoff-right,
  .fan-promote-from-right,
  .fan-promote-from-left,
  .fan-new-behind-right,
  .fan-new-behind-left {
    animation: none;
  }
}

.pack-select-card-inner {
  border-radius: 16px;
  border: 12px solid #ffffff;
  background: var(--pack-accent, #333);
  padding: clamp(10px, 1.5vh, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  aspect-ratio: 6 / 10;
  justify-content: flex-end;
  transition: background-color 0.2s ease;
}

.pack-select-card-inner[data-pack-id="wee"],
.pack-select-card-inner[data-pack-id="big-and-little"],
.pack-select-card-inner[data-pack-id="wee-dinosaur"],
.pack-select-card-inner[data-pack-id="wee-pirates"],
.pack-select-card-inner[data-pack-id="wee-easter"],
.pack-select-card-inner[data-pack-id="wee-space"] {
  background: #ffffff;
}
.pack-select-card-inner[data-pack-id="wee"] .pack-select-card-label,
.pack-select-card-inner[data-pack-id="big-and-little"] .pack-select-card-label,
.pack-select-card-inner[data-pack-id="wee-dinosaur"] .pack-select-card-label,
.pack-select-card-inner[data-pack-id="wee-pirates"] .pack-select-card-label,
.pack-select-card-inner[data-pack-id="wee-easter"] .pack-select-card-label,
.pack-select-card-inner[data-pack-id="wee-space"] .pack-select-card-label {
  color: var(--pack-accent, #333);
}

/* Shuffle slot below each card */
.pack-shuffle-slot {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-shuffle-btn {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  cursor: pointer;
  padding: 5px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: visible;
  position: relative;
  width: 114px;
  transition: border-color 0.2s ease;
}

.pack-shuffle-btn:hover {
  border-color: rgba(255, 255, 255, 1);
}

.pack-shuffle-letter {
  display: inline-block;
  font-size: clamp(11px, 1.3vw, 16px);
  font-weight: 400;
  color: #ffffff;
  width: 12px;
  text-align: center;
  position: relative;
  font-family: 'Montserrat', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

.pack-select-card-preview-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pack-select-card-preview {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pack-select-card-label {
  margin: 0 0 auto 0;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  min-height: 3.3em;
}

.pack-select-sticker-overlay {
  position: absolute;
  bottom: -4px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-select-price-sticker {
  width: clamp(96px, 11vw, 144px);
  height: auto;
  display: block;
}

.pack-select-price-text {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(var(--price-text-rotate, -16.761deg));
  color: #000000;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;
}

.pack-select-lock-overlay {
  position: absolute;
  bottom: -8px;
  left: -12px;
  width: clamp(64px, 9vw, 110px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.pack-select-credits-badge {
  position: absolute;
  top: 12px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}
.pack-select-krab-key {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.pack-select-vs-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
}

.pack-select-logo {
  width: clamp(60px, 10vw, 120px);
  height: auto;
}

.pack-select-vs-copy {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(48px, 9vw, 96px);
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: 2px;
}

.pack-select-team-name {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.btn.pack-select-shuffle {
  width: clamp(32px, 4vw, 44px);
  height: clamp(32px, 4vw, 44px);
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.pack-select-shuffle-icon {
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  display: block;
  background: var(--pack-color);
  -webkit-mask: url('../assets/misc/shuffle_on.svg') center / contain no-repeat;
  mask: url('../assets/misc/shuffle_on.svg') center / contain no-repeat;
}

.pack-filter-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.2);
  width: clamp(140px, 16vw, 210px);
  margin-top: clamp(6px, 1vw, 12px);
}

.pack-filter-opt {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: clamp(10px, 1.3vw, 14px);
  font-weight: 800;
  text-align: center;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.pack-filter-opt.is-active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.pack-filter-opt:hover,
.pack-filter-opt:focus-visible {
  color: #fff;
}

.pack-select-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

/* .pack-select-back uses .btn-nav-back */
/* .pack-select-play uses .btn-nav-primary with overrides */
.btn.pack-select-play {
  border: none;
}

.btn.pack-select-play:disabled,
.btn.pack-select-play.is-disabled {
  background: #808080;
  cursor: not-allowed;
}

/* ── END PACK SELECT ── */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
}

/* Pack-color glow — apply to cards, featured buttons, or hero elements */
.pack-glow {
  box-shadow: 0 0 20px color-mix(in oklab, var(--pack-color) 30%, transparent);
}

/* Display font — for hero/announcement moments */
.font-display {
  font-family: var(--font-display);
}

/* Shared screen title — used by mode-select, settings, team-setup, round-announce, judge-prompt */
.screen-title {
  margin: 0;
  text-transform: uppercase;
  font-size: var(--text-xl);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
}

/* Shared nav-button bases — "back" (outline) and "primary" (filled) */
.btn-nav-back {
  min-width: clamp(120px, 16vw, 190px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--nav-btn-radius);
  background: transparent;
  color: #ffffff;
  font-size: var(--nav-btn-font-size);
  line-height: 1;
  font-weight: var(--nav-btn-font-weight);
  padding: var(--nav-btn-padding);
}

.btn-nav-primary {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: var(--nav-btn-radius);
  background: #ffffff;
  color: var(--pack-color);
  font-size: var(--nav-btn-font-size);
  line-height: 1;
  font-weight: var(--nav-btn-font-weight);
  padding: var(--nav-btn-padding);
  white-space: nowrap;
}

.btn.quit-control {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  line-height: 1;
  padding: 6px;
}

.btn.quit-control:hover,
.btn.quit-control:focus-visible {
  background: transparent;
  outline: none;
  color: rgba(255, 255, 255, 0.7);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-nav-primary.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: saturate(0.3);
}

@keyframes cta-brightness-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.455); }
}

.btn-nav-primary.is-ready,
.htp-screen-cta,
.pack-select-play:not(.is-disabled) {
  animation: cta-brightness-pulse 1.38s ease-in-out infinite;
}

.btn.secondary {
  background: #27283c;
}

.btn.danger {
  background: var(--red);
  color: #fff;
}

.shape-stage {
  height: calc(100% - 150px);
  display: grid;
  place-items: center;
}

.shape-card {
  width: min(360px, 82%);
  background: var(--pack-card-bg);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.shape-art-wrap {
  border-radius: 8px;
  background: transparent;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.shape-card img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.shape-title {
  margin: 4px 0 2px;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 0.95;
  font-weight: 800;
  color: var(--pack-card-fg);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
  max-width: 100%;
}

.shape-card-logo {
  width: 33%;
  max-width: 33%;
  justify-self: center;
  align-self: end;
  margin-bottom: 0;
}

.shape-actions {
  justify-content: center;
  margin-top: 24px;
}

#screen-shape-reveal .shape-preview-stack {
  width: min(340px, 82vw, 54dvh);
  display: grid;
  gap: 8px;
  justify-items: center;
}

#screen-shape-reveal .shape-preview-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#screen-shape-reveal .shape-preview-stack .shape-card {
  width: 100%;
  max-height: calc(100dvh - 170px);
}

#screen-shape-reveal .shape-preview-stack .shape-card img {
  max-height: min(44dvh, 320px);
}

#screen-shape-reveal .shape-teamline {
  text-align: left;
}

#screen-shape-reveal .shape-roundline {
  text-align: right;
}

#screen-shape-reveal .shape-preview-meta .topline {
  color: #ffffff;
}

#screen-shape-reveal.active {
  display: block;
}

#screen-shape-reveal .shape-stage {
  height: auto;
  min-height: 0;
  padding-bottom: 96px;
}

#screen-shape-reveal .shape-actions {
  position: absolute;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  margin-top: 0;
  justify-content: flex-end;
  z-index: 9;
}

#screen-shape-reveal #go {
  background: #ffffff;
  color: var(--pack-color);
  border: 2px solid #ffffff;
}

.play-stage-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--play-footer-height);
  gap: 12px;
  height: 100%;
  min-height: 0;
  background: #000000;
}

/* When a play-shell manages its own grid rows, let it fill the stage */
.play-stage-screen:has(.play-shell) {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

/* --- Unified play layout (shape-reveal, attempt, deliberation) --- */

.play-shell {
  position: relative;
  display: grid;
  grid-template-rows: var(--result-top-row-height, minmax(0, 1fr)) min-content;
  gap: var(--result-layout-gap);
  align-content: center;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.play-media {
  width: 100%;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.play-layout {
  display: grid;
  grid-template-columns:
    var(--result-card-width, auto)
    var(--result-video-width, auto);
  gap: var(--result-layout-gap);
  max-width: 100%;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-items: start;
  justify-content: center;
}

.play-layout > .side-shape {
  width: var(--result-card-width, auto);
  aspect-ratio: var(--result-card-ratio);
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-self: start;
  border-radius: var(--result-screen-radius);
}

.play-layout > .camera-frame {
  width: var(--result-video-width, auto);
  aspect-ratio: 4 / 3;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-self: start;
  justify-self: stretch;
  border-radius: var(--result-screen-radius);
}

/* Quit button overlaid on camera-frame (top-right corner) */
.camera-quit {
  position: absolute;
  top: clamp(6px, 1vh, 12px);
  right: clamp(6px, 1vh, 12px);
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 0;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.camera-quit:hover,
.camera-quit:focus-visible {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  outline: none;
}

.camera-quit-secondary {
  top: calc(clamp(6px, 1vh, 12px) + 44px + 4px);
}

/* Play-shell footer (shape-reveal, deliberation) */
.play-shell .play-footer {
  height: auto;
  min-height: var(--result-footer-row-height);
  display: flex;
  justify-content: stretch;
  align-items: center;
  gap: var(--result-layout-gap);
  position: relative;
  z-index: 9;
}

.side-shape {
  position: relative;
  background: var(--pack-card-bg);
  border: 6px solid #ffffff;
  border-radius: var(--result-screen-radius, 14px);
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.side-shape,
.camera-frame,
.result-media {
  height: 100%;
  min-height: 0;
}

.result-media {
  position: relative;
}

.result-pack-title {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
}

.side-shape-title {
  margin: -5px 0 0;
  color: var(--pack-card-fg);
  text-transform: uppercase;
  text-align: center;
  line-height: 0.95;
  font-weight: 800;
  overflow-wrap: break-word;
  word-break: break-word;
}

.side-shape-pack-title {
  margin: 0;
  color: var(--pack-card-fg);
  opacity: 0.7;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1;
}

.side-shape-art {
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.side-shape-art img {
  width: 95%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.side-shape-logo {
  width: 49.5%;
  max-width: 49.5%;
  justify-self: center;
  align-self: end;
  margin-bottom: 0;
}

.camera-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--result-screen-radius, 14px);
  overflow: hidden;
  background: var(--panel-2);
}

.camera-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  font-size: 20px;
  text-transform: uppercase;
  z-index: 2;
}

.camera-footnote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 6px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(18px, 1.95vw, 25.5px);
  font-style: italic;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  z-index: 2;
  pointer-events: none;
}

video,
.capture-image,
.delib-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deliberation-screen .delib-photo {
  opacity: 0;
}

.result-screen .camera-frame .delib-photo {
  opacity: 0;
}

.result-screen .camera-frame .delib-photo.video-playing {
  opacity: 1;
}

/* Mirror the replay video (raw recording is un-mirrored) */
.result-replay-video {
  transform: scaleX(-1);
}

/* White flash overlay for freeze moment */
.result-flash-overlay {
  position: absolute;
  inset: 0;
  background: white;
  border-radius: var(--result-screen-radius, 14px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.result-flash-overlay.flash-active {
  opacity: 1;
}
.result-flash-overlay.flash-fade {
  opacity: 0;
  transition: opacity 250ms ease-out;
}

/* Countdown intro overlay (challenge name + 3-2-1) */
.result-countdown-overlay {
  z-index: 4;
}
.result-countdown-text {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 100;
  font-size: clamp(72px, 20vw, 200px);
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  paint-order: stroke fill;
  animation: countdown-pop 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes countdown-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.result-screen .delib-loading-overlay {
  z-index: 2;
  transition: opacity 300ms ease;
}

.result-screen.result-revealed .delib-loading-overlay {
  opacity: 0;
  pointer-events: none;
}

.score-skull,
.score-warning {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}
.score-spoon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  object-fit: contain;
}

.result-score-corner {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: none;
  font-size: clamp(90px, 13.5vw, 195px);
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.result-score-corner.is-pending {
  opacity: 0 !important;
}

.result-screen.result-revealed .result-score-corner {
  opacity: 1;
}

@keyframes krab-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, -3px); }
  20% { transform: translate(5px, 2px); }
  30% { transform: translate(-4px, 4px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-3px, 3px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-5px, 1px); }
  80% { transform: translate(3px, -3px); }
  90% { transform: translate(-2px, 2px); }
}

.krab-shake .result-shell {
  animation: krab-shake 0.6s ease-out;
}

video {
  transform: scaleX(-1);
}

.overlay-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

.judging-banner {
  position: absolute;
  left: -12px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(30, 20, 50, 0.75);
  color: #fff;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1rem, 3vw, 1.6rem);
  text-transform: uppercase;
  text-align: center;
  padding: 0.5em 1em;
  pointer-events: none;
  letter-spacing: 0.04em;
  transition: opacity 0.4s ease;
}
.judging-banner.banner-hidden {
  opacity: 0;
}

.thinking-dots span {
  display: inline-block;
  opacity: 0;
  animation: dot-blink 1.4s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
  0%, 20% { opacity: 0; }
  40% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.get-ready-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

.get-ready-overlay[hidden] {
  display: none;
}

.get-ready-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vh, 12px);
}

.get-ready-overlay-text {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: 1;
}

.get-ready-overlay-content.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

.get-ready-overlay-team {
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: 1.1;
}

.camera-watermark {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 72px;
  height: auto;
  z-index: 4;
  opacity: 0.92;
  pointer-events: none;
}

/* --- Pie countdown timer --- */

.pie-timer {
  --progress: 0;
  width: clamp(32px, 6vh, 52px);
  height: clamp(32px, 6vh, 52px);
  border-radius: 50%;
  background: conic-gradient(
    rgba(255, 255, 255, 0.85) calc(var(--progress) * 1%),
    transparent calc(var(--progress) * 1%)
  );
  border: 3px solid rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.countdown-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vh, 12px);
}

.countdown-stack[hidden] {
  display: none;
}

.countdown {
  font-size: min(220px, 32vw);
  line-height: 1;
  text-shadow: 0 0 28px rgba(0, 0, 0, 0.7);
}

.delib-loading-overlay {
  align-items: center;
  justify-items: center;
  padding: 0;
}

.delib-loading-mark {
  width: 100%;
  max-width: 100%;
}

.delib-loading-svg {
  width: 100%;
  height: auto;
  display: block;
}

.delib-loading-layer {
  opacity: 0;
  transition: opacity 180ms ease;
}

.delib-loading-layer.is-visible {
  opacity: 1;
}

.delib-footer-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: auto;
  padding: 0 8px;
  max-width: calc(var(--result-card-width) + var(--result-layout-gap) + var(--result-video-width));
  margin-inline: auto;
}

.delib-footer-line {
  width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(15px, 2.175vw, 30px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.delib-footer-line.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

@keyframes bods-fade-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}

.delib-brief-debug {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(9px, 0.92vw, 12px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(34vw, 320px);
  pointer-events: none;
}

.result-quote {
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  font-family: "Arial Black", "Impact", "Segoe UI", sans-serif;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.summary-time-text {
  margin: 0;
  display: inline-block;
  color: #ffffff;
  font-size: clamp(16px, 1.75vw, 24px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: none;
  opacity: 0.96;
}

.round-summary-time-text {
  margin-top: -2px;
}

.result-caption-overlay {
  inset: auto 0 0 0;
  align-items: end;
  justify-items: center;
  gap: 8px;
  padding: 0 clamp(70px, 8vw, 110px) clamp(12px, 2.2vh, 22px) clamp(12px, 2vw, 24px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.result-badge {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  text-align: center;
}

.result-screen.result-revealed .result-caption-overlay {
  opacity: 1;
}

#screen-result.result-screen.active {
  display: block;
}

#screen-result.result-screen.active .result-stage {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

#screen-result.result-screen.active .result-shell {
  position: relative;
  display: grid;
  grid-template-rows: var(--result-top-row-height, minmax(0, 1fr)) min-content;
  gap: var(--result-layout-gap);
  height: 100%;
  min-height: 0;
  overflow: visible;
}

#screen-result.result-screen.active .result-media {
  width: 100%;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  overflow: hidden;
}

#screen-result.result-screen.active .result-layout {
  display: grid;
  grid-template-columns:
    var(--result-card-width, auto)
    var(--result-video-width, auto);
  gap: var(--result-layout-gap);
  max-width: 100%;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-items: start;
  justify-content: center;
}

#screen-result.result-screen.active .result-shape-card {
  width: var(--result-card-width, auto);
  aspect-ratio: var(--result-card-ratio);
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-self: start;
  border-radius: var(--result-screen-radius);
}

#screen-result.result-screen.active .result-video-frame {
  width: var(--result-video-width, auto);
  aspect-ratio: 4 / 3;
  height: var(--result-top-row-height, 100%);
  min-height: 0;
  align-self: start;
  justify-self: stretch;
  border-radius: var(--result-screen-radius);
}

.result-header,
.game-scoreline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.result-footer {
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  margin-top: 0;
  position: relative;
  z-index: 9;
}

.play-footer {
  height: var(--play-footer-height);
  min-height: var(--play-footer-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 9;
}

.result-screen .result-footer.play-footer {
  height: auto;
  min-height: 0;
  justify-content: stretch;
  align-items: center;
}

.play-footer-empty {
  pointer-events: none;
}


.shape-reveal-footer-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
}

#screen-shape-reveal .shape-reveal-footer-action #go {
  width: 100%;
}

#screen-shape-reveal .shape-reveal-footer-action #go.shape-go-delayed {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

#screen-shape-reveal .shape-reveal-footer-action #go.shape-go-delayed.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.round-announce-screen,
.judge-prompt-screen {
  position: absolute;
  inset: 0;
  background: #000000;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.round-announce-title,
.judge-prompt-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(84px, 13vw, 210px);
  line-height: 0.86;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
}

.round-announce-title {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

.tiebreaker-announce-screen {
  background: var(--pack-color);
}

.tiebreaker-announce-title {
  color: #ffffff;
  font-size: clamp(72px, 12vw, 190px);
  animation: tiebreaker-pulse 600ms ease-in-out infinite;
}

@keyframes tiebreaker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.04); }
}

.judge-prompt-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 28px);
  max-width: calc(100% - 36px);
}

.judge-prompt-title sup {
  font-size: 0.33em;
  vertical-align: super;
  line-height: 0;
}

.judge-prompt-title.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

.judge-prompt-ed-anchor {
  position: relative;
  display: inline;
}

.judge-prompt-logo {
  position: absolute;
  width: clamp(80px, 10vw, 140px);
  pointer-events: none;
  z-index: 0;
}

.judge-prompt-footnote-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.judge-prompt-footnote {
  font-size: clamp(10px, 1.4vw, 14px);
  opacity: 0.55;
  max-width: 38ch;
  text-align: center;
  line-height: 1.35;
  margin: 0;
}

.judge-prompt-joker {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  height: clamp(160px, 34vh, 300px);
  aspect-ratio: 5 / 7;
  width: auto;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vh, 10px);
  padding: clamp(10px, 2vh, 22px) clamp(10px, 1.5vh, 18px);
  z-index: 1;
}

.judge-prompt-joker .jg-card-front-name {
  font-size: clamp(14px, 2.5vh, 24px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.1;
}

.judge-prompt-joker .jg-card-front-icon img {
  width: clamp(36px, 6vh, 64px);
  height: auto;
}

.judge-prompt-joker .jg-card-front-desc {
  font-size: clamp(10px, 1.8vh, 16px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.3;
}

.judge-prompt-screen {
  grid-template-rows: 1fr;
  background: var(--pack-color, #000);
  --gameplay-alt-outline: #ffffff;
}

/* --- Get Ready Screen (replaces round-announce + shape-reveal) --- */

.get-ready-screen {
  position: absolute;
  inset: 0;
  background: var(--pack-color);
  display: grid;
  align-items: center;
  text-align: center;
  padding: 18px clamp(28px, 5vw, 72px);
}

.get-ready-logo {
  position: absolute;
  width: clamp(80px, 10vw, 140px);
  pointer-events: none;
  z-index: 0;
}

.get-ready-screen.tiebreaker-get-ready {
  background: var(--pack-color);
}

.get-ready-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vh, 12px);
}

.get-ready-round-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(24px, 3.5vw, 48px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tiebreaker-get-ready .get-ready-round-label {
  color: #ffffff;
  font-size: clamp(72px, 12vw, 190px);
  animation: tiebreaker-pulse 600ms ease-in-out infinite;
}

.get-ready-team-name {
  margin: 0;
  color: #ffffff;
  font-size: 160px; /* overridden by fitTitle JS */
  line-height: 0.88;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
  width: 100%;
  overflow: hidden;
}

.get-ready-text {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.get-ready-text.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

.get-ready-start-btn {
  margin-top: clamp(8px, 2vh, 16px);
  background: #fff;
  color: var(--pack-color);
  border: none;
  font-size: clamp(22px, 3vw, 38px);
  padding: 10px 36px;
}

.get-ready-footnote {
  font-size: clamp(10px, 1.4vw, 14px);
  opacity: 0.55;
  max-width: 38ch;
  text-align: center;
  line-height: 1.35;
  margin: 0;
}

/* --- Boss Mode get-ready --- */

.boss-get-ready .get-ready-round-label {
  color: #ffffff;
  font-weight: 900;
}

.get-ready-boss-name {
  line-height: 0.85;
}

.get-ready-boss-subtitle {
  margin: 0;
  color: #ffffff;
  font-size: clamp(48px, 8vw, 130px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 1px;
}

.get-ready-boss-subtitle sup {
  font-size: 0.4em;
  vertical-align: super;
  line-height: 0;
}

.boss-get-ready .get-ready-text {
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 900;
}

.boss-get-ready .get-ready-text sup {
  font-size: 0.45em;
  vertical-align: super;
  line-height: 0;
}

.get-ready-footnotes-boss {
  position: absolute;
  bottom: clamp(12px, 2vh, 24px);
  left: clamp(20px, 3vw, 48px);
  text-align: left;
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: 700;
  color: #ffffff;
  opacity: 0.85;
  line-height: 1.5;
}

.get-ready-footnotes-boss p {
  margin: 0;
}

.vs-split-bg .get-ready-screen {
  background: linear-gradient(
    135deg,
    var(--team0-pack-color) 50%,
    var(--team1-pack-color) 50%
  );
}

/* --- Pausable countdown screens --- */

.get-ready-screen,
.judge-prompt-screen {
  cursor: pointer;
}

/* Pause card (mini card style, reuses .skip-card) */
.pause-card {
  margin: clamp(12px, 2vh, 24px) auto 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.is-paused .pause-card {
  opacity: 0.6;
}

.pausable-paused-footnote {
  margin: clamp(4px, 0.8vh, 10px) auto 0;
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 500;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  font-style: italic;
}

.is-paused .pausable-paused-footnote {
  opacity: 0.4;
}

.is-paused .is-pulsing {
  animation: none;
}

/* --- Card back pulse on attempt screen --- */

.side-shape-face-back.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

/* Attempt screen: no footer, card + video fill full height */
#screen-attempt .play-shell {
  --result-footer-row-height: 0px;
}

.capture-confirm-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 20, 0.72);
  z-index: 6;
  pointer-events: none;
}

.capture-confirm-card {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.capture-confirm-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 6.3vw, 98px);
  line-height: 0.92;
  text-transform: uppercase;
  font-weight: 900;
}

.capture-confirm-thumb {
  width: clamp(130px, 24vw, 260px);
  height: auto;
  border-radius: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

#screen-shape-reveal .side-shape-back {
  display: block;
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 6px solid #ffffff;
  cursor: pointer;
}

.shape-reveal-pie {
  position: absolute;
  z-index: 2;
  bottom: clamp(10px, 3vh, 24px);
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--pack-color);
  background: conic-gradient(
    var(--pack-color) calc(var(--progress, 0) * 1%),
    transparent calc(var(--progress, 0) * 1%)
  );
}

.side-shape-back-pattern {
  position: absolute;
  inset: -36%;
  background-color: #ffffff;
  transform: rotate(-33deg);
}

.side-shape-back-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pack-color);
  -webkit-mask-image: var(--pack-card-back-logo, url("../assets/logo-no-sub.svg"));
  mask-image: var(--pack-card-back-logo, url("../assets/logo-no-sub.svg"));
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--pack-card-back-logo-size, 72px 28px);
  mask-size: var(--pack-card-back-logo-size, 72px 28px);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* So Random joker – card back: webp image with white Bods logo on top */
body.so-random-card-back .side-shape-face-back {
  background: #222;
}

body.so-random-card-back .side-shape-back-pattern {
  background: url("../assets/card-backs/so-random.webp") center / cover no-repeat;
  transform: none;
  inset: 0;
}

body.so-random-card-back .side-shape-back-pattern::before {
  background-color: rgba(255, 255, 255, 0.35);
  inset: -36%;
  transform: rotate(-33deg);
}

/* So Random joker – card backgrounds: webp on all cards */
body.so-random-card-back .side-shape {
  background: url("../assets/card-backs/so-random.webp") center / cover no-repeat;
}

body.so-random-card-back .side-shape-face-front {
  background: url("../assets/card-backs/so-random.webp") center / cover no-repeat;
}

/* Flip card wrapper stays black (faces have their own bg) */
body.so-random-card-back .side-shape-flip {
  background: #000000;
}

/* So Random joker: replace flat-colour screen backgrounds with webp pattern */
body.so-random-card-back .get-ready-screen,
body.so-random-card-back .tiebreaker-announce-screen,
body.so-random-card-back .round-summary-screen,
body.so-random-card-back .judge-prompt-screen {
  background: url("../assets/card-backs/so-random.webp") center / cover no-repeat;
}

body.white-card-pack #screen-shape-reveal .side-shape-back,
body.black-card-pack #screen-shape-reveal .side-shape-back {
  background: var(--pack-color);
}

body.white-card-pack .side-shape-back-pattern,
body.black-card-pack .side-shape-back-pattern {
  background-color: var(--pack-color);
  background-image: url("../assets/logo-no-sub.svg");
  background-repeat: repeat;
  background-size: var(--pack-card-back-logo-size, 72px 28px);
  background-position: 0 0;
}

body.white-card-pack .side-shape-back-pattern::before,
body.black-card-pack .side-shape-back-pattern::before {
  content: none;
}

#screen-shape-reveal .shape-ready-copy {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  padding: clamp(4px, 0.7vh, 8px) clamp(10px, 1.6vw, 18px) clamp(2px, 0.5vh, 8px);
  gap: clamp(2px, 0.5vh, 6px);
  pointer-events: none;
  z-index: 3;
  opacity: 0.94;
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

#screen-shape-reveal .shape-ready-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 3.2vw, 58px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.48);
}

#screen-shape-reveal .shape-ready-title.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

#screen-shape-reveal .shape-ready-silhouettes {
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(6px, 1.1vw, 14px);
  padding-bottom: 0;
}

#screen-shape-reveal .shape-ready-silhouette {
  display: grid;
  place-items: end center;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0.75;
  height: clamp(260px, 84%, 820px);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.42);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.42));
}

#screen-shape-reveal .shape-ready-silhouette.is-adult {
  height: clamp(300px, 96%, 900px);
}

#screen-shape-reveal .shape-ready-silhouette.is-big-kid {
  height: clamp(254px, 82%, 760px);
}

#screen-shape-reveal .shape-ready-silhouette.is-little-kid {
  height: clamp(198px, 64%, 620px);
}

#screen-shape-reveal .shape-ready-silhouette.is-no-one {
  height: clamp(56px, 14%, 110px) !important;
  opacity: 0.65;
}

#screen-shape-reveal .shape-ready-silhouette-svg {
  height: 100%;
  width: auto;
  max-width: min(62vw, 560px);
  fill: currentColor;
}

#screen-shape-reveal.shape-reveal-exiting .shape-ready-copy {
  opacity: 0;
  transform: translateY(-8px);
}

.side-shape-flip {
  display: block;
  position: relative;
  padding: 0;
  overflow: visible;
  background: #000000;
  border-color: transparent;
  perspective: 1200px;
}

.side-shape-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.side-shape-flip.is-flipped .side-shape-flip-inner {
  transform: rotateY(180deg);
}

.side-shape-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.side-shape-face-back {
  transform: rotateY(0deg);
  background: #ffffff;
  border: 6px solid #ffffff;
  border-radius: inherit;
}

body.white-card-pack .side-shape-face-back,
body.black-card-pack .side-shape-face-back {
  background: var(--pack-color);
}

.side-shape-face-front {
  transform: rotateY(180deg);
  background: var(--pack-card-bg);
  border: 6px solid #ffffff;
  border-radius: inherit;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px;
}

/* --- Card Reveal: fullscreen → split layout transition --- */

.attempt-layout {
  transition: grid-template-columns 900ms cubic-bezier(0.34, 1.56, 0.64, 1),
              gap 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State 1 & 2: card fills viewport, camera collapsed */
.attempt-layout.is-fullscreen-card {
  grid-template-columns: 1fr 0fr;
  gap: 0;
  justify-content: center;
}

.attempt-layout.is-fullscreen-card > .side-shape {
  width: 100%;
  max-width: calc(100vh * (10 / 6));
  aspect-ratio: 10 / 6;
  height: auto;
  max-height: 100%;
  justify-self: center;
  align-self: center;
  border-radius: 20px;
}

.attempt-layout.is-fullscreen-card > .camera-frame {
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Fullscreen card internals: logo bottom-right */

.attempt-layout.is-fullscreen-card .side-shape-logo {
  justify-self: end;
  width: 30%;
  max-width: 120px;
}

/* Animating state: card fills grid cell with no aspect-ratio constraint.
   The grid column transition drives the card width change; the card
   stretches to fill its cell so the SVG, title and logo reflow smoothly. */
.attempt-layout.is-animating-to-split > .side-shape {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  justify-self: stretch;
  align-self: stretch;
  border-radius: 16px;
}

.attempt-layout.is-animating-to-split > .camera-frame {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease 500ms;
}

.attempt-layout.is-animating-to-split.is-camera-visible > .camera-frame {
  opacity: 1;
}

/* Card internal elements: smooth transitions during layout change */
.attempt-layout .side-shape-title {
  transition: font-size 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.attempt-layout .side-shape-logo {
  transition: width 900ms cubic-bezier(0.34, 1.56, 0.64, 1),
              max-width 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State 3: split layout (card left, camera right) — after animation settles */
.attempt-layout.is-split-layout > .side-shape {
  max-width: none;
  border-radius: 16px;
}

.attempt-layout.is-split-layout > .camera-frame {
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
}

.attempt-layout.is-split-layout .side-shape-logo {
  justify-self: center;
  width: 49.5%;
  max-width: 49.5%;
}

/* Get-ready overlay (covers full card in State 1) */
.attempt-ready-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 250ms ease;
}

.attempt-ready-overlay.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.attempt-ready-overlay-content {
  display: grid;
  gap: clamp(4px, 1vh, 12px);
  justify-items: center;
}

.attempt-ready-overlay-content.is-pulsing {
  animation: bods-fade-pulse 900ms ease-in-out infinite;
}

.attempt-ready-overlay-team {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
  margin: 0;
  line-height: 1;
  text-align: center;
}

.attempt-ready-overlay-text {
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  margin: 0;
  line-height: 1.1;
  text-align: center;
}

/* Reduced motion: disable grid/card transitions */
@media (prefers-reduced-motion: reduce) {
  .attempt-layout,
  .attempt-layout > .side-shape,
  .attempt-layout > .camera-frame,
  .attempt-layout .side-shape-title,
  .attempt-layout .side-shape-logo {
    transition: none;
  }
}

.result-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-start;
}

.result-brief-debug {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-pose-debug {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(10px, 0.98vw, 13px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.15px;
  text-transform: none;
  max-width: min(56vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-footer-action {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--result-layout-gap);
}

.result-action-fill {
}

.result-screen .result-footer-action .share {
}

.result-action-delayed {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.result-action-delayed.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Share pill ─────────────────────────────────────────── */
.share-pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--pack-color);
  border-radius: 14px;
  padding: 8px clamp(14px, 2vw, 24px);
  font-size: clamp(22px, 2.9vw, 40px);
  line-height: 1;
  gap: clamp(6px, 1vw, 14px);
}

.share-pill-label {
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.share-pill-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 8px;
  transition: opacity 150ms ease;
}

.share-pill-btn:hover {
  opacity: 0.7;
}

.share-pill-btn:active {
  opacity: 0.5;
}

.share-pill-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Pill-level loading state — hides emoji buttons, pulses the whole pill */
.share-pill.is-loading {
  animation: share-pill-pulse 1.2s ease-in-out infinite alternate;
}
.share-pill.is-loading .share-pill-btn {
  display: none;
}
.share-pill.is-loading .share-pill-sep {
  display: none;
}
.share-pill.is-loading .share-pill-label {
  pointer-events: none;
}

@keyframes share-pill-pulse {
  from { opacity: 1; }
  to   { opacity: 0.75; }
}

.share-pill-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--pack-color);
  opacity: 0.3;
}

.result-screen #override {
  background: var(--pack-color);
  color: #ffffff;
  border: 2px solid var(--pack-color);
  border-radius: var(--nav-btn-radius);
  position: relative;
  overflow: visible;
}

.result-screen #override.is-hidden {
  display: none;
}

.bomb-fuse-canvas {
  display: inline-block;
  width: 160px;
  height: 40px;
  pointer-events: none;
  background: transparent;
  margin-left: 8px;
  flex-shrink: 0;
}

.result-screen #next {
  background: #ffffff;
  color: var(--pack-color);
  border: 2px solid #ffffff;
  border-radius: var(--nav-btn-radius);
  flex: 0 0 auto;
  margin-right: 12px;
  position: relative;
  overflow: visible;
}

.result-screen .result-debug-corner {
  font-size: 18px;
}

.shape-reveal-footer-action .btn,
.judge-prompt-actions .btn,
.result-footer-action .btn,
.play-stage-screen .play-footer .btn.quit-control {
  min-height: 0;
  border-radius: var(--nav-btn-radius);
  padding: var(--nav-btn-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nav-btn-font-size);
  line-height: 1;
}

.play-stage-screen .play-footer .btn.quit-control {
  background: transparent;
  color: color-mix(in oklab, var(--gameplay-alt-outline) 50%, transparent);
  border: none;
}

.play-stage-screen .play-footer .btn.quit-control:hover,
.play-stage-screen .play-footer .btn.quit-control:focus-visible {
  background: transparent;
  color: color-mix(in oklab, var(--gameplay-alt-outline) 70%, transparent);
  outline: none;
}

/* Corner home card (skip-card style) */
.home-card {
  background: var(--pack-accent);
}

.result-debug-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(7, 9, 20, 0.55);
}

.result-debug-modal[hidden] {
  display: none;
}

.result-debug-card {
  width: min(860px, 100%);
  max-height: min(82vh, 620px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  background: color-mix(in oklab, var(--pack-color) 60%, #000000);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
}

.result-debug-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.95;
  text-transform: uppercase;
  font-weight: 900;
}

.result-debug-content {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.result-debug-line {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(13px, 1.35vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.15px;
  word-break: break-word;
}

.result-debug-actions {
  display: flex;
  justify-content: flex-end;
}

.result-debug-close {
  background: #ffffff;
  color: var(--pack-color);
  border: 2px solid #ffffff;
  min-height: clamp(44px, 7vh, 62px);
  border-radius: 12px;
  padding: 0 18px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
}


.round-track-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.round-track-name {
  min-width: 96px;
  text-transform: uppercase;
  color: #d8ddf5;
  font-size: 14px;
  font-weight: 600;
}

.round-cells {
  display: flex;
  gap: 6px;
}

.round-cell {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #60668f;
  background: #23263b;
  display: inline-grid;
  place-items: center;
  color: #cfd5f4;
  font-size: 17px;
  line-height: 1;
}

.round-cell.win {
  background: #f0d57a;
  color: #181203;
  border-color: #ffefb5;
}

.round-cell.loss {
  color: #ff8a8c;
}

.round-cell.draw {
  color: #dce3ff;
}

.round-cell.tiebreaker-cell {
  margin-left: 6px;
  border-color: #ffd84d;
  background: var(--tiebreaker-cell-bg, #ffffff);
  color: var(--tiebreaker-cell-fg, #181203);
}

.round-cell.tiebreaker-cell.win {
  background: var(--tiebreaker-cell-bg, #ffffff);
  color: var(--tiebreaker-cell-fg, #181203);
}

.round-cell.tiebreaker-cell.loss {
  background: var(--tiebreaker-cell-bg, #ffffff);
  color: var(--tiebreaker-cell-fg, #181203);
}

.round-cell.tiebreaker-cell.draw {
  background: var(--tiebreaker-cell-bg, #ffffff);
  color: var(--tiebreaker-cell-fg, #181203);
}

.round-cell.tiebreaker-cell.empty {
  border-color: rgba(255, 216, 77, 0.45);
  background: var(--tiebreaker-cell-bg, #ffffff);
  opacity: 0.5;
}

.round-summary-screen {
  position: absolute;
  inset: 0;
  padding: 22px;
  padding-top: clamp(74px, 10.8vh, 108px);
  background: var(--pack-color);
  --gameplay-alt-outline: #ffffff;
}

.vs-split-bg .round-summary-screen,
.vs-split-bg .round-announce-screen,
.vs-split-bg .judge-prompt-screen {
  background: linear-gradient(
    135deg,
    var(--team0-pack-color) 50%,
    var(--team1-pack-color) 50%
  );
}

.vs-split-bg #screen-shape-reveal,
.vs-split-bg #screen-attempt,
.vs-split-bg #screen-deliberation,
.vs-split-bg #screen-result {
  background: #000000;
}

.round-summary-title {
  margin: 0;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-weight: 800;
}

.round-summary-subtitle {
  margin: -4px 0 0;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
}

.round-summary-pack {
  margin: clamp(6px, 1.2vh, 12px) 0 0;
  color: #fff;
  font-size: clamp(13px, 1.35vw, 20px);
  line-height: 1;
  letter-spacing: 0.2px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.round-summary-coop-screen {
  grid-template-rows: auto auto 1fr auto;
}

.round-summary-coop-screen .round-summary-grid {
  align-content: center;
}

.round-summary-coop-screen .round-track-name {
  font-size: clamp(26px, 3vw, 44px);
}

.round-summary-screen .round-cell.coop-score {
  color: #ffffff;
  place-items: center;
  padding-right: 0;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1;
}

.coop-score-key {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.round-summary-grid {
  display: grid;
  align-content: start;
  gap: 10px;
  width: min(100%, 980px);
  margin: 0 auto;
  justify-items: stretch;
}

.round-summary-screen .round-track-name {
  color: #fff;
  min-width: 0;
  font-size: 24px;
  text-align: right;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.1;
}

.round-summary-screen .round-track-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.round-summary-screen .round-cells {
  justify-content: flex-end;
}

.round-summary-screen .round-cell {
  width: 48px;
  height: 48px;
  border-color: #2f344f;
  background: #000000;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  place-items: center;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
}

.round-summary-screen .round-cell.win {
  color: #21d66b;
}

.round-summary-screen .round-cell.loss {
  color: #ff3a3d;
}

.round-summary-screen .round-cell.draw {
  color: #ffd84d;
}

.round-summary-screen .round-cell.empty {
  color: transparent;
}

.round-summary-round-screen .round-summary-grid {
  width: fit-content;
  max-width: 100%;
  justify-items: end;
}

.round-summary-round-screen {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100%;
}

.round-summary-round-screen.round-summary-score-priority {
  grid-template-rows: auto auto 1fr auto;
}

.round-summary-round-screen.round-summary-coop-screen {
  grid-template-rows: auto auto 1fr auto;
}

.round-summary-round-screen .round-track-row {
  width: fit-content;
  grid-template-columns: max-content auto;
  justify-content: end;
}

.round-summary-round-screen .round-cell.win {
  color: #ffffff;
}

.round-summary-round-screen .round-cell.loss {
  color: #ffffff;
}

.round-summary-round-screen .round-cell.draw {
  color: #ffffff;
}

.round-summary-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(16px, 3vh, 36px);
}

.screen-quit-corner {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 10;
}

/* ── Age card (bottom-right of video frame) ── */
.screen-age-corner {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  transform: rotate(3deg);
  background: #d0d0d0;
}
.screen-age-corner:hover {
  transform: scale(1.1) rotate(3deg);
}
.screen-age-corner:active {
  transform: scale(0.95) rotate(3deg);
}
.age-card-icon {
  filter: none !important;
  width: 90%;
}

/* ── Age toast — big embarrassing takeover on video frame ── */
.age-toast {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 6%;
  background: #1a1a2e;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 2.8vw, 32px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.age-toast--visible {
  opacity: 1;
  transform: scale(1);
}

.round-summary-actions .btn {
  background: #ffffff;
  color: #ff3a3d;
  font-size: var(--nav-btn-font-size);
  padding: var(--nav-btn-padding);
  border-radius: var(--nav-btn-radius);
  line-height: 1;
}

.round-summary-round-screen .round-summary-actions .btn {
  color: var(--pack-color);
  font-size: var(--nav-btn-font-size);
  line-height: 1;
  padding: var(--nav-btn-padding);
}

.round-summary-corner-logo {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 104px;
  max-width: 14%;
  opacity: 0.98;
}

.round-summary-subtitle.score-only {
  margin-top: 0;
  font-size: clamp(58px, 8.2vw, 132px);
  line-height: 0.88;
}


/* ── Rate This Pack overlay ─────────────────────────────── */
.rate-pack-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0);
  transition: background 0.35s ease-out;
  padding: 20px;
}
.rate-pack-overlay--visible {
  background: rgba(8, 10, 20, 0.94);
}

.rate-pack-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 32px);
}

.rate-pack-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 56px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
}
.rate-pack-overlay--visible .rate-pack-title {
  opacity: 1;
  transform: translateY(0);
}

.rate-pack-cards {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  justify-content: center;
  align-items: stretch;
}

.rate-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #7c3aed;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: clamp(12px, 2vh, 24px) clamp(10px, 1.5vw, 20px);
  width: clamp(120px, 17vw, 220px);
  min-height: clamp(200px, 38vh, 380px);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--card-delay, 0s),
              opacity 0.3s ease-out var(--card-delay, 0s),
              border-color 0.2s ease, box-shadow 0.2s ease;
}
.rate-pack-overlay--visible .rate-pack-card {
  opacity: 1;
  transform: scale(1);
}

.rate-pack-card:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.5);
}
.rate-pack-card:active {
  transform: scale(0.96);
}
.rate-pack-card--selected {
  border-color: #fff;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.rate-pack-card--gold {
  background: linear-gradient(
    135deg,
    #b8860b 0%,
    #daa520 20%,
    #ffd700 40%,
    #fff1a8 50%,
    #ffd700 60%,
    #daa520 80%,
    #b8860b 100%
  );
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  border-color: rgba(255, 215, 0, 0.5);
}
.rate-pack-card--gold:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}

.rate-pack-card--bronze {
  background: linear-gradient(
    135deg,
    #6d3a1a 0%,
    #8c5a2e 20%,
    #cd7f32 40%,
    #e8c07a 50%,
    #cd7f32 60%,
    #8c5a2e 80%,
    #6d3a1a 100%
  );
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  border-color: rgba(205, 127, 50, 0.5);
}
.rate-pack-card--bronze:hover {
  border-color: rgba(205, 127, 50, 0.8);
  box-shadow: 0 0 24px rgba(205, 127, 50, 0.5);
}

.rate-pack-card--silver {
  background: linear-gradient(
    135deg,
    #5a5a6a 0%,
    #8a8a9a 20%,
    #c0c0c0 40%,
    #e8e8f0 50%,
    #c0c0c0 60%,
    #8a8a9a 80%,
    #5a5a6a 100%
  );
  background-size: 200% 200%;
  animation: gold-shimmer 3s ease-in-out infinite;
  border-color: rgba(192, 192, 192, 0.5);
}
.rate-pack-card--silver:hover {
  border-color: rgba(192, 192, 192, 0.8);
  box-shadow: 0 0 24px rgba(192, 192, 192, 0.5);
}

@keyframes gold-shimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.rate-pack-card-title {
  font-weight: 800;
  font-size: clamp(14px, 2vw, 24px);
  line-height: 1.15;
  text-transform: uppercase;
  min-height: clamp(34px, 5vh, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-pack-card-art {
  width: clamp(60px, 12vw, 150px);
  height: clamp(60px, 12vw, 150px);
  object-fit: contain;
  margin: clamp(6px, 1vh, 14px) 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.rate-pack-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
}

.rate-pack-brand {
  width: clamp(75px, 12vw, 150px);
}
.rate-pack-brand-logo {
  width: 100%;
  height: auto;
}

/* Responsive: stack cards vertically on very narrow viewports */
@media (max-width: 520px) {
  .rate-pack-cards {
    flex-direction: column;
    align-items: center;
  }
  .rate-pack-card {
    width: min(280px, 80vw);
    flex-direction: row;
    gap: 12px;
    padding: 10px 16px;
  }
  .rate-pack-card-art {
    width: 50px;
    height: 50px;
    margin: 0;
  }
  .rate-pack-card-title {
    min-height: 0;
  }
}

.quit-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.42);
  padding: 14px;
}

.quit-confirm[hidden] {
  display: none;
}

.quit-confirm-card {
  width: min(320px, 100%);
  border: 1px solid #2e3456;
  border-radius: 12px;
  background: rgba(15, 18, 34, 0.96);
  display: grid;
  gap: 8px;
  text-align: center;
  padding: 14px 14px 12px;
}

.quit-confirm-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 800;
}

.quit-confirm-card p {
  margin: 0;
  color: #cfd5f4;
  font-size: clamp(14px, 1.8vw, 20px);
  line-height: 1.2;
}

.quit-confirm-actions {
  margin-top: 2px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.quit-confirm-actions .btn {
  min-width: 78px;
  font-size: clamp(16px, 2.2vw, 22px);
  padding: 7px 13px;
}

.quit-confirm-actions .quit-no {
  background: #ffffff;
  color: #111522;
  border: 1px solid #ffffff;
}

.quit-confirm-actions .quit-yes {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.pack-unlock-card {
  width: min(420px, 100%);
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  gap: 10px;
}

.pack-purchase-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Two-card preview row ── */
.ps-buy-card-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0;
}

.ps-buy-card-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

/* ── Description ── */
.pack-purchase-desc {
  margin: 0;
  text-align: center;
  color: #cfd5f4;
  font-size: clamp(13px, 1.6vw, 17px);
  line-height: 1.3;
  text-transform: none;
}

/* ── Card name list ── */
.ps-buy-name-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps-buy-name-item {
  font-size: clamp(12px, 1.4vw, 15px);
  color: #cfd5f4;
  text-transform: none;
  line-height: 1.25;
}

.ps-buy-name-text {
  font-weight: 600;
}

.ps-buy-name-footnote {
  display: block;
  font-style: italic;
  color: #8a90b8;
  font-size: 0.88em;
  font-weight: 400;
}

.ps-buy-name-more {
  color: #8a90b8;
  font-style: italic;
}

/* ── Badges (joker + music) ── */
.ps-buy-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-buy-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: clamp(11px, 1.3vw, 14px);
  color: #cfd5f4;
  text-transform: none;
  text-align: left;
  line-height: 1.25;
}

.ps-buy-badge-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.ps-buy-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ps-buy-badge-text strong {
  font-weight: 700;
  color: #ffffff;
}

.ps-buy-badge-text span {
  font-size: 0.9em;
  color: #8a90b8;
}

/* ── Meta line ── */
.pack-purchase-meta {
  margin: 0;
  text-align: center;
  color: #8a90b8;
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ── Buy button coin icon ── */
.ps-buy-btn-coin {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

.pack-purchase-copy {
  margin: 0;
  min-height: 0;
  text-align: center;
  color: #cfd5f4;
  font-size: clamp(13px, 1.6vw, 18px);
  line-height: 1.2;
  text-transform: none;
}

.pack-unlock-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #40486f;
  background: #0d1020;
  color: #ffffff;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  text-align: center;
  text-transform: lowercase;
  padding: 8px 10px;
}

.pack-unlock-input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
}

.pack-unlock-error {
  margin: 0;
  min-height: 18px;
  color: #ff8a8c;
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.15;
}

.pack-unlock-confirm .quit-confirm-actions {
  justify-content: center;
  gap: 10px;
}

.pack-unlock-confirm .quit-confirm-actions .btn {
  min-width: 94px;
}

.pack-unlock-cancel {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1;
  min-width: auto;
  padding: 8px 14px;
}

.pack-unlock-submit {
  background: #ffffff;
  color: #111522;
  border: 1px solid #ffffff;
}

/* ── How to Play overlay ── */

.htp-overlay {
  z-index: 1200;
  padding: clamp(10px, 2vh, 24px) clamp(10px, 2vw, 24px);
}

.htp-content {
  position: relative;
  width: min(960px, 90vw);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid #2e3456;
  border-radius: 16px;
  background: rgba(10, 12, 24, 0.97);
  padding: clamp(14px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 14px);
}

.htp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.htp-title {
  margin: 0;
  font-size: clamp(18px, 2.5vw, 34px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.htp-close {
  position: absolute;
  top: clamp(8px, 1vw, 16px);
  right: clamp(8px, 1vw, 16px);
  z-index: 1;
  width: clamp(30px, 3vw, 44px);
  height: clamp(30px, 3vw, 44px);
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.htp-close:hover,
.htp-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.htp-body {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vw, 10px);
  min-height: 0;
}

.htp-illustration {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  border: none;
  pointer-events: none;
}

.htp-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

.htp-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1vw, 14px);
  padding: 0 clamp(2px, 0.5vw, 8px);
  flex-shrink: 0;
}

.htp-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(10px, 1vw, 14px);
  line-height: 1.3;
  text-align: center;
}

/* ── How to Play dedicated screen ── */

.htp-screen {
  position: absolute;
  inset: 0;
  background: var(--pack-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.3vh, 24px);
  padding-top: clamp(74px, 10.8vh, 108px);
  gap: clamp(10px, 1.6vh, 18px);
}

.htp-screen-logo {
  width: clamp(80px, 10vw, 140px);
  height: auto;
}

.htp-screen-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.htp-screen-body {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 14px);
  width: min(880px, 88vw);
  min-height: 0;
}

.htp-screen-body .htp-illustration {
  width: 100%;
  flex-shrink: 1;
  min-height: 0;
}

.htp-screen-body .htp-captions {
  flex-shrink: 0;
}

.htp-screen-body .htp-caption {
  font-size: clamp(11px, 1.15vw, 15px);
}

.htp-screen-cta {
  margin-top: clamp(4px, 1vh, 12px);
  font-size: clamp(16px, 2vw, 24px);
  padding: clamp(10px, 1.4vh, 16px) clamp(32px, 4vw, 56px);
  flex-shrink: 0;
  flex-grow: 0;
}

.home-settings-card {
  width: min(320px, 100%);
  text-align: center;
}

.home-settings-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.home-settings-actions {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.home-settings-actions .btn {
  width: 100%;
}

.home-settings-roasts {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.86);
}

.home-settings-reset {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.86);
}

.home-settings-close {
  background: #ffffff;
  color: #111522;
}

.actions-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.notice {
  color: var(--muted);
  font-size: 14px;
  font-weight: 300;
}

.rotate-overlay {
  display: none;
}

@media (orientation: portrait) and (max-width: 980px) {
  /* Hide app + show rotate gate only during gameplay (not on home screen) */
  body:not(.on-home-screen) .app-frame {
    display: none;
  }

  body:not(.on-home-screen) .rotate-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: fixed;
    inset: 0;
    background: var(--bg);
    color: var(--white);
    font-size: 30px;
    text-align: center;
    padding: 20px;
  }

  .rotate-brand-logo {
    width: min(220px, 50%);
    filter: drop-shadow(var(--shadow-drop));
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow: hidden;
    background: #000;
  }

  .app-frame {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border: none;
  }

  .btn {
    font-size: 26px;
  }

  .team-setup-block {
    width: 100%;
    border-radius: 14px;
    padding: clamp(6px, 1.2vh, 12px);
  }

  .team-name-input {
    min-height: 36px;
    font-size: clamp(15px, 2vw, 24px);
    padding: 5px 10px;
  }

  .team-setup-vs-copy {
    font-size: clamp(12px, 3.9vw, 21px);
  }

  .age-pill-toggle {
    width: min(270px, 75%);
    padding: 3px;
  }

  .age-pill-option {
    height: clamp(40px, 6vh, 56px);
  }

  .delib-footer-line {
    font-size: clamp(13.5px, 3.075vw, 25.5px);
  }

  .result-screen,
  .play-shell {
    --result-layout-gap: 8px;
    --result-footer-row-height: clamp(56px, 9vh, 78px);
  }

  .camera-quit {
    min-width: 40px;
    min-height: 40px;
  }

  .result-screen .result-caption-overlay {
    padding: 0 clamp(56px, 9vw, 90px) 10px 10px;
  }

  .result-screen .result-debug-corner {
    font-size: 16px;
  }

  /* Versus screen: shorter cards so team names stay visible above actions */
  .pack-select-card-inner {
    aspect-ratio: 3 / 4;
    padding: clamp(6px, 1vh, 12px);
    border-width: 8px;
  }

  .pack-shuffle-btn {
    padding: 3px 8px;
    width: 92px;
  }

  .pack-shuffle-letter {
    font-size: clamp(9px, 1.1vw, 12px);
    width: 10px;
  }

  .pack-shuffle-slot {
    min-height: 24px;
  }

  .pack-select-card {
    max-width: clamp(110px, 18vw, 200px);
    min-width: 90px;
    aspect-ratio: 3 / 4;
  }

  .pack-select-card-label {
    font-size: clamp(11px, 1.6vw, 17px);
  }

  .pack-select-team-name {
    font-size: clamp(13px, 1.8vw, 20px);
  }

  .pack-select-vs-copy {
    font-size: clamp(32px, 7vw, 64px);
  }

  .pack-select-logo {
    width: clamp(40px, 8vw, 80px);
  }

  .btn.pack-select-shuffle {
    width: clamp(32px, 4vw, 44px);
    height: clamp(32px, 4vw, 44px);
  }

  .pack-select-shuffle-icon {
    width: clamp(16px, 2vw, 24px);
    height: clamp(16px, 2vw, 24px);
  }

  /* How to play screen: make illustration fill available space */
  .htp-screen {
    padding: clamp(10px, 1.5vh, 18px);
    padding-top: clamp(10px, 1.5vh, 18px);
    gap: clamp(6px, 1vh, 12px);
  }

  .htp-screen-title {
    font-size: clamp(18px, 2.5vw, 30px);
  }

  .htp-screen-body {
    width: min(880px, 96vw);
    flex: 1;
    min-height: 0;
  }

  .htp-screen-body .htp-illustration {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
  }

  .htp-screen-body .htp-caption {
    font-size: clamp(9px, 1.1vw, 13px);
  }

  .htp-screen-cta {
    font-size: clamp(14px, 1.8vw, 20px);
    padding: clamp(8px, 1.2vh, 14px) clamp(24px, 3vw, 40px);
  }

  /* Judge-prompt mobile: pause card right, footnote higher */
  .judge-prompt-content .judge-prompt-footnote-wrap {
    order: 1;
    margin-top: 0;
  }

  .judge-prompt-content .pause-card {
    order: 2;
    align-self: flex-end;
    margin: 0 clamp(12px, 3vw, 28px) 0 0;
  }

  .judge-prompt-content .pausable-paused-footnote {
    order: 3;
    align-self: flex-end;
    margin-right: clamp(12px, 3vw, 28px);
  }
}

@media (max-height: 520px) {
  html,
  body {
    background: #000;
    overflow: hidden;
  }

  .app-frame {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    height: 100dvh;
    margin: 0;
    border: none;
  }

  .screen {
    padding: 10px;
  }

  #screen-home {
    padding: 1px 7px 10px;
  }

  .topline {
    font-size: 14px;
  }

  .home-brand-group {
    display: flex;
  }

  .home-logo {
    width: 100px;
    max-width: 22vw;
  }

  .home-logo[data-variant="rudebits"] {
    width: 140px;
    max-width: 30vw;
  }

  .home-title-block {
    flex: 1;
    min-width: 0;
  }

  .home-subtitle {
    font-size: 11px !important;
  }

  .home-header {
    gap: 8px;
    min-height: 48px;
    padding-block: 6px;
    margin-bottom: 0;
    align-items: center;
  }

  .home-settings-btn {
    width: 26px;
    height: 26px;
    font-size: 14px;
    border-radius: 7px;
  }

  .screen-brand-logo {
    width: 82px;
    max-width: 16.5vw;
  }

  .pack-strip {
    margin-top: 4px;
    gap: 6px;
    height: calc(100% - 82px);
  }

  .pack-grid {
    gap: 6px;
    padding: 6px 2px 6px;
  }

  .home-coming-soon {
    margin-top: 6px;
    font-size: 10px;
  }

  .home-subtitle {
    font-size: 11px;
  }

  .video-chip {
    font-size: 9px;
    width: 140px;
    padding: 4px 0;
  }

  .mode-select-title {
    font-size: clamp(24px, 5vw, 38px);
  }

  .mode-card {
    width: clamp(160px, 26vw, 280px);
    border-width: 8px;
    padding: 8px;
  }

  .mode-card-label {
    font-size: clamp(22px, 3.8vw, 36px);
  }

  .mode-timer-group {
    gap: 6px;
  }

  .mode-timer-label {
    font-size: clamp(12px, 1.8vw, 16px);
  }

  .timer-pill-toggle {
    width: min(410px, 100%);
    gap: 0;
    padding: 4px;
  }

  .timer-pill-option {
    padding: 6px 8px;
  }

  .timer-pill-seconds {
    font-size: clamp(14px, 2.2vw, 20px);
  }

  .timer-pill-sub {
    font-size: clamp(8px, 1.2vw, 10px);
  }

  .video-skip-wrap {
    flex: 0 0 calc((100% - 32px) * 0.2222222222);
    min-height: 0;
  }

  .video-card {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .pack-card {
    flex: 0 0 calc((100% - 32px) * 0.2222222222);
    min-height: 0;
    height: 100%;
    padding: 8px;
    grid-template-rows: auto auto auto;
  }

  .pack-name {
    font-size: clamp(12px, 1.45vw, 20px);
  }

  .coming-soon-title {
    font-size: clamp(12px, 1.45vw, 20px);
  }

  .pack-meta {
    font-size: 10px;
  }

  .pack-card-subline {
    font-size: clamp(7px, 0.8vw, 9px);
  }

  .pack-card-age {
    font-size: clamp(9px, 1vw, 11px);
  }

  .pack-card-head {
    position: relative;
  }

  .pack-card-features {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .pack-card-foot {
    font-size: 10px;
    margin-top: 4px;
  }

  .pack-card-logo {
    width: clamp(72px, 10vw, 108px);
  }

  .pack-price-sticker {
    width: clamp(44px, 7.5vw, 63px);
  }

  .pack-price-sticker.is-lock {
    width: clamp(20px, 3.3vw, 28px);
  }

  .pack-price-sticker-text {
    font-size: clamp(11px, 1.9vw, 17px);
  }

  .krab-key-icon {
    width: clamp(18px, 4vw, 28px);
  }

  .pack-card-krab-lock {
    width: clamp(36px, 7.5vw, 54px);
  }

  .pack-lock-copy {
    font-size: clamp(9px, 1.05vw, 11px);
  }

  .pack-sticker-overlay {
  }

  .pack-preview-wrap {
    padding: 6px;
  }

  .pack-preview {
  }

  .coming-soon-list {
    gap: 2px;
    overflow: hidden;
  }

  .coming-soon-list p {
    font-size: clamp(9px, 1.1vw, 13px);
    line-height: 1.1;
  }

  .bodsday-footnote {
    font-size: clamp(7px, 0.75vw, 9px);
  }

  .bodsday-subline {
    font-size: clamp(7px, 0.75vw, 9px);
  }

  .bodsday-cta {
    font-size: clamp(14px, 1.5vw, 18px);
  }

  .shape-stage {
    height: calc(100% - 96px);
  }

  .shape-card {
    width: min(280px, 78%);
    padding: 10px;
    gap: 6px;
  }

  #screen-shape-reveal .shape-preview-stack {
    width: min(250px, 52vw, 47vmin);
    gap: 4px;
  }

  .shape-title {
    font-size: 32px;
  }

  .shape-art-wrap {
    min-height: 0;
  }

  .shape-card img {
    max-height: 38vmin;
  }

  .shape-card-logo {
    width: 33%;
    max-width: 33%;
  }

  .shape-actions {
    margin-top: 10px;
  }

  #screen-shape-reveal.active {
    display: block;
  }

  #screen-shape-reveal .shape-stage {
    height: auto;
    min-height: 0;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  #screen-shape-reveal .shape-actions {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .side-shape-pack-title {
    font-size: clamp(12px, 1.3vw, 16px);
  }

  .side-shape-logo {
    width: 49.5%;
    max-width: 49.5%;
  }

  .side-shape-art img {
    width: 95%;
  }

  .camera-meta {
    font-size: 14px;
    top: 6px;
  }

  #screen-shape-reveal .shape-ready-copy {
    padding: 2px 8px 4px;
    gap: 2px;
  }

  #screen-shape-reveal .shape-ready-title {
    font-size: clamp(18px, 3vw, 34px);
  }

  #screen-shape-reveal .shape-ready-silhouettes {
    align-items: end;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  #screen-shape-reveal .shape-ready-silhouette {
    height: clamp(90px, 55dvh, 280px);
  }

  #screen-shape-reveal .shape-ready-silhouette.is-adult {
    height: clamp(100px, 62dvh, 320px);
  }

  #screen-shape-reveal .shape-ready-silhouette.is-big-kid {
    height: clamp(90px, 53dvh, 270px);
  }

  #screen-shape-reveal .shape-ready-silhouette.is-little-kid {
    height: clamp(70px, 40dvh, 200px);
  }

  #screen-shape-reveal .shape-ready-silhouette-svg {
    max-width: min(38vw, 240px);
  }

  .countdown {
    font-size: min(120px, 26vw);
  }

  .btn {
    font-size: 20px;
    padding: 8px 14px;
  }

  .play-stage-screen {
    gap: 8px;
  }


  .result-screen,
  .play-shell {
    --result-layout-gap: 6px;
    --result-footer-row-height: clamp(44px, 7vh, 62px);
  }

  .camera-quit {
    min-width: 36px;
    min-height: 36px;
    font-size: 15px;
  }

  .screen-quit-corner {
    right: 8px;
    top: 8px;
  }

  .result-screen .result-caption-overlay {
    padding: 0 clamp(44px, 10vw, 66px) 8px 8px;
  }

  .result-score-corner {
    font-size: clamp(60px, 16.5vw, 135px);
  }

  .result-quote {
    max-width: 100%;
    font-size: clamp(14px, 2.3vw, 22px);
    line-height: 1.08;
    color: #fff;
  }

  .result-screen .result-quit,
  .result-screen .result-debug-corner {
    min-width: 36px;
    min-height: 36px;
  }

  .result-screen .result-debug-corner {
    font-size: 15px;
  }

  .round-summary-screen {
    padding: 12px;
    padding-top: 52px;
    gap: 8px;
  }

  .round-summary-title {
    font-size: clamp(42px, 8vw, 84px);
  }

  .round-summary-subtitle {
    margin-top: -2px;
    font-size: clamp(24px, 4.4vw, 46px);
  }

  .round-summary-subtitle.score-only {
    margin-top: 0;
    font-size: clamp(44px, 7.2vw, 92px);
  }

  .round-summary-pack {
    margin-top: 4px;
    font-size: clamp(8px, 1.4vw, 16px);
  }

  .round-summary-coop-screen .round-track-name {
    font-size: clamp(18px, 2.7vw, 30px);
  }

  .round-summary-screen .round-cell.coop-score {
    font-size: clamp(18px, 2.8vw, 28px);
  }

  .coop-score-key {
    font-size: clamp(12px, 1.9vw, 19px);
  }

  .round-summary-corner-logo {
    width: 76px;
    right: 10px;
    bottom: 10px;
  }

  .round-summary-screen .round-track-name {
    min-width: 0;
    font-size: 18px;
    text-align: right;
  }

  .round-summary-screen .round-track-row {
    grid-template-columns: minmax(140px, 1fr) auto;
    column-gap: 8px;
  }

  .round-summary-round-screen .round-summary-grid {
    width: fit-content;
    max-width: 100%;
  }

  .round-summary-round-screen .round-track-row {
    width: fit-content;
    grid-template-columns: max-content auto;
    justify-content: end;
  }

  .round-summary-screen .round-cell {
    width: 34px;
    height: 34px;
    font-size: 20px;
    padding-right: 5px;
  }

  .play-stage-screen .play-footer .btn.quit-control {
    min-height: 0;
    padding: 8px 10px;
    font-size: clamp(16px, 2.25vw, 26px);
  }

  .screen-quit-corner {
    right: 10px;
    top: 10px;
  }

  .delib-brief-debug,
  .result-brief-debug,
  .result-pose-debug {
    font-size: 9px;
    max-width: 180px;
  }

  .quit-confirm-card {
    width: min(290px, 100%);
    padding: 12px;
  }

  .quit-confirm-actions .btn {
    min-width: 70px;
    font-size: 15px;
    padding: 6px 10px;
  }

  .pack-unlock-input {
    font-size: clamp(16px, 2.8vw, 22px);
    padding: 7px 8px;
  }

  .pack-unlock-error {
    min-height: 14px;
    font-size: clamp(11px, 1.35vw, 13px);
  }

  .stripe-checkout-card {
    width: min(440px, 96%);
    max-height: 90vh;
    padding: 10px 10px 14px;
  }

  .stripe-checkout-close {
    font-size: 28px;
    width: 34px;
    height: 34px;
  }

  .ps-buy-card-img {
    width: 72px;
    height: 72px;
  }
  .ps-buy-badge {
    padding: 4px 8px;
  }
  .ps-buy-badge-icon {
    width: 18px;
    height: 18px;
  }

  /* ── Pack-select: iPhone landscape ── */

  .pack-select-screen {
    gap: 6px;
  }

  .pack-select-main {
    min-height: 0;
  }

  .pack-select-column {
    gap: clamp(4px, 0.8vh, 8px);
  }

  .pack-select-card {
    max-width: clamp(90px, 15vw, 160px);
    min-width: 80px;
    aspect-ratio: 3 / 4;
  }

  .pack-select-card-inner {
    aspect-ratio: 3 / 4;
    padding: clamp(4px, 0.8vh, 8px);
    border-width: 6px;
  }

  .pack-select-card-label {
    font-size: clamp(9px, 1.4vw, 14px);
  }

  .pack-select-team-name {
    font-size: clamp(11px, 1.6vw, 18px);
  }

  .pack-select-vs-block {
    gap: clamp(4px, 0.6vh, 8px);
  }

  .pack-select-vs-copy {
    font-size: clamp(28px, 6vw, 48px);
  }

  .pack-select-logo {
    width: clamp(36px, 7vw, 64px);
  }

  .btn.pack-select-shuffle {
    width: clamp(28px, 3.5vw, 36px);
    height: clamp(28px, 3.5vw, 36px);
  }

  .pack-select-shuffle-icon {
    width: clamp(14px, 1.8vw, 20px);
    height: clamp(14px, 1.8vw, 20px);
  }

  .pack-shuffle-slot {
    min-height: 20px;
  }

  .pack-shuffle-btn {
    padding: 2px 6px;
    width: 80px;
  }

  .pack-shuffle-letter {
    font-size: clamp(8px, 1vw, 11px);
    width: 9px;
  }

  .joker-fan {
    margin-top: clamp(2px, 0.5vh, 6px);
    margin-bottom: clamp(2px, 0.5vh, 6px);
    min-height: clamp(24px, 4vw, 36px);
  }

  .joker-fan-card {
    width: clamp(20px, 3vw, 32px);
  }

  .pack-filter-toggle {
    width: clamp(120px, 14vw, 170px);
  }

  .pack-filter-opt {
    padding: 4px 3px;
    font-size: clamp(8px, 1.1vw, 12px);
  }

  .pack-select-price-sticker {
    width: clamp(64px, 9vw, 100px);
  }

  .pack-select-price-text {
    font-size: clamp(16px, 2.5vw, 26px);
  }

  .pack-select-lock-overlay {
    width: clamp(48px, 7vw, 80px);
  }

  .result-footer-action .btn {
    font-size: var(--text-md);
    padding: 8px 12px;
  }
  .bomb-fuse-canvas {
    width: 120px;
    height: 32px;
  }
}

/* ── Stripe Checkout Overlay ── */

.stripe-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.85);
  padding: 14px;
}

.stripe-checkout-overlay[hidden] {
  display: none;
}

.stripe-checkout-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  border: 1px solid #2e3456;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px 20px;
}

.stripe-checkout-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.stripe-checkout-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

#stripe-checkout-mount {
  min-height: 200px;
}

.stripe-checkout-loading {
  text-align: center;
  color: #666;
  font-size: 15px;
  padding: 40px 0;
}

.stripe-checkout-error {
  text-align: center;
  color: #d32f2f;
  font-size: 14px;
  padding: 20px 0;
}

/* ── Auth Overlay ── */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.92);
  padding: 20px;
}

.auth-overlay[hidden] {
  display: none;
}

.auth-card {
  position: relative;
  width: min(430px, 100%);
  background: #181530;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  display: grid;
  gap: 12px;
}

.auth-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #aaa;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.auth-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.auth-heading {
  margin: 0;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.2;
  text-align: center;
  padding: 0 20px;
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.auth-google-btn:hover {
  background: #e8e8e8;
}

.auth-google-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-google-btn:disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.auth-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid #ccc;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: auth-spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}


.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #100d22;
  color: #ffffff;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.auth-input::placeholder {
  color: #555;
}

.auth-submit-btn {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1a1a2e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.auth-submit-btn:hover {
  background: #252542;
}

.auth-forgot {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  text-align: right;
  display: block;
  margin-top: -4px;
}

.auth-forgot:hover {
  color: #fff;
  text-decoration: underline;
}

.auth-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  padding: 4px;
}

.auth-toggle:hover {
  color: #fff;
  text-decoration: underline;
}

.auth-error {
  min-height: 18px;
  margin: 0;
  color: #ff8a8c;
  font-size: 13px;
  text-align: center;
}

.auth-loading {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0;
}

@media (max-width: 700px) {
  .auth-overlay {
    align-items: start;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  }
  .auth-card {
    padding: 20px 16px;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  .auth-overlay {
    padding: 8px;
    align-items: center;
  }
  .auth-card {
    width: min(720px, 95vw);
    padding: 16px 20px;
    gap: 8px;
  }
  .auth-close {
    top: 6px;
    right: 6px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-size: 22px;
    padding: 4px 6px;
  }
  #auth-content:has(.auth-google-btn) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    align-content: start;
  }
  /* heading */
  #auth-content:has(.auth-google-btn) > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 18px;
    text-align: left;
    padding: 0;
  }
  /* google button */
  #auth-content:has(.auth-google-btn) > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    font-size: 15px;
    padding: 10px 12px;
  }
  /* "or" divider — hide */
  #auth-content:has(.auth-google-btn) > :nth-child(3) {
    display: none;
  }
  /* email form — full right column */
  #auth-content:has(.auth-google-btn) > :nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
  #auth-content:has(.auth-google-btn) > :nth-child(4) .auth-input,
  #auth-content:has(.auth-google-btn) > :nth-child(4) .auth-submit-btn {
    padding: 8px 10px;
    font-size: 15px;
  }
  /* error — full width */
  #auth-content:has(.auth-google-btn) > :nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 0;
    font-size: 12px;
  }
  /* toggle — bottom of left column */
  #auth-content:has(.auth-google-btn) > :nth-child(6) {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    font-size: 12px;
    align-self: end;
  }
}

/* ── CrowdDecide Modal ── */

.crowd-decide-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.92);
  padding: 14px;
}

.crowd-decide-overlay[hidden] {
  display: none;
}

.crowd-decide-card {
  width: min(480px, 100%);
  border: 1px solid #2e3456;
  border-radius: 14px;
  background: rgba(15, 18, 34, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px 16px 14px;
}

.crowd-decide-photo-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.crowd-decide-photo {
  width: clamp(120px, 28vw, 200px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2e3456;
}

.crowd-decide-photo img {
  width: 100%;
  display: block;
}

.crowd-decide-photo-label {
  margin: 0;
  padding: 4px 0;
  font-size: clamp(11px, 1.6vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #cfd5f4;
  background: rgba(0, 0, 0, 0.3);
}

.crowd-decide-photo-pair {
  gap: 14px;
}

.crowd-decide-photo-pair .crowd-decide-photo {
  width: clamp(120px, 24vw, 180px);
}

.crowd-decide-icon-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crowd-decide-icon-btn {
  background: none;
  border: none;
  font-size: 36px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.crowd-decide-tooltip {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #100d22;
  border: 1px solid #2e3456;
  color: #cfd5f4;
  font-size: 12px;
  line-height: 1.3;
  z-index: 2;
}

.crowd-decide-tooltip[hidden] {
  display: none;
}

.crowd-decide-line {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.crowd-decide-team-label {
  margin: 0;
  font-size: clamp(12px, 1.6vw, 16px);
  color: #b8bed6;
  font-weight: 600;
  text-transform: uppercase;
}

.crowd-decide-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.crowd-decide-btn {
  min-width: 80px;
  font-size: clamp(16px, 2.2vw, 22px);
  padding: 8px 16px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
}

.crowd-decide-fail {
  background: transparent;
  color: #ff8a8c;
  border: 1px solid #ff8a8c;
}

.crowd-decide-pass {
  background: transparent;
  color: #35cf7a;
  border: 1px solid #35cf7a;
}

.crowd-decide-gold {
  background: transparent;
  color: #ffd700;
  border: 1px solid #ffd700;
}

.crowd-decide-team {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
}

/* ── Tiebreak-specific styles ── */

.crowd-decide-tiebreak {
  width: 100%;
  max-width: none;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 12px 20px;
  justify-content: center;
  min-height: 100%;
  gap: 10px;
}

.crowd-decide-tiebreak-title {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.1;
}

.crowd-decide-tiebreak-columns {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.crowd-decide-tiebreak-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: clamp(180px, 36vw, 300px);
}

.crowd-decide-tiebreak-col .crowd-decide-photo {
  width: 100%;
}

.crowd-decide-tiebreak-col .crowd-decide-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 10px 18px;
  border-width: 2px;
  animation: crowd-decide-pulse 1.6s ease-in-out infinite;
}

@keyframes crowd-decide-pulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.85); }
  50% { border-color: rgba(255, 255, 255, 0.3); }
}

.crowd-decide-team-name {
  display: block;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.crowd-decide-team-trophy {
  display: block;
  width: clamp(40px, 8vw, 72px);
  height: auto;
  margin: 4px auto;
  object-fit: contain;
}

.crowd-decide-team-cta {
  display: block;
  font-size: clamp(10px, 1.4vw, 13px);
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 1px;
}

@media (max-width: 700px) {
  .crowd-decide-card {
    padding: 12px;
    gap: 8px;
  }

  .crowd-decide-btn {
    min-width: 70px;
    font-size: 15px;
    padding: 7px 12px;
  }

  .crowd-decide-tiebreak-columns {
    gap: 14px;
  }

  .crowd-decide-tiebreak-col {
    width: clamp(140px, 32vw, 240px);
    gap: 8px;
  }

  .crowd-decide-tiebreak-col .crowd-decide-team {
    padding: 8px 14px;
  }
}

/* ── VS Winner Screen ── */

.vs-winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #111;
  padding: 20px;
}

.vs-winner-overlay[hidden] {
  display: none;
}

.vs-winner-header {
  margin: 0 0 6px;
  font-size: 32px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 900;
  color: #C8A84E;
  text-align: center;
}

.vs-winner-subheader {
  margin: 0 0 20px;
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 500;
  opacity: 0.6;
  color: #fff;
  text-align: center;
}

.vs-winner-spin-unit {
  background: #000;
  border-radius: 24px;
  padding: 30px 18px;
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms cubic-bezier(0.2, 0, 0.3, 1);
}

.vs-winner-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.vs-winner-trophy {
  width: 90px;
  height: 114px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.5s ease, opacity 0.8s ease, filter 0.8s ease;
}

/* Left trophy is upside-down (team 0 starts inverted) */
.vs-winner-trophy[data-team="0"] {
  transform: rotate(180deg);
}

.vs-winner-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vs-winner-name {
  --base-rotate: 0deg;
  font-size: 17px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-weight: 700;
  transition: opacity 0.8s ease;
}

.vs-winner-name--top {
  --base-rotate: 180deg;
  transform: rotate(var(--base-rotate));
}

.vs-winner-ambigram {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.vs-winner-ambigram svg {
  width: 330px;
  height: auto;
}

.vs-winner-sealed-name {
  margin: 24px 0 0;
  font-size: 21px;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 900;
  color: #C8A84E;
  text-align: center;
  min-height: 1.4em;
  visibility: hidden;
}

.vs-winner-sealed-name--active {
  visibility: visible;
  animation: vs-winner-pulse 1.2s ease-in-out infinite;
}

@keyframes vs-winner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes vs-winner-wiggle {
  0%, 100% { transform: rotate(var(--base-rotate)) scale(1); text-shadow: 0 0 8px #C8A84E80; }
  25% { transform: rotate(calc(var(--base-rotate) - 2deg)) scale(1.05); text-shadow: 0 0 16px #C8A84ECC; }
  75% { transform: rotate(calc(var(--base-rotate) + 2deg)) scale(1.05); text-shadow: 0 0 16px #C8A84ECC; }
}

.vs-winner-name--winner {
  color: #C8A84E;
  animation: vs-winner-wiggle 1s ease-in-out infinite;
}

.vs-winner-footnote {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 2px;
  color: #aaa;
  font-weight: 600;
  margin: 0;
}

/* ── Score Override Modal ── */

.score-override-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.92);
  padding: 20px;
}

.score-override-overlay[hidden] {
  display: none;
}

.score-override-card {
  width: min(420px, 100%);
  border: 1px solid #2e3456;
  border-radius: 14px;
  background: rgba(15, 18, 34, 0.96);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.score-override-heading {
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

.score-override-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.score-override-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  padding: 14px 18px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: border-color 150ms ease, transform 100ms ease;
}

.score-override-btn:active {
  transform: scale(0.95);
}

.score-override-emoji {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
}

.score-override-label {
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-override-fail {
  color: #ff8a8c;
  border-color: #ff8a8c55;
}

.score-override-pass {
  color: #35cf7a;
  border-color: #35cf7a55;
}

.score-override-gold {
  color: #ffd700;
  border-color: #ffd70055;
}

.score-override-stand {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 150ms ease, transform 100ms ease;
}

.score-override-stand:active {
  transform: scale(0.97);
}

.score-override-verdict {
  margin: 0;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 700px) {
  .score-override-card {
    padding: 20px 16px;
    gap: 18px;
  }

  .score-override-btn {
    min-width: 70px;
    padding: 10px 14px;
  }
}

@media (max-height: 440px) and (orientation: landscape) {
  .score-override-overlay {
    padding: 8px;
    overflow-y: auto;
  }
  .score-override-card {
    padding: 12px 16px;
    gap: 10px;
  }
  .score-override-heading {
    font-size: clamp(14px, 2.2vw, 20px);
  }
  .score-override-btn {
    min-width: 60px;
    padding: 8px 12px;
    gap: 3px;
  }
  .score-override-emoji {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }
  .score-override-stand {
    padding: 8px 14px;
    font-size: clamp(11px, 1.5vw, 14px);
  }
  .result-footer-action .btn {
    font-size: var(--text-sm);
    padding: 8px 12px;
  }
  .bomb-fuse-canvas {
    width: 100px;
    height: 28px;
  }
}

/* ────────────────────────────────────────
   Bonus Round Banner (game-over screen)
   ──────────────────────────────────────── */

.bonus-round-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: clamp(16px, 3vh, 32px);
  padding: clamp(16px, 2vh, 24px) clamp(24px, 4vw, 48px);
  background: linear-gradient(135deg, #ff6600, #ff3a3d);
  border-radius: 16px;
  text-align: center;
  animation: bonusPulse 2s ease-in-out infinite alternate;
}

@keyframes bonusPulse {
  from { box-shadow: 0 0 12px rgba(255, 102, 0, 0.4); }
  to   { box-shadow: 0 0 28px rgba(255, 102, 0, 0.7); }
}

.bonus-round-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.bonus-round-sub {
  margin: 0;
  font-size: clamp(14px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.85);
}

.bonus-round-cta {
  margin-top: 6px;
  background: #fff;
  color: #ff3a3d;
  font-size: clamp(20px, 3vw, 32px);
  padding: 8px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

/* ────────────────────────────────────────
   Bonus Prompt Screen
   ──────────────────────────────────────── */

.bonus-prompt-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: clamp(12px, 2vh, 24px);
  text-align: center;
  background: linear-gradient(160deg, #221e40 0%, #120f24 100%);
  padding: 24px;
}

.bonus-prompt-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bonus-prompt-title {
  margin: 0;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff6600, #ff3a3d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bonus-prompt-sub {
  margin: 0;
  font-size: clamp(18px, 3vw, 28px);
  color: rgba(255, 255, 255, 0.7);
}

.bonus-prompt-cta {
  margin-top: 12px;
  font-size: clamp(24px, 4vw, 42px);
  padding: 12px 48px;
}

.bonus-prompt-back {
  margin-top: 8px;
  font-size: clamp(14px, 2vw, 18px);
}

/* ────────────────────────────────────────
   Pack Select Age Badge (preview mode)
   ──────────────────────────────────────── */

.pack-select-age-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: clamp(11px, 1.2vw, 15px);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: bold;
  pointer-events: none;
}

/* ────────────────────────────────────────
   Share Gate Overlay
   ──────────────────────────────────────── */

.share-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.share-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #171724;
  border-radius: 16px;
  padding: clamp(24px, 4vw, 48px);
  max-width: 480px;
  text-align: center;
}

.share-gate-title {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 32px);
  color: #fff;
}

.share-gate-sub {
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255, 255, 255, 0.6);
}

.share-gate-btn {
  font-size: clamp(20px, 3vw, 28px);
  padding: 10px 40px;
}

.share-gate-skip {
  font-size: clamp(13px, 1.8vw, 16px);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
}

/* ────────────────────────────────────────
   Bonus Purchase Screen
   ──────────────────────────────────────── */

.bonus-purchase-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: clamp(8px, 1.5vh, 16px);
  background: linear-gradient(160deg, #221e40 0%, #120f24 100%);
  padding: 24px;
  overflow-y: auto;
}

.bonus-purchase-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.bonus-purchase-sub {
  margin: 0;
  font-size: clamp(14px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.bonus-purchase-previewed {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
  flex-wrap: wrap;
  margin: clamp(8px, 1vh, 16px) 0;
}

.bonus-purchase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--pack-accent, #333);
  border-radius: 12px;
  width: clamp(120px, 18vw, 180px);
  transition: transform 0.15s ease;
}

.bonus-purchase-card:hover {
  transform: scale(1.04);
}

.bonus-purchase-card-preview-wrap {
  width: 100%;
  aspect-ratio: 6 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--pack-accent, #222);
}

.bonus-purchase-card-preview {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.bonus-purchase-card-label {
  margin: 0;
  font-size: clamp(11px, 1.4vw, 15px);
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.bonus-purchase-card-age {
  font-size: clamp(10px, 1.1vw, 13px);
  color: rgba(255, 255, 255, 0.5);
}

.bonus-purchase-pricing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: clamp(8px, 1vh, 16px) 0;
}

.bonus-purchase-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-purchase-tier-label {
  font-size: clamp(16px, 2.2vw, 22px);
  color: #fff;
  font-weight: bold;
}

.bonus-purchase-tier-price {
  font-size: clamp(18px, 2.5vw, 26px);
  color: #35cf7a;
  font-weight: bold;
}

.bonus-purchase-actions {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
}

.bonus-purchase-browse {
  font-size: clamp(18px, 2.5vw, 28px);
  padding: 10px 32px;
}

.bonus-purchase-back {
  font-size: clamp(14px, 2vw, 18px);
}

/* ── Joker System ── */

/* Joker fan on pack-select screen */
.joker-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: clamp(8px, 1.5vh, 18px);
  margin-bottom: clamp(6px, 1.2vh, 14px);
  cursor: pointer;
  position: relative;
  min-height: clamp(32px, 5vw, 52px);
}

.joker-fan-card {
  width: clamp(28px, 4vw, 44px);
  aspect-ratio: 5 / 7;
  background: var(--joker-color, #444);
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 2vw, 22px);
  transform: rotate(var(--fan-rotate, 0deg));
  transform-origin: bottom center;
  transition: transform 0.2s ease;
  margin: 0 -4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.joker-fan-card.joker-fan-inactive {
  opacity: 0.6;
}

.joker-fan:hover .joker-fan-card {
  filter: brightness(1.15);
}

/* ── Joker Grid v2 (two-zone popup) ── */

/* ── Joker Grid (full-screen) ─────────────────── */

.joker-grid-overlay {
  position: fixed;
  inset: 0;
  background: #111118;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: jokerGridFadeIn 0.25s ease;
}

@keyframes jokerGridFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.jg-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* ── Table zone (top) — active jokers, full-bleed ── */
.jg-table {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pack-color, #0000ff);
  position: relative;
  min-height: 0;
  padding: clamp(8px, 1.5vh, 16px) clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

/* VS mode with different packs: diagonal split */
.vs-split-bg .jg-table {
  background: linear-gradient(
    135deg,
    var(--team0-pack-color) 50%,
    var(--team1-pack-color) 50%
  );
}

.jg-table-empty {
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 0 20px;
}

.jg-bench-empty {
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  padding: 0 20px;
}

.jg-table-cards,
.jg-bench-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(8px, 1.5vh, 16px);
}

/* ── Bench zone (bottom) — benched jokers ── */
.jg-bench {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.jg-card {
  --dealt-angle: 0deg;
  height: clamp(120px, 34vh, 280px);
  width: auto;
  aspect-ratio: 5 / 7;
  perspective: 800px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  outline: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: rotate(var(--dealt-angle));
}

.jg-card:hover {
  transform: translateY(-6px) scale(1.03) rotate(var(--dealt-angle));
}

.jg-card:focus-visible {
  outline: 2px solid #4488ff;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Benched cards — full brightness in bench zone */
.jg-card--benched {
  /* No dimming — cards show full color */
}

/* Active cards glow */
.jg-card--active {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

/* Card flip inner */
.jg-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(180deg);
}

.jg-card--active .jg-card-flip-inner {
  transform: rotateY(0deg);
}

.jg-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Front face — active, info shown */
.jg-card-front {
  transform: rotateY(0deg);
  border: 3px solid rgba(255, 255, 255, 0.9);
  padding: clamp(8px, 1.5vh, 18px) clamp(8px, 1.2vh, 14px);
}

.jg-card-front-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jg-card-front-icon img {
  width: clamp(32px, 5vh, 60px);
  height: auto;
}

.jg-card-front-name {
  font-size: clamp(12px, 2.2vh, 22px);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.jg-card-front-desc {
  font-size: clamp(9px, 1.6vh, 15px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  text-align: center;
}

/* Image-backed front face */
.jg-card-front--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.35);
  z-index: 0;
  border-radius: inherit;
}

.jg-card-front--image > * {
  position: relative;
  z-index: 1;
}

/* Back face — benched, diagonal name pattern */
.jg-card-back {
  transform: rotateY(180deg);
  border: 3px solid rgba(255, 255, 255, 0.25);
}

.jg-card-back-pattern {
  position: absolute;
  inset: -60%;
  width: 220%;
  height: 220%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: rotate(-45deg);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(12px, 2vh, 18px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.jg-card-back-pattern-line {
  white-space: nowrap;
}

.jg-card-back-pattern-line:nth-child(even) {
  transform: translateX(2.5em);
}


.jg-card-back--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.2);
  z-index: 0;
  border-radius: inherit;
}

/* Action bar — straddles the table/bench zone split */
.jg-actions {
  display: flex;
  gap: clamp(8px, 1.5vw, 16px);
  width: 100%;
  max-width: 700px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: clamp(-18px, -2.5vh, -10px);
  margin-bottom: clamp(-18px, -2.5vh, -10px);
  padding: 0 clamp(20px, 4vw, 48px);
  box-sizing: border-box;
  align-self: center;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.jg-visible .jg-actions {
  opacity: 1;
  transform: translateY(0);
}

.jg-btn-play {
  flex: 1;
  padding: clamp(10px, 1.5vh, 16px) clamp(18px, 3vw, 32px);
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7ED321, #5DB900);
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(15px, 2vw, 20px);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  box-shadow: 0 4px 20px rgba(126, 211, 33, 0.35);
  transition: filter 0.2s, transform 0.15s;
}

.jg-btn-play:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.jg-play-count {
  opacity: 0.7;
  font-weight: 700;
}

/* Joker icons on scoreboard */
.summary-joker-icons {
  display: inline-flex;
  gap: 2px;
  margin-right: 4px;
  font-size: 0.85em;
  vertical-align: middle;
}

.summary-joker-icon {
  display: inline-flex;
  align-items: center;
}

.summary-joker-svg {
  width: 0.9em;
  height: auto;
  vertical-align: middle;
}

.joker-fan-icon {
  flex: 1 1 0;
  width: 60%;
  min-height: 0;
  object-fit: contain;
}

/* Joker fan beside scoring grid on summary screens */
.round-summary-grid-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.round-summary-grid-wrap > .round-summary-grid {
  margin: 0;
}

/* VS badge + joker fan group on round-summary */
.round-summary-vs-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
}

.round-summary-vs-badge {
  width: clamp(60px, 10vw, 120px);
  height: auto;
  pointer-events: none;
}

.summary-joker-fan {
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: clamp(40px, 6vw, 64px);
}

.summary-joker-fan-card {
  width: clamp(32px, 5vw, 52px);
  aspect-ratio: 5 / 7;
  background: var(--joker-color, #444);
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(2px, 0.4vw, 4px) clamp(1px, 0.2vw, 3px) clamp(1px, 0.2vw, 3px);
  transform: rotate(var(--fan-rotate, 0deg));
  transform-origin: bottom center;
  margin: 0 -4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.joker-fan-label {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(5px, 0.8vw, 8px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.play-footer .summary-joker-fan,
.result-footer-action .summary-joker-fan {
  position: absolute;
  left: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  min-height: 0;
  z-index: 2;
}

.play-footer:has(.summary-joker-fan) .delib-footer-line {
  padding-left: clamp(58px, 8vw, 90px);
}

.result-footer-action:has(.summary-joker-fan) {
  padding-left: clamp(48px, 7vw, 80px);
}

/* ── Joker Reveal Overlay ─────────────────────── */

.joker-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  animation: jokerGridFadeIn 0.2s ease;
}

.joker-reveal-card.jg-card {
  width: clamp(160px, 25vw, 240px);
  height: auto;
  aspect-ratio: 5 / 7;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  position: relative;
  perspective: 800px;
}

/* Phase 1: Pop-up entrance */
.joker-reveal-card.joker-reveal-enter {
  animation: jokerRevealPopUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes jokerRevealPopUp {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Phase 3: Slide to fan position */
.joker-reveal-card.joker-reveal-slide-to-fan {
  animation: jokerRevealSlideToFan 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes jokerRevealSlideToFan {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) translate(var(--slide-dx), var(--slide-dy));
  }
}

/* Fallback: fade-out if fan not present */
.joker-reveal-card.joker-reveal-fade-out {
  animation: jokerRevealFadeOut 0.6s ease forwards;
}

@keyframes jokerRevealFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ── Boss Mode unlock extras ── */

.joker-reveal-overlay {
  flex-direction: column;
  gap: clamp(12px, 2vh, 24px);
}

.boss-unlock-toast {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: jokerRevealPopUp 0.4s ease 0.1s forwards;
}

.boss-unlock-cta {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  padding: 12px 32px;
  animation: jokerRevealPopUp 0.3s ease forwards;
}

/* ── Rude Bits: Neon glow system ── */
.rudebits-variant {
  --neon-color: #ff8c00;
}

/* Card silhouette SVG glow */
.rudebits-variant .side-shape-art img {
  filter: drop-shadow(0 0 2px var(--neon-color))
          drop-shadow(0 0 6px var(--neon-color))
          drop-shadow(0 0 14px var(--neon-color))
          drop-shadow(0 0 30px color-mix(in srgb, var(--neon-color) 50%, transparent))
          drop-shadow(0 0 60px color-mix(in srgb, var(--neon-color) 25%, transparent));
}

/* Dark card background with neon border */
.rudebits-variant .side-shape {
  background: #111111;
  border-color: var(--neon-color);
  box-shadow: 0 0 8px var(--neon-color), inset 0 0 8px rgba(0, 0, 0, 0.5);
}
.rudebits-variant .side-shape-face-front {
  background: #111111;
  border-color: var(--neon-color);
}
.rudebits-variant .side-shape-face-back {
  background: #111111;
  border-color: var(--neon-color);
}
.rudebits-variant .side-shape-back-pattern {
  background-color: #111111;
}
.rudebits-variant .side-shape-back-pattern::before {
  background-color: var(--neon-color);
  opacity: 0.3;
  -webkit-mask-image: var(--pack-card-back-logo), var(--pack-card-back-logo);
  mask-image: var(--pack-card-back-logo), var(--pack-card-back-logo);
  -webkit-mask-size: var(--pack-card-back-logo-size), var(--pack-card-back-logo-size);
  mask-size: var(--pack-card-back-logo-size), var(--pack-card-back-logo-size);
  -webkit-mask-position: 0 0, 130px 33px;
  mask-position: 0 0, 130px 33px;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Card title text glow */
.rudebits-variant .side-shape-title {
  text-shadow: 0 0 4px var(--neon-color), 0 0 12px var(--neon-color);
}

/* Title text glow */
.rudebits-variant .round-announce-title,
.rudebits-variant .get-ready-text,
.rudebits-variant .round-summary-title,
.rudebits-variant .shape-ready-title,
.rudebits-variant .judge-prompt-title {
  text-shadow: 0 0 4px var(--neon-color), 0 0 12px var(--neon-color);
}

/* Home logo pink glow */
.rudebits-variant .home-logo {
  filter: drop-shadow(0 0 4px #ff0099) drop-shadow(0 0 12px #ff0099) drop-shadow(0 0 30px rgba(255, 0, 153, 0.4));
}

/* Result badge glow by tier */
.rudebits-variant .result-score-corner[data-tier="GOLD"] {
  filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 12px #ff0000);
}
.rudebits-variant .result-score-corner[data-tier="PASS"] {
  filter: drop-shadow(0 0 4px #00ff00) drop-shadow(0 0 12px #00ff00);
}
.rudebits-variant .result-score-corner[data-tier="FAIL"] {
  filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 12px #ff0000);
}

/* ── Rude Bits: Home page dark styling ── */
.rudebits-variant #screen-home {
  background: #000;
}
.rudebits-variant .pack-card {
  background: #111;
  border: 1px solid var(--pack-accent, #ff0099);
  box-shadow: 0 0 8px var(--pack-accent, #ff0099),
              0 0 20px color-mix(in srgb, var(--pack-accent, #ff0099) 30%, transparent);
}
.rudebits-variant .pack-card:hover,
.rudebits-variant .pack-card:focus-visible {
  outline: 2px solid var(--pack-accent, #ff0099);
  box-shadow: 0 0 12px var(--pack-accent, #ff0099),
              0 0 30px color-mix(in srgb, var(--pack-accent, #ff0099) 40%, transparent);
}

/* ── Rude Bits: Home card preview SVG + title glow ── */
.rudebits-variant .pack-preview {
  filter: drop-shadow(0 0 2px var(--pack-accent))
          drop-shadow(0 0 6px var(--pack-accent))
          drop-shadow(0 0 14px var(--pack-accent));
}
.rudebits-variant .pack-name {
  text-shadow: 0 0 4px var(--pack-accent), 0 0 12px var(--pack-accent);
}

/* ── Rude Bits: Home card logo glow ── */
.rudebits-variant .pack-card-logo {
  filter: drop-shadow(0 0 4px #ff0099) drop-shadow(0 0 12px #ff0099);
}

/* ── Rude Bits: Pack-select logo glow ── */
.rudebits-variant .pack-select-logo {
  filter: drop-shadow(0 0 4px #ff0099) drop-shadow(0 0 12px #ff0099) drop-shadow(0 0 30px rgba(255, 0, 153, 0.4));
}

/* ── Rude Bits: Pack-select dark neon cards ── */
.rudebits-variant .pack-select-card-inner {
  background: #111 !important;
  border-color: var(--pack-accent, #ff0099);
  box-shadow: 0 0 8px var(--pack-accent, #ff0099),
              0 0 20px color-mix(in srgb, var(--pack-accent, #ff0099) 30%, transparent);
}
.rudebits-variant .pack-select-card-inner[data-pack-id="wee"],
.rudebits-variant .pack-select-card-inner[data-pack-id="big-and-little"] {
  background: #111 !important;
}
.rudebits-variant .pack-select-card-inner[data-pack-id="wee"] .pack-select-card-label,
.rudebits-variant .pack-select-card-inner[data-pack-id="big-and-little"] .pack-select-card-label {
  color: #fff;
}
.rudebits-variant .pack-select-card-label {
  color: #fff;
  text-shadow: 0 0 4px var(--pack-accent), 0 0 12px var(--pack-accent);
}
.rudebits-variant .pack-select-card-preview {
  filter: drop-shadow(0 0 2px var(--pack-accent))
          drop-shadow(0 0 6px var(--pack-accent))
          drop-shadow(0 0 14px var(--pack-accent));
}

/* ── Rude Bits: Brand lockup icon glows ── */
.rudebits-variant .bl-icon-pass {
  filter: drop-shadow(0 0 4px #00ff00) drop-shadow(0 0 12px #00ff00);
}
.rudebits-variant .bl-icon-gold {
  filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 12px #ff0000);
}
.rudebits-variant .bl-icon-fail {
  filter: drop-shadow(0 0 4px #ff0000) drop-shadow(0 0 12px #ff0000);
}

/* ══════════════════════════════════════════════════════════
   SETUP FLOW ANIMATIONS
   ══════════════════════════════════════════════════════════ */

/* ── Screen transitions ── */
@keyframes screen-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes screen-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

.screen.screen-enter {
  display: block;
  animation: screen-enter 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.screen.screen-exit {
  display: block;
  animation: screen-exit 200ms ease-in forwards;
  pointer-events: none;
}

/* ── Mode-select card stagger ── */
@keyframes stagger-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mode-card {
  opacity: 0;
}

.screen-enter .mode-card,
.screen.active .mode-card {
  animation: stagger-up 320ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.screen-enter .mode-card:nth-child(1),
.screen.active .mode-card:nth-child(1) { animation-delay: 80ms; }
.screen-enter .mode-card:nth-child(2),
.screen.active .mode-card:nth-child(2) { animation-delay: 180ms; }
.screen-enter .mode-card:nth-child(3),
.screen.active .mode-card:nth-child(3) { animation-delay: 280ms; }

/* ── Team setup block slide-in ── */
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.team-setup-block {
  opacity: 0;
}

.screen-enter .team-setup-block,
.screen.active .team-setup-block {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: 120ms;
}

.team-setup-vs .team-setup-block[data-team-index="0"] {
  animation-name: slide-from-left;
}

.team-setup-vs .team-setup-block[data-team-index="1"] {
  animation-name: slide-from-right;
  animation-delay: 200ms;
}

/* League: all team blocks pop in */
.team-setup-league .team-setup-block {
  animation-name: pop-in;
}
.team-setup-league .team-setup-block[data-team-index="1"] { animation-delay: 150ms; }
.team-setup-league .team-setup-block[data-team-index="2"] { animation-delay: 300ms; }
.team-setup-league .team-setup-block[data-team-index="3"] { animation-delay: 450ms; }

/* Co-op: two cards slide in from opposite sides */
.team-setup-coop .team-setup-block[data-team-index="0"] {
  animation-name: slide-from-left;
}

.team-setup-coop .team-setup-block[data-team-index="1"] {
  animation-name: slide-from-right;
  animation-delay: 200ms;
}

/* ── Title fade-in ── */
.team-setup-title-row {
  opacity: 0;
}

.screen-enter .team-setup-title-row,
.screen.active .team-setup-title-row {
  animation: stagger-up 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms forwards;
}

/* ── VS center (shuffle + logo) fade-in ── */
.team-setup-vs-center {
  opacity: 0;
}

.screen-enter .team-setup-vs-center,
.screen.active .team-setup-vs-center {
  animation: stagger-up 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 160ms forwards;
}

/* ── Age pill bounce on select ── */
@keyframes age-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.age-pill-option.is-active {
  animation: age-bounce 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes age-pill-nudge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  25%      { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(255,255,255,0.4); }
  50%      { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  75%      { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(255,255,255,0.4); }
}

.age-pill-nudge .age-pill-toggle {
  animation: age-pill-nudge 800ms ease-out;
}

/* ── Age pill wave hint (unselected) ── */
@keyframes age-wave {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 1; filter: brightness(1.15); }
}

.age-pill-wave .age-pill-option {
  animation: age-wave 1.6s ease-in-out infinite;
}
.age-pill-wave .age-pill-option:nth-child(1) { animation-delay: 0s; }
.age-pill-wave .age-pill-option:nth-child(2) { animation-delay: 0.15s; }
.age-pill-wave .age-pill-option:nth-child(3) { animation-delay: 0.3s; }
.age-pill-wave .age-pill-option:nth-child(4) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .age-pill-wave .age-pill-option { animation: none; }
}

/* ── Team name pop-in (for typewriter-typed names) ── */
@keyframes name-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.team-name-input.name-popping {
  animation: name-pop 200ms ease-out;
}

/* ── CTA button slide-up ── */
@keyframes cta-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.team-setup-actions {
  opacity: 0;
}

.screen-enter .team-setup-actions,
.screen.active .team-setup-actions {
  animation: cta-slide-up 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 280ms forwards;
}

.mode-select-footer {
  opacity: 0;
}

.screen-enter .mode-select-footer,
.screen.active .mode-select-footer {
  animation: cta-slide-up 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 360ms forwards;
}

/* ── Co-op dual player card layout ── */
.team-setup-coop .team-setup-main {
  height: 100%;
  width: min(1000px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(8px, 1.5vw, 20px);
  row-gap: clamp(8px, 1.4vh, 16px);
  justify-items: stretch;
  align-items: center;
}

.team-setup-coop .team-setup-title-row {
  grid-column: 1 / -1;
  grid-row: 1;
}

.team-setup-coop-center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 8px);
}

.team-setup-coop-shuffle {
  width: clamp(32px, 4vw, 44px);
  height: clamp(32px, 4vw, 44px);
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 0;
  flex-shrink: 0;
}

.team-setup-coop-shuffle .team-setup-name-shuffle-icon {
  width: clamp(16px, 2vw, 24px);
  height: clamp(16px, 2vw, 24px);
  background: #fff;
}

.team-setup-coop .team-setup-block[data-team-index="0"] {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

.team-setup-coop-amp {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  user-select: none;
  padding-inline: clamp(4px, 1vw, 12px);
}

.team-setup-coop .team-setup-block[data-team-index="1"] {
  grid-column: 3;
  grid-row: 2;
  width: 100%;
}

/* Co-op player silhouette icon */
.coop-player-icon {
  display: block;
  margin: 0 auto clamp(4px, 0.8vh, 8px);
  height: clamp(40px, 7vh, 64px);
  width: auto;
  opacity: 0.5;
}

/* Co-op: centre the name input text */
.team-setup-coop .team-name-input {
  text-align: center;
}

/* Joker fan spans full width in co-op 3-column grid */
.team-setup-coop .joker-fan {
  grid-column: 1 / -1;
  justify-self: center;
}

/* ── Solo nudge screen stagger ── */
.solo-nudge-screen .solo-nudge-content {
  opacity: 0;
}

.screen-enter .solo-nudge-content,
.screen.active .solo-nudge-content {
  animation: stagger-up 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms forwards;
}

.solo-nudge-screen .solo-nudge-actions {
  opacity: 0;
}

.screen-enter .solo-nudge-actions,
.screen.active .solo-nudge-actions {
  animation: cta-slide-up 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms forwards;
}

/* ═══════════════════════════════════════════════════════════════
   SCOREBOARD SCREEN
   ═══════════════════════════════════════════════════════════════ */

.scoreboard-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  position: relative;
  /* Fix 7: full team-colour background — no black bars */
  background: linear-gradient(
    to bottom,
    var(--sb-team0-color, #e91e87) 50%,
    var(--sb-team1-color, #d4a520) 50%
  );
}

/* ── Brand lockup (positioned inside body) ── */

.scoreboard-brand-lockup {
  position: absolute;
  top: 8px;
  left: 16px;
  z-index: 3;
  flex-shrink: 0;
}

.scoreboard-brand-logo {
  width: 102px;
  max-width: 15vw;
  height: auto;
}

/* ── Body (two team halves) ── */

.scoreboard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ── Team section ── */

.scoreboard-team {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 36px;
  gap: 16px;
  min-height: 0;
  background-color: var(--team-accent, #888);
}

.scoreboard-team-info {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: clamp(100px, 18vw, 200px);
}

.scoreboard-team-name {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.scoreboard-team-status {
  font-size: clamp(3.2rem, 10vw, 6.4rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  padding: 6px 14px;
  border-radius: 8px;
  width: fit-content;
}
.scoreboard-team-status[data-target] {
  font-family: "DSEG7", "Courier New", monospace;
}

/* Score color + glow based on value (high specificity to beat same-pack override) */
.scoreboard-screen .scoreboard-team .scoreboard-team-status.score-negative {
  color: #ff3333;
  text-shadow: 0 0 8px #ff3333, 0 0 20px rgba(255, 51, 51, 0.5);
}
.scoreboard-screen .scoreboard-team .scoreboard-team-status.score-positive {
  color: #ffee00;
  text-shadow: 0 0 8px #ffee00, 0 0 20px rgba(255, 238, 0, 0.5);
}
.scoreboard-screen .scoreboard-team .scoreboard-team-status.score-zero {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
}

.scoreboard-trophy {
  height: clamp(6rem, 18vw, 12rem);
  width: auto;
  object-fit: contain;
}

.scoreboard-spoon {
  height: clamp(6rem, 18vw, 12rem);
  width: auto;
  object-fit: contain;
}

/* ── Team icon (trophy/spoon) — outside the score box ── */

.scoreboard-team-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(80px, 20vw, 160px);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.scoreboard-team-icon--visible {
  animation: sb-icon-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sb-icon-pop-in {
  0% { opacity: 0; transform: scale(0) rotate(-15deg); }
  60% { opacity: 1; transform: scale(1.3) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Winner score flash */
.scoreboard-team-status--winner-flash {
  animation: sb-score-flash 0.8s ease-in-out;
}

@keyframes sb-score-flash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); filter: brightness(1.3); }
}


/* ── Winner toast — full-screen slam overlay ── */

.scoreboard-winner-toast {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
}

.scoreboard-winner-toast--visible {
  animation: sb-toast-life 2.4s ease forwards;
}

@keyframes sb-toast-life {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.scoreboard-winner-toast-inner {
  text-align: center;
  transform: scale(0.3);
  animation: sb-toast-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sb-toast-slam {
  0%   { transform: scale(0.3) rotate(-3deg); }
  60%  { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.scoreboard-winner-toast-name {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.scoreboard-winner-toast-wins {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(4rem, 14vw, 10rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #ffee00;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: 0 0 60px rgba(255, 238, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4);
  animation: sb-toast-pulse 0.6s ease-in-out 0.5s 3;
}

@keyframes sb-toast-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ── Cards column (cards + flip instruction) ── */

.scoreboard-cards-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* ── Card row ── */

.scoreboard-cards {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 24px 6px 0;
}

.scoreboard-cards--few {
  justify-content: center;
}

.scoreboard-cards--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(6px, 1vw, 12px);
  justify-items: center;
  align-items: center;
  overflow: visible;
}

/* ── Card ── */

.scoreboard-screen .scoreboard-card {
  flex: 0 0 auto;
  max-width: clamp(48px, 13vw, 150px);
  min-width: 0;
  aspect-ratio: 6 / 10;
  height: clamp(80px, 38vh, 260px);
  perspective: 600px;
  background: transparent;
  /* no rotation — cards sit straight */
}

.scoreboard-card--interactive {
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

/* Fix 9: clip on inner to prevent corner artifacts */
.scoreboard-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 250ms ease;
  border-radius: 8px;
}

.scoreboard-card--flipped .scoreboard-card-inner {
  transform: rotateY(180deg);
}

/* Card faces */

.scoreboard-card-front,
.scoreboard-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

/* Fix 8: card art bottom-aligned */
.scoreboard-card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px;
}

.scoreboard-card-back {
  transform: rotateY(180deg);
  background-color: var(--team-accent, #888);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
}

/* Unplayed cards always show back face (no flip needed) */
.scoreboard-card--unplayed .scoreboard-card-back {
  transform: none;
}

/* Fix 5: card back with repeating pack name text */
.scoreboard-card-back-pattern {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.scoreboard-card-back-text {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  transform: rotate(-45deg);
}

.scoreboard-card-back-row {
  white-space: nowrap;
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.05em;
}

.scoreboard-card-back-row:nth-child(even) {
  transform: translateX(3em);
}

.scoreboard-card-back-art {
  width: 80%;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: auto;
}

.scoreboard-card-back-logo {
  width: 50%;
  max-width: 48px;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  flex-shrink: 0;
}

.scoreboard-card-badge--back {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1;
  flex-shrink: 0;
}

/* Card art (white silhouette SVG) — Fix 8: bottom-aligned */

.scoreboard-card-art {
  width: 80%;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: auto;
}

/* Card logo at bottom */

.scoreboard-card-logo {
  width: 50%;
  max-width: 48px;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  flex-shrink: 0;
  margin-top: auto;
}

/* Score badge */

.scoreboard-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1;
}

.scoreboard-card-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(0.35rem, 0.9vw, 0.65rem);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.04em;
  width: 100%;
  padding: 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Reveal-flip transition (dramatic auto-flip for latest round) ── */

.scoreboard-card--reveal-flip .scoreboard-card-inner {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Card back: freeze frame thumbnail (visible when flipped) ── */

.scoreboard-card-back--thumb {
  padding: 0;
  justify-content: center;
  align-items: center;
}

.scoreboard-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Over-thumb overlays: title + art + logo on freeze frame ── */

.scoreboard-card-art--over-thumb {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-height: 45%;
  z-index: 2;
  opacity: 0.85;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.scoreboard-card-title--over-thumb {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.scoreboard-card-logo--over-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  opacity: 0.8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.scoreboard-card-badge--overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* ── Divider between teams (Fix 7: transparent, thin line) ── */

.scoreboard-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  height: 0;
  min-height: 0;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.scoreboard-divider--same-color::before {
  display: none;
}

/* Same-pack variant: white top, pack colour bottom */
.scoreboard-screen--same-pack {
  background: linear-gradient(
    to bottom,
    var(--sb-team0-color, #e91e87) 50%,
    #ffffff 50%
  );
}

.scoreboard-screen--same-pack .scoreboard-team--1 {
  background-color: #ffffff;
}

.scoreboard-screen--same-pack .scoreboard-team--1 .scoreboard-team-name,
.scoreboard-screen--same-pack .scoreboard-team--1 .scoreboard-team-status {
  color: var(--sb-team1-color, #333);
}

/* Bottom team card borders on white bg */
.scoreboard-screen--same-pack .scoreboard-team--1 .scoreboard-card-front,
.scoreboard-screen--same-pack .scoreboard-team--1 .scoreboard-card-back {
  border-color: rgba(0, 0, 0, 0.15);
}


/* VS badge — left-aligned on the dividing line */
.scoreboard-vs-badge {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(75px, 11.25vw, 150px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Joker fan inside scoreboard divider — sits just right of VS badge */
.scoreboard-divider .summary-joker-fan {
  position: absolute;
  left: clamp(120px, 18vw, 220px);
  top: 50%;
  transform: translateY(-50%);
  min-height: 0;
  z-index: 3;
}

.scoreboard-divider-text {
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  font-weight: 500;
  z-index: 1;
}

.scoreboard-divider-copy {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  z-index: 2;
  white-space: nowrap;
}

.scoreboard-divider-forget {
  margin: 0;
  font-size: clamp(0.65rem, 1.3vw, 0.9rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.04em;
}

.scoreboard-divider-save {
  margin: 0;
  font-size: clamp(0.65rem, 1.3vw, 0.9rem);
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.scoreboard-screen--same-pack .scoreboard-divider-forget {
  color: #fff;
}

.scoreboard-screen--same-pack .scoreboard-divider-save {
  color: var(--sb-team1-color, rgba(0, 0, 0, 0.4));
}

/* Flip instruction under each team's cards */
.scoreboard-flip-instruction {
  font-size: clamp(0.55rem, 1vw, 0.75rem);
  font-style: italic;
  font-weight: 500;
  padding-left: 4px;
  padding-right: 24px;
  text-align: right;
}

/* Top team (team 0): pack colour text */
.scoreboard-flip-instruction--0 {
  color: var(--team-accent, rgba(255, 255, 255, 0.6));
  opacity: 0.7;
}

/* Bottom team (team 1): white text */
.scoreboard-flip-instruction--1 {
  color: rgba(255, 255, 255, 0.6);
}

/* Same-pack variant: bottom instruction in pack colour on white bg */
.scoreboard-screen--same-pack .scoreboard-flip-instruction--1 {
  color: var(--sb-team1-color, #333);
  opacity: 0.5;
}

/* ── Bottom bar (Fix 7: transparent bg) ── */

.scoreboard-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 16px;
  background: transparent;
  flex-shrink: 0;
  min-height: 48px;
  z-index: 2;
}

.scoreboard-bottom-bar--game-over {
  justify-content: flex-start;
}

.scoreboard-btn {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  padding: 12px 32px;
  border: 2px solid #fff;
  background: #fff;
  color: var(--sb-team1-color, #333);
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 150ms, opacity 150ms, transform 0.15s;
}

.scoreboard-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.scoreboard-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Play more button — fills remaining width */

.scoreboard-btn-play-more {
  flex: 1;
}

/* Shuffle button — outline/secondary */

.scoreboard-btn-shuffle {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.scoreboard-btn-shuffle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Unified save button — solid white */

.scoreboard-btn-save {
  background: #fff;
  color: var(--sb-team1-color, #333);
  border: 2px solid #fff;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
  font-weight: 900;
  padding: 8px 16px;
}

.scoreboard-btn-save:hover {
  background: rgba(255, 255, 255, 0.85);
}

.scoreboard-btn-save:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #fff;
}

/* League match button variants */
.scoreboard-btn--primary {
  background: #fff;
  color: var(--sb-team0-color, #e91e87);
  border: 2px solid #fff;
}

.scoreboard-btn--primary:hover {
  background: rgba(255, 255, 255, 0.85);
}

.scoreboard-btn--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.scoreboard-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.scoreboard-save-label {
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.scoreboard-save-icon {
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background 150ms;
}

.scoreboard-save-icon:hover {
  background: rgba(0, 0, 0, 0.1);
}

.scoreboard-save-divider {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  background: currentColor;
  opacity: 0.3;
}

/* ── Next round button — match LET'S PLAY button style ── */

.scoreboard-btn-next {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nav-btn-padding);
  border-radius: var(--nav-btn-radius);
  border: 2px solid #ffffff;
  background: #ffffff;
  color: var(--sb-team1-color, var(--pack-color));
  font-family: inherit;
  font-weight: var(--nav-btn-font-weight);
  font-size: var(--nav-btn-font-size);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: background 150ms, transform 0.15s;
}

.scoreboard-btn-next:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

/* ── Quit button (inherited from global) ── */

.scoreboard-screen .screen-quit-corner {
  top: 6px;
  right: 6px;
}

/* ── Save overlay ── */

.scoreboard-save-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.scoreboard-save-overlay-text {
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.03em;
  animation: bods-fade-pulse 1.2s ease-in-out infinite alternate;
}

/* ── Cheat toast ── */

.scoreboard-cheat-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.9);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: clamp(20px, 4vh, 40px) clamp(32px, 6vw, 64px);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 100;
  pointer-events: none;
}

.scoreboard-cheat-toast-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #e91e1e;
}

.scoreboard-cheat-toast-body {
  font-size: clamp(0.85rem, 1.8vw, 1.2rem);
  font-weight: 600;
  opacity: 0.8;
}

.scoreboard-cheat-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.scoreboard-cheat-toast--shake {
  animation: cheat-shake 0.4s ease;
}

@keyframes cheat-shake {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  15% { transform: translate(-50%, -50%) scale(1) rotate(-4deg) translateX(-6px); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(3deg) translateX(6px); }
  45% { transform: translate(-50%, -50%) scale(1) rotate(-3deg) translateX(-4px); }
  60% { transform: translate(-50%, -50%) scale(1) rotate(2deg) translateX(4px); }
  75% { transform: translate(-50%, -50%) scale(1) rotate(-1deg) translateX(-2px); }
}

/* ── Flip-cards toast (picking mode) ── */

.scoreboard-flip-toast {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.scoreboard-flip-toast--visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Judge reveal toast ── */

.scoreboard-judge-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.9);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: clamp(20px, 4vh, 40px) clamp(32px, 6vw, 64px);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 20;
  pointer-events: none;
  max-width: 80vw;
}

.scoreboard-judge-toast-title {
  font-size: clamp(1.1rem, 2.8vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.scoreboard-judge-toast-body {
  font-size: clamp(0.85rem, 1.8vw, 1.2rem);
  font-weight: 600;
  opacity: 0.7;
  font-style: italic;
}

.scoreboard-judge-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Leader toast (mid-game scoreboard) ── */

.scoreboard-leader-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.9);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  border-radius: 12px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 80vw;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 20;
  pointer-events: none;
  text-align: center;
}

.scoreboard-leader-toast-title {
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.scoreboard-leader-toast-body {
  font-size: clamp(0.85rem, 1.8vw, 1.2rem);
  font-weight: 600;
  opacity: 0.7;
}

.scoreboard-leader-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Tiebreaker toast (result screen) ── */

.tiebreaker-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.9);
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: clamp(24px, 5vh, 48px) clamp(36px, 7vw, 72px);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 350ms ease, transform 350ms ease;
  z-index: 20;
  pointer-events: none;
  max-width: 80vw;
}

.tiebreaker-toast-title {
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.tiebreaker-toast-body {
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  font-weight: 600;
  opacity: 0.75;
}

.tiebreaker-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Scoreboard: small landscape screens (iPhone etc.) ── */
@media (max-height: 440px) and (orientation: landscape) {
  .scoreboard-brand-logo {
    display: none;
  }
  .scoreboard-team {
    padding: 4px 12px 4px 16px;
    gap: 10px;
  }
  .scoreboard-team-info {
    min-width: clamp(70px, 14vw, 140px);
  }
  .scoreboard-team-name {
    font-size: clamp(1rem, 2.2vw, 1.4rem);
  }
  .scoreboard-team-status {
    font-size: clamp(2rem, 7vw, 4rem);
  }
  .scoreboard-screen .scoreboard-card {
    max-width: clamp(36px, 10vw, 100px);
    height: clamp(40px, 22vh, 120px);
  }
  .scoreboard-cards {
    gap: clamp(3px, 0.6vw, 8px);
    padding: 4px 12px 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .scoreboard-divider-copy {
    right: 12px;
  }
  .scoreboard-card-back-row {
    font-size: clamp(0.45rem, 0.9vw, 0.7rem);
  }
  .scoreboard-card-badge {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  }
  .scoreboard-bottom-bar {
    padding: 4px 12px;
    min-height: 36px;
  }
  .scoreboard-btn-save {
    font-size: clamp(0.6rem, 1.2vw, 0.85rem);
    padding: 5px 10px;
  }
  .scoreboard-btn-next {
    font-size: clamp(0.7rem, 1.3vw, 1rem);
    padding: 6px 16px;
  }
  .scoreboard-vs-badge {
    display: none;
  }
  .scoreboard-flip-instruction {
    font-size: clamp(0.4rem, 0.8vw, 0.6rem);
  }
}

/* ── Save banner (game-over, between team rows or below single row) ── */

.scoreboard-save-banner {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  padding: clamp(10px, 2vh, 20px) clamp(12px, 2vw, 24px);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  margin: 4px 16px;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
}

.scoreboard-save-banner--hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.scoreboard-save-banner--reveal {
  transition: opacity 400ms ease, transform 400ms ease;
}

.scoreboard-save-banner-copy {
  flex: 1;
  min-width: 0;
}

.scoreboard-save-banner-headline {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.scoreboard-save-banner-subline {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.scoreboard-save-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.scoreboard-save-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f9d233;
  color: #111;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(0.75rem, 1.3vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 20px);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, transform 0.1s;
}

.scoreboard-save-banner-btn:hover {
  background: #f5c623;
  transform: translateY(-1px);
}

.scoreboard-save-banner-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.scoreboard-save-banner-btn--confirmed {
  background: #4caf50;
  color: #fff;
}

.scoreboard-save-icon-btn {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  line-height: 1;
  padding: clamp(4px, 0.8vh, 8px) clamp(6px, 1vw, 10px);
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.scoreboard-save-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ── Split share button [SHARE 🎬 | 📷] ── */

.scoreboard-share-split {
  display: inline-flex;
  align-items: stretch;
  background: #f9d233;
  border-radius: 10px;
  overflow: hidden;
}

.scoreboard-share-split-video,
.scoreboard-share-split-photo {
  background: transparent;
  border: none;
  color: #111;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}

.scoreboard-share-split-video {
  padding: clamp(10px, 1.8vh, 18px) clamp(16px, 2.5vw, 28px);
}

.scoreboard-share-split-photo {
  padding: clamp(10px, 1.8vh, 18px) clamp(10px, 1.6vw, 18px);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.scoreboard-share-split-video:hover,
.scoreboard-share-split-photo:hover {
  background: rgba(0, 0, 0, 0.08);
}

.scoreboard-share-split-sep {
  width: 1.5px;
  align-self: stretch;
  margin: 6px 0;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.scoreboard-share-split--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.scoreboard-share-split-video:disabled,
.scoreboard-share-split-photo:disabled {
  cursor: not-allowed;
}

/* ── "or lose em forever" fade-in link ── */

.scoreboard-lose-em-link {
  opacity: 0;
  transition: opacity 400ms ease;
  color: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}

.scoreboard-lose-em-link.is-visible {
  opacity: 1;
}

.scoreboard-lose-em-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Save button (Zeffie's Favourite Attempts) ── */

.scoreboard-save-btn {
  background: #f9d233;
  color: #111;
  border: none;
  border-radius: 10px;
  padding: clamp(10px, 1.8vh, 18px) clamp(16px, 2.5vw, 28px);
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

@keyframes save-btn-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.scoreboard-save-btn--pulse {
  animation: save-btn-pulse 2s ease-in-out infinite;
}

.scoreboard-save-btn--disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
  animation: none;
}

/* ── Disabled share button (picking mode) ── */

.scoreboard-save-banner-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ── Beat 2 actions layout ── */

.scoreboard-banner-beat2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Card picked state (gold selection ring) ── */

.scoreboard-card--picked .scoreboard-card-inner {
  box-shadow: 0 0 0 3px #f9d233, 0 0 12px rgba(249, 210, 51, 0.5);
  border-radius: 10px;
}

/* ── Card shared — spin away and shrink ── */

.scoreboard-card--shared-away {
  transform: scale(0) rotate(180deg);
  opacity: 0;
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 400ms ease;
  pointer-events: none;
}

/* ── Wobble animation for face-down cards ── */

@keyframes card-wobble {
  0%   { transform: rotateY(180deg) rotate(0deg); }
  25%  { transform: rotateY(180deg) rotate(-3deg); }
  50%  { transform: rotateY(180deg) rotate(3deg); }
  75%  { transform: rotateY(180deg) rotate(-1.5deg); }
  100% { transform: rotateY(180deg) rotate(0deg); }
}

.scoreboard-card--wobble .scoreboard-card-inner {
  animation: card-wobble 0.3s ease-in-out 1;
}

/* ── Save banner: small landscape screens ── */
@media (max-height: 440px) and (orientation: landscape) {
  .scoreboard-save-banner {
    padding: 4px 10px;
    gap: 6px;
    margin: 2px 12px;
  }
  .scoreboard-save-banner-headline {
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  }
  .scoreboard-save-banner-subline {
    font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  }
  .scoreboard-save-banner-btn {
    font-size: clamp(0.6rem, 1.1vw, 0.8rem);
    padding: 4px 10px;
  }
  .scoreboard-share-split-video {
    font-size: clamp(0.6rem, 1.1vw, 0.8rem);
    padding: 4px 10px;
  }
  .scoreboard-share-split-photo {
    font-size: clamp(0.7rem, 1.3vw, 1rem);
    padding: 4px 8px;
  }
  .scoreboard-lose-em-link {
    font-size: clamp(0.55rem, 0.9vw, 0.7rem);
  }
}

/* =========================================================================
   Judge's Picks screen
   ========================================================================= */

.jp-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vh, 16px);
  height: 100%;
  padding: 16px 24px;
  text-align: center;
}

.jp-title {
  font-size: clamp(18px, 3.5vw, 32px);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.jp-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  max-width: 100%;
}

.jp-card {
  width: clamp(60px, 12vw, 110px);
  aspect-ratio: 5 / 7;
  perspective: 600px;
}

.jp-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.jp-card--flipped .jp-card-inner {
  transform: rotateY(180deg);
}

.jp-card-front,
.jp-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.jp-card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  gap: 2px;
}

.jp-card-back {
  transform: rotateY(180deg);
}

.jp-card-art {
  width: 80%;
  max-height: 55%;
  object-fit: contain;
  flex-shrink: 1;
}

.jp-card-logo {
  width: 50%;
  max-height: 18%;
  object-fit: contain;
  opacity: 0.6;
}

.jp-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: clamp(12px, 2vw, 18px);
  line-height: 1;
}

.jp-card-badge img {
  width: clamp(12px, 2vw, 18px);
  height: auto;
}

/* Card back — repeating pack name pattern (mirrors scoreboard) */
.jp-card-back-pattern {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.jp-card-back-text {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
}

.jp-card-back-row {
  white-space: nowrap;
  font-size: clamp(0.5rem, 1vw, 0.8rem);
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.2;
  letter-spacing: 0.05em;
  color: #fff;
}

.jp-card-back-row:nth-child(even) {
  transform: translateX(3em);
}

/* Copy + actions fade in */
.jp-copy,
.jp-actions {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.jp-copy.is-visible,
.jp-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.jp-copy {
  color: #ffffff;
  font-size: clamp(13px, 2.2vw, 20px);
  font-style: italic;
  margin: 0;
  opacity: 0;
}

.jp-continue {
  font-size: clamp(13px, 2vw, 18px);
  padding: 10px 28px;
}

/* ── Skip card (shared mini-card look) ── */
.skip-card {
  width: clamp(36px, 5vw, 56px);
  aspect-ratio: 5 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--pack-color);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: clamp(3px, 0.5vw, 5px) clamp(2px, 0.3vw, 4px) clamp(2px, 0.3vw, 4px);
  cursor: pointer;
  transform: rotate(-4deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
  overflow: hidden;
}
.skip-card:hover,
.skip-card:focus-visible {
  transform: scale(1.1) rotate(-4deg);
}
.skip-card:active {
  transform: scale(0.95) rotate(-4deg);
}
/* Menu flip card faces: disable skip-card hover/transition (parent handles scale) */
.menu-flip-card-face.skip-card {
  transition: none;
}
.menu-flip-card .menu-flip-card-front,
.menu-flip-card .menu-flip-card-front:hover,
.menu-flip-card .menu-flip-card-front:focus-visible,
.menu-flip-card .menu-flip-card-front:active {
  transform: rotate(-4deg);
}
.menu-flip-card .menu-flip-card-back,
.menu-flip-card .menu-flip-card-back:hover,
.menu-flip-card .menu-flip-card-back:focus-visible,
.menu-flip-card .menu-flip-card-back:active {
  transform: rotateY(180deg) rotate(-4deg);
}
.skip-card-label {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(7px, 1.1vw, 11px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.skip-card-icon {
  flex: 1 1 0;
  width: 80%;
  min-height: 0;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

/* ── Skip-track button (gameplay, absolute-positioned) ── */
.skip-track-btn {
  position: absolute;
  z-index: 80;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.skip-track-btn[hidden] {
  display: none;
}
.skip-track--purple .skip-card-icon {
  filter: brightness(0) invert(1);
}
.skip-track--settings.skip-card {
  background: #6633ff;
}
@keyframes skip-track-pop {
  0%   { transform: scale(1) rotate(-4deg); }
  40%  { transform: scale(1.3) rotate(-4deg); }
  100% { transform: scale(1) rotate(-4deg); }
}
.skip-track-btn--pop {
  animation: skip-track-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Mute button (global, absolute-positioned) ── */
.mute-btn {
  position: absolute;
  z-index: 80;
  opacity: 1;
  transform: rotate(3deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  touch-action: manipulation;
}
.mute-btn:hover,
.mute-btn:focus-visible {
  transform: scale(1.1) rotate(3deg);
}
.mute-btn:active {
  transform: scale(0.95) rotate(3deg);
}
.mute-btn[hidden] {
  display: none;
}
.mute-btn--active {
  opacity: 1;
  background: #4a7a3b !important;
}
@keyframes mute-btn-pop {
  0%   { transform: scale(1) rotate(3deg); }
  40%  { transform: scale(1.3) rotate(3deg); }
  100% { transform: scale(1) rotate(3deg); }
}
.mute-btn--pop {
  animation: mute-btn-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Paws button (global, absolute-positioned) ── */
.paws-btn {
  position: absolute;
  z-index: 80;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.paws-btn[hidden] {
  display: none;
}
.paws-btn--active {
  opacity: 0.55;
  background: #555 !important;
}
.paws-btn--pop {
  animation: skip-track-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Home screen: skip + mute side by side ── */
.home-audio-btns {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 12px auto 0;
}
.home-audio-btns .home-skip-btn {
  margin: 0;
}
.home-mute-btn {
  background: #d0d0d0;
  transform: rotate(3deg);
  margin-left: -8px;
}
.home-mute-btn.mute-btn--active {
  opacity: 1;
  background: #4a7a3b !important;
}

/* ── Camera-denied modal ── */

.camera-denied-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0);
  transition: background 0.3s ease-out;
  padding: 20px;
  pointer-events: none;
}
.camera-denied-overlay--visible {
  background: rgba(8, 10, 20, 0.94);
  pointer-events: auto;
}

.camera-denied-card {
  font-family: "Montserrat", sans-serif;
  background: #1e1a38;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: clamp(20px, 3vh, 36px) clamp(24px, 4vw, 48px);
  max-width: 480px;
  width: 100%;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease-out 0.05s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}
.camera-denied-overlay--visible .camera-denied-card {
  opacity: 1;
  transform: scale(1);
}

.camera-denied-card h2 {
  margin: 0 0 12px;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.camera-denied-card p {
  margin: 0 0 16px;
  font-size: clamp(13px, 2vw, 17px);
  color: var(--muted, #c8c4e0);
  line-height: 1.5;
}

.camera-denied-card ol {
  text-align: left;
  margin: 0 auto 20px;
  padding-left: 1.4em;
  max-width: 320px;
  font-size: clamp(13px, 2vw, 17px);
  line-height: 1.7;
  color: #fff;
}

.camera-denied-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.camera-denied-btns button {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 2vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.camera-denied-btns button:active {
  opacity: 0.7;
}
.camera-denied-btn-ok {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
}
.camera-denied-btn-retry {
  background: #fff;
  border: 2px solid #fff;
  color: var(--pack-color, #7c3aed);
}
.camera-denied-btn-retry--solo {
  flex: 1;
  max-width: 280px;
}
.camera-denied-blame {
  margin: 14px 0 0;
  font-size: clamp(11px, 1.6vw, 13px);
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* ── Collection Grid ("my Bods™") ── */

.collection-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: #222;
  overflow: hidden;
}

.collection-stats-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

.collection-back-btn {
  background: none;
  border: none;
  color: #6633cc;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.collection-back-btn:hover { opacity: 1; }

.collection-title-wrap {
  flex: 1;
  min-width: 0;
}

.collection-title {
  font-family: "Cabinet Grotesk", "Montserrat", sans-serif;
  font-size: clamp(13px, 2vw, 20px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  color: #6633cc;
}

.collection-suffix {
  color: #6633cc;
}

.collection-stat-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collection-keys {
  display: flex;
  align-items: center;
  gap: 2px;
}

.collection-keys .krab-key-icon {
  width: 20px;
  height: 20px;
}

.collection-stat {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.8;
  color: #6633cc;
}

.collection-progress-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0 16px 8px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.collection-progress-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.collection-zero-state {
  text-align: center;
  padding: 8px 16px;
  font-size: clamp(11px, 1.4vw, 14px);
  color: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* Grid viewport & virtual scroll */

.collection-grid-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 20px 16px;
  -webkit-overflow-scrolling: touch;
}

.collection-grid-canvas {
  position: relative;
  width: 100%;
}

.collection-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
}

.collection-cell {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  border: none;
  padding: 3px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  background: transparent;
  flex-shrink: 0;
}
.collection-cell:hover,
.collection-cell:focus-visible {
  transform: scale(1.25);
  z-index: 2;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

.collection-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* SVG owned: white shape on pack-coloured rounded square */
.collection-cell--owned {
  background-color: var(--cell-pack-color, #6633cc);
  position: relative;
}
.collection-cell--owned img {
  /* SVGs are white paths — visible directly on colored bg */
}
.collection-cell--owned::after {
  display: none;
}

/* Raster owned (e.g. Wee Bods webp): full colour, no bg */
.collection-cell--raster.collection-cell--owned {
  background: transparent;
}

/* Owned but not yet scored: faint colored square */
.collection-cell--unscored {
  background-color: var(--cell-pack-color, #6633cc);
  opacity: 0.2;
  position: relative;
}
.collection-cell--unscored img {
  /* White SVG, dimmed via cell opacity */
}
.collection-cell--unscored::after {
  display: none;
}
/* Raster unscored: desaturated + dimmed */
.collection-cell--raster.collection-cell--unscored {
  background: transparent;
  opacity: 1;
}
.collection-cell--raster.collection-cell--unscored img {
  opacity: 0.25;
  filter: grayscale(0.8);
}

.collection-cell--locked {
  background: transparent;
}
.collection-cell--locked img {
  opacity: 0.12;
  filter: grayscale(1) brightness(0);
}

/* Raster locked: greyed out preview */
.collection-cell--raster.collection-cell--locked img {
  opacity: 0.15;
  filter: grayscale(1);
}

/* Grid cell entrance animation (only during screen-enter, not during scroll) */
@keyframes cell-appear {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.screen-enter .collection-cell {
  animation: cell-appear 250ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Bottom sheet */

.collection-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.collection-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #f5f5f5;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 70%;
  overflow-y: auto;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}
.collection-sheet.is-open {
  transform: translateY(0);
}

.collection-sheet-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

/* Preview banner (pack-colour BG, above title) */
.collection-sheet-preview-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-radius: 16px 16px 0 0;
  gap: 12px;
}

.collection-sheet-preview-banner .ps-buy-card-row {
  display: flex;
  gap: 12px;
  margin: 0;
}

.collection-sheet-preview-banner .ps-buy-card-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px;
}

/* Locked pack header */
.collection-sheet-pack-header {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 24px 0;
}

.collection-sheet-pack-body {
  padding: 8px 24px 4px;
}

.collection-sheet-pack-body .pack-purchase-desc {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.3vw, 13px);
  color: #555;
  margin: 0 0 8px;
  line-height: 1.4;
}

.collection-sheet-pack-body .ps-buy-name-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.collection-sheet-pack-body .ps-buy-name-item {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #333;
  font-weight: 600;
}

.collection-sheet-pack-body .ps-buy-name-footnote {
  font-weight: 400;
  color: #888;
  font-size: 0.9em;
  margin-left: 4px;
}

.collection-sheet-pack-body .ps-buy-name-more {
  color: #888;
  font-style: italic;
}

.collection-sheet-pack-body .ps-buy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.collection-sheet-pack-body .ps-buy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #555;
  background: #e8e8e8;
  border-radius: 6px;
  padding: 4px 8px;
}

.collection-sheet-pack-body .ps-buy-badge-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.collection-sheet-pack-body .ps-buy-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.collection-sheet-pack-body .pack-purchase-meta {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(10px, 1.1vw, 11px);
  color: #999;
  margin: 0;
}

/* CTA inside sheet (both owned and locked) */
.collection-sheet-inner .collection-sheet-cta,
.collection-sheet > .collection-sheet-cta {
  margin: 8px 24px 16px;
}

.collection-sheet-cta--key {
  background: #fff;
  color: #16132a;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.collection-sheet-cta--key .krab-key-icon {
  width: 18px;
  height: 18px;
}

.collection-sheet-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-sheet-info {
  flex: 1;
  min-width: 0;
}

.collection-sheet-pack {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.collection-sheet-title {
  font-family: "Cabinet Grotesk", "Montserrat", sans-serif;
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-sheet-cta {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
.collection-sheet-cta:hover {
  transform: scale(1.04);
}
.collection-sheet-cta--play {
  background: #fff;
  color: var(--cta-color, #6633ff);
}
.collection-sheet-cta--buy {
  background: #fff;
  color: #16132a;
}

/* Carousel entry card */

.pack-card.collection-card {
  background: #fff;
  color: #6633cc;
  outline: 2px solid #6633cc;
  outline-offset: -2px;
}
.pack-card.collection-card:hover,
.pack-card.collection-card:focus-visible {
  outline: 2px solid #6633cc;
}
.pack-card.collection-card .pack-card-subline {
  color: color-mix(in oklab, #6633cc 70%, transparent);
}
.pack-card.collection-card .pack-name {
  color: #6633cc;
  text-shadow: none;
}

.collection-card .collection-card-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 10px 12px;
  flex: 1;
  align-content: center;
}

.collection-mini-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
}

.collection-mini-cell--owned {
  position: relative;
  background-color: var(--cell-pack-color, #6633cc);
}
.collection-mini-cell--owned img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.collection-mini-cell--owned::after {
  display: none;
}

/* Raster owned (webp/png): full colour, no bg */
.collection-mini-cell--raster.collection-mini-cell--owned {
  background: transparent;
}

.collection-mini-cell--locked img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.12;
  filter: grayscale(1) brightness(0);
}

.collection-card-stat {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════
   BODS WEEKS — streak card + overlay
   ══════════════════════════════════════════════════════════ */

/* ── Collapsed card (home header, alongside Skip & Mute) ── */
.weeks-card {
  transform: rotate(2deg);
}
.weeks-card:hover,
.weeks-card:focus-visible {
  transform: scale(1.1) rotate(2deg);
}
.weeks-card:active {
  transform: scale(0.95) rotate(2deg);
}
.weeks-card-count {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DSEG7", monospace;
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* ── Overlay (full-screen modal) ── */
.weeks-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 20, 0.55);
  padding: 14px;
}
.weeks-overlay[hidden] {
  display: none;
}
.weeks-overlay-content {
  width: min(380px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(15, 18, 34, 0.97);
  border: 1px solid #2e3456;
  border-radius: 14px;
  padding: 20px 18px 24px;
  position: relative;
}
.weeks-overlay-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #888;
  font-size: 1.4rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.weeks-overlay-close:hover {
  color: #fff;
}
.weeks-overlay-title {
  margin: 0 0 14px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.weeks-overlay-subtitle {
  margin: -8px 0 14px;
  color: #c8c4e0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* ── Card stack ── */
.weeks-stack {
  display: flex;
  flex-direction: column;
}
.weeks-stack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  margin-top: -5px;
  position: relative;
  transition: transform 0.15s ease;
}
.weeks-stack-card:first-child {
  margin-top: 0;
}
.weeks-stack-card:hover {
  transform: translateX(4px);
  filter: brightness(1.1);
}
.weeks-stack-card-week {
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 800;
  text-transform: uppercase;
}
.weeks-stack-card-pack {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 600;
  opacity: 0.8;
  text-align: right;
  text-transform: capitalize;
}

/* ── Golden year card ── */
.weeks-year-card {
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700) !important;
  border-color: #FFD700 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
  cursor: default;
}
.weeks-year-card:hover {
  transform: none;
  filter: none;
}
.weeks-year-card .weeks-stack-card-week {
  color: #1a0a00;
}
.weeks-year-card .weeks-stack-card-pack {
  color: #4a2800;
}

/* ── Empty state ── */
.weeks-empty-msg {
  color: #c8c4e0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 600;
  text-align: center;
  padding: 24px 8px 0;
  line-height: 1.4;
}
.weeks-auth-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 16px 8px 24px;
}
.weeks-auth-btn {
  padding: 10px 24px;
  border: 1px solid var(--line, #3a3460);
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.weeks-auth-signin {
  background: #2f8fff;
  color: #fff;
  border-color: #2f8fff;
}
.weeks-auth-signin:hover {
  background: #1a7ae6;
}
.weeks-auth-signup {
  background: #1a1a2e;
  color: #fff;
}
.weeks-auth-signup:hover {
  background: #252542;
}

/* ── Creator Landing ────────────────────────────────── */
.creator-landing {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  padding: 20px 24px;
  text-align: center;
}

.creator-landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.creator-landing-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 6vw, 64px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--creator-color, #e63946);
  line-height: 1.1;
}

.creator-landing-tagline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 2vw, 20px);
  color: #fff;
  opacity: 0.85;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.creator-landing-setup {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  align-items: flex-start;
}

.creator-landing-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}

.creator-landing-player-toggle {
  display: flex;
  gap: 6px;
}

.creator-landing-player-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.creator-landing-player-btn.is-active {
  background: var(--creator-color, #e63946);
  border-color: var(--creator-color, #e63946);
  transform: scale(1.08);
}

.creator-landing-play {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 48px;
  border-radius: 16px;
  border: none;
  background: var(--creator-color, #e63946);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.creator-landing-play:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.creator-landing-play:not(:disabled):hover {
  transform: scale(1.04);
}

.creator-landing-play.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.creator-landing-footer {
  margin-top: auto;
  opacity: 0.5;
}

.creator-landing-logo {
  display: flex;
  justify-content: center;
}

.creator-landing-logo-svg {
  height: 28px;
}