:root{ --bg: #0b1220; --panel: rgba(255,255,255,0.06); --panel2: rgba(255,255,255,0.09); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.65); --border: rgba(255,255,255,0.18); --grid-border: rgba(255,255,255,0.22); --shadow: 0 18px 45px rgba(0,0,0,0.55); --shadow2: 0 10px 25px rgba(0,0,0,0.45); --accent: #7c5cff; /* purple */ --accent2:#00d4ff; /* cyan */ --good: #25d366; --warn: #ffcc00; --bad: #ff4d4d; --cell: rgba(255,255,255,0.04); --cell2: rgba(255,255,255,0.06); --cellHover: rgba(255,255,255,0.08); --select: rgba(124,92,255,0.35); --selectNotes: rgba(37,211,102,0.22); --same: rgba(45, 125, 255, 0.32); --scope: rgba(255,204,0,0.14); } * { box-sizing: border-box; } body{ margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(1200px 900px at 20% 10%, rgba(124,92,255,0.35), transparent 55%), radial-gradient(900px 700px at 90% 25%, rgba(0,212,255,0.25), transparent 55%), radial-gradient(800px 700px at 40% 100%, rgba(37,211,102,0.18), transparent 60%), linear-gradient(180deg, #070b14 0%, var(--bg) 50%, #060a12 100%); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Page layout wrapper (App root div) */ #root > div{ max-width: 980px; margin: 0 auto; padding: 28px 14px 40px; } /* Subtle header-like spacing above controls */ .controls{ text-align: center; margin: 10px auto 18px; padding: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 0px; box-shadow: var(--shadow2); backdrop-filter: blur(10px); } .controls button{ padding: 9px 12px; font-size: 15px; cursor: pointer; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)); color: var(--text); box-shadow: 0 10px 18px rgba(0,0,0,0.30); transition: transform .12s ease, border-color .12s ease, background .12s ease; } .controls button:disabled{ opacity: 0.55; cursor: not-allowed; transform: none !important; filter: none !important; } .controls button:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); } .controls button:active{ transform: translateY(0px) scale(0.99); } .toggle-container{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); } .toggle-container span{ color: var(--muted); } .toggle-container input{ accent-color: var(--accent); transform: translateY(1px); cursor: pointer; } .number-buttons{ text-align: center; margin: 12px auto 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow2); backdrop-filter: blur(10px); max-width: 760px; } .button-container{ width: 46px; height: 46px; display: inline-grid; place-items: center; } .number-button{ width: 46px; height: 46px; font-size: 18px; cursor: pointer; line-height: 1; text-align: center; padding: 0; border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; color: var(--text); background: radial-gradient(120% 120% at 30% 20%, rgba(124,92,255,0.32), rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.03) 100%); box-shadow: 0 10px 18px rgba(0,0,0,0.35); transition: transform .12s ease, filter .12s ease, border-color .12s ease; } .number-button:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.28); filter: brightness(1.07); } .number-button:active{ transform: translateY(0px) scale(0.99); } .count{ font-size: 12px; color: rgba(255,255,255,0.65); display: block; margin-top: 4px; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .error{ color: var(--bad); text-align: center; margin: 10px auto 0; font-size: 14px; min-height: 18px; } /* Sudoku board container look */ table{ border-collapse: collapse; margin: 18px auto 0; padding: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: rgba(255,255,255,0.03); } td{ border: 1px solid var(--grid-border); width: 42px; height: 42px; text-align: center; font-size: 28px; background-color: var(--cell); position: relative; user-select: none; cursor: pointer; transition: background-color .12s ease, outline-color .12s ease; color: var(--text); } /* thicker borders for 3x3 and edges */ tr:nth-child(3n) td { border-bottom: 3px solid rgba(255,255,255,0.22); } td:nth-child(3n) { border-right: 3px solid rgba(255,255,255,0.22); } tr:first-child td { border-top: 3px solid rgba(255,255,255,0.22); } td:first-child { border-left: 3px solid rgba(255,255,255,0.22); } td:hover{ background-color: var(--cellHover); } /* Notes */ .notes-grid{ pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; font-size: 10px; line-height: 1; position: absolute; top: 0; left: 0; padding: 2px; } .note-num{ pointer-events: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,0.70); user-select: none; cursor: pointer; border-radius: 6px; } .note-num:hover{ background: rgba(255,255,255,0.08); } /* Highlights */ .highlight{ background-color: var(--same) !important; box-shadow: inset 0 0 0 2px rgba(45, 125, 255, 0.65); } .note-highlight{ background-color: rgba(55, 135, 255, 0.60); color: rgba(255,255,255,0.98); } .selected{ background-color: var(--select) !important; outline: 2px solid rgba(124,92,255,0.55); outline-offset: -2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); } .selected.notes{ background-color: var(--selectNotes) !important; outline: 2px solid rgba(37,211,102,0.55); } .hover-scope{ background-color: var(--scope) !important; } /* Winner modal */ .modal-overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.60); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 18px; } .modal{ background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.18); padding: 18px; border-radius: 18px; width: min(420px, 92vw); box-shadow: var(--shadow); text-align: center; color: var(--text); backdrop-filter: blur(12px); } .modal h2{ margin: 0 0 8px 0; letter-spacing: 0.2px; } .modal p{ margin: 0 0 16px 0; color: var(--muted); } .modal button{ padding: 10px 14px; font-size: 15px; cursor: pointer; border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; background: radial-gradient(120% 120% at 30% 20%, rgba(0,212,255,0.30), rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.04) 100%); color: var(--text); box-shadow: 0 12px 22px rgba(0,0,0,0.35); transition: transform .12s ease, filter .12s ease, border-color .12s ease; } .modal button:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.28); filter: brightness(1.08); } .modal button:active{ transform: translateY(0px) scale(0.99); } /* Solver visualization */ .solve-given{ background-color: rgba(0, 122, 255, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.28) !important; } .solve-good{ background-color: rgba(37, 211, 102, 0.20) !important; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.32) !important; } .solve-bad{ background-color: rgba(255, 77, 77, 0.22) !important; box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.34) !important; } /* Mini solution board */ .mini-wrap{ max-width: 760px; margin: 18px auto 0; padding: 12px 12px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,0.35); backdrop-filter: blur(10px); } .mini-title{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; margin: 0 0 8px 0; color: rgba(255,255,255,0.82); font-size: 13px; letter-spacing: 0.2px; } .mini-title .hint{ color: rgba(255,255,255,0.55); font-size: 12px; } table.mini{ border-collapse: collapse; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: none; background: rgba(255,255,255,0.02); } table.mini td{ width: 18px; height: 18px; font-size: 12px; line-height: 1; padding: 0; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); cursor: default; } table.mini tr:nth-child(3n) td { border-bottom: 2px solid rgba(255,255,255,0.18); } table.mini td:nth-child(3n) { border-right: 2px solid rgba(255,255,255,0.18); } table.mini tr:first-child td { border-top: 2px solid rgba(255,255,255,0.18); } table.mini td:first-child { border-left: 2px solid rgba(255,255,255,0.18); } /* Hint highlighting */ .hint-cell{ outline: 3px solid rgba(255, 204, 0, 0.75) !important; outline-offset: -3px; box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.25), 0 0 0 6px rgba(255, 204, 0, 0.10); background-color: rgba(255, 204, 0, 0.12) !important; } .hint-scope{ background-color: rgba(255, 204, 0, 0.08) !important; } .hint-note{ background-color: rgba(255, 204, 0, 0.22) !important; color: rgba(255,255,255,0.95) !important; font-weight: 700; } /* Teaching Hint (separate from Hint) */ .teach-cell{ outline: 3px solid rgba(0, 200, 255, 0.75) !important; outline-offset: -3px; box-shadow: inset 0 0 0 1px rgba(0, 200, 255, 0.22), 0 0 0 6px rgba(0, 200, 255, 0.10); background-color: rgba(0, 200, 255, 0.10) !important; } .teach-scope{ background-color: rgba(0, 200, 255, 0.06) !important; } .teach-clue{ background-color: rgba(0, 200, 255, 0.14) !important; box-shadow: inset 0 0 0 2px rgba(0, 200, 255, 0.30); } /* Teaching Hint: Forcing Pair visuals */ .teach-contradiction{ outline: 3px solid rgba(255, 60, 60, 0.85) !important; outline-offset: -3px; box-shadow: inset 0 0 0 2px rgba(255, 60, 60, 0.35), 0 0 0 7px rgba(255, 60, 60, 0.12); background-color: rgba(255, 60, 60, 0.10) !important; } .teach-branch{ display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .teach-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); font-weight: 700; user-select: none; } .teach-pill.good{ border-color: rgba(80, 220, 120, 0.45); background: rgba(80, 220, 120, 0.10); } .teach-pill.bad{ border-color: rgba(255, 60, 60, 0.55); background: rgba(255, 60, 60, 0.10); } .teach-badge{ font-size: 12px; opacity: 0.9; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.25); } /* Teaching Hidden Single helpers: highlight blocking rows/cols (instead of highlighting the digit) */ .teach-block-row{ background-color: rgba(0, 200, 255, 0.075) !important; box-shadow: inset 0 0 0 999px rgba(0, 200, 255, 0.05) !important; } .teach-block-col{ background-color: rgba(0, 200, 255, 0.075) !important; box-shadow: inset 0 0 0 999px rgba(0, 200, 255, 0.05) !important; } /* Ensure clicking numbers/notes still selects the cell */ .cellValue, .notes, .notes-grid, .note, .notesContainer, .cell-inner { pointer-events: none !important; } /* Same-number "taken" lines (rows/cols/boxes containing the selected number) */ .same-taken-row{ background-color: rgba(120, 160, 255, 0.14) !important; box-shadow: inset 0 0 0 999px rgba(120, 160, 255, 0.10) !important; } .same-taken-col{ background-color: rgba(120, 160, 255, 0.14) !important; box-shadow: inset 0 0 0 999px rgba(120, 160, 255, 0.10) !important; } .same-taken-box{ background-color: rgba(120, 160, 255, 0.18) !important; box-shadow: inset 0 0 0 999px rgba(120, 160, 255, 0.14) !important; } /* Teaching Mode: Digit guidance overlay (does NOT reveal exact placements) - Red: cells that are in a row/col/box where this digit is already used (blocked units) - Green: empty cells where this digit is currently legal (candidate spots) */ .teach-digit-blocked{ background-color: rgba(255, 120, 120, 0.22) !important; box-shadow: inset 0 0 0 999px rgba(255, 120, 120, 0.16) !important; } .teach-digit-candidate{ background-color: rgba(120, 255, 170, 0.20) !important; box-shadow: inset 0 0 0 999px rgba(120, 255, 170, 0.14) !important; } /* === Force square corners === */ .sudoku-board, .sudoku-board table, .sudoku-board td, .board-wrapper, .game-board { border-radius: 0px !important; } /* === Stronger 3x3 box borders === */ .sudoku-board td { border: 1px solid rgba(255,255,255,0.22); } .sudoku-board tr:nth-child(3n) td { border-bottom: 4px solid rgba(255,255,255,0.55) !important; } .sudoku-board td:nth-child(3n) { border-right: 4px solid rgba(255,255,255,0.55) !important; } /* === HARD OVERRIDES: square board + bold 3x3 === */ /* kill ALL rounding anywhere on the board */ .sudoku-board, .sudoku-board *, .board-wrapper, .board-wrapper *, .game-board, .game-board * { border-radius: 0 !important; } /* ensure outer container doesn't clip rounded corners */ .board-wrapper, .game-board { overflow: visible !important; } /* base grid lines */ .sudoku-board td { border: 1px solid rgba(255,255,255,0.25) !important; } /* bold 3x3 separators */ .sudoku-board tr:nth-child(3n) td { border-bottom: 5px solid rgba(255,255,255,0.65) !important; } .sudoku-board td:nth-child(3n) { border-right: 5px solid rgba(255,255,255,0.65) !important; } /* === Square board corners (fix table radius) === */ table[aria-label="Sudoku grid"]{ border-radius: 0 !important; overflow: visible !important; } .axis-wrapper{ display:grid; grid-template-columns: 26px 1fr; grid-template-rows: 24px 1fr; gap: 6px 8px; align-items: stretch; justify-items: stretch; margin: 0 auto; max-width: 520px; } .axis-top{ grid-column: 2; display:grid; grid-template-columns: repeat(9, 1fr); } .axis-left{ grid-row: 2; display:grid; grid-template-rows: repeat(9, 1fr); } .axis-label{ display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.65); user-select:none; } .axis-board{ grid-column: 2; grid-row: 2; } /* ========================= Wood Tile Theme (v1) ========================= */ :root{ --wood-bg-1: #2a1d13; --wood-bg-2: #1a120c; --wood-panel: rgba(255,255,255,0.06); --tile-wood-1: #caa46f; --tile-wood-2: #b48755; --tile-wood-3: #9b6f3f; --tile-shadow: rgba(0,0,0,0.55); --tile-inset: rgba(255,255,255,0.25); --tile-edge: rgba(40,25,12,0.55); --ink: rgba(30,18,10,0.92); --ink-soft: rgba(30,18,10,0.68); } /* page background: wood table */ body{ background: radial-gradient(1200px 700px at 15% 10%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%), radial-gradient(900px 600px at 85% 80%, rgba(255,255,255,0.04), rgba(0,0,0,0) 60%), repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.02) 3px, rgba(0,0,0,0.02) 8px, rgba(0,0,0,0.05) 14px ), linear-gradient(180deg, var(--wood-bg-1), var(--wood-bg-2)); color: rgba(255,255,255,0.92); } /* panels: subtle lacquer */ .panel{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 30px rgba(0,0,0,0.35); } /* Buttons: stained wood */ button{ background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)), linear-gradient(180deg, #7a4a2a, #5a331c); border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 8px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18); border-radius: 10px; } button:hover{ filter: brightness(1.05); } button:disabled{ opacity: 0.55; filter: saturate(0.7); } /* Board frame */ .sudoku-board{ border-radius: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 40px rgba(0,0,0,0.45); } /* Cell = wood tile */ .sudoku-cell{ border-radius: 0 !important; background: radial-gradient(120px 80px at 25% 20%, rgba(255,255,255,0.20), rgba(255,255,255,0) 55%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.02) 2px, rgba(0,0,0,0.03) 7px, rgba(0,0,0,0.06) 12px ), linear-gradient(180deg, var(--tile-wood-1), var(--tile-wood-2)); border: 1px solid var(--tile-edge); box-shadow: 0 8px 14px var(--tile-shadow), inset 0 1px 0 var(--tile-inset), inset 0 -6px 12px rgba(0,0,0,0.12); color: var(--ink); font-weight: 900; letter-spacing: 0.2px; text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 2px 3px rgba(0,0,0,0.20); } /* Given clues look engraved */ .sudoku-cell.given{ background: radial-gradient(120px 80px at 30% 25%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%), repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.02) 2px, rgba(0,0,0,0.03) 7px, rgba(0,0,0,0.06) 12px ), linear-gradient(180deg, #d2b180, #b78c5a); color: rgba(20,12,7,0.92); } /* Notes should feel like pencil marks */ .sudoku-notes{ color: rgba(30,18,10,0.68) !important; text-shadow: none !important; } /* Selection + same-number highlights (lacquer glow) */ .sudoku-cell.selected{ outline: 2px solid rgba(198, 150, 255, 0.75) !important; outline-offset: -2px; box-shadow: 0 10px 18px rgba(0,0,0,0.55), 0 0 0 2px rgba(198, 150, 255, 0.22), inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -6px 12px rgba(0,0,0,0.12); } .sudoku-cell.same-number{ outline: 2px solid rgba(45, 125, 255, 0.75) !important; outline-offset: -2px; box-shadow: 0 10px 18px rgba(0,0,0,0.55), 0 0 0 2px rgba(45, 125, 255, 0.24), inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -6px 12px rgba(0,0,0,0.12); } /* More pronounced 3x3 borders in this theme */ .sudoku-cell.thick-right{ border-right: 3px solid rgba(30,18,10,0.55) !important; } .sudoku-cell.thick-bottom{ border-bottom: 3px solid rgba(30,18,10,0.55) !important; } /* Mini board: tiny dark wood */ .mini-board .mini-cell{ background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04)), linear-gradient(180deg, #3a2618, #25180f) !important; border: 1px solid rgba(0,0,0,0.45) !important; color: rgba(255,255,255,0.85) !important; } /* ========================= Wood Tile Image (from provided tiles) ========================= */ :root { --tile-img: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAByCAYAAACP3YV9AAAoLUlEQVR4nO2d34/kSHLfP5GZZFX37Mze3sl3J93JOv2AJNiyZD3ahp/1l/tRMGAYhg3IgiDZgk63vt2d6e4qkpkRfshMVpLFLvZe797eCpuDHrLIKv7IyIiM+MaPlNPpZHzXvvXNfdMP8F37alp47QV8HQrmMDOgbgEcI/G1t/gX3XqJzPxk7rJft3LhNTPNfSs697Erp19NSJtvCDYfq00J3zH9zWZt/0g96JpDq5lPNG9EGob5KggpzT4AijU39+0XvmtXLYmymOGMQqx8TArhMieCcCGgiFB7/dWEnO9vBui8rcfcd4S82aIooIUjEpmALu+bw0jlmxeRO3OjOZB8/vWETCOQRYCREBSzfHER47sp8naTUAd6MzfOolVmiSfSHncI/iKK+SqUnTSUPcWIZZvILK+VOb9rzzSvPu9Yq+RU5UdIviuKJGRJWkWu0M6gryakSwOZWi0hJ5BMSGffKTs3W7pNyGiOOhXmaVIR8ax1oNcTUieYxWrEiIhEMMVMQb6yafhfZJNU5x7HLCsXZsg9ZmnBjVttt5eTO+IFgkQkntHpAaYnAopIYnTD/N3M7uQRQx5pLn67CWnhNvA1TVPz3pdt3dd0+X091jaVrfMGRclx589AR4RE5zokvCGFjznbW0bz3B08gu4T0ixiAqoRLIIlEMNQxDs615fv2eVPbT7GNO7d4je6pbg/yRvFrlt9hiwKF9+15cCogEo9Xvuw7nt/wHTENBJlwCcFCxxCR+/vSWpgL+BIkRFUSRZBz8CIcxldwAmkYmqoos1ffaB+txt+w5vcJuSay2YilM+dWxJGWBLLVZSmHjPD9ILcqOtRG0ETZkZyJ+hGwjESDm8gfI9ktk9Iz5DnP02onnEkHGNWocQgxfkBUL38lWMufLvtSCe3RWtLpLKzOJZsvPpeS0iN2+drS1ERB2aZkMYjhCf0/ITv7ul/8BbvZJ+QLp1AI5YSTkccMaMNqlhSGMc8RZvhATePyIxEWPy2G5K3OTKldEXMlhgpDlfnFtspn9+aX0UEomLOssrhAEvo+Mj5fAYC/buf4fvjCwg5PKCqiI5gWcExS6SUUIuM7z9sTva1VXDg29osTbfPN9yznv/MjJQu77+l7Jj4mXgiAiKIc/N3ew8mgnpBvMtq0Dgxns6M5yeGx085uk/2CalPH4roTIAioqhGpjgQYyQOX1w9aPvA7ltuflzMgxd8d0UoJ4IGf8Vt7Wf1x8Vv1+c78UTTrN16T/AeFwbipIiMfPjsH3HhBaLVhlORzQnnBBMjxZFpGJimgUO3+PZqCyneHtG/6a0PtwENVW06/nowu/5+/iwiuMJt9S+GuytObpt3gWmKJE2IC7jOZ8igD8jZ8fjhU45v3xG8n0gqmB0hI3j4eIb4AYsnxkNW3AyIKYFGkk3gjHDwWNoZC3J7RAuvE726gxy17p61ag/QHQ+b5+r+4GXR8S0hAA799+f7tNu6vyVO29blLz57frIzvg8crMMEvNbrGtESh/AL4mNXOHLdGaJUrPRQR5QlVBOaEiFOaBdBDdvxbpjd5si1nfVlW9r5+XPmQW3e+/l7LbHqMfVyJfbazzH6K+Jt3ffZ5087A9kMRTEENctcX6wCM0PMiDESLkRUsmpUiFiI6fv7YlpEXFJMIupC1lpNUXYIuUMoZ68jpJfbHGlmV5269fmKkOU7Ma47WmgsDZJcrrG+toiguvP+obt9PkW89yRzOMA7h6A45wjiICopjus5sngsRIGYxaLmB7ckqAqow9RhJjgTktsDxfdYZufne23n/pqqS60RcyuuyjpAbqYGasxucs3fu4hdXXwWX7mXxbbu35j+XtS85eepT2hmuPqMZgSMaZoIVz05E9FAIkm7YusbqoYlzY4NpLD7DiV2RMxrX3TtBbg6XTm2QGhVxa/7gpQOr4b60tbrfZi985ngZf4sAyCluIDnaAcI19y/bnG8PfU4i6gzDI8KBHFonNApEmPkgDDFqXJkK161uKAikDAXIOkcxoEYJoZHyN7q2z25N1V4fZ2ba7LbypSbObaKWFvsSwG1F49ZP4gU+/kiSyvERtmqpZtz5B4h94AvJw4njmRSe3y2Mz2CM8Om83PmRxGvoogY6gwxRc3A5QnWBLwYPu0QcodlXitZu92OWMJnedN4HNK1ttpqrXF6mL+7ZSbYQpR+OUUHoO9vo9GGB5eln6mhDlzSLFo1i9k4ToTr0NYac5P/VBRDiVZ8jBoRMVw1HHYm870gOtHXkdL3L7DzeN68kJj3VZWUEjFGUkoz9NaH883rJ32eG+u9bjXb8Q6ZdOA8ag4FgnOQJh4fH3l8fOSjQ8SSErJB21F73MyhyeOsx0liivmFRGX2amSnMSDCnmTce5FdOzMN1ICjrFGGMrcVJSONmGSoy/AkcagJCcEU+pQDmEwn0BFNA6YD6AiWmMbLQKzeiQD4ghWTduzU4nctF8ibVgrJbfNCh52pQR5yyKT5PD+LgzTiz58jw//j/8R7OnEvwFqdyyp0UcvzCBfcwgl6+/evaV14k++SR06Zl6rUABfKK5hgNSpBBSzbWtNUQG2dMI1oHLIToJpPhY55oFwwTnHVn3j7+fvD8eZ53ZnDbdwjpGI4FJcdEq4o6qFHuiN96F9OSAA8aBMv4pBiJ90eca8lpLqCWdS5i0ZzBJx4RLNoNE1omjJKYBHMGIdzAS7K3G5V887PHX03247OOaRuiwTo+9uEcv62HZh2QHe5fXm8RUw8AZ9NDwekEVUYtegq9gKstb6kqV04UhyuqCkVGflV257oHYeCZc4O3nZOVqYxj3qLEeKEpgnTEVICM1I6U0Uz5hAC4gJChub6N3cAM/HcipAuHG4+357BL+52F+8NdGcJE5eBFxO8A0k97hjx5wFNJ9xLCLnX9jS0PULtdgRudlIvQy0BlPE8ZbgqTmX+izhVRBOI4iQD/c55nHR4d8C5AC4Agh2PN82HcSfU48toqFst7lzfkTCBpC47LNQhaowxMaQC1/ES70fR6CjbLOK0GNJ7xsXrCXn0HUaatUq1iZSmzIWW0FMs82ZEKiIjBt7h8Uh3wJwgeFzIhBTvoShN6tbITUV0ao7FbYnjd+zoFHd6yL1kIFwClmu7DOUMgu77I2sMTkolLidHk0u56Cuth92WhqdCyETSgZQmko6oRoxEX+zAbM858AEfAt6HLLZ8VpZwDhMBH1CRSwdWx3e1N5tt/tltQsoOVrxrR+9cP+Cx4h7TIlodQvBC54VInuZeRMiqaMzmB1aQeCHticZXip7zwwespCEYE6oTxlQ+64wwKYJ4geAIXY/vDrjgMbufB1sSSMU4yIF+StU1FpKjtQP37OSdCAjPbULt9Z+VOTLjLsVETBGNCY0T0nnEhCAh24fJDGflwUyz9jcN4A9gKSs4ErKqoY6csAPKbWXArwbklefBhjxQNGFpyA+ZpllZ8XouL5Q725vDSgCvmRC7Dhc8IfS4/oC4Pr+4OKIZzmlzL5u7tYZsVkK4Zm5cAOp7Hb0zUMXd5shuBxlL4gBfjS0EEEn48s/piMQCCGSfYtHSxOG9x9Qh3uNc9gCoZLksliPLMm5sC4hsaz7s/G0IbBieip0XF0TMdl7KvFZdTPgCCLiLz/BwnzXN0GUN0XkQV4xom50j69ia6vUYZTkQZZXoaTuicw/v2NNK/S4WfQZnYD7rAbiMfVvRG3TCJSOsO78NAoISyC7ZwDY0z4+WYS9nBnaBmLY88GkaFmK5Ql/1c4wRMbI2mopBb2n2GKf+kAFi7/GuA9/hQz+bCdZ1lEkElWw4Y5AxGiFNS4gtD4iyD2gxn9bxqPVz2PEX7jl/9pS9ZLdnt85O+fUwROpfZiZxNR1vI661drKmhMVICNmotZSwacxovxpOSuZeHDY5rn6O6XFx3eVcC1iYO89VznMequf+/i0iHucc3nd4FwoRs9aZSkLfjPhY9Wxo0ap1ISovfsO8E9J58ezr/T07ec8tvkdIcTuIAFoU8bJ1CpZ1BCwVEANCFjGXmyZN6DQRhwEbB3Q8ZTA5TaQxw1xomuNGbBqvxNZSccjIxtyZFK9+VRrNzfBf/vNF2yxGfP+2/L46cD1mjqT5mEpjZlKAA6si7eJPzPOwFViuycEf3m8ScBb9O7Ekexy5C5i4HWTIGYpD8agZ3jmcTpyfPnB+esR15Dkyd85lXjAztKD/aZqg2G1xmohjVv+LqnEVyrClodpMgOsIsnzMY05wEnAhz4HOdzMh1WrwlFy4WWuHK64vEFux5xxk0aw5R2WaptmEaj0bVcTf2+nyrBvc43eUmT2OTOPrPOfJdxhCRDATnANJE+enB06P77Hg8EqdI3NHQRE/TYd33uW89VJ8Qoq9Hcp3JrcTnFTcIy0EtiBkkGx0i8eczxqnC2Xa80h6Kq/kEMtztYijVruwWevMPlM0FXA8E3As4ZhrEyo7xA09fnzVee2A9DuAwJ6bbppuY61Bd+JmbZoLRsx2pDgmL4TOMZVxciGkXIhIEXN4z7F3JO/wAskLGv3MjXl0LIm4JpS54xUXtsROFot4FFQEwxWzxmHJOFjOqxdRxHm8FDdW6eCh+PMMK2bTgE0j0zSgMSFdvr/zPitM3i/w1Cf3Zu6z9bMB6I53Yo+Q/V6EgJ5unu/Gz0jiSOZQDC8OSRMuDVg8MZnDJUOG85OpedQKIRhx8QGbvsDiI13XoTE7XDVNoDkr+eL9+Hpzy733i3mrBSgAxvNpMYjWnD/H7HxLm5hmx3KOnSMU0frwxac8fP4Zxkh4Kdb6TbY6UNY26MU8yK/w3Bz8zT79V9NqsNfi86p9Ke+HzeqhXdlbX2e7Zd6EEK68F18m1OI3vb0U4HwRIa9Mim+wrTVjvzLo1/uvD+/6zWizU73g+TNNyut9KdG6xZG/jrYOJn6O4zb3d7wLv+mtEvArEa23OPLr5tQrkH31uQW1t57lN0WS/Kptjox6hiPlV+XIX7eg2iVEc34TkPiqH+jX3L5Sjlxf+NcpWtfmzRWHro6vt6rfdlK+rIUMMknzV1MGcoDyJAdEIuImOlHUGVj29xmBnuHW9V/ddD36dkT8erSGtXdjtW0jALauUcMtn/19uP37uCPD3M5Aq1dPhYGSgXM5vtc5R6fZ5bcfDmmglrCYvSFo9ljnHC+9OGif+/0rwyFfG6VX27NzbesQLK8iTeev8xfXHJ+m28hP3y2ffz3Q/E73uOxJzg51yQ4HZw7zMAYPU3bh7RIyhIARiQ7M57AKc4LzORJNdCdu85WhHq8dCOtiDOvnWZBpI5rOCha6hSMDhI2gpfYerkSaX/ydK67dYQTRqWjeORwSL0iasDgg8ZSzyO0FdXawhJjlnANXwtZxswN4r6NfS8ivq9XnirZ0s633fSlhlg9teEd4XuzmyIfpJqCxl7Gs0xnEl2qpDu8FlyZOHz7n6f3nqPMvI2SaBrCIK9FzmKKmOb9CIsdw+xKvVf9fi+Vu2ZbVHgXwc0xN85ztbvGu6DMQ4TTEK89KiweHpgjx1naPkBYHzOWM5YtoHTk/PvDw+B7X3c35Kjebc4KoQ7zk0PySGylOuBSkf77t5sjvtNcOhFlEPtORPlwTeqGsDI8LQq1LtHm7dpG153dir3YnyeB8ducBSC75mYvu5mC4GXPe6wiH5IJ2w0gaz9n74QIudATviTuVrV5LiNf+3jl3xUlthEAaLyXEtrwrjE/zfntu5u5GGXPlOlVBAcE0LObV9Twr/W0SBBR1jmR+wZGWItM0lqCAF4jWYRiIwxPD4xeMpwdQxYXA4e4jQnf42ufA115/TcCWawDi+XTzfC/pejA1wEiyuHSUrwjl7z7aiIq4ZH0RdgKg04g6P4d6BO9x6tFxoB/vsnliRkhFfVFpMv20VCiMiT4ckCmhMpD0jE4nSANRH0nBcTx8nDOifEB8TspM4sBKPHoTQrJt690OFelkKfqu4MK7cpVChJTSUvR9/suNe15aeK6yVXmUE8d5f+v5/P27hS907bi2ZxJI69Ps6QCdO+LEk5PrcqyTYph1mPVMcqZ3/gXVIb3H+g47HCDeEyURoxHjhKYI8SmPNB/wXY/4DvEBihe/OqBr54hcYmgBkq7U8xXBpyktjq+JmT5/unm+0UXz/ytiTHYdudByTN9EOFwCxC5+z1jq1T4XBbEHLPmdOVKs5KaKYFqiAFvHefnevtZaih10XYe/u2NyyjDCEA00Mpyf5hARN4RC0ID3XRmhy1tYeel5RMbbc5TVMqJcEwtAhsZOhCYBN7eBpR243vfdfR50z3CU78MVkVtC+mlJiOtnvd2/e+abac7GMnMldcKB5YKO1ljBu4Qc44RowguI84T+CB5C6kmWGB6+yARIiVQVn3MdMZ5D1y9erlU0zAxx6erl2w5ph/TaGAfwrl+cX39nsOe5BSCUOWwtGufvlWjFWeEpfzlESAly2x9qOyXa0l6isEVMhWQVSjUoyVSqOq+49CLQPMtkRTCceII/ErpDLhQxRVKamKaJNJVtSrl0NtBtxMy0L+r9NZcstr6NwWEh3gDWNZ/WovPd3SeL66//oiy1SkRyPkeRGqkNpoargea4LHG0fo/8vR07cYdlnctBV05y/LGUMMbcH5ff7s+RvYcIlhIq5BraVTRKwPVHLHU4GUAllztJqRRSVlJd4GU1/1zsu+sHb887121yzBxkdXc//3ZzMFjYPDd3dnpOCSunscVvWu00/2j5/etn2Msd2QHNzXCVGcxltM45ohdCcBmi4yUc6fLopCSLJknZNaRgoqg/Il7pwgHfTWgcSdM4x5VStML1A19QlqXoXI/oVJJqRA1HrojonFHXjOp6XXSuk+Uc9nSuHXkhyPL1bps3FzdZuUbDrSLLkohbMJ/s1ETf85iaZX3V8oc88M1ypRL7Ehw5TVOG56zGsgagFKtHIPQ5ztVB4FiChHNmlaG4MuJrdPe6jg0Sr4nc7A9x2/tQm3s8zxzrvSeEsJjnuPt41TF1WyE6vbruQjTOgdDbylgIYZOrLudvdO7G+6ybxohKItViEJrLs8QYmeI4TzEB9VAKBOIMZzlAPZBQSQTxqBiJRHQjySZEDF+DlFPBLVP1mQlmAQp8VIteCNCJzAG79QXG8bwwxlsimxn35y8WnXNV1I+yKo0mLE7EUebluESE8ZefLgjdBimLCHL/bvE8a4JqTd+jcqK1Ng3JeTYVnfKdaN1NQqeUFvdeS6TejAzRZR0hlBIy0R3p3B1pemLQKSfxXJzKNdlFIeXarM5J9kVWA7uIlhptnrOCLjabmS0/6+UhF2ZDVf8bx++WVtsdwny8EnmNd7a/Xx5Tuu5i5xlCrv6VdU8R4eH0i2dNCxGhO9wtOnm9r8ktjrsVMabxfDVAGjrTSdFEoWjCS6Kr5Uw4peTBOCAOjOdc07zvPSZySeJpB00lpqrmGq3ls7N8S1fKCDlxqERE2jmP1bWWBKzXr62aUS3XtC/dyfFZQuZEz3ExCNbA9prIV+bPVdrdkhDj+Xyt6DSAgXVhebyp1ZOf3y2uvbXf9ok1IDzAfd9hIkTNKaPeAeKxTojBMUzTMkJApBjFOMyVPykQm2UUPxVuM7M8MlSpJbrWxLwMqUtO4uUBL4RMacmha9EySnGqioMQ8IFFVn5MT5uErMfclBbnpSWyGcdi566vUT+P43itCbeEKFjpc3V6RMLVQGj/2kj6dlv3H4cTSE49Tya5ikiaGD58xvvPPyuJvnZJ4hEuXGHNH4CnzDtmaFE+LCkqgvprrawlxDL122aObUfg+kWWBvWG6u8uo9xLf/Xy7dbF7ZSD+di4HAhrhaZOCetnq9vKset3r9tanuU582udlng1R6cpc6Dk3I/OC84uSqPrshKy4Mh5jmxEmXc+G8VJ0ZhFm2g2SmFZHH5LYaihDkVXKJ3TqvXbwVF1vxU99VzrOhMXr16+7RC/k6Qfn0HI5vumJda7nptTEwGwfs58/WvR3V5/S+S2x/r+Y8T7nFIvnuAFb4nz3YHD4cCQYkGYZmXnAqHFkrEchwEfelKKpCmPgHktLLKDeVqsxrbeCuu1pa4m/eYl1oSDUqWxebYrzqqa5Hw/Fp/jhsa4eIb+zdVzLL6zsZJOu39oBsJ6MFrROG+9fytdtlqMuRadlgIX9XvRPBFH13WZkNnxmo1uM5ttvXHMa3v0OFKKuTZ40rmzfU2rS0uOzNoh89Zk3CTWc6JlfS1neuHipppZ7itZzrEbYtnt1QCYM6K3Re/FOVHf4ZI2n6VMY5jPI/iyqc7B+ZrNvfM8/fz9gZzWWKuUkCdBtQxERAVvJRzSRc0xqi5HlFl2JSIiBITH979AopLOJ4aHJ8yUw7HDH3rMGf1dzfFfiYXyLCO3c+RDbw2ha380EF7MJ8wKn9Vrl+u7MmcL26D4tPL3Xdl0Fmf9YH4Odxl4V/7Cq9/LInzyul1MsXWrg0/az2uOLSn0mKIl+Eo0IRrxpiixUXaaDnTe40JAug5LPf3d97GYGB8OaIJxODEkRU9nYkqkLx5nTS2EMCMr1ejuj7fdNNNwW/T2YYmVrhUC3x/mUVxNk9g4l9vqjFtKUXcDeqni/DVttyrIzvWTTVm0mkdFScnlgvWquYSoz6ZhaFnZOZe9/V2H6zosdRAc3hudee5NCOMd4owkEDVxfvgw3zTGOOfM12v24f2srW1BaDUSfCYSS6Kdzqfl+ZVykBrHrGG5HJ1z+CKKYjP/CxcN9JLgqVdcqhuus1+17S/ytoe11uSdVACBpYlUp5Nnh2Nl89OYcnUr53D9gUOXCaHeiJp4e5cN9hjj4q9yxzhcCLGVUXw83s/7rWdjNrorqF6UmJUZyhQb0HzDn+jSpUM2t02ZzS3z4rWR7ntRhLvXF6AWSUIQl+vJu1IPo+ojoVVQZlFSnMQ6TSV/vSzdo7mQ3ZQi0SKjRt4Vg7iK1douHTVuEnqapmJw3/bgv/vke+WFtvHIrs1/VMtVIxsuqrbwVv/kjmy1ZGls3Lqux+sWadsP4L7Nkc4L5hxiWdPz3uMkkWtKZdvSbDY/mF/GSknPVLBWPEUk1QqNufBtHiE2i9K1wTu/QMgGu/MdobtGXlIh9BJeu8xxn/7i53OHbMXM9IfDfP/Z4dzc39RdDZAtxeYiXdeQ2ddbTGKv1t2l1QiBpVsOCke2ys5Wc5pX9c5aUsSL4kMuchRMkHFpMFdjvXbElKzpZI/rOrpWdNppQcg1KP7hi/cABWdtOyBfPzz5hVhdezfU/NUAaweCbgAGC2Xqaxate8qO2YRprrqiIogJzqZiJo450K3Oke1kL5IxVyv1drpAFlnk8iyaYsYERJiIHNzFO9Be49IubhwjmzixWX/Kc0FpDJBKiPKbn/7OT2aNtNq4McZLNavzgFn2j8YN0KDrjwsCriMM5P6weOa1iN+pd/T1N42Y2ExIRHB20UO881lr9R34cGAYE2KOo+8YYkSHDxz9SIxZmZkscCagGQ7KnaEQ97KxGPcyBJvvcrV/nvTyPefwfYdvFq9Jb9JNjpYyF9dBsBbtnehNQrtuWfDpqiCU3Qb9H2+b0btacWcd4gQnZGayDJeKgtDTT3nNspBSgoJOtPBYSokkCZPs6oG6qElWBMQSSRX3oprcX1/r+6X34gqdeaaEWT3/9P4z1Cx3UExXRRJFnq5v2rTDYVXvdW3Q97cpubek0uNkiBeSAy2rIElSxocHzg+PTKVua0gpIS5XQ64jLKWU3TcMGRyQjCbUB/VSOkL1G68stc49WXOE3cBCAe4/ulsQeR2pPj0t427Xf+dhWFxvff3jww5ov8ORZyQTUiAvj5yznMeHB54eHql5tLNjuV6vVlEchgHVEy44OielhuuEWMLMzYuhXEFWv+a28ISs5jcA3Qp+avpuDt2QXO7MeTcn4wB8783HzxLRzDidltUl14NFdpZMGsfba2NlTNtl0SplYTkB84HeeXzIzBdmlb4CHnqZTyyO+OhKpnKOChezklefq6N9zaXodttzWuUFyL4c21LIzuPwjKJTkKEW+SkEp6CrArzp3i7uuQa9r7DdVTvsdeBZkZBzI1U0E1Jh6DsOPhBLhES4PPzyhvPkXuZENCsKqOJqgKwlfv0FW7bbmhtmjmhjYFqRW7bH/m7+zdY1z+Ol2MUWx18pK7LsybSzavpeecnOmEWrFNEqarjRI12gK7Vrw0UBKJct4HfXdXT+QHA9DmWaMhFNI6qhLJ6t2G4m59fbWtG0xQlhIUavv1eThJ77fS3m8Bzh1vVY1+d1ZwGXPY41zXbwrOyUNSPHODFMI4ciLYOq5lVB7TLivPd0XUdvPQffzYrN5HIJajRmO1MTJq9elelVbW0Dt/sisnCiXezZy29S4/gVdw3Kj/H2+pGt+VGhzvb3h53lINxONtZJ7DK1+byCa14mwIgYfYEUg/d+xlnrzWc7SoXBByQlkviCQwoJT8KYxNHthMQLt9XrZLfV+1t22kX0P98GbQfa7K9r79De7MoZIbKBHzfb3l/S72so4xx7C9xWZSDJdYD05d4CEvGWbddOc0VnFSFJwLnANJ2z+bFzn2y3SIvxlTURNce02s6aSma3X2VH+8Y1azrOv6kEMXbr/LxWG1sXbFqLwkE3Aoyb8uDPadX1s9VgtufuYQl1edkks5yQbClbFjrFIk1fkHpuSXNmleb1GS1O4B0meY0O28EiZWfF1i+LZa61wl3H7ytB7+ew0kqQWvnKLC9XoWmZJrilKbfHDqFbfD9j303knuSlOZxlv6RYDg4PkmNc82LjLyBkTCMu5WXaLWYFxzsrriKt6SXPtj06+Z0ynO2I3rLTdteuYqcm+U6zJn9xKRnKvGVLUVvt0uqMaGOGqshtudymJRGv/kRBcvKelEw4AJ3K+ljoC0WrWcmLtBwvgsOV4ZDsJeUld9D/naogukPI/fY60doOVFkiCQCM53GhV6y9K9XvanaJ3m+Ro+HpEqW3CTO6IpItSx8vGbA4n888PTzSB/cyQnbO40WZnEd9WXvC58XSHYLu1GJLO6C67i2Q8gzh1krQ19Vmv+Yawy3bj5pIdY0J1YmpIdTptKwasoYA2wDq9j51X11NcjVEyyoDIoznM+enJ85lWeJ9jnRWCrbl5IOU8nJ/6iQvab9jJ6WdFUtfzlnNM8mFN/ZE654Hfr9VyGsbdDcNM6w5lYztaZpmT0uMt2sgHFdrNFfEyCxDLSo2p21Y0syhzs3rr4hzL1d2kkY0RqZpYBoHcIKKEjXhd+zIvbqFexy1Tjtb/24/yu11hKwd3qYTtMT853/6xSaqVD+7RSCXmynVarXPmh6AaMr6iFkpBpF9uWa5pNy7j75HjJFw4sC7LuCnD0zqkLs3qL8jjgP39p4Huct+x6ioOkwzgBsIYCBpTyu83dGVEFvhGABRchpc7Zw2GkBErmq9rfe7khux5qb6V5dNfO780+PTQiyus8HuDvdXv194T+pST87hXePrLPPo/ccfLd573Rf0XeZEMZwpYlkB5fQEd4H+4QPho4+pVWUXFzCXPQExGYOOOE3EaWSczug04NWDy4Cy7Mxxe202P2bT0BaG+bzsYa1/l78EsXRavCgTWx356ePjs9ySR/cyVGW9fyz+wk1FBPji/fuFslMd074Q6qO3bxZO6esFZi59sSV5kuQQyJyPmrlRUFIIWEp0h55BPEGwWXxJSQSlVLIaTkp39JgKofekLuRSLaGsJkeCXY683YZhuHr4dr8ra0NWX2mdd2qogxWs89kIgR3RLalGqi8jFCpTPzw8zM/UEmA+duwXMbtd1y1id13/fIC1iGwW7l0/d5C8tKAji9ckghchiuAPR2Jdvt7SlF/Chay7uB7X3TGlrB1JisSnM+fTIzqOWayFUvvllYTcChdsReN0yoTeUihUFXbMk/b6256La9HebkPhyOeCtz7+3sdXHNeeP5e1u56bqt0Ki732ppS1yjSDAylG0ljePyaiD0xRCB7JHOmL3ZNK0cDjGwYpwVfklOcAxFJjIqef7o/4vVZVa13NPXXuHL94mInYzlGQieWbTtuy5do5eAuvNdnOWK6fw/GweX4+1oheYPHscAHFr4CMjYG21VK6pPYbKRNxHElTBmgG80z4XBhZo5YMZUdU6Lqe/v4thB4fn7CouCmShgkdRiQIRE+0iNtZWnavncZxFonrSPWqobXp4s45fLikHnSlQmUbDrmei2rbUihqdcf22ML78UzRwcpHceXGWptT3aV01ubWVkUT1/sirixdbGiMxDGbNqKZic6q+Ls7QvCe0WzGJKMax0OPv7vHhyOf/t3fYtPE+f0Dj198znQ+5U7yGWqSVxKydvSWeg/Qf3SPl7BIEmrnoBCWRf3WGcFboRStFImkq2Pt5+fs1HlgSVh8vy3zCZCG5wltZtgOxx66Q1YANTFNE+M4FgUv4Z0j4Xjz9l1dmneprTkJhK5HQkegFCEwRZIhURGnOYQd5bX29nieFhzV+RzyOGt1Hx0XikQl4PyyclnOQS2nNbTvsi36m4cujuP1a9TPfseDX0OC5rtY1rpnrl4DHs1ngWXUgl1S3VvlTtRImrkxTRMxTnnhU0A6x+HuDWGahqz5ADDxkYd0jiQ+4ft//FcMv/wc0kDyPyc9nTCJHN/c4VzgdB5x6fYcGaedhS7vv7fQ+tYcd0WINFsMpSsaN1HbofXI3kDbWTp35/XQnaKAkraLSdRtaEynKonaEi8WI8mM02ngfHrEY7y56/EWScMj8m/+ih/9wZ/uIzs/+eN/x//92/+F2T/x0x/+gIP7hNM4MEzQ373F7+QuON7dPD/ZttMYlkrDN9XSzkhwjURot3Xfyzan1e35fIlAaBWpOe2wO3D68Dk+nXjX54i6cUwMEpDjD/jp7/6Md9/7ZJ+Q/e/8CcfPH3j/87/Hhi8QN+JjIkaI6nLRwVsv6m/foteVaC/BRFY74itawOVXbbtLiRZ/a8VHWRE02fUc3O7XkCfn8lrWgmQFryhZ7z88Mj18wYGB4zFwGo0Pg6P7rd/jRz/7E37827+L7+/2CXmyN7z70c9In/0jn/6Pf+Th/S+4++gtff+W82Ccp9sxLX66LZvWRf0WL+yEdTGJX3vbyyhOl7TAttVPMxq1jAGY9/pwiVQ3M1Jc1uv7/OHEnRvpOiOeTzw8KdPxh3z/J3/Kj//tfwR/RNXtE/LxnPj47W/x4z/4Mzh9wS/+znGOE57A3V1Pmj67fYEdD73GZVoesjQR4rQX9fI1t7WysmraROBvac1+VXx+bZ60Gd6tCVbr3t4fj/TiGacTw2DY/ff54e//GT/6wz/n+P2fMo4x3/N0Ot180uR6vI4c7Ux8/8/8w//8r/zv//7XnN7/krd3PZ7bysyed6StMLw1z7wWcHht29PKnb9NSC1g6nOgfhwvx7Z8ln3fM44j51EJH33CT/7kL/nZn/8HPvrtP2RwB0iC9y/gyDc+cpqUD+6e/pM/4O0fdfzWGT79m79m+PDPSHy8+ftup6pHCrcXw67ei2+qbVWAXpzvK+qSWx2W9fnbjIGtgeq1u3pnuPhcx6cHorvj+KOf8cM/+kt+50//grc//tcQOkKMJH8k6ksK746P+HDkMXU8JOH7P/l9/v2/+gGPP37H3/+3/8LP/+Fvbv7c7UTZTet6rDCX1ITsD/1G2162mS4H39oVRjMHsoEFz8BDc67VXt/0R7of/IQf/9l/4id/8Z+x48c8nEb06T3vDj2Tz3Xn/z8S9a2w3u28/AAAAABJRU5ErkJggg=="); } .sudoku-cell { background-image: var(--tile-img) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; border: 1px solid rgba(0,0,0,0.22) !important; border-radius: 14px !important; /* match tile rounding */ box-shadow: 0 10px 18px rgba(0,0,0,0.45) !important; color: rgba(72, 45, 24, 0.95) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important; } .sudoku-cell.given { filter: brightness(1.03) saturate(1.05); } .sudoku-notes { color: rgba(72, 45, 24, 0.70) !important; } button { background-image: var(--tile-img) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; color: rgba(72, 45, 24, 0.95) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important; border-radius: 14px !important; border: 1px solid rgba(0,0,0,0.25) !important; box-shadow: 0 10px 18px rgba(0,0,0,0.40) !important; } button:hover { filter: brightness(1.02); } button:disabled { opacity: 0.55 !important; filter: saturate(0.7) brightness(0.95) !important; } /* Keep 3x3 borders visible on top of tiles */ .sudoku-cell.thick-right{ border-right: 3px solid rgba(40,25,12,0.55) !important; } .sudoku-cell.thick-bottom{ border-bottom: 3px solid rgba(40,25,12,0.55) !important; } /* Selection/same-number outlines remain readable */ .sudoku-cell.selected { outline: 3px solid rgba(160, 110, 255, 0.75) !important; outline-offset: -3px !important; } .sudoku-cell.same-number { outline: 3px solid rgba(45, 125, 255, 0.78) !important; outline-offset: -3px !important; } /* ========================= Embossed Number Tiles ========================= */ .sudoku-cell > span, .sudoku-cell .value { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.35em; font-weight: 900; color: rgba(78, 48, 26, 0.95); text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 -1px 0 rgba(0,0,0,0.25), 0 2px 3px rgba(0,0,0,0.25); } /* Notes stay flat (not tiles) */ .sudoku-notes span { background: none !important; box-shadow: none !important; text-shadow: none !important; } /* ========================= Apply wood tile image to the ACTUAL board cells (table td) ========================= */ table[aria-label="Sudoku grid"] td{ background-image: var(--tile-img) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; border-radius: 14px !important; border: 1px solid rgba(0,0,0,0.22) !important; box-shadow: 0 10px 18px rgba(0,0,0,0.45) !important; color: rgba(72, 45, 24, 0.95) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.20) !important; font-weight: 900; } /* Given clues: slightly brighter tile */ table[aria-label="Sudoku grid"] td.given{ filter: brightness(1.03) saturate(1.05); } /* Keep thick 3x3 borders visible on top of tiles */ table[aria-label="Sudoku grid"] td.thickR, table[aria-label="Sudoku grid"] td.thick-right{ border-right: 3px solid rgba(40,25,12,0.55) !important; } table[aria-label="Sudoku grid"] td.thickB, table[aria-label="Sudoku grid"] td.thick-bottom{ border-bottom: 3px solid rgba(40,25,12,0.55) !important; } /* ========================= Keep wood texture under ALL highlights (Highlights become a translucent overlay layer) ========================= */ /* Base: every Sudoku board cell gets a transparent overlay layer + the wood tile */ table[aria-label="Sudoku grid"] td{ --hl: rgba(0,0,0,0); background-image: linear-gradient(var(--hl), var(--hl)), var(--tile-img) !important; background-blend-mode: multiply; background-size: cover, cover !important; background-repeat: no-repeat, no-repeat !important; background-position: center, center !important; } /* Default hover scope (row/col/box mouseover) */ table[aria-label="Sudoku grid"] td.hover-scope{ --hl: rgba(140, 180, 255, 0.22); } /* Selected cell */ table[aria-label="Sudoku grid"] td.selected{ --hl: rgba(170, 120, 255, 0.30); } /* Matching numbers: blue, distinct from green Teaching Mode candidates */ table[aria-label="Sudoku grid"] td.highlight{ --hl: rgba(55, 135, 255, 0.38); } /* Hint highlight (legacy hint logic still in code, just in case) */ table[aria-label="Sudoku grid"] td.hint-cell{ --hl: rgba(255, 215, 120, 0.26); } table[aria-label="Sudoku grid"] td.hint-scope{ --hl: rgba(140, 180, 255, 0.22); } /* Teaching mode highlight layers */ table[aria-label="Sudoku grid"] td.teach-cell{ --hl: rgba(255, 215, 120, 0.22); } table[aria-label="Sudoku grid"] td.teach-scope{ --hl: rgba(140, 180, 255, 0.22); } table[aria-label="Sudoku grid"] td.teach-clue{ --hl: rgba(255, 255, 255, 0.10); } table[aria-label="Sudoku grid"] td.teach-branch{ --hl: rgba(200, 160, 255, 0.18); } table[aria-label="Sudoku grid"] td.teach-contradiction{ --hl: rgba(255, 90, 90, 0.20); } /* Teaching “same digit taken” helpers: red = blocked, green = open (still subtle, but brighter than before) */ table[aria-label="Sudoku grid"] td.same-taken-row, table[aria-label="Sudoku grid"] td.same-taken-col, table[aria-label="Sudoku grid"] td.same-taken-box, table[aria-label="Sudoku grid"] td.teach-digit-blocked{ --hl: rgba(255, 90, 90, 0.22); } table[aria-label="Sudoku grid"] td.teach-digit-candidate{ --hl: rgba(110, 255, 170, 0.20); } /* Solver animation colors (if present) */ table[aria-label="Sudoku grid"] td.solve-good{ --hl: rgba(110, 255, 170, 0.22); } table[aria-label="Sudoku grid"] td.solve-bad{ --hl: rgba(255, 90, 90, 0.24); } /* ========================= Stronger 3x3 block separation (wood theme) ========================= */ /* Make thick borders stronger/darker */ table[aria-label="Sudoku grid"] td.thickR, table[aria-label="Sudoku grid"] td.thick-right{ border-right: 4px solid rgba(25, 15, 8, 0.70) !important; } table[aria-label="Sudoku grid"] td.thickB, table[aria-label="Sudoku grid"] td.thick-bottom{ border-bottom: 4px solid rgba(25, 15, 8, 0.70) !important; } /* Add a subtle inset shadow along block edges (looks like grout) */ table[aria-label="Sudoku grid"] td.thickR, table[aria-label="Sudoku grid"] td.thick-right{ box-shadow: 0 10px 18px rgba(0,0,0,0.45), inset -2px 0 0 rgba(0,0,0,0.30) !important; } table[aria-label="Sudoku grid"] td.thickB, table[aria-label="Sudoku grid"] td.thick-bottom{ box-shadow: 0 10px 18px rgba(0,0,0,0.45), inset 0 -2px 0 rgba(0,0,0,0.30) !important; } /* Board background behind cells (helps the 3x3 breaks pop) */ .sudoku-board{ background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.20)) !important; padding: 6px !important; } /* Slight gap between cells to reveal the board background as grid lines */ table[aria-label="Sudoku grid"]{ border-collapse: separate !important; border-spacing: 0; } /* But keep outer frame tight */ table[aria-label="Sudoku grid"] td{ border-radius: 14px !important; } /* ========================= Clean 3x3 Block Emphasis (no cell gaps) ========================= */ /* Reset any spacing */ table[aria-label="Sudoku grid"]{ border-collapse: collapse !important; border-spacing: 0 !important; } /* Stronger 3x3 separators only */ table[aria-label="Sudoku grid"] td.thick-right{ border-right: 4px solid rgba(35, 22, 12, 0.75) !important; box-shadow: inset -2px 0 0 rgba(0,0,0,0.45); } table[aria-label="Sudoku grid"] td.thick-bottom{ border-bottom: 4px solid rgba(35, 22, 12, 0.75) !important; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.45); } /* Keep internal borders subtle */ table[aria-label="Sudoku grid"] td{ border-top: 1px solid rgba(0,0,0,0.20); border-left: 1px solid rgba(0,0,0,0.20); } /* Board frame reads as one tray */ .sudoku-board{ padding: 4px !important; background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.25)) !important; } /* ========================= Strong 3x3 block borders (structure-based) This version does NOT rely on cell classes. ========================= */ table[aria-label="Sudoku grid"]{ border-collapse: collapse !important; } /* Outer border */ table[aria-label="Sudoku grid"]{ border: 6px solid rgba(35, 22, 12, 0.90) !important; } /* Internal 3x3 separators */ table[aria-label="Sudoku grid"] tr:nth-child(3n) td{ border-bottom: 6px solid rgba(35, 22, 12, 0.90) !important; } table[aria-label="Sudoku grid"] tr td:nth-child(3n){ border-right: 6px solid rgba(35, 22, 12, 0.90) !important; } /* Remove doubled thick border at the table edge */ table[aria-label="Sudoku grid"] tr:last-child td{ border-bottom: 0 !important; } table[aria-label="Sudoku grid"] tr td:last-child{ border-right: 0 !important; } /* Subtle cell-to-cell lines inside blocks */ table[aria-label="Sudoku grid"] td{ border-top: 1px solid rgba(0,0,0,0.16) !important; border-left: 1px solid rgba(0,0,0,0.16) !important; } /* Add a faint shadow to thick separators so they read over wood texture */ table[aria-label="Sudoku grid"] tr:nth-child(3n) td{ box-shadow: inset 0 -2px 0 rgba(0,0,0,0.45); } table[aria-label="Sudoku grid"] tr td:nth-child(3n){ box-shadow: inset -2px 0 0 rgba(0,0,0,0.45); } /* Darker pencil notes for wood grain */ table[aria-label="Sudoku grid"] .notes span, table[aria-label="Sudoku grid"] .sudoku-notes span{ color: rgba(45, 28, 15, 0.95) !important; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 0 2px rgba(0,0,0,0.35); } /* ========================= Candidate Stack Tiles ========================= */ .candidate-bar{ display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; margin-top: 14px; } .candidate-stack{ display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; cursor: pointer; } .candidate-tile{ width: 36px; height: 36px; background-image: var(--tile-img); background-size: cover; background-position: center; border-radius: 10px; border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 4px 8px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-weight: 900; color: rgba(70, 42, 22, 0.95); text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .candidate-stack.used .candidate-tile{ opacity: 0.25; filter: grayscale(0.6); } .candidate-stack-label{ margin-top: 6px; font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.85); } /* ========================= Notes readability fix (all states) ========================= */ table[aria-label="Sudoku grid"] td .notes span, table[aria-label="Sudoku grid"] td .sudoku-notes span, table[aria-label="Sudoku grid"] td:not(.selected) .notes span, table[aria-label="Sudoku grid"] td:not(.selected) .sudoku-notes span{ color: rgba(45, 28, 15, 0.95) !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 0 2px rgba(0,0,0,0.35); } /* ========================= FINAL notes color override (targets actual note elements) ========================= */ table[aria-label="Sudoku grid"] td .note-num{ color: rgba(45, 28, 15, 0.95) !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 0 2px rgba(0,0,0,0.35) !important; } table[aria-label="Sudoku grid"] td.note-highlight .note-num{ color: rgba(45, 28, 15, 0.98) !important; } /* If any older rule targets .notes-grid span directly, enforce it too */ table[aria-label="Sudoku grid"] td .notes-grid span{ color: rgba(45, 28, 15, 0.95) !important; } /* Matching pencil-note digits: blue, like matching placed numbers. Keep Teaching Mode's green available-cell overlays untouched. */ table[aria-label="Sudoku grid"] td .notes-grid .note-num.note-highlight{ background-color: rgba(55, 135, 255, 0.75) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 35, 85, 0.75) !important; box-shadow: inset 0 0 0 1px rgba(20, 80, 200, 0.80); } .difficulty-panel { margin: 10px 0 12px 0; padding: 10px; background: rgba(0,0,0,0.35); border-radius: 10px; text-align: center; } .difficulty-title { font-weight: 900; font-size: 18px; margin-bottom: 6px; } .difficulty-techniques ul { list-style: none; padding: 0; margin: 0; } .difficulty-techniques li { font-size: 13px; opacity: 0.9; } /* === Teaching Mode: available techniques and selectable logical hints === */ .teaching-technique-panel{ max-width: 980px; margin: 12px auto 14px; padding: 15px 17px; color: var(--text); background: rgba(12, 23, 43, 0.88); border: 1px solid rgba(110, 166, 245, 0.30); box-shadow: var(--shadow2); } .teaching-technique-heading > div{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .teaching-technique-heading strong{ font-size: 16px; letter-spacing: .1px; } .teaching-technique-total{ font-size: 12px; color: #c9e2ff; border: 1px solid rgba(92, 168, 255, .35); background: rgba(62, 126, 225, .16); padding: 3px 9px; } .teaching-technique-heading p, .teaching-technique-empty{ margin: 7px 0 11px; font-size: 13px; line-height: 1.5; color: rgba(240, 246, 255, .76); } .teaching-technique-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 8px; } .teaching-technique-option{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; text-align: left; font: inherit; font-size: 13px; color: rgba(255,255,255,.94); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.18); cursor: pointer; } .teaching-technique-option:hover, .teaching-technique-option:focus-visible{ background: rgba(75, 135, 235, .20); border-color: rgba(89, 165, 255, .7); } .teaching-technique-option.active{ background: rgba(57, 119, 232, .27); border-color: rgba(102, 174, 255, .9); box-shadow: inset 0 0 0 1px rgba(100, 168, 255, .25); } .teaching-technique-option:disabled{ opacity: .55; cursor: not-allowed; } .teaching-technique-count{ color: #bddbff; font-size: 11px; white-space: nowrap; } .teaching-technique-explanation{ margin-top: 11px; padding: 12px 14px; background: rgba(28, 57, 106, .35); border-left: 3px solid rgba(93, 173, 255, .9); } .teaching-technique-explanation-title{ display:flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; } .teaching-technique-explanation-title span{ opacity: .75; font-size: 12px; } .teaching-technique-explanation p{ font-size: 13px; line-height: 1.6; margin: 8px 0 0; } .teaching-technique-explanation .teaching-technique-legend{ font-size: 12px; color: rgba(235,245,255,.7); } .teaching-technique-next{ color: #fff; font: inherit; font-size: 12px; margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(102,174,255,.55); background: rgba(57,119,232,.22); cursor: pointer; } /* Pattern witness cells are gold; existing green/red candidate overlays and blue matching digit/note highlights are unchanged. */ table[aria-label="Sudoku grid"] td.teach-pattern{ --hl: rgba(255, 198, 60, .24); outline: 2px solid rgba(255, 180, 32, .90) !important; outline-offset: -3px; } table.mini td.teach-pattern{ outline: 2px solid rgba(255, 180, 32, .85) !important; outline-offset: -2px; } table[aria-label="Sudoku grid"] td .notes-grid .note-num.teach-remove-note{ background: rgba(255, 115, 72, .75) !important; color: #fff !important; text-decoration: line-through; text-shadow: 0 1px 2px rgba(84, 26, 0, .7) !important; } @media (max-width: 480px){ .teaching-technique-panel{padding: 12px;} .teaching-technique-list{ grid-template-columns: 1fr; } } /* The established wood-button theme takes precedence globally; use dark, high-contrast text for the counts displayed on those wood tiles. */ #root .teaching-technique-option .teaching-technique-count{ color: rgba(69, 39, 18, .98) !important; font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,.62) !important; } #root button.teaching-technique-option.active{ border-color: rgba(27, 108, 229, .95) !important; outline: 2px solid rgba(41, 131, 254, .9); outline-offset: -3px; } #root button.teaching-technique-option:focus-visible{ outline: 3px solid rgba(41, 131, 254, .95) !important; outline-offset: -3px; } /* New Game: 10-position difficulty chooser (existing game styles unchanged). */ .difficulty-overlay{ position:fixed; inset:0; z-index:1100; background:rgba(3,8,16,.81); display:flex; align-items:center; justify-content:center; padding:18px; overflow-y:auto; } .difficulty-dialog{ width:min(520px,100%); padding:28px; border:1px solid rgba(198,161,103,.64); border-radius:12px; background:linear-gradient(155deg,#243244 0%,#14202f 64%,#0d1724 100%); color:rgba(255,255,255,.94); box-shadow:0 22px 80px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.1); text-align:center; } .difficulty-dialog-kicker{ color:#d8ba88; letter-spacing:.19em; font-size:11px; font-weight:850; } .difficulty-dialog h2{margin:8px 0 7px;font-size:clamp(23px,4.8vw,30px);line-height:1.15;} .difficulty-dialog > p{color:#c1cbd8;line-height:1.45;margin:0 0 18px;} .difficulty-choice-name{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 5px;} .difficulty-choice-name strong{font-size:26px;color:white;} .difficulty-choice-level{display:inline-block;color:#0e213b;background:#93c4ff;font-weight:900;padding:5px 9px;border-radius:7px;font-variant-numeric:tabular-nums;} .difficulty-dialog .difficulty-choice-description{min-height:42px;max-width:420px;margin:0 auto 20px;font-size:14px;color:#cfd8e4;} .difficulty-slider-label{display:block;text-align:left;font-size:13px;font-weight:750;letter-spacing:.02em;color:#e6ecf2;margin-bottom:10px;} #sydoku-difficulty-slider{width:100%;display:block;margin:0;cursor:pointer;height:22px;accent-color:#4596ff;} #sydoku-difficulty-slider:focus-visible{outline:3px solid #9fccff;outline-offset:3px;border-radius:5px;} #sydoku-difficulty-slider:disabled{cursor:wait;opacity:.6;} /* Tick centers follow the range thumb travel, which stops half a thumb-width inside each end. */ .difficulty-slider-steps{display:flex;justify-content:space-between;padding-inline:8px;margin-top:4px;color:#a2b3c7;font-size:12px;font-variant-numeric:tabular-nums;} .difficulty-slider-steps span{flex:0 0 0;min-width:0;display:flex;justify-content:center;white-space:nowrap;} .difficulty-slider-steps span.chosen{color:#8dc5ff;font-weight:900;} .difficulty-slider-ends{display:flex;justify-content:space-between;color:#d8bd94;font-size:12px;font-weight:750;margin-top:6px;} .difficulty-dialog .difficulty-accuracy-note{font-size:12px;color:#a6b6c9;margin:22px 0 14px;} .difficulty-dialog .difficulty-generation-error{color:#ffb6ae;font-size:13px;} .difficulty-dialog-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;} .difficulty-dialog-actions button{min-width:144px;border-radius:8px;padding:11px 18px;cursor:pointer;font-size:15px;font-weight:800;} .difficulty-dialog-actions button:focus-visible{outline:3px solid #9fccff;outline-offset:2px;} .difficulty-dialog-actions button:disabled{opacity:.6;cursor:wait;} .difficulty-dialog-actions .difficulty-start{border:1px solid #83c6ff;background:linear-gradient(#4186de,#2766b9);color:white;} .difficulty-dialog-actions .difficulty-cancel{border:1px solid #8796a8;background:#233144;color:#f0f4fc;} @media(max-width:500px){.difficulty-dialog{padding:20px 17px}.difficulty-choice-name strong{font-size:23px}.difficulty-dialog-actions button{flex:1;min-width:120px}} /* === Uniform wood tile geometry (board-edge crop fix) === The earlier collapsed table borders were 6px at 3x3 boundaries, which reduced the visible tile face and made alternate rows 1.5px taller. Keep every face square; draw the 3x3 separators in the gaps instead. */ table[aria-label="Sudoku grid"] { border-collapse: separate !important; border-spacing: 2px !important; table-layout: fixed; border: 4px solid rgba(35,22,12,0.90) !important; background: #1b120b !important; } table[aria-label="Sudoku grid"] tr td, table[aria-label="Sudoku grid"] tr:nth-child(3n) td, table[aria-label="Sudoku grid"] tr td:nth-child(3n), table[aria-label="Sudoku grid"] tr:last-child td, table[aria-label="Sudoku grid"] tr td:last-child { box-sizing: border-box; width: var(--sydoku-tile-size, 42px); min-width: var(--sydoku-tile-size, 42px); max-width: var(--sydoku-tile-size, 42px); height: var(--sydoku-tile-size, 42px); padding: 0; border: 0 !important; border-radius: 12px !important; background-size: 100% 100%, 100% 100% !important; } /* Dark box dividers live in the gutter, never on top of the wood faces. */ table[aria-label="Sudoku grid"] tr td:nth-child(3n):not(:last-child)::after { content: ""; position: absolute; top: -2px; right: -3px; width: 4px; height: calc(100% + 4px); background: rgba(15,9,4,0.98); border-radius: 0 !important; pointer-events: none; z-index: 2; } table[aria-label="Sudoku grid"] tr:nth-child(3n):not(:last-child) td::before { content: ""; position: absolute; bottom: -3px; left: -2px; width: calc(100% + 4px); height: 4px; background: rgba(15,9,4,0.98); border-radius: 0 !important; pointer-events: none; z-index: 2; } /* Reduce every tile together on narrow screens, keeping them square and preventing the board frame from extending beyond the viewport. */ @media (max-width: 460px) { table[aria-label="Sudoku grid"] { --sydoku-tile-size: min(42px, calc((100vw - 64px) / 9)); } table[aria-label="Sudoku grid"] td { font-size: calc(var(--sydoku-tile-size) * 0.66); line-height: 1; } } /* === Tile-edge preservation: keep 3x3 separators inside their gutters === The original 4px separator painted from -3px across a 2px gutter, covering 1px of the neighboring wood tile. A 3px gutter and exactly 3px separator keep every face unobstructed, including at browser zoom. */ table[aria-label="Sudoku grid"] { border-spacing: 3px !important; } table[aria-label="Sudoku grid"] tr td:nth-child(3n):not(:last-child)::after { right: -3px; width: 3px; } table[aria-label="Sudoku grid"] tr:nth-child(3n):not(:last-child) td::before { bottom: -3px; height: 3px; } /* === Row / column / box celebrations === A golden ripple moves outward from the number that finished a section. Only the currently completed unit is animated; simultaneous completions are queued so each one receives its own full sweep. Purely cosmetic: the existing matching-number blue and teaching red/green colors are unchanged. */ @keyframes sydoku-section-finish { 0% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); } 25% { filter: brightness(1.45) saturate(1.25) drop-shadow(0 0 6px rgba(255,206,91,0.85)); transform: translateY(-2px) scale(1.065); } 58% { filter: brightness(1.32) saturate(1.17) drop-shadow(0 0 10px rgba(255,194,66,0.75)); transform: translateY(-1px) scale(1.045); } 100% { filter: brightness(1) saturate(1); transform: translateY(0) scale(1); } } table[aria-label="Sudoku grid"] td.section-celebration-cell { z-index: 3; animation: sydoku-section-finish 650ms cubic-bezier(.22,.75,.25,1) both; animation-delay: calc(var(--section-wave-step, 0) * 65ms); will-change: transform, filter; } .section-completion-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { table[aria-label="Sudoku grid"] td.section-celebration-cell { animation: none; filter: brightness(1.15); outline: 2px solid rgba(255,206,91,.9); outline-offset: -2px; } } /* === Distinct 3x3 box frames, without reducing or masking any tile face === A four-pixel inter-cell gutter is the ONLY space occupied by these metal-inlaid block separators. Every wood tile keeps its original fixed, square content area, even alongside a 3x3 boundary. */ table[aria-label="Sudoku grid"] { --sydoku-box-gutter: 4px; border-spacing: var(--sydoku-box-gutter) !important; border: 5px solid #6b4527 !important; background: #1b120b !important; box-shadow: inset 0 0 0 1px rgba(244,194,113,0.65), 0 0 0 2px #170e08, 0 16px 36px rgba(0,0,0,0.55) !important; } /* Warm bronze rails between the nine boxes. The rails start precisely at the cell edge and finish precisely at the next cell edge. */ table[aria-label="Sudoku grid"] tr td:nth-child(3n):not(:last-child)::after { top: calc(-1 * var(--sydoku-box-gutter)); right: calc(-1 * var(--sydoku-box-gutter)); width: var(--sydoku-box-gutter); height: calc(100% + 2 * var(--sydoku-box-gutter)); background: linear-gradient(90deg, #36200f 0%, #c79454 35%, #dfb67b 55%, #4d2b15 100%); box-shadow: inset 1px 0 rgba(10,5,2,.45), inset -1px 0 rgba(10,5,2,.45); } table[aria-label="Sudoku grid"] tr:nth-child(3n):not(:last-child) td::before { bottom: calc(-1 * var(--sydoku-box-gutter)); left: calc(-1 * var(--sydoku-box-gutter)); height: var(--sydoku-box-gutter); width: calc(100% + 2 * var(--sydoku-box-gutter)); background: linear-gradient(180deg, #36200f 0%, #c79454 35%, #dfb67b 55%, #4d2b15 100%); box-shadow: inset 0 1px rgba(10,5,2,.45), inset 0 -1px rgba(10,5,2,.45); } /* Allow for the wider gutters in the existing responsive 9x9 geometry. */ @media (max-width: 460px) { table[aria-label="Sudoku grid"] { --sydoku-tile-size: min(42px, calc((100vw - 84px) / 9)); } }