: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}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--bg: #07090f;--panel: #0d111a;--border: #1a2639;--neon-blue: #00eaff;--neon-blue-glow: 0 0 12px #00eaff, 0 0 24px #00eaffa0;--neon-pink: #ff007a;--neon-pink-glow: 0 0 12px #ff007a, 0 0 24px #ff007aaa;--text-muted: #899bb2}body{background:radial-gradient(circle at 50% 20%,#0d0f16,#05070a 70%),repeating-linear-gradient(to bottom,#00eaff08 0px,#00eaff08 2px,transparent 2px,transparent 35px),repeating-linear-gradient(to right,#00eaff08 0px,#00eaff08 2px,transparent 2px,transparent 35px);background-size:cover;color:#fff;font-family:Orbitron,Inter,sans-serif;letter-spacing:.4px}button:focus,button:focus-visible{outline:none}.header{background:#000f1973;padding:10px 16px;border-radius:12px;border:1px solid rgba(0,234,255,.25);box-shadow:0 0 18px #00eaff26;flex-wrap:wrap;gap:12px}.title{font-size:22px;font-weight:700;color:var(--neon-blue);text-shadow:0 0 8px #00eaffaa}.small{font-size:14px;color:var(--text-muted)}.card{background:var(--panel);padding:clamp(12px,3vw,26px);margin-top:18px;border-radius:14px;border:1px solid rgba(0,234,255,.25);box-shadow:0 0 10px #00eaff26,inset 0 0 15px #00eaff14;position:relative}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#00eaff12,#00eaff05);mix-blend-mode:screen;pointer-events:none}.btn{padding:10px 14px;border-radius:10px;cursor:pointer;border:none;background:linear-gradient(to right,#00eaff,#07f);color:#001014;font-weight:700;letter-spacing:.7px;box-shadow:0 0 12px #00eaffbb;transition:.18s ease-out}.btn:hover{background:linear-gradient(to right,#0ff,#0090ff);box-shadow:0 0 18px #00eaff;transform:translateY(-2px)}.btn:active{transform:scale(.96)}.btn,.btn-red{width:100%;max-width:220px}.btn-red{background:linear-gradient(to right,var(--neon-pink),#ff4ca0);box-shadow:0 0 14px #ff007acc;border:none}.btn-red:hover{box-shadow:0 0 18px #ff007a;transform:translateY(-2px)}.input{padding:10px 12px;width:100%;border-radius:10px;border:1px solid rgba(0,234,255,.4);background:#000a1480;color:var(--neon-blue);font-weight:600;outline:none;box-shadow:inset 0 0 10px #00eaff26,0 0 12px #00eaff1a;transition:.2s ease}.input::placeholder{color:#5e7a89;text-shadow:0 0 5px #00eaff44}.input:focus{border-color:#00eaff;box-shadow:inset 0 0 12px #00eaff4d,0 0 18px #00eaff99}.flex{display:flex;gap:15px;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:column}.container{max-width:600px;margin:0 auto;padding:10px}.input-container{display:flex;gap:10px;align-items:center;justify-content:center}.neon-divider{width:100%;height:2px;margin:10px 0;background:linear-gradient(90deg,transparent,var(--neon-blue),transparent);box-shadow:0 0 8px var(--neon-blue),0 0 14px #00eaff88;border-radius:4px;animation:dividerGlow 2.2s infinite ease-in-out}@keyframes dividerGlow{0%,to{opacity:.65}50%{opacity:1}}.holo-divider{width:100%;height:3px;position:relative;background:#00eaff26;overflow:hidden;border-radius:6px;margin:14px 0}.holo-divider:before{content:"";position:absolute;width:40%;height:100%;left:-40%;top:0;background:linear-gradient(90deg,transparent,#00eaff,transparent);box-shadow:0 0 12px #00eaffaa;animation:holoRun 1.6s infinite linear}@keyframes holoRun{0%{left:-40%}to{left:100%}}.neon-particle-divider{position:relative;width:100%;height:2px;background:#00eaff66;margin:12px 0;border-radius:4px;overflow:visible}.neon-particle-divider:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--neon-blue);box-shadow:0 0 12px var(--neon-blue);top:50%;transform:translateY(-50%);left:-6px;animation:dividerParticle 2.4s infinite ease-in-out}@keyframes dividerParticle{0%{left:-6px;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% + 6px);opacity:0}}.dot-container{display:inline-block;width:1.4em;text-align:left}.dot{opacity:0;transition:opacity .25s linear}.dot.visible{opacity:1}.neon-wait-card{position:relative;overflow:hidden;padding:28px;border-radius:16px;background:radial-gradient(circle at 50% 20%,#0f1821,#05080c 80%);border:1px solid rgba(0,234,255,.35);box-shadow:0 0 16px #00eaff44,0 0 30px #00eaff22,inset 0 0 25px #001e26}.neon-wait-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(0,255,255,.06) 0px,rgba(0,255,255,.06) 2px,transparent 2px,transparent 28px),repeating-linear-gradient(0deg,rgba(0,255,255,.06) 0px,rgba(0,255,255,.06) 2px,transparent 2px,transparent 28px);opacity:.25;pointer-events:none}.wait-holo-scan{position:absolute;left:0;width:100%;height:6px;background:linear-gradient(90deg,transparent,rgba(0,234,255,.8),transparent);animation:waitScan 2.2s linear infinite;pointer-events:none}@keyframes waitScan{0%{top:0%;opacity:.1}50%{opacity:.6}to{top:100%;opacity:.1}}.neon-wait-title{font-size:clamp(18px,5vw,26px);font-weight:700;color:#00eaff;text-shadow:0 0 8px #00eaffcc;letter-spacing:.5px;margin-bottom:10px}.neon-dots .dot{color:#00eaff;font-size:22px;text-shadow:0 0 5px #00eaff,0 0 10px #00eaffaa,0 0 18px #00eaff77;display:inline-block}.neon-wait-timer{margin-top:6px;font-size:clamp(22px,7vw,34px);font-weight:700;color:#00bcd4;text-shadow:0 0 12px #00eaff,0 0 25px #00eaff99}.wait-particles{position:absolute;inset:-30px;pointer-events:none}.wait-particles.layer1:before,.wait-particles.layer2:before{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#00eaff;box-shadow:40px -20px #00eaff,-60px 40px #00eaff,70px 10px #00eaff,-20px -70px #00eaff;opacity:.7;animation:waitFloat1 6s ease-in-out infinite}.wait-particles.layer2:before{box-shadow:50px 80px #ff007a,-80px -30px #ff007a,20px -90px #ff007a,-10px 40px #ff007a;animation:waitFloat2 8s ease-in-out infinite}@keyframes waitFloat1{0%{transform:translate(0);opacity:.6}50%{transform:translate(12px,-18px);opacity:1}to{transform:translate(0);opacity:.6}}@keyframes waitFloat2{0%{transform:translate(0);opacity:.5}50%{transform:translate(-18px,20px);opacity:1}to{transform:translate(0);opacity:.5}}.cyber-showdown{margin-top:10px;margin-bottom:25px;display:flex;justify-content:center;align-items:center;gap:clamp(12px,4vw,40px);flex-wrap:wrap;padding:20px 10px}.cyber-card{width:clamp(110px,26vw,160px);padding:18px 10px;border-radius:12px;background:linear-gradient(135deg,#0f0f15,#161623);border:2px solid #23233b;box-shadow:0 0 12px #00ffff14;text-align:center;transition:.28s ease-out;position:relative}.cyber-card.cyber-active{border-color:#00eaff;box-shadow:0 0 12px #00eaff,0 0 20px #00eaff55,0 0 40px #00eaff33;transform:scale(1.06)}.cyber-card.red-active{border-color:#ff005e;box-shadow:0 0 12px #ff005e,0 0 20px #ff005e66,0 0 40px #ff005e33}.cyber-card.red-active.cyber-active{box-shadow:0 0 14px #ff006e,0 0 24px #ff006ea0,0 0 50px #ff006e55}.cyber-card.red-active .cyber-avatar:after{border:2px dashed rgba(255,0,110,.8);animation:rotateRing 2.6s linear infinite}.cyber-card.red-active:before{background:linear-gradient(#ff00781f,#ff007808,#ff007814 60%,#ff00780a)}.cyber-avatar{width:70px;height:70px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#1e1e29,#11111a);border:2px solid #2e2e44;box-shadow:inset 0 0 10px #000}.cyber-avatar.you{box-shadow:inset 0 0 15px #00ffff80,0 0 12px #0ffc}.cyber-avatar.opp{box-shadow:inset 0 0 15px #ff008c66,0 0 12px #ff008ccc}.cell{font-family:Arial Black,sans-serif;letter-spacing:2px}.cyber-symbol{font-size:38px;font-weight:700;color:#00eaff;text-shadow:0 0 6px #00eaff,0 0 12px #00eaffaa,0 0 20px #00eaff55}.red-symbol{color:#ff006e!important;text-shadow:0 0 10px #ff006e,0 0 20px #ff006eaa,0 0 35px #ff006e66}.cell:contains("X"){color:#00faff;text-shadow:0 0 12px #00faff,0 0 28px #00eaff87}.cell:contains("O"){color:#ff00ae;text-shadow:0 0 12px #ff00ae,0 0 28px #ff00ae77}.cyber-avatar.opp .cyber-symbol{color:#ff008c;text-shadow:0 0 6px #ff008c,0 0 12px #ff008caa,0 0 20px #ff008c55}.cyber-avatar.opp{background:radial-gradient(circle,#2a0013,#150008);box-shadow:inset 0 0 15px #ff008c80,0 0 14px #ff008ce6}.cyber-name{margin-top:4px;font-size:15px;font-weight:600;color:#fff;letter-spacing:.5px}.cyber-role{font-size:12px;color:#8b8b9e;margin-top:2px}.cyber-vs{font-size:22px;font-weight:700;padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,#1a1a25,#242436);border:2px solid #33334d;color:#00eaff;text-shadow:0 0 8px #00eaffaa;box-shadow:0 0 12px #00ffff4d;animation:neonPulse 1.4s infinite ease-in-out}@keyframes neonPulse{0%{transform:scale(1);box-shadow:0 0 12px #00eaff77}50%{transform:scale(1.08);box-shadow:0 0 22px #00eaffcc}to{transform:scale(1);box-shadow:0 0 12px #00eaff77}}@media(max-width:620px){.cyber-showdown{gap:14px;padding:10px;flex-direction:column}.cyber-card{width:46%}.cyber-vs{width:fit-content;text-align:center;margin:10px 0}}.cyber-card.cyber-active{position:relative;overflow:visible}.cyber-card.cyber-active:after{content:"";position:absolute;inset:-6px;border-radius:16px;border:2px solid rgba(0,234,255,.5);box-shadow:0 0 12px #00eaff99,0 0 28px #00eaff66,inset 0 0 16px #00eaff55;animation:hologramPulse 1.8s infinite ease-in-out}.cyber-card.cyber-active.red-active:after{content:"";position:absolute;inset:-6px;border-radius:16px;border:2px solid rgba(255,0,110,.55);box-shadow:0 0 12px #ff006e99,0 0 28px #ff006e66,inset 0 0 16px #ff006e55;animation:hologramPulse 1.8s infinite ease-in-out}@keyframes hologramPulse{0%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}to{opacity:.55;transform:scale(.97)}}.cyber-card.cyber-active .cyber-avatar{position:relative}.cyber-card.cyber-active .cyber-avatar:after{content:"";position:absolute;width:92px;height:92px;top:-12px;left:-12px;border-radius:50%;border:2px dashed rgba(0,234,255,.8);animation:rotateRing 2.6s linear infinite;pointer-events:none;box-shadow:0 0 12px #00eaff,0 0 22px #00eaff88}.cyber-card.cyber-active.red-active .cyber-avatar:after{border:2px dashed rgba(255,0,110,.85);box-shadow:0 0 12px #ff006e,0 0 22px #ff006e88}@keyframes rotateRing{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cyber-card.cyber-active:before{content:"";position:absolute;left:0;right:0;top:0;height:100%;border-radius:inherit;background:linear-gradient(#00eaff1f,#00eaff08,#00eaff14 60%,#00eaff0a);mix-blend-mode:screen;opacity:.14;animation:holoFlicker .18s infinite alternate;pointer-events:none}@keyframes holoFlicker{0%{opacity:.1}to{opacity:.22}}.cyber-card.cyber-active:after{overflow:hidden}.cyber-card.cyber-active .holo-scan{position:absolute;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#00eaffcc,transparent);animation:scanMove 1.7s infinite ease-in-out}.cyber-card.cyber-active .holo-scan.red-scan{background:linear-gradient(90deg,transparent,#ff006ecc,transparent)}@keyframes scanMove{0%{top:0%}to{top:100%}}body{background:radial-gradient(circle at 50% 20%,#0f172a,#000 70%),repeating-linear-gradient(to bottom,#00eaff11 0px,#00eaff11 2px,transparent 2px,transparent 40px),repeating-linear-gradient(to right,#00eaff11 0px,#00eaff11 2px,transparent 2px,transparent 40px);background-size:cover;background-attachment:fixed}.grid-wrapper{padding:clamp(10px,2vw,26px);border-radius:20px;background:#00141e80;position:relative;overflow:hidden;margin-top:14px}.grid-wrapper:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#00eaff44,#f0c4);filter:blur(28px);z-index:-1}.neon-board{padding:clamp(10px,2vw,28px);border-radius:16px;border:3px solid rgba(0,234,255,.5);box-shadow:0 0 12px #00eaff,0 0 22px #00eaff88,0 0 40px #00eaff55,inset 0 0 12px #00eaff66;animation:neonBorderPulse 2.6s infinite ease-in-out}@keyframes neonBorderPulse{0%{box-shadow:0 0 12px #00eaff88,0 0 40px #00eaff55}50%{box-shadow:0 0 24px #00eaffaa,0 0 60px #00eaff77}to{box-shadow:0 0 12px #00eaff88,0 0 40px #00eaff55}}.cell:hover{background:#00eaff33;box-shadow:0 0 10px #00eaffaa}.cyber-header{display:flex;justify-content:space-between}.cyber-title{font-size:20px;font-weight:700;color:#00eaff;text-shadow:0 0 8px #00eaffaa}.neon-board{padding:20px;border-radius:22px;background:radial-gradient(circle at 50% 50%,#06202d,#02070a 60%);border:4px solid rgba(0,240,255,.5);box-shadow:0 0 25px #00eaffaa,0 0 50px #00eaff55,inset 0 0 30px #001a22;position:relative}.neon-board:after{content:"";position:absolute;inset:10px;border-radius:16px;border:1px solid rgba(0,255,255,.25);box-shadow:0 0 20px #00ffff59,inset 0 0 25px #00ffff40;pointer-events:none}.board{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:clamp(6px,2vw,18px);width:100%;max-width:380px;margin:0 auto}.cell{aspect-ratio:1;width:100%;background:#00141c99;border-radius:12px;border:2px solid rgba(0,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:clamp(28px,6vw,52px);font-weight:700;color:#00faff;text-shadow:0 0 10px #00faff,0 0 20px #00faffaa,0 0 40px #00faff55;box-shadow:0 0 10px #00eaff33,inset 0 0 15px #00222b;cursor:pointer;transition:.18s ease}.cell:hover{background:#00506480;box-shadow:0 0 18px #00eaffaa,inset 0 0 25px #003440;border-color:#00eaffaa}.cell:not(:empty){box-shadow:0 0 18px #00eaff88,inset 0 0 25px #002028}.win-effect{position:relative;animation:winPulse 2.2s ease-out forwards}@keyframes winPulse{0%{box-shadow:0 0 #00eaff}20%{box-shadow:0 0 50px #00eaffaa}60%{box-shadow:0 0 80px #00eaff66}to{box-shadow:0 0 25px #00eaff55}}.win-effect:after{content:"";position:absolute;inset:-20px;border-radius:20px;border:3px solid rgba(0,234,255,.7);animation:winShockwave 1.6s ease-out forwards;pointer-events:none}@keyframes winShockwave{0%{opacity:.9;transform:scale(.6)}70%{opacity:.4;transform:scale(1.3)}to{opacity:0;transform:scale(1.7)}}.win-banner{text-align:center;margin-top:15px;margin-bottom:15px}.win-banner .glow{font-size:34px;font-weight:800;color:#00eaff;letter-spacing:2px;text-shadow:0 0 10px #00eaff,0 0 30px #00eaffa0,0 0 60px #00eaff77;animation:winGlowText 2s infinite ease-in-out}@keyframes winGlowText{0%,to{opacity:.8}50%{opacity:1}}.lose-effect{position:relative;animation:loseShake .4s linear 1}@keyframes loseShake{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}to{transform:translate(0)}}.lose-effect:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,0,80,.2) 0px,rgba(255,0,80,.2) 2px,transparent 2px,transparent 6px);opacity:0;pointer-events:none;animation:loseFlicker 1.2s steps(4) forwards}@keyframes loseFlicker{0%{opacity:.8}50%{opacity:.2}to{opacity:0}}.lose-banner{text-align:center;margin-top:15px;margin-bottom:15px}.lose-banner .glow-red{font-size:34px;font-weight:800;color:#f05;letter-spacing:2px;text-shadow:0 0 10px #ff0055,0 0 30px #ff0055aa,0 0 60px #ff005533;animation:loseTextPulse 1.2s infinite ease-in-out}@keyframes loseTextPulse{0%,to{opacity:.7}50%{opacity:1}}.info-btn{background:none;border:none;color:var(--neon-blue);cursor:pointer;margin-left:4px;font-size:.9em;padding:0;vertical-align:middle;text-shadow:0 0 6px #00eaffaa}.info-btn:hover{transform:translateY(-1px);text-shadow:0 0 8px #00eaff,0 0 18px #00eaffaa}.modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{width:min(460px,90%);background:radial-gradient(circle at top,#111826,#05070b);border-radius:16px;padding:16px 18px 18px;border:1px solid rgba(0,234,255,.5);box-shadow:0 0 18px #00eaff66,0 0 40px #000000e6;position:relative}.modal-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#00eaff1f,#00eaff05);mix-blend-mode:screen;opacity:.5;pointer-events:none}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.modal-title{font-size:18px;font-weight:700;color:var(--neon-blue);text-shadow:0 0 8px #00eaffaa}.modal-close{background:none;border:none;color:#fff;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;border-radius:999px;box-shadow:0 0 0 transparent}.modal-close:hover{color:var(--neon-pink);text-shadow:0 0 8px var(--neon-pink),0 0 16px #ff007a88}.modal-body{position:relative;z-index:1;text-align:justify}.rules-list{margin:8px 0 8px 18px;padding:0;font-size:13px;color:var(--muted)}.rules-list li{margin-bottom:4px}