.c4 { --s: min(48px, calc((100vw - 150px) / 7)); display: grid; grid-template-columns: repeat(7, var(--s)); gap: 6px; padding: 10px; background: var(--chip); border-radius: 16px; }
.c4-drop { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); font: inherit; font-size: 16px; cursor: pointer; padding: 0; }
button.c4-drop:hover { background: var(--hover); color: var(--text); }
button.c4-drop.t1:hover { color: var(--red); } button.c4-drop.t2:hover { color: var(--yellow); }
.c4-c { width: var(--s); height: var(--s); border-radius: 50%; background: var(--bg); box-shadow: inset 0 2px 4px var(--shadow); }
.c4-c.p1 { background: var(--red); } .c4-c.p2 { background: var(--yellow); }
.c4-c.last { outline: 3px solid var(--text); outline-offset: -6px; }
.c4-c.win { outline: 3px solid var(--green); outline-offset: 2px; }