.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:visible;transform-origin:center}.confetti-piece{position:absolute;top:50%;left:50%;z-index:10;animation:confetti-explode 1.5s ease-out forwards;opacity:0}.confetti-piece.square{border-radius:0}.confetti-piece.circle{border-radius:50%}.confetti-piece.triangle{width:0!important;height:0!important;background-color:transparent!important;border-style:solid;border-width:0 10px 10px 10px;border-color:transparent transparent var(--triangle-color) transparent}.confetti-piece.star{background-color:transparent!important;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.confetti-piece.heart{background-color:transparent!important;width:10px;height:10px;position:relative;transform:rotate(-45deg)}.confetti-piece.heart:before,.confetti-piece.heart:after{content:"";position:absolute;background-color:var(--heart-color)}.confetti-piece.heart:before{width:10px;height:16px;border-radius:50px 50px 0 0;top:-8px;left:0}.confetti-piece.heart:after{width:16px;height:10px;border-radius:0 50px 50px 0;top:0;left:2px}@keyframes confetti-explode{0%{opacity:0;transform:translate(0) scale(.1) rotate(0)}10%{opacity:1}to{opacity:0;transform:translate(var(--random-x),var(--random-y)) scale(1) rotate(var(--random-rotate))}}.confetti-piece{animation-duration:calc(1.5s + (var(--random-speed) * 2s));will-change:transform,opacity;animation-timing-function:cubic-bezier(.25,.1,.25,1)}.tic-tac-toe{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg, 20px);font-family:sans-serif;width:100%;max-width:500px;margin:0 auto;padding:var(--spacing-md, 1rem)}.status{font-size:var(--font-size-xl, 1.5rem);font-weight:700;margin-bottom:var(--spacing-sm, 10px);text-align:center}.board-container{position:relative;margin-bottom:var(--spacing-lg, 20px);--square-size: min(80px, calc((100vw - 40px) / 3));--board-size: calc(var(--square-size) * 3 + 4px);padding:0;width:var(--board-size);height:var(--board-size);display:flex;justify-content:center;align-items:center;box-sizing:content-box;overflow:visible}.board{display:flex;flex-direction:column;border:2px solid #333;position:relative;z-index:1}.board-row{display:flex}.square{width:var(--square-size);height:var(--square-size);border:1px solid #999;font-size:calc(var(--square-size) * .5);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;transition:background-color .2s;position:relative;overflow:hidden;touch-action:manipulation}.square:hover{background-color:#f0f0f0}.square.highlighted{position:relative;border:2px dashed #ff9800;background-color:#fff3e0}.square.winning{position:relative;animation:pulse-win 1.5s ease-in-out infinite;border-color:#4caf50;z-index:1}.square.winning:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#4caf501a,#4caf504d);z-index:-1}.winning-line{position:absolute;background-color:#4caf50;height:min(6px,calc(var(--square-size) * .08));border-radius:min(3px,calc(var(--square-size) * .04));z-index:2;transform-origin:left center;box-shadow:0 0 5px #4caf50b3;background-image:linear-gradient(90deg,#4caf50,#66bb6a,#4caf50,#388e3c,#4caf50);background-size:200% 100%;animation-duration:1s;animation-timing-function:cubic-bezier(.25,.1,.25,1);animation-fill-mode:forwards;filter:drop-shadow(0 1px 1px rgba(0,0,0,.1))}.winning-line.row-1,.winning-line.row-2,.winning-line.row-3{width:0;left:calc(var(--square-size) * .125);animation-name:draw-line}.winning-line.row-1{top:calc(var(--square-size) * .5)}.winning-line.row-2{top:calc(var(--square-size) * 1.5)}.winning-line.row-3{top:calc(var(--square-size) * 2.5)}.winning-line.col-1,.winning-line.col-2,.winning-line.col-3{height:0;width:min(6px,calc(var(--square-size) * .08));top:calc(var(--square-size) * .125);animation-name:draw-line-vertical}.winning-line.col-1{left:calc(var(--square-size) * .5)}.winning-line.col-2{left:calc(var(--square-size) * 1.5)}.winning-line.col-3{left:calc(var(--square-size) * 2.5)}.winning-line-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.diagonal-line{stroke:url(#greenGradient);stroke-width:6;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw-svg-line 1s ease-out forwards;filter:drop-shadow(0 0 3px rgba(76,175,80,.6))}@keyframes draw-svg-line{to{stroke-dashoffset:0}}@keyframes draw-line{0%{width:0;background-position:0% 50%}50%{background-position:100% 50%}to{width:calc(100% - calc(var(--square-size) * .25));background-position:0% 50%}}@keyframes draw-line-vertical{0%{height:0;background-position:0% 50%}50%{background-position:100% 50%}to{height:calc(100% - calc(var(--square-size) * .25));background-position:0% 50%}}@keyframes draw-line-diagonal-1{0%{width:0;background-position:0% 50%}50%{background-position:100% 50%}to{width:calc(var(--square-size) * 3 * 1.41);background-position:0% 50%}}@keyframes draw-line-diagonal-2{0%{width:0;background-position:0% 50%}50%{background-position:100% 50%}to{width:calc(var(--square-size) * 3 * 1.41);background-position:0% 50%}}@keyframes pulse-win{0%{box-shadow:0 0 #4caf50b3}70%{box-shadow:0 0 0 10px #4caf5000}to{box-shadow:0 0 #4caf5000}}.symbol-svg{width:70%;height:70%;max-width:56px;max-height:56px}.symbol-path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw-symbol 1s cubic-bezier(.25,.1,.25,1) forwards}.o-symbol{stroke-dasharray:170;stroke-dashoffset:170}@keyframes draw-symbol{to{stroke-dashoffset:0}}.x-symbol-1{animation-duration:.5s}.x-symbol-2{animation-duration:.5s;animation-delay:.25s;animation-fill-mode:both}.o-symbol{animation-duration:.9s}.removal-indicator{position:absolute;top:4px;right:4px;font-size:1rem;color:#ff9800;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.reset-button{margin-top:var(--spacing-md, 15px);padding:var(--spacing-sm, 10px) var(--spacing-lg, 20px);font-size:var(--font-size-md, 1rem);background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;min-height:44px;min-width:120px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.reset-button:hover{background-color:#45a049}@media (hover: none){.reset-button{padding:var(--spacing-md, 15px) var(--spacing-lg, 20px)}.reset-button:active{background-color:#388e3c;transform:scale(.98)}}