:root{--p1:#c4513f;--p1dark:#8e3326;--p2:#e7b548;--p2dark:#a97c1d;--boardc:#2c5266}
.boardFrame{background:linear-gradient(160deg,#35607a,#24485b);border-color:#1c3441;padding:10px}
#c4board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;aspect-ratio:7/6;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#c4board .col{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;padding:0;border:0;border-radius:10px;background:transparent;min-width:0}
#c4board .col:not(:disabled):hover,#c4board .col.cursor:not(:disabled){background:#ffffff1a}
#c4board .col:disabled{cursor:default;opacity:1}
#c4board .col.hint{background:#f6e3a340;box-shadow:inset 0 0 0 2px #f6e3a3}
.slot{display:block;border-radius:50%;background:#e8ede8;box-shadow:inset 0 3px 6px #0b1a2260;aspect-ratio:1;position:relative;overflow:hidden}
.slot.p1,.disc.p1{background:radial-gradient(circle at 35% 30%,#e98a74,var(--p1) 55%,var(--p1dark));box-shadow:inset 0 -3px 6px #0005,0 1px 2px #0003}
.slot.p2,.disc.p2{background:radial-gradient(circle at 35% 30%,#fbe3a0,var(--p2) 55%,var(--p2dark));box-shadow:inset 0 -3px 6px #0004,0 1px 2px #0003}
.slot.fall{animation:fall calc(.14s + var(--fall)*.045s) cubic-bezier(.45,0,.75,1)}
@keyframes fall{from{transform:translateY(calc(var(--fall)*-118%))}to{transform:none}}
.slot.win{outline:3px solid #fff;outline-offset:-3px;animation:glow 1.1s ease-in-out infinite alternate}
@keyframes glow{from{filter:brightness(1)}to{filter:brightness(1.25)}}
.disc{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle}
.turnBox{display:flex;align-items:center;gap:9px;font-size:15px}
.tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.tools button:last-child{color:inherit}
.statGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.statGrid div{background:#eef2ec;border-radius:10px;padding:10px;text-align:center}
.statGrid small{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--muted)}
.statGrid b{display:block;font-family:Manrope,sans-serif;font-size:26px}
.statGrid span{font-size:11px;color:var(--muted)}
.game-focus .boardFrame{aspect-ratio:auto;width:min(100cqw,calc((100cqh - 150px)*7/6));padding:7px}
.game-focus .tools{width:min(100%,560px)}
@media(max-height:500px){.game-focus .boardFrame{width:min(100%,calc((100dvh - 30px)*7/6))}}
@media(prefers-reduced-motion:reduce){.slot.fall,.slot.win{animation:none}}

/* Beskeder under brættet med fast plads, så brættet aldrig hopper. */
.boardColumn #message{min-height:42px;margin:10px 0 0;padding:10px 14px;font-size:14px}
.boardColumn #message:empty{display:block;visibility:hidden}