:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}:root{--color-x: #4361ee;--color-o: #f72585;--color-winner-bg: #ffd60a;--color-primary: #6c63ff;--color-primary-dk: #574fd6;--color-board-line: #2d3748;--color-card: #ffffff;--color-text: #1a1a2e;--color-muted: #64748b;--color-bg-start: #667eea;--color-bg-end: #764ba2;--radius-card: 20px;--radius-btn: 50px;--shadow-card: 0 8px 32px rgba(0,0,0,.18)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1rem;background:linear-gradient(135deg,var(--color-bg-start),var(--color-bg-end))}.game{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:400px}.player-setup{background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:clamp(1.5rem,6vw,2.5rem);width:100%;max-width:360px;text-align:center}.player-setup h2{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:800;color:var(--color-text);margin-bottom:.25rem}.setup-subtitle{font-size:.9rem;color:var(--color-muted);margin-bottom:1.5rem}.input-group{margin-bottom:1rem;text-align:left}.input-group label{display:block;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:.4rem}.input-group input{width:100%;padding:.75rem 1rem;font-size:1rem;font-family:inherit;border:2px solid #e2e8f0;border-radius:10px;outline:none;transition:border-color .2s;color:var(--color-text)}.input-group input:focus{border-color:var(--color-primary)}.player-setup button{margin-top:.5rem;width:100%;padding:.85rem;font-size:1rem;font-weight:700;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dk));border:none;border-radius:var(--radius-btn);cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #6c63ff66}.player-setup button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff80}.player-setup button:disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed}.scoreboard{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,4vw,1.5rem);width:100%}.score{flex:1;background:var(--color-card);border-radius:14px;padding:.75rem .5rem;text-align:center;box-shadow:0 2px 10px #0000001a;border-bottom:4px solid transparent;transition:border-color .2s,transform .2s}.score-active-x{border-bottom-color:var(--color-x);transform:scale(1.04)}.score-active-o{border-bottom-color:var(--color-o);transform:scale(1.04)}.score-winner{transform:scale(1.06)}.player-name{font-size:clamp(.75rem,2.5vw,.875rem);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-name-x{color:var(--color-x)}.player-name-o{color:var(--color-o)}.player-letter{font-size:clamp(.7rem,2vw,.8rem);font-weight:600;color:var(--color-muted);margin:.1rem 0}.player-score{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:900;color:var(--color-text);line-height:1}.vs{font-size:clamp(.75rem,2.5vw,.875rem);font-weight:800;color:#ffffffb3;flex-shrink:0}.status{font-size:clamp(1rem,4vw,1.2rem);font-weight:700;color:#fff;text-align:center;min-height:1.8em}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;background:var(--color-board-line);padding:6px;border-radius:16px;width:clamp(240px,80vw,312px);aspect-ratio:1;box-shadow:0 8px 24px #0000004d}.square{background:#fff;border:none;border-radius:10px;font-size:clamp(2rem,10vw,3rem);font-weight:900;font-family:inherit;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background .15s,transform .1s;line-height:1}.square:hover:not(:disabled){background:#f0eeff}.square-x{color:var(--color-x)}.square-o{color:var(--color-o)}.square-winner{background:var(--color-winner-bg);transform:scale(1.06);box-shadow:0 0 0 3px #ffd60a80;animation:pop .25s ease}@keyframes pop{0%{transform:scale(1)}60%{transform:scale(1.12)}to{transform:scale(1.06)}}.btn-next{padding:.75rem 2rem;font-size:1rem;font-weight:700;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dk));border:none;border-radius:var(--radius-btn);cursor:pointer;box-shadow:0 4px 14px #6c63ff66;transition:transform .15s,box-shadow .15s}.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff80}.tournament-end{background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:clamp(2rem,8vw,3rem) clamp(1.5rem,6vw,2.5rem);width:100%;max-width:380px;text-align:center}.trophy{font-size:clamp(3rem,12vw,4.5rem);margin-bottom:.5rem;animation:bounce .6s ease}@keyframes bounce{0%{transform:translateY(-20px);opacity:0}60%{transform:translateY(6px)}to{transform:translateY(0);opacity:1}}.tournament-end h1{font-size:clamp(1.3rem,5vw,1.7rem);font-weight:800;color:var(--color-text);margin-bottom:1.25rem}.final-score{background:#f8f9ff;border-radius:12px;padding:1rem;margin-bottom:1.5rem}.final-score-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.final-name-x{font-weight:700;color:var(--color-x);font-size:clamp(.9rem,3vw,1rem)}.final-name-o{font-weight:700;color:var(--color-o);font-size:clamp(.9rem,3vw,1rem)}.final-num{font-size:clamp(1.2rem,4vw,1.5rem);font-weight:900;color:var(--color-text)}.tournament-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.tournament-buttons button{padding:.75rem 1.5rem;font-size:.95rem;font-weight:700;font-family:inherit;border:none;border-radius:var(--radius-btn);cursor:pointer;transition:transform .15s,box-shadow .15s;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dk));box-shadow:0 4px 14px #6c63ff66}.tournament-buttons button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff80}.tournament-buttons .btn-secondary{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none}.tournament-buttons .btn-secondary:hover{background:#f0eeff;box-shadow:none}