:root{--bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--panel: rgba(255, 255, 255, .95);--text: #2d3748;--muted: #718096;--accent: #ed64a6;--accent-hover: #d53f8c;--secondary: #4fd1c7;--secondary-hover: #38b2ac;--success: #48bb78;--warning: #ed8936;--shadow: rgba(0, 0, 0, .1);--shadow-lg: rgba(0, 0, 0, .15)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{color:var(--accent);text-decoration:none;transition:all .2s ease}a:hover{color:var(--accent-hover);transform:translateY(-1px)}.app{display:flex;min-height:100%;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px var(--shadow);position:sticky;top:0;z-index:10}.app-header h1{margin:0;font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header nav{display:flex;align-items:center;gap:8px}.app-header nav a{padding:8px 16px;border-radius:20px;font-weight:500;transition:all .2s ease}.app-header nav a:hover{background:#ed64a61a;transform:translateY(-2px)}main{flex:1;padding:32px 24px}footer{padding:16px 24px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,.2)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.card{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 25px var(--shadow);transition:all .3s ease;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--secondary),var(--success))}.card:hover{transform:translateY(-8px);box-shadow:0 16px 40px var(--shadow-lg)}.card h3{margin:0;font-size:20px;font-weight:600;color:var(--text)}.card p{margin:0;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:25px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;border:none;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;box-shadow:0 4px 12px #ed64a64d;text-decoration:none}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ed64a666;background:linear-gradient(135deg,var(--accent-hover),var(--accent))}.btn.secondary{background:linear-gradient(135deg,var(--secondary),var(--secondary-hover));box-shadow:0 4px 12px #4fd1c74d}.btn.secondary:hover{box-shadow:0 8px 20px #4fd1c766;background:linear-gradient(135deg,var(--secondary-hover),var(--secondary))}.badge{display:inline-block;font-size:12px;font-weight:500;color:var(--muted);background:#7180961a;padding:4px 12px;border-radius:12px;width:fit-content}h2{font-size:32px;font-weight:700;margin:0 0 24px;background:linear-gradient(135deg,var(--text),var(--muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-container{max-width:600px;margin:0 auto;text-align:center}.game-status{font-size:18px;font-weight:600;margin:16px 0;padding:12px 24px;background:var(--panel);border-radius:15px;box-shadow:0 4px 12px var(--shadow)}.tic-tac-toe-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:24px auto}.tic-tac-toe-cell{aspect-ratio:1;font-size:32px;font-weight:700;background:var(--panel);border:2px solid rgba(255,255,255,.2);border-radius:15px;box-shadow:0 4px 12px var(--shadow);transition:all .2s ease;min-height:80px}.tic-tac-toe-cell:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow-lg);border-color:var(--accent)}.game-controls{margin-top:24px;display:flex;justify-content:center;gap:16px}.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:400px;margin:24px auto}.memory-card{aspect-ratio:1;font-size:28px;background:var(--panel);border:2px solid rgba(255,255,255,.2);border-radius:15px;box-shadow:0 4px 12px var(--shadow);transition:all .3s ease;min-height:80px;position:relative;overflow:hidden}.memory-card:hover:not(:disabled){transform:translateY(-2px) rotateY(15deg);box-shadow:0 8px 20px var(--shadow-lg)}.memory-card.matched{background:linear-gradient(135deg,var(--success),#38a169);border-color:var(--success);transform:scale(.95)}.memory-card.flipped{background:linear-gradient(135deg,var(--secondary),var(--secondary-hover));border-color:var(--secondary)}.success-message{background:linear-gradient(135deg,var(--success),#38a169);color:#fff;padding:16px 24px;border-radius:15px;font-weight:600;margin:16px 0;box-shadow:0 4px 12px #48bb784d}.snake-game-board{border:3px solid var(--accent);border-radius:15px;background:linear-gradient(135deg,#1a202c,#2d3748);position:relative;margin:24px auto;overflow:hidden;box-shadow:0 8px 25px var(--shadow-lg)}.snake-segment{position:absolute;background:linear-gradient(135deg,var(--success),#38a169);border-radius:2px;box-shadow:0 2px 4px #0003}.snake-head{background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:4px}.apple{position:absolute;background:linear-gradient(135deg,var(--warning),#dd6b20);border-radius:50%;box-shadow:0 2px 8px #ed893666;animation:pulse 1s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}.game-over-message{background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff;padding:16px 24px;border-radius:15px;font-weight:600;margin:16px 0;box-shadow:0 4px 12px #e53e3e4d}.score-display{font-size:18px;font-weight:600;margin:16px 0;padding:12px 24px;background:var(--panel);border-radius:15px;box-shadow:0 4px 12px var(--shadow);display:inline-block}
