:root{--bg1:#6a11cb;--bg2:#2575fc;--card:#ffffff1f;--text:#fff;--accent:#ffe600;--shadow:0 10px 40px #00000059}*{box-sizing:border-box}body{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);margin:0;font-family:Poppins,sans-serif;overflow-x:hidden}.game-wrapper{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:480px;box-shadow:var(--shadow);z-index:2;text-align:center;background:#ffffff0a;border-radius:18px;margin:28px auto;padding:18px;position:relative}.game-title{margin-bottom:12px;font-size:2rem;font-weight:800;animation:2.5s ease-in-out infinite titleFloat}@keyframes titleFloat{50%{transform:translateY(-6px)}}.scoreboard{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.score-box{background:#ffffff0f;border-radius:12px;flex:1;justify-content:space-between;align-items:center;padding:10px;font-weight:700;display:flex}.avatar-and-label{align-items:center;gap:10px;display:flex}.avatar{color:#222;background:linear-gradient(135deg,#fff3 0%,#fff1 100%);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-weight:900;display:flex;box-shadow:0 6px 16px #0000002e}.avatar.small{width:44px;height:44px;font-size:1rem}.board{grid-template-columns:repeat(3,1fr);gap:10px;width:min(92vw,380px);margin:8px auto;transition:transform .4s;display:grid}.board.win-shake{animation:.45s ease-in-out boardShake}@keyframes boardShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.cell{background:var(--card);aspect-ratio:1;cursor:pointer;border-radius:16px;justify-content:center;align-items:center;font-size:2.6rem;font-weight:800;transition:transform .18s,background .18s;display:flex}.cell:hover{background:#ffffff24;transform:scale(1.04)rotateX(8deg)}.win-cell{background:linear-gradient(#ffffff73,#ffffff59);border:2px solid #ffffffe6;animation:1.2s infinite alternate winPulse}@keyframes winPulse{0%{transform:translateY(0);box-shadow:0 0 12px #fff9,0 0 24px #ffdc5740}to{transform:translateY(-4px);box-shadow:0 0 26px #ffffffe6,0 0 56px #ffdc5759}}.winner-box{z-index:10;background:#ffffff1f;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding:12px;animation:.36s winnerEntrance;display:flex;position:relative}@keyframes winnerEntrance{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:none}}.winner-X{flex-direction:row}.winner-O{flex-direction:row-reverse}.winner-gif{border-radius:12px;width:clamp(100px,28vw,170px);animation:1.3s ease-in-out infinite gifBounce}@keyframes gifBounce{50%{transform:translateY(-8px)scale(1.03)}}.winner-text{background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#5f27cd);-webkit-text-fill-color:transparent;background-size:200% 100%;-webkit-background-clip:text;font-size:1.25rem;font-weight:900;animation:3s linear infinite gradientShift;position:relative}@keyframes gradientShift{0%{background-position:0 0}to{background-position:200% 0}}.winner-text:after{content:"";pointer-events:none;background:linear-gradient(120deg,#fff0 0%,#ffffff59 50%,#fff0 100%);animation:2.2s linear infinite shine;position:absolute;inset:0;transform:translate(-120%)}@keyframes shine{0%{transform:translate(-120%)}to{transform:translate(120%)}}button{background:var(--accent);cursor:pointer;border:none;border-radius:12px;margin-top:16px;padding:10px 18px;font-weight:800;position:relative;overflow:hidden;box-shadow:0 8px 18px #0000003d}button:after{content:"";opacity:0;pointer-events:none;background:#ffffff73;border-radius:50%;width:0;height:0;position:absolute;transform:translate(-50%,-50%)}button:hover:after{opacity:.38;width:220px;height:220px;left:var(--x);top:var(--y);transition:width .6s,height .6s,opacity .6s}.fullscreen-celebration{pointer-events:none;z-index:9000;background:radial-gradient(circle,#ffffff1f,#0000 30%);animation:2.2s ease-in-out infinite screenPulse;position:fixed;inset:0}@keyframes screenPulse{0%{opacity:.08}50%{opacity:.32}to{opacity:.08}}.fireworks{z-index:9998;pointer-events:none;position:fixed;inset:0}.firework-dot{transform-origin:50%;filter:drop-shadow(0 6px 10px #00000040);border-radius:50%;width:10px;height:10px;animation:1.4s ease-out forwards fwExplode;position:absolute}@keyframes fwExplode{0%{opacity:1;filter:blur();transform:scale(.25)}55%{opacity:.95;filter:blur(1px);transform:scale(3.6)}to{opacity:0;filter:blur(2px);transform:scale(.9)}}.crackers-wrapper{pointer-events:none;z-index:9997;width:100%;height:120px;position:absolute;top:calc(50% - 220px);left:50%;transform:translate(-50%)}.cracker{transform-origin:50%;border-radius:50%;width:8px;height:8px;animation:.9s ease-out forwards crackerBurst;position:absolute;top:20px}.cracker:after{content:"";background:0 0;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%}@keyframes crackerBurst{0%{opacity:1;box-shadow:none;transform:scale(.2)translateY(0)}20%{opacity:1;transform:scale(1)translateY(-6px)}40%{opacity:.95;transform:scale(1.2)translateY(-30px);box-shadow:0 0 8px #fffc}to{opacity:0;box-shadow:none;transform:scale(.6)translateY(-90px)}}.cracker:before{content:"";transform-origin:50%;opacity:0;border-radius:50%;width:0;height:0;animation:.88s ease-out forwards crackerLines;position:absolute;top:50%;left:50%;transform:scale(.2);box-shadow:0 -18px #ff6347f2,12px -14px #ffd740f2,-12px -14px #58d8a3f2,18px -6px #8741ccf2,-18px -6px #4287f5f2}@keyframes crackerLines{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}.sparkles{pointer-events:none;z-index:9996;width:220px;height:120px;position:absolute;top:calc(50% - 40px);left:50%;transform:translate(-50%)}.sparkles:before,.sparkles:after{content:"";filter:blur(10px);opacity:0;background:radial-gradient(circle,#ffffffe6,#0000 40%);border-radius:50%;width:60px;height:60px;position:absolute;transform:scale(.6)}.sparkles:before{animation:1s ease-out forwards sparklePop;top:20%;left:10%}.sparkles:after{animation:1s ease-out .25s forwards sparklePop;top:10%;right:10%}@keyframes sparklePop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}.confetti-wrapper{pointer-events:none;z-index:9995;width:100%;height:240px;position:absolute;top:calc(50% - 110px);left:50%;transform:translate(-50%)}.confetti{opacity:0;font-size:1.5rem;animation:1.7s linear forwards confettiFall;position:absolute}@keyframes confettiFall{0%{opacity:1;transform:translateY(-10px)rotate(0)}30%{opacity:1}to{opacity:0;transform:translateY(160px)rotate(360deg)}}.fadeIn{animation:.8s both fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (max-width:420px){.game-wrapper{margin:14px;padding:14px}.avatar{width:48px;height:48px}.winner-gif{width:120px}.confetti{font-size:1.2rem}.sparkles{width:160px;top:calc(50% - 60px);left:50%}}