/* DEJA VU signature background system.
   Start/menu use a richer animated shape field; gameplay uses the same visual
   language at lower contrast so cards remain the primary focus. */

:root {
  --deja-purple-950: #10051f;
  --deja-purple-900: #18082d;
  --deja-purple-800: #29104b;
  --deja-purple-700: #44206c;
  --deja-violet: #a46cff;
  --deja-cyan: #57d6ff;
  --deja-pink: #ff6fc8;
  --deja-orange: #ffad55;
  --deja-green: #65efb7;
  --deja-yellow: #ffe36a;
}

.start-screen,
.menu-screen,
.game-screen {
  /* These three screens intentionally keep the DEJA VU identity palette even
     when panel/settings themes change. This prevents low-contrast text when a
     user selects light mode while preserving theme behavior elsewhere. */
  --text: #f8f5ff;
  --muted: #c4b7d8;
  --line: rgba(202, 166, 255, 0.22);
  --surface: rgba(45, 20, 73, 0.9);
  --surface-soft: rgba(54, 27, 86, 0.7);
  --accent: #b98aff;
  --accent-2: #67d9ff;
  --accent-ink: #150625;
  color: var(--text);
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 8%, rgba(164, 108, 255, 0.25), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(87, 214, 255, 0.12), transparent 30%),
    linear-gradient(145deg, var(--deja-purple-950), var(--deja-purple-800) 58%, #1a0a36);
}

.start-screen::after,
.menu-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.035), transparent 25%),
    linear-gradient(to bottom, rgba(255,255,255,0.025), transparent 28%, rgba(0,0,0,0.16));
}

.game-screen {
  background:
    radial-gradient(ellipse at 50% 53%, rgba(66, 34, 102, 0.32), rgba(14, 5, 29, 0.74) 58%, rgba(8, 2, 18, 0.94) 100%),
    radial-gradient(circle at 15% 10%, rgba(164, 108, 255, 0.16), transparent 30%),
    radial-gradient(circle at 90% 88%, rgba(87, 214, 255, 0.08), transparent 26%),
    linear-gradient(155deg, #120523, #241042 56%, #10051f);
}

.game-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 18%, rgba(7, 2, 16, 0.28) 72%, rgba(5, 1, 12, 0.58));
}

.menu-pattern { display: none !important; }

.deja-shape-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.deja-shape-field .deja-shape {
  --shape-color: var(--deja-violet);
  --shape-size: 2.6rem;
  --shape-opacity: 0.14;
  --shape-duration: 24s;
  --shape-delay: 0s;
  --shape-x: 10%;
  --shape-rotate: 0deg;
  position: absolute;
  top: -18%;
  left: var(--shape-x);
  width: var(--shape-size);
  height: var(--shape-size);
  opacity: var(--shape-opacity);
  color: var(--shape-color);
  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 28%, transparent));
  animation: deja-shape-drift var(--shape-duration) linear var(--shape-delay) infinite;
  will-change: transform;
}

.deja-shape.circle { border-radius: 50%; background: currentColor; }
.deja-shape.square { border-radius: 14%; background: currentColor; }
.deja-shape.oval { background: currentColor; clip-path: ellipse(48% 32% at 50% 50%); }
.deja-shape.diamond { background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.deja-shape.triangle { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.deja-shape.pentagon { background: currentColor; clip-path: polygon(50% 0%, 98% 36%, 80% 100%, 20% 100%, 2% 36%); }
.deja-shape.hexagon { background: currentColor; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.deja-shape.star { background: currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); }
.deja-shape.cross { background: currentColor; clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.deja-shape.crescent { border-radius: 50%; background: currentColor; }
.deja-shape.crescent::after { content:''; position:absolute; width:78%; height:78%; top:3%; left:28%; border-radius:50%; background: var(--deja-purple-900); }

.deja-shape:nth-child(1) { --shape-x: 6%; --shape-size: 2.2rem; --shape-color: var(--deja-cyan); --shape-duration: 23s; --shape-delay: -4s; }
.deja-shape:nth-child(2) { --shape-x: 19%; --shape-size: 3.1rem; --shape-color: var(--deja-pink); --shape-duration: 29s; --shape-delay: -18s; --shape-opacity: .11; }
.deja-shape:nth-child(3) { --shape-x: 34%; --shape-size: 2.5rem; --shape-color: var(--deja-green); --shape-duration: 26s; --shape-delay: -9s; }
.deja-shape:nth-child(4) { --shape-x: 48%; --shape-size: 3.4rem; --shape-color: var(--deja-violet); --shape-duration: 32s; --shape-delay: -25s; --shape-opacity: .12; }
.deja-shape:nth-child(5) { --shape-x: 63%; --shape-size: 2rem; --shape-color: var(--deja-orange); --shape-duration: 24s; --shape-delay: -14s; }
.deja-shape:nth-child(6) { --shape-x: 78%; --shape-size: 2.8rem; --shape-color: var(--deja-yellow); --shape-duration: 30s; --shape-delay: -6s; --shape-opacity: .1; }
.deja-shape:nth-child(7) { --shape-x: 91%; --shape-size: 2.35rem; --shape-color: var(--deja-cyan); --shape-duration: 27s; --shape-delay: -21s; }
.deja-shape:nth-child(8) { --shape-x: 13%; --shape-size: 1.75rem; --shape-color: var(--deja-orange); --shape-duration: 20s; --shape-delay: -13s; --shape-opacity: .09; }
.deja-shape:nth-child(9) { --shape-x: 42%; --shape-size: 1.9rem; --shape-color: var(--deja-pink); --shape-duration: 21s; --shape-delay: -3s; --shape-opacity: .09; }
.deja-shape:nth-child(10) { --shape-x: 71%; --shape-size: 2.15rem; --shape-color: var(--deja-green); --shape-duration: 25s; --shape-delay: -19s; --shape-opacity: .1; }
.deja-shape:nth-child(11) { --shape-x: 27%; --shape-size: 1.55rem; --shape-color: var(--deja-yellow); --shape-duration: 19s; --shape-delay: -11s; --shape-opacity: .08; }
.deja-shape:nth-child(12) { --shape-x: 86%; --shape-size: 1.8rem; --shape-color: var(--deja-violet); --shape-duration: 22s; --shape-delay: -8s; --shape-opacity: .1; }

.game-screen .deja-shape-field { opacity: 0.46; }
.game-screen .deja-shape-field .deja-shape {
  --shape-opacity: 0.075;
  filter: blur(.15px) drop-shadow(0 0 8px color-mix(in srgb, currentColor 18%, transparent));
}

.game-screen .game-header,
.game-screen .game-stats,
.game-screen .game-message,
.game-screen .pairs-label,
.game-screen .progress-track,
.menu-screen .menu-content,
.start-screen .start-logo,
.start-screen .brand,
.start-screen .start-prompt {
  position: relative;
  z-index: 1;
}

.game-screen .game-stats div,
.game-screen .icon-button {
  background: linear-gradient(145deg, rgba(56, 26, 91, 0.82), rgba(24, 10, 45, 0.9));
  border-color: rgba(192, 150, 255, 0.22);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(4, 0, 12, .18);
  backdrop-filter: blur(7px);
}

.game-screen .game-stats span,
.game-screen .game-message,
.game-screen .pairs-label,
.menu-screen .menu-footer a,
.start-screen .start-prompt { color: var(--muted); }

.game-screen .progress-track {
  background: rgba(9, 3, 20, 0.58);
  border: 1px solid rgba(192, 150, 255, 0.12);
}

.game-screen .progress-track span { background: linear-gradient(90deg, var(--deja-violet), var(--deja-cyan), var(--deja-pink)); }

.menu-screen .menu-button {
  background: linear-gradient(145deg, rgba(48, 22, 79, 0.86), rgba(25, 10, 48, 0.88));
  border-color: rgba(192, 150, 255, 0.2);
  backdrop-filter: blur(8px);
}

.menu-screen .menu-button-primary {
  background: linear-gradient(120deg, #bf8cff, #6edcff);
  color: #140523;
}

@keyframes deja-shape-drift {
  0% { transform: translate3d(-7vw, -22vh, 0) rotate(var(--shape-rotate)); }
  100% { transform: translate3d(22vw, 138vh, 0) rotate(calc(var(--shape-rotate) + 110deg)); }
}

@media (max-width: 430px) {
  .deja-shape-field .deja-shape { --shape-size: 2rem; }
  .deja-shape-field .deja-shape:nth-child(n+9) { display: none; }
}

html.reduced-motion .deja-shape-field .deja-shape { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .deja-shape-field .deja-shape { animation: none !important; }
}