*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#581c87,#0f172a);padding:2rem}.card{background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px;padding:2rem;box-shadow:0 25px 50px -12px #00000080;max-width:400px;width:100%}.title{font-size:3rem;font-weight:700;color:#fff;text-align:center;margin-bottom:.5rem;letter-spacing:.05em}.subtitle{color:#cbd5e1;text-align:center;margin-bottom:2rem;font-size:.875rem}.subtitle-game{color:#cbd5e1;text-align:center;margin-bottom:1rem;font-size:.875rem}.subtitle-large{font-size:1.875rem;font-weight:700;color:#fff;text-align:center;margin-bottom:1rem}.text-small{font-size:.875rem;color:#cbd5e1;text-align:center}.text-center{text-align:center;color:#fff}.margin-bottom{margin-bottom:.75rem}.margin-bottom-small{margin-bottom:.5rem}.margin-top{margin-top:1rem}.bold{font-weight:600}.button-container{display:flex;flex-direction:column;gap:1rem;width:100%}.btn{width:100%;padding:1rem 1.5rem;border-radius:12px;font-weight:600;border:none;cursor:pointer;transition:all .2s;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,#3b82f6,#a855f7);color:#fff;box-shadow:0 4px 6px #0000001a;font-size:1.125rem;padding:1rem 1.5rem}.btn-primary:hover{background:linear-gradient(135deg,#2563eb,#9333ea)}.btn-secondary{background:linear-gradient(135deg,#ec4899,#a855f7);color:#fff;box-shadow:0 4px 6px #0000001a;padding:.75rem 1.5rem}.btn-secondary:hover{background:linear-gradient(135deg,#db2777,#9333ea)}.btn-copy{background:#ffffff1a;color:#fff;margin-top:.75rem;padding:.5rem 1rem;font-size:.875rem}.btn-copy:hover{background:#fff3}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 6px #0000001a;margin-top:.75rem;padding:.75rem 1.5rem}.btn-success:hover{background:linear-gradient(135deg,#059669,#047857)}.btn-reset{background:linear-gradient(135deg,#3b82f6,#ec4899);color:#fff;box-shadow:0 4px 6px #0000001a;margin-top:1rem}.btn-reset:hover{background:linear-gradient(135deg,#2563eb,#db2777)}.join-section{background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1rem;border-radius:12px;display:flex;flex-direction:column;gap:.75rem}.join-text{font-size:.875rem;color:#cbd5e1}.textarea{width:100%;background:#fff3;color:#fff;font-size:.875rem;padding:.75rem;border-radius:12px;resize:none;height:6rem;border:2px solid rgba(255,255,255,.3);outline:none;transition:border-color .2s;font-family:inherit}.textarea::-moz-placeholder{color:#94a3b8}.textarea::placeholder{color:#94a3b8}.textarea:focus{border-color:#fff9}.textarea-code{background:#fff;color:#000;font-size:.75rem;height:10rem;font-family:Courier New,monospace;border:none}.finalize-section{margin-top:1.5rem;width:100%}.player-info{text-align:center;margin-bottom:1rem}.player-x{color:#60a5fa;font-weight:700}.player-o{color:#f472b6;font-weight:700}.game-status{text-align:center;margin-bottom:1.5rem;color:#fff}.status-large{font-size:1.875rem;font-weight:700}.status-medium{font-size:1.5rem;font-weight:600}.board{display:grid;grid-template-columns:repeat(3,80px);gap:1px;padding:1px;width:252px;height:252px;background:#1e293b;border-radius:8px;overflow:hidden;margin:0 auto 1.5rem}.square{width:80px;height:80px;background:#fff;border:none;font-size:2.25rem;font-weight:700;cursor:pointer;transition:all .2s}.square-x{color:#3b82f6}.square-o{color:#ec4899}.square-oldest{opacity:.5}.square-empty:hover{background:#f1f5f9}.square:disabled{cursor:not-allowed}.pieces-container{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.pieces-section{color:#fff;text-align:center}.pieces-label{font-size:.875rem;font-weight:600;margin-bottom:.25rem}.pieces-display{display:flex;gap:.25rem}.piece-indicator{width:2rem;height:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}.piece-x{background:#3b82f6;color:#fff}.piece-o{background:#ec4899;color:#fff}.piece-empty{background:#33415580}.square-oldest{opacity:.4;transition:opacity .2s ease-in-out}.winner-text{font-size:1.3rem;font-weight:700;margin-top:6px;text-align:center}.winner-text span{color:#ff4d4d}.scoreboard{display:flex;justify-content:center;gap:20px;font-size:1.1rem;font-weight:700;margin-top:8px}.game-over{opacity:.5}