@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap";.game-container{background-color:var(--bg-card);padding:1rem;border-radius:var(--border-radius);box-shadow:0 0 30px #00000080,inset 0 0 0 1px #ffffff0d;max-width:100%;width:fit-content;margin:0 auto;display:flex;flex-direction:column;align-items:center;position:relative;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(0,243,255,.1)}.share-link-text{background:#0000004d;padding:.5rem;border-radius:4px;font-family:monospace;font-size:.8rem;color:var(--text-muted);word-break:break-all;margin-bottom:.5rem;max-width:100%;border:1px solid rgba(255,255,255,.1)}h1{font-size:2rem;line-height:1;font-weight:800;color:#fff;margin-bottom:.25rem;letter-spacing:.1em;text-shadow:0 0 10px var(--primary),0 0 20px var(--primary);text-transform:uppercase;font-family:inherit}@media (min-width: 768px){h1{font-size:2.5rem}}.description{color:var(--text-muted);margin-bottom:.5rem;text-align:center;font-size:.9rem;line-height:1.2}.description .highlight{color:var(--primary);font-weight:600;text-shadow:0 0 5px var(--primary-dark)}.score-board{display:flex;justify-content:center;width:100%;max-width:375px;margin-bottom:2rem;margin-top:1rem;gap:1rem}.player-card{flex:1;padding:.5rem;border-radius:calc(var(--border-radius) * .75);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:100px;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1);background-color:#0000004d}.player-card.p1{border-color:#00f3ff4d;background:linear-gradient(180deg,#00f3ff0d,#0003)}.player-card.p2{border-color:#ff00004d;background:linear-gradient(180deg,#ff00000d,#0003)}.player-card.p1.active-turn{transform:translateY(-5px);box-shadow:var(--shadow-glow-cyan);border-color:var(--primary);background-color:#00f3ff1a}.player-card.p2.active-turn{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-glow-magenta);border-color:var(--secondary);background-color:#ff00000d}.player-bg-pattern{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.15;pointer-events:none;z-index:0;background-repeat:repeat}.player-bg-pattern.p1{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6l12 12M18 6l-12 12' stroke='%2300f3ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:24px 24px}.player-bg-pattern.p2{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23ff0000' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-size:24px 24px}.player-name-p1{color:var(--primary);font-weight:700;font-size:1.25rem;margin-bottom:.5rem;text-shadow:0 0 5px var(--primary-dark)}.player-name-p2{color:var(--secondary);font-weight:700;font-size:1.25rem;margin-bottom:.5rem;text-shadow:0 0 5px var(--secondary-dark)}.player-status-text{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem;font-weight:600;z-index:2}.player-status-text.online{color:#0f0;text-shadow:0 0 5px rgba(0,255,0,.5)}.player-status-text.waiting{color:#fa0;text-shadow:0 0 5px rgba(255,170,0,.5)}.score-label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600;opacity:.8}.score-value{font-size:3.5rem;font-weight:800;line-height:1;z-index:1;position:relative}.canvas-container{position:relative;background-color:#0009;border-radius:4px;box-shadow:0 0 20px #00000080;overflow:hidden;border:none}canvas{touch-action:none;display:block}.cursor-locked,.cursor-valid{cursor:none}.controls{margin-top:2rem;display:flex;gap:1rem;justify-content:center}.btn-icon{display:flex;align-items:center;justify-content:center;gap:0;padding:0;width:3.5rem;height:3.5rem;border-radius:4px;overflow:hidden;transition:width .3s ease,background-color .2s,box-shadow .2s,border-radius .3s;background-color:transparent;cursor:pointer;white-space:nowrap}.btn-icon span{opacity:0;max-width:0;margin-left:0;overflow:hidden;transition:all .3s ease;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.btn-icon svg{width:20px;height:20px;min-width:20px}.btn-icon:hover{width:11rem;border-radius:4px}.btn-icon:hover span{opacity:1;max-width:100px;margin-left:.5rem}.btn-reset{color:var(--text-muted);border:1px solid var(--text-muted)}.btn-reset:hover{background-color:#ffffff1a;color:#fff;border-color:#fff;box-shadow:0 0 10px #fff3}.btn-multiplayer{background-color:#00f3ff1a;color:var(--primary);border:1px solid var(--primary);box-shadow:0 0 10px #00f3ff1a}.btn-multiplayer:hover{background-color:var(--primary);color:#000;box-shadow:0 0 20px var(--primary)}.btn-end-multiplayer{background-color:#ff00001a;color:var(--secondary);border:1px solid var(--secondary);box-shadow:0 0 10px #ff00001a}.btn-end-multiplayer:hover{background-color:var(--secondary);color:#000;box-shadow:0 0 20px var(--secondary)}.online-status{background-color:#00f3ff0d;padding:.25rem .5rem;border-radius:var(--border-radius);margin-bottom:.5rem;margin-top:.5rem;border:none;color:var(--text-main);font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;box-sizing:border-box;box-shadow:0 0 15px #00f3ff0d}.role-badge{color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 0 5px var(--primary-light);margin:0;font-size:.8rem}.player-card.opponent{opacity:.8;border-style:dashed;border-color:#fff3;background:repeating-linear-gradient(45deg,#0003,#0003 10px,#0000004d 10px,#0000004d 20px)}.players-status{width:100%;display:flex;justify-content:space-between;margin-top:.5rem;gap:.5rem}.p-status{background-color:#0006;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:.35rem .5rem;flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;font-size:.8rem;font-weight:500;transition:all .3s ease}.last-move{font-size:.75rem;color:var(--text-muted);font-family:monospace;opacity:.8;margin-left:auto;margin-top:0}.p-status.online{border-color:#00ff004d;background-color:#00ff000d;color:#0f0;box-shadow:0 0 10px #00ff001a}.p-status.offline{border-color:#ff00004d;background-color:#ff00000d;color:#f44}.p-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem;box-shadow:0 0 8px currentColor}.p-status.online .dot{background-color:#0f0}.p-status.offline .dot{background-color:red}.last-move{font-size:.75rem;color:var(--text-muted);margin-top:.4rem;font-family:monospace;opacity:.8}.qr-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.winner-text{color:gold;font-weight:900;font-size:1.5rem;position:absolute;top:10px;left:50%;transform:translate(-50%);text-shadow:0 0 10px #ffd700,0 0 20px #ffaa00;animation:fadeIn .5s ease;z-index:10;letter-spacing:.1em}.winner-pulse{animation:pulse-winner 1.5s infinite ease-in-out;color:gold!important;text-shadow:0 0 20px #ffd700!important}@keyframes pulse-winner{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.qr-modal{background:#101418f2;border:1px solid var(--primary);padding:2rem;border-radius:var(--border-radius);text-align:center;max-width:90%;width:400px;box-shadow:0 0 40px #00f3ff33;display:flex;flex-direction:column;align-items:center;position:relative;animation:slideUp .3s ease}.qr-modal h3{margin-top:0;color:var(--primary);text-shadow:0 0 10px rgba(0,243,255,.3);margin-bottom:1rem;font-size:1.5rem}.qr-wrapper{background:#fff;padding:1rem;border-radius:8px;margin:1rem 0}.or-text{color:var(--text-muted);margin:1rem 0;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em}.btn-copy,.btn-close-modal{padding:.75rem 2rem;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .2s;width:100%;margin-bottom:.5rem}.btn-copy{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);color:#fff}.btn-copy:hover{background:#ffffff1a;border-color:#fff}.btn-close-modal{background:transparent;border:1px solid var(--secondary);color:var(--secondary);margin-top:.5rem}.btn-close-modal:hover{background:var(--secondary);color:#000;box-shadow:0 0 15px var(--secondary)}.copy-success-text{color:#0f0;font-size:.8rem;margin-bottom:.5rem;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.cursor-wait-0{cursor:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='16' r='3' fill='%2300f3ff'/%3E%3C/svg%3E") 16 16,auto}.cursor-wait-1{cursor:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='16' r='3' fill='%2300f3ff'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%2300f3ff'/%3E%3C/svg%3E") 16 16,auto}.cursor-wait-2{cursor:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='16' r='3' fill='%2300f3ff'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%2300f3ff'/%3E%3Ccircle cx='24' cy='16' r='3' fill='%2300f3ff'/%3E%3C/svg%3E") 16 16,auto}:root{--font-main: "Outfit", sans-serif;--bg-app: #050510;--bg-card: rgba(13, 13, 20, .7);--primary-light: rgba(0, 243, 255, .1);--primary: #00f3ff;--primary-dark: #00bdd6;--primary-glow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;--secondary-light: rgba(255, 0, 0, .1);--secondary: #ff0000;--secondary-dark: #cc0000;--secondary-glow: 0 0 10px #ff0000, 0 0 20px #ff0000;--text-main: #e0e0ff;--text-muted: #8a8ab5;--border-radius: 12px;--shadow-sm: 0 0 5px rgba(0, 243, 255, .2);--shadow-md: 0 0 15px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 243, 255, .2);--shadow-lg: 0 0 30px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 243, 255, .1);--shadow-glow-cyan: 0 0 15px rgba(0, 243, 255, .4), 0 0 30px rgba(0, 243, 255, .2);--shadow-glow-magenta: 0 0 15px rgba(255, 0, 0, .4), 0 0 30px rgba(255, 0, 0, .2)}body{font-family:var(--font-main);background-color:var(--bg-app);color:var(--text-main);margin:0;padding:0;-webkit-font-smoothing:antialiased;background-image:linear-gradient(rgba(0,243,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,.03) 1px,transparent 1px);background-size:30px 30px;min-height:100vh}.app-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;box-sizing:border-box}