/*! wørdle.net — Grupper (Connections på dansk). Colours come only from the site's --wd-* variables (+ the four group colours below),
   so html.wd-dark works by itself. Mount: <div class="wd-mount" data-wd-conn='{"epoch":"2026-09-29"}'></div> + /games/da/grupper.js */
.wd-cn{
  --wd-cn-1:#f1d46b;--wd-cn-2:#9fd29a;--wd-cn-3:#a9c8ef;--wd-cn-4:#c7a9e4;--wd-cn-ink:var(--wd-text);--wd-cn-white:#fff;--wd-cn-shade:#000;--wd-cn-shadow:rgba(0,0,0,.16);
  --wd-cn-gap:6px;--wd-cn-pad:2px;--wd-cn-ar:1.55;
  container-type:inline-size;container-name:wd-cn;box-sizing:border-box;width:100%;max-width:620px;margin:0 auto;
  color:var(--wd-text);font-family:var(--wd-font);line-height:1.4;-webkit-tap-highlight-color:transparent}
html.wd-dark .wd-cn{--wd-cn-1:#8a6a0a;--wd-cn-2:#3f7a45;--wd-cn-3:#3a6a9e;--wd-cn-4:#6c4b94;--wd-cn-ink:var(--wd-cn-white)}
.wd-cn *,.wd-cn *::before,.wd-cn *::after{box-sizing:border-box}
.wd-cn [hidden]{display:none!important}
.wd-cn button{font-family:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.wd-cn button:focus-visible{outline:3px solid var(--wd-red);outline-offset:2px}
.wd-cn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- top: mode, title, help, message ---------- */
.wd-cn-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 auto 10px}
.wd-cn-seg{display:flex;background:var(--wd-key);border-radius:var(--wd-radius);padding:3px;gap:2px;min-width:0}
.wd-cn-sb{border:0;background:transparent;min-height:40px;min-width:0;padding:0 16px;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-cn-sb.wd-cn-on{background:var(--wd-bg);color:var(--wd-text);box-shadow:0 1px 3px var(--wd-cn-shadow)}
.wd-cn-day{min-height:22px;text-align:center;font-weight:800;font-size:15.5px}
.wd-cn-help{margin:2px 0 0;text-align:center;font-size:14.5px;color:var(--wd-muted)}
.wd-cn-msg{display:flex;align-items:center;justify-content:center;min-height:38px;margin:2px 0 4px;text-align:center}
.wd-cn-msg span{max-width:100%;padding:4px 14px;border-radius:999px;font-weight:800;font-size:15px;line-height:1.3}
.wd-cn-msg.wd-cn-ok span{background:var(--wd-green-t);color:var(--wd-text)}
.wd-cn-msg.wd-cn-bad span{background:var(--wd-red-t);color:var(--wd-red-d)}
.wd-cn-msg.wd-cn-old span{background:var(--wd-key);color:var(--wd-text)}

/* ---------- solved groups ---------- */
.wd-cn-solved{display:flex;flex-direction:column;gap:var(--wd-cn-gap)}
.wd-cn-solved:not(:empty){margin-bottom:var(--wd-cn-gap)}
.wd-cn-row{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;min-height:max(52px,calc((100cqi - 3 * var(--wd-cn-gap)) / 4 / var(--wd-cn-ar)));padding:6px 10px;border-radius:12px;text-align:center;color:var(--wd-cn-ink);line-height:1.3;animation:wd-cn-in .3s}
.wd-cn-row b{display:block;font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.wd-cn-row span{display:block;font-weight:700;font-size:14.5px;text-transform:uppercase}
.wd-cn-row.wd-cn-l1{background:var(--wd-cn-1)}
.wd-cn-row.wd-cn-l2{background:var(--wd-cn-2)}
.wd-cn-row.wd-cn-l3{background:var(--wd-cn-3)}
.wd-cn-row.wd-cn-l4{background:var(--wd-cn-4)}
.wd-cn-row.wd-cn-missed{opacity:.8}

/* ---------- tiles ---------- */
/* One line per word: the font size is the tile's inner width divided by the widest word of its class in Nunito 900
   (≤ 7 letters 5.85 em, 8–9 letters 7.3 em, 10–11 letters 8.6 em, a little more than the widest words measured). */
.wd-cn-grid{container-type:inline-size;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wd-cn-gap)}
.wd-cn-w{--wd-cn-r:5.85;display:block;min-width:0;aspect-ratio:var(--wd-cn-ar);margin:0;padding:0 var(--wd-cn-pad);border:0;border-radius:12px;
  background:var(--wd-key);color:var(--wd-text);font-weight:900;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere;cursor:pointer;
  font-size:min(19px,calc(((100vw - 32px - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)));
  font-size:min(19px,calc(((100cqi - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)));
  transition:background-color .1s,color .1s,transform .1s;-webkit-user-select:none;user-select:none}
.wd-cn-w.wd-cn-l{--wd-cn-r:7.3;letter-spacing:0;font-size:min(17px,calc(((100vw - 32px - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)));font-size:min(17px,calc(((100cqi - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)))}
.wd-cn-w.wd-cn-xl{--wd-cn-r:8.6;letter-spacing:0;font-size:min(15px,calc(((100vw - 32px - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)));font-size:min(15px,calc(((100cqi - 3 * var(--wd-cn-gap)) / 4 - 2 * var(--wd-cn-pad)) / var(--wd-cn-r)))}
.wd-cn-w.wd-cn-on{background:var(--wd-text);color:var(--wd-bg);transform:scale(.97)}
.wd-cn-w.wd-cn-ph{cursor:default}
/* no min-height next to aspect-ratio: it would turn into a min-width through the ratio (overflow at 320 px) */
@supports not (aspect-ratio:1/1){.wd-cn-w{min-height:52px}}
.wd-cn-w.wd-cn-shake{animation:wd-cn-shake .4s}

/* ---------- mistakes, buttons ---------- */
.wd-cn-lives{display:flex;align-items:center;justify-content:center;gap:7px;min-height:24px;margin:12px 0 10px;font-size:14.5px;font-weight:700;color:var(--wd-muted)}
.wd-cn-lives i{width:13px;height:13px;border-radius:50%;border:2px solid var(--wd-muted);opacity:.45}
.wd-cn-lives i.wd-cn-on{background:var(--wd-text);border-color:var(--wd-text);opacity:1}
.wd-cn-btns,.wd-cn-endbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wd-cn-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;font-weight:700;font-size:14.5px;line-height:1.1;white-space:nowrap;cursor:pointer}
.wd-cn-btn:disabled{opacity:.45;cursor:default}
.wd-cn-btn.wd-cn-primary{background:var(--wd-red);color:var(--wd-cn-white)}

/* ---------- end ---------- */
.wd-cn-end{margin:12px 0 0;padding:16px 14px;border:1px solid var(--wd-line);border-radius:var(--wd-radius);background:var(--wd-soft);text-align:center}
.wd-cn-end h3{margin:0 0 4px;font-size:22px;font-weight:900;line-height:1.2}
.wd-cn-end.wd-cn-won h3{color:var(--wd-green)}
.wd-cn-share{margin:6px auto 8px;font-family:inherit;font-size:22px;line-height:1.15;white-space:pre}
.wd-cn-note{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--wd-muted)}
.wd-cn-over .wd-cn-grid,.wd-cn-over .wd-cn-btns{display:none}

/* hover only where a mouse can hover (no sticky colours after a tap) */
@media (hover:hover){
  .wd-cn-sb:hover{color:var(--wd-text)}
  .wd-cn-w:not(.wd-cn-on):not(.wd-cn-ph):hover{background:color-mix(in srgb,var(--wd-key) 88%,var(--wd-text))}
  .wd-cn-btn:hover:not(:disabled){background:color-mix(in srgb,var(--wd-key) 82%,var(--wd-text))}
  .wd-cn-btn.wd-cn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--wd-red) 86%,var(--wd-cn-shade))}
}

/* ---------- sizes ---------- */
@container wd-cn (min-width:480px){
  .wd-cn-grid,.wd-cn-solved{--wd-cn-gap:8px;--wd-cn-pad:4px;--wd-cn-ar:1.9}
  .wd-cn-row{padding:8px 12px}
  .wd-cn-row b,.wd-cn-row span{font-size:16px}
}
@container wd-cn (max-width:340px){
  .wd-cn-sb{padding:0 10px;font-size:13.5px}
  .wd-cn-btn{padding:0 12px;font-size:14px}
}
@keyframes wd-cn-in{from{transform:scale(.96);opacity:.4}}
@keyframes wd-cn-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  .wd-cn-w,.wd-cn-row{transition:none;animation:none}
  .wd-cn-w.wd-cn-shake{animation:none}
}