/* Sudoku (static/js/games/sudoku.js): a real-looking board lying on a desk, seen from above, lit from the top left.
   The tables (.sdt-*) are the desk and the board on it — cream paper on walnut, porcelain on marble, a slate, frosted
   glass at night, kraft paper on linen — each with its own ink colours; the numbers (.sdn-*) are how they are written
   (ink, engraved brass, chalk, neon, modern). Each player may choose both. A table bought with chips (app/cos_css.py)
   is the walnut board on the bought surface. */

/* ---------- the tables: the desk, the board, its lines and inks ---------- */
.sdt-walnut { --desk: radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255,214,160,.16), transparent 70%),
    repeating-linear-gradient(91deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.08) 6px 7px, rgba(255,235,200,.035) 7px 15px),
    repeating-linear-gradient(88.5deg, rgba(50,20,5,.22) 0 2px, transparent 2px 27px), linear-gradient(160deg, #6e4020, #4b2812 55%, #2c1609);
  --paper: radial-gradient(ellipse 90% 80% at 25% 15%, #fffdf6, #f7efdc 60%, #ecdfc2); --grain: rgba(120,90,40,.035);
  --rim: #3a2412; --line: rgba(92,70,40,.32); --thick: #3c2a17; --hl: rgba(205,150,60,.27); --sel: rgba(222,174,64,.42); --same: rgba(31,79,160,.16);
  --gc: #24170b; --mc: #1f4fa0; --hc: #a8730f; --notec: #6a6458; --bad: #c8102e; --badbg: rgba(200,16,46,.13); --glow: rgba(255,214,140,.7); }
.sdt-marble { --desk: radial-gradient(ellipse 60% 45% at 72% 28%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(128deg, transparent 38%, rgba(120,120,135,.22) 39.2%, transparent 41%), linear-gradient(32deg, transparent 58%, rgba(110,110,125,.18) 59%, transparent 60.6%),
    linear-gradient(152deg, transparent 70%, rgba(160,150,140,.2) 71%, transparent 72.5%), linear-gradient(160deg, #f3f3f5, #dcdce1 60%, #c6c6cd);
  --paper: linear-gradient(160deg, #ffffff, #f3f5f9); --grain: rgba(60,70,90,.02);
  --rim: #c9ccd4; --line: rgba(60,72,95,.22); --thick: #2b3445; --hl: rgba(70,110,190,.16); --sel: rgba(70,120,220,.24); --same: rgba(27,95,208,.13);
  --gc: #1b2230; --mc: #1b5fd0; --hc: #b07a10; --notec: #6b7280; --bad: #d01e3c; --badbg: rgba(208,30,60,.12); --glow: rgba(140,180,255,.65); }
.sdt-slate { --desk: repeating-linear-gradient(33deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), repeating-linear-gradient(-28deg, rgba(0,0,0,.08) 0 1px, transparent 1px 7px),
    radial-gradient(ellipse 80% 70% at 35% 25%, #3d434c, #22262c 70%, #16191d);
  --paper: radial-gradient(ellipse 90% 80% at 25% 15%, #353d46, #262c33 70%, #1e2329); --grain: rgba(255,255,255,.025);
  --rim: #6b4a2b; --line: rgba(255,255,255,.22); --thick: rgba(248,246,236,.78); --hl: rgba(255,255,255,.12); --sel: rgba(255,236,170,.2); --same: rgba(255,217,138,.16);
  --gc: #f5f2e7; --mc: #ffd98a; --hc: #9be7c4; --notec: rgba(255,255,255,.6); --bad: #ff6b7d; --badbg: rgba(255,90,110,.16); --glow: rgba(255,240,200,.55); }
.sdt-glass { --desk: radial-gradient(ellipse 45% 40% at 20% 25%, rgba(90,120,255,.35), transparent 70%), radial-gradient(ellipse 50% 45% at 80% 75%, rgba(180,80,255,.28), transparent 70%),
    radial-gradient(ellipse 35% 30% at 65% 15%, rgba(40,200,255,.2), transparent 70%), linear-gradient(160deg, #0d1230, #060818);
  --paper: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.07) 55%, rgba(255,255,255,.12)); --grain: rgba(255,255,255,0);
  --rim: rgba(255,255,255,.45); --line: rgba(255,255,255,.17); --thick: rgba(255,255,255,.62); --hl: rgba(140,180,255,.17); --sel: rgba(130,190,255,.3); --same: rgba(127,208,255,.18);
  --gc: #f1f5ff; --mc: #7fd6ff; --hc: #ffd76a; --notec: rgba(225,235,255,.7); --bad: #ff7a90; --badbg: rgba(255,90,120,.2); --glow: rgba(140,200,255,.7); }
.sdt-linen { --desk: repeating-linear-gradient(0deg, rgba(110,90,60,.09) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110,90,60,.08) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255,255,255,.35), transparent 70%), linear-gradient(160deg, #ece3d1, #d9cbb0 60%, #c7b694);
  --paper: radial-gradient(ellipse 90% 80% at 25% 15%, #e2c595, #d1ad78 65%, #c19a62); --grain: rgba(90,55,15,.05);
  --rim: #8a6234; --line: rgba(70,45,15,.3); --thick: #4a2e12; --hl: rgba(190,140,60,.2); --sel: rgba(255,236,180,.42); --same: rgba(24,63,107,.15);
  --gc: #2a1a08; --mc: #183f6b; --hc: #7a3d0a; --notec: rgba(60,40,15,.65); --bad: #a8102a; --badbg: rgba(168,16,42,.14); --glow: rgba(255,240,200,.7); }

/* ---------- the numbers: how they are written ---------- */
.sdn-ink { --nf: Georgia, 'Times New Roman', serif; --mf: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive; --nw: 700; --mw: 400;
  --gsh: 0 1px 0 rgba(255,255,255,.25); --msh: 0 0 1px currentColor; }
.sdn-modern { --nf: 'Inter', system-ui, sans-serif; --mf: 'Inter', system-ui, sans-serif; --nw: 800; --mw: 600; --gsh: none; --msh: none; }
.sdn-chalk { --nf: 'Segoe Print', 'Comic Sans MS', 'Chalkboard SE', cursive; --mf: 'Segoe Print', 'Comic Sans MS', 'Chalkboard SE', cursive; --nw: 700; --mw: 700;
  --gsh: 1px 0 0 rgba(255,255,255,.18), -1px 1px 0 rgba(0,0,0,.08), 0 0 2px currentColor; --msh: 1px 1px 0 rgba(0,0,0,.08), 0 0 2px currentColor; }
.sdn-brass { --nf: Georgia, 'Times New Roman', serif; --mf: Georgia, 'Times New Roman', serif; --nw: 800; --mw: 700;
  --gfill: linear-gradient(180deg, #fff1bf 0%, #e6b84a 38%, #9b6a12 62%, #f5d27a 100%); --mfill: linear-gradient(180deg, #ffd9c7 0%, #e0906a 40%, #8f4424 65%, #f0b392 100%);
  --gsh: none; --msh: none; --engrave: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.sdn-neon { --nf: 'Inter', system-ui, sans-serif; --mf: 'Inter', system-ui, sans-serif; --nw: 700; --mw: 700;
  --ng: #c9fbff; --nm: #ffc4f0; --gsh: 0 0 4px #29e6ff, 0 0 12px rgba(41,230,255,.75), 0 0 22px rgba(41,230,255,.4); --msh: 0 0 4px #ff3dc8, 0 0 12px rgba(255,61,200,.75), 0 0 22px rgba(255,61,200,.4); }

/* ---------- the page: the desk on one screen, nothing scrolls ---------- */
html:has(body.game-sudoku[data-page="table"]) { overflow: hidden; }
body.game-sudoku[data-page="table"] .site-foot { display: none; }
body.game-sudoku[data-page="table"] .chat-fab { display: none !important; }
body.game-sudoku[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
body.game-fs .sd-wrap { height: 100%; }
.sd-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; height: 100%; width: 100%; }

/* ---------- the bar above ---------- */
.sd-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 14px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(38,26,16,.94), rgba(14,10,8,.95)); border: 1px solid rgba(255,225,170,.16); box-shadow: 0 10px 22px -14px rgba(0,0,0,.9); }
.sd-info { min-width: 0; font-size: 12.5px; font-weight: 800; color: rgba(255,240,215,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-free { flex: none; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #1f2a10; background: linear-gradient(160deg, #e9ffb8, #a9e25c); }
.sd-free.hidden { display: none; }
.sd-tools { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
.sd-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; cursor: pointer;
  color: #fff3e0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,230,190,.18); }
.sd-tool:hover { border-color: rgba(242,201,107,.7); }
.sd-tool svg.i { width: 17px; height: 17px; }
.sd-tool.hidden { display: none; }
.sd-tool.sd-leave:hover { border-color: rgba(255,90,78,.6); color: #ffb3ab; }
.sd-mute .tv-snd-off { display: none; }
body.tv-muted .sd-mute .tv-snd-off { display: inline; } body.tv-muted .sd-mute .tv-snd-on { display: none; }

/* ---------- the desk: the surface, a soft light from the top left, the edges darker ---------- */
.sd-felt { position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px;
  isolation: isolate; overflow: hidden; background: var(--desk);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 140px rgba(0,0,0,.45), 0 26px 50px -18px rgba(0,0,0,.9); }
.sd-felt::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.42)), linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%); }
.sd-felt > .sd-banner { position: absolute; left: 50%; top: 14px; z-index: 600; transform: translateX(-50%); width: max-content; max-width: min(92%, 560px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sd-felt > .sd-banner.blank { display: none; }
.sd-banner.bad { background: linear-gradient(160deg, #ff6b7d, #c8102e); color: #fff; }
.sd-banner.warn { background: linear-gradient(160deg, #ffd38a, #f08a24); color: #2a1300; }

/* the clock, the mistakes and the chips: little cards on the desk */
.sd-side { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.sd-stat { display: grid; gap: 2px; min-width: 92px; padding: 9px 12px 8px; border-radius: 14px; text-align: center;
  background: linear-gradient(165deg, rgba(20,14,10,.78), rgba(8,6,4,.84)); border: 1px solid rgba(255,230,190,.16);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); }
.sd-stat small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,236,200,.6); }
.sd-stat b { font: 900 20px/1.15 'Inter', system-ui, sans-serif; color: #fff7e8; font-variant-numeric: tabular-nums; }
.sd-stat.hidden { display: none; }
.sd-stat.low b { color: #ffb0a0; animation: sdLow 1s ease-in-out infinite; }
@keyframes sdLow { 50% { opacity: .55; } }
.sd-mist.warn b { color: #ffd38a; }
.sd-mist.last b { color: #ff8f9c; }
.sd-mist b.bump, .sd-mist.warn b { transition: color .3s; }

/* ---------- the board: square, as big as the desk lets it be ---------- */
.sd-boardbox { position: relative; min-width: 0; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; }
.sd-board { --cs: calc(min(100cqw, 100cqh) / 9.25); position: relative; width: calc(var(--cs) * 9 + 8px); height: calc(var(--cs) * 9 + 8px); box-sizing: border-box;
  display: grid; grid-template: repeat(9, minmax(0, 1fr)) / repeat(9, minmax(0, 1fr)); padding: 0; border: 4px solid var(--thick); border-radius: 6px; user-select: none; -webkit-user-select: none;
  background: repeating-linear-gradient(17deg, var(--grain) 0 1px, transparent 1px 4px), repeating-linear-gradient(-71deg, var(--grain) 0 1px, transparent 1px 5px), var(--paper);
  box-shadow: 0 0 0 3px var(--rim), 0 2px 0 3px rgba(255,255,255,.12), 0 22px 36px -12px rgba(0,0,0,.7), 0 6px 12px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.4); }
/* (the light on the board: a soft shine from the top left, over the numbers, never in the way) */
.sd-board::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 2px;
  background: linear-gradient(128deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.06)); }
.sdt-glass .sd-board { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.5), 0 24px 44px -12px rgba(0,0,0,.8), 0 0 40px -8px rgba(120,170,255,.35); }

/* the lesson: each number has its explanation, so the line above the table shows all of it (3–4 lines, not 2) */
body.game-sudoku.demo-on { --dbar: 74px; }
body.game-sudoku .demo-cap { -webkit-line-clamp: 3; }
@media (max-width: 560px) { body.game-sudoku.demo-on { --dbar: 86px; } body.game-sudoku .demo-cap { -webkit-line-clamp: 4; line-height: 1.3; } }

/* the squares: a thin line to the left and on top, thicker at the edge of a box */
.sd-c { --sl: 1px 0 0 var(--line); --st: 0 1px 0 var(--line); position: relative; display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
  cursor: pointer; color: var(--mc); background: transparent; box-shadow: inset var(--sl), inset var(--st); transition: background-color .16s; -webkit-tap-highlight-color: transparent; }
.sd-c:nth-child(9n + 1) { --sl: 0 0 0 transparent; }
.sd-c:nth-child(-n + 9) { --st: 0 0 0 transparent; }
.sd-c.bl3 { --sl: 2px 0 0 var(--thick); }
.sd-c.bt3 { --st: 0 2px 0 var(--thick); }
.sd-c:focus { outline: none; }
.sd-c:focus-visible { box-shadow: inset var(--sl), inset var(--st), inset 0 0 0 2px var(--mc); }
.sd-c.hl { background: var(--hl); }
.sd-c.same { background: var(--same); }
.sd-c.sel { background: var(--sel); box-shadow: inset var(--sl), inset var(--st), inset 0 0 0 2px color-mix(in srgb, var(--thick) 55%, transparent); }
.sd-c.wrong { background: var(--badbg); }
.sd-c.bl { background: color-mix(in srgb, var(--hc) 26%, transparent); }

/* the number: the given ones printed, the player's written */
.sd-v { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-family: var(--mf); font-weight: var(--mw); font-size: calc(var(--cs) * .64); line-height: 1;
  color: var(--mc); text-shadow: var(--msh); }
.sd-c.g .sd-v { font-family: var(--nf); font-weight: var(--nw); font-size: calc(var(--cs) * .58); color: var(--gc); text-shadow: var(--gsh); }
.sd-c.h .sd-v { color: var(--hc); }
.sd-c.h::before { content: ''; position: absolute; right: 8%; top: 8%; width: 14%; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc94d 60%, #b77c12); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.sd-c.wrong .sd-v { color: var(--bad); text-shadow: 0 0 6px color-mix(in srgb, var(--bad) 40%, transparent); }
.sd-c.pend .sd-v { opacity: .55; }
/* a game lost: the squares left empty show the solution, written in the hint's colour, appearing from the top left */
.sd-c.rv .sd-v { font-family: var(--mf); font-weight: var(--mw); color: var(--hc); opacity: .92; animation: sdReveal .45s calc(var(--d) * .6) ease-out backwards; }
@keyframes sdReveal { from { opacity: 0; transform: scale(.6); } }
.sdn-brass .sd-c.rv .sd-v { background: linear-gradient(180deg, #f4f7fb 0%, #aab4c3 45%, #6b7686 65%, #e3e8ef 100%); -webkit-background-clip: text; background-clip: text; }
.sd-c.same .sd-v { text-shadow: var(--msh), 0 0 10px var(--glow); }
.sdn-brass .sd-v { color: transparent !important; background: var(--mfill); -webkit-background-clip: text; background-clip: text; filter: var(--engrave); }
.sdn-brass .sd-c.g .sd-v { background: var(--gfill); -webkit-background-clip: text; background-clip: text; }
.sdn-brass .sd-c.wrong .sd-v { background: linear-gradient(180deg, #ffb3bd, #c8102e); -webkit-background-clip: text; background-clip: text; }
.sdn-neon .sd-v { color: var(--nm); }
.sdn-neon .sd-c.g .sd-v { color: var(--ng); }
.sdn-neon .sd-c.wrong .sd-v { color: #ffd1d8; text-shadow: 0 0 4px #ff2a4a, 0 0 14px rgba(255,42,74,.8); }

/* the notes: small pencil numbers in a 3 × 3 */
.sd-n { position: absolute; inset: 5%; z-index: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); pointer-events: none; }
.sd-n i { display: grid; place-items: center; font: 600 calc(var(--cs) * .23)/1 'Inter', system-ui, sans-serif; font-style: normal; color: var(--notec); opacity: 0;
  text-shadow: 0 0 .5px var(--notec); transition: opacity .12s; }
.sd-n i.on { opacity: 1; }
.notes-on .sd-c.sel { box-shadow: inset var(--sl), inset var(--st), inset 0 0 0 2px var(--notec); }

/* ---------- the effects ---------- */
/* a right number "opens": it lands in ink, a ring spreads from it */
.sd-c.sd-pop .sd-v { animation: sdInk .55s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes sdInk { from { transform: scale(1.7); opacity: 0; } 60% { opacity: 1; } }
.sd-c.sd-pop::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--glow); transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: sdRing .6s ease-out; }
@keyframes sdRing { 0% { opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
/* a wrong one shakes */
.sd-c.shake .sd-v { animation: sdShake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes sdShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px) rotate(-4deg); } 40%, 60% { transform: translateX(5px) rotate(4deg); } }
/* a row, a column or a box filled: a light runs along it, square after square */
.sd-c.sweep::after, .sd-board.win .sd-c::after { content: ''; position: absolute; inset: -10% -60%; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--glow) 50%, transparent 70%); transform: translateX(-80%); opacity: 0; }
.sd-c.sweep::after { animation: sdSweep .75s var(--k, 0ms) ease-out; }
.sd-board.win .sd-c::after { animation: sdSweep .8s calc(var(--d) * 1.4) ease-out; }
@keyframes sdSweep { 0% { opacity: 0; transform: translateX(-80%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(80%); } }
.sd-board.win .sd-c .sd-v { animation: sdWin .7s calc(var(--d) * 1.4) ease-in-out; }
@keyframes sdWin { 50% { transform: scale(1.22); } }
/* the numbers given come onto the board at the start, from the top left */
.sd-board.deal .sd-c.g .sd-v { animation: sdDeal .5s var(--d) cubic-bezier(.2,1.3,.4,1) backwards; }
@keyframes sdDeal { from { transform: translateY(-8px) scale(.6); opacity: 0; } }
/* (the lesson) the numbers that rule a square out light up and breathe */
.sd-c.blp::after { content: ''; position: absolute; inset: 8%; z-index: 3; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px var(--hc); animation: sdBl .9s ease-in-out 2; }
@keyframes sdBl { 50% { transform: scale(1.12); box-shadow: 0 0 0 3px var(--hc), 0 0 14px var(--hc); } }
body.demo-on main > .page#table .sd-live, body.demo-on main > .page#table .sd-live * { pointer-events: auto !important; }
.sd-board.sd-live .sd-c.sel { animation: sdYou 1.2s ease-in-out infinite; }
@keyframes sdYou { 50% { background: color-mix(in srgb, var(--sel) 60%, var(--glow)); } }

/* ---------- the bar under: undo, eraser, notes, hint; the numbers ---------- */
.sd-bar { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(38,26,16,.94), rgba(14,10,8,.95)); border: 1px solid rgba(255,225,170,.14); }
.sd-acts { display: flex; justify-content: center; gap: 8px; }
.sd-btn { position: relative; flex: 1 1 0; max-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 13px;
  cursor: pointer; font: 800 13px 'Inter', system-ui, sans-serif; color: #fff3e0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,230,190,.18); }
.sd-btn:hover:not(:disabled) { border-color: rgba(242,201,107,.65); }
.sd-btn svg.i { width: 18px; height: 18px; flex: none; }
.sd-btn em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
  font-size: 10.5px; color: #2a1800; background: rgba(255,255,255,.75); }
.sd-btn.on { color: #2a1800; border-color: transparent; background: linear-gradient(180deg, #ffe58f, #f2c96b 50%, #d89c25); box-shadow: 0 6px 16px -6px rgba(242,201,107,.8); }
.sd-btn.on em { background: rgba(255,255,255,.9); }
.sd-btn.hint em { background: linear-gradient(160deg, #fff1b8, #ffcf4d); }
.sd-btn:disabled { opacity: .42; cursor: default; }
.sd-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
/* the number keys: wooden tiles with the number cut in, the ones left under it */
.sd-k { position: relative; display: grid; place-items: center; height: 52px; padding: 0; border-radius: 12px; cursor: pointer; color: #2a1a0c;
  background: linear-gradient(170deg, #fbf3e2, #e8d8b8 70%, #d9c49b); border: 1px solid rgba(90,60,25,.35);
  box-shadow: 0 3px 0 #a9875a, 0 6px 10px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8); transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; }
.sd-k b { font: 800 24px/1 Georgia, 'Times New Roman', serif; }
.sd-k small { position: absolute; right: 6px; bottom: 3px; font: 800 9.5px/1 'Inter', system-ui, sans-serif; color: rgba(70,45,15,.6); }
.sd-k:active { transform: translateY(2px); box-shadow: 0 1px 0 #a9875a, 0 3px 6px -3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8); }
.sd-k.done { opacity: .35; }
.notes-on .sd-k { color: #4a4438; background: linear-gradient(170deg, #f4f1ea, #dcd6c8 70%, #cbc3b0); }
.notes-on .sd-k b { font: 600 18px/1 'Inter', system-ui, sans-serif; }
.sd-pad.sd-live .sd-k { animation: sdKey 1.4s ease-in-out infinite; }
@keyframes sdKey { 50% { box-shadow: 0 3px 0 #a9875a, 0 0 18px rgba(255,214,140,.85), inset 0 1px 0 rgba(255,255,255,.8); } }

/* ---------- the end window ---------- */
.sd-res { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; padding: 12px; background: rgba(10,6,2,.5); }
.sd-res.hidden { display: none; }
.sd-res-in { width: min(420px, 100%); box-sizing: border-box; padding: 20px 20px 16px; border-radius: 24px; text-align: center;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,214,140,.14), transparent 70%), linear-gradient(165deg, rgba(48,32,18,.97), rgba(16,11,7,.97));
  border: 1px solid rgba(242,201,107,.4); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 50px -12px rgba(242,201,107,.3); animation: sdIn .45s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes sdIn { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.sd-res-in h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; color: #fff3dc; }
.sd-res-in.won h3 { background: linear-gradient(90deg, #fff1bf, #f2c96b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-res-in.lost h3 { color: #ffc7c0; }
.sd-res-in p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,240,220,.8); }
.sd-res-in .sd-res-note { font-size: 12.5px; color: #ffe08a; }
.sd-res-art { height: 84px; margin: -4px 0 6px; display: grid; place-items: center; }
.sd-res-art svg { width: 96px; height: 84px; }
.sd-res-art.seal .s1 { fill: #b3202d; stroke: #7d0f18; stroke-width: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.sd-res-art.seal .s2 { fill: none; stroke: rgba(255,200,190,.45); stroke-width: 2; stroke-dasharray: 3 4; }
.sd-res-art.seal .s3 { fill: none; stroke: #ffe3d8; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: sdTick .5s .35s ease-out forwards; }
.sd-res-art.seal svg { animation: sdSeal .5s cubic-bezier(.3,1.6,.5,1) backwards; }
@keyframes sdSeal { from { transform: scale(1.8) rotate(-20deg); opacity: 0; } }
@keyframes sdTick { to { stroke-dashoffset: 0; } }
.sd-res-art.pen svg { width: 120px; height: 70px; }
.sd-res-art.pen .p1 { fill: #f2c64a; stroke: #8a5e10; stroke-width: 1; }
.sd-res-art.pen .p2 { fill: #2a2a2a; } .sd-res-art.pen .p3 { fill: #e7a3a0; }
.sd-res-art.note svg { width: 120px; height: 70px; }
.sd-res-art.note .n1 { fill: rgba(255,214,140,.12); stroke: #f2c96b; stroke-width: 2.5; }
.sd-res-art.note .n2 { stroke: #f2c96b; stroke-width: 5; stroke-linecap: round; }
.sd-res-chips { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 16px; padding: 8px 16px; border-radius: 14px; font: 900 20px/1 'Inter', system-ui, sans-serif;
  color: #ffe08a; background: rgba(255,216,102,.1); border: 1px solid rgba(255,216,102,.35); }
.sd-res-chips.neg { color: #ffb3b8; background: rgba(255,90,100,.14); border-color: rgba(255,90,100,.35); }
.sd-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc94d 55%, #c9871b); box-shadow: inset 0 0 0 2px rgba(122,70,8,.35), 0 2px 4px rgba(0,0,0,.4); }
.sd-res-acts { display: flex; justify-content: center; gap: 8px; }
.sd-rb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; cursor: pointer;
  font: 800 13px 'Inter', system-ui, sans-serif; color: #fff3e0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,230,190,.2); }
.sd-rb:hover { border-color: rgba(242,201,107,.6); }
.sd-rb svg.i { width: 16px; height: 16px; }
.sd-res-in .sd-see { display: flex; width: fit-content; margin: -4px auto 12px; }
/* "See the solution": the window steps aside, a small bar stays at the bottom (back to the result, play again) */
.sd-res-peek { display: none; }
.sd-res.peek { background: none; pointer-events: none; place-items: end center; }
.sd-res.peek .sd-res-in { display: none; }
.sd-res.peek .sd-res-peek { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; border-radius: 16px; pointer-events: auto;
  background: linear-gradient(165deg, rgba(48,32,18,.97), rgba(16,11,7,.97)); border: 1px solid rgba(242,201,107,.4); box-shadow: 0 18px 40px -14px rgba(0,0,0,.9);
  animation: sdIn .35s cubic-bezier(.3,1.4,.5,1) backwards; }
.sd-rb.go { color: #2a1800; border-color: transparent; background: linear-gradient(180deg, #ffe58f, #f2c96b 50%, #d89c25); box-shadow: 0 6px 16px -6px rgba(242,201,107,.85); }

/* ---------- the home: the board on its desk in perspective, a pencil beside it; the levels ---------- */
.hero-sd .sd-art { position: relative; display: flex; justify-content: center; padding: 6px 0 12px; }
.sd-homeart { position: relative; width: 300px; max-width: 100%; height: 168px; border-radius: 18px; overflow: hidden; background: var(--desk);
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 14px 28px -14px rgba(0,0,0,.8); }
.sd-homeart .sd-paper { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -70px 0 0 -84px; transform: perspective(520px) rotateX(24deg) rotateZ(-9deg);
  animation: sdHome .7s cubic-bezier(.2,1.2,.4,1) backwards; }
@keyframes sdHome { from { transform: perspective(520px) rotateX(24deg) rotateZ(-9deg) translateY(-26px); opacity: 0; } }
.sd-pencil { position: absolute; right: 30px; top: 28px; width: 10px; height: 116px; border-radius: 2px; transform: rotate(28deg); transform-origin: 50% 0;
  background: linear-gradient(90deg, #d79b1e, #f6c64a 35%, #ffe08a 50%, #e2a92c 70%, #b9810f); box-shadow: 6px 10px 10px -4px rgba(0,0,0,.45); }
.sd-pencil::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #e7a3a0 0 60%, #c9c9c9 60% 100%); }
.sd-pencil::after { content: ''; position: absolute; left: 0; bottom: -16px; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 16px solid #f2d7a8; filter: drop-shadow(0 6px 0 transparent); }
/* the small board (home, look window): paper, its lines, a few numbers */
.sd-paper { box-sizing: border-box; padding: 0; border: 2.5px solid var(--thick); border-radius: 3px; background: var(--paper);
  box-shadow: 0 0 0 2px var(--rim), 0 16px 22px -10px rgba(0,0,0,.65), 0 3px 6px rgba(0,0,0,.3); }
.sd-paper { container-type: size; }
.sd-mini { display: grid; grid-template: repeat(9, minmax(0, 1fr)) / repeat(9, minmax(0, 1fr)); width: 100%; height: 100%; }
.sd-mini span { display: grid; place-items: center; box-shadow: inset .5px 0 0 var(--line), inset 0 .5px 0 var(--line); font: var(--nw) 7.6cqh/1 var(--nf); color: var(--gc); text-shadow: var(--gsh); }
.sd-mini span.m { font-family: var(--mf); font-weight: var(--mw); color: var(--mc); text-shadow: var(--msh); }
.sd-mini span.bl3 { box-shadow: inset 1.5px 0 0 var(--thick), inset 0 .5px 0 var(--line); }
.sd-mini span.bt3 { box-shadow: inset .5px 0 0 var(--line), inset 0 1.5px 0 var(--thick); }
.sd-mini span.bl3.bt3 { box-shadow: inset 1.5px 0 0 var(--thick), inset 0 1.5px 0 var(--thick); }
.sdn-brass .sd-mini span { color: #c9952e; } .sdn-brass .sd-mini span.m { color: #c06a44; }
.sdn-neon .sd-mini span { color: var(--ng); } .sdn-neon .sd-mini span.m { color: var(--nm); }
.sd-mini3 { grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.sd-mini3 span { font-size: 24cqh; }
.logo-sd { width: 36px; height: 36px; flex: none; } .logo-sd svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
/* the four levels: four small cards, the chosen one lit */
.sd-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sd-lv { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit; text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: transform .15s, border-color .2s, background .2s; }
.sd-lv:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.sd-lv b { font-size: 14px; font-weight: 900; }
.sd-lv-n { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.7); white-space: nowrap; }
.sd-lv-n em { font-style: normal; } .sd-lv-n strong { color: #9fe39a; font-weight: 900; }
.sd-lv-dots { display: flex; gap: 3px; } .sd-lv-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sd-lv-dots i.on { background: linear-gradient(160deg, #ffe58f, #f2c96b); box-shadow: 0 0 6px rgba(242,201,107,.6); }
.sd-lv.on { border-color: #f2c96b; background: rgba(242,201,107,.1); box-shadow: 0 0 0 1px #f2c96b, 0 0 18px -6px rgba(242,201,107,.7); }

/* ---------- my look: a corner of the board on its desk ---------- */
.sd-lk { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 60px; border-radius: 10px; overflow: hidden; background: var(--desk);
  box-shadow: inset 0 0 30px rgba(0,0,0,.4); }
.sd-lk .sd-paper { width: 62%; max-width: 92px; aspect-ratio: 1; transform: rotate(-6deg); }
.lkm-pv .sd-lk .sd-paper, .lkm-live .sd-lk .sd-paper { width: auto; height: 78%; max-width: none; }

/* ---------- wide screens: the numbers beside the board, as a keypad ---------- */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .sd-wrap { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); }
  .sd-top { grid-column: 1 / -1; }
  .sd-bar { justify-content: center; gap: 14px; padding: 16px 14px; }
  .sd-acts { display: grid; grid-template-columns: 1fr 1fr; }
  .sd-btn { max-width: none; height: 44px; }
  .sd-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sd-k { height: auto; aspect-ratio: 1; border-radius: 16px; }
  .sd-k b { font-size: 34px; } .notes-on .sd-k b { font-size: 24px; }
  .sd-k small { font-size: 11px; right: 8px; bottom: 6px; }
}
/* ---------- phones ---------- */
@media (max-width: 760px) {
  body.game-sudoku[data-page="table"] #table.page { padding: 6px; }
  .sd-wrap { gap: 6px; }
  .sd-top { padding: 4px 6px 4px 10px; border-radius: 12px; } .sd-tool { width: 32px; height: 32px; border-radius: 10px; }
  .sd-info { font-size: 11.5px; } .sd-free { font-size: 10.5px; padding: 3px 8px; }
  .sd-felt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 14px; }
  .sd-side { flex-direction: row; justify-content: center; gap: 6px; }
  .sd-stat { min-width: 0; flex: 1 1 0; max-width: 120px; padding: 5px 8px; border-radius: 11px; } .sd-stat b { font-size: 16px; } .sd-stat small { font-size: 9px; }
  .sd-felt > .sd-banner { top: auto; bottom: 10px; }
  .sd-bar { padding: 6px; border-radius: 12px; gap: 6px; }
  .sd-btn { height: 36px; font-size: 12px; padding: 0 8px; gap: 5px; }
  .sd-pad { gap: 4px; } .sd-k { height: 46px; border-radius: 10px; } .sd-k b { font-size: 21px; } .sd-k small { right: 4px; font-size: 8.5px; }
  .sd-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-board { border-width: 3px; }
}
@media (max-width: 420px) { .sd-btn span { display: none; } .sd-btn { max-width: 70px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .sd-wrap { grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); grid-template-rows: auto minmax(0, 1fr); }
  .sd-top { grid-column: 1 / -1; padding: 3px 6px 3px 10px; }
  .sd-felt { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 6px; }
  .sd-side { flex-direction: column; } .sd-stat { padding: 4px 8px; }
  .sd-bar { justify-content: center; }
  .sd-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-k { height: 40px; }
  .sd-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-c .sd-v, .sd-c::after, .sd-board.win .sd-c::after, .sd-stat.low b, .sd-res-in, .sd-res-art svg, .sd-homeart .sd-paper, .sd-pad.sd-live .sd-k, .sd-board.sd-live .sd-c.sel { animation: none !important; }
  .sd-res-art.seal .s3 { stroke-dashoffset: 0; }
}