.number-game{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;padding:8px;background:#eef3e4;border-radius:20px}.number-game[hidden]{display:none}.number-stage{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.number-stage svg{width:100%;height:100%;max-height:100%;touch-action:manipulation}.number-stage g[role=button]{cursor:pointer;outline:none}.number-stage g[role=button] path{stroke:#254d40;stroke-width:4;stroke-linejoin:round}.number-stage text{font:700 25px system-ui;text-anchor:middle;dominant-baseline:middle;fill:#254d40;pointer-events:none}.number-stage .hinted path,.number-stage g[role=button]:focus-visible path{stroke:#e37a11;stroke-width:8;stroke-dasharray:10 5}.number-tools{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0}.number-buddy{display:flex;align-items:center;gap:8px}.number-buddy img{object-fit:contain}.number-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}.number-palette button{display:flex;gap:8px;align-items:center;background:#fff;border:3px solid transparent;border-radius:16px;min-height:64px;padding:6px;color:#173d31}.number-palette b{display:grid;place-items:center;width:40px;height:40px;background:var(--paint);border-radius:50%;font-size:25px}.number-palette button[aria-pressed=true]{border-color:#174b3b;box-shadow:0 3px 0 #174b3b}.number-actions{display:flex;flex-wrap:wrap;gap:6px}.number-actions button{min-height:46px;background:white;border:1px solid #b8cbb8;border-radius:12px;padding:8px;color:#173d31}.number-actions button[aria-pressed=true]{background:#ffe0a0}.number-tools progress{width:100%;accent-color:#247453}.number-status{font-size:14px;margin:0;min-height:40px}.number-actions button:disabled{opacity:.4}
@media(max-aspect-ratio:1/1){.number-game{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:5px;padding:4px}.number-tools{gap:6px}.number-buddy{display:none}.number-palette{grid-template-columns:repeat(6,1fr);gap:4px}.number-palette button{justify-content:center;flex-direction:column;gap:0;min-height:62px;padding:2px}.number-palette span{font-size:11px}.number-palette b{width:32px;height:32px;font-size:23px}.number-actions{justify-content:center}.number-status{min-height:20px;text-align:center}.number-tools progress{height:8px}}
@media(max-height:460px) and (min-aspect-ratio:1/1){.number-game{grid-template-columns:minmax(0,1fr) 230px;gap:6px;padding:2px}.number-buddy{display:none}.number-tools{gap:5px}.number-palette button{min-height:44px;padding:2px}.number-palette b{width:30px;height:30px;font-size:22px}.number-palette span{font-size:12px}.number-actions button{padding:4px}.number-status{min-height:20px;font-size:12px}}

.number-palette button:nth-child(2) b{color:white}

/* White halo keeps each numeral distinct from neighbouring outlines. */
.number-stage text{paint-order:stroke fill;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-weight:800}

.number-actions [data-number-hint]{background:#ffda48;border:2px solid #173d31;font-weight:800;min-height:48px;flex:1 0 100%;box-shadow:0 3px 0 #173d31}
.number-actions [data-number-hint][aria-pressed=true]{background:#173d31;color:#fff}
.number-stage .hinted path{stroke:#e37a11;stroke-width:9;stroke-dasharray:9 5;fill:#fff0b3!important}
@media(max-aspect-ratio:1/1){.number-actions [data-number-hint]{flex:0 1 auto;padding:8px 16px}}
@media(max-height:460px) and (min-aspect-ratio:1/1){.number-actions [data-number-hint]{flex:0 1 auto;min-height:44px}}