/* Code breaker: colored pegs always carry their number; hints use ● / ○ symbols. */
.code-board { display: grid; gap: 6px; width: 100%; max-width: 440px; margin: 16px auto; padding: 10px; border-radius: 16px; border: 1px solid #789cac; background: #12232e; }
.code-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; border: 1px solid transparent; }
.code-row--done { background: #142631; border-color: #607c88; }
.code-row--current { background: #182e3b; border-color: #65dbea; }
.code-row--idle { opacity: .55; }
.code-row--secret { margin-top: 6px; background: #182e3b; border: 1px dashed #65dbea; }
.code-index { flex: 0 0 1.4rem; text-align: center; color: #b0c4ce; font: 700 .8rem var(--font-mono); }
.code-peg { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(26px, 9vw, 38px); height: clamp(26px, 9vw, 38px); border-radius: 50%; border: 2px solid #54717c; background: #101c25; color: #06171e; font: 800 clamp(.8rem, 3.2vw, 1.05rem) var(--font-mono); line-height: 1; }
.code-peg--empty { color: #b0c4ce; font-weight: 400; }
.code-peg[data-color], .code-color { border-color: #f0f7fa; }
.code-peg[data-color="0"], .code-color[data-color="0"] { background: #ff6b6b; }
.code-peg[data-color="1"], .code-color[data-color="1"] { background: #ffa24a; }
.code-peg[data-color="2"], .code-color[data-color="2"] { background: #ffe14a; }
.code-peg[data-color="3"], .code-color[data-color="3"] { background: #5fdc7a; }
.code-peg[data-color="4"], .code-color[data-color="4"] { background: #4be0e8; }
.code-peg[data-color="5"], .code-color[data-color="5"] { background: #6a9bff; }
.code-peg[data-color="6"], .code-color[data-color="6"] { background: #b88cff; }
.code-peg[data-color="7"], .code-color[data-color="7"] { background: #ff8fcf; }
.code-clue { margin-left: auto; min-width: 2.2rem; text-align: right; color: #65dbea; font: 700 clamp(.9rem, 3.6vw, 1.15rem) var(--font-mono); letter-spacing: .08em; }
.code-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 440px; margin: 12px auto; }
.games-main .code-color { display: inline-flex; align-items: center; justify-content: center; width: 46px; min-width: 0; height: 46px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #f0f7fa; color: #06171e; font: 800 1.15rem var(--font-mono); box-shadow: none; touch-action: manipulation; }
.games-main .code-color:disabled { opacity: .45; }
.games-main .code-color:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 540px) { .code-board { padding: 6px; gap: 4px; } .code-row { gap: 4px; padding: 3px 4px; } .games-main .code-color { width: 42px; height: 42px; } }