.setup { margin-bottom: 14px; }
.c4-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .c4-layout { grid-template-columns: 1fr; } }
.hud { display: flex; justify-content: space-around; text-align: center; margin-bottom: 14px; }
.hud .k { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); font-weight: 600; }
.hud .v { font-family: Chango, Georgia, serif; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.c4-wrap { width: min(100%, 520px); margin: 0 auto; }
.c4-heads { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 8px; margin-bottom: 4px; }
.c4-head { height: 34px; border: 0; background: transparent; cursor: pointer; border-radius: 10px; font: inherit; font-weight: 600; color: var(--brand-deep); }
.c4-head:hover:not(:disabled)::before { content: '▼'; }
.c4-head:disabled { cursor: default; }
.c4-head:focus-visible { outline: 3px solid var(--brand); }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px; background: var(--brand-deep); border-radius: 18px; box-shadow: 0 10px 30px rgba(20,73,54,.18); }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: #f0fcf0; box-shadow: inset 0 3px 6px rgba(20,73,54,.35); position: relative; }
.c4-cell.r::after, .c4-cell.y::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; animation: drop .28s ease-in; }
.c4-cell.r::after { background: radial-gradient(circle at 35% 30%, #ff7a6e, #d92d20 70%); }
.c4-cell.y::after { background: radial-gradient(circle at 35% 30%, #ffe27a, #f0b400 70%); }
.c4-cell.win { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--brand); z-index: 1; }
@keyframes drop { from { transform: translateY(-260%); } to { transform: none; } }
.status-line { text-align: center; font-weight: 600; font-size: 1.15rem; margin: 16px 0 4px; min-height: 1.5em; }
.quip { text-align: center; margin: 0 0 8px; min-height: 1.5em; color: var(--brand-deep); font-style: italic; }
.tools { justify-content: center; }
.tools .btn { flex: 0 1 auto; }