.game { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-bottom: var(--s-8); }
#status { font-family: var(--font-display); font-size: 1.2rem; margin: 0; min-height: 1.6em; text-align: center; }
#status.p1 { color: var(--p1); } #status.p2 { color: var(--p2); }

#board-wrap { position: relative; width: min(92vw, 560px); aspect-ratio: 700 / 600; border-radius: var(--radius); }
#board-wrap.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#board-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#discs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); z-index: 1; }
.disc { min-width: 0; min-height: 0; }
.disc img { display: block; width: 100%; height: 100%; }
.disc.drop { animation: drop .5s cubic-bezier(.3,0,.6,1) both; }
@keyframes drop { from { transform: translateY(var(--drop-from, -400px)); } }
/* Win highlight sits above the board face so the outline and glow show on the winning holes. */
#wins { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); z-index: 3; pointer-events: none; }
.win-ring { width: 80%; height: 80%; place-self: center; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--neon-yellow); box-shadow: 0 0 8px var(--neon-yellow), inset 0 0 8px var(--neon-yellow); opacity: 0; animation: win-in var(--t-med) .5s forwards, win-pulse 1.2s ease-in-out .8s infinite; }
@keyframes win-in { to { opacity: 1; } }
@keyframes win-pulse { 50% { box-shadow: 0 0 18px var(--neon-yellow), inset 0 0 14px var(--neon-yellow); } }
/* theme.css turns animations off for reduced motion, so show the ring statically there. */
@media (prefers-reduced-motion: reduce) { .win-ring { opacity: 1; } }

/* One transparent button per column, over the board, for mouse, touch and keyboard. */
#columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); z-index: 4; }
.col { background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius); touch-action: manipulation; }
/* Hover/focus tint in the colour of the player whose turn it is (--turn is set by game.js). */
.col:focus-visible { background: color-mix(in srgb, var(--turn, var(--neon-cyan)) 14%, transparent); }
@media (hover: hover) { .col:hover:not(:disabled) { background: color-mix(in srgb, var(--turn, var(--neon-cyan)) 14%, transparent); } }
.col:disabled { cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.hint { color: var(--text-muted); font-size: .9rem; margin: 0; text-align: center; }