/* Guess my rule: layout only. Colours and type come from lib/base.css. */
.triple { font: 300 2.2rem/1.1 var(--display); color: var(--paper-ink); margin: 0.2rem 0 0.8rem; text-align: center; font-variant-numeric: tabular-nums; }
.board.guesses { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.machine .board.guesses button.pick { min-height: 3rem; font-size: 0.92rem; text-align: left; }
.tester { margin-top: 1rem; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.nums label { display: grid; gap: 0.25rem; font: 600 0.8rem var(--body); color: var(--paper-soft); }
.nums input { width: 100%; min-width: 0; box-sizing: border-box; padding: 0.55rem 0.5rem; font: 600 1.15rem var(--body); color: var(--paper-ink); background: transparent; border: 1px solid var(--paper-soft); border-radius: 0; font-variant-numeric: tabular-nums; }
#test, #sure { width: 100%; margin-top: 0.6rem; }
.log { list-style: none; margin: 0.7rem 0 0; padding: 0; max-height: 12rem; overflow-y: auto; }
.log li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; padding: 0.35rem 0.5rem; border-left: 3px solid var(--c4); color: var(--paper-ink); font-size: 0.92rem; }
.log li + li { margin-top: 0.25rem; }
.log li.yes { border-left-color: var(--yellow); }
.log li b { font-variant-numeric: tabular-nums; min-width: 6rem; }
.log li small { color: var(--paper-soft); }
.axis-note { margin: 1rem 0 0.6rem; font-size: 0.85rem; color: var(--paper-soft); }
canvas.rounds { display: block; width: 100%; aspect-ratio: 25 / 8; height: auto; }