/* ================================================
   THE CREATORS PLACE BY YAMI CAM — DESIGN TOKENS
   ================================================
   Palette + style taken directly from the Yami Cam
   brand sheet: black/pink Y2K-CRT-pixel aesthetic.
   Display font: Jersey 25 (closest free web-font
   match to the brand's "Brick Sans" pixel-brick type).
   Accent font: Press Start 2P, used sparingly for
   tiny CRT-style tags. Body: Work Sans. Data/receipt
   accent: IBM Plex Mono (terminal/CRT feel).
================================================= */

:root{
  --pink: #EC008C;
  --pink-light: #FFA6CA;
  --off-white: #E4E2DD;
  --grey-light: #D8D8D8;
  --grey-dark: #242424;
  --black: #000000;
  --white: #FFFFFF;

  --bg: var(--black);
  --surface: #141414;
  --surface-2: var(--grey-dark);
  --line: #3A3A3A;
  --text: var(--off-white);
  --text-mute: #9B9691;

  --display: 'Jersey 25', sans-serif;
  --pixel: 'Press Start 2P', monospace;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1140px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{ overflow-x: hidden; max-width: 100vw; }

/* Guarantees the native `hidden` attribute always actually hides an
   element, even if a component's own class also sets `display`
   (e.g. .btn, .pb-stage). Without this, a class-level `display`
   rule can silently out-rank the browser's built-in [hidden]
   behaviour since they're equal specificity and the author
   stylesheet wins the tie — which is what caused several "hidden"
   elements (countdown overlay, shot dots, some buttons, photobooth
   stages) to show up even when they shouldn't have. */
[hidden]{ display: none !important; }

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

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0 0 0.4em;
  text-transform: uppercase;
}
h2{ font-size: clamp(2.4rem, 5.5vw, 3.8rem); color: var(--white); }
p{ margin: 0 0 1em; color: var(--text-mute); }
a{ color: inherit; text-decoration: none; }
.mono{ font-family: var(--mono); }

.eyebrow{
  color: var(--pink);
  font-family: var(--pixel);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1em;
  line-height: 1.6;
}

img{ max-width: 100%; display: block; }

/* ============ BUTTONS ============ */
.btn{
  display: inline-block;
  padding: 0.95em 1.8em;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover{ transform: translateY(-2px) scale(1.02); }
.btn-primary{
  background: var(--pink);
  color: var(--white);
  border-color: var(--white);
  box-shadow: 3px 3px 0 var(--grey-dark);
}
.btn-primary:hover{ background: #ff1fa0; }
.btn-ghost{ border-color: var(--pink); color: var(--white); }
.btn-ghost:hover{ background: var(--pink); color: var(--white); }

/* ============ HEADER / NAV ============ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--pink);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{ display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand-logo{ height: 42px; width: auto; }
.brand-text{
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--white);
  white-space: nowrap;
}
.brand-sub{
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0.04em;
}
.site-nav{
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-bottom: 2px solid var(--pink);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.site-nav.open{ max-height: 500px; overflow-y: auto; }
.site-nav a{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.2s ease, background 0.2s ease;
  width: 100%;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
}
.site-nav a:first-child{ border-top: none; }
.site-nav a:hover{ color: var(--pink); background: var(--surface-2); }
.nav-cta{
  color: var(--white) !important;
  background: var(--pink);
  border-radius: 3px;
  border: 2px solid var(--white) !important;
  margin: 1rem 1.5rem !important;
  width: auto !important;
  text-align: center;
}
.nav-cta:hover{ background: #ff1fa0 !important; color: var(--white) !important; }

.nav-toggle{
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span{ width: 22px; height: 2px; background: var(--pink); display: block; }

/* ============ HERO ============ */
.hero{
  position: relative;
  padding: 4.5rem 1.5rem 5rem;
  overflow: hidden;
  text-align: center;
}
.hero-dots{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(var(--grey-dark) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 80%);
}
.hero-star{
  position: absolute;
  color: var(--pink);
  opacity: 0.85;
  font-size: 2.4rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.hero-star-1{ top: 14%; left: 8%; transform: rotate(-12deg); font-size: 1.8rem; }
.hero-star-2{ bottom: 10%; right: 10%; transform: rotate(18deg); font-size: 2.6rem; color: var(--white); }

.hero-inner{ max-width: var(--max); margin: 0 auto; position: relative; }
.hero-logo{
  max-width: 340px;
  margin: 0 auto 1.5rem;
}
.hero-title{
  font-size: clamp(2.8rem, 9vw, 6rem);
  max-width: 16ch;
  margin: 0 auto 0.3em;
  color: var(--white);
}
.hero-sub{
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1.05rem;
}
.hero-actions{ display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; }

/* ============ FILM / TICKET STRIP DIVIDER ============ */
.filmstrip{
  height: 22px;
  background-color: var(--surface);
  border-top: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  position: relative;
  overflow: hidden;
}
.filmstrip-track .sprockets{ display: none; }
.filmstrip::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--black) 4px, transparent 4.5px);
  background-size: 26px 22px;
  background-position: center;
}

/* ============ SECTION SCAFFOLDING ============ */
section{ padding: 5rem 1.5rem; max-width: var(--max); margin: 0 auto; }
.section-head{ max-width: 62ch; margin-bottom: 2.8rem; }
.section-lead{ font-size: 1.02rem; }
.fun-gift-note{
  margin-top: 0.8rem;
  padding: 0.7em 1em;
  background: var(--surface);
  border-left: 3px solid var(--pink);
  border-radius: 4px;
  color: var(--pink-light);
  font-size: 0.85rem;
  font-style: italic;
}

/* ============ CONTACT SHEET / OFFER GRID ============ */
/* ============ HOME SCREEN (app-style quick menu) ============ */
.home-screen-section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
}
.home-screen-section .section-head{ margin: 0 auto 2rem; }
.phone-frame{
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 3px solid var(--line);
  border-radius: 32px;
  padding: 0.5rem 0.5rem 1.5rem;
  box-shadow: 0 0 0 6px var(--black), 0 20px 50px rgba(236,0,140,0.15);
}
.phone-statusbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--pink-light);
  text-transform: uppercase;
}
.phone-statusbar-icons{ letter-spacing: 0.1em; color: var(--text-mute); }

.app-icon-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem 0.6rem;
  padding: 0.8rem 1rem 0.4rem;
}
.app-icon{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.app-icon-glyph{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(150deg, var(--pink), #ff5cb8);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 4px 14px rgba(236,0,140,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.app-icon:hover .app-icon-glyph,
.app-icon:focus-visible .app-icon-glyph{
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 18px rgba(236,0,140,0.9),
    0 8px 20px rgba(236,0,140,0.6);
}
.app-icon-cta .app-icon-glyph{
  background: linear-gradient(150deg, #FFD700, var(--pink));
}
.app-icon-label{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  line-height: 1.25;
  transition: color 0.18s ease;
}
.app-icon:hover .app-icon-label{ color: var(--pink-light); }

@media (max-width: 480px){
  .app-icon-grid{ grid-template-columns: repeat(4, 1fr); gap: 1rem 0.4rem; }
  .app-icon-glyph{ width: 48px; height: 48px; font-size: 1.35rem; border-radius: 14px; }
  .phone-frame{ border-radius: 24px; }
}

.offer-sheet{ background: var(--bg); }
.contact-sheet{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--pink);
  border: 2px solid var(--pink);
}
.contact-sheet-two{
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
}

.shop-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 800px;
  margin: 2rem auto 0;
}
.shop-badge{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.shop-badge:hover{ border-color: var(--pink); transform: translateY(-2px); }
.shop-badge-icon{ font-size: 1.1rem; }
.shop-badge-text{
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  white-space: nowrap;
}

@media (max-width: 540px){
  .shop-badges{ flex-direction: column; align-items: stretch; }
  .shop-badge{ justify-content: center; }
}

.frame{
  background: var(--surface);
  padding: 1.8rem 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 220px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.frame:hover{ background: var(--surface-2); transform: translateY(-3px); }
.frame-number{
  color: var(--pink-light);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.frame-label{
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--white);
}
.frame-desc{ color: var(--text-mute); font-size: 0.9rem; margin: 0; }
.frame-soon{
  position: absolute;
  top: 1rem; right: 1rem;
  color: var(--pink-light);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Extra-enticing service cards */
.frame-intrigue{ position: relative; overflow: hidden; }
.frame-icon{
  font-size: 1.8rem;
  margin-bottom: 0.2rem;
  filter: drop-shadow(0 0 6px rgba(236,0,140,0.4));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.frame-intrigue:hover .frame-icon{
  transform: scale(1.15) rotate(-4deg);
  filter: drop-shadow(0 0 12px rgba(236,0,140,0.8));
}
.frame-hint{
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--pink);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.frame-intrigue:hover .frame-hint{
  opacity: 1;
  transform: translateX(4px);
  color: var(--pink-light);
}
.frame-intrigue:hover{
  box-shadow:
    inset 0 0 0 1px rgba(236,0,140,0.6),
    0 0 20px rgba(236,0,140,0.25);
}

@media (max-width: 860px){
  .contact-sheet{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .contact-sheet{ grid-template-columns: 1fr; }
}

/* ============ SPLIT SECTIONS (Spaces / Studio) ============ */
.split-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split-section.reverse .split-media{ order: 2; }
.split-section.reverse .split-copy{ order: 1; }
.media-frame{
  aspect-ratio: 4/5;
  background: var(--surface);
  border: 2px solid var(--pink);
  position: relative;
  background-image:
    linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 60%),
    radial-gradient(var(--grey-dark) 1.5px, transparent 1.5px);
  background-size: auto, 14px 14px;
  overflow: hidden;
}
.media-frame-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame-tag{
  position: absolute; bottom: 1rem; left: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--pink-light);
  letter-spacing: 0.1em;
  background: var(--black);
  padding: 0.3em 0.6em;
  border: 1px solid var(--pink);
}
.spec-list{
  list-style: none;
  padding: 0; margin: 1.5rem 0 2rem;
  border-top: 1px solid var(--line);
}
.spec-list li{
  display: flex; justify-content: space-between;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  font-family: var(--mono);
  gap: 1rem;
}
.spec-list li span:first-child{ color: var(--text-mute); flex-shrink: 0; }
.spec-list li span:last-child{ color: var(--white); text-align: right; }

@media (max-width: 780px){
  .split-section{ grid-template-columns: 1fr; }
  .split-section.reverse .split-media{ order: 1; }
  .split-section.reverse .split-copy{ order: 2; }
}

/* ============ POLICIES PAGE ============ */
.policies-section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.policy-block{
  border-bottom: 1px solid var(--line);
}
.policy-block:first-child{ border-top: 2px solid var(--pink); }
.policy-summary{
  cursor: pointer;
  padding: 1.4rem 0.5rem;
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  transition: color 0.2s ease;
}
.policy-summary::-webkit-details-marker{ display: none; }
.policy-summary:hover{ color: var(--pink-light); }
.policy-summary .mono{
  color: var(--pink);
  font-size: 0.85rem;
}
.policy-summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--pink);
}
.policy-block[open] .policy-summary::after{ content: "−"; }
.policy-body{
  padding: 0 0.5rem 2rem;
  max-width: 68ch;
}
.policy-body h3{
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--pink-light);
  margin: 1.4rem 0 0.4rem;
}
.policy-body p{
  color: var(--text-mute);
  font-size: 0.92rem;
  line-height: 1.6;
}
.policy-body a{ color: var(--pink); }
.policies-disclaimer{
  margin-top: 2rem;
  color: var(--text-mute);
  font-size: 0.72rem;
  text-align: center;
}

/* ============ PRICING PAGE ============ */
.pricing-hero{
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}
.pricing-title{ font-size: clamp(2.4rem, 7vw, 4.5rem); margin: 0.2em 0; }
.pricing-lead{ max-width: 50ch; margin: 0 auto; font-size: 1.02rem; }

.price-table-section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.price-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
.price-card{
  background: var(--surface);
  border: 2px solid var(--pink);
  padding: 1.8rem 1.6rem;
}
.price-card-title{
  font-family: var(--display);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.3em;
}
.price-card-range{
  color: var(--pink-light);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
.price-card-list{
  list-style: none;
  margin: 0; padding: 0;
}
.price-card-list li{
  color: var(--text);
  font-size: 0.92rem;
  padding: 0.6em 0;
  border-top: 1px solid var(--line);
}
.price-card-list li:first-child{ border-top: none; }
.pricing-note{
  max-width: 62ch;
  color: var(--text-mute);
  font-size: 0.92rem;
}
.pricing-note strong{ color: var(--pink-light); }

.pricing-cta{
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  text-align: center;
}
.pricing-cta .hero-actions{ justify-content: center; margin-top: 1.5rem; }

@media (max-width: 620px){
  .price-cards{ grid-template-columns: 1fr; }
}

/* ============ LOCKED / COMING SOON STATES ============ */
.nav-locked{
  opacity: 0.5;
  pointer-events: none;
}
.nav-locked .mono{ color: var(--pink-light); }

.frame-locked{
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.6);
  pointer-events: none;
}

.section-locked{ opacity: 0.9; }
.locked-panel{
  border: 2px dashed var(--line);
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--surface);
}
.locked-badge{
  display: inline-block;
  color: var(--pink-light);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.5em 1em;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.locked-text{ color: var(--text-mute); margin: 0; }

/* ============ SHOP ============ */
.gear-preorder-note{
  background: var(--surface);
  border: 2px dashed var(--pink);
  padding: 1.6rem 1.8rem;
  margin-bottom: 2rem;
}
.gear-preorder-note-title{
  color: var(--pink-light);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.7em;
}
.gear-preorder-note p{
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.gear-shop-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.gear-product-card{
  background: var(--surface);
  border: 2px solid var(--line);
  transition: border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.gear-product-card:hover{ border-color: var(--pink); }
.gear-product-image{
  aspect-ratio: 1;
  background: #ffffff;
  overflow: hidden;
}
.gear-product-image img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: 0.6rem;
  box-sizing: border-box;
}
.gear-product-info{ padding: 0.9rem 1rem 1.1rem; }
.gear-product-name{ font-size: 0.86rem; color: var(--white); margin: 0 0 0.4em; line-height: 1.3; }
.gear-product-price{ color: var(--pink-light); font-size: 0.85rem; margin: 0 0 0.7em; font-family: var(--mono); }
.gear-preorder-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pink);
  background: transparent;
  border: 1px solid var(--pink);
  padding: 0.5em 0.8em;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gear-preorder-tag:hover{
  background: var(--pink);
  color: var(--white);
}
.gear-live-tag{
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4DFF88;
  margin-bottom: 0.5em;
}
.gear-buy-button{
  min-height: 44px;
}
.gear-product-image-btn{
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.gear-product-name-btn{ cursor: pointer; }
.gear-product-name-btn:hover{ color: var(--pink); }
.gear-view-details{
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.5em 0;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}
.gear-view-details:hover{ color: var(--pink); }

/* ============ PRODUCT QUICK VIEW MODAL ============ */
.product-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.product-modal[hidden]{ display: none; }
.product-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}
.product-modal-panel{
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 2px solid var(--pink);
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.product-modal-close{
  position: absolute;
  top: 0.6rem; right: 0.8rem;
  z-index: 2;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--pink);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.product-modal-gallery{
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.product-modal-image{
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}
.product-modal-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem;
  border-top: 1px solid #eee;
}
.product-modal-arrow{
  background: none;
  border: 1px solid var(--pink);
  color: var(--pink);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
}
.product-modal-counter, #productModalCounter{ font-size: 0.75rem; color: #666; }
.product-modal-info{
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}
.product-modal-name{
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.3em;
}
.product-modal-price{
  color: var(--pink-light);
  font-size: 1.1rem;
  margin: 0 0 1rem;
}
.product-modal-description{
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}
#productModalAction{ margin-top: auto; }

@media (max-width: 700px){
  .product-modal-panel{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .gear-shop-grid{ grid-template-columns: repeat(2, 1fr); }
}

.shop-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.shopify-embed{
  min-height: 40px;
}
.product-card{
  background: var(--surface);
  border: 2px solid var(--line);
  padding: 1rem;
  transition: border-color 0.2s ease;
}
.product-card:hover{ border-color: var(--pink); }
.product-image{
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--surface-2), var(--black));
  margin-bottom: 0.9rem;
}
.product-name{ font-size: 0.92rem; color: var(--white); margin-bottom: 0.3em; }
.product-price{ color: var(--pink-light); font-size: 0.85rem; margin: 0; }
.shop-note{ color: var(--text-mute); font-size: 0.8rem; margin-top: 1.6rem; font-family: var(--mono); }

/* ============ GIVEAWAY ============ */
.giveaway-banner{
  max-width: 640px;
  margin: 2rem auto 2.5rem;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 2px solid var(--pink);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(236,0,140,0.2);
  text-align: center;
}
.giveaway-banner-title{
  color: var(--pink);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
.giveaway-banner-sub{
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0.8rem 0;
}
.giveaway-steps{
  text-align: left;
  max-width: 420px;
  margin: 1rem auto;
  padding-left: 1.4rem;
  color: var(--white);
  font-size: 0.92rem;
  line-height: 2;
}
.giveaway-steps strong{ color: var(--pink-light); }

.giveaway-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 640px;
  margin: 0 auto;
}
.giveaway-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.giveaway-card:hover{ border-color: var(--pink); transform: translateY(-3px); }
.giveaway-photo{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.9rem;
  background: var(--surface-2);
}
.giveaway-placeholder{
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin-bottom: 0.9rem;
}
.giveaway-placeholder-icon{ font-size: 2.4rem; opacity: 0.5; }
.giveaway-placeholder-tag{ color: var(--text-mute); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; }
.giveaway-card-name{
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.3rem;
}
.giveaway-card-value{
  color: var(--pink-light);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.giveaway-card-desc{
  color: var(--text-mute);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 540px){
  .giveaway-grid{ grid-template-columns: 1fr; }
  .giveaway-banner{ padding: 1.3rem 1.2rem; }
}

@media (max-width: 780px){
  .shop-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .shop-grid{ grid-template-columns: 1fr; }
  .gear-shop-grid{ grid-template-columns: 1fr; }
}

/* ============ CAFE ============ */
.cafe-section{ text-align: left; }
.cafe-section .section-head{ margin-bottom: 0; }

/* ============ EVENTS / RECEIPT LIST ============ */
.receipt-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}
.receipt{
  background: var(--off-white);
  color: var(--black);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 1.4rem 1.3rem;
  position: relative;
  box-shadow: 4px 4px 0 var(--pink);
  transform: rotate(var(--tilt, 0deg));
  border: 1px solid var(--black);
}
.receipt::after{
  content:"";
  position: absolute; left:0; right:0; bottom: -1px; height: 10px;
  background: repeating-linear-gradient(115deg, var(--off-white) 0 8px, transparent 8px 16px);
}
.receipt-line{ display:flex; justify-content: space-between; padding: 0.15em 0; }
.receipt-divider{ border-top: 1px dashed var(--black); opacity: 0.35; margin: 0.6em 0; }
.receipt-title{ font-weight:600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5em; color: var(--pink); }
.receipt-foot{ margin-top: 0.6em; opacity: 0.7; font-size: 0.75rem; }
.receipt-link{
  display: inline-block;
  margin-top: 0.6em;
  color: var(--pink);
  font-size: 0.72rem;
  text-decoration: underline;
}

/* ============ ABOUT ============ */
.about-section{ max-width: 68ch; }
.about-section h2{ max-width: 18ch; }
.about-media{ margin: 2rem 0; }
.about-media img{
  width: 100%;
  max-width: 420px;
  border: 2px solid var(--pink);
}
.about-media-caption{
  color: var(--pink-light);
  font-size: 0.78rem;
  margin: 0.6em 0 0;
}
.about-team{
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}
.about-team-slot{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.about-team-photo{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px dashed var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}
.about-team-photo span{ color: var(--text-mute); font-size: 0.68rem; }
.about-team-photo-filled{ border-style: solid; border-color: var(--pink); padding: 0; overflow: hidden; }
.about-team-photo-filled img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.about-team-name{
  color: var(--pink-light);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.about-team-ig{
  color: var(--text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.about-team-ig:hover{ color: var(--pink); }

/* ============ GALLERY ============ */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.gallery-item{
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.gallery-item img, .gallery-item video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-empty{
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-mute);
  border: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 0.85rem;
}
@media (max-width: 780px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

.socials-row{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============ EVENT DOWNLOADS ============ */
.gallery-jump-link{
  display: inline-block;
  margin-top: 1rem;
  color: var(--pink-light);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  padding: 0.6em 1em;
  border: 1px dashed var(--pink);
  border-radius: 3px;
  transition: background 0.2s ease, color 0.2s ease;
}
.gallery-jump-link:hover{ background: var(--surface); color: var(--pink); }

.asr-badge{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.5em 1em 0.5em 0.5em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
  max-width: fit-content;
}
.asr-badge:hover{ border-color: var(--pink); transform: translateY(-2px); }
.asr-badge-photo{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--pink), #ff5cb8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--white);
  flex-shrink: 0;
  overflow: hidden;
}
.asr-badge-photo img{ width: 100%; height: 100%; object-fit: cover; }
.asr-badge-text{
  font-size: 0.78rem;
  color: var(--text-mute);
}
.asr-badge-text strong{ color: var(--white); }

.event-downloads{
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 2px solid var(--pink);
}
.event-downloads-head{ max-width: 62ch; margin-bottom: 2rem; }
.event-downloads-title{
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 0.4em;
}
.event-downloads-list{ display: flex; flex-direction: column; gap: 0.8rem; }

.folder-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.folder-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: 1.8rem 1rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.18s ease;
}
.folder-card:hover, .folder-card:focus-visible{
  transform: translateY(-4px);
  border-color: var(--pink);
  box-shadow:
    0 0 18px rgba(236,0,140,0.5),
    0 0 40px rgba(236,0,140,0.25);
}

/* The pixel-style pink folder graphic */
.folder-icon{
  position: relative;
  width: 84px;
  height: 64px;
  display: block;
}
.folder-icon-tab{
  position: absolute;
  top: 0; left: 6px;
  width: 34px; height: 12px;
  background: linear-gradient(135deg, var(--pink), #ff5cb8);
  border-radius: 4px 8px 0 0;
}
.folder-icon-body{
  position: absolute;
  top: 8px; left: 0;
  width: 84px; height: 56px;
  background: linear-gradient(150deg, var(--pink), #c4006e);
  border: 2px solid var(--white);
  border-radius: 6px;
  box-shadow:
    0 0 10px rgba(236,0,140,0.7),
    0 6px 16px rgba(0,0,0,0.4);
  transition: box-shadow 0.18s ease;
}
.folder-card:hover .folder-icon-body{
  box-shadow:
    0 0 18px rgba(236,0,140,1),
    0 0 36px rgba(236,0,140,0.6),
    0 6px 16px rgba(0,0,0,0.4);
}
.folder-icon-star{
  position: absolute;
  top: -10px; right: -8px;
  color: #FFD700;
  font-size: 1.1rem;
  text-shadow: 0 0 6px rgba(255,215,0,0.9);
}

.folder-card-name{
  font-family: var(--display);
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}
.folder-card-host{
  color: var(--text-mute);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.folder-card-link{
  color: var(--pink-light);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

@media (max-width: 480px){
  .folder-card-grid{ grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .folder-card{ padding: 1.4rem 0.7rem 1.1rem; }
}

.social-link{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.4rem;
  background: var(--surface);
  border: 2px solid var(--pink);
  border-radius: 3px;
  min-width: 200px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.social-link:hover{ background: var(--surface-2); transform: translateY(-2px); }
.social-link-soon{
  border-color: var(--line);
  opacity: 0.6;
  cursor: default;
}
.social-link-soon:hover{ background: var(--surface); transform: none; }
.social-label{
  color: var(--pink-light);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.social-value{ color: var(--white); font-size: 1rem; }

/* ============ CONTACT / FORM ============ */
.direct-contact{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.direct-contact-item{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.4rem;
  background: var(--surface);
  border: 2px solid var(--pink);
  border-radius: 3px;
  min-width: 220px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.direct-contact-item:hover{ background: var(--surface-2); transform: translateY(-2px); }
.direct-contact-label{
  color: var(--pink-light);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.direct-contact-value{ color: var(--white); font-size: 1rem; }

.form-subfields{
  display: none;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem;
  margin: -0.2rem 0 0.4rem;
  background: var(--surface);
  border-left: 3px solid var(--pink);
}
.form-subfields.active{ display: flex; }

.booking-form{
  display: grid;
  gap: 1.2rem;
  max-width: 560px;
}
.form-row-checkbox label{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-direction: row;
  color: var(--text);
  font-family: var(--body);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
}
.form-row-checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
  accent-color: var(--pink);
}

.form-row{ display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label{
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.form-row input, .form-row select, .form-row textarea{
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--text);
  padding: 0.75em 0.9em;
  font-family: var(--body);
  font-size: 0.95rem;
  border-radius: 3px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none;
  border-color: var(--pink);
}
.form-note{ color: var(--text-mute); font-size: 0.72rem; margin-top: 0.5rem; }
.form-success{
  color: var(--pink-light);
  font-size: 0.85rem;
  margin-top: 0.8rem;
  padding: 0.8em 1em;
  border: 1px solid var(--pink);
  border-radius: 3px;
  background: var(--surface);
}

/* ============ FOOTER ============ */
.site-footer{ border-top: 2px solid var(--pink); padding: 3rem 1.5rem; }
.footer-inner{
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 2rem;
  align-items: center; justify-content: space-between;
}
.footer-brand{
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--display); font-size: 1.05rem;
  color: var(--white);
}
.footer-logo{ height: 34px; width: auto; }
.footer-links{ display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a{
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.footer-links a:hover{ color: var(--pink); }
.footer-note{ width: 100%; color: var(--text-mute); font-size: 0.72rem; text-align: center; margin-top: 1rem; font-family: var(--mono); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ============ SMALL PHONE FIXES (≤480px) ============
   Tightens up spacing that felt bloated on real phones, and
   fixes rows with long text (like the DM/email lines) that
   were squeezing two blocks of text side-by-side.
================================================= */
@media (max-width: 480px){
  section{ padding: 3rem 1.25rem; }
  .hero{ padding: 4.5rem 1.25rem 3.5rem; }
  .hero-title{ font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .hero-sub{ font-size: 0.95rem; }
  h2{ font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .eyebrow{ font-size: 0.56rem; }

  .frame{ padding: 1.4rem 1.1rem 1.6rem; min-height: 0; }
  .frame-label{ font-size: 1.25rem; }

  /* Long label/value rows (like "DM / email") stack instead of
     squeezing side-by-side on a narrow screen */
  .spec-list li{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .spec-list li span:last-child{ text-align: left; }

  .direct-contact-item, .social-link{ min-width: 0; width: 100%; }
  .direct-contact, .socials-row{ flex-direction: column; }

  .about-team{ gap: 1rem; }
  .about-team-photo{ width: 110px; height: 110px; }

  .header-inner{ padding: 0.6rem 1rem; }
  .brand-text{ font-size: 1rem; }
  .brand-logo{ height: 36px; }

  .contact-sheet{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .price-card{ padding: 1.4rem 1.2rem; }
  .tc-card{ width: 240px; }
}

/* ================================================
   THE INFORMATION DECK — trading-card carousel
================================================= */
.info-deck-section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.info-deck-section .section-lead strong{ color: var(--pink-light); }

.tc-carousel-wrap{
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
  overflow: hidden;
}
.tc-carousel{
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) var(--surface);
}
.tc-carousel::-webkit-scrollbar{ height: 8px; }
.tc-carousel::-webkit-scrollbar-track{ background: var(--surface); }
.tc-carousel::-webkit-scrollbar-thumb{ background: var(--pink); border-radius: 4px; }

.tc-hint{
  text-align: center;
  color: var(--text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.tc-card{
  flex: 0 0 auto;
  width: 270px;
  scroll-snap-align: start;
}
.tc-card-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
  padding: 0.9rem;
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.25s ease;
}
.tc-card:hover .tc-card-inner{ transform: translateY(-4px); }

.tc-card-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 2;
}
.tc-card-name{
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1.1;
  color: var(--white);
  flex: 1;
}
.tc-card-rarity{
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25em 0.5em;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tc-card-image{
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-bottom: 0.7rem;
}
.tc-card-image img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  box-sizing: border-box;
  display: block;
}
.tc-card-body{
  position: relative;
  z-index: 2;
  flex: 1;
}
.tc-card-label{
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-light);
  margin: 0 0 0.35em;
}
.tc-card-instructions{
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0;
}
.tc-card-footer{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  color: var(--text-mute);
}

/* ---- Common ---- */
.tc-common .tc-card-inner{ border: 2px solid var(--line); }
.tc-rarity-common{ background: var(--surface-2); color: var(--text-mute); }

/* ---- Rare ---- */
.tc-rare .tc-card-inner{
  border: 2px solid var(--grey-light);
  box-shadow: 0 0 14px rgba(216,216,216,0.25);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.tc-rarity-rare{ background: var(--grey-light); color: var(--black); }

/* ---- Legendary (shiny/holo) ---- */
.tc-legendary .tc-card-inner{
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--pink), #FFD700, #7C3AED, var(--pink-light), var(--pink)) border-box;
  box-shadow: 0 0 22px rgba(236,0,140,0.35), 0 0 10px rgba(255,215,0,0.2);
}
.tc-legendary .tc-card-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,215,0,0.12) 8%,
    rgba(236,0,140,0.14) 16%,
    rgba(124,58,237,0.12) 24%,
    rgba(255,255,255,0) 32%
  );
  background-size: 300% 300%;
  animation: holoShine 5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes holoShine{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
  100%{ background-position: 0% 0%; }
}
.tc-rarity-legendary{
  background: linear-gradient(90deg, var(--pink), #FFD700);
  color: var(--black);
  font-weight: 600;
}

/* ---- Hyper Rare (cameras only — full rainbow shine + stars) ---- */
.tc-hyperrare{ position: relative; }
.tc-hyperrare .tc-card-inner{
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #FF3B3B, #FFD700, #4DFF88, #3BB4FF, #B44DFF, #FF3B9E, #FF3B3B) border-box;
  box-shadow: 0 0 26px rgba(255,255,255,0.18), 0 0 16px rgba(255,59,158,0.3);
}
.tc-hyperrare .tc-card-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,59,59,0.10) 0%,
    rgba(255,215,0,0.12) 12%,
    rgba(77,255,136,0.10) 24%,
    rgba(59,180,255,0.12) 36%,
    rgba(180,77,255,0.10) 48%,
    rgba(255,59,158,0.12) 60%,
    rgba(255,59,59,0.10) 72%
  );
  background-size: 400% 400%;
  animation: holoShine 4s ease-in-out infinite;
  mix-blend-mode: screen;
}
.tc-stars{
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255,215,0,0.8);
  pointer-events: none;
  white-space: nowrap;
}
.tc-rarity-hyperrare{
  background: linear-gradient(90deg, #FF3B3B, #FFD700, #4DFF88, #3BB4FF, #B44DFF);
  background-size: 200% 100%;
  animation: holoShine 3s linear infinite;
  color: var(--black);
  font-weight: 700;
}

@media (max-width: 480px){
  .tc-card{ width: 78vw; }
}

/* ================================================
   DETAIL SECTIONS (hidden-by-default screens)
================================================= */
.detail-sections{ display: none; }
.detail-sections.open{ display: block; }
.detail-back-bar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.2rem 1.5rem 0;
}
.detail-back-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink-light);
  padding: 0.5em 0.9em;
  border: 1px solid var(--pink);
  border-radius: 3px;
  transition: background 0.2s ease, color 0.2s ease;
}
.detail-back-btn:hover{ background: var(--pink); color: var(--white); }

/* ================================================
   FUN STUFF — CRT TV tool
================================================= */
.fun-stuff-section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.crt-tool{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.crt-tv{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.crt-tv-frame{
  background: linear-gradient(160deg, #3a3530, #1a1714);
  border-radius: 28px 28px 18px 18px;
  padding: 1.6rem 1.6rem 1rem;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.06),
    0 20px 50px rgba(0,0,0,0.6);
  max-width: 100%;
}
.crt-tv-brand{
  color: var(--pink-light);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 0.7rem;
}
.crt-screen{
  position: relative;
  width: 480px;
  max-width: 78vw;
  aspect-ratio: 4/3;
  background: #050505;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid #0c0c0c;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crt-screen.crt-dragover{ outline: 3px dashed var(--pink); outline-offset: -6px; }
.crt-screen canvas{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.crt-screen-glass{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(ellipse at 35% 25%, rgba(255,255,255,0.10), transparent 55%);
}
.crt-drop-hint{
  position: absolute;
  color: var(--text-mute);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.6;
  margin: 0;
  padding: 0 1rem;
}
.crt-drop-hint .mono{ font-size: 0.65rem; color: var(--pink-light); }

.crt-tv-controls-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.crt-knob{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(160deg, #555, #222);
  border: 1px solid rgba(255,255,255,0.15);
}
.crt-speaker{
  width: 40px; height: 14px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #2a2a2a 0 2px, #111 2px 4px);
  margin-left: 0.6rem;
}
.crt-tv-legs{
  width: 60%;
  height: 10px;
  background: linear-gradient(160deg, #2a2620, #171512);
  border-radius: 0 0 6px 6px;
  margin-top: -2px;
}

.crt-controls{ display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.crt-hint{
  color: var(--text-mute);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-align: center;
}

@media (max-width: 480px){
  .crt-screen{ width: 88vw; }
}

/* ============ MINI PHOTOBOOTH ============ */
.filmstrip-inline{ margin: 3rem 0; }
.photobooth-intro{
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}
.photobooth-title{
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-transform: uppercase;
  color: var(--white);
  margin: 0.2em 0 0.4em;
}

.photobooth-tool{
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.pb-stage{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.pb-stage[hidden]{ display: none; }

.pb-camera-frame{
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #2f2f34, #1c1c20);
  border: 1px solid #3a3a40;
  border-radius: 16px;
  padding: 0.9rem 0.9rem 1.1rem;
  box-shadow: 0 0 0 5px var(--black), 0 20px 44px rgba(0,0,0,0.5);
}
/* realistic little camcorder perched on top, like the reference photo */
.pb-camcorder-topper{
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 92px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6));
  z-index: 3;
}
.pb-camcorder-topper svg{ width: 100%; height: auto; display: block; }
/* the record light doubles as the flash bulb — glows bright on capture */
#pbFlashBulb{ transition: fill 0.1s ease, filter 0.1s ease; }
.pb-camcorder-flash #pbFlashBulb{
  fill: #ffffff;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #fff);
}
/* side vents, like a real CRT housing */
.pb-camera-frame::after{
  content: "";
  position: absolute;
  top: 20%; right: 6px;
  width: 10px; height: 55%;
  background-image: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.5) 2px, transparent 2px, transparent 6px
  );
  opacity: 0.6;
}
.pb-camera-brand{
  color: var(--pink-light);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem 0.6rem;
}
.pb-camera-screen{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 4px #000, inset 0 0 40px rgba(0,0,0,0.85);
}
.pb-camera-screen video{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror the live preview so it feels like a mirror, not backwards */
  display: block;
}
/* scanlines + vignette over the live feed, like a real CRT screen */
.pb-camera-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.22) 0, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px
  );
}
.pb-camera-screen::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.pb-camera-panel{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.7rem;
}
.pb-camera-panel-dots{ display: flex; gap: 5px; }
.pb-camera-panel-dots span{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.pb-camera-panel-dots span:not(:first-child){ background: #555; }
.pb-camera-panel-knob{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #666;
  margin-left: 0.6rem;
}
.pb-camera-panel-brand{
  margin-left: auto;
  color: #999;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pb-idle-hint{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.4rem;
  color: var(--text-mute);
  line-height: 1.6;
  margin: 0;
  padding: 1rem;
  pointer-events: none;
}
.pb-idle-hint .mono{ font-size: 0.62rem; color: var(--pink-light); }

.pb-countdown{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 6rem;
  color: var(--white);
  text-shadow: 0 0 20px rgba(236,0,140,0.9), 0 0 40px rgba(236,0,140,0.6);
  background: rgba(0,0,0,0.35);
}
.pb-countdown-tick{ animation: pbCountdownPulse 0.7s ease-out; }
@keyframes pbCountdownPulse{
  0%{ transform: scale(1.6); opacity: 0; }
  30%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(0.9); opacity: 0.9; }
}

.pb-flash{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.pb-flash-active{
  opacity: 1;
  animation: pbFlashPop 0.28s ease-out forwards;
}
@keyframes pbFlashPop{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}

.pb-shot-dots{
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.pb-shot-dots span{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  transition: background 0.2s ease;
}
.pb-shot-dots span.filled{
  background: var(--pink);
  box-shadow: 0 0 8px rgba(236,0,140,0.9);
}

.pb-controls{ display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.pb-error{
  color: #ff6b6b;
  font-size: 0.72rem;
  text-align: center;
  max-width: 340px;
}

.pb-stage-label{
  color: var(--pink-light);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pb-frame-options{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pb-frame-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-mute);
  font-size: 0.68rem;
  transition: color 0.2s ease;
}
.pb-frame-option:hover{ color: var(--pink-light); }
.pb-frame-swatch{
  width: 64px; height: 84px;
  border-radius: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pb-frame-option:hover .pb-frame-swatch{
  transform: translateY(-3px);
  box-shadow: 0 0 16px rgba(236,0,140,0.5);
}
.pb-frame-swatch-pixel{ background: linear-gradient(160deg, #000, #1a0010); border: 3px solid var(--pink); }
.pb-frame-swatch-filmstrip{
  background: linear-gradient(180deg, #3a7bd5 0%, #a8d5f2 75%, #4a9c3f 100%);
  border: 3px solid #d4d0c8;
  border-radius: 4px;
}
.pb-frame-swatch-crt{
  background: linear-gradient(160deg, #3a3a40, #202024);
  border: 3px solid #2b2b30;
  border-top: 4px solid var(--pink);
  border-radius: 8px;
}

.pb-result-img{
  width: 100%;
  max-width: 320px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

@media (max-width: 480px){
  .pb-countdown{ font-size: 4.5rem; }
  .photobooth-tool{ max-width: 100%; }
}

/* ============ 3D LOGO MAKER ============ */
.td-tool{
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.td-mode-toggle{
  display: flex;
  border: 2px solid var(--pink);
  border-radius: 30px;
  overflow: hidden;
}
.td-mode-btn{
  padding: 0.6em 1.4em;
  background: none;
  border: none;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.td-mode-btn.td-mode-active{ background: var(--pink); color: var(--white); }
.td-mode-btn:not(.td-mode-active):hover{ color: var(--pink-light); }

.td-input-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.td-text-input{
  width: 100%;
  max-width: 320px;
  padding: 0.8em 1em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  transition: border-color 0.2s ease;
}
.td-text-input:focus{ outline: none; border-color: var(--pink); }
.td-input-hint{ color: var(--text-mute); font-size: 0.7rem; }

.td-stage-wrap{
  width: 100%;
  aspect-ratio: 4/3;
  background: radial-gradient(ellipse at center, var(--surface-2), var(--black));
  border-radius: 14px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.td-stage{
  perspective: 700px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-object{
  position: relative;
  transform-style: preserve-3d;
  animation: td3dSpin 9s linear infinite;
}
@keyframes td3dSpin{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(360deg); }
}
.td-layer{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: visible;
}
.td-layer-text{
  font-family: var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 400;
}
.td-layer img{ display: block; max-width: none; }

.td-option-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}
.td-option-label{
  color: var(--text-mute);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.td-font-options, .td-color-options{
  display: flex;
  gap: 0.5rem;
}
.td-font-option{
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.td-font-option:hover{ transform: translateY(-2px); }
.td-font-option.td-option-active{ border-color: var(--pink); box-shadow: 0 0 10px rgba(236,0,140,0.5); }

.td-color-option{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.td-color-option:hover{ transform: translateY(-2px) scale(1.08); }
.td-color-option.td-option-active{ border-color: var(--white); box-shadow: 0 0 10px rgba(255,255,255,0.4); }

.td-speed-options{ display: flex; gap: 0.5rem; }
.td-speed-option{
  padding: 0.5em 0.9em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 20px;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.td-speed-option:hover{ transform: translateY(-2px); color: var(--pink-light); }
.td-speed-option.td-option-active{ border-color: var(--pink); color: var(--white); background: var(--surface-2); }

@media (max-width: 480px){
  .td-mode-btn{ padding: 0.55em 1.1em; font-size: 0.68rem; }
  .td-option-row{ justify-content: flex-start; }
}

/* ============ NEON AUDIO VISUALIZER ============ */
.viz-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.viz-theme-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.viz-theme-btn{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5em 0.9em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 20px;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.viz-theme-btn:hover{ transform: translateY(-2px); color: var(--white); }
.viz-theme-btn.viz-theme-active{ border-color: var(--pink); color: var(--white); background: var(--surface-2); }
.viz-theme-swatch{
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.viz-stage-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background: #000;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.viz-stage-wrap canvas{
  width: 100%; height: 100%;
  display: block;
}
.viz-idle-hint{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
  padding: 1rem;
}

@media (max-width: 480px){
  .viz-theme-btn{ padding: 0.45em 0.75em; font-size: 0.6rem; }
}

.viz-source-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.viz-color-scroll{
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.2rem;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) var(--surface);
}
.viz-color-scroll::-webkit-scrollbar{ height: 6px; }
.viz-color-scroll::-webkit-scrollbar-thumb{ background: var(--pink); border-radius: 3px; }
.viz-color-swatch{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.viz-color-swatch:hover{ transform: translateY(-2px) scale(1.08); }
.viz-color-swatch.viz-color-active{ border-color: var(--white); box-shadow: 0 0 10px rgba(255,255,255,0.5); }

.viz-slider-row{ gap: 0.8rem; }
.viz-slider{
  flex: 1;
  max-width: 220px;
  accent-color: var(--pink);
}
.viz-slider-val{
  color: var(--pink-light);
  font-size: 0.7rem;
  min-width: 34px;
}

.viz-caption-toggle{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-mute);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.viz-caption-toggle input{ accent-color: var(--pink); width: 16px; height: 16px; cursor: pointer; }
.viz-caption-input{
  width: 100%;
  max-width: 420px;
  padding: 0.7em 0.9em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 0.85rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.viz-caption-input:focus{ outline: none; border-color: var(--pink); }

.viz-export-recording{ animation: vizRecordPulse 1s ease-in-out infinite; }
@keyframes vizRecordPulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.55; }
}

/* ============ CIRCUIT BENT GLITCH CAMERA ============ */
.glitch-tool{
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.glitch-stage-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 10px;
  border: 2px solid var(--line);
  overflow: hidden;
  cursor: pointer;
}
.glitch-stage-wrap.glitch-dragover{ border-color: var(--pink); box-shadow: 0 0 16px rgba(236,0,140,0.4); }
.glitch-stage-wrap canvas{ width: 100%; height: 100%; display: block; }

/* ============ QR & BARCODE GENERATOR ============ */
.qr-tool{
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.qr-color-input{
  width: 40px; height: 34px;
  padding: 2px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.qr-stage-wrap{
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 10px;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qr-stage-wrap canvas{ width: 100%; height: 100%; display: block; }

/* ============ COLOUR PALETTE GENERATOR ============ */
.palette-tool{
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.palette-swatch-row{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
.palette-swatch{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  border: none;
  background: none;
}
.palette-swatch-color{
  width: 70px; height: 70px;
  border-radius: 10px;
  border: 2px solid var(--line);
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.palette-swatch:hover .palette-swatch-color{ transform: translateY(-3px); border-color: var(--pink); }
.palette-swatch-hex{
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.palette-swatch.palette-swatch-copied .palette-swatch-hex{ color: var(--pink-light); }

/* ============ ZINE IMPOSER ============ */
.zine-tool{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.zine-select{
  padding: 0.5em 0.8em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 0.75rem;
  cursor: pointer;
}
.zine-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  aspect-ratio: 1.414;
  background: var(--pink);
  border: 2px solid var(--pink);
  border-radius: 4px;
  overflow: hidden;
}
.zine-slot{
  position: relative;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.zine-slot.zine-slot-dragover{ background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--pink); }
.zine-slot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.zine-slot-label{
  position: absolute;
  top: 4px; left: 6px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--pink-light);
  background: rgba(0,0,0,0.6);
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}
.zine-slot-upside-down{ transform: rotate(180deg); }
.zine-slot-empty-hint{
  font-size: 1.4rem;
  color: var(--text-mute);
  opacity: 0.5;
}
.zine-instructions{
  width: 100%;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.zine-instructions ol{
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-mute);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ============ FANCY FONT GENERATOR ============ */
.fontgen-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.fontgen-input{
  width: 100%;
  max-width: 420px;
  padding: 0.8em 1em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  transition: border-color 0.2s ease;
}
.fontgen-input:focus{ outline: none; border-color: var(--pink); }

.fontgen-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fontgen-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}
.fontgen-row-meta{ min-width: 0; flex: 1; }
.fontgen-row-name{
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.3rem;
}
.fontgen-row-output{
  font-size: 1.05rem;
  color: var(--white);
  word-break: break-word;
  line-height: 1.4;
}
.fontgen-copy-btn{
  flex: 0 0 auto;
  padding: 0.5em 1.1em;
  background: none;
  border: 2px solid var(--pink);
  border-radius: 20px;
  color: var(--white);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.fontgen-copy-btn:hover{ background: var(--pink); }
.fontgen-copy-btn:active{ transform: scale(0.94); }
.fontgen-copy-btn.fontgen-copied{ background: var(--pink); }
.fontgen-empty{ color: var(--text-mute); font-size: 0.85rem; text-align: center; padding: 1rem 0; }

/* ============ NOT YOUR AVERAGE EMOJI ============ */
.emoji-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.emoji-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.5rem;
}
.emoji-tile{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  color: var(--white);
  transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.emoji-tile:hover{ transform: translateY(-2px); border-color: var(--pink); }
.emoji-tile:active{ transform: scale(0.9); }
.emoji-tile.emoji-tile-selected{ border-color: var(--pink); background: var(--surface-2); }
.emoji-tile.emoji-tile-copied{ border-color: var(--pink); }

.emoji-combo{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--pink);
  border-radius: 10px;
}
.emoji-combo-preview{
  font-size: 1.3rem;
  word-break: break-word;
  text-align: center;
  color: var(--white);
}

/* ============ INVISIBLE CHARACTER ============ */
.invisible-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.invisible-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
}
.invisible-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.8rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.12s ease;
}
.invisible-card:hover{ border-color: var(--pink); transform: translateY(-2px); }
.invisible-card:active{ transform: scale(0.96); }
.invisible-card.invisible-copied{ border-color: var(--pink); }
.invisible-card-box{
  width: 100%;
  height: 34px;
  background: var(--black);
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.invisible-card-label{
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text);
  text-align: center;
}
.invisible-card-sub{
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-mute);
}
.invisible-test-wrap{
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}

/* ============ INFO DECK: PER-CARD SWIPEABLE INSTRUCTIONS ============ */
.tc-step-swipe-hint{
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.tc-step-carousel{
  position: relative;
}
.tc-step-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.tc-step-track::-webkit-scrollbar{ display: none; }
.tc-step-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding-right: 0.2rem;
}
.tc-step-number{
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--pink-light);
  margin-bottom: 0.3em;
}
.tc-step-title{
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.3em;
  line-height: 1.3;
}
.tc-step-text{
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0;
}
.tc-step-dots{
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.tc-step-dot{
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tc-step-dot:hover{ background: var(--pink-light); }
.tc-step-dot-active{
  background: var(--pink);
  transform: scale(1.3);
}

/* ============ MIRROR ENGRAVING ORDER FORM ============ */
.mirror-order-tc{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mirror-order-tc-label{
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-light);
}
.mirror-order-tc-text{
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
}
.mirror-order-tc .form-row-checkbox{ margin: 0; }
.mirror-order-photos{
  background: var(--surface);
  border: 1px solid var(--pink);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mirror-order-photos-label{
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-light);
}
.mirror-order-photos-text{
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
}
.mirror-order-photos .form-row-checkbox{ margin: 0; }
.mirror-order-price{
  font-size: 1.1rem;
  color: var(--white);
  text-align: center;
  padding: 0.7em 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

/* ============ MODAL: SECONDARY ACTION BUTTON ============ */
.modal-secondary-btn{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.7rem;
}

/* ============ INSTA CAROUSEL SPLITTER ============ */
.splitter-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.splitter-dropzone{
  border: 2px dashed var(--pink);
  border-radius: 14px;
  padding: 2.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--pink-light);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.splitter-dropzone:hover, .splitter-dropzone.splitter-dragover{
  background: var(--surface);
  border-color: var(--white);
}
.splitter-dropzone-title{
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.splitter-dropzone-sub{
  color: var(--text-mute);
  font-size: 0.72rem;
  margin: 0;
}
.splitter-dropzone.splitter-has-image{
  padding: 1rem;
  border-style: solid;
}
.splitter-dropzone-preview{
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
}

.splitter-settings{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.splitter-template-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.splitter-template-btn{
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-mute);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.splitter-template-btn:hover{ border-color: var(--pink-light); color: var(--white); }
.splitter-template-btn.splitter-template-active{
  border-color: var(--pink);
  background: var(--surface-2);
  color: var(--white);
}
.splitter-template-icon{
  display: grid;
  gap: 2px;
  width: 30px;
  height: 30px;
}
.splitter-template-icon span{
  background: currentColor;
  border-radius: 2px;
}
.splitter-template-label{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.splitter-custom-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.splitter-toggle{ position: relative; display: inline-block; cursor: pointer; }
.splitter-toggle input{ position: absolute; opacity: 0; width: 0; height: 0; }
.splitter-toggle-track{
  display: block;
  width: 42px;
  height: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}
.splitter-toggle-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-mute);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.splitter-toggle input:checked + .splitter-toggle-track{ background: var(--pink); border-color: var(--pink); }
.splitter-toggle input:checked + .splitter-toggle-track .splitter-toggle-thumb{
  transform: translateX(18px);
  background: var(--white);
}

.splitter-custom-inputs{
  display: flex;
  gap: 1rem;
}
.splitter-num-field{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.splitter-num-field input{
  padding: 0.6em 0.8em;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--white);
  font-size: 1rem;
}
.splitter-num-field input:focus{ outline: none; border-color: var(--pink); }

.splitter-quality-row{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.splitter-preview{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.splitter-preview-grid{
  display: grid;
  gap: 3px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.splitter-preview-tile{
  position: relative;
  background: var(--bg);
}
.splitter-preview-tile img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splitter-preview-tile-num{
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.65);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.splitter-preview-tile-dl{
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--pink);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 0.6rem;
  padding: 3px 7px;
  cursor: pointer;
  font-family: var(--mono);
}
.splitter-preview-tile-dl:hover{ background: #ff1fa0; }

.splitter-actions{
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ============ IMAGE CONVERTER ============ */
.converter-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.converter-step{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.converter-format-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (min-width: 480px){
  .converter-format-grid{ grid-template-columns: repeat(4, 1fr); }
}
.converter-format-pill{
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.6em 0.4em;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.converter-format-pill:hover:not(.converter-format-disabled){ border-color: var(--pink-light); }
.converter-format-pill.converter-format-active{
  border-color: var(--pink);
  background: var(--surface-2);
  color: var(--white);
}
.converter-format-pill.converter-format-disabled{
  color: var(--text-mute);
  opacity: 0.45;
  cursor: not-allowed;
}

.converter-dropzone{
  border: 2px dashed var(--pink);
  border-radius: 14px;
  padding: 2.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--pink-light);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.converter-dropzone:hover, .converter-dropzone.splitter-dragover{
  background: var(--surface);
  border-color: var(--white);
}

.converter-result{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.converter-preview-img{
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  object-fit: contain;
}

.converter-error{
  color: var(--pink-light);
  background: var(--surface);
  border: 1px solid var(--pink);
  border-radius: 8px;
  padding: 0.8em 1em;
  font-size: 0.78rem;
  line-height: 1.5;
}

.converter-limitation-note{
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-mute);
  border-top: 1px dashed var(--line);
  padding-top: 0.8rem;
}

/* ============ STUFF I WANT GONE ERASER ============ */
.eraser-tool{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.eraser-dropzone{
  border: 2px dashed var(--pink);
  border-radius: 14px;
  padding: 2.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--pink-light);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.eraser-dropzone:hover, .eraser-dropzone.splitter-dragover{
  background: var(--surface);
  border-color: var(--white);
}

.eraser-progress{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.eraser-progress-bar{
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.eraser-progress-fill{
  height: 100%;
  width: 8%;
  background: var(--pink);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.eraser-result{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.eraser-preview-wrap{
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-image:
    linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #1a1a1a;
}
.eraser-preview-img{
  display: block;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}