/* Binairo grid; shapes (○ ●) and "!" mark carry meaning besides color. */
.binairo-grid { display: grid; width: 100%; max-width: 460px; margin: 16px auto; border: 2px solid #93becd; border-radius: 12px; overflow: hidden; background: #12232e; }
.binairo-row { display: grid; grid-template-columns: repeat(var(--grid-size, 8), minmax(0, 1fr)); }
.games-main .binairo-cell { position: relative; border: 1px solid #607c88; background: #142631; color: #f0f7fa; font-size: clamp(.9rem, 4.2vw, 1.5rem); }
.games-main .binairo-cell--zero { background: #182e3b; color: #9fd8e4; }
.games-main .binairo-cell--one { background: #214b58; color: #f0f7fa; }
.games-main .binairo-cell--given { font-weight: 900; color: #ffd98a; background: #2a3b34; box-shadow: inset 0 0 0 2px #8a7a44; }
.games-main .binairo-cell--given.binairo-cell--zero, .games-main .binairo-cell--given.binairo-cell--one { background: #2a3b34; }
.games-main .binairo-cell--conflict { box-shadow: inset 0 0 0 3px #ff7a4d; }
.games-main .binairo-cell--given.binairo-cell--conflict { box-shadow: inset 0 0 0 3px #ff7a4d; }
.binairo-symbol { pointer-events: none; line-height: 1; }
.binairo-mark { position: absolute; top: 1px; right: 3px; font: 900 .7rem var(--font-mono); color: #ffb08a; pointer-events: none; line-height: 1; }
@media (max-width: 540px) { .binairo-grid { margin: 12px auto; } .binairo-mark { font-size: .6rem; right: 2px; } }