:root {
    --line: #334155;
    --line-strong: #0f172a;
    --accent: #2563eb;
    --hint: #fde68a;
    --hint-mark: #92400e;
    --conflict: #fecaca;
    --conflict-text: #b91c1c;
    --conflict-stripe: rgba(153, 27, 27, 0.5);
    --bg: #f8fafc;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: #0f172a;
    margin: 0;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
}

main { width: 100%; max-width: 30rem; }

h1 { font-size: 1.5rem; margin: 0 0 1.25rem; text-align: center; }

.board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
    border: 3px solid var(--line-strong);
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
}

.cell {
    border: 1px solid var(--line);
    text-align: center;
    font-size: 1.25rem;
    width: 100%;
    height: 100%;
    padding: 0;
    outline: none;
    background: transparent;
    color: var(--line-strong);
}

.cell:focus { background: #e0ecff; }

/* Thicker borders between 3x3 boxes */
.cell.br { border-right: 3px solid var(--line-strong); }
.cell.bb { border-bottom: 3px solid var(--line-strong); }

/* Hint cells: yellow fill PLUS a triangle marker in the top-left corner, so
   the state is recognisable without relying on colour. (CSS gradient, not an
   image, to stay within the strict CSP.) Placed after :focus so the cue
   survives selection. */
.cell.hint,
.cell.hint:focus {
    background:
        linear-gradient(135deg, var(--hint-mark) 0 30%, transparent 30%) 0 0 / 14px 14px no-repeat,
        var(--hint);
}

/* Conflict cells: red fill PLUS diagonal stripes — a distinct texture from the
   hint marker, so hints and clashes are tellable apart without colour too. */
.cell.conflict,
.cell.conflict:focus {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0 5px,
            var(--conflict-stripe) 5px 7px
        ),
        var(--conflict);
    color: var(--conflict-text);
    font-weight: 700;
}

.controls { display: flex; gap: .75rem; margin: 1.25rem 0 .75rem; }

button {
    flex: 1;
    padding: .6rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: .5rem;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

button.secondary { background: #e2e8f0; color: #0f172a; }
button:hover { filter: brightness(0.95); }

.message { min-height: 1.5rem; margin: 0; font-size: .95rem; }
.message.ok { color: #15803d; }
.message.error { color: #b91c1c; }