/* Odd One Out: a crowd of identical dots with one that doesn't belong, and a magnifying lens. */
:root {
  --bg: #0f1218; --bg2: #161b24; --card: rgba(24, 30, 41, 0.92); --card2: #232c3b; --line: #34405a;
  --text: #eef3f8; --muted: #93a1b8; --accent: #c6f432; --yellow: #c6f432; --red: #ff4f9a; --green: #38e1a0;
  --grad: linear-gradient(135deg, #c6f432, #4fd1ff);
  --font-head: 'Bungee', var(--font-body); --font-body: 'Rubik', Inter, system-ui, sans-serif; --head-weight: 400;
  --radius: 12px;
}
body { background: #0f1218 fixed; }
.btn { border-radius: 10px; color: #0b1406; font-family: var(--font-head); font-weight: 400; letter-spacing: 0.04em; box-shadow: 4px 4px 0 #ff4f9a; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #ff4f9a; }
.btn.ghost { box-shadow: 4px 4px 0 #000; font-family: var(--font-body); font-weight: 800; }
.card { border-width: 2px; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); }
.hero { color: #c6f432; text-shadow: 5px 5px 0 #ff4f9a; }
.big-code { background: none; color: #c6f432; -webkit-text-fill-color: #c6f432; text-shadow: 5px 5px 0 #ff4f9a; }
.banner { text-shadow: 3px 3px 0 #ff4f9a; }
.pop { animation: snoop 0.6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes snoop { 0% { transform: translateX(-40px) skewX(-15deg); opacity: 0; } 60% { transform: translateX(8px) skewX(4deg); opacity: 1; } 100% { transform: none; } }
.secret { border-color: #c6f432; }

.scene .crowd { position: absolute; inset: -4vh -4vw; display: grid; gap: 4vmin; align-content: space-around; opacity: 0.1; }
.scene .crowd span { justify-self: center; width: 2.2vmin; height: 2.2vmin; min-width: 10px; min-height: 10px; border-radius: 50%; background: #4fd1ff; animation: peek 5s ease-in-out infinite; }
.scene .crowd span.odd { border-radius: 2px; background: #ff4f9a; transform: rotate(45deg); box-shadow: 0 0 18px #ff4f9a; filter: brightness(2.5); animation: oddpulse 1.2s ease-in-out infinite; }
@keyframes peek { 50% { transform: scale(0.75); } }
@keyframes oddpulse { 50% { transform: rotate(45deg) scale(1.35); } }
.scene .lens { position: absolute; width: 34vmin; height: 34vmin; border-radius: 50%; border: 1.4vmin solid rgba(198, 244, 50, 0.16); box-shadow: inset 0 0 60px rgba(198, 244, 50, 0.15), 0 0 40px rgba(198, 244, 50, 0.12); animation: search 22s ease-in-out infinite; }
.scene .lens::after { content: ''; position: absolute; width: 4vmin; height: 18vmin; background: rgba(198, 244, 50, 0.16); border-radius: 2vmin; right: -9vmin; bottom: -15vmin; transform: rotate(-45deg); }
@keyframes search { 0% { left: 5%; top: 10%; } 25% { left: 60%; top: 50%; } 50% { left: 70%; top: 5%; } 75% { left: 15%; top: 55%; } 100% { left: 5%; top: 10%; } }
.scene.small .crowd { opacity: 0.15; }