:root { --brand: #444; }
body { margin: 0; padding: 1.5rem; font-family: system-ui, sans-serif; text-align: center; color: #222; }
h1 { margin: 0; color: var(--brand); }
.hint { color: #666; }
#board { display: inline-grid; gap: .35rem; margin: 1rem 0; }
.row { display: flex; gap: .35rem; }
.cell { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center;
        border: 2px solid #ccc; border-radius: .25rem; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.cell.hit  { background: #3a9d4a; border-color: #3a9d4a; color: #fff; }
.cell.near { background: #d1a21c; border-color: #d1a21c; color: #fff; }
.cell.miss { background: #888;    border-color: #888;    color: #fff; }
#message { min-height: 1.5rem; font-weight: 600; }
.meta { font-size: .75rem; color: #999; }