/* Vier gewinnt — scoped to #sdb-game-root. spieldb.de pastel tokens. */
#sdb-game-root{
  --cream:#FDFBF7;--paper:#fff;--rose:#E5989B;--mustard:#FFB347;--deep:#4A4E69;--ink:#22223B;--line:rgba(74,78,105,.12);
  font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);max-width:560px;margin:0 auto;
}
#sdb-game-root *{box-sizing:border-box;}
.c4-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.c4-status{font-weight:700;font-size:1.05rem;min-height:1.5rem;}
.c4-controls{display:flex;gap:.5rem;align-items:center;}
.c4-select{font:inherit;font-weight:600;padding:.55rem .9rem;border:2px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;}
.c4-btn{font:inherit;font-weight:700;padding:.6rem 1.3rem;border:0;border-radius:999px;background:var(--deep);color:#fff;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.c4-btn:hover{transform:translateY(-2px) scale(1.03);}
/* Board: column-flex of 6 row-flexes. Row-flex items have definite width → aspect-ratio resolves correctly (avoids grid/flex height bug). */
.c4-board{position:relative;background:var(--deep);border-radius:1.5rem;padding:3%;display:flex;flex-direction:column;gap:3%;overflow:hidden;}
.c4-row{display:flex;gap:3%;}
.c4-cell{flex:1;aspect-ratio:1;border-radius:50%;background:var(--cream);transition:background .15s;}
.c4-cell.p1{background:var(--rose);}
.c4-cell.p2{background:var(--mustard);}
.c4-cell.win{box-shadow:0 0 0 4px #fff inset;}
.c4-cell.top-empty-hover{background:rgba(255,179,71,.45);}
/* Transparent column-button overlay aligned to the board grid */
.c4-cols{position:absolute;inset:0;display:flex;padding:3%;gap:3%;}
.c4-col{flex:1;background:transparent;border:0;padding:0;cursor:pointer;}
.c4-col:focus-visible{outline:3px solid var(--mustard);outline-offset:-4px;}
.c4-select:focus-visible,.c4-btn:focus-visible{outline:3px solid var(--mustard);outline-offset:2px;}
@keyframes c4drop{0%{transform:translateY(-220%);}70%{transform:translateY(6%);}100%{transform:translateY(0);}}
.c4-cell.dropped{animation:c4drop .34s cubic-bezier(.34,1.4,.64,1);}
@media (prefers-reduced-motion:reduce){.c4-cell.dropped{animation:none!important;}}