/* Level Up – arcade night: pixel font, neon green and magenta on a dark grid. */
@font-face { font-family: "Press Start 2P"; src: url("/assets/fonts/press-start-2p-latin-400-50c9abcd.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("/assets/fonts/vt323-latin-400-660b6f60.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-wght-3b2bde23.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --inv-bg:
    linear-gradient(rgba(57, 255, 20, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(57, 255, 20, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 0%, rgba(255, 0, 230, .25) 0%, transparent 50%),
    linear-gradient(180deg, #0d0618 0%, #170a2c 100%);
  --inv-text: #e9e3ff;
  --inv-accent: #39ff14;
  --inv-accent-soft: #ff00e6;
  --inv-accent-gradient: linear-gradient(135deg, #ff00e6, #7b2cff);
  --inv-highlight: #39ff14;
  --inv-highlight-strong: #ff00e6;
  --inv-highlight-light: #eaffe0;
  --inv-highlight-dark: #0d0618;
  --inv-title-fill: linear-gradient(110deg, #39ff14, #eaffe0 30%, #00e5ff 50%, #ff00e6 70%, #39ff14);
  --inv-title-glow: drop-shadow(0 0 6px rgba(57, 255, 20, .8)) drop-shadow(4px 4px 0 #ff00e6);
  --inv-card-border: linear-gradient(135deg, #39ff14, #00e5ff, #ff00e6);
  --inv-card-bg: rgba(18, 10, 35, .95);
  --inv-shadow: rgba(255, 0, 230, .2);
  --inv-surface: #1f1238;
  --inv-surface-soft: rgba(31, 18, 56, .85);
  --inv-on-accent: #ffffff;
  --inv-radius: 6px;
  --inv-font-body: "Space Grotesk", system-ui, sans-serif;
  --inv-font-display: "Press Start 2P", monospace;
  --inv-font-script: "Press Start 2P", monospace;
  --inv-font-heading: "Press Start 2P", monospace;
  --inv-title-size: clamp(1.8rem, 8vw, 3.4rem);
  --inv-floater-stroke: rgba(57, 255, 20, .35);
  --inv-floater-fill: linear-gradient(180deg, rgba(255, 0, 230, .15), rgba(0, 229, 255, .1));
}

.inv-title { line-height: 1.4; margin-top: 14px; }
.inv-eyebrow { border-radius: 0; color: #39ff14; letter-spacing: .1em; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.inv-age-side { font-family: "Press Start 2P", monospace; font-style: normal; font-size: clamp(.8rem, 3vw, 1.1rem); }
.inv-age-badge { border-radius: 0; background: #1f1238; border: 4px solid #39ff14; box-shadow: 0 0 0 4px #0d0618, 0 0 0 8px #ff00e6, 0 0 30px rgba(57, 255, 20, .4); animation: none; }
.inv-age-badge::before { display: none; }
.inv-age-badge span { font-family: "VT323", monospace; font-size: 6.5rem; color: #39ff14; text-shadow: 0 0 14px #39ff14; }
.inv-ribbon { clip-path: none; border-radius: 0; font-family: "Press Start 2P", monospace; font-size: .7rem; line-height: 1.6; padding: 10px 18px; }
.inv-greeting { font-size: clamp(1.1rem, 4.5vw, 1.6rem); line-height: 1.6; }
.inv-signature { font-size: 1rem; line-height: 1.6; }
.inv-detail { border-radius: 0; }
.inv-detail h3, .inv-gift h3 { font-size: .75rem; line-height: 1.8; }
.inv-gift h3 { font-size: 1rem; }
.inv-chips li { border-radius: 0; border-style: solid; border-color: #ff00e6; }
.inv-countdown-label { font-family: "Press Start 2P", monospace; font-size: .7rem; }
.inv-cd-box { border-radius: 0; }
.inv-cd-num { font-family: "VT323", monospace; font-size: 2.2rem; color: #39ff14; text-shadow: 0 0 8px #39ff14; }
.inv-btn { border-radius: 0; }
.inv-btn-secondary { color: #0d0618; }
.inv-song-btn { border-radius: 0; font-family: "Press Start 2P", monospace; font-size: .55rem; }
.inv-song-hint { border-radius: 0; }
.inv-party-now { font-family: "Press Start 2P", monospace; font-size: .9rem; }

/* Pixel fonts blur under the gradient shine: use solid neon instead. */
.inv-shine { background: none; color: #39ff14; filter: none; animation: none; text-shadow: 3px 3px 0 #ff00e6; }
.inv-detail h3, .inv-gift h3 { text-shadow: 2px 2px 0 #ff00e6; }
.inv-signature { color: #00e5ff; text-shadow: 2px 2px 0 #ff00e6; }

.inv-social-title { font-size: 4.4rem; line-height: 1.5; }
.inv-social .inv-ribbon { font-size: 1.2rem; }

@media (max-width: 520px) {
  .inv-age-row { flex-direction: column; gap: 14px; }
  .inv-age-badge { width: 120px; height: 120px; }
  .inv-age-badge span { font-size: 5.5rem; }
}