[data-game=tictactoe3d]{--game-accent-h: 190;--game-accent-s: 90%;--game-accent-l: 50%;--game-accent: hsl(var(--game-accent-h), var(--game-accent-s), var(--game-accent-l));--game-accent-glow: rgba(0, 240, 255, .3);--game-accent-subtle: rgba(0, 240, 255, .1);--layer-gap: 120px}html[data-game=tictactoe3d],html[data-game=tictactoe3d] body{overflow:hidden;height:100%;width:100%;position:fixed}.tictactoe3d-app{min-height:100vh;display:flex;flex-direction:column}.tictactoe3d-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(var(--space-16) + var(--space-4)) var(--space-4) var(--space-4);gap:var(--space-4);width:100%;max-width:800px;margin:0 auto;box-sizing:border-box}.tictactoe3d-intro{max-width:480px;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;margin-top:5vh}.tictactoe3d-intro h1{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.03em;color:#fff;text-shadow:0 0 10px rgba(0,240,255,.5)}.tictactoe3d-intro>p{color:var(--color-text-secondary);line-height:1.6}.tictactoe3d-status{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:500px;gap:var(--space-4);background:var(--color-surface-raised);padding:var(--space-2) var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle)}.tictactoe3d-player{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:2px solid transparent;text-align:center;transition:all var(--duration-fast) ease}.tictactoe3d-player[data-active]{border-color:var(--game-accent);background:var(--game-accent-subtle);box-shadow:0 0 12px var(--game-accent-glow)}.tictactoe3d-player p{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.tictactoe3d-player strong{font-family:var(--font-display);font-size:var(--text-sm);font-weight:800}.tictactoe3d-controls{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:500px;background:var(--color-surface-raised);padding:var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.control-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary)}.slider-input{flex:1;cursor:pointer;accent-color:var(--game-accent)}.scene-container{width:100%;max-width:500px;aspect-ratio:1 / 1;background:radial-gradient(circle at center,#131722,#080a0f);border-radius:var(--radius-2xl);border:1px solid var(--color-border-subtle);perspective:1000px;overflow:visible;position:relative;cursor:grab;-webkit-user-select:none;user-select:none}.scene-container.is-dragging{cursor:grabbing}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rotate-x, -25deg)) rotateY(var(--rotate-y, 45deg));will-change:transform;pointer-events:none}.grid-layer{position:absolute;width:200px;height:200px;left:calc(50% - 100px);top:calc(50% - 100px);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:10px;background:#0a0f19d9;border:2px solid var(--game-accent);border-radius:var(--radius-lg);transform-style:preserve-3d;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 15px #00f0ff1a,inset 0 0 15px #00f0ff0d;cursor:default;pointer-events:auto}.grid-layer--0{transform:translate3d(0,calc(-1 * var(--layer-gap)),0) rotateX(90deg)}.grid-layer--1{transform:translateZ(0) rotateX(90deg)}.grid-layer--2{transform:translate3d(0,var(--layer-gap),0) rotateX(90deg)}.cell{background:#141928b3;border:1.5px solid rgba(0,240,255,.25);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;transition:all var(--duration-fast) ease;-webkit-user-select:none;user-select:none;transform-style:preserve-3d;height:100%;width:100%;pointer-events:auto;transform:translateZ(10px)}.cell:hover{background:#00f0ff26;border-color:var(--game-accent);box-shadow:0 0 10px var(--game-accent-glow);transform:translateZ(15px)}.cell[data-val]:after{transform:translateZ(8px)}.cell[data-val="1"]:after{content:"X";color:#00f0ff;text-shadow:0 0 8px #00f0ff,0 0 15px #00f0ff}.cell[data-val="2"]:after{content:"O";color:#ff007f;text-shadow:0 0 8px #ff007f,0 0 15px #ff007f}.cell.winning{background:#fbbf2433!important;border-color:#fbbf24!important;animation:win-glow 1s ease-in-out infinite alternate}.cell.winning[data-val="1"]:after{color:#fbbf24;text-shadow:0 0 10px #fbbf24,0 0 20px #fbbf24}.cell.winning[data-val="2"]:after{color:#fbbf24;text-shadow:0 0 10px #fbbf24,0 0 20px #fbbf24}@keyframes win-glow{0%{box-shadow:0 0 10px #fbbf2466,inset 0 0 6px #fbbf2433;transform:translateZ(2px) scale(1)}to{box-shadow:0 0 20px #fbbf24cc,inset 0 0 12px #fbbf2466;transform:translateZ(5px) scale(1.05)}}@media (max-width: 480px){.tictactoe3d-main{padding-top:calc(56px + var(--space-4))}.scene-container{max-width:320px}.grid-layer{width:140px;height:140px;left:calc(50% - 70px);top:calc(50% - 70px);gap:6px;padding:6px}.cell{font-size:var(--text-lg)}[data-game=tictactoe3d]{--layer-gap: 80px}.grid-layer--0{transform:translate3d(0,calc(-1 * var(--layer-gap)),0) rotateX(90deg)}.grid-layer--2{transform:translate3d(0,var(--layer-gap),0) rotateX(90deg)}}.tictactoe3d-result-banner{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:900;text-align:center;padding:var(--space-3) var(--space-6);border-radius:var(--radius-xl);margin-bottom:var(--space-4);width:100%;max-width:500px;animation:banner-pop var(--duration-normal) var(--ease-spring)}@keyframes banner-pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.tictactoe3d-result-banner--win1{background:#00f0ff1a;color:#00f0ff;border:2px solid rgba(0,240,255,.3);text-shadow:0 0 8px rgba(0,240,255,.5);box-shadow:0 0 15px #00f0ff26}.tictactoe3d-result-banner--win2{background:#ff007f1a;color:#ff007f;border:2px solid rgba(255,0,127,.3);text-shadow:0 0 8px rgba(255,0,127,.5);box-shadow:0 0 15px #ff007f26}.tictactoe3d-result-banner--draw{background:#9ca3af1a;color:#9ca3af;border:2px solid rgba(156,163,175,.3)}.cell.last-move[data-val="1"]{animation:last-move-flash-x .8s ease-in-out 5;border-color:#00f0ff99!important;box-shadow:0 0 10px #00f0ff4d,inset 0 0 5px #00f0ff26}.cell.last-move[data-val="2"]{animation:last-move-flash-o .8s ease-in-out 5;border-color:#ff007f99!important;box-shadow:0 0 10px #ff007f4d,inset 0 0 5px #ff007f26}@keyframes last-move-flash-x{0%,to{border-color:#00f0ff40;background:#141928b3}50%{border-color:#00f0ff;background:#00f0ff40;box-shadow:0 0 15px #00f0ff99,inset 0 0 8px #00f0ff4d}}@keyframes last-move-flash-o{0%,to{border-color:#00f0ff40;background:#141928b3}50%{border-color:#ff007f;background:#ff007f40;box-shadow:0 0 15px #ff007f99,inset 0 0 8px #ff007f4d}}