/* Sudoku: the box on the page, the game screen, the board, the notes, the number pad, hints, effects and the few things the shared windows do not have. Loaded on the sudoku page only (with game-page.css and game-sheet.css).
   The look is its own: a fresh mint-green garden, a clean white board with a deep teal frame, given digits in dark ink and yours in blue, soft glows instead of hard shadows.
   Colours come from the variables on .sd-box / .sd-app, one set per backdrop. The sheets, buttons and top bar share their shape with the other games. */

/* ---------- colours: one set per backdrop ---------- */
.sd-box,.sd-app{
  --ink:#23483f;--ink2:#5f8a7e;--card:#fff;--card2:#f0faf6;--line:rgba(30,110,85,.14);--shade:20,70,55;
  --bg1:#f3fff9;--bg2:#d3f4e3;--bg3:#a9e6c8;--dot:50,150,110;
  --o1:rgba(255,246,170,.7);--o2:rgba(140,230,190,.7);--o3:rgba(180,225,255,.6);
  --panel:rgba(255,255,255,.88);--panel-edge:#fff;
  --a1:#2fbf8f;--a2:#7fdc8a;--ad:#17805f;--ag:rgba(47,191,143,.5);--lip:rgba(23,128,95,.2);
  --gem:#35b8ef;--gemd:#1b86c9;--gemg:rgba(53,184,239,.7);
  --hl:47,191,143;--cell:#fff;--frame:#2b5a4d;--thin:rgba(43,90,77,.2);--thick:#2b5a4d;--given:#1d3d35;--enter:#2a73d9;--enterrgb:42,115,217;--sel:#bdf1da;--bad:#e0344f;--badbg:rgba(255,88,112,.17);--gold:255,196,40;
}
.sd-app[data-theme=peach]{--bg1:#fffaf4;--bg2:#ffe6d0;--bg3:#ffc9a4;--dot:210,120,60;--o1:rgba(255,226,150,.65);--o2:rgba(255,170,150,.55);--o3:rgba(255,215,170,.7);--a1:#ff8a4c;--a2:#ffb347;--ad:#c9561f;--ag:rgba(255,138,76,.5);--lip:rgba(201,86,31,.22);--ink:#5a3520;--ink2:#a07758;--card2:#fff6ec;--line:rgba(160,90,40,.16);--shade:100,60,20;--hl:255,138,76;--frame:#7a4630;--thin:rgba(122,70,48,.22);--thick:#7a4630;--given:#4a2a18;--enter:#d2501a;--enterrgb:210,80,26;--sel:#ffd9bd}
.sd-app[data-theme=berry]{--bg1:#f6f9ff;--bg2:#dbe7ff;--bg3:#b5ccff;--dot:80,120,210;--o1:rgba(210,225,255,.7);--o2:rgba(180,170,255,.55);--o3:rgba(170,230,255,.6);--a1:#5b8cf0;--a2:#8f7cf5;--ad:#2f5fd0;--ag:rgba(91,140,240,.5);--lip:rgba(47,95,208,.2);--ink:#243566;--ink2:#6b7db3;--card2:#f3f7ff;--line:rgba(60,90,180,.15);--shade:30,50,120;--hl:91,140,240;--frame:#2d4584;--thin:rgba(45,69,132,.22);--thick:#2d4584;--given:#1e2d62;--enter:#d2501a;--enterrgb:210,80,26;--sel:#cfdfff}
.sd-app[data-theme=lilac]{--bg1:#faf6ff;--bg2:#e6dcff;--bg3:#cbbcff;--dot:120,100,200;--o1:rgba(255,210,235,.65);--o2:rgba(180,160,255,.7);--o3:rgba(170,220,255,.6);--a1:#8a78ff;--a2:#b27cff;--ad:#5f4bd6;--ag:rgba(138,120,255,.5);--lip:rgba(95,75,214,.22);--ink:#36307a;--ink2:#7873b0;--card2:#f8f5ff;--line:rgba(90,70,190,.14);--shade:50,40,120;--hl:138,120,255;--frame:#4d4290;--thin:rgba(77,66,144,.22);--thick:#4d4290;--given:#2c2566;--enter:#c23d78;--enterrgb:194,61,120;--sel:#ddd3ff}
.sd-app[data-theme=night]{--ink:#eafff8;--ink2:#9fc7bd;--card:#1f4350;--card2:#285666;--line:rgba(255,255,255,.14);--shade:4,20,26;
  --bg1:#2c5a66;--bg2:#1b3d49;--bg3:#0e242d;--dot:170,235,215;--o1:rgba(120,230,190,.28);--o2:rgba(90,150,255,.32);--o3:rgba(255,210,130,.2);
  --panel:rgba(255,255,255,.1);--panel-edge:rgba(255,255,255,.2);--a1:#4fd9aa;--a2:#7fe8c0;--ad:#8ff0cb;--ag:rgba(79,217,170,.5);--lip:rgba(0,0,0,.3);
  --hl:79,217,170;--cell:#244a58;--frame:#0b1d25;--thin:rgba(255,255,255,.13);--thick:#8fc4b6;--given:#f2fffb;--enter:#8cc2ff;--enterrgb:140,194,255;--sel:#2f7a6e;--bad:#ff8fa3;--badbg:rgba(255,100,130,.2)}

/* ---------- the box on the page: a picture and a bar with the buttons, until someone plays ---------- */
.sd-box{position:relative;margin:0 0 6px;border-radius:30px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--bg1),var(--bg2));box-shadow:0 30px 56px -30px rgba(40,150,110,.5),0 0 0 1px rgba(60,150,120,.22)}
.sd-box>.sd-adslot{display:none}
.sd-poster{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden;background:#d9f5e8}
.sd-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sd-pmeta{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:99px;background:#fff;color:var(--ink);font:800 .88rem/1 var(--display);box-shadow:0 3px 0 rgba(27,143,110,.2),0 10px 18px -10px rgba(27,143,110,.5)}
.sd-pmeta[hidden]{display:none}
.sd-pmeta .ic{width:19px;height:19px}
.sd-pbar{position:relative;display:flex;gap:12px;justify-content:center;padding:16px 20px 20px;background:linear-gradient(180deg,#f6fffa,#dff7ea)}
.sd-box:not(.ready) .sd-pbar{visibility:hidden}
.sd-play{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:220px;padding:16px 26px 16px 22px;border:0;border-radius:20px;cursor:pointer;color:#fff;font:800 1.12rem/1 var(--display);letter-spacing:.01em;text-shadow:0 2px 0 rgba(10,80,55,.3);
  background:linear-gradient(180deg,#8fe6b8,var(--a1) 45%,#25b085);box-shadow:0 6px 0 var(--ad),0 18px 26px -10px var(--ag),inset 0 2px 0 rgba(255,255,255,.55);transition:transform .12s,box-shadow .12s}
.sd-play:hover{transform:translateY(-2px)}
.sd-play:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ad),0 6px 12px -6px var(--ag),inset 0 2px 0 rgba(255,255,255,.55)}
.sd-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sd-play .ic{width:22px;height:22px;flex:none}
.sd-play.alt{color:var(--ink);text-shadow:none;background:#fff;box-shadow:0 6px 0 rgba(30,100,80,.16),0 14px 22px -12px rgba(30,100,80,.34),inset 0 0 0 2px rgba(30,100,80,.1)}
.sd-play.alt:active{box-shadow:0 1px 0 rgba(30,100,80,.16),inset 0 0 0 2px rgba(30,100,80,.1)}
.sd-play.alt .ic{color:var(--a1)}
.sd-play .fl{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:3px 8px 3px 5px;border-radius:99px;background:linear-gradient(135deg,#ff9a56,#ff5f7e);color:#fff;font:800 .82rem/1 var(--display);font-style:normal}
.sd-play .fl[hidden]{display:none}
.sd-play .fl .ic{width:14px;height:14px;color:#fff3c4}
@media (min-width:821px){
  /* before the game the picture is kept short enough to show the buttons without scrolling (the art keeps its subject in the middle) */
  .sd-poster{max-height:max(340px,calc(100vh - 360px))}
  /* once the game is open the box grows to the height of the screen */
  .sd-box.on{height:min(calc(100vh - 36px),820px);min-height:600px}
}
@media (max-width:820px){
  .sd-box{border-radius:0;margin-inline:0}
  .sd-poster{aspect-ratio:390/330}
  .sd-poster>img{object-position:50% 50%}
  .sd-pbar{padding:14px var(--gut) 18px;gap:10px}
  .sd-play{flex:1 1 0;min-width:0;padding:15px 8px;gap:7px;font-size:.98rem;white-space:nowrap;border-radius:18px}
  .sd-play .ic{width:20px;height:20px}
  .sd-play .fl{position:absolute;top:-10px;right:8px;margin:0;box-shadow:0 4px 10px -3px rgba(150,70,0,.6)}
}

/* ---------- the game screen ---------- */
.sd-app{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);font-family:var(--display);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(circle at 1px 1px,rgba(var(--dot),.2) 1.3px,transparent 1.8px) 0 0/22px 22px,linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 58%,var(--bg3) 100%)}
.sd-app[hidden]{display:none}
.sd-app.full{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;border-radius:0}
.sd-app.noad{padding-bottom:12px}
.sd-app.noad.full{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.sd-app:fullscreen{width:100%;height:100%}
.sd-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sd-orb{position:absolute;border-radius:50%;will-change:transform}
.sd-orb.o1{left:-20%;top:-12%;width:78%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o1),transparent);animation:sdDrift 24s ease-in-out infinite alternate}
.sd-orb.o2{right:-24%;top:30%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o2),transparent);animation:sdDrift 30s ease-in-out -9s infinite alternate-reverse}
.sd-orb.o3{left:6%;bottom:-26%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,var(--o3),transparent);animation:sdDrift 27s ease-in-out -15s infinite alternate}
@keyframes sdDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
.sd-fl i{position:absolute;left:var(--l);top:105%;font:800 var(--s)/1 var(--display);font-style:normal;color:rgba(var(--dot),.42);opacity:0;animation:sdUp var(--t) linear var(--d) infinite}
.sd-app[data-theme=night] .sd-fl i{color:rgba(210,220,255,.32)}
@keyframes sdUp{0%{top:105%;transform:translateX(0) rotate(0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{top:-10%;transform:translateX(var(--w)) rotate(var(--r));opacity:0}}
@supports (container-type:size){.sd-fl{position:absolute;inset:0;container-type:size}.sd-fl i{top:0;will-change:transform;animation-name:sdUp2}}
@keyframes sdUp2{0%{transform:translate3d(0,105cqh,0) rotate(0);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate3d(var(--w),-12cqh,0) rotate(var(--r));opacity:0}}
/* while a block is in the hand nothing in the background moves: all the work goes to the finger */
/* while a finger is on the board nothing in the background moves: all the work goes to the finger */
.sd-app.dragging .sd-orb,.sd-app.dragging .sd-fl i{animation-play-state:paused}

/* top bar: round white stickers, the title in the middle */
.sd-top{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 14px 4px}
.sd-app.full .sd-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.sd-tl,.sd-tr{display:flex;align-items:center;gap:8px}
.sd-tr{justify-content:flex-end}
.sd-ib{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--lip),0 10px 16px -10px var(--ag);transition:transform .12s}
.sd-ib:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.sd-ib:focus-visible,.sd-btn:focus-visible,.sd-row:focus-visible,.sd-th:focus-visible,.sd-tool:focus-visible,.sd-key:focus-visible,.sd-time:focus-visible,.sd-lvb:focus-visible,.sd-hbtn:focus-visible,.sd-hx:focus-visible{outline:3px solid var(--a1);outline-offset:2px}
.sd-ib .ic{width:20px;height:20px}
.sd-title{min-width:0;max-width:60vw;text-align:center;line-height:1.1}
.sd-title b{display:block;font:800 1.14rem/1.1 var(--display);letter-spacing:-.01em}
.sd-title small{display:block;margin-top:3px;font:800 .64rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.sd-title small:empty{display:none}
.sd-fs,.sd-sndb{display:none}
.sd-row.mobonly{display:flex}
@media (min-width:821px){.sd-fs,.sd-sndb{display:grid}.sd-row.mobonly{display:none}.sd-top{padding:14px 18px 6px}.sd-ib{width:44px;height:44px}.sd-hud{width:100%;max-width:780px;margin-inline:auto}}

/* the numbers: time, the theme of the puzzle with the count of found words, and the gems you are still on for */
.sd-hud{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:4px 14px 6px}
.sd-time,.sd-starm{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:99px;background:var(--card);box-shadow:0 3px 0 var(--lip);font:800 .95rem/1 var(--display);font-variant-numeric:tabular-nums}
.sd-time{justify-self:start}
.sd-time .ic{width:17px;height:17px;color:var(--a1)}
.sd-starm{justify-self:end;gap:2px;padding:7px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sd-starm .ic{width:21px;height:21px;transition:filter .3s,transform .3s}
.sd-starm .ic.off{filter:grayscale(1) opacity(.3);transform:scale(.82)}


/* the numbers: the clock (a button: it pauses), the level with the count of empty cells (a button: it opens the list of levels), and the gems you are still on for */
.sd-time{border:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.sd-time:active{transform:translateY(2px)}
.sd-lvb{min-width:0;border:0;padding:2px 6px;background:none;color:inherit;cursor:pointer;text-align:center;line-height:1.1;-webkit-tap-highlight-color:transparent}
.sd-lvb b{display:block;font:800 clamp(1.1rem,4.6vw,1.55rem)/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.sd-app[data-theme=night] .sd-lvb b{text-shadow:0 2px 0 rgba(0,0,0,.3)}
.sd-lvb small{display:block;margin-top:4px;font:800 .66rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.sd-lvb small b{display:inline;font:inherit;letter-spacing:inherit;text-shadow:none;color:var(--ad)}

/* the board: a white card with a deep frame, the cells inside, the lines on top of them */
.sd-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:12px;padding:2px 0 6px}
.sd-wrap{flex:none;width:var(--bw)}
.sd-board{position:relative;width:var(--bw);height:var(--bw);padding:var(--fr);border-radius:calc(var(--cs) * .34);background:var(--frame);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none;
  box-shadow:0 calc(var(--cs) * .12) 0 var(--lip),0 calc(var(--cs) * .6) calc(var(--cs) * .9) calc(var(--cs) * -.4) var(--ag)}
.sd-board:focus-visible{box-shadow:0 0 0 3px var(--a1),0 calc(var(--cs) * .12) 0 var(--lip)}
.sd-grid{position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--cs));grid-template-rows:repeat(var(--n),var(--cs));width:calc(var(--n) * var(--cs));height:calc(var(--n) * var(--cs));border-radius:calc(var(--cs) * .22);overflow:hidden;background:var(--cell)}
.sd-lines{position:absolute;left:var(--fr);top:var(--fr);width:calc(var(--n) * var(--cs));height:calc(var(--n) * var(--cs));z-index:3;pointer-events:none}
.sd-lines i{position:absolute;background:var(--thin)}
.sd-lines i.v{top:0;bottom:0}
.sd-lines i.h{left:0;right:0}
.sd-lines i.t{background:var(--thick)}
.sd-c{position:relative;display:grid;place-items:center;width:var(--cs);height:var(--cs);background:var(--cell);font-style:normal;transition:background-color .12s}
.sd-c .v{position:relative;z-index:1;font:700 calc(var(--cs) * .62)/1 var(--display);color:var(--enter);font-variant-numeric:lining-nums}
.sd-c.g .v{color:var(--given);font-weight:700}
.sd-c .nt{position:absolute;inset:calc(var(--cs) * .06) calc(var(--cs) * .08);display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;font:700 calc(var(--cs) * .27)/1 var(--display);color:var(--ink2);pointer-events:none}
.sd-board[data-n="6"] .sd-c .nt{inset:calc(var(--cs) * .1) calc(var(--cs) * .1);font-size:calc(var(--cs) * .31)}
.sd-board[data-n="4"] .sd-c .nt{grid-template-columns:repeat(2,1fr);inset:calc(var(--cs) * .12) calc(var(--cs) * .16);font-size:calc(var(--cs) * .29)}
.sd-c .nt i{display:grid;place-items:center;font-style:normal;visibility:hidden}
.sd-c .nt i.on{visibility:visible}
.sd-c .nt i.hl{color:var(--ad);font-weight:800;text-shadow:0 0 0 currentColor}
.sd-c .nt i.hi{color:#9a5b00;font-weight:800}
.sd-app[data-theme=night] .sd-c .nt i.hi{color:#ffd36b}
.sd-c .nt i.x{color:var(--bad);font-weight:800;text-decoration:line-through;text-decoration-thickness:max(1.5px,calc(var(--cs) * .04))}
.sd-c.v0 .v{display:none}
/* what is lit: the cells that see the chosen one, the same digit, the chosen cell itself */
.sd-c.p{background:color-mix(in srgb,rgb(var(--hl)) 13%,var(--cell))}
.sd-c.m{background:color-mix(in srgb,rgb(var(--hl)) 34%,var(--cell))}
.sd-c.s{background:var(--sel);box-shadow:inset 0 0 0 calc(var(--cs) * .07) var(--a1)}
.sd-c.bad .v{color:var(--bad)}
.sd-c.bad{background:var(--badbg)}
.sd-c.bad.s{box-shadow:inset 0 0 0 calc(var(--cs) * .07) var(--bad)}
/* hints: where to look, the pattern, the move, the notes that go */
.sd-c.hz{background:rgba(var(--gold),.16)}
.sd-c.hq{background:rgba(var(--gold),.38)}
.sd-c.ht{background:rgba(var(--gold),.5);box-shadow:inset 0 0 0 calc(var(--cs) * .07) #f5b400;animation:sdTgt .9s ease-in-out infinite alternate}
.sd-c.ht::after{content:attr(data-g);position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:700 calc(var(--cs) * .62)/1 var(--display);color:rgba(var(--enterrgb),.5)}
.sd-c.he{box-shadow:inset 0 0 0 calc(var(--cs) * .06) #ff6a85}
.sd-c.hm{background:rgba(255,88,112,.3);box-shadow:inset 0 0 0 calc(var(--cs) * .07) var(--bad);animation:sdTgt .9s ease-in-out infinite alternate}
.sd-c.co{animation:sdTgt .9s ease-in-out infinite alternate}
@keyframes sdTgt{from{box-shadow:inset 0 0 0 calc(var(--cs) * .05) rgba(245,180,0,.55)}to{box-shadow:inset 0 0 0 calc(var(--cs) * .1) rgba(245,180,0,1)}}
/* paused: the board is hidden, so the pause is not for peeking */
.sd-pause{position:absolute;left:var(--fr);top:var(--fr);width:calc(var(--n) * var(--cs));height:calc(var(--n) * var(--cs));z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:calc(var(--cs) * .22);cursor:pointer;color:var(--ink);font-family:var(--display);
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 55%),linear-gradient(160deg,var(--bg1),var(--bg3))}
.sd-pause[hidden]{display:none}
.sd-pause>span{display:grid;place-items:center;width:calc(var(--cs) * 1.5);height:calc(var(--cs) * 1.5);margin-bottom:8px;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--a2),var(--a1));box-shadow:0 10px 24px -8px var(--ag),inset 0 2px 0 rgba(255,255,255,.45)}
.sd-pause>span .ic{width:48%;height:48%;margin-left:6%}
.sd-pause b{font:800 calc(var(--cs) * .56)/1.1 var(--display)}
.sd-pause small{font:700 calc(var(--cs) * .3)/1.2 var(--display);color:var(--ink2)}
.sd-app.paused .sd-aside{pointer-events:none;opacity:.45}

/* the tools and the number pad */
.sd-aside{position:relative;flex:none;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:var(--aw)}
.sd-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.sd-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:8px 2px 7px;border:0;border-radius:16px;background:transparent;color:var(--ink);cursor:pointer;font:800 .66rem/1 var(--display);letter-spacing:.02em;-webkit-tap-highlight-color:transparent;transition:transform .12s,background-color .15s}
.sd-tool .ic{width:25px;height:25px}
.sd-tool span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.sd-tool:active{transform:scale(.92)}
.sd-tool:disabled{opacity:.4}
.sd-tool.on{background:var(--card);box-shadow:inset 0 0 0 2px var(--a1),0 4px 12px -6px var(--ag)}
.sd-tool.on span{color:var(--ad)}
.sd-tg{position:absolute;right:4%;top:0;padding:2px 6px;border-radius:99px;background:var(--card2);color:var(--ink2);font:800 .56rem/1.1 var(--display);font-style:normal;letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line)}
.sd-tool.on .sd-tg{background:var(--a1);color:#fff;box-shadow:none}
.sd-tool[data-a=hint] .ic{color:#f5b400}
.sd-tool.nudge{animation:sdNudge 1.2s ease-in-out infinite}
@keyframes sdNudge{0%,100%{transform:none}40%{transform:translateY(-4px) rotate(-3deg);background:rgba(var(--gold),.25)}70%{transform:translateY(0) rotate(3deg)}}
.sd-pad{display:grid;grid-template-columns:repeat(var(--n,9),1fr);gap:6px}
.sd-key{position:relative;display:grid;place-items:center;height:clamp(46px,7.2vh,62px);min-width:0;padding:0;border:0;border-radius:15px;background:var(--card);color:var(--enter);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:700 clamp(1.45rem,6.2vw,2rem)/1 var(--display);box-shadow:0 3px 0 var(--lip),inset 0 0 0 1.5px var(--line);transition:transform .1s,box-shadow .1s,background-color .15s,opacity .2s}
.sd-key b{font:inherit}
.sd-key small{position:absolute;right:6px;top:4px;font:800 .6rem/1 var(--display);color:var(--ink2);pointer-events:none}
.sd-key:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip),inset 0 0 0 1.5px var(--line)}
.sd-key.cur{background:color-mix(in srgb,rgb(var(--hl)) 22%,var(--card));box-shadow:0 3px 0 var(--lip),inset 0 0 0 2px var(--a1)}
.sd-key.done{opacity:.3;box-shadow:inset 0 0 0 1.5px var(--line)}
.sd-key.flash{animation:sdFlash .8s ease-out}
@keyframes sdFlash{0%{transform:scale(1)}25%{transform:scale(1.18);box-shadow:0 0 0 4px var(--a1),0 0 24px var(--ag)}100%{transform:scale(1)}}
.sd-pad.notes .sd-key{color:#a86d00;background:#fff8e1;font-size:clamp(1.05rem,4.4vw,1.4rem);box-shadow:0 3px 0 rgba(180,120,0,.22),inset 0 0 0 1.5px rgba(200,140,0,.28)}
.sd-app[data-theme=night] .sd-pad.notes .sd-key{color:#ffd36b;background:#4a4220;box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 0 0 1.5px rgba(255,211,107,.35)}
.sd-pad.notes .sd-key.done{opacity:.3}
@media (max-height:700px){.sd-key{height:44px}.sd-tool{padding:5px 2px 4px}.sd-tool .ic{width:22px;height:22px}.sd-aside{gap:5px}}
@media (max-height:620px){.sd-tool span{display:none}.sd-tool{padding:6px 2px}.sd-tg{top:0}}

/* the hint: it takes the place of the tools and the pad */
.sd-hint{position:absolute;left:0;right:0;bottom:0;z-index:5;min-height:100%;display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px;border-radius:22px;background:var(--card);color:var(--ink);text-align:left;
  box-shadow:0 0 0 2px rgba(var(--gold),.8),0 14px 30px -12px rgba(var(--shade),.55);animation:sdHint .3s cubic-bezier(.2,1.3,.4,1)}
.sd-hint[hidden]{display:none}
@keyframes sdHint{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.sd-hh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sd-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:99px;background:rgba(var(--gold),.26);color:#8a5a00;font:800 .8rem/1 var(--display);letter-spacing:.02em}
.sd-app[data-theme=night] .sd-chip{color:#ffd978}
.sd-chip .ic{width:16px;height:16px;color:#f5b400}
.sd-hx{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--card2);color:var(--ink2);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.sd-hx .ic{width:15px;height:15px}
.sd-hint p{margin:0;font:600 .92rem/1.38 var(--display);color:var(--ink)}
.sd-hb{display:flex;justify-content:flex-end;margin-top:auto}
.sd-hbtn{padding:11px 20px;border:0;border-radius:99px;cursor:pointer;color:#fff;font:800 .95rem/1 var(--display);text-shadow:0 1px 1px rgba(0,0,0,.14);background:linear-gradient(135deg,var(--a2),var(--a1));box-shadow:0 10px 20px -10px var(--ag),inset 0 1.5px 0 rgba(255,255,255,.45);transition:transform .12s}
.sd-hbtn:active{transform:scale(.96)}
.sd-app.hinting .sd-tools,.sd-app.hinting .sd-pad{visibility:hidden}

/* wide screens: the board on the left, the tools and the pad in a panel on the right */
.sd-stage.side{flex-direction:row;justify-content:center;gap:calc(var(--cs) * .7);padding-top:calc(4px + var(--mg,0px));padding-bottom:calc(6px + var(--mg,0px))}
.sd-stage.side .sd-aside{align-self:center;padding:16px 16px 18px;border-radius:30px;background:var(--panel);box-shadow:0 5px 0 var(--lip),inset 0 0 0 2px var(--panel-edge);gap:14px}
.sd-stage.side .sd-pad{grid-template-columns:repeat(3,1fr);gap:8px}
.sd-stage.side .sd-key{height:clamp(52px,8.4vh,72px);font-size:clamp(1.6rem,3.4vh,2.1rem)}
.sd-stage.side .sd-pad[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.sd-stage.side .sd-pad[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.sd-stage.side .sd-key small{right:8px;top:6px;font-size:.68rem}
.sd-stage.side .sd-tools{order:2;grid-template-columns:repeat(5,1fr)}
.sd-stage.side .sd-pad{order:1}
.sd-stage.side .sd-hint{border-radius:30px;padding:14px 16px 16px}
@media (min-width:821px){.sd-hud{width:100%;max-width:880px;margin-inline:auto}.sd-time,.sd-starm{padding-block:8px}}
.sd-app.sdside .sd-hud{max-width:calc(var(--bw) + var(--aw) + var(--cs) * .7)}
/* a phone on its side: the title makes room, and the clock, the level and the gems sit in the middle of the top bar */
@media (max-height:480px) and (min-width:560px){.sd-title{display:none}.sd-top{grid-template-columns:minmax(0,1fr) auto}.sd-hud{position:absolute;z-index:4;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:auto;max-width:none;padding:0}.sd-app.full .sd-hud{top:calc(8px + env(safe-area-inset-top,0px))}.sd-top{padding-bottom:0}.sd-key{height:clamp(40px,12vh,56px)}.sd-stage.side .sd-key{height:clamp(40px,12vh,56px)}.sd-stage.side .sd-aside{padding:12px 14px 14px;gap:10px}}

/* effects */
.sd-fx{position:absolute;inset:0;z-index:40;pointer-events:none}
.sd-sp{position:absolute;display:block;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.sd-rg{position:absolute;width:90px;height:90px;border-radius:50%;border:4px solid rgba(255,255,255,.95);box-shadow:0 0 22px rgba(255,255,255,.9),inset 0 0 18px rgba(255,255,255,.7)}
.sd-toast{position:absolute;left:50%;top:6px;z-index:45;width:max-content;max-width:92%;padding:11px 18px;border-radius:99px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;text-align:center;background:var(--ink);color:var(--card);box-shadow:0 12px 22px -10px rgba(var(--shade),.7);font:800 .9rem/1.25 var(--display);transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.sd-app[data-theme=night] .sd-toast{background:#fff;color:#12333d}
.sd-toast.on{opacity:1;transform:translate(-50%,0)}
.sd-cfl{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.sd-cf{position:absolute;top:0;border-radius:2px}
.sd-cf.c1{border-radius:50%}
.sd-cf.c2{border-radius:60% 0 60% 0}

/* the strip kept free for a wide banner (320x50 on phones, 728x90 on big screens) */
.sd-adslot{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:center;min-height:calc(54px + env(safe-area-inset-bottom,0px));padding:2px 0 env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.5);border-top:1px solid var(--line)}
.sd-app[data-theme=night] .sd-adslot{background:rgba(4,20,26,.4)}
.sd-adslot .ad{margin:0;padding:2px 0}
.sd-adslot .ad .lbl{color:var(--ink2);margin-bottom:2px}
.sd-adslot.prev::before{content:"Ad space \00b7  320 \00d7  50";font:800 .72rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:1px dashed var(--ink2);border-radius:10px;padding:14px 22px}
@media (min-width:821px){.sd-adslot{min-height:100px}.sd-adslot.prev::before{content:"Ad space \00b7  728 \00d7  90";padding:30px 60px}}
@media (max-height:640px){.sd-lvb b{font-size:1.1rem}.sd-top{padding-bottom:0}}

/* the few things the shared windows do not have: a switch in a row, the number of the puzzle in a row, the table of stats, the links under the end card */
.sd-row.cur{box-shadow:inset 0 0 0 2.5px var(--k-a1),0 0 22px -8px var(--k-ag)}
.sd-row .sd-no{flex:none;margin-left:auto;font:800 .74rem/1.25 var(--display);font-style:normal;text-align:right;color:var(--k-ink2);white-space:nowrap}
.sd-row .sd-no u{text-decoration:none;font-weight:700;opacity:.75}
.sd-sw{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:var(--k-line);box-shadow:inset 0 0 0 1.5px var(--k-line);transition:background-color .2s}
.sd-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.sd-sw.on{background:linear-gradient(135deg,var(--k-a2),var(--k-a1))}
.sd-sw.on::after{transform:translateX(18px)}
.sd-lst{display:grid;gap:6px;margin-top:6px;text-align:left}
.sd-ls{display:grid;grid-template-columns:30px minmax(0,1fr) 54px 54px 62px;align-items:center;gap:6px;padding:9px 12px;border-radius:18px;background:var(--k-soft);box-shadow:inset 0 0 0 1.5px var(--k-line);font:700 .88rem/1.1 var(--display);color:var(--k-ink)}
.sd-ls .ic{width:22px;height:22px;color:var(--k-a1)}
.sd-ls b{font-weight:800}
.sd-ls span{text-align:right;font-variant-numeric:tabular-nums}
.sd-ls.hd{background:none;box-shadow:none;padding-block:0;font:800 .6rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink2)}
.sd-lnk{display:flex;justify-content:center;gap:6px}
.sd-btn.sd-up{color:var(--k-ec);box-shadow:inset 0 0 0 1.5px rgba(var(--hl),.55);background:rgba(var(--hl),.12)}
.sd-card.f1 .sd-ls{padding-block:7px}
.sd-card.f2 .sd-row .sd-no u{display:none}