:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #646cff;--secondary-color: #535bf2;--bg-color: #1a1a1a;--board-bg: #2a2a2a;--square-bg: #3a3a3a;--square-hover: #4a4a4a;--text-color: #ffffff;--x-color: #ff4d4d;--o-color: #4dffff}body{margin:0;display:flex;justify-content:center;align-items:flex-start;padding-top:50px;min-width:320px;min-height:100vh;background-color:var(--bg-color);color:var(--text-color)}.page-header{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;width:100%}h1,.title-line{font-size:3.2em;line-height:1.1;text-align:center;background:linear-gradient(to right,var(--primary-color),var(--o-color));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.mode-line{font-size:2em;line-height:1.1;text-align:center;background:linear-gradient(to right,var(--primary-color),var(--o-color));-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:.5rem}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--board-bg);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--primary-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em;width:fit-content;margin:0 auto;background-color:var(--board-bg);border-radius:12px;box-shadow:0 10px 30px #00000080}.menu{display:flex;flex-direction:row;align-items:center;gap:1rem}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.square{background-color:var(--square-bg);border:2px solid var(--board-bg);border-radius:8px;font-size:3rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s ease;-webkit-user-select:none;user-select:none;box-shadow:0 4px 6px #0000004d}.square:hover{background-color:var(--square-hover);transform:translateY(-2px);box-shadow:0 6px 8px #0006}.square.x{color:var(--x-color);text-shadow:0 0 10px rgba(255,77,77,.5)}.square.o{color:var(--o-color);text-shadow:0 0 10px rgba(77,255,255,.5)}.mark-animation{animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.board{display:grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);gap:10px;background-color:var(--board-bg);padding:15px;border-radius:12px;box-shadow:0 10px 30px #00000080;margin:0 auto}.status{margin-top:2rem;font-size:1.5rem;text-align:center;min-height:2em}.reset-btn{display:block;margin:2rem auto 0;background-color:var(--secondary-color);color:#fff;font-weight:700;padding:10px 20px;border:none;border-radius:25px;box-shadow:0 4px 15px #535bf266;transition:all .3s ease}.reset-btn:hover{background-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 6px 20px #646cff80}.reset-btn:active{transform:translateY(0)}.winning-square{background-color:#ffffff1a!important;border-color:var(--primary-color)!important}.menu-btn{background-color:#4a4a4a;color:#fff;margin:10px;font-size:1.2rem;padding:15px 30px;transition:all .2s}.menu-btn:hover{background-color:#5a5a5a;transform:translateY(-2px);border-color:var(--primary-color)}.menu-btn:disabled{background-color:#333;color:#666;cursor:not-allowed;transform:none;border-color:transparent}.name-input{display:block;width:200px;margin:0 auto 20px;padding:10px 15px;border-radius:8px;border:1px solid #555;background-color:#333;color:#fff;font-size:1.1rem;text-align:center}.name-input:focus{outline:2px solid var(--primary-color);border-color:transparent}h2{font-size:2em;margin-bottom:1rem;color:var(--primary-color);text-align:center}.button-container{display:flex;justify-content:center;gap:20px;margin-top:20px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:12px 24px;border-radius:4px;box-shadow:0 4px 6px #0000004d;z-index:1000;animation:slideDown .3s ease-out;border:1px solid var(--primary-color)}@keyframes slideDown{0%{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%);opacity:1}}