:root {
    --cell-selected: #BCBCBC;      /* Selected & filled */
    --cell-selected-empty: #E7E7E7; /* Selected & empty */
    --cell-number: #CDCDCD;        /* Same-number highlight when selected filled */
    --cell-master: #D6D6D6;        /* Row/col/box highlight */
    --cell-fixed: #FFFFFF;         /* Given clues (white per latest requirement) */
    --cell-empty: #FFFFFF;         /* Unfilled default cell */
    --cell-hint-unit: #C4C4C4;     /* Hint unit shading */
    --cell-focus-ring: #B3B3B3;    /* Ring / outline */

    --brandBackground: #3a5fa8;
    --numberpadBackground: #E7E7E7;
    --numberpadBackgroundHover: #D6D6D6;
    --brandBackgroundHover: #2d4d8c;
    --foregroundOnBrand: #ffffff;
    --background: #ffffff;
    --foreground: #000000;
    --border: #e5e7eb;
    --muted: #6b7280;
    --layerBackground: #f8fafc;
    --secondaryBackground: #f1f5f9;
    --stroke: #d1d5db;
    --strokeHover: #9ca3af;
    --notes-selected: #000000;
}

:root[data-theme="dark"] {
    --cell-selected: #334155;
    --cell-selected-empty: #1f2937;
    --cell-number: #475569;
    --cell-master: #1f2937;
    --cell-fixed: #111827;
    --cell-empty: #0f172a;
    --cell-hint-unit: #1e293b;
    --cell-focus-ring: #38bdf8;

    --brandBackground: #60a5fa;
    --numberpadBackground: #1e293b;
    --numberpadBackgroundHover: #334155;
    --brandBackgroundHover: #3b82f6;
    --foregroundOnBrand: #0b1120;

    --background: #020617;
    --foreground: #e2e8f0;
    --border: #1f2937;
    --muted: #94a3b8;
    --layerBackground: #111827;
    --secondaryBackground: #020617;
    --stroke: #1f2937;
    --strokeHover: #334155;
    --notes-selected: #e2e8f0;
}

/* Cell state classes */
.cell-empty { background-color: var(--cell-empty); }
.cell-fixed { background-color: var(--cell-fixed); }
.cell-master-highlight { background-color: var(--cell-master) !important; }
.cell-number-highlight { background-color: var(--cell-number) !important; }
.cell-selected { background-color: var(--cell-selected) !important; }
.cell-selected-empty { background-color: var(--cell-selected-empty) !important; }
.cell-hint-unit { background-color: var(--cell-hint-unit) !important; }
.ring-tray-focus { --tw-ring-color: var(--cell-focus-ring); }

input, button, select, textarea { -webkit-appearance: none; appearance: none; }

/* Simple grid system */
.sudoku-grid { display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1 / 1; width: 100%; max-width: 100%; height: fit-content; }
.sudoku-cell { aspect-ratio: 1 / 1; min-width: 0; min-height: 0; }

@keyframes hint-pop-scale { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.0); } 30% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(34,197,94,0.25); } 60% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(34,197,94,0.15); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.0); } }
@keyframes hint-flash-color { 0% { color: #065f46; } 50% { color: #16a34a; } 100% { color: #065f46; } }
.hint-pop { animation: hint-pop-scale 0.75s ease-out; }
.hint-flash { animation: hint-flash-color 0.75s ease-out; }

@keyframes confetti-fall { 0% { transform: translate3d(0,-10vh,0) rotateZ(0deg) rotateY(0deg); opacity: 1; } 100% { transform: translate3d(0,110vh,0) rotateZ(720deg) rotateY(360deg); opacity: 1; } }
@keyframes confetti-sway { 0% { transform: translateX(0); } 50% { transform: translateX(24px); } 100% { transform: translateX(0); } }
.confetti-container { pointer-events: none; }
.confetti { position: absolute; top: -10px; will-change: transform; animation-name: confetti-sway; animation-iteration-count: infinite; }
.confetti-piece { position: absolute; top: -10px; border-radius: 2px; opacity: 0.95; will-change: transform; animation-name: confetti-fall; animation-iteration-count: infinite; }

.reason-highlight { background-color: rgba(253, 230, 138, 0.8) !important; }
.reason-ring { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.9) inset; }

.square-container { aspect-ratio: 1; width: min(calc(100vh - 3rem), 100%); max-width: 100%; max-height: calc(100vh - 3rem); }
.notes-text { color: var(--muted); }
.notes-selected { color: var(--notes-selected); }


/* Number pad button styles */
.numberpad-btn { background-color: var(--numberpadBackground); color: var(--brandBackground); }
.numberpad-btn:hover:not(:disabled) { background-color: var(--numberpadBackgroundHover); }
.numberpad-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toolbar-btn { background-color: var(--numberpadBackground); color: var(--brandBackground); }
.toolbar-btn:hover:not(:disabled) { background-color: var(--numberpadBackgroundHover); }
.toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.numberpad-btn .moves-left, .numberpad-btn span.moves-left { color: var(--muted); }