:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#e0e0e0}body{background:radial-gradient(ellipse at 20% 50%,rgba(88,28,135,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(15,82,186,.1) 0%,transparent 50%),#0a0a0a}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .25rem;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{margin:0;color:#fff6;font-size:.9rem}.game-selector{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.game-btn{padding:.75rem 1.5rem;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;background:#ffffff08;color:#ffffffb3;font-size:.95rem;cursor:pointer;transition:all .2s;font-family:inherit}.game-btn:hover{border-color:#a78bfa66;background:#a78bfa14;color:#fff}.game-btn.active{border-color:#a78bfa99;background:#a78bfa26;color:#a78bfa;box-shadow:0 0 20px #a78bfa1a}.game-container{width:100%;max-width:500px;border:1px solid rgba(255,255,255,.08);border-radius:1rem;background:#ffffff05;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-title{text-align:center;font-size:1.25rem;font-weight:600;margin:0 0 .5rem;color:#e0e0e0}.game-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;font-size:.85rem;color:#ffffff80}.game-stats span{font-variant-numeric:tabular-nums}.stat-value{color:#a78bfa;font-weight:600;margin-left:.25rem}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.5rem}.memory-card{aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;background:#ffffff08;cursor:pointer;font-size:2rem;display:grid;place-items:center;transition:all .3s;-webkit-user-select:none;user-select:none}.memory-card:hover:not(.flipped):not(.matched){border-color:#a78bfa4d;background:#a78bfa14;transform:scale(1.02)}.memory-card.flipped{border-color:#60a5fa66;background:#60a5fa1a}.memory-card.matched{border-color:#34d39966;background:#34d39914;cursor:default}.memory-card .card-back{font-size:1.5rem;color:#fff3}.snake-canvas{display:block;width:100%;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;background:#0000004d;margin-bottom:1rem}.snake-controls{display:grid;grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,3.5rem);gap:.4rem;justify-content:center}.dpad-btn{width:3.5rem;height:3.5rem;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;background:#ffffff0a;color:#fff9;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:all .15s;user-select:none;-webkit-user-select:none}.dpad-btn:hover{background:#a78bfa1f;border-color:#a78bfa4d}.dpad-btn:active{transform:scale(.92)}.dpad-up{grid-area:up}.dpad-down{grid-area:down}.dpad-left{grid-area:left}.dpad-right{grid-area:right}.typing-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.25rem;line-height:2;padding:1.5rem;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;background:#0003;margin-bottom:1rem;min-height:6rem;letter-spacing:.02em}.typing-display .correct{color:#34d399}.typing-display .incorrect{color:#f87171;text-decoration:underline}.typing-display .current{background:#a78bfa4d;border-radius:2px;padding:0 1px}.typing-display .upcoming{color:#ffffff4d}.typing-input{width:100%;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;background:#ffffff08;color:#e0e0e0;font-family:inherit;font-size:1rem;outline:none;transition:border-color .2s}.typing-input:focus{border-color:#a78bfa80}.typing-input:disabled{opacity:.4}.action-row{display:flex;justify-content:center;margin-top:1.5rem}.restart-btn{padding:.6rem 1.5rem;border:1px solid rgba(167,139,250,.3);border-radius:.5rem;background:#a78bfa1a;color:#a78bfa;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .2s}.restart-btn:hover{background:#a78bfa33;border-color:#a78bfa80}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.win-card{border:1px solid rgba(167,139,250,.3);border-radius:1rem;background:#111;padding:2.5rem;text-align:center;max-width:20rem;box-shadow:0 0 60px #a78bfa26}.win-card h2{margin:0 0 .5rem;font-size:1.75rem;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.win-card p{margin:0 0 1.5rem;color:#ffffff80}.win-card button{padding:.6rem 2rem;border:1px solid rgba(167,139,250,.4);border-radius:.5rem;background:#a78bfa26;color:#a78bfa;font-size:1rem;cursor:pointer;font-family:inherit;transition:all .2s}.win-card button:hover{background:#a78bfa40}.instructions{text-align:center;font-size:.8rem;color:#ffffff59;margin-top:1rem}@media(max-width:480px){.header h1{font-size:1.8rem}.game-container{padding:1.25rem}.memory-grid{gap:.35rem}.memory-card{font-size:1.5rem}}
