@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap";:root{color-scheme:dark;font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:.01em;--color-background: #050315;--color-surface: rgba(13, 19, 46, .65);--color-surface-strong: rgba(19, 26, 56, .85);--color-border: rgba(131, 146, 255, .45);--color-border-strong: rgba(131, 146, 255, .75);--color-text: #f5f7ff;--color-text-muted: rgba(245, 247, 255, .7);--color-text-subtle: rgba(245, 247, 255, .5);--color-accent: #7b5cff;--color-accent-secondary: #00e5ff;--color-accent-soft: rgba(0, 229, 255, .14);--color-accent-strong: rgba(123, 92, 255, .85);--color-danger: #ff5c7a;--shadow-lg: 0 30px 80px -48px rgba(0, 229, 255, .65), 0 26px 60px -50px rgba(123, 92, 255, .85);--shadow-md: 0 18px 50px -30px rgba(0, 229, 255, .3), 0 10px 30px -20px rgba(123, 92, 255, .35);--shadow-soft: 0 12px 32px -22px rgba(123, 92, 255, .4)}@keyframes aurora{0%{transform:translate3d(-10%,-10%,0) scale(1)}50%{transform:translate3d(10%,5%,0) scale(1.12)}to{transform:translate3d(-12%,8%,0) scale(1)}}@keyframes sparkle{0%{opacity:.1;transform:translateY(0) scale(1)}50%{opacity:.4;transform:translateY(-6px) scale(1.05)}to{opacity:.1;transform:translateY(0) scale(1)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;min-width:320px;background:radial-gradient(circle at top right,#0c1540 0%,transparent 45%),radial-gradient(circle at 20% 120%,rgba(0,229,255,.2) 0%,transparent 45%),var(--color-background);color:var(--color-text);position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 120deg,#00e5ff47,#7b5cff38,#ff68c429,#00e5ff47);filter:blur(120px);opacity:.7;animation:aurora 18s ease-in-out infinite;z-index:-2}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:120px 120px,80px 80px;background-position:20px 40px,-40px -20px;opacity:.25;animation:sparkle 10s linear infinite;z-index:-3}img{display:block;max-width:100%}main,button,input,textarea{font:inherit;color:inherit}.app-shell{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100vh;padding:40px 16px 60px;gap:24px;position:relative}.app-shell:before{content:"";position:absolute;top:40px;right:20px;bottom:80px;left:20px;border-radius:32px;background:linear-gradient(135deg,#7b5cff24,#00e5ff14),#080b1e59;border:1px solid rgba(255,255,255,.05);filter:blur(0);z-index:-1}h1,h2,h3{margin:0;font-weight:700;letter-spacing:.02em;text-shadow:0 8px 20px rgba(0,0,0,.35)}p{margin:0}a{color:inherit}.home-screen{width:min(600px,92vw);margin-top:50px;text-align:center;display:flex;flex-direction:column;gap:22px;padding:32px 28px 40px;border-radius:32px;background:linear-gradient(150deg,#7b5cff1f,#00e5ff14),#080b1ea6;border:1px solid var(--color-border);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.home-screen:before,.home-screen:after{content:"";position:absolute;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(0,229,255,.4),transparent 70%);filter:blur(60px);opacity:.5;z-index:-1}.home-screen:before{top:-120px;right:-100px}.home-screen:after{bottom:-160px;left:-80px;background:radial-gradient(circle,rgba(123,92,255,.35),transparent 70%)}.home-logo{margin:0 auto;filter:drop-shadow(0 12px 25px rgba(0,229,255,.25));animation:float 5s ease-in-out infinite}.home-screen h1{font-size:clamp(2.4rem,4vw,3rem)}.home-subtitle{line-height:1.7;color:var(--color-text-muted)}.mode-buttons{display:flex;flex-direction:column;gap:16px;margin-top:12px}.mode-button{position:relative;border:none;border-radius:20px;padding:20px 24px;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--color-text);overflow:hidden;isolation:isolate;background:#0a0c2099;transition:transform .25s ease,box-shadow .25s ease}.mode-button:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,#00e5ffe6,#7b5cfff2,#ff5fadd9);z-index:-2;opacity:0;transition:opacity .25s ease}.mode-button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(145deg,#7b5cff2e,#00e5ff24),#0a0c20bf;z-index:-1;border:1px solid rgba(255,255,255,.08)}.mode-button:hover,.mode-button:focus-visible{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-md)}.mode-button:hover:before,.mode-button:focus-visible:before{opacity:.7}.mode-title{font-size:1.1rem;font-weight:700}.mode-description{font-size:.95rem;color:var(--color-text-muted)}.home-icons{display:flex;gap:18px;justify-content:center;font-size:1.8rem;color:var(--color-text-subtle)}.board{position:relative;width:min(640px,92vw);margin:50px auto 0;padding:32px 30px 46px;text-align:center;border-radius:32px;background:linear-gradient(160deg,#7b5cff1f,#00e5ff14),#080b1ead;border:1px solid var(--color-border);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}.board:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:26px;border:1px solid rgba(255,255,255,.05);pointer-events:none}.board h2{font-size:clamp(1.7rem,3vw,2rem)}.board button{padding:12px 22px;margin:24px auto 0;background:linear-gradient(140deg,#00e5ff2e,#7b5cff2e),#080a1e99;border:1px solid var(--color-border);color:var(--color-text);min-width:160px;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;font-weight:600;cursor:pointer;position:relative;overflow:hidden}.board button:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:inherit;background:linear-gradient(120deg,#00e5ff73,#7b5cff73);opacity:0;transition:opacity .2s ease;z-index:-1}.board button:hover,.board button:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--color-border-strong)}.board button:hover:before,.board button:focus-visible:before{opacity:.6}.board button.toggle-button{min-width:130px;margin:0}.board button.toggle-button.is-active{color:var(--color-text);background:linear-gradient(135deg,#7b5cff,#00e5ff);box-shadow:0 18px 42px -24px #7b5cffe6;border-color:transparent}.board button.toggle-button.is-active:before{opacity:0}.board button.toggle-button.is-active:hover{transform:translateY(-2px)}.board .game{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;padding:28px;border-radius:28px;background:linear-gradient(135deg,#7b5cff24,#00e5ff1a),#0a0c20b3;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff05}.square{width:100%;aspect-ratio:1 / 1;border-radius:24px;display:grid;place-items:center;cursor:pointer;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:var(--color-text);border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#7b5cff1f,#00e5ff14),#0f122ecc;transition:transform .2s ease,box-shadow .2s ease,background .3s ease,border-color .2s ease;position:relative;overflow:hidden}.square:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .2s ease}.square:hover{transform:translateY(-4px);box-shadow:0 18px 40px -30px #7b5cffcc;border-color:#7b5cff99}.square:hover:after{opacity:.7}.square.is-selected{background:linear-gradient(135deg,#7b5cffe6,#00e5ffe6);box-shadow:0 26px 60px -30px #00e5ffe6;border-color:transparent}.square.is-disabled{cursor:not-allowed;opacity:.7;transform:none;box-shadow:none}.square:focus{outline:none;box-shadow:0 0 0 3px #7b5cff99}.turn{display:inline-flex;justify-content:center;align-items:center;gap:12px;margin:26px auto 0;padding:12px 18px;border-radius:999px;background:#0a0c2099;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff05}.turn .square,.winner .square{width:60px;height:60px;font-size:1.8rem;border-radius:18px;border:none;background:transparent;box-shadow:none}.turn .square.is-selected{background:linear-gradient(135deg,#7b5cffd9,#00e5ffd9);border:none;box-shadow:none}.status-message,.error-message{margin:18px auto 0;padding:14px 18px;border-radius:16px;max-width:520px;text-align:center;font-weight:500;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.status-message{background:#00e5ff1f;color:var(--color-text)}.error-message{background:#ff5c7a26;border-color:#ff5c7a8c;color:#ffe5eb}.board-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.secondary-button{border:1px solid rgba(255,255,255,.16);background:#0a0c2099;color:var(--color-text);font-weight:600;border-radius:999px;padding:10px 18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;position:relative;overflow:hidden}.secondary-button:hover,.secondary-button:focus-visible{transform:translateY(-3px);border-color:var(--color-border-strong);box-shadow:var(--shadow-soft)}.danger-button{border:1px solid rgba(255,92,122,.6);color:#ffe5eb;background:#ff5c7a1f}.danger-button:hover,.danger-button:focus-visible{background:#ff5c7a33;border-color:#ff5c7ad9}.winner{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#03040cb3;z-index:10;padding:20px}.winner .text{background:linear-gradient(140deg,#7b5cff1f,#00e5ff1f),#080b1ee6;min-height:280px;width:min(360px,92vw);border-radius:28px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:28px;box-shadow:var(--shadow-md)}.winner .win{width:fit-content;border-radius:20px;padding:12px 18px;border:1px solid rgba(255,255,255,.12);display:flex;gap:14px;background:#0a0c2099}.winner button{margin-top:6px}.winner h2{font-size:1.6rem}.online-wrapper{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px}.form-card{display:flex;flex-direction:column;gap:14px;margin:20px auto 0;padding:24px 22px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:#080b1eb3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:min(400px,92vw);box-shadow:var(--shadow-md)}.form-card label{font-weight:600;text-align:left}.form-card input{background:#0c0e24cc;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;color:var(--color-text);transition:border-color .2s ease,box-shadow .2s ease}.form-card input:focus{outline:none;border-color:var(--color-border-strong);box-shadow:0 0 0 3px #7b5cff66}.form-card button{margin:12px 0 0}.form-actions{display:flex;gap:12px;justify-content:flex-end}.online-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 18px;width:100%;text-align:left;background:#080b1ea6;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.online-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.online-actions button{margin:0}.winner-banner{margin-top:16px;padding:14px 18px;border-radius:18px;background:#0a0c20b3;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-soft)}.bot-settings{display:flex;flex-direction:column;gap:16px;align-items:center;margin:16px auto 26px;padding:18px;border-radius:24px;background:#0a0c2099;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bot-setting-group{display:flex;flex-direction:column;gap:10px;align-items:center}.bot-settings .toggle-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.bot-settings button{margin:0}.bot-settings-note{font-size:.85rem;color:var(--color-text-subtle);margin-top:4px}.footer{display:flex;align-items:center;gap:18px;padding:18px 26px;border-radius:999px;background:#080b1ea6;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.footer p{font-weight:500;color:var(--color-text-muted)}.footer .links{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:#0a0c2099;border:1px solid rgba(255,255,255,.1);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.footer .links:hover,.footer .links:focus-visible{transform:translateY(-3px);border-color:#7b5cffcc;box-shadow:0 12px 24px -18px #7b5cffe6}.footer img{width:24px;height:24px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}@media (min-width: 768px){.mode-buttons{flex-direction:row}.mode-button{flex:1}.board{padding:40px 40px 54px}.board .game{gap:18px}.turn .square,.winner .square{width:70px;height:70px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}