/* Container */
#c4-screen-game .c4-ui{max-width:1100px;margin:0 auto;color:#eef3ff}

/* Header */
.c4-game-header{display:flex;align-items:center;justify-content:space-between;background:var(--header-bg);border-radius:16px 16px 0 0;padding:16px 24px;box-shadow:0 8px 16px rgba(0,0,0,.18);color:var(--header-text);gap:16px}
.c4-game-header .c4-player{display:flex;align-items:center;gap:10px;font-weight:800;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06)}
.c4-game-header .c4-player .dot{font-size:20px}
.c4-game-header .c4-player.active{background:rgba(255,255,255,.18);box-shadow:0 0 0 2px rgba(255,255,255,.35) inset,0 0 12px rgba(255,255,255,.15)}
.c4-game-status{font-weight:900;letter-spacing:.2px;text-align:center;flex:1 1 auto}

/* Body */
.c4-game-body{background:var(--game-bg);padding:50px;border-radius:0 0 16px 16px;box-shadow:0 14px 40px rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.06)}

/* Footer */
.c4-game-footer{margin-top:16px;background:var(--footer-bg);border-radius:12px;padding:12px 16px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
#c4-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.c4-game-size,.c4-game-version{font-size:12px;color:#d6ddff;opacity:.9}
.c4-meta-actions{display:flex;gap:8px;align-items:center}

/* Board */
#c4-wrapper{position:relative;width:100%;max-width:900px;margin:10px auto 16px}
#c4-board{display:grid;grid-template-columns:var(--label) repeat(7, var(--cell));grid-template-rows:var(--label) repeat(6, var(--cell));gap:var(--gap);position:relative;width:100%}
#c4-board::before{content:"";position:absolute;left:var(--label);top:var(--label);width:calc(7*var(--cell) + 6*var(--gap));height:calc(6*var(--cell) + 5*var(--gap));background:var(--blue);border-radius:14px;z-index:-1}
.c4-label{display:flex;align-items:center;justify-content:center;font-weight:700;user-select:none;color:#cfe0ff;text-shadow:0 1px 0 rgba(0,0,0,0.25)}
.c4-cell{width:var(--cell);height:var(--cell);border-radius:50%;background:#ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;box-shadow:inset 0 0 0 2px #222; will-change: transform;}
.c4-cell.player1{background:red}.c4-cell.player2{background:yellow}

/* Overlays (nur noch für Drop-Effekt, Clear passiert direkt am Coin) */
#c4-overlay,#c4-overlay-clear{pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;z-index:5}
#c4-overlay-clear{z-index:6}

/* Drop Coin (Einwurf) – smoother + Bounce */
@keyframes c4DropBounce{
  0%{transform: translate3d(var(--x), -100px, 0)}
  88%{transform: translate3d(var(--x), calc(var(--y) - 6px), 0)}
  100%{transform: translate3d(var(--x), var(--y), 0)}
}
.c4-drop{position:absolute;width:var(--cell);height:var(--cell);border-radius:50%;box-shadow:inset 0 0 0 2px #222;animation: c4DropBounce 520ms cubic-bezier(.22,.9,.16,1) forwards}
.c4-drop.p1{background:red}.c4-drop.p2{background:yellow}

/* Clear-Fall direkt aus dem Board */
.c4-cell.c4-fall{
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  transform: translate3d(0, calc(100vh), 0);
}

/* Win-Styles */
@keyframes c4WinPulse{0%{box-shadow:0 0 0 3px var(--win-ring),0 0 18px 6px var(--win-glow);transform:scale(1)}50%{box-shadow:0 0 0 5px var(--win-ring),0 0 24px 10px var(--win-glow);transform:scale(1.04)}100%{box-shadow:0 0 0 3px var(--win-ring),0 0 18px 6px var(--win-glow);transform:scale(1)}}
.c4-cell.c4-win{z-index:2}
.c4-cell.c4-win::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--win-ring);box-shadow:0 0 18px 6px var(--win-glow);pointer-events:none;animation:c4WinPulse 1.2s ease-in-out infinite}
.c4-cell.c4-win::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.32), rgba(255,255,255,0) 60%);mix-blend-mode:screen;pointer-events:none}