*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);overflow:hidden}.game-container{display:flex;flex-direction:column;align-items:center;gap:20px}.title{font-size:2.8rem;font-weight:800;color:#fff;letter-spacing:2px;text-transform:uppercase}.title-four{background:linear-gradient(90deg,#f7971e,#ffd200);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.turn-indicator{display:flex;align-items:center;gap:10px;padding:10px 28px;background:#ffffff14;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font-size:1.1rem;font-weight:600;color:#e0e0e0;transition:all .3s ease}.turn-dot{width:16px;height:16px;border-radius:50%;display:inline-block;transition:background .3s ease,box-shadow .3s ease}.turn-dot.blue-dot{background:#4f8eff;box-shadow:0 0 12px #4f8eff99}.turn-dot.red-dot{background:#ff4757;box-shadow:0 0 12px #ff475799}.board-wrapper{padding:14px;border-radius:20px;background:linear-gradient(145deg,#1a3a6e,#0e2244);box-shadow:0 20px 60px #00000080,inset 0 2px #ffffff0f}.board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:8px;padding:10px;border-radius:14px;background:linear-gradient(180deg,#1b3b6f,#162d56)}.cell{width:64px;height:64px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 35%,#1e2d4d,#0d1a33);box-shadow:inset 0 4px 8px #00000080,inset 0 -2px 4px #ffffff0a;transition:background .35s ease,box-shadow .35s ease,transform .15s ease}.cell:hover{transform:scale(1.06)}.cell.red{background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0392b);box-shadow:inset 0 4px 8px #00000040,0 0 14px #ff475766}.cell.blue{background:radial-gradient(circle at 35% 35%,#74b9ff,#2e86de);box-shadow:inset 0 4px 8px #00000040,0 0 14px #4f8eff66}.cell.red-hovered{background:radial-gradient(circle at 35% 35%,#ff8787,#e74c3c);box-shadow:inset 0 4px 8px #0003,0 0 20px #ff47578c}.cell.blue-hovered{background:radial-gradient(circle at 35% 35%,#a3d1ff,#4f8eff);box-shadow:inset 0 4px 8px #0003,0 0 20px #4f8eff8c}.column-hovered{background:radial-gradient(circle at 35% 35%,#2a3e5e,#1a2e4e);box-shadow:inset 0 4px 8px #0006,0 0 10px #ffffff0f}@keyframes dropIn{0%{transform:translateY(-280px) scale(.9);opacity:.5}60%{transform:translateY(8px) scale(1.04);opacity:1}80%{transform:translateY(-4px) scale(.98)}to{transform:translateY(0) scale(1)}}.cell.drop-animation{animation:dropIn .45s cubic-bezier(.22,1,.36,1) forwards}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .35s ease}.overlay.visible{opacity:1;pointer-events:all}.modal{background:linear-gradient(145deg,#1e1e2f,#2a2a40);padding:40px 50px;border-radius:24px;text-align:center;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px #0009;transform:translateY(30px) scale(.92);transition:transform .35s ease}.overlay.visible .modal{transform:translateY(0) scale(1)}.modal-icon{font-size:3.5rem;margin-bottom:12px}.modal-title{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:6px}.modal-subtitle{font-size:.95rem;color:#aaa;margin-bottom:28px}.modal-btn{font-family:Poppins,sans-serif;font-size:1.05rem;font-weight:600;padding:12px 40px;border:none;border-radius:50px;cursor:pointer;background:linear-gradient(90deg,#f7971e,#ffd200);color:#1a1a2e;letter-spacing:1px;box-shadow:0 6px 20px #f7971e59;transition:transform .2s ease,box-shadow .2s ease}.modal-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #f7971e80}.modal-btn:active{transform:translateY(0)}@media (max-width: 560px){.cell{width:44px;height:44px}.board{gap:5px;padding:6px}.board-wrapper{padding:10px}.title{font-size:1.8rem}}