.tetris-game{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(34,211,238,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(168,85,247,.15),transparent 50%),var(--color-bg)}.tetris-container{width:100%;max-width:480px;background:var(--color-surface);border-radius:24px;padding:24px 20px;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d}.tetris-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.tetris-back-btn{background:var(--color-surface-light);border:none;color:var(--color-text);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.tetris-back-btn:hover{background:#475569}.tetris-title{font-size:1.6rem;font-weight:800;color:var(--color-text)}.tetris-main{display:flex;gap:16px;margin-bottom:20px}.tetris-board-wrapper{position:relative;flex:1}.tetris-board{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);gap:1px;background:var(--color-bg);border-radius:8px;padding:4px;aspect-ratio:10 / 20;width:100%}.tetris-cell{background:var(--color-surface-light);border-radius:2px;opacity:.4}.tetris-cell-filled{opacity:1;box-shadow:inset 0 0 0 1px #ffffff26;animation:tetrisPop .15s ease}.tetris-cell-ghost{background:transparent;border:2px solid;opacity:.3;border-radius:2px}@keyframes tetrisPop{0%{transform:scale(.85)}to{transform:scale(1)}}.tetris-overlay{position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:#0f172aeb;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:fadeIn .3s ease}.tetris-overlay-title{font-size:1.4rem;font-weight:800;color:var(--color-text)}.tetris-overlay-score{font-size:1rem;color:var(--color-text-muted)}.tetris-btn-restart{background:linear-gradient(135deg,#22d3ee,#a855f7);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .15s ease,filter .2s ease}.tetris-btn-restart:hover{filter:brightness(1.1);transform:translateY(-1px)}.tetris-sidebar{display:flex;flex-direction:column;gap:10px;width:110px}.tetris-stat{background:var(--color-bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.tetris-stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.tetris-stat-value{font-size:1.2rem;font-weight:700;color:var(--color-text)}.next-piece-preview{background:var(--color-bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;align-items:center}.next-piece-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);align-self:flex-start}.next-piece-grid{display:grid;gap:2px;width:100%}.next-piece-cell{aspect-ratio:1;border-radius:2px}.tetris-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.tetris-controls-row{display:flex;gap:8px;justify-content:center}.tetris-btn{background:var(--color-surface-light);border:none;color:var(--color-text);width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .15s ease}.tetris-btn:hover{background:#475569;transform:translateY(-1px)}.tetris-controls-dpad{display:flex;flex-direction:column;align-items:center;gap:8px}.tetris-controls-dpad-row{display:flex;gap:8px}.tetris-btn-dpad{width:48px;height:48px}.tetris-btn-drop{background:linear-gradient(135deg,#22d3ee,#a855f7);color:#fff;border:none;padding:10px 24px;border-radius:10px;font-weight:600;cursor:pointer;margin-top:4px;transition:transform .15s ease,filter .2s ease}.tetris-btn-drop:hover{filter:brightness(1.1);transform:translateY(-1px)}.tetris-hint{text-align:center;font-size:.75rem;color:var(--color-text-muted)}@media (max-width: 380px){.tetris-title{font-size:1.3rem}.tetris-sidebar{width:90px}}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(236,72,153,.15),transparent 50%),var(--color-bg)}.game-container{width:100%;max-width:420px;background:var(--color-surface);border-radius:24px;padding:32px 24px;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d}.header{position:relative;text-align:center;margin-bottom:24px}.back-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);background:var(--color-surface-light);border:none;color:var(--color-text);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease}.back-btn:hover{background:#475569}.title{font-size:2rem;font-weight:800;letter-spacing:-.02em;display:flex;justify-content:center;gap:8px}.title-tic{color:var(--color-x-light)}.title-tac{color:var(--color-text)}.title-toe{color:var(--color-o-light)}.scoreboard{display:flex;justify-content:space-between;gap:12px;margin-bottom:20px;background:var(--color-bg);border-radius:16px;padding:16px 12px}.score-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.score-x{color:var(--color-x-light)}.score-o{color:var(--color-o-light)}.score-draw{color:var(--color-draw)}.score-value{font-size:1.5rem;font-weight:700}.score-label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.status{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;margin-bottom:20px;font-weight:600;font-size:1.05rem;background:var(--color-surface-light);transition:all .3s ease;animation:fadeIn .3s ease}.status-x{color:var(--color-x-light)}.status-o{color:var(--color-o-light)}.status-winner{animation:pulse .6s ease}.status-draw{color:var(--color-draw)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}.cell{aspect-ratio:1;background:var(--color-surface-light);border:none;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,background .2s ease;animation:popIn .4s ease backwards}.cell:hover:not(:disabled){background:#475569;transform:translateY(-2px)}.cell:disabled{cursor:not-allowed}.cell-filled{animation:fillPop .3s ease}.cell-winning{background:#eab30840;box-shadow:inset 0 0 0 2px var(--color-draw)}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fillPop{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}.icon{width:42%;height:42%}.icon-x{color:var(--color-x-light)}.icon-o{color:var(--color-o-light)}.controls{display:flex;gap:12px}.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;border:none;font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .15s ease,filter .2s ease}.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--color-x),var(--color-o));color:#fff}.btn-secondary{background:var(--color-surface-light);color:var(--color-text)}.menu{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(34,211,238,.15),transparent 50%),var(--color-bg)}.menu-container{width:100%;max-width:480px;text-align:center}.menu-title{font-size:2.5rem;font-weight:800;color:var(--color-text);margin-bottom:8px;letter-spacing:-.02em}.menu-subtitle{color:var(--color-text-muted);margin-bottom:32px;font-size:1rem}.menu-cards{display:flex;flex-direction:column;gap:16px}.menu-card{background:var(--color-surface);border:none;border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 15px 30px -8px #0006,0 0 0 1px #ffffff0d}.menu-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -8px #00000080,0 0 0 1px #ffffff1a}.menu-card-ttt{color:var(--color-x-light)}.menu-card-tetris{color:#22d3ee}.menu-card-title{font-size:1.3rem;font-weight:700;color:var(--color-text)}.menu-card-desc{font-size:.85rem;color:var(--color-text-muted)}@media (max-width: 380px){.title{font-size:1.6rem}.menu-title{font-size:2rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-x: #6366f1;--color-x-light: #818cf8;--color-o: #ec4899;--color-o-light: #f472b6;--color-bg: #0f172a;--color-surface: #1e293b;--color-surface-light: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-draw: #eab308}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh}