body { margin:0; background:#1b2a49; font-family:"Comic Sans MS","Trebuchet MS",sans-serif; color:#fff; display:flex; justify-content:center; }
#app { position:relative; width:960px; max-width:100vw; }
canvas { width:100%; display:block; background:#7ec850; border-radius:12px; }
#hud { display:flex; justify-content:space-between; align-items:center; font-size:28px; padding:8px 16px; background:#0d1b36; border-radius:12px 12px 0 0; }
.panel { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); background:rgba(13,27,54,0.95); border:4px solid #ffd23f; border-radius:20px; padding:24px 32px; text-align:center; min-width:60%; }
.hidden { display:none !important; }
#splash.hidden { display:none !important; }
h1 { font-size:56px; margin:0 0 16px; color:#ffd23f; }
h2 { font-size:44px; margin:0 0 16px; }
button { font-family:inherit; cursor:pointer; border:none; border-radius:16px; background:#ff4d4d; color:#fff; padding:14px 24px; margin:8px; font-size:28px; box-shadow:0 6px 0 #a02020; }
button:active { transform:translateY(4px); box-shadow:0 2px 0 #a02020; }
button.big { font-size:40px; padding:18px 40px; }
button.ans { background:#3fa9f5; box-shadow:0 6px 0 #1d6aa5; font-size:48px; min-width:120px; }
button.upg { background:#7a4dff; box-shadow:0 6px 0 #4a2bb0; }
button.upg[disabled] { background:#555; box-shadow:none; }
button.small { font-size:22px; padding:4px 16px; margin:0 0 0 12px; box-shadow:0 3px 0 #a02020; }
.row { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; font-size:26px; }
.swatch { width:56px; height:56px; border-radius:50%; border:4px solid #fff; margin:8px; cursor:pointer; padding:0; }
.swatch.sel { border-color:#ffd23f; transform:scale(1.2); }
label { margin:0 16px; }

/* ========== FLASHY SPLASH SCREEN ========== */
#splash {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #0a0e1a;
}

.splash-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(255, 70, 100, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(80, 120, 255, 0.2), transparent 50%),
    radial-gradient(ellipse 50% 30% at 80% 70%, rgba(255, 200, 50, 0.15), transparent 50%),
    linear-gradient(180deg, #0d1b36 0%, #1a0a2e 50%, #0a1628 100%);
  animation: bgPulse 4s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.15); }
}

.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
  animation: contentIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes contentIn {
  from { opacity: 0; transform: scale(0.85) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.splash-tag {
  font-size: 18px;
  letter-spacing: 8px;
  color: #ffd23f;
  margin: 0 0 12px;
  text-transform: uppercase;
  opacity: 0.9;
  animation: tagFlash 1.8s ease-in-out infinite;
}

@keyframes tagFlash {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 8px #ffd23f; }
  50%      { opacity: 1;   text-shadow: 0 0 20px #ffd23f, 0 0 40px #ff9800; }
}

.splash-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  line-height: 1.05;
}

.splash-title .word {
  display: block;
  font-size: clamp(42px, 9vw, 72px);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff 0%, #ffd23f 25%, #ff4d4d 50%, #ffd23f 75%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.6));
}

.splash-title .word.accent {
  font-size: clamp(48px, 11vw, 88px);
  background: linear-gradient(90deg, #ff4d4d, #ff9800, #ffd23f, #ff9800, #ff4d4d);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2.2s linear infinite, pulseScale 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 80, 80, 0.7));
}

@keyframes shine {
  to { background-position: 200% center; }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.splash-sub {
  font-size: 22px;
  color: #a0c4ff;
  margin: 0 0 28px;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(100, 160, 255, 0.5);
}

.splash-btn {
  font-size: 36px !important;
  padding: 20px 48px !important;
  background: linear-gradient(180deg, #ff6b6b, #e63946) !important;
  box-shadow: 0 8px 0 #9b2226, 0 0 30px rgba(255, 70, 70, 0.5) !important;
  animation: btnGlow 1.4s ease-in-out infinite alternate;
  transition: transform 0.15s, box-shadow 0.15s;
}

.splash-btn:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 10px 0 #9b2226, 0 0 40px rgba(255, 100, 100, 0.7) !important;
}

.splash-btn:active {
  transform: scale(0.98) translateY(4px);
  box-shadow: 0 2px 0 #9b2226 !important;
}

@keyframes btnGlow {
  from { box-shadow: 0 8px 0 #9b2226, 0 0 20px rgba(255, 70, 70, 0.4); }
  to   { box-shadow: 0 8px 0 #9b2226, 0 0 45px rgba(255, 100, 80, 0.75); }
}

.splash-hint {
  margin-top: 18px;
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 2px;
  animation: hintBlink 1.5s ease-in-out infinite;
}

@keyframes hintBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* sparkle particles */
.sparkles {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 30% 70%, #ffd23f, transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, #fff, transparent),
    radial-gradient(2px 2px at 85% 55%, #ff9800, transparent),
    radial-gradient(1.5px 1.5px at 50% 40%, #fff, transparent),
    radial-gradient(2px 2px at 20% 85%, #ff6b6b, transparent),
    radial-gradient(1.5px 1.5px at 60% 90%, #a0c4ff, transparent);
  background-size: 200% 200%;
  animation: sparkleMove 8s linear infinite;
  opacity: 0.7;
}

@keyframes sparkleMove {
  0%   { background-position: 0% 0%, 20% 30%, 40% 10%, 60% 50%, 80% 20%, 10% 80%, 50% 90%; }
  100% { background-position: 100% 100%, 80% 70%, 60% 90%, 40% 50%, 20% 80%, 90% 20%, 50% 10%; }
}

/* fade-out when leaving splash */
#splash.fade-out {
  animation: splashOut 0.55s ease-in forwards;
  pointer-events: none;
}

@keyframes splashOut {
  to { opacity: 0; transform: scale(1.08); }
}