/*
  Space Theme — Neon Blue/Green + Cute Cat Astronaut
  - Starfield handled by space.js (canvas overlay)
  - This stylesheet focuses on colors, glassmorphism, and component polish
*/

:root {
  --space-bg0: #030712;
  --space-bg1: #061229;
  --space-bg2: #0a1a3a;
  --space-bg3: #0f224a;

  --neon-blue: #00eaff;
  --neon-cyan: #22d3ee;
  --neon-green: #22ff88;
  --neon-green-strong: #2bff8a;
  --neon-purple: #7c3aed;

  --text-main: #e8f2ff;
  --text-dim: rgba(232, 242, 255, 0.72);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.1);
  --border: rgba(0, 234, 255, 0.18);
  --border-strong: rgba(0, 234, 255, 0.35);
}

/* Make page backgrounds transparent so starfield layers can show through */
html, body {
  background: transparent !important;
}

/* Background gradient layer (inserted by JS as #space-bg) */
#space-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(1200px 800px at 20% -10%, var(--space-bg2) 0%, var(--space-bg1) 40%, var(--space-bg0) 100%),
              radial-gradient(900px 600px at 120% -20%, #06283a 0%, transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
}

/* Starfield canvas (inserted by JS) sits above gradient but below UI */
canvas#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
  mix-blend-mode: screen;
}

/* Typography and general polish */
body {
  color: var(--text-main);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  letter-spacing: 0.3px;
  text-shadow: 0 0 14px rgba(0, 234, 255, 0.15);
}

a {
  color: var(--neon-cyan) !important;
  text-decoration: none;
}
a:hover { text-decoration: underline; color: var(--neon-green) !important; }

/* Glass cards with neon edges */
.card, .tile, .slot, .dragon, .limbo, .cart {
  background: linear-gradient(180deg, rgba(8, 12, 24, 0.66), rgba(8, 12, 24, 0.42)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 22px rgba(0, 234, 255, 0.08);
  backdrop-filter: blur(8px) saturate(105%);
}

.tile { border-radius: 14px !important; }

.notice {
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.1), rgba(43, 255, 138, 0.08)) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Neon buttons */
.btn, .btn-primary, .btn-success, .dragon-btn, .spin-btn, .tab-btn, .copy {
  position: relative;
  border-radius: 12px !important;
  border: 1px solid var(--border-strong) !important;
  background: linear-gradient(180deg, rgba(0, 234, 255, 0.18), rgba(43, 255, 138, 0.18)) !important;
  color: #06121b !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 30px rgba(0, 234, 255, 0.22), 0 8px 28px rgba(43, 255, 138, 0.18), 0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover, .btn-primary:hover, .btn-success:hover, .dragon-btn:hover, .spin-btn:hover, .tab-btn:hover, .copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0, 234, 255, 0.28), 0 12px 36px rgba(43, 255, 138, 0.24);
}

.btn:disabled, .btn-primary:disabled, .btn-success:disabled, .dragon-btn:disabled, .spin-btn:disabled {
  filter: saturate(0.7) brightness(0.9);
  cursor: not-allowed;
}

.tab-btn.active {
  background: linear-gradient(180deg, var(--neon-green-strong), var(--neon-cyan)) !important;
  color: #07121f !important;
  border-color: rgba(43, 255, 138, 0.9) !important;
}

/* Inputs */
.input, input, textarea, select {
  background: rgba(0, 12, 24, 0.4) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  border-radius: 12px !important;
}

.label, .sub { color: var(--text-dim) !important; }

/* Accents */
.accent, .status-ready { color: var(--neon-green) !important; text-shadow: 0 0 12px rgba(43, 255, 138, 0.35); }
.status-loading { color: var(--neon-cyan) !important; }
.status-error { color: #ff6b6b !important; }

.value-xl {
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.25), 0 0 8px rgba(43, 255, 138, 0.2);
}

/* Jupiter plugin container and other boxes */
#jupiter-plugin-container, .status-bar, .result-text {
  background: rgba(0, 12, 24, 0.35) !important;
  border: 1px dashed rgba(0, 234, 255, 0.25) !important;
}

/* Mascot styles */
#space-mascot {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
}

#space-mascot .mascot-wrap {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: radial-gradient(80px 80px at 50% 40%, rgba(0,234,255,0.2), rgba(43,255,138,0.18));
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px rgba(0, 234, 255, 0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
  display: grid;
  place-items: center;
  animation: floaty 3.5s ease-in-out infinite;
  backdrop-filter: blur(6px);
}

#space-mascot img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 18px rgba(0, 234, 255, 0.35));
}

#space-mascot .bubble {
  position: absolute;
  right: 96px;
  bottom: 32px;
  background: rgba(0, 12, 24, 0.75);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-main);
  padding: 8px 12px;
  max-width: 280px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

#space-mascot:hover .bubble { opacity: 1; transform: translateY(0); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  canvas#starfield { display: none; }
  #space-mascot .mascot-wrap { animation: none; }
}