/* Sudoku — plateau comme sur la couverture : tuiles brillantes bleu nuit (données) et bleu ciel (tes chiffres) sur un plateau
   blanc, palette de chiffres qui s'ouvre sur la case touchée. Aucune couleur ne révèle une erreur. (base : /css/mb-game.css) */
:root { --accent: var(--blue); --n: 9; --b: 3; --navy: #013861; --sky: #1270c7; }
.g-page { max-width: 640px; }

.board-wrap { position: relative; width: min(100%, 520px); margin: 0 auto; perspective: 1400px; }
.board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; aspect-ratio: 1; width: 100%; padding: 10px; background: linear-gradient(180deg, #ffffff, #eef2f6); border-radius: 14px; box-shadow: 0 2px 0 #cfd8e3, 0 18px 40px -14px rgba(1, 56, 97, .55), 0 40px 80px -30px rgba(0, 0, 0, .5); transform: rotateX(6deg); transform-origin: 50% 100%; user-select: none; -webkit-user-select: none; }
.cell { position: relative; display: grid; place-items: center; border: 0; border-radius: 6px; background: #e6ecf2; box-shadow: inset 0 2px 3px rgba(1, 56, 97, .12); font-size: clamp(1rem, calc(44px * 9 / var(--n) * .5), 2rem); font-weight: 800; color: #fff; cursor: pointer; padding: 0; transition: transform .12s; }
.cell.bc { margin-right: 4px; }
.cell.br { margin-bottom: 4px; }
.cell.lc { margin-right: 0; }
.cell.lr { margin-bottom: 0; }
/* tuile posée : donnée (bleu nuit) ou jouée (bleu ciel), avec reflet */
.cell.given, .cell.filled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 4px rgba(1, 56, 97, .25); }
.cell.given { background: linear-gradient(180deg, #0f4f84, var(--navy)); }
.cell.filled { background: linear-gradient(180deg, #2f8ae0, var(--sky)); }
.cell.hinted { background: linear-gradient(180deg, #5ba6f0, #2f8ae0); }
.cell.peer { background: #d8e3ee; }
.cell.given.peer { background: linear-gradient(180deg, #16598f, #0b4674); }
.cell.filled.peer { background: linear-gradient(180deg, #3a94e6, #1a7ad1); }
.cell.same { outline: 3px solid #ffd54a; outline-offset: -3px; }
.cell.sel { outline: 3px solid #ffd54a; outline-offset: -3px; transform: translateY(-2px) scale(1.04); z-index: 2; }
.cell.flash { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(var(--b), 1fr); font-size: clamp(.5rem, 1.6vw, .7rem); font-weight: 700; color: var(--navy); line-height: 1; }
.notes span { display: grid; place-items: center; }
.board.n4 .notes { grid-template-columns: repeat(2, 1fr); }
.board.n6 .notes { grid-template-columns: repeat(3, 1fr); }

/* palette de chiffres ouverte sur la case touchée */
.picker { position: absolute; z-index: 20; display: grid; grid-template-columns: repeat(var(--pc, 3), 46px); gap: 6px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 2px 0 #cfd8e3, 0 20px 40px -10px rgba(1, 56, 97, .6); animation: pick .14s ease; }
@keyframes pick { from { transform: scale(.85); opacity: 0; } }
.picker button { width: 46px; height: 46px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #2f8ae0, var(--sky)); color: #fff; font-size: 1.25rem; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25); }
.picker button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.picker button.done { background: #d8e3ee; color: #8aa0b5; box-shadow: inset 0 2px 3px rgba(1, 56, 97, .12); }
.picker button.erase { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px #cfd8e3; grid-column: 1 / -1; width: auto; font-size: .95rem; }
.picker.notes-on button:not(.erase) { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--sky); font-size: 1rem; }
.picker::after { content: ""; position: absolute; left: var(--ax, 50%); top: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.picker.above::after { top: auto; bottom: -7px; }

.paused { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(245, 248, 252, .96); border-radius: 14px; font-size: 1.4rem; font-weight: 800; }

.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(100%, 520px); margin: 18px auto 0; }
.tools .g-btn { flex: 1 1 auto; background: rgba(255, 255, 255, .92); }
.tools .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btnNotes[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
#optLevel[hidden] { display: none; }
@media (max-width: 420px) { .board { padding: 7px; gap: 3px; } .tools .g-btn { padding-inline: .6rem; font-size: .88rem; } .picker { grid-template-columns: repeat(var(--pc, 3), 42px); } .picker button { width: 42px; height: 42px; } }