/* ==========================================================================
   LEVEL UP HOBBIES, sticker-pack edition
   cream-dominant with sparing yellow accent
   ========================================================================== */

:root {
  --ink:        #0A1F4D;
  --ink-2:      #061336;
  --ink-3:      #03081C;
  --yellow:     #FFC93C;
  --yellow-2:   #FFB800;
  --yellow-3:   #FFD86B;
  --red:        #E53935;
  /* Cream paper is the new dominant; warm but not yellow */
  --cream:      #F2EBD8;
  --cream-2:    #E8DFC5;
  --paper:      #FFF8E5;
  --paper-2:    #F5EFD9;

  --line:       #0A1F4D;

  /* Type */
  --ff:         "DM Sans", system-ui, sans-serif;
  --ff-dis:     "Bricolage Grotesque", system-ui, sans-serif;
  --ff-chunk:   "Bowlby One", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* 8px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --wrap:   1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --sec-pad: clamp(80px, 10vw, 128px);

  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   Shared - section heads, eyebrows
   ========================================================================== */

.head__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 7px 14px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
}
.head__eyebrow--gold {
  background: var(--yellow);
  color: var(--ink);
}

.head__h2 {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-size: clamp(40px, 5.8vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-5);
}
.head__h2 em {
  font-style: italic;
  /* underline via box-shadow won't break italic glyphs */
}
.head__h2--light { color: var(--yellow); }
.head__h2--light em { color: #fff; }
.head__h2--center { text-align: center; }

.head__sub {
  margin: 0;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
  font-weight: 500;
}
.head__sub--light { color: rgba(255,255,255,0.78); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 2.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  color: var(--ink);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  box-shadow: 0 4px 0 0 var(--ink);
}
.btn:hover { transform: translate(0, -2px); box-shadow: 0 6px 0 0 var(--ink); }
.btn:active { transform: translate(0, 2px); box-shadow: 0 2px 0 0 var(--ink); }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--ink-2); }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--yellow); }

.btn--inverted {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  box-shadow: 0 4px 0 0 rgba(255,201,60,0.4);
}
.btn--inverted:hover { background: var(--yellow-3); }

.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { width: 100%; }

/* ==========================================================================
   TICKER STRIP
   ========================================================================== */

.ticker {
  background: var(--ink);
  color: var(--yellow);
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
  padding: 11px 0;
}
.ticker__track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.ticker__star { color: var(--red); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 2.5px solid var(--ink);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 78px;
}
.topbar__logo img { height: 48px; width: auto; display: block; }
.topbar__nav {
  display: flex;
  gap: var(--s-7);
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.topbar__nav a {
  position: relative;
  padding: 6px 0;
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.topbar__nav a:hover::after { transform: scaleX(1); }

/* ----- Programs dropdown (desktop) ------------------------------------ */
.topbar__dropdown {
  position: relative;
}
.topbar__dropdown summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-user-select: none;
  user-select: none;
}
.topbar__dropdown summary::-webkit-details-marker { display: none; }
.topbar__dropdown summary::after {
  content: "";
  position: absolute;
  left: 0; right: 18px; bottom: 0;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.topbar__dropdown summary:hover::after,
.topbar__dropdown[open] summary::after,
.topbar__dropdown.is-section-current summary::after { transform: scaleX(1); }
.topbar__dropdown summary span::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.18s var(--ease);
  opacity: 0.7;
}
.topbar__dropdown[open] summary span::after { transform: rotate(180deg); opacity: 1; }

.topbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px;
  min-width: 220px;
  z-index: 100;
  box-shadow: 0 10px 28px rgba(10, 31, 77, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--cream);
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
.topbar__dropdown-menu a {
  padding: 10px 14px;
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 15px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.15s var(--ease);
}
.topbar__dropdown-menu a:hover,
.topbar__dropdown-menu a:focus-visible {
  background: var(--cream-2);
  outline: none;
}
.topbar__dropdown-menu a.is-current,
.topbar__nav .topbar__dropdown-menu a.is-current {
  background: var(--ink);
  color: var(--cream);
}
/* Reset the .topbar__nav a::after underline pseudo for dropdown items.
   Without this, the global nav-underline rule renders a 3px navy bar at
   the bottom of every dropdown item (invisible on hover but visible on
   the current item where transform: scaleX(1) is applied). */
.topbar__dropdown-menu a::after { display: none; }

/* ----- Mobile hamburger drawer ---------------------------------------- */
.topbar__mobile { display: none; position: relative; }
.topbar__mobile-trigger {
  cursor: pointer;
  list-style: none;
  padding: 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.topbar__mobile-trigger::-webkit-details-marker { display: none; }
.topbar__mobile-trigger:hover,
.topbar__mobile-trigger:focus-visible { background: var(--cream-2); outline: none; }
.topbar__mobile-icon--close { display: none; }
.topbar__mobile[open] .topbar__mobile-icon--open { display: none; }
.topbar__mobile[open] .topbar__mobile-icon--close { display: block; }

.topbar__mobile-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px;
  min-width: 240px;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(10, 31, 77, 0.22);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar__mobile-panel a {
  padding: 12px 14px;
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  border-bottom: 1px solid rgba(10, 31, 77, 0.06);
}
.topbar__mobile-panel a:last-child { border-bottom: 0; }
.topbar__mobile-panel a:hover,
.topbar__mobile-panel a:focus-visible {
  background: var(--cream-2);
  outline: none;
}
.topbar__mobile-panel a.is-current {
  background: var(--ink);
  color: var(--cream);
}
.topbar__mobile-cta {
  margin-top: 6px;
  background: var(--ink) !important;
  color: var(--cream) !important;
  text-align: center;
}
.topbar__mobile-cta:hover { background: var(--ink-2) !important; }

@media (max-width: 900px) {
  .topbar__nav { display: none; }
  .topbar__mobile { display: block; }
  .topbar__cta-text { display: none; }
  .btn { padding: 9px 14px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--cream);
  padding: clamp(72px, 9vw, 112px) 0 0;
  overflow: hidden;
}
/* halftone dot texture */
.hero__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 70%, transparent 100%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding-bottom: clamp(48px, 7vw, 80px);
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__copy { position: relative; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 16px 8px 8px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  margin: 0 0 var(--s-6);
  font-family: var(--ff);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hero__eyebrow-pill {
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

.hero__h1 {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__h1-row {
  display: block;
}
.hero__h1-row--big {
  font-size: 1.28em;
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.hero__h1 em {
  font-style: italic;
  color: var(--ink);
  position: relative;
  background: #fff;
  padding: 0 0.18em;
  margin: 0 0.04em;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink-2);
}

.hero__lede {
  margin: var(--s-6) 0 var(--s-6);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 50ch;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Right side stack - sticker composition with WIDE logo */
.hero__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: stretch;
}

.hero__logo-card {
  position: relative;
  background: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  box-shadow: 8px 8px 0 var(--ink-2);
  transform: rotate(-1.5deg);
  z-index: 2;
  /* Landscape aspect baked in via min/max height ratios */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__logo-card img {
  width: 100%;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.3));
}

.hero__info-strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-3);
  background: transparent;
  z-index: 1;
  margin-top: var(--s-3);
}
.hero__info-block {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: 4px 4px 0 var(--ink);
}
.hero__info-label {
  margin: 0 0 4px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.hero__info-val {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero__stamp {
  position: absolute;
  top: -22px;
  right: -10px;
  width: 110px;
  height: 110px;
  background: var(--red);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transform: rotate(11deg);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--ff-chunk);
}
.hero__stamp span:first-child {
  font-size: 12px;
  letter-spacing: 0.14em;
}
.hero__stamp-num {
  font-size: 30px;
  line-height: 1;
  margin-top: 4px;
}

.hero__sticker {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 10px 16px;
  z-index: 3;
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  font-family: var(--ff-dis);
}
.hero__sticker-1 {
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.hero__sticker-2 {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-top: 2px;
}

@media (max-width: 980px) {
  .hero__stack { max-width: 560px; margin: 0 auto; }
  .hero__logo-card { padding: clamp(20px, 4vw, 36px); }
}
@media (max-width: 480px) {
  .hero__info-strip { grid-template-columns: 1fr; }
}

/* Hero scrolling word marquee */
.hero__marquee {
  position: relative;
  background: var(--ink);
  border-top: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  padding: 16px 0;
  overflow: hidden;
}
.hero__marquee-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 32px);
  letter-spacing: -0.01em;
  color: var(--yellow);
  animation: marquee 40s linear infinite;
  width: max-content;
}
.hero__marquee-track > span:nth-child(even) { color: var(--red); font-style: normal; }

/* ==========================================================================
   SHOP / Trading cards
   ========================================================================== */

.shop {
  background: var(--ink);
  color: #fff;
  padding: var(--sec-pad) 0;
  position: relative;
  overflow: hidden;
}
.shop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image: radial-gradient(circle, var(--yellow) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  pointer-events: none;
}

.shop__head {
  position: relative;
  margin-bottom: var(--s-9);
  max-width: 760px;
}
.shop__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.shop__head--center .head__eyebrow { display: inline-flex; }
.shop .head__eyebrow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.shop .head__h2 { color: var(--yellow); }
.shop .head__h2 em { color: #fff; }
.shop .head__sub { color: rgba(255,255,255,0.75); }

.cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
/* r16: shop grid auto-adapts to item count via :has() so adding/removing tiles
   doesn't leave awkward orphan rows. Default is 4 cols; with exactly 3 items
   drop to 3 cols; with 2 items center a 2-col pair; with 1 item show a single
   card centered. 5/6/7 items keep the 4-col baseline (orphan row acceptable). */
.cards:has(> .tcard:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cards:has(> .tcard:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.cards:has(> .tcard:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.cards--tier-2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-6);
}
/* r16: tier 2 grid also auto-adapts */
.cards--tier-2:has(> .tcard:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.cards--tier-2:has(> .tcard:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1080px) { .cards--tier-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cards--tier-2 { grid-template-columns: 1fr; } }

.tcard {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 0;
  transform: rotate(var(--rot, 0));
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 6px 6px 0 var(--ink-3);
}
.tcard:hover {
  transform: rotate(0deg) translate(-2px, -4px);
  box-shadow: 10px 12px 0 var(--ink-3);
}
.tcard__inner {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.tcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  /* r16: default gradient backing for unknown or empty data-cat values.
     The specific data-cat selectors below override this. */
  background: linear-gradient(135deg, #1F2A3A 0%, #2A3A52 60%, #1A1F2C 100%);
}
.tcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.tcard:hover .tcard__media img { transform: scale(1.06); }

.tcard[data-cat="pokemon"]   .tcard__media { background: linear-gradient(135deg, #FFCC00 0%, #E63946 60%, #1D3557 100%); }
.tcard[data-cat="mtg"]       .tcard__media { background: linear-gradient(135deg, #1B0A2B 0%, #6B3FA0 60%, #FFC93C 100%); }
.tcard[data-cat="onepiece"]  .tcard__media { background: linear-gradient(135deg, #E63946 0%, #FFC93C 60%, #1D3557 100%); }
.tcard[data-cat="riftbound"] .tcard__media { background: linear-gradient(135deg, #1B0A2B 0%, #048A81 50%, #FFB800 100%); }
.tcard[data-cat="dnd"]       .tcard__media { background: linear-gradient(135deg, #C62828 0%, #6A1B1B 60%, #1A1A1A 100%); }
.tcard[data-cat="mini"]      .tcard__media { background: linear-gradient(135deg, #1F3A4F 0%, #048A81 60%, #FFB800 100%); }
.tcard[data-cat="ultrapro"]  .tcard__media { background: linear-gradient(135deg, #1D3557 0%, #457B9D 50%, #F1FAEE 100%); }

.tcard__chip {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 6px;
}

/* r16: placeholder shown in the media slot when admin hasn't uploaded an image
   yet. Only renders in admin mode. Public visitors never see this because the
   partial skips items without an image. */
.tcard__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.tcard__media-placeholder:hover { background: rgba(0, 0, 0, 0.55); }

/* r16: admin-only empty-state hint when the section has no items at all.
   Public visitors get nothing (the section just shows the header). */
.shop__items-empty {
  margin: var(--s-5) auto 0;
  padding: 24px;
  max-width: 520px;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

.tcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 8px 10px;
  color: var(--ink);
  flex: 1;
}
.tcard__num {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}
.tcard__name {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tcard__desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}
.tcard__desc strong { font-weight: 700; }

/* ==========================================================================
   REAPER
   ========================================================================== */

.reaper {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--sec-pad) 0;
}
.reaper__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px);
  background-size: 16px 16px;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
}
.reaper__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 980px) {
  .reaper__grid { grid-template-columns: 1fr; }
}
.reaper__copy { max-width: 600px; }
.reaper .head__h2 { color: var(--ink); }
.reaper .head__h2 em { color: var(--red); font-style: italic; }

.reaper__body {
  margin: var(--s-4) 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
}
.reaper__body strong { font-weight: 700; }

.reaper__links {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}
.extbtn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 14px 22px;
  background: var(--ink);
  color: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  min-width: 230px;
  box-shadow: 4px 4px 0 var(--ink-3);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.extbtn:hover { transform: translate(-1px, -2px); box-shadow: 6px 6px 0 var(--ink-3); }
.extbtn > span { display: flex; flex-direction: column; gap: 2px; }
.extbtn__top {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
}
.extbtn__bot {
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.extbtn svg { margin-left: auto; color: var(--yellow); }

/* Reaper patch, a giant sticker stamp */
.reaper__sticker {
  position: relative;
  display: flex;
  justify-content: center;
}
.reaper__patch {
  position: relative;
  background: var(--ink);
  color: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  transform: rotate(2.5deg);
  box-shadow: 10px 10px 0 var(--red);
  max-width: 380px;
  width: 100%;
}
.reaper__patch::before, .reaper__patch::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 3px solid var(--yellow);
}
.reaper__patch::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.reaper__patch::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.reaper__patch-top {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
}
.reaper__patch-num {
  margin: var(--s-3) 0 var(--s-1);
  font-family: var(--ff-chunk);
  font-weight: 400;
  font-size: clamp(64px, 7vw, 88px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: #fff;
}
.reaper__patch-num span { color: var(--yellow); margin-left: 4px; }
.reaper__patch-bot {
  margin: 0 0 var(--s-5);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.reaper__patch-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  padding-top: var(--s-4);
  border-top: 2px solid rgba(255,201,60,0.3);
}
.reaper__patch-list li {
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: #fff;
  padding-left: 22px;
  position: relative;
}
.reaper__patch-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-size: 14px;
}

.reaper__patch-foot {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 2px solid rgba(255,201,60,0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,201,60,0.85);
}
.reaper__patch-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ==========================================================================
   VISIT
   ========================================================================== */

.visit {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
}
.visit__head {
  margin-bottom: var(--s-9);
  text-align: center;
}
.visit__head .head__eyebrow { display: inline-flex; }
.visit__head .head__h2 em { color: var(--red); font-style: italic; }

.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 980px) {
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .ticket--phone { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .visit__grid { grid-template-columns: 1fr; }
  .ticket--phone { grid-column: auto; }
}

.ticket {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: 6px 6px 0 var(--ink);
}
.ticket--hours { background: var(--paper); }
.ticket--phone {
  background: var(--ink);
  color: #fff;
}

.ticket__label {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--s-3);
  border-bottom: 2px dashed var(--ink);
}
.ticket__label--light {
  color: var(--yellow);
  border-bottom-color: rgba(255,201,60,0.4);
}

.ticket__big {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ticket__sub {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
.ticket__note {
  margin: var(--s-2) 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  opacity: 0.7;
}
.ticket .btn { margin-top: auto; }

/* Hours */
.hrs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.hrs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(10,31,77,0.10);
  font-family: var(--ff-dis);
}
.hrs li:last-child { border-bottom: 0; }
.hrs li span {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.hrs li b {
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.hrs__off span { color: rgba(10,31,77,0.5); font-style: italic; font-weight: 500; }
.hrs__off b { color: var(--red); }

/* Phone */
.ticket__phone {
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ticket__phone-dot {
  width: 8px; height: 8px;
  background: var(--yellow);
  border-radius: 50%;
}
.ticket__phone em { color: var(--yellow); font-style: italic; }
.ticket__phone-num {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(255,201,60,0.7);
}

/* ==========================================================================
   FOLLOW
   ========================================================================== */

.follow {
  background: var(--ink);
  padding: var(--sec-pad) 0;
  position: relative;
  overflow: hidden;
}
.follow__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle, var(--yellow) 1.1px, transparent 1.5px);
  background-size: 18px 18px;
}
.follow .head__eyebrow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.follow .head__h2 { color: var(--yellow); }
.follow .head__h2 em { color: #fff; }
.follow .head__sub { color: rgba(255,255,255,0.7); }

.socials {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 880px) { .socials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .socials { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

.sbadge {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-4);
  row-gap: 4px;
  align-items: center;
  padding: var(--s-5);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  transform: rotate(var(--rot, 0));
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  box-shadow: 6px 6px 0 var(--ink-3);
}
.sbadge:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 10px 10px 0 var(--ink-3);
}
.sbadge > svg {
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  padding: 12px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 12px;
  box-sizing: border-box;
}
.sbadge__name {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.sbadge__handle {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.65);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  background: var(--cream);
  color: var(--ink);
  border-top: 2.5px solid var(--ink);
  padding: var(--s-9) 0 var(--s-5);
}
.foot__top {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  flex-wrap: wrap;
}
.foot__mark { height: 60px; width: auto; }
.foot__tag {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.015em;
  max-width: 32ch;
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: var(--s-7) 0;
  border-top: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
}
@media (max-width: 600px) { .foot__grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.foot__col { display: flex; flex-direction: column; gap: var(--s-2); }
.foot__col p {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot__col a {
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.foot__col a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.foot__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 12px;
  color: rgba(10,31,77,0.6);
}
.foot__base p { margin: 0; }

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

/* ==========================================================================
   BTN extension: outline-light for dark sections
   ========================================================================== */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 4px 0 0 rgba(255,255,255,0.18);
}
.btn--outline-light:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 4px 0 0 var(--yellow);
}

/* ==========================================================================
   EVENTS TEASER
   ========================================================================== */
.events {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: var(--sec-pad) 0;
  border-top: 2.5px solid var(--ink);
}
.events::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.3px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  pointer-events: none;
}
.events .head__h2 em { color: var(--red); font-style: italic; }

.days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
@media (max-width: 920px) { .days { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .days { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } }

.day-card {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transform: rotate(var(--rot, 0));
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 6px 6px 0 var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.day-card:hover {
  transform: rotate(0deg) translate(-2px, -4px);
  box-shadow: 10px 12px 0 var(--ink-3);
}
.day-card__abbr {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--ff-chunk);
  font-size: 38px;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--yellow);
  padding: 12px 14px 8px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 4px;
  transform: rotate(-2deg);
}
.day-card__game {
  margin: 4px 0 2px;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.day-card__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
}
.day-card__meta {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(10,31,77,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,31,77,0.55);
}
.day-card__meta span {
  color: rgba(10,31,77,0.55);
}
.day-card__meta b {
  font-family: var(--ff-dis);
  font-style: italic;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--red);
}

.events__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-6);
  border-top: 2px dashed rgba(10,31,77,0.2);
}
.events__foot p {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  max-width: 48ch;
}

/* ==========================================================================
   SELL / WE BUY COLLECTIONS
   ========================================================================== */
.sell {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: var(--sec-pad) 0;
  color: var(--cream);
}
.sell__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle, var(--yellow) 1.1px, transparent 1.5px);
  background-size: 20px 20px;
  mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
}
.sell__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 980px) {
  .sell__grid { grid-template-columns: 1fr; }
}
.sell__copy { max-width: 600px; }
.sell .head__h2--light { color: var(--cream); }
.sell .head__h2 em { color: var(--yellow); font-style: italic; }
.sell__body {
  margin: var(--s-4) 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(247,242,229,0.78);
  font-weight: 500;
}
.sell__body strong { color: #fff; font-weight: 700; }
.sell__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* 3-step list - right column */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.step {
  position: relative;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-7);
  transform: rotate(var(--rot, 0));
  box-shadow: 6px 6px 0 var(--ink-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.step:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 9px 10px 0 var(--ink-3);
}
.step__num {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 48px;
  height: 48px;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-chunk);
  font-size: 17px;
  letter-spacing: -0.01em;
  box-shadow: 3px 3px 0 var(--ink);
}
.step__title {
  margin: 0 0 6px;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.step__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
}
.step__desc strong { font-weight: 700; color: var(--ink); }

/* ==========================================================================
   SIGNUP (the email form on dark section)
   ========================================================================== */
.signup {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.signup__form {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  box-shadow: 8px 8px 0 var(--ink-3);
}
.signup__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
}
@media (max-width: 560px) {
  .signup__row { grid-template-columns: 1fr; }
}
.signup__form input[type="email"] {
  background: #fff;
  color: var(--ink);
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 17px;
  padding: 16px 20px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  outline: none;
  transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.signup__form input[type="email"]::placeholder {
  color: rgba(10,31,77,0.45);
  font-style: italic;
  font-weight: 500;
}
.signup__form input[type="email"]:focus {
  border-color: var(--yellow-2);
  box-shadow: 0 0 0 3px rgba(255,201,60,0.4);
}
.signup__form input[type="email"][aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,57,53,0.25);
}
.signup__note {
  margin: var(--s-3) 0 0;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(10,31,77,0.55);
  text-align: center;
}

.signup__success {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  box-shadow: 8px 8px 0 var(--yellow);
  text-align: center;
  color: var(--ink);
}
.signup__success-title {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.signup__success-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.signup__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--s-8) auto var(--s-5);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,201,60,0.65);
}
.signup__divider::before,
.signup__divider::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: rgba(255,201,60,0.3);
  margin: 0 var(--s-3);
}

/* ==========================================================================
   PAGE: EVENTS
   ========================================================================== */

/* Page game colors used in chips, kept independent so other pages can reuse */
:root {
  --game-pokemon:   var(--yellow);
  --game-mtg:       #F97316;
  --game-dnd:       var(--red);
  --game-onepiece:  #3B82F6;
  --game-lorcana:   #A855F7;
  --game-casual:    #10B981;
}

/* Current page state in nav */
.topbar__nav a.is-current {
  color: var(--ink);
}
.topbar__nav a.is-current::after {
  transform: scaleX(1);
}

/* Page crumb at top of hero */
.page-crumb {
  margin: 0 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,31,77,0.6);
}
.page-crumb a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}
.page-crumb a:hover { color: var(--yellow-2); border-color: var(--yellow-2); }
.page-crumb span:last-child {
  position: relative;
  padding-left: var(--s-3);
}
.page-crumb span:last-child::before {
  content: "/";
  position: absolute;
  left: 0;
  color: rgba(10,31,77,0.3);
}

/* Events hero */
.evhero {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 72px);
}
.evhero__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px);
  background-size: 16px 16px;
  mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
}
.evhero__wrap { position: relative; max-width: 900px; }
.evhero__h1 {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
}
.evhero__h1 em {
  font-style: italic;
  color: var(--red);
}
.evhero__lede {
  margin: 0 0 var(--s-7);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  max-width: 56ch;
}

/* Launch notice */
.launch-notice {
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  box-shadow: 6px 6px 0 var(--red);
  transform: rotate(-0.6deg);
  max-width: 680px;
}
.launch-notice__star {
  font-family: var(--ff-chunk);
  font-size: 36px;
  line-height: 1;
  color: var(--yellow);
  align-self: center;
}
.launch-notice__title {
  margin: 0 0 4px;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--yellow);
}
.launch-notice__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,242,229,0.78);
}
.launch-notice__sub a {
  color: var(--yellow);
  border-bottom: 1.5px solid rgba(255,201,60,0.4);
}
.launch-notice__sub a:hover { border-bottom-color: var(--yellow); }

/* Filter bar */
.filter-bar-section {
  background: var(--cream);
  border-top: 2.5px solid var(--ink);
  position: sticky;
  top: 78px;
  z-index: 40;
  padding: var(--s-4) 0;
  box-shadow: 0 2px 0 0 rgba(10,31,77,0.1);
}
.filter-bar {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.filter-tab {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  box-shadow: 3px 3px 0 var(--ink);
}
.filter-tab:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.filter-tab:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.filter-tab.is-active {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 3px 3px 0 var(--yellow);
}

/* Event sections */
.ev-section {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
}
.ev-section--dark {
  background: var(--ink);
  color: var(--cream);
}
.ev-section--dark .head__h2 { color: var(--cream); }
.ev-section__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image: radial-gradient(circle, var(--yellow) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.ev-section__head {
  margin-bottom: var(--s-7);
  position: relative;
}

/* Event card list */
.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  position: relative;
}

/* Event card */
.ev-card {
  display: grid;
  grid-template-columns: 120px 1fr 220px;
  gap: var(--s-5);
  align-items: stretch;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
  transform: rotate(var(--rot, 0));
  box-shadow: 5px 5px 0 var(--ink-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ev-card:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--ink-3);
}
.ev-card--special {
  background: #FFF4D6;
  border-color: var(--yellow-2);
}
.ev-card--special .ev-card__day {
  background: var(--yellow);
  color: var(--ink);
}
.ev-section--dark .ev-card {
  background: #fff;
}
.ev-section--dark .ev-card--special {
  background: #FFF4D6;
  border-color: var(--yellow-2);
  box-shadow: 6px 6px 0 var(--yellow);
}
.ev-section--dark .ev-card--special:hover {
  box-shadow: 9px 10px 0 var(--yellow);
}

@media (max-width: 820px) {
  .ev-card {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-5);
  }
}

/* Day badge */
.ev-card__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
}
.ev-card__day--varies {
  background: var(--red);
  color: #fff;
}
.ev-card__day--varies .ev-card__day-name,
.ev-card__day--varies .ev-card__day-freq { color: #fff; }
.ev-card__day-name {
  font-family: var(--ff-chunk);
  font-size: 22px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ev-card__day-freq {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,31,77,0.6);
}

@media (max-width: 820px) {
  .ev-card__day {
    align-self: flex-start;
    flex-direction: row;
    gap: var(--s-3);
    padding: 8px 14px;
  }
  .ev-card__day-name { font-size: 18px; }
  .ev-card__day-freq { margin-top: 0; }
}

/* Body */
.ev-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev-card__chip {
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
}
.ev-chip--pokemon  { background: var(--game-pokemon); }
.ev-chip--mtg      { background: var(--game-mtg);     color: #fff; border-color: var(--ink); }
.ev-chip--dnd      { background: var(--game-dnd);     color: #fff; }
.ev-chip--onepiece { background: var(--game-onepiece);color: #fff; }
.ev-chip--lorcana  { background: var(--game-lorcana); color: #fff; }
.ev-chip--casual   { background: var(--game-casual);  color: #fff; }

.ev-card__name {
  margin: 4px 0 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ev-card__format {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
}

/* Meta */
.ev-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 820px) {
  .ev-card__meta {
    align-items: flex-start;
    text-align: left;
    padding-top: var(--s-3);
    border-top: 2px dashed rgba(10,31,77,0.16);
  }
}
.ev-card__time {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ev-card__fee {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 3px 10px;
}
.ev-fee--free {
  background: var(--game-casual);
  color: #fff;
  border-color: var(--ink);
}
.ev-card__extras {
  margin: 4px 0 0;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.55);
}

.ev-empty {
  text-align: center;
  padding: var(--s-7);
  font-family: var(--ff-dis);
  font-style: italic;
  font-size: 18px;
  color: rgba(10,31,77,0.55);
}
.ev-section--dark .ev-empty { color: rgba(255,201,60,0.65); }

/* CTA strip at the end */
.ev-cta {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
}
.ev-cta__box {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: var(--s-8) var(--s-6);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 8px 8px 0 var(--yellow);
}
.ev-cta__box .head__eyebrow { display: inline-flex; }
.ev-cta__box .head__h2 { margin: var(--s-4) 0; }
.ev-cta__box .head__h2 em { color: var(--red); font-style: italic; }
.ev-cta__body {
  margin: 0 0 var(--s-6);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.ev-cta__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Hide tier-2 events when filter active */
.ev-card[hidden] { display: none; }

/* ==========================================================================
   PAGE: SUBSCRIPTIONS
   ========================================================================== */

/* Subhero (smaller than landing hero) */
.subhero {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 72px);
}
.subhero__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px);
  background-size: 16px 16px;
  mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
}
.subhero__wrap { position: relative; max-width: 880px; }
.subhero__h1 {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
}
.subhero__h1 em {
  font-style: italic;
  color: var(--red);
}
.subhero__lede {
  margin: 0 0 var(--s-6);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  max-width: 60ch;
}
.subhero__lede strong { font-weight: 700; }

/* Trust pill row */
.pill-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.pill-row__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.pill-row__dot {
  width: 8px; height: 8px;
  background: var(--game-casual);
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}

/* TIERS section */
.tiers-section {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  border-top: 2.5px solid var(--ink);
}
.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tiers { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

.tier {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transform: rotate(var(--rot, 0));
  box-shadow: 6px 6px 0 var(--ink-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tier:hover {
  transform: rotate(0deg) translate(-2px, -4px);
  box-shadow: 10px 12px 0 var(--ink-3);
}
.tier--popular {
  box-shadow: 6px 6px 0 var(--yellow);
}
.tier--popular:hover {
  box-shadow: 10px 12px 0 var(--yellow);
}

/* Tier flags (Most Popular, VIP) */
.tier__flag {
  position: absolute;
  top: -14px;
  right: var(--s-4);
  z-index: 2;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 var(--ink-3);
}
.tier__flag--popular {
  background: var(--yellow);
  color: var(--ink);
}
.tier__flag--vip {
  background: var(--red);
  color: #fff;
}

/* Tier head */
.tier__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 2.5px dashed var(--ink);
  align-items: flex-start;
}
.tier__name {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier__sub-tag {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.tier__tag {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(10,31,77,0.6);
  line-height: 1.4;
}
.tier__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tier__price-num {
  font-family: var(--ff-chunk);
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tier__price-per {
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 14px;
  font-style: italic;
  color: rgba(10,31,77,0.6);
}

/* Ball graphics */
.ball {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--ink-3);
  transform: rotate(-8deg);
  background: #fff;
}
/* r17: inline SVG from the icon catalog fills the ball. The legacy
   background gradients on .ball--XXX classes become fallback only,
   covered entirely by the SVG when one is present. */
.ball > svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* r17: admin-editable balls get a subtle hover cue */
.is-admin .ball[data-ball-editable="1"] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.is-admin .ball[data-ball-editable="1"]:hover {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 4px 5px 0 var(--ink-3), 0 0 0 3px rgba(255, 196, 0, 0.6);
}
.ball--pokeball  { background: linear-gradient(180deg, #E63946 0%, #E63946 48%, #fff 52%, #fff 100%); }
.ball--greatball { background: linear-gradient(180deg, #1D3557 0%, #1D3557 30%, #E63946 30%, #E63946 35%, #1D3557 35%, #1D3557 48%, #fff 52%, #fff 100%); }
.ball--ultraball { background: linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 48%, #fff 52%, #fff 100%); }
.ball--masterball { background: linear-gradient(180deg, #6B3FA0 0%, #6B3FA0 48%, #fff 52%, #fff 100%); }

.ball__band {
  position: absolute;
  top: calc(50% - 3px);
  left: 0; right: 0;
  height: 6px;
  background: var(--ink);
  z-index: 1;
}
.ball__center {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.ball__m {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-chunk);
  font-size: 18px;
  color: #FF69B4;
  z-index: 1;
  line-height: 1;
}
/* Ultraball gets a yellow stripe detail */
.ball--ultraball::before {
  content: "";
  position: absolute;
  top: 22%;
  left: 10%;
  right: 10%;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
  z-index: 1;
}

/* Welcome line */
.tier__welcome {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.tier__welcome-star {
  color: var(--yellow-2);
  font-family: var(--ff-chunk);
  font-size: 16px;
  flex-shrink: 0;
}

/* Features list */
.tier__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.tier__features li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(10,31,77,0.85);
}
.tier__features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 50%;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tier__features li:first-child:not(:only-child) {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10,31,77,0.55);
  padding-left: 22px;
}
.tier__features li:first-child:not(:only-child)::before {
  content: "+";
  background: var(--yellow);
  color: var(--ink);
}
.tier__features strong { font-weight: 700; color: var(--ink); }
.tier .btn { margin-top: auto; }

/* ==========================================================================
   POINTS section (navy)
   ========================================================================== */
.pts-section {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
  overflow: hidden;
}
.pts-section__halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image: radial-gradient(circle, var(--yellow) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
}
.pts-section__head {
  position: relative;
  max-width: 700px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.pts-section__head .head__eyebrow--gold { display: inline-flex; }
.pts-section__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,242,229,0.78);
  font-weight: 500;
}
.pts-section__sub strong { color: #fff; font-weight: 700; }

/* Points table */
.pts-table {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--yellow);
  margin-bottom: var(--s-9);
}
.pts-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: stretch;
  border-bottom: 2px solid rgba(10,31,77,0.16);
}
.pts-row:last-child { border-bottom: 0; }
.pts-row--head {
  /* r17: invert to yellow bg + dark text so the head reads clearly on
     both the cream table interior AND any dark page section bg the
     table sits on. The previous dark-navy head bg blended with the
     dark-navy table border (and any matching page section bg) into
     one navy mass, making the column headings hard to spot. */
  background: var(--yellow);
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
.pts-row--head > div {
  padding: 14px var(--s-5);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pts-row__tier {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pts-row__name {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pts-row__meta {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.6);
}
.pts-row__cell {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  border-left: 2px solid rgba(10,31,77,0.10);
}
.pts-row__cell strong {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pts-row__cell span {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.55);
}
.pts-row__cell--span {
  grid-column: 2 / span 2;
  flex-direction: row;
  align-items: center;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: var(--red);
}
.pts-row--featured {
  background: var(--yellow);
}
.pts-row--featured .pts-row__cell { border-left-color: rgba(10,31,77,0.20); }
.pts-row--master {
  background: var(--ink);
}
.pts-row--master .pts-row__name { color: var(--yellow); }
.pts-row--master .pts-row__meta { color: rgba(255,201,60,0.65); }
.pts-row--master .pts-row__cell--span {
  color: var(--yellow);
  border-left-color: rgba(255,201,60,0.25);
}
.pts-row--master { border-bottom: 0; }

@media (max-width: 720px) {
  .pts-row { grid-template-columns: 1fr 1fr; }
  .pts-row--head > div:first-child { grid-column: 1 / span 2; }
  .pts-row__tier { grid-column: 1 / span 2; border-bottom: 1px dashed rgba(10,31,77,0.18); }
  .pts-row__cell { border-left: 0; }
  .pts-row__cell:last-child { border-left: 2px solid rgba(10,31,77,0.10); }
  .pts-row__cell--span { grid-column: 1 / span 2; border-left: 0; }
}

/* Redemption ladder */
.pts-ladder__head {
  margin: 0 0 var(--s-5);
  text-align: center;
}
.pts-ladder__head .head__eyebrow--gold { display: inline-flex; }
.pts-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 920px) { .pts-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pts-ladder { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

.ladder-card {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  text-align: center;
  transform: rotate(var(--rot, 0));
  box-shadow: 5px 5px 0 var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ladder-card:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--ink-3);
}
.ladder-card--grail {
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--red);
}
.ladder-card--grail:hover {
  box-shadow: 8px 9px 0 var(--red);
}
.ladder-card__flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: var(--red);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink-3);
  white-space: nowrap;
}
.ladder-card__pts {
  margin: 0;
  font-family: var(--ff-chunk);
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.ladder-card__pts span {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10,31,77,0.55);
  font-style: normal;
}
.ladder-card--grail .ladder-card__pts span { color: rgba(10,31,77,0.65); }
.ladder-card__label {
  margin: 6px 0 4px;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--ink);
}
.ladder-card__value {
  margin: 0;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.55);
}

/* ==========================================================================
   OTHER TCGs (cream section with the soon chips)
   ========================================================================== */
.other-tcgs {
  background: var(--cream);
  padding: var(--sec-pad) 0;
}
.other-tcgs__box {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 72px);
  box-shadow: 8px 8px 0 var(--ink-3);
}
@media (max-width: 920px) { .other-tcgs__box { grid-template-columns: 1fr; } }
.other-tcgs__copy h2 { margin: var(--s-3) 0 var(--s-4); }
.other-tcgs__copy h2 em { color: var(--red); font-style: italic; }
.other-tcgs__h2 { font-size: clamp(34px, 4.4vw, 56px) !important; }
.other-tcgs__copy p {
  margin: 0 0 var(--s-5);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
}

.other-tcgs__chips {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}
.game-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 20px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  transform: rotate(var(--rot, 0));
  box-shadow: 4px 4px 0 var(--ink-3);
}
.game-chip--mtg      { background: var(--game-mtg); color: #fff; border-color: var(--ink); }
.game-chip--onepiece { background: var(--game-onepiece); color: #fff; }
.game-chip--lorcana  { background: var(--game-lorcana); color: #fff; }
.game-chip__soon {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   FINE PRINT
   ========================================================================== */
.fine-print {
  background: var(--cream);
  padding: 0 0 var(--sec-pad);
}
.fine-print__box {
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px);
}
.fine-print__title {
  margin: 0 0 var(--s-5);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.fine-print__col p {
  margin: 0 0 var(--s-4);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
}
.fine-print__col p:last-child { margin-bottom: 0; }
.fine-print__col strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   SUB CLOSE STRIP
   ========================================================================== */
.sub-close {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s-8) 0 var(--s-9);
  text-align: center;
}
.sub-close__strip {
  margin: 0 0 var(--s-6);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,201,60,0.75);
}
.sub-close__strip .dot { color: var(--red); margin: 0 8px; }
.sub-close__cta {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   PAGE: REWARDS
   ========================================================================== */

/* SIGNUP FORM */
.rwd-signup {
  background: var(--cream);
  padding: var(--sec-pad) 0 calc(var(--sec-pad) - var(--s-8));
  border-top: 2.5px solid var(--ink);
  position: relative;
}
.rwd-card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 8px 8px 0 var(--ink-3);
}
.rwd-card__head {
  text-align: center;
  margin-bottom: var(--s-6);
}
.rwd-card__head .head__eyebrow { display: inline-flex; }
.rwd-card__head .head__h2 { margin: var(--s-3) 0 var(--s-3); font-size: clamp(32px, 4vw, 48px); }
.rwd-card__head .head__h2 em { color: var(--red); font-style: italic; }
.rwd-card__sub {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  color: rgba(10,31,77,0.72);
}

.rwd-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.rwd-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 560px) {
  .rwd-form__row { grid-template-columns: 1fr; }
}
.rwd-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rwd-form__group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.rwd-form__req {
  color: var(--red);
  font-family: var(--ff-chunk);
  font-size: 14px;
  letter-spacing: 0;
}
.rwd-form__opt {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(10,31,77,0.45);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.rwd-form input[type="text"],
.rwd-form input[type="tel"],
.rwd-form input[type="email"],
.rwd-form input[type="date"] {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-dis);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 18px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  outline: none;
  transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ff-dis);
}
.rwd-form input::placeholder {
  color: rgba(10,31,77,0.42);
  font-weight: 500;
  font-style: italic;
}
.rwd-form input:focus {
  background: #fff;
  border-color: var(--yellow-2);
  box-shadow: 0 0 0 3px rgba(255,201,60,0.4);
}
.rwd-form input[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,57,53,0.25);
}

.rwd-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.rwd-form__consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex-shrink: 0;
  cursor: pointer;
}
.rwd-form__consent input[type="checkbox"][aria-invalid="true"] {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.rwd-form__consent label {
  margin: 0;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(10,31,77,0.78);
  line-height: 1.5;
  cursor: pointer;
}
.rwd-form__consent a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
  font-weight: 600;
}

.rwd-form__foot {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(10,31,77,0.55);
}

/* SUCCESS STATE */
.rwd-success {
  max-width: 600px;
  margin: 0 auto;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-9) var(--s-6);
  text-align: center;
  box-shadow: 8px 8px 0 var(--ink-3);
}
.rwd-success__check {
  display: inline-flex;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--s-4);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  transform: rotate(-4deg);
}
.rwd-success__title {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.rwd-success__body {
  margin: 0 auto var(--s-6);
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(10,31,77,0.82);
  font-weight: 500;
}
.rwd-success__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* HOW IT WORKS */
.rwd-how {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
}
.rwd-how__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s-8);
}
.rwd-how__head .head__eyebrow { display: inline-flex; }
.rwd-how__head .head__h2 em { color: var(--red); font-style: italic; }
.rwd-how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 880px) { .rwd-how__steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* EARN RATES */
.rwd-rates {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
}
.rwd-rates__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--s-7);
}
.rwd-rates__head .head__eyebrow--gold { display: inline-flex; }
.rwd-rates__head .head__h2 em { color: var(--yellow); font-style: italic; }
.rwd-rates__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  max-width: 820px;
  margin: 0 auto var(--s-7);
}
@media (max-width: 700px) { .rwd-rates__grid { grid-template-columns: 1fr; max-width: 420px; } }

.rate-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  transform: rotate(var(--rot, 0));
  box-shadow: 6px 6px 0 var(--yellow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.rate-card:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 9px 10px 0 var(--yellow);
}
.rate-card__num {
  margin: 0 0 4px;
  font-family: var(--ff-chunk);
  font-size: clamp(80px, 9vw, 124px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.rate-card__num-sub {
  font-family: var(--ff-dis);
  font-style: italic;
  font-weight: 700;
  font-size: 0.32em;
  margin-left: 6px;
  color: rgba(10,31,77,0.55);
  letter-spacing: 0;
}
.rate-card__label {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rate-card__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(10,31,77,0.62);
  font-weight: 500;
  max-width: 30ch;
  margin: 0 auto;
}

.rwd-rates__upgrade {
  text-align: center;
  margin: 0;
  font-family: var(--ff-dis);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  color: var(--cream);
}
.rwd-rates__upgrade strong { color: var(--yellow); }
.rwd-rates__upgrade a {
  color: var(--yellow);
  border-bottom: 2px solid rgba(255,201,60,0.4);
  margin-left: 12px;
  padding-bottom: 2px;
}
.rwd-rates__upgrade a:hover { border-bottom-color: var(--yellow); }

/* REDEMPTION LADDER SECTION (reuses ladder-card styles) */
.rwd-ladder-sec {
  background: var(--cream);
  padding: var(--sec-pad) 0;
}
.rwd-ladder-sec .ladder-card {
  background: #fff;
}

/* UPGRADE PITCH */
.rwd-upgrade {
  background: var(--cream);
  padding: 0 0 var(--sec-pad);
}
.rwd-upgrade__box {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 72px);
  text-align: center;
  box-shadow: 8px 8px 0 var(--yellow);
  overflow: hidden;
}
.rwd-upgrade__box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image: radial-gradient(circle, var(--yellow) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.rwd-upgrade__box > * { position: relative; }
.rwd-upgrade__box .head__eyebrow--gold { display: inline-flex; }
.rwd-upgrade__box .head__h2 { margin: var(--s-4) auto var(--s-5); max-width: 16ch; }
.rwd-upgrade__box .head__h2 em { color: var(--yellow); font-style: italic; }
.rwd-upgrade__body {
  margin: 0 auto var(--s-6);
  max-width: 60ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(247,242,229,0.85);
  font-weight: 500;
}
.rwd-upgrade__cta {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   NEWBIE / NEW TO THIS section (landing)
   ========================================================================== */
.newbie {
  background: var(--cream);
  padding: var(--sec-pad) 0;
  position: relative;
  overflow: hidden;
  border-top: 2.5px solid var(--ink);
}
.newbie::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.3px);
  background-size: 20px 20px;
  mask-image: linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
}
.newbie > * { position: relative; }
.newbie .head__h2 em { color: var(--red); font-style: italic; }

.newbie-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
@media (max-width: 720px) {
  .newbie-cards { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.newbie-card {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  padding-top: calc(var(--s-6) + 8px);
  transform: rotate(var(--rot, 0));
  box-shadow: 6px 6px 0 var(--ink-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newbie-card:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 10px 11px 0 var(--ink-3);
}
.newbie-card__tag {
  position: absolute;
  top: -14px;
  left: var(--s-5);
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--yellow);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink-3);
  transform: rotate(-3deg);
}
.newbie-card__title {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.newbie-card__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(10,31,77,0.78);
  font-weight: 500;
}

.newbie__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  text-align: center;
  font-family: var(--ff-dis);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink);
}
.newbie__foot a {
  background: var(--ink);
  color: var(--yellow);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  transition: background 0.18s var(--ease);
}
.newbie__foot a:hover { background: var(--ink-2); }

/* ==========================================================================
   PAGE: PRIVACY
   ========================================================================== */

.prv-tldr {
  background: var(--cream);
  padding: 0 0 var(--s-9);
  position: relative;
}
.prv-tldr__box {
  max-width: 820px;
  margin: 0 auto;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 8px 8px 0 var(--ink-3);
  transform: rotate(-0.4deg);
}
.prv-tldr__label {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
}
.prv-tldr__body {
  margin: 0;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Body section, layout */
.prv-body {
  background: var(--cream);
  padding: 0 0 var(--sec-pad);
  position: relative;
}
.prv-body__wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  .prv-body__wrap { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* TOC */
.prv-toc {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: 5px 5px 0 var(--ink-3);
}
@media (max-width: 980px) {
  .prv-toc { position: relative; top: 0; }
}
.prv-toc__label {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--s-3);
  border-bottom: 2px dashed var(--ink);
}
.prv-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.prv-toc li {
  counter-increment: toc;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
}
.prv-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  padding: 4px 0;
}
.prv-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(10,31,77,0.45);
  flex-shrink: 0;
}
.prv-toc a:hover { color: var(--yellow-2); }

/* Article */
.prv-article {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 64px);
  box-shadow: 8px 8px 0 var(--ink-3);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(10,31,77,0.82);
}
.prv-article h2 {
  margin: 0 0 var(--s-3);
  padding-top: var(--s-6);
  border-top: 2.5px dashed var(--ink);
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  scroll-margin-top: 100px;
}
.prv-article h2:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.prv-article p {
  margin: 0 0 var(--s-4);
}
.prv-article p:last-child { margin-bottom: 0; }
.prv-article ul {
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}
.prv-article ul li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 10px;
}
.prv-article ul li::before {
  content: "★";
  position: absolute;
  left: 0; top: 0;
  font-size: 11px;
  color: var(--yellow-2);
}
.prv-article a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
  font-weight: 600;
}
.prv-article a:hover {
  color: var(--yellow-2);
  border-bottom-color: var(--yellow-2);
}
.prv-article strong { color: var(--ink); font-weight: 700; }
.prv-article em { color: rgba(10,31,77,0.6); font-style: italic; }

.prv-contact {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-top: var(--s-3);
}
.prv-contact p { margin: 0 0 var(--s-2); font-size: 15px; }
.prv-contact p:last-of-type { margin-bottom: 0; }
.prv-contact__note {
  margin-top: var(--s-4) !important;
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(10,31,77,0.25);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: rgba(10,31,77,0.6);
  line-height: 1.55;
}

/* Closing */
.prv-close {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sec-pad) 0;
  text-align: center;
}
.prv-close__box {
  max-width: 720px;
  margin: 0 auto;
}
.prv-close__box .head__eyebrow--gold { display: inline-flex; }
.prv-close__box .head__h2 em { color: var(--yellow); font-style: italic; }
.prv-close__box p {
  margin: 0 auto var(--s-6);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,242,229,0.78);
  max-width: 54ch;
}
.prv-close__cta {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   REWARDS FAQ
   ========================================================================== */
.rwd-faq {
  background: var(--cream);
  padding: 0 0 var(--sec-pad);
}
.rwd-faq .rwd-how__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--s-7);
}
.rwd-faq .rwd-how__head .head__eyebrow { display: inline-flex; }
.rwd-faq .rwd-how__head .head__h2 em { color: var(--red); font-style: italic; }

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.faq-item {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink-3);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
  overflow: hidden;
}
.faq-item[open] {
  box-shadow: 5px 5px 0 var(--yellow);
}
.faq-item:hover {
  transform: translate(-1px, -2px);
  box-shadow: 7px 8px 0 var(--ink-3);
}
.faq-item[open]:hover {
  box-shadow: 7px 8px 0 var(--yellow);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: 1;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  position: relative;
  transition: background 0.18s var(--ease), transform 0.22s var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 12px; height: 2.5px; }
.faq-item__icon::after  { width: 2.5px; height: 12px; transition: transform 0.22s var(--ease); }
.faq-item[open] .faq-item__icon {
  background: var(--yellow);
  transform: rotate(180deg);
}
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-item__a {
  padding: 0 var(--s-5) var(--s-5);
  border-top: 2px dashed rgba(10,31,77,0.18);
  padding-top: var(--s-4);
  margin: 0 0 0 0;
}
.faq-item__a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(10,31,77,0.82);
  font-weight: 500;
}
.faq-item__a strong { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item__icon, .faq-item__icon::after { transition: none; }
}

/* TIER STRIP, the 4-pill mini overview on the rewards upgrade pitch */
.tier-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0 auto var(--s-6);
  max-width: 700px;
}
@media (max-width: 640px) { .tier-strip { grid-template-columns: repeat(2, 1fr); } }
.tier-strip__item {
  background: rgba(255,201,60,0.12);
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.tier-strip__item--vip {
  background: var(--red);
  border-color: var(--red);
}
.tier-strip__item--vip .tier-strip__name,
.tier-strip__item--vip .tier-strip__mult,
.tier-strip__item--vip .tier-strip__price { color: #fff; }
.tier-strip__name {
  font-family: var(--ff-dis);
  font-weight: 800;
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.015em;
  color: var(--yellow);
}
.tier-strip__mult {
  font-family: var(--ff-chunk);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.tier-strip__price {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,201,60,0.8);
}

/* ============================================================= */
/* CMS conversion additions: form security + a11y + thanks page  */
/* ============================================================= */

/* Honeypot: visually hide a decoy field so bots fill it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Inline server-side validation error message on forms. */
.form-error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 2px solid var(--red);
  background: #fee2e2;
  color: var(--ink);
  border-radius: 14px;
  font-family: var(--ff-dis);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
}

/* Skip-link: jumps focus to main content for keyboard users. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
}
.skip-link:focus { top: 16px; }

/* Outline button variant (used in form contexts and ghost CTAs). */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--yellow); }

/* Thanks page card. */
.thanks { padding: var(--s-10, 96px) 0 var(--s-8, 64px); background: var(--cream); }
.thanks__wrap { display: flex; justify-content: center; }
.thanks__card {
  max-width: 560px;
  padding: 48px 40px 40px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  text-align: center;
}
.thanks__check {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}
.thanks__title {
  margin: 0 0 14px;
  font-family: var(--ff-dis);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.thanks__body {
  margin: 0 0 28px;
  font-family: var(--ff-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.thanks__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Hide broken image fallbacks in tier card media slots (JS sets [hidden]
   on <img> when loading fails). Without this rule, the alt text would
   show as a giant block of text on top of the gradient. */
.tcard__media img[hidden] { display: none; }

/* Visually-hidden anchor target for skip-link / accessibility. Lives in
   the DOM so #main-content resolves cleanly without breaking layout. */
.anchor-target {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* luh-redirect (pokemon-rewards): inline styles ported from source pokemon-rewards.html */
.redirect-fallback {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  background: #F2EBD8;
}
.redir {
  max-width: 480px;
  text-align: center;
  padding: 40px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #0A1F4D;
}
.redir h1 {
  font-size: 28px;
  margin: 0 0 16px;
  font-weight: 800;
  font-style: italic;
}
.redir p { margin: 0 0 24px; line-height: 1.55; color: rgba(10,31,77,0.7); }
.redir a {
  display: inline-block;
  background: #0A1F4D;
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

/* ============================================================
   Subscription Tabs (r12 addition)

   The subscriptions page hosts multiple luh-sub-tiers section
   instances, one per game (Pokémon, MTG, One Piece, Riftbound,
   etc.). Without grouping the user has to scroll through every
   game's tiers in sequence. The tab switcher below lets the
   visitor pick a game and see only that game's tiers.

   Game detection is by context-clue from the ball_kind prefix
   on each tier card. See subscription-tabs JS for the matching
   rules. Adding a new game means adding new ball_kind values
   following the convention {game-prefix}-{tier-name}; the tab
   switcher will pick it up automatically.

   New ball kinds for MTG, One Piece, and Riftbound get their
   own gradient and band colors here. Previously these ball
   kinds had no CSS, so all the new cards were rendering with
   browser default styling (no fill).
   ============================================================ */

/* --- Hide pokeball-style overlays on game-specific variants ---
   The MTG / One Piece / Riftbound variants use a custom inline SVG icon
   for the entire visual. The .ball__band and .ball__center spans render
   the horizontal black stripe and white center button on Pokemon balls;
   suppressing them here keeps the game icons clean. */
.ball--mtg-common .ball__band, .ball--mtg-common .ball__center,
.ball--mtg-uncommon .ball__band, .ball--mtg-uncommon .ball__center,
.ball--mtg-rare .ball__band, .ball--mtg-rare .ball__center,
.ball--mtg-mythic .ball__band, .ball--mtg-mythic .ball__center,
.ball--op-cabin .ball__band, .ball--op-cabin .ball__center,
.ball--op-pirate .ball__band, .ball--op-pirate .ball__center,
.ball--rb-summoner .ball__band, .ball--rb-summoner .ball__center,
.ball--rb-challenger .ball__band, .ball--rb-challenger .ball__center,
.ball--rb-master .ball__band, .ball--rb-master .ball__center {
  display: none;
}

/* --- MTG: rarity gems (faceted diamond, color denotes rarity) ---
   Common = gray gem on slate, Uncommon = silver with sheen,
   Rare = gold gem with corner rays on navy, Mythic = orange-red gem
   with 8-ray sun-burst and warm glow on near-black. Each one mirrors
   how MTG itself encodes rarity through expansion-symbol color. */
.ball--mtg-common {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23B0B0B0'/><stop offset='1' stop-color='%23606060'/></linearGradient></defs><polygon points='40,18 60,40 40,62 20,40' fill='url(%23g)' stroke='%23222' stroke-width='3' stroke-linejoin='round'/><polygon points='40,18 60,40 40,40' fill='%23E0E0E0' opacity='0.4'/></svg>");
  background-color: #4A5060;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
}
.ball--mtg-uncommon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23F0F0F0'/><stop offset='0.5' stop-color='%23B8B8B8'/><stop offset='1' stop-color='%23808080'/></linearGradient></defs><polygon points='40,16 62,40 40,64 18,40' fill='url(%23g)' stroke='%23222' stroke-width='3' stroke-linejoin='round'/><polygon points='40,16 62,40 40,40' fill='%23ffffff' opacity='0.55'/></svg>");
  background-color: #3E4452;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
}
.ball--mtg-rare {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23FFE373'/><stop offset='0.55' stop-color='%23D4A02A'/><stop offset='1' stop-color='%237A5800'/></linearGradient></defs><g><line x1='40' y1='8' x2='40' y2='18' stroke='%23D4A02A' stroke-width='3' stroke-linecap='round'/><line x1='40' y1='62' x2='40' y2='72' stroke='%23D4A02A' stroke-width='3' stroke-linecap='round'/><line x1='8' y1='40' x2='18' y2='40' stroke='%23D4A02A' stroke-width='3' stroke-linecap='round'/><line x1='62' y1='40' x2='72' y2='40' stroke='%23D4A02A' stroke-width='3' stroke-linecap='round'/></g><polygon points='40,14 64,40 40,66 16,40' fill='url(%23g)' stroke='%23222' stroke-width='3' stroke-linejoin='round'/><polygon points='40,14 64,40 40,40' fill='%23FFF2C0' opacity='0.55'/></svg>");
  background-color: #2C3340;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
}
.ball--mtg-mythic {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><radialGradient id='g' cx='0.5' cy='0.5' r='0.55'><stop offset='0' stop-color='%23FFE0A0'/><stop offset='0.4' stop-color='%23FF6B1F'/><stop offset='0.9' stop-color='%23A8240A'/><stop offset='1' stop-color='%23501008'/></radialGradient><radialGradient id='glow' cx='0.5' cy='0.5' r='0.5'><stop offset='0' stop-color='%23FF8F3F' stop-opacity='0.5'/><stop offset='1' stop-color='%23FF8F3F' stop-opacity='0'/></radialGradient></defs><circle cx='40' cy='40' r='34' fill='url(%23glow)'/><g stroke='%23FF8F3F' stroke-width='2.5' stroke-linecap='round'><line x1='40' y1='6' x2='40' y2='16'/><line x1='40' y1='64' x2='40' y2='74'/><line x1='6' y1='40' x2='16' y2='40'/><line x1='64' y1='40' x2='74' y2='40'/><line x1='16' y1='16' x2='23' y2='23'/><line x1='57' y1='57' x2='64' y2='64'/><line x1='64' y1='16' x2='57' y2='23'/><line x1='16' y1='64' x2='23' y2='57'/></g><polygon points='40,15 63,40 40,65 17,40' fill='url(%23g)' stroke='%23200' stroke-width='3' stroke-linejoin='round'/><polygon points='40,15 63,40 40,40' fill='%23FFE0A0' opacity='0.65'/></svg>");
  background-color: #1A1418;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
}

/* --- One Piece: pirate medallions ---
   Cabin Boy gets Luffy's iconic straw hat (yellow crown + brim, red ribbon)
   on a sea-blue medallion. Pirate King gets the Jolly Roger skull-and-
   crossbones on the captain's deep-red flag. */
.ball--op-cabin {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='straw' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFE077'/><stop offset='0.6' stop-color='%23F0C040'/><stop offset='1' stop-color='%23B07820'/></linearGradient><linearGradient id='band' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23E63946'/><stop offset='1' stop-color='%23B91C1C'/></linearGradient></defs><ellipse cx='40' cy='54' rx='32' ry='8' fill='url(%23straw)' stroke='%23663300' stroke-width='2.5'/><path d='M 27 50 Q 26 30 40 26 Q 54 30 53 50 Z' fill='url(%23straw)' stroke='%23663300' stroke-width='2.5' stroke-linejoin='round'/><path d='M 27 48 Q 40 53 53 48 L 54 53 Q 40 58 26 53 Z' fill='url(%23band)' stroke='%23661111' stroke-width='1.5'/><ellipse cx='35' cy='32' rx='4' ry='2' fill='%23FFF1B0' opacity='0.55'/></svg>"),
    radial-gradient(circle at 30% 30%, #5BA0D8 0%, #1E5C99 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 92% 92%, cover;
}
.ball--op-pirate {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g stroke='%23000' stroke-width='2' stroke-linecap='round'><line x1='14' y1='56' x2='66' y2='66'/><line x1='14' y1='66' x2='66' y2='56'/><circle cx='14' cy='56' r='3.5' fill='%23F8F4E8'/><circle cx='66' cy='56' r='3.5' fill='%23F8F4E8'/><circle cx='14' cy='66' r='3.5' fill='%23F8F4E8'/><circle cx='66' cy='66' r='3.5' fill='%23F8F4E8'/></g><path d='M 40 14 C 25 14 18 26 18 38 C 18 46 22 50 26 52 L 28 56 L 32 56 L 32 60 L 36 60 L 36 56 L 44 56 L 44 60 L 48 60 L 48 56 L 52 56 L 54 52 C 58 50 62 46 62 38 C 62 26 55 14 40 14 Z' fill='%23F8F4E8' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/><ellipse cx='30' cy='34' rx='5.5' ry='6.5' fill='%23000'/><ellipse cx='50' cy='34' rx='5.5' ry='6.5' fill='%23000'/><path d='M 36 46 L 38 50 L 42 50 L 44 46 Z' fill='%23000'/></svg>"),
    radial-gradient(circle at 30% 30%, #C2403D 0%, #6B0F0F 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 92% 92%, cover;
}

/* --- Riftbound: League rank crests ---
   Summoner gets a hexagonal rune portal (the iconic LoL hex). Challenger
   gets crossed swords with gold crossguards, brown grips, and a center
   ruby. Master gets the gold crown with three rubies on a royal-purple
   field (matching the Master rank color in LoL). */
.ball--rb-summoner {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%2389CDEC' stroke-width='2.5' stroke-linejoin='round'><polygon points='40,14 60,26 60,50 40,62 20,50 20,26'/><polygon points='40,24 52,31 52,45 40,52 28,45 28,31'/></g><circle cx='40' cy='38' r='4' fill='%2389CDEC'/><circle cx='40' cy='38' r='8' fill='none' stroke='%2389CDEC' stroke-width='1.5' opacity='0.6'/></svg>"),
    radial-gradient(circle, #2C5F8D 0%, #143452 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 92% 92%, cover;
}
.ball--rb-challenger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='blade' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23F5F5F5'/><stop offset='0.5' stop-color='%23BFBFBF'/><stop offset='1' stop-color='%237A7A7A'/></linearGradient></defs><g transform='rotate(30 40 40)'><polygon points='38,8 42,8 42,52 40,56 38,52' fill='url(%23blade)' stroke='%23222' stroke-width='1.5' stroke-linejoin='round'/><rect x='30' y='50' width='20' height='4' fill='%23C9A33A' stroke='%23222' stroke-width='1.5'/><rect x='37' y='53' width='6' height='12' fill='%235B3414' stroke='%23222' stroke-width='1.5'/><circle cx='40' cy='68' r='3.5' fill='%23E0BB3F' stroke='%23222' stroke-width='1.5'/></g><g transform='rotate(-30 40 40)'><polygon points='38,8 42,8 42,52 40,56 38,52' fill='url(%23blade)' stroke='%23222' stroke-width='1.5' stroke-linejoin='round'/><rect x='30' y='50' width='20' height='4' fill='%23C9A33A' stroke='%23222' stroke-width='1.5'/><rect x='37' y='53' width='6' height='12' fill='%235B3414' stroke='%23222' stroke-width='1.5'/><circle cx='40' cy='68' r='3.5' fill='%23E0BB3F' stroke='%23222' stroke-width='1.5'/></g><circle cx='40' cy='40' r='4' fill='%23E03B3B' stroke='%23222' stroke-width='1.5'/></svg>"),
    radial-gradient(circle, #0A7B86 0%, #04363B 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 92% 92%, cover;
}
.ball--rb-master {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><linearGradient id='gld' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFE373'/><stop offset='1' stop-color='%23B58912'/></linearGradient></defs><path d='M 18 50 L 18 36 L 28 44 L 36 28 L 40 48 L 44 28 L 52 44 L 62 36 L 62 50 Z' fill='url(%23gld)' stroke='%23222' stroke-width='2.5' stroke-linejoin='round'/><rect x='18' y='50' width='44' height='6' fill='url(%23gld)' stroke='%23222' stroke-width='2.5'/><circle cx='28' cy='44' r='2.5' fill='%23E03B3B' stroke='%23222' stroke-width='1.5'/><circle cx='52' cy='44' r='2.5' fill='%23E03B3B' stroke='%23222' stroke-width='1.5'/><circle cx='40' cy='28' r='3' fill='%23E03B3B' stroke='%23222' stroke-width='1.5'/></svg>"),
    radial-gradient(circle, #6E3CB8 0%, #2A104A 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 92% 92%, cover;
}

/* Match the existing tier-card striping for new ball kinds (subtle, not
   loud) so each game has a faint color cue on the card itself, not just
   the ball. Existing .tier--pokeball, etc., already do this. */
.tier--mtg-common   { box-shadow: 0 10px 0 rgba(194, 194, 194, 0.18), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--mtg-uncommon { box-shadow: 0 10px 0 rgba(139, 152, 168, 0.20), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--mtg-rare     { box-shadow: 0 10px 0 rgba(212, 160, 42, 0.22), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--mtg-mythic   { box-shadow: 0 10px 0 rgba(201, 65, 11, 0.24), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--op-cabin     { box-shadow: 0 10px 0 rgba(30, 92, 153, 0.22), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--op-pirate    { box-shadow: 0 10px 0 rgba(178, 34, 34, 0.24), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--rb-summoner   { box-shadow: 0 10px 0 rgba(44, 95, 141, 0.22), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--rb-challenger { box-shadow: 0 10px 0 rgba(0, 109, 119, 0.22), 0 20px 50px rgba(20, 20, 30, 0.08); }
.tier--rb-master     { box-shadow: 0 10px 0 rgba(94, 42, 140, 0.24), 0 20px 50px rgba(20, 20, 30, 0.08); }

/* --- Tab nav for subscriptions page --- */
.luh-tabs-nav {
  max-width: 1200px;
  margin: -12px auto 32px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.luh-tabs-nav__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.luh-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  background: #fff;
  border: 2.5px solid #1A1A1A;
  border-radius: 999px;
  color: #1A1A1A;
  cursor: pointer;
  transform: rotate(-0.6deg);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 3px 3px 0 #1A1A1A;
  font-family: "Bricolage Grotesque", "Bowlby One", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.luh-tab:nth-child(even) { transform: rotate(0.6deg); }
.luh-tab:hover {
  transform: translate(-1px, -1px) rotate(-0.9deg);
  box-shadow: 5px 5px 0 #1A1A1A;
}
.luh-tab:nth-child(even):hover {
  transform: translate(-1px, -1px) rotate(0.9deg);
}
.luh-tab:focus-visible {
  outline: 3px solid #FBBF24;
  outline-offset: 3px;
}
.luh-tab.is-active {
  background: #1A1A1A;
  color: #fff;
  transform: rotate(0deg);
  box-shadow: 4px 4px 0 #FBBF24;
}
.luh-tab__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 2px solid currentColor;
  background: linear-gradient(180deg, var(--tab-dot-color, #E63946) 0%, var(--tab-dot-color, #E63946) 48%, #fff 52%, #fff 100%);
}
.luh-tab.is-active .luh-tab__dot {
  border-color: #fff;
}
/* r17: tab icon (replaces .luh-tab__dot for known games). Sized larger
   than the legacy dot so the inline SVG from the catalog is readable.
   Circular crop matches the .ball treatment on tier cards so the tab
   and the in-card ball visually rhyme. */
.luh-tab__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 2px solid currentColor;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.luh-tab__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.luh-tab.is-active .luh-tab__icon {
  border-color: #fff;
}
@media (max-width: 600px) {
  .luh-tab { font-size: 0.875rem; padding: 10px 16px; }
  .luh-tab__dot { width: 12px; height: 12px; }
  .luh-tab__icon { width: 22px; height: 22px; }
  .luh-tabs-nav__row { gap: 8px; }
}

/* Print: hide the tab nav and show every game's tiers stacked. Visitors
   who print the subscriptions page want all programs visible, not just
   whichever tab was active. Belt-and-suspenders the !important here
   since the JS sets display:none inline on hidden sections. */
@media print {
  .luh-tabs-nav { display: none !important; }
  .tiers-section[data-tab-group] { display: block !important; }
}

/* Reduced motion: the playful rotation and translate on hover is fun
   but a user who opts out of motion should not see it. Keep the visual
   styles, drop the transforms and animations. */
@media (prefers-reduced-motion: reduce) {
  .luh-tab,
  .luh-tab:nth-child(even),
  .luh-tab:hover,
  .luh-tab:nth-child(even):hover,
  .luh-tab.is-active {
    transform: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
}

/* In admin mode (is-admin body class), the tab switcher still works the
   same way: only the active tab's tiers section is visible. This lets
   the admin focus on editing one game's tiers at a time. The CMS chrome
   is unaffected. If hidden by tab filter, .tiers-section gets display:none.
   That's set inline by the JS, so no CSS override needed here. */

/* When JS is disabled or before init, all sections show stacked (the
   default browser rendering). That's a graceful fallback. */


/* =================================================================
   r17: LUH icon picker modal (admin-only)
   Triggered when admin clicks a tier ball. Shows a grouped grid of
   all catalog icons. The modal is high-z, fixed, dim-backed.
   ================================================================= */
.luh-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 10, 20, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.luh-picker-panel {
  background: #FFFFFF;
  border-radius: 16px;
  border: 3px solid var(--ink, #1D3557);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.35);
  width: min(900px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink, #1D3557);
}
.luh-picker-header {
  padding: 20px 24px 16px;
  border-bottom: 2px solid rgba(29, 53, 87, 0.12);
  position: relative;
}
.luh-picker-title {
  margin: 0 0 4px;
  font-family: var(--ff-dis, "Bricolage Grotesque", serif);
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  color: var(--ink, #1D3557);
}
.luh-picker-subtitle {
  margin: 0;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(29, 53, 87, 0.7);
}
.luh-picker-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink, #1D3557);
  background: var(--yellow, #FFC93C);
  border-radius: 8px;
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink, #1D3557);
  padding: 0;
}
.luh-picker-close:hover { background: #FFD96A; }

.luh-picker-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.luh-picker-group { margin-bottom: 24px; }
.luh-picker-group:last-child { margin-bottom: 0; }

.luh-picker-group-title {
  margin: 0 0 12px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 53, 87, 0.6);
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(29, 53, 87, 0.18);
}
.luh-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.luh-picker-tile {
  background: #F8FAFD;
  border: 2px solid rgba(29, 53, 87, 0.2);
  border-radius: 10px;
  padding: 12px 8px 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.luh-picker-tile:hover {
  background: #FFF8E1;
  border-color: var(--yellow, #FFC93C);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}
.luh-picker-tile.is-current {
  background: #FFF1B0;
  border-color: var(--ink, #1D3557);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.luh-picker-tile.is-saving {
  opacity: 0.55;
  pointer-events: none;
}
.luh-picker-tile-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--ink, #1D3557);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
  display: block;
}
.luh-picker-tile-preview > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.luh-picker-tile-label {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
  color: var(--ink, #1D3557);
}

.luh-picker-footer {
  padding: 14px 24px;
  border-top: 2px solid rgba(29, 53, 87, 0.12);
  background: #F8FAFD;
}
.luh-picker-advanced-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 12px;
  color: rgba(29, 53, 87, 0.7);
}
.luh-picker-advanced-input {
  flex: 1;
  padding: 6px 10px;
  border: 2px solid rgba(29, 53, 87, 0.2);
  border-radius: 6px;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ink, #1D3557);
}
.luh-picker-advanced-input:focus {
  outline: none;
  border-color: var(--yellow, #FFC93C);
}
.luh-picker-advanced-apply {
  padding: 6px 14px;
  background: var(--ink, #1D3557);
  color: #fff;
  border: 2px solid var(--ink, #1D3557);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.luh-picker-advanced-apply:hover {
  background: var(--yellow, #FFC93C);
  color: var(--ink, #1D3557);
}

@media (max-width: 600px) {
  .luh-picker-overlay { padding: 12px; }
  .luh-picker-panel { max-height: 92vh; }
  .luh-picker-header { padding: 16px 18px 12px; }
  .luh-picker-body { padding: 16px 18px; }
  .luh-picker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .luh-picker-footer { padding: 12px 18px; }
}