:root{font-family: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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;color:#fff}.app{display:flex;flex-direction:column;align-items:center;padding:20px;min-height:100vh}h1{font-size:2.5rem;margin-bottom:20px;text-shadow:0 0 20px rgba(255,255,255,.3)}.status-bar{display:flex;gap:20px;margin-bottom:15px;padding:12px 25px;background:#ffffff1a;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-bar span{font-weight:600;padding:8px 16px;border-radius:20px}.role.x{background:#e94560}.role.o{background:#0f4c75}.turn{background:#fff3}.turn.your-turn{background:#4ecca3;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.opponent{background:#ffffff1a}.opponent.connected{background:#4ecca3}.status{margin-bottom:25px;font-size:1.1rem;color:#aaa}.game-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:15px;background:#0000004d;border-radius:15px;box-shadow:0 0 40px #4ecca34d}.cell{width:120px;height:120px;background:#ffffff0d;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;transition:all .2s ease;border:3px solid transparent}.cell.clickable{cursor:pointer}.cell.clickable:hover{background:#4ecca333;border-color:#4ecca3}.cell.filled{cursor:not-allowed}.cell.x .mark{color:#e94560;text-shadow:0 0 20px rgba(233,69,96,.5)}.cell.o .mark{color:#3282b8;text-shadow:0 0 20px rgba(50,130,184,.5)}.cell.winning{background:#4ecca34d;border-color:#4ecca3;animation:winPulse .5s ease infinite alternate}@keyframes winPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.mark{animation:popIn .2s ease}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.controls{display:flex;gap:15px;margin-top:25px}.btn{padding:15px 30px;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease}.btn.share{background:#3282b8;color:#fff}.btn.share:hover{background:#0f4c75;transform:translateY(-2px)}.btn.new-game{background:#4ecca3;color:#1a1a2e}.btn.new-game:hover{background:#3db892;transform:translateY(-2px)}.winner-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.winner-modal{background:#1a1a2ef2;padding:50px 80px;border-radius:20px;text-align:center;box-shadow:0 0 60px #4ecca380;border:3px solid #4ecca3;animation:scaleIn .3s ease}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.winner-modal h2{font-size:2.5rem;margin-bottom:30px}.winner-modal .btn{background:#4ecca3;color:#1a1a2e}@media(max-width:500px){.cell{width:90px;height:90px;font-size:3rem}.status-bar{flex-direction:column;gap:10px}h1{font-size:1.8rem}.winner-modal{padding:30px 40px}.winner-modal h2{font-size:1.8rem}}.btn.qr{background:#9b59b6;color:#fff}.btn.qr:hover{background:#8e44ad;transform:translateY(-2px)}.qr-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.qr-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:40px;border-radius:20px;text-align:center;box-shadow:0 0 60px #9b59b666;border:3px solid #9b59b6;animation:scaleIn .3s ease}.qr-modal h3{font-size:1.5rem;margin-bottom:25px;color:#fff}.qr-container{background:#fff;padding:15px;border-radius:15px;display:inline-block;margin-bottom:20px}.qr-hint{color:#aaa;margin-bottom:20px;font-size:.95rem}.btn.close{background:#ffffff1a;color:#fff;padding:10px 25px}.btn.close:hover{background:#fff3}