.grp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.grp .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stats { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
.msg { margin: 4px 2px 8px; min-height: 2.6em; font-weight: 700; font-size: 15px; }

.board { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 100%; aspect-ratio: 1; container-type: size; border: 3px solid #E8F5EC; border-radius: 6px; background: var(--bg2); overflow: hidden; }
.cell { position: relative; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-right: 1px solid #2c5a3f; border-bottom: 1px solid #2c5a3f; background: var(--bg2); color: var(--text); font: inherit; cursor: pointer; display: grid; place-items: center; }
.cell.cr { border-right: 3px solid #E8F5EC; }
.cell.cb { border-bottom: 3px solid #E8F5EC; }
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(n+73) { border-bottom: 0; }
.cell.peer { background: #0F2E1C; }
.cell.same { background: #1F4A33; }
.cell.sel { background: #35564A; box-shadow: inset 0 0 0 3px #F2C94C; z-index: 2; }
.cell .d { font-size: 6.6cqw; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cell.given .d { color: #F4EFE2; font-weight: 800; }
.cell.mine .d { color: #7BE0A0; }
.cell.hinted .d { color: #F0D9B5; }
.cell.bad { box-shadow: inset 0 0 0 2px #E5694F; }
.cell.bad .d { color: #FFB3A3; }
.cell.bad::after { content: "!"; position: absolute; right: 8%; top: 2%; font-size: 3.2cqw; font-weight: 900; color: #FFB3A3; }
.cell.wrong::after { content: "✕"; position: absolute; right: 6%; top: 0; font-size: 3.6cqw; font-weight: 900; color: #FFB3A3; }
.cell.wrong { box-shadow: inset 0 0 0 2px #E5694F; }
.cell .nt { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 92%; height: 92%; font-size: 2.9cqw; color: var(--muted); line-height: 1; }
.cell .nt span { display: grid; place-items: center; }
.cell:focus-visible { outline: 3px solid #F2C94C; outline-offset: -3px; z-index: 3; }

.keypad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin: 12px 0 8px; }
.key { min-height: 48px; font-size: 20px; font-weight: 800; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer; font-family: inherit; padding: 0; position: relative; }
.key:hover { border-color: var(--accent); }
.key small { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 600; color: var(--muted); }
.key[aria-disabled="true"] { opacity: .35; cursor: default; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.actions .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }