/* ============================================================================
   SPELL CADET STYLES
   ----------------------------------------------------------------------------
   Always-dark game theme. Page is the game world; the panel is the arcade
   cabinet sitting inside it.
   ============================================================================ */

:root {
  /* Colour tokens — dark theme baseline */
  --color-background-primary: #1a1a2e;
  --color-background-secondary: #232337;
  --color-background-tertiary: #2c2c44;
  --color-background-info: rgba(33, 150, 243, 0.22);
  --color-background-success: rgba(76, 175, 80, 0.18);
  --color-background-danger: rgba(239, 83, 80, 0.18);
  --color-text-primary: #e8eaed;
  --color-text-secondary: #a8b0bc;
  --color-text-tertiary: #6e7787;
  --color-text-info: #64b5f6;
  --color-text-success: #81c784;
  --color-text-danger: #ef9a9a;
  --color-border-primary: #3a3a52;
  --color-border-secondary: #3a3a52;
  --color-border-tertiary: #2c2c44;
  --color-border-info: #2196f3;
  --color-border-success: #4caf50;
  --color-border-danger: #ef5350;

  /* Game-specific accent colours */
  --neon-cyan: #00d9ff;
  --neon-purple: #b14eff;
  --neon-pink: #ff66ff;

  /* Sizing */
  --border-radius-md: 8px;
  --border-radius-lg: 14px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Trebuchet MS", "Lucida Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

/* Page = the game world. Deep-space gradient + sparse animated starfield. */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  min-height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 1rem;
  /* Layered radial gradients give the space a sense of depth */
  background:
    radial-gradient(ellipse at top, #1a2845 0%, #0a1428 45%, #050817 100%),
    #050817;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* Star layer: pure CSS, no images. Two layers for parallax-ish depth. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background-image:
    radial-gradient(1px 1px at 12% 8%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 67% 14%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 84% 33%, rgba(180,220,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 22% 47%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 52% 56%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(1px 1px at 73% 70%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(2px 2px at 91% 82%, rgba(255,230,180,0.7), transparent 50%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px 1px at 44% 92%, rgba(255,255,255,0.7), transparent 50%);
  animation: starfield-drift 120s linear infinite;
}
body::after {
  background-image:
    radial-gradient(1px 1px at 28% 12%, rgba(180,220,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 58% 38%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(1px 1px at 78% 51%, rgba(255,200,180,0.5), transparent 50%),
    radial-gradient(1px 1px at 16% 67%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(2px 2px at 38% 25%, rgba(255,180,220,0.5), transparent 50%);
  opacity: 0.85;
  animation: starfield-twinkle 6s ease-in-out infinite alternate;
}

@keyframes starfield-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-200px); }
}
@keyframes starfield-twinkle {
  from { opacity: 0.5; }
  to   { opacity: 0.95; }
}

/* The arcade cabinet itself: the game container floats above the starfield */
.game-root {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  padding: 1.5rem 1.25rem 1.75rem;
  background:
    linear-gradient(180deg, rgba(30, 30, 50, 0.85) 0%, rgba(20, 20, 40, 0.92) 100%);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 0 0 1px rgba(0, 217, 255, 0.08),
    0 0 30px rgba(0, 217, 255, 0.15),
    0 0 80px rgba(177, 78, 255, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Title gets the arcade-logo treatment */
.title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
  background: linear-gradient(180deg, #ffffff 0%, #00d9ff 50%, #2196f3 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 0 30px rgba(0, 217, 255, 0.4);
  filter: drop-shadow(0 2px 8px rgba(0, 217, 255, 0.3));
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- BUTTONS ------------------------------------------------------------ */
.btn {
  padding: 9px 16px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 217, 255, 0.35);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.25), rgba(33, 150, 243, 0.35));
  color: #ffffff;
  border-color: rgba(0, 217, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.35), rgba(33, 150, 243, 0.45));
  box-shadow: 0 0 22px rgba(0, 217, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.option-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.option-btn {
  padding: 11px 8px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  text-align: center;
  transition: all 0.15s;
}
.option-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 217, 255, 0.3);
}
.option-btn.selected {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.18), rgba(33, 150, 243, 0.22));
  color: #ffffff;
  border-color: rgba(0, 217, 255, 0.55);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.section-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
}

/* ---- HUD ---------------------------------------------------------------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 1rem;
}
.metric {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 8px;
  border-radius: var(--border-radius-md);
  text-align: center;
}
.metric-label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.metric-value {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 0;
  text-shadow: 0 0 10px currentColor;
  opacity: 0.95;
}

.safety-banner {
  background: rgba(78, 205, 196, 0.12);
  border: 0.5px solid rgba(78, 205, 196, 0.4);
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.safety-banner .icon { font-size: 16px; }

/* ---- TOKEN BAR & SHOP --------------------------------------------------- */
.token-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 217, 102, 0.15), rgba(255, 179, 71, 0.15));
  border: 0.5px solid rgba(255, 217, 102, 0.4);
  padding: 10px 14px;
  border-radius: var(--border-radius-md);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 8px;
}
.token-display { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.token-icon { font-size: 18px; }
.best-stats { font-size: 11px; color: var(--color-text-secondary); }

.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 1rem;
}
.shop-item {
  padding: 10px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.15s;
}
.shop-item:hover:not(.locked):not(.equipped) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 217, 255, 0.3);
}
.shop-item.equipped {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.18), rgba(33, 150, 243, 0.22));
  border-color: rgba(0, 217, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.2);
}
.shop-item.locked { opacity: 0.55; cursor: not-allowed; }
.shop-item.affordable {
  border-color: rgba(255, 217, 102, 0.5);
  box-shadow: 0 0 8px rgba(255, 217, 102, 0.15);
}
.shop-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.shop-desc { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
.shop-cost { font-size: 11px; color: #d4a017; font-weight: 500; }
.shop-equipped-label { font-size: 10px; color: var(--color-text-info); font-weight: 500; }
.shop-locked-label { font-size: 10px; color: var(--color-text-tertiary); }
.shop-preview {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.tab-row { display: flex; gap: 6px; margin-bottom: 8px; }
.tab {
  flex: 1;
  padding: 8px 8px;
  border-radius: var(--border-radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.tab:hover { background: rgba(255, 255, 255, 0.07); }
.tab.active {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.18), rgba(33, 150, 243, 0.22));
  color: #ffffff;
  border-color: rgba(0, 217, 255, 0.5);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}

/* ---- VOICE PICKER ------------------------------------------------------- */
.voice-picker {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
  margin-bottom: 1rem;
}
.voice-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.voice-picker-label { font-size: 13px; color: var(--color-text-secondary); }
.voice-controls { display: flex; gap: 8px; align-items: center; }
.voice-select {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-primary);
  outline: none;
}
.voice-select:focus { box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.4); border-color: rgba(0, 217, 255, 0.6); }

/* ---- PLAY AREA ---------------------------------------------------------- */
.play-area {
  position: relative;
  height: 340px;
  /* Default background: deep space — overridden by [data-background="..."] below */
  background: linear-gradient(180deg, #0a1428 0%, #1a2842 100%);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: filter 0.3s;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.6),
    inset 0 0 2px rgba(0, 217, 255, 0.3),
    0 0 24px rgba(0, 217, 255, 0.1);
}
.play-area.overdrive { animation: overdrive-pulse 1.5s ease-in-out infinite; }
@keyframes overdrive-pulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.15) saturate(1.4); }
}

/* ===== BACKGROUND SCENES =================================================
   Each scene overrides:
     - play-area gradient
     - .stars layer pattern + animation (becomes bubbles/fireflies/etc)
     - optional .ground decoration
   The play-area has data-background="<id>" applied by game.js at render time.
   ====================================================================== */

/* --- Deep Space (default) --- */
.play-area[data-background="space"] {
  background: linear-gradient(180deg, #0a1428 0%, #1a2842 100%);
}
.play-area[data-background="space"] .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 80% 20%, white, transparent),
    radial-gradient(1px 1px at 35% 80%, white, transparent),
    radial-gradient(1px 1px at 90% 50%, white, transparent),
    radial-gradient(1px 1px at 15% 60%, white, transparent),
    radial-gradient(2px 2px at 50% 40%, rgba(255, 255, 255, 0.6), transparent);
  opacity: 0.7;
}

/* --- Underwater --- */
.play-area[data-background="underwater"] {
  background: linear-gradient(180deg, #0a3d6b 0%, #0a2540 60%, #061830 100%);
}
.play-area[data-background="underwater"] .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(3px 4px at 15% 90%, rgba(180, 220, 255, 0.5), transparent 50%),
    radial-gradient(4px 5px at 35% 95%, rgba(200, 230, 255, 0.6), transparent 50%),
    radial-gradient(2px 3px at 55% 88%, rgba(180, 220, 255, 0.55), transparent 50%),
    radial-gradient(5px 6px at 75% 92%, rgba(160, 210, 255, 0.5), transparent 50%),
    radial-gradient(3px 4px at 90% 85%, rgba(200, 230, 255, 0.55), transparent 50%);
  animation: bubbles-rise 8s linear infinite;
}
@keyframes bubbles-rise {
  0%   { transform: translateY(0);   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-380px); opacity: 0; }
}
.play-area[data-background="underwater"]::before {
  /* Caustic light rays from above + seaweed silhouettes anchored at floor.
     The seaweed is drawn as gently curved blades in two layers (darker back row,
     lighter front row) and animated with transform: rotate from the base.
     Light rays are a soft gradient overlay. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(120, 200, 255, 0.18) 0%, transparent 35%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 340' preserveAspectRatio='none'><g fill='%23145d3b' opacity='0.85'><path d='M40 340 Q35 290 42 250 Q48 220 38 180 Q44 150 40 130 L46 130 Q50 150 44 180 Q54 220 48 250 Q41 290 46 340 Z'/><path d='M88 340 Q92 300 86 270 Q80 240 90 215 L96 215 Q86 240 92 270 Q98 300 94 340 Z'/><path d='M180 340 Q175 290 182 260 Q188 230 178 200 Q184 170 180 145 L186 145 Q190 170 184 200 Q194 230 188 260 Q181 290 186 340 Z'/><path d='M310 340 Q315 295 308 265 Q302 235 312 210 L318 210 Q308 235 314 265 Q320 295 316 340 Z'/><path d='M430 340 Q425 290 432 260 Q438 230 428 200 Q434 170 430 145 L436 145 Q440 170 434 200 Q444 230 438 260 Q431 290 436 340 Z'/><path d='M540 340 Q544 300 538 270 Q532 240 542 215 L548 215 Q538 240 544 270 Q550 300 546 340 Z'/></g><g fill='%232ea66a' opacity='0.95'><path d='M70 340 Q65 295 72 265 Q78 235 68 205 Q74 175 70 150 L78 150 Q83 175 76 205 Q86 235 80 265 Q73 295 78 340 Z'><animateTransform attributeName='transform' type='rotate' values='-2 70 340; 2 70 340; -2 70 340' dur='5s' repeatCount='indefinite'/></path><path d='M140 340 Q145 300 138 270 Q132 240 142 215 L150 215 Q140 240 146 270 Q152 300 148 340 Z'><animateTransform attributeName='transform' type='rotate' values='2 140 340; -3 140 340; 2 140 340' dur='4.5s' repeatCount='indefinite'/></path><path d='M240 340 Q235 290 244 258 Q252 226 240 190 Q248 155 244 130 L252 130 Q258 155 250 190 Q262 226 254 258 Q245 290 250 340 Z'><animateTransform attributeName='transform' type='rotate' values='-3 240 340; 3 240 340; -3 240 340' dur='6s' repeatCount='indefinite'/></path><path d='M360 340 Q355 300 362 268 Q368 236 360 200 L370 200 Q364 236 370 268 Q377 300 372 340 Z'><animateTransform attributeName='transform' type='rotate' values='3 360 340; -3 360 340; 3 360 340' dur='5.5s' repeatCount='indefinite'/></path><path d='M470 340 Q474 295 466 265 Q458 230 468 195 Q464 165 466 140 L474 140 Q482 165 476 195 Q486 230 478 265 Q486 295 482 340 Z'><animateTransform attributeName='transform' type='rotate' values='-2 470 340; 2 470 340; -2 470 340' dur='4.8s' repeatCount='indefinite'/></path><path d='M570 340 Q574 300 568 270 Q564 240 572 215 L580 215 Q572 240 578 270 Q584 300 580 340 Z'><animateTransform attributeName='transform' type='rotate' values='2 570 340; -2 570 340; 2 570 340' dur='5.2s' repeatCount='indefinite'/></path></g></svg>");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Swimming fish — a single fish drifting slowly across at mid-depth.
   Soft warm-orange so it stands out from the blue water but doesn't compete
   with the yellow target words at the top of the play area. */
.play-area[data-background="underwater"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'><g fill='%23ff9d5e' opacity='0.9'><ellipse cx='50' cy='15' rx='20' ry='8'/><polygon points='30,15 15,5 15,25'/><circle cx='58' cy='13' r='2' fill='%23000' opacity='0.85'/><circle cx='58.5' cy='12.5' r='0.7' fill='white'/><path d='M40 8 L50 8' stroke='%23e87440' stroke-width='2'/><path d='M40 22 L50 22' stroke='%23e87440' stroke-width='2'/><path d='M66 15 Q69 11 67 7 Q61 9 58 13 Z' fill='%23e87440' opacity='0.7'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 80px 30px;
  background-position: -80px 65%;
  animation: fish-swim 18s linear infinite;
  z-index: 1;
}
@keyframes fish-swim {
  0%   { background-position: -80px 65%; }
  100% { background-position: 700px 65%; }
}

/* --- Forest Night --- */
.play-area[data-background="forest"] {
  background: linear-gradient(180deg, #0a1f0a 0%, #0d2820 50%, #051208 100%);
}
.play-area[data-background="forest"] .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 18% 25%, #d4ff7a, transparent 50%),
    radial-gradient(2px 2px at 42% 40%, #c8ff66, transparent 50%),
    radial-gradient(2px 2px at 68% 30%, #d4ff7a, transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 65%, #b8ff5e, transparent 50%),
    radial-gradient(2px 2px at 55% 55%, #d4ff7a, transparent 50%),
    radial-gradient(1.5px 1.5px at 82% 50%, #c8ff66, transparent 50%),
    radial-gradient(2px 2px at 30% 80%, #d4ff7a, transparent 50%),
    radial-gradient(1.5px 1.5px at 75% 75%, #b8ff5e, transparent 50%);
  animation: firefly-glow 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(180, 255, 100, 0.6));
}
@keyframes firefly-glow {
  0%   { opacity: 0.4; }
  100% { opacity: 0.95; }
}
.play-area[data-background="forest"]::before {
  /* Pine tree silhouettes — triangular layered shapes with trunks */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'><g fill='%23020a05'><polygon points='30,100 5,75 15,75 0,55 18,55 8,35 22,35 12,18 28,18 22,5 38,18 52,18 42,35 56,35 46,55 64,55 50,75 60,75 35,100'/><rect x='28' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23051a10'><polygon points='95,100 70,80 80,80 65,60 85,60 75,42 90,42 80,28 95,15 110,28 100,42 115,42 105,60 125,60 110,80 120,80 95,100'/><rect x='93' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23020a05'><polygon points='165,100 145,82 153,82 140,65 158,65 150,50 162,50 155,35 168,22 181,35 174,50 186,50 178,65 196,65 183,82 191,82 165,100'/><rect x='163' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23051a10'><polygon points='240,100 215,75 225,75 210,55 230,55 220,38 232,38 222,20 240,5 258,20 248,38 260,38 250,55 270,55 255,75 265,75 240,100'/><rect x='238' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23020a05'><polygon points='315,100 290,80 300,80 285,60 305,60 295,42 310,42 300,28 315,15 330,28 320,42 335,42 325,60 345,60 330,80 340,80 315,100'/><rect x='313' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23051a10'><polygon points='390,100 365,75 375,75 360,55 380,55 370,38 382,38 372,20 390,5 408,20 398,38 410,38 400,55 420,55 405,75 415,75 390,100'/><rect x='388' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23020a05'><polygon points='465,100 445,82 453,82 440,65 458,65 450,50 462,50 455,35 468,22 481,35 474,50 486,50 478,65 496,65 483,82 491,82 465,100'/><rect x='463' y='95' width='6' height='5' fill='%23000'/></g><g fill='%23051a10'><polygon points='535,100 510,80 520,80 505,60 525,60 515,42 530,42 520,28 535,15 550,28 540,42 555,42 545,60 565,60 550,80 560,80 535,100'/><rect x='533' y='95' width='6' height='5' fill='%23000'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

/* --- Sunset Cliffs --- */
.play-area[data-background="sunset"] {
  background: linear-gradient(180deg, #ff8c5a 0%, #ff6b9d 35%, #c44569 70%, #3d2546 100%);
}
.play-area[data-background="sunset"] .stars {
  position: absolute;
  inset: 0;
  /* Small puffy clouds drifting */
  background-image:
    radial-gradient(8px 4px at 12% 28%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(10px 5px at 38% 22%, rgba(255, 240, 220, 0.5), transparent 60%),
    radial-gradient(12px 6px at 65% 35%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(8px 4px at 88% 28%, rgba(255, 240, 220, 0.45), transparent 60%);
  animation: clouds-drift 60s linear infinite;
}
@keyframes clouds-drift {
  from { background-position: 0 0; }
  to   { background-position: -200px 0; }
}
.play-area[data-background="sunset"]::before {
  /* Setting sun: big warm glow on the horizon */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 120px at 50% 78%, rgba(255, 220, 100, 0.6), transparent 70%),
    radial-gradient(circle 60px at 50% 78%, rgba(255, 235, 150, 0.8), transparent 60%);
  z-index: 0;
}
.play-area[data-background="sunset"]::after {
  /* Distant mountain silhouettes */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'><polygon points='0,90 0,55 60,30 110,50 160,20 220,45 270,15 330,40 380,25 440,50 490,28 550,45 600,32 600,90' fill='%235a2848' opacity='0.85'/><polygon points='0,90 0,72 50,55 100,68 160,45 210,62 270,42 320,58 380,48 430,62 490,52 550,65 600,55 600,90' fill='%233d2546'/><polygon points='0,90 0,82 80,75 160,82 240,72 320,80 400,75 480,82 560,76 600,80 600,90' fill='%232a1530'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Sunset backgrounds wash out yellow text — add a dark outline */
.play-area[data-background="sunset"] .target-word {
  text-shadow:
    0 0 12px rgba(255, 217, 102, 0.7),
    -1px -1px 0 rgba(60, 20, 40, 0.6),
     1px -1px 0 rgba(60, 20, 40, 0.6),
    -1px  1px 0 rgba(60, 20, 40, 0.6),
     1px  1px 0 rgba(60, 20, 40, 0.6);
}

/* --- Cyber City --- */
.play-area[data-background="cyber"] {
  background: linear-gradient(180deg, #1a0533 0%, #2d0a4a 40%, #4a1668 80%, #ff66c8 100%);
}
.play-area[data-background="cyber"] .stars {
  position: absolute;
  inset: 0;
  /* Tiny pulsing neon dots scattered around for distant lights */
  background-image:
    radial-gradient(1px 1px at 12% 18%, #ff66ff, transparent 50%),
    radial-gradient(1px 1px at 32% 25%, #00ffe5, transparent 50%),
    radial-gradient(1px 1px at 55% 12%, #ffeb3b, transparent 50%),
    radial-gradient(1px 1px at 78% 22%, #ff66ff, transparent 50%),
    radial-gradient(1px 1px at 92% 38%, #00ffe5, transparent 50%);
  animation: neon-flicker 1.5s ease-in-out infinite alternate;
}
@keyframes neon-flicker {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}
.play-area[data-background="cyber"]::before {
  /* Neon grid floor — perspective lines converging on horizon */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  pointer-events: none;
  background-image:
    linear-gradient(transparent 0%, rgba(255, 102, 200, 0.4) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 9.5%,
      rgba(0, 255, 229, 0.5) 9.5%,
      rgba(0, 255, 229, 0.5) 10%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 15%,
      rgba(0, 255, 229, 0.35) 15%,
      rgba(0, 255, 229, 0.35) 15.5%
    );
  transform: perspective(200px) rotateX(60deg) scaleY(1.5);
  transform-origin: bottom;
  opacity: 0.6;
  z-index: 0;
}
.play-area[data-background="cyber"]::after {
  /* Proper city skyline: SVG with varied buildings, antennas, lit windows.
     Inlined as a data URL so the scene is fully contained in CSS.
     Buildings sit on the horizon (bottom 25% of play area, above the grid). */
  content: '';
  position: absolute;
  bottom: 25%;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'><g fill='%23120225'><rect x='0' y='55' width='35' height='35'/><rect x='35' y='40' width='28' height='50'/><rect x='63' y='65' width='22' height='25'/><rect x='85' y='25' width='42' height='65'/><rect x='127' y='55' width='30' height='35'/><rect x='157' y='35' width='38' height='55'/><rect x='195' y='50' width='25' height='40'/><rect x='220' y='15' width='48' height='75'/><rect x='268' y='45' width='32' height='45'/><rect x='300' y='30' width='42' height='60'/><rect x='342' y='55' width='28' height='35'/><rect x='370' y='40' width='35' height='50'/><rect x='405' y='20' width='40' height='70'/><rect x='445' y='50' width='30' height='40'/><rect x='475' y='35' width='38' height='55'/><rect x='513' y='55' width='28' height='35'/><rect x='541' y='40' width='35' height='50'/><rect x='576' y='60' width='24' height='30'/></g><g fill='%23120225'><rect x='105' y='10' width='2' height='15'/><rect x='240' y='3' width='2' height='12'/><rect x='320' y='15' width='2' height='15'/><rect x='420' y='8' width='2' height='12'/><rect x='488' y='22' width='2' height='13'/></g><g fill='%23ffeb3b' opacity='0.6'><rect x='92' y='35' width='2' height='2'/><rect x='98' y='35' width='2' height='2'/><rect x='105' y='40' width='2' height='2'/><rect x='114' y='40' width='2' height='2'/><rect x='98' y='50' width='2' height='2'/><rect x='114' y='55' width='2' height='2'/></g><g fill='%2300ffe5' opacity='0.7'><rect x='225' y='25' width='2' height='2'/><rect x='232' y='25' width='2' height='2'/><rect x='240' y='30' width='2' height='2'/><rect x='248' y='30' width='2' height='2'/><rect x='256' y='35' width='2' height='2'/><rect x='225' y='40' width='2' height='2'/><rect x='240' y='45' width='2' height='2'/><rect x='256' y='50' width='2' height='2'/><rect x='232' y='55' width='2' height='2'/></g><g fill='%23ff66ff' opacity='0.7'><rect x='306' y='40' width='2' height='2'/><rect x='314' y='40' width='2' height='2'/><rect x='322' y='45' width='2' height='2'/><rect x='330' y='45' width='2' height='2'/><rect x='306' y='55' width='2' height='2'/><rect x='322' y='60' width='2' height='2'/><rect x='330' y='65' width='2' height='2'/></g><g fill='%23ffeb3b' opacity='0.6'><rect x='410' y='30' width='2' height='2'/><rect x='418' y='30' width='2' height='2'/><rect x='426' y='35' width='2' height='2'/><rect x='434' y='35' width='2' height='2'/><rect x='410' y='45' width='2' height='2'/><rect x='426' y='50' width='2' height='2'/></g><g fill='%2300ffe5' opacity='0.6'><rect x='481' y='42' width='2' height='2'/><rect x='488' y='42' width='2' height='2'/><rect x='495' y='47' width='2' height='2'/><rect x='502' y='47' width='2' height='2'/><rect x='488' y='55' width='2' height='2'/><rect x='502' y='60' width='2' height='2'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}
.ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.flash-overlay {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.flash-overlay.go { animation: screen-flash 0.15s ease-out; }
.flash-overlay.shield { background: #4ecdc4; }
@keyframes screen-flash {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* ---- WORDS -------------------------------------------------------------- */
.target-word {
  position: absolute;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 2px;
  transform: translateX(-50%);
  transition: opacity 0.2s, color 0.15s, text-shadow 0.15s;
  z-index: 2;
  white-space: nowrap;
  color: #ffd966;
  text-shadow: 0 0 12px rgba(255, 217, 102, 0.5);
}
.target-word.entering { animation: word-enter 0.4s ease-out; }
@keyframes word-enter {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.target-word .typed { color: #4ecdc4; text-shadow: 0 0 8px #4ecdc4; }
.target-word .dots { color: rgba(255, 217, 102, 0.55); letter-spacing: 4px; }
.target-word.locked { filter: brightness(1.3); }
.target-word.locked .untyped { color: #ffe066; }
.target-word.unlocked { color: rgba(255, 217, 102, 0.45); text-shadow: none; }
.target-word.hit { animation: word-explode 0.5s forwards; }
.target-word.hear-mode { font-size: 26px; }
.target-word.shielded { animation: word-shield-block 0.5s forwards; }

@keyframes word-explode {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  30% { transform: translateX(-50%) scale(1.3); opacity: 1; filter: brightness(2); }
  100% { transform: translateX(-50%) scale(0.2); opacity: 0; filter: brightness(3); }
}
@keyframes word-shield-block {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  40% { transform: translateX(-50%) scale(1.15); opacity: 0.8; filter: hue-rotate(120deg); }
  100% { transform: translateX(-50%) scale(0.7); opacity: 0; }
}

.timer-bar-mini {
  position: absolute;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  z-index: 2;
}
.timer-bar-mini .fill {
  height: 100%;
  background: #ffd966;
  transition: width 0.1s linear;
}

.shield-burst {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #4ecdc4;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #4ecdc4, inset 0 0 20px rgba(78, 205, 196, 0.4);
}
.shield-burst.go { animation: shield-burst 0.6s ease-out forwards; }
@keyframes shield-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* ---- ROBOT -------------------------------------------------------------- */
.robot-wrap {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.robot {
  width: 80px;
  height: 90px;
  animation: robot-bob 2s ease-in-out infinite;
}
.robot.shooting { animation: robot-shoot 0.3s ease-out; }
.robot.sad { animation: robot-sad 0.4s ease-in-out; }
.robot.overdrive .eye-pupil-shape {
  fill: #ff66ff;
  filter: drop-shadow(0 0 4px #ff66ff);
}
.robot-shield-aura {
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border-radius: 50%;
  border: 2px solid rgba(78, 205, 196, 0.6);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.5);
}
.robot-wrap.has-shield .robot-shield-aura {
  opacity: 1;
  animation: aura-pulse 2s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}
@keyframes robot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes robot-shoot {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(4px) scale(1.1, 0.9); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes robot-sad {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(0) rotate(-3deg); }
  75% { transform: translateY(0) rotate(3deg); }
}
.eye-pupil-shape { transition: fill 0.15s; }
.eye-pupil {
  animation: blink 4s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 98% { transform: scaleY(0.1); }
}

.second-cannon {
  display: none;
  position: absolute;
  top: 30px;
  right: -14px;
  width: 14px;
  height: 24px;
  background: linear-gradient(180deg, #34495e, #2c3e50);
  border-radius: 3px;
  border: 1px solid #1a1a2e;
  z-index: -1;
}
.robot-wrap.dual .second-cannon { display: block; }
.robot-wrap.dual .second-cannon.left {
  left: -14px;
  right: auto;
  transform: scaleX(-1);
}

/* ---- LASERS ------------------------------------------------------------- */
.laser {
  position: absolute;
  bottom: 95px;
  width: 6px;
  border-radius: 3px;
  transform: translateX(-50%);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.laser.laser-red {
  background: linear-gradient(180deg, #ff4444, #ffaa00);
  box-shadow: 0 0 12px #ff4444;
}
.laser.laser-rainbow {
  background: linear-gradient(180deg, #ff0066, #ff9900, #ffee00, #00ff66, #00aaff, #aa00ff);
  box-shadow: 0 0 14px #ff00ff;
  width: 7px;
}
.laser.laser-lightning {
  background: linear-gradient(180deg, #ffffff, #aaccff);
  box-shadow: 0 0 16px #aaccff, 0 0 32px #6699ff;
  width: 5px;
}
.laser.laser-star {
  background: linear-gradient(180deg, #ffffff, #ffe066);
  box-shadow: 0 0 18px #ffe066, 0 0 36px rgba(255, 224, 102, 0.6);
  width: 6px;
}
.laser.laser-heart {
  background: linear-gradient(180deg, #ff8aa3, #ff1f6d);
  box-shadow: 0 0 16px #ff1f6d, 0 0 28px rgba(255, 100, 160, 0.5);
  width: 8px;
  border-radius: 8px 8px 4px 4px;
}
.laser.laser-fire {
  background: linear-gradient(180deg, #ffeb3b, #ff6b00, #c4180a);
  box-shadow: 0 0 18px #ff6b00, 0 0 36px rgba(255, 107, 0, 0.6);
  width: 9px;
  filter: blur(0.3px);
}
.laser.laser-ice {
  background: linear-gradient(180deg, #e0f7ff, #80d8ff, #2196f3);
  box-shadow: 0 0 16px #80d8ff, 0 0 32px rgba(33, 150, 243, 0.5);
  width: 6px;
  clip-path: polygon(50% 0, 80% 30%, 60% 50%, 80% 70%, 50% 100%, 20% 70%, 40% 50%, 20% 30%);
}
.laser.laser-galaxy {
  background: linear-gradient(180deg, #ffffff, #ff66ff, #b14eff, #4a00b8);
  box-shadow: 0 0 18px #ff66ff, 0 0 36px rgba(177, 78, 255, 0.6);
  width: 7px;
}
.laser.laser-gold {
  background: linear-gradient(180deg, #fff8c4, #ffd700, #b8860b);
  box-shadow: 0 0 22px #ffd700, 0 0 44px rgba(255, 215, 0, 0.7);
  width: 8px;
}
.laser.laser-music {
  background: linear-gradient(180deg, #ff66cc, #b14eff);
  box-shadow: 0 0 12px #ff66cc;
  width: 5px;
}
.laser.laser-confetti {
  /* Confetti beam uses a multi-stop rainbow gradient for that party feel */
  background: linear-gradient(180deg, #ff4444, #ff9900, #ffee00, #00cc66, #00aaff, #aa00ff, #ff4444);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
  width: 6px;
}

/* Streamers — three wavy ribbons emanating from the cannon to the target.
   Each ribbon is a div with a CSS sine-wave drawn via clip-path. */
.streamer {
  position: absolute;
  bottom: 95px;
  width: 8px;
  transform: translateX(-50%);
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* Wave shape via clip-path — produces a ribbon-like sinusoid */
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 10%, 0% 15%,
    0% 25%, 100% 30%,
    100% 40%, 0% 45%,
    0% 55%, 100% 60%,
    100% 70%, 0% 75%,
    0% 85%, 100% 90%,
    100% 100%, 0% 100%
  );
}
.streamer.color-1 { background: linear-gradient(180deg, #ff1f6d, #c44569); box-shadow: 0 0 8px #ff1f6d; }
.streamer.color-2 { background: linear-gradient(180deg, #00d9ff, #2196f3); box-shadow: 0 0 8px #00d9ff; }
.streamer.color-3 { background: linear-gradient(180deg, #ffd700, #ff9900); box-shadow: 0 0 8px #ffd700; }
.streamer.fire { animation: streamer-fire 0.35s linear forwards; }
@keyframes streamer-fire {
  0%   { height: 0; opacity: 1; }
  60%  { height: var(--laser-height); opacity: 1; }
  100% { height: var(--laser-height); opacity: 0; }
}

/* Balloon — a round inflatable that rises from cannon to target */
.balloon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  width: 18px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.15), 0 0 10px currentColor;
}
.balloon::before {
  /* Highlight */
  content: '';
  position: absolute;
  top: 18%; left: 22%;
  width: 25%; height: 25%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}
.balloon::after {
  /* String dangling below */
  content: '';
  position: absolute;
  bottom: -10px; left: 50%;
  width: 1px; height: 10px;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}
.balloon.color-1 { background: #ff4d6d; color: #ff4d6d; }
.balloon.color-2 { background: #ffd700; color: #ffd700; }
.balloon.color-3 { background: #00d9ff; color: #00d9ff; }
.balloon.color-4 { background: #00cc66; color: #00cc66; }
.balloon.go { animation: balloon-fly 0.5s ease-out forwards; }
@keyframes balloon-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--bdx), var(--bdy)) scale(1.1); }
}

/* Fireworks — small skyrocket that arcs to target, then bursts on impact.
   The "rocket" is a glowing dot, the "burst" is handled by spawnParticles
   which is already used for word explosions. */
.firework-rocket {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  width: 6px;
  height: 14px;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(180deg, #ffffff, #ffeb3b, #ff6b00);
  box-shadow: 0 0 12px #ffeb3b, 0 0 24px #ff6b00;
}
.firework-rocket.go { animation: firework-fly 0.25s linear forwards; }
@keyframes firework-fly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  90%  { opacity: 1; transform: translate(var(--bdx), var(--bdy)) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(var(--bdx), var(--bdy)) rotate(var(--rot, 0deg)); }
}

.laser.tier-1 { filter: brightness(1.2); }
.laser.tier-2 { filter: brightness(1.4); }
.laser.fire { animation: laser-fire 0.25s linear forwards; }
@keyframes laser-fire {
  0% { height: 0; opacity: 1; }
  60% { height: var(--laser-height); opacity: 1; }
  100% { height: var(--laser-height); opacity: 0; }
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(150, 220, 255, 0.6) 50%, rgba(80, 180, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.bubble.go { animation: bubble-rise 0.5s ease-out forwards; }
@keyframes bubble-rise {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--bdx), var(--bdy)) scale(1.2); }
}

/* ---- PARTICLES ---------------------------------------------------------- */
.particle {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.particle-circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.particle.go { animation: particle-fly 0.7s ease-out forwards; }
@keyframes particle-fly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(180deg); opacity: 0; }
}

/* Firework central flash — a bright white disc that scales up then fades */
.firework-flash {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffeb3b 30%, transparent 70%);
  opacity: 0;
}
.firework-flash.go { animation: firework-flash 0.6s ease-out forwards; }
@keyframes firework-flash {
  0%   { opacity: 1; transform: scale(0.2); }
  30%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* Firework sparks — sized between particles and the flash; have their own
   colour applied inline so the radial gradient doesn't apply. Brief glowing
   trail via box-shadow set in JS to match each spark's colour. */
.firework-spark {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: -2px;
  margin-top: -2px;
}
.firework-spark.go { animation: firework-spark-fly 1.4s ease-out forwards; }
@keyframes firework-spark-fly {
  0%   { transform: translate(0, 0) scale(1.5); opacity: 1; }
  20%  { transform: translate(calc(var(--fdx) * 0.4), calc(var(--fdy) * 0.4)) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--fdx), var(--fdy)) scale(0.3); opacity: 0; }
}

.muzzle-flash {
  position: absolute;
  bottom: 90px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffeb3b, transparent 70%);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.muzzle-flash.fire { animation: flash 0.2s ease-out; }
@keyframes flash {
  0% { opacity: 1; transform: translateX(-50%) scale(0.5); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.4); }
}

.speaker-icon {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56px;
  opacity: 0.5;
  z-index: 2;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}

/* ---- COMBO BADGE & TOAST ----------------------------------------------- */
.combo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: var(--border-radius-md);
  font-size: 12px;
  font-weight: 500;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}
.combo-badge.show { opacity: 1; }
.combo-badge.tier-1 {
  background: rgba(177, 78, 255, 0.25);
  color: #d9b3ff;
  border: 1px solid #b14eff;
}
.combo-badge.tier-2 {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid #00d9ff;
}
.combo-badge.tier-3 {
  background: rgba(255, 102, 0, 0.3);
  color: #ffcc99;
  border: 1px solid #ff6600;
  animation: badge-pulse 1s infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  border-radius: var(--border-radius-md);
  color: white;
  font-weight: 500;
  font-size: 16px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  white-space: nowrap;
}
.toast.shield-earned { background: rgba(78, 205, 196, 0.95); }
.toast.shield-used { background: rgba(78, 205, 196, 0.85); }
.toast.speed-up { background: rgba(255, 102, 0, 0.9); }
.toast.show { animation: toast-show 1.3s ease-out forwards; }
@keyframes toast-show {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1); }
}

/* ---- BONUS WORD --------------------------------------------------------- */
.bonus-word {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 4px 12px;
  border-radius: var(--border-radius-md);
  background: linear-gradient(90deg, #ff00ff, #ffaa00, #ffee00, #00ff66, #00aaff, #ff00ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow:
    0 0 8px rgba(255, 230, 100, 0.6),
    0 0 16px rgba(255, 100, 200, 0.4);
  animation: bonus-rainbow 2s linear infinite, bonus-bob 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 230, 100, 0.8));
}
@keyframes bonus-rainbow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes bonus-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bonus-word::before {
  content: '✨';
  margin-right: 6px;
  -webkit-text-fill-color: #ffe066;
          text-fill-color: #ffe066;
  color: #ffe066;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  filter: none;
}
.bonus-word::after {
  content: '✨';
  margin-left: 6px;
  -webkit-text-fill-color: #ffe066;
          text-fill-color: #ffe066;
  color: #ffe066;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  filter: none;
}
.bonus-word.captured {
  animation: bonus-capture 0.6s ease-out forwards;
}
@keyframes bonus-capture {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.6); opacity: 1; filter: brightness(2.5); }
  100% { transform: scale(0.3); opacity: 0; filter: brightness(3); }
}

/* ---- INPUT -------------------------------------------------------------- */
.input-row { display: flex; gap: 8px; align-items: center; }
.spell-input {
  flex: 1;
  height: 46px;
  padding: 0 16px;
  font-size: 19px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 1.5px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(0, 217, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  caret-color: var(--neon-cyan);
}
.spell-input:focus {
  border-color: rgba(0, 217, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18), 0 0 18px rgba(0, 217, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
}
.spell-input.invalid {
  border-color: #ff6666;
  box-shadow: 0 0 0 3px rgba(255, 102, 102, 0.25), 0 0 16px rgba(255, 102, 102, 0.3);
}
.spell-input::placeholder { color: rgba(232, 234, 237, 0.35); letter-spacing: 1px; font-weight: 400; }

.feedback {
  text-align: center;
  font-size: 15px;
  margin: 12px 0;
  min-height: 22px;
}
.feedback.success { color: var(--color-text-success); }
.feedback.error { color: var(--color-text-danger); }
.feedback.shield { color: #4ecdc4; }

.subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.hearts { font-size: 16px; letter-spacing: 2px; }
.shields-display { font-size: 16px; letter-spacing: 2px; color: #4ecdc4; }
.icon-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.15s;
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 217, 255, 0.35);
}
.icon-btn.muted { opacity: 0.4; }

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.summary-row:last-child { border-bottom: none; }
.summary-row .label { color: var(--color-text-secondary); }
.summary-row.token-earn { color: #ffd966; font-weight: 600; }

.tier-info {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  flex-wrap: wrap;
  justify-content: center;
}
.tier-pill {
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
}
.tier-pill.active {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.2), rgba(33, 150, 243, 0.25));
  color: #ffffff;
  border-color: rgba(0, 217, 255, 0.5);
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.2);
}

.hint {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: 6px;
}

/* ---- MOBILE ------------------------------------------------------------- */
@media (max-width: 480px) {
  body { padding: 0.5rem; }
  .game-root { padding: 0.75rem; }
  .metric-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .metric { padding: 6px 4px; }
  .metric-value { font-size: 14px; }
  .target-word { font-size: 24px; }
  .play-area { height: 280px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
}