/*! wørdle.net — Sudoku. Colours come only from the site's --wd-* variables, so html.wd-dark works by itself.
   Mount: <div class="wd-mount" data-wd-sudoku='{"epoch":"2026-09-25"}'></div> + /games/da/sudoku.js */
.wd-su{container-type:inline-size;container-name:wd-su;box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;color:var(--wd-text);font-family:var(--wd-font);line-height:1.4;-webkit-tap-highlight-color:transparent}
.wd-su *,.wd-su *::before,.wd-su *::after{box-sizing:border-box}
.wd-su [hidden]{display:none!important}
.wd-su button{font-family:inherit;color:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.wd-su button:focus-visible,.wd-su input:focus-visible{outline:3px solid var(--wd-red);outline-offset:2px}

/* ---------- top: mode, help, level, statistics ---------- */
.wd-su-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 auto 10px;max-width:480px}
.wd-su-seg{display:flex;background:var(--wd-key);border-radius:var(--wd-radius);padding:3px;gap:2px;min-width:0}
.wd-su-modes{flex:1 1 100%}
.wd-su-bar2{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
.wd-su-lvs{flex:1 1 auto}
.wd-su-modes .wd-su-sb,.wd-su-lvs .wd-su-sb{flex:1 1 0}
.wd-su-sb{border:0;background:transparent;min-height:40px;min-width:0;padding:0 12px;border-radius:calc(var(--wd-radius) - 3px);font-weight:700;font-size:14.5px;line-height:1.1;cursor:pointer;white-space:nowrap;color:var(--wd-muted)}
.wd-su-sb.on{background:var(--wd-bg);color:var(--wd-text);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.wd-su-ib{flex:none;width:42px;height:42px;border:0;border-radius:var(--wd-radius);background:transparent;display:grid;place-items:center;font-size:20px;font-weight:800;line-height:1;cursor:pointer;padding:0}
.wd-su-ib{border:2px solid var(--wd-line)}

/* ---------- board ---------- */
.wd-su-main{display:flex;flex-direction:column}
.wd-su-bcol,.wd-su-side{width:100%;max-width:480px;margin:0 auto}
.wd-su-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;margin:0 0 8px}
.wd-su-hl{display:flex;align-items:center;min-width:0}
.wd-su-day{font-weight:800;font-size:15.5px;white-space:nowrap}
.wd-su-time{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.wd-su-tl{color:var(--wd-muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.wd-su-clock{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.wd-su-new{min-height:40px;padding:0 16px}

.wd-su-board{container-type:inline-size;display:flex;flex-direction:column;width:100%;max-width:480px;aspect-ratio:1/1;margin:0 auto;border:2px solid var(--wd-text);border-radius:var(--wd-radius);overflow:hidden;background:var(--wd-bg);-webkit-user-select:none;user-select:none;touch-action:manipulation}
.wd-su-row{flex:1 1 0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));min-height:0}
.wd-su-c{position:relative;display:grid;place-items:center;min-width:0;min-height:0;background:var(--wd-bg);border-right:1px solid var(--wd-line);border-bottom:1px solid var(--wd-line);cursor:pointer;outline:none;transition:background-color .12s}
.wd-su-c.bR{border-right:2px solid var(--wd-text)}
.wd-su-c.bB{border-bottom:2px solid var(--wd-text)}
.wd-su-c:last-child{border-right:0}
.wd-su-row:last-child .wd-su-c{border-bottom:0}
.wd-su-v{font-size:24px;font-size:6.4cqi;font-weight:600;line-height:1;color:var(--wd-muted);color:color-mix(in srgb,var(--wd-muted) 72%,var(--wd-text))}
.wd-su-c.giv .wd-su-v{color:var(--wd-text);font-weight:800}
.wd-su-c.hint .wd-su-v{color:var(--wd-yellow);color:color-mix(in srgb,var(--wd-yellow) 78%,var(--wd-text))}
.wd-su-n{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.wd-su-n i{display:grid;place-items:center;font-style:normal;font-size:9px;font-size:max(8.5px,2.4cqi);font-weight:700;line-height:1;color:var(--wd-muted)}
.wd-su-n i.on{color:var(--wd-red);font-weight:900}
/* the row, column and box of the selected cell, the same digit, the selected cell */
.wd-su-c.peer{background:var(--wd-key);background:color-mix(in srgb,var(--wd-key) 88%,var(--wd-bg))}
.wd-su-c.same{background:rgba(91,97,110,.3);background:color-mix(in srgb,var(--wd-muted) 30%,var(--wd-bg))}
.wd-su-c.sel{background:rgba(200,16,46,.22);background:color-mix(in srgb,var(--wd-red) 24%,var(--wd-bg))}
.wd-su-c:focus-visible{box-shadow:inset 0 0 0 3px var(--wd-red)}
.wd-su-c.err .wd-su-v{color:var(--wd-red)}
.wd-su-c.bad{background:rgba(200,16,46,.3);background:color-mix(in srgb,var(--wd-red) 32%,var(--wd-bg));animation:wd-su-shake .3s}
.wd-su-c.bad .wd-su-v{color:var(--wd-red)}
@keyframes wd-su-shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.wd-su-won .wd-su-board{border-color:var(--wd-green)}
.wd-su-over .wd-su-c{cursor:default}

/* ---------- tools, number pad ---------- */
.wd-su-ctl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 6px}
.wd-su-tb{position:relative;border:0;background:transparent;border-radius:var(--wd-radius);min-height:54px;min-width:0;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12.5px;font-weight:700;line-height:1.1;cursor:pointer;color:var(--wd-text)}
.wd-su-tb svg{width:22px;height:22px;flex:none}
.wd-su-tb:disabled{opacity:.4;cursor:default;background:transparent}
.wd-su-tb.on{color:var(--wd-red)}
.wd-su-badge{position:absolute;top:3px;left:calc(50% + 8px);padding:1px 5px;border-radius:999px;background:var(--wd-key);color:var(--wd-muted);font-size:9.5px;font-weight:800;line-height:1.3}
.wd-su-tb.on .wd-su-badge{background:var(--wd-red);color:#fff}
.wd-su-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:0}
.wd-su-key{border:0;border-radius:var(--wd-radius);background:var(--wd-key);color:var(--wd-text);min-height:56px;min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:opacity .15s,transform .05s}
.wd-su-key b{font-size:25px;font-weight:800;line-height:1}
.wd-su-key small{min-height:11px;font-size:11px;font-weight:700;line-height:1;color:var(--wd-muted)}
.wd-su-key:active{transform:translateY(1px)}
.wd-su-key.full{opacity:.35}
.wd-su-pad.notes .wd-su-key b{font-size:17px;font-weight:700;color:var(--wd-muted)}
.wd-su-msg{min-height:1.45em;margin:8px 0;text-align:center;font-size:14.5px;font-weight:600;color:var(--wd-muted)}
.wd-su-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wd-su-btn{border:0;border-radius:var(--wd-radius);background:var(--wd-key);color:var(--wd-text);min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14.5px;line-height:1.1;white-space:nowrap;cursor:pointer;text-decoration:none}
.wd-su-btn:disabled{opacity:.45;cursor:default}
.wd-su-btn.wd-su-primary{background:var(--wd-red);color:#fff}
.wd-su-confirm{margin:10px 0 0;padding:12px 14px;border:1px solid var(--wd-line);border-radius:var(--wd-radius);background:var(--wd-soft);text-align:center}
.wd-su-confirm p{margin:0 0 10px;font-weight:700}
.wd-su-confirm div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wd-su-opt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:6px 0 0;font-size:14.5px;font-weight:700;color:var(--wd-muted);cursor:pointer}
.wd-su-opt input{width:20px;height:20px;margin:0;accent-color:var(--wd-red);cursor:pointer}

/* ---------- solved ---------- */
.wd-su-end{margin:10px 0 12px;padding:16px 14px;border:1px solid var(--wd-line);border-radius:var(--wd-radius);background:var(--wd-soft);text-align:center}
.wd-su-end h3{margin:0 0 2px;font-size:24px;line-height:1.2;color:var(--wd-green)}
.wd-su-end.gave h3{color:var(--wd-text);font-size:20px}
.wd-su-end p{margin:0 0 12px;font-weight:700}
.wd-su-end h4{margin:0 0 6px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--wd-muted)}
.wd-su-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.wd-su-stat{padding:8px 4px;border-radius:var(--wd-radius);background:var(--wd-bg)}
.wd-su-stat b{display:block;font-size:21px;font-variant-numeric:tabular-nums;line-height:1.2}
.wd-su-stat span{display:block;font-size:12px;font-weight:700;line-height:1.25;color:var(--wd-muted)}
.wd-su-endbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wd-su-over .wd-su-ctl,.wd-su-over .wd-su-pad,.wd-su-over .wd-su-msg,.wd-su-over .wd-su-live,.wd-su-over .wd-su-opt{display:none}

/* ---------- dialog, toast (outside .wd-su) ---------- */
.wd-su-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(10,12,16,.5)}
.wd-su-ov[hidden]{display:none}
.wd-su-modal{outline:none;position:relative;box-sizing:border-box;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;padding:22px 22px 18px;border-radius:calc(var(--wd-radius) * 1.6);background:var(--wd-bg);color:var(--wd-text);font-family:var(--wd-font);font-size:15.5px;line-height:1.5;text-align:left;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.wd-su-mh{margin:0 40px 10px 0;font-size:21px;line-height:1.25}
.wd-su-x{position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:var(--wd-radius);background:transparent;color:var(--wd-text);font-family:inherit;font-size:28px;line-height:1;cursor:pointer}
.wd-su-modal button:focus-visible{outline:3px solid var(--wd-red);outline-offset:2px}
.wd-su-mb p{margin:0 0 8px}
.wd-su-mb ul{margin:4px 0 12px;padding-left:20px}
.wd-su-mb li{margin:4px 0}
.wd-su-mb h3{margin:14px 0 2px;font-size:16px}
.wd-su-mfoot{display:flex;justify-content:flex-end;margin-top:12px}
.wd-su-mfoot .wd-su-btn,.wd-su-modal .wd-su-btn{font-family:inherit}
.wd-su-stt{width:100%;border-collapse:collapse;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.wd-su-stt th,.wd-su-stt td{padding:8px 6px;border-bottom:1px solid var(--wd-line);text-align:center}
.wd-su-stt thead th{font-size:12.5px;color:var(--wd-muted)}
.wd-su-stt tbody th{text-align:left}
.wd-su-note{font-size:13.5px;color:var(--wd-muted)}
.wd-su-toast{position:fixed;left:50%;top:72px;z-index:1100;max-width:92%;padding:10px 16px;border-radius:var(--wd-radius);background:var(--wd-text);color:var(--wd-bg);font-weight:700;font-size:15px;text-align:center;white-space:pre-line;opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .2s,transform .2s}
.wd-su-toast.show{opacity:1;transform:translate(-50%,0)}

/* hover only where a mouse can hover (no sticky colours after a tap) */
@media (hover:hover){
  .wd-su-sb:hover{color:var(--wd-text)}
  .wd-su-ib:hover{background:var(--wd-soft)}
  .wd-su-tb:hover:not(:disabled){background:var(--wd-soft)}
  .wd-su-key:hover:not(:disabled){background:color-mix(in srgb,var(--wd-key) 82%,var(--wd-text))}
  .wd-su-btn:hover:not(:disabled){background:color-mix(in srgb,var(--wd-key) 82%,var(--wd-text))}
  .wd-su-btn.wd-su-primary:hover{background:color-mix(in srgb,var(--wd-red) 86%,#000)}
  .wd-su-x:hover{background:var(--wd-soft)}
}

/* ---------- sizes ---------- */
@container wd-su (max-width:400px){
  .wd-su-sb{padding:0 6px;font-size:13.5px}
  .wd-su-pad{gap:3px}
  .wd-su-key b{font-size:22px}
  .wd-su-ctl{gap:2px}
  .wd-su-tb{font-size:12px}
  .wd-su-tools{gap:6px}
  .wd-su-btn{padding:0 12px;font-size:14px}
}
@container wd-su (max-width:340px){
  .wd-su-tools{display:grid;grid-template-columns:1fr 1fr}
}
@container wd-su (min-width:640px){
  .wd-su-bar{max-width:none}
  .wd-su-bar2{display:contents}
  .wd-su-help{order:0}
  .wd-su-modes{order:1;flex:0 1 auto}
  .wd-su-lvs{order:2;flex:0 1 auto}
  .wd-su-sti{order:3}
  .wd-su-modes .wd-su-sb,.wd-su-lvs .wd-su-sb{flex:none;padding:0 16px}
}
/* desktop: the board on the left, the tools and a 3 × 3 number pad on the right */
@container wd-su (min-width:780px){
  .wd-su-main{display:grid;grid-template-columns:minmax(0,480px) 280px;column-gap:32px;justify-content:center;align-items:start}
  .wd-su-bcol,.wd-su-side{max-width:none;margin:0}
  .wd-su-side{padding-top:50px}
  .wd-su-end{margin-top:0}
  .wd-su-ctl{margin-top:0}
  .wd-su-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .wd-su-key{min-height:70px}
  .wd-su-key b{font-size:30px}
  .wd-su-pad.notes .wd-su-key b{font-size:20px}
  .wd-su-msg{min-height:2.9em}
  .wd-su-tools{display:grid;grid-template-columns:1fr 1fr}
}

/* printing the page itself (the Print button opens its own sheet) */
@media print{
  .wd-su-bar,.wd-su-side,.wd-su-toast{display:none!important}
  .wd-su-c.sel,.wd-su-c.peer,.wd-su-c.same{background:none}
}
@media (prefers-reduced-motion:reduce){
  .wd-su-c,.wd-su-key,.wd-su-toast{transition:none}
  .wd-su-c.bad{animation:none}
}