/* PestaDuel! 🚀 Space skin for the System Preset pages (hub, account, dashboard, admin, 12 games).
   Those pages are built on theme.css (the fun fair); this remaps its tokens to the Mari Duel neon
   palette and restyles the fairground pieces (canopy, bunting, cream cards) as a starship console.
   Active only on <html data-theme="space">. */

:root[data-theme="space"] {
  --night: #04050d;
  --night-2: #0a0f2b;
  --red: #ff3ec8;        /* magenta takes the red's role */
  --red-deep: #a3127c;
  --gold: #3ef2ff;       /* cyan takes the gold's role */
  --gold-deep: #0a9fb3;
  --teal: #b6ff3e;
  --pink: #ff3ec8;
  --purple: #9d7bff;
  --green: #3dffa8;
  --cream: #e8f1ff;      /* text on the dark background */
  --ink: #04050d;
  --shadow: 0 0 22px rgba(62, 242, 255, .25);
  --glass: rgba(14, 20, 56, .72);
  --glass-line: rgba(120, 220, 255, .32);
  --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

html[data-theme="space"] body {
  background:
    radial-gradient(ellipse 80% 60% at 15% 110%, rgba(255, 62, 200, .22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% -10%, rgba(62, 242, 255, .18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 60% 60%, rgba(157, 123, 255, .14), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  background-attachment: fixed;
}
/* Denser starfield than the fair's faint stars. */
html[data-theme="space"] body::before {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 22% 62%, #bfefff 50%, transparent),
    radial-gradient(1.5px 1.5px at 30% 8%, #fffa 50%, transparent), radial-gradient(1px 1px at 41% 84%, #fff9 50%, transparent),
    radial-gradient(1px 1px at 55% 25%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 63% 71%, #ffd6f4 50%, transparent),
    radial-gradient(1.5px 1.5px at 75% 12%, #fffc 50%, transparent), radial-gradient(1px 1px at 84% 52%, #fff9 50%, transparent),
    radial-gradient(1px 1px at 90% 30%, #bfefff 50%, transparent), radial-gradient(1px 1px at 45% 40%, #fff8 50%, transparent),
    radial-gradient(1px 1px at 5% 90%, #fff9 50%, transparent), radial-gradient(1.5px 1.5px at 96% 88%, #fffb 50%, transparent);
  animation: pd-twinkle 6s ease-in-out infinite alternate;
}
@keyframes pd-twinkle { from { opacity: .65; } to { opacity: 1; } }

/* Canopy → glowing hull edge; bunting → off; fairy lights → status LEDs. */
html[data-theme="space"] .canopy {
  background: linear-gradient(180deg, #0a0f2b, #121a45);
  box-shadow: inset 0 -1px 0 rgba(62, 242, 255, .7), 0 0 24px rgba(62, 242, 255, .25);
}
html[data-theme="space"] .canopy::after {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #3ef2ff 20%, #ff3ec8 80%, transparent) !important;
  filter: blur(.5px) drop-shadow(0 0 6px #3ef2ff);
}
html[data-theme="space"] .bunting { visibility: hidden; height: 12px; }
html[data-theme="space"] .lights::before { border-top-color: rgba(62, 242, 255, .25); }
html[data-theme="space"] .lights i { width: 6px; height: 6px; border-radius: 50%; }

html[data-theme="space"] .display,
html[data-theme="space"] h1, html[data-theme="space"] h2, html[data-theme="space"] h3 { letter-spacing: .03em; }
html[data-theme="space"] .marquee-title {
  font-weight: 900; letter-spacing: .04em; text-shadow: none;
  background: linear-gradient(92deg, #3ef2ff 0%, #fff 45%, #ff3ec8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(62, 242, 255, .35));
}

/* Neon pill buttons. */
html[data-theme="space"] .btn {
  --c: var(--gold);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); border-radius: 999px;
  color: #04050d; background: var(--c);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .2);
}
html[data-theme="space"] .btn:hover { filter: brightness(1.08); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .2); }
html[data-theme="space"] .btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
html[data-theme="space"] .btn.red { --c: #ff3ec8; color: #fff; }
html[data-theme="space"] .btn.teal { --c: #b6ff3e; }
html[data-theme="space"] .btn.ghost { background: rgba(255, 255, 255, .04); color: var(--cream); border-color: var(--glass-line); box-shadow: none; }
html[data-theme="space"] .btn.ghost:hover { background: rgba(255, 255, 255, .09); }
html[data-theme="space"] .btn.small { font-size: 11px; }
html[data-theme="space"] .btn.big { font-size: clamp(16px, 1.6vw, 22px); border-radius: 999px; }

/* Glass fields instead of cream tickets. */
html[data-theme="space"] input[type=text], html[data-theme="space"] input[type=number],
html[data-theme="space"] input[type=password], html[data-theme="space"] input[type=email],
html[data-theme="space"] input[type=date], html[data-theme="space"] input[type=search],
html[data-theme="space"] textarea, html[data-theme="space"] select {
  color: var(--cream); background: rgba(4, 6, 20, .6); border: 1px solid var(--glass-line); font-weight: 600;
}
html[data-theme="space"] input:focus, html[data-theme="space"] textarea:focus, html[data-theme="space"] select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(62, 242, 255, .18);
}
html[data-theme="space"] select option { background: #0f1640; color: var(--cream); }
html[data-theme="space"] :focus-visible { outline: 2px solid var(--gold); }

/* Cream cards → glass consoles with light text. */
html[data-theme="space"] .booth,
html[data-theme="space"] .winners-list li,
html[data-theme="space"] .event-list button,
html[data-theme="space"] .stat,
html[data-theme="space"] .timer,
html[data-theme="space"] .reveal-card,
html[data-theme="space"] .reveal-names li {
  background: var(--glass); color: var(--cream);
  border: 1px solid var(--glass-line);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 16px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
html[data-theme="space"] .stat b { color: var(--gold); }
html[data-theme="space"] .reveal-kicker { color: var(--gold); text-shadow: 0 0 24px rgba(62, 242, 255, .5); }
html[data-theme="space"] .reveal-prize { color: #ff9ae0; }
html[data-theme="space"] .reveal-roof,
html[data-theme="space"] .booth .roof { background: linear-gradient(90deg, var(--cc, #3ef2ff), #ff3ec8); height: 4px; box-shadow: 0 0 14px var(--cc, #3ef2ff); }
html[data-theme="space"] .booth .roof::after { display: none; }
html[data-theme="space"] .booth h3 { text-shadow: 0 0 18px color-mix(in srgb, var(--cc) 60%, transparent); }
html[data-theme="space"] a.booth:hover, html[data-theme="space"] a.booth:focus-visible {
  transform: translateY(-4px); border-color: var(--cc); box-shadow: 0 0 34px color-mix(in srgb, var(--cc) 35%, transparent);
}
html[data-theme="space"] .booth .new { color: #04050d; }
html[data-theme="space"] .cat-label {
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 30%, #0a0f2b), #0a0f2b);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--cc) 25%, transparent);
}
html[data-theme="space"] .event-strip { background: rgba(14, 20, 56, .5); border: 1px solid var(--glass-line); }
html[data-theme="space"] .event-list button.active { border-left-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(62, 242, 255, .3); }

/* Drawer, tables, tabs, cards on the app pages. */
html[data-theme="space"] .drawer { background: linear-gradient(180deg, #0f1640, #04050d); border-left: 1px solid var(--glass-line); }
html[data-theme="space"] .drawer-tabs { background: linear-gradient(90deg, #121a45, #0a0f2b); box-shadow: inset 0 -1px 0 var(--glass-line); }
html[data-theme="space"] .drawer-tabs button[aria-selected=true] { background: #0f1640; color: var(--gold); }
html[data-theme="space"] .scrim { background: rgba(2, 3, 10, .6); }
html[data-theme="space"] .card { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="space"] .table th { background: #0f1640; }
html[data-theme="space"] .tabs button[aria-selected=true] { box-shadow: 0 0 16px rgba(62, 242, 255, .5); }
html[data-theme="space"] kbd { background: rgba(62, 242, 255, .15); color: var(--gold); border: 1px solid var(--glass-line); }
html[data-theme="space"] .reveal { background: radial-gradient(circle at 50% 45%, rgba(62, 242, 255, .22), rgba(2, 3, 10, .85) 65%); }
html[data-theme="space"] .countdown { text-shadow: 0 0 40px rgba(62, 242, 255, .7); }