/* Shared styles. TV-safe: no CSS grid, no flex gap, no inset, no clamp/min/max. */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Black.woff') format('woff'); font-weight: 900; font-display: swap; }

:root {
  --bg: #160a32;
  --bg2: #24104f;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.66);
  --faint: rgba(255, 255, 255, 0.12);
  --panel: rgba(255, 255, 255, 0.08);
  --pink: #ff4fa3;
  --gold: #ffc93c;
  --cyan: #3ee0ff;
  --green: #2bb673;
  --red: #e5484d;
  --violet: #8b5cf6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 79, 163, 0.35) 0, rgba(255, 79, 163, 0) 32%),
    radial-gradient(circle at 88% 12%, rgba(62, 224, 255, 0.22) 0, rgba(62, 224, 255, 0) 30%),
    radial-gradient(circle at 70% 92%, rgba(139, 92, 246, 0.45) 0, rgba(139, 92, 246, 0) 40%),
    linear-gradient(160deg, #1c0c40 0%, #160a32 55%, #0f0726 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; }
.hidden { display: none !important; }

.row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.col { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.center { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.grow { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; min-height: 0; }

.shape { width: 1em; height: 1em; display: inline-block; -webkit-flex: none; flex: none; }

/* confetti canvas */
#confetti { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

@-webkit-keyframes popIn { 0% { -webkit-transform: scale(.4); opacity: 0; } 70% { -webkit-transform: scale(1.08); opacity: 1; } 100% { -webkit-transform: scale(1); } }
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@-webkit-keyframes fadeUp { 0% { -webkit-transform: translateY(1.5rem); opacity: 0; } 100% { -webkit-transform: none; opacity: 1; } }
@keyframes fadeUp { 0% { transform: translateY(1.5rem); opacity: 0; } 100% { transform: none; opacity: 1; } }
@-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.05); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@-webkit-keyframes floaty { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-0.6rem); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6rem); } }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.pop-in { -webkit-animation: popIn .45s ease-out both; animation: popIn .45s ease-out both; }
.fade-up { -webkit-animation: fadeUp .5s ease-out both; animation: fadeUp .5s ease-out both; }