/* WortSpielen.de — Verbindungen (Connections auf Deutsch, verbindungen.js). Aus WordGames.club (wu.css .cn) mit dem Lavendel-Look */
.cn{max-width:640px;min-height:0;--cn1:#f5d76e;--cn2:#a5d98a;--cn3:#a8c8f0;--cn4:#c9a7e6;--cn-tile:#efe7d6;--cn-ink:#1d2433}
html.pdd-dark .cn{--cn1:#c9a93c;--cn2:#6fa255;--cn3:#5f86b8;--cn4:#8c6bb0;--cn-tile:#34322c;--cn-ink:#f3ece0}
.cn-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:4px auto 8px}
.cn select{font:inherit;font-weight:700;padding:8px 10px;border-radius:10px;border:1px solid var(--tb);background:var(--gbg);color:var(--gfg)}
.cn-btn{border:0;border-radius:999px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer;background:var(--w-acc,#d9532a);color:#fff}
.cn-btn.cn-ghost{background:var(--gbg);color:var(--gfg);border:1px solid var(--tb)}
.cn-btn.cn-go{background:var(--gfg);color:var(--gbg)}
.cn-btn:disabled{opacity:.4;cursor:default}
.cn-day{text-align:center;font-weight:700;color:var(--mut);font-size:14px}
.cn-help{text-align:center;margin:4px 0 2px;font-size:15px}
.cn-msg{min-height:32px;display:flex;align-items:center;justify-content:center;font-weight:800}
.cn-msg.ok,.cn-msg.bad,.cn-msg.old{padding:0 14px;border-radius:999px;width:max-content;margin:0 auto}
.cn-msg.ok{background:#e3f4e8;color:#1f7a45}.cn-msg.bad{background:#1d2433;color:#fff}.cn-msg.old{background:var(--kbg);color:var(--kfg)}
.cn-solved{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.cn-row{border-radius:12px;padding:12px 10px;text-align:center;color:#1d2433;animation:cn-in .3s}
.cn-row b{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.cn-row span{font-size:15px;font-weight:600;text-transform:uppercase}
.cn-row.l1{background:var(--cn1)}.cn-row.l2{background:var(--cn2)}.cn-row.l3{background:var(--cn3)}.cn-row.l4{background:var(--cn4)}
html.pdd-dark .cn-row{color:#fff}
.cn-row.missed{opacity:.75}
@keyframes cn-in{from{transform:scale(.96);opacity:.4}}
.cn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cn-w{aspect-ratio:1.55;border:0;border-radius:12px;background:var(--cn-tile);color:var(--cn-ink);font:inherit;font-weight:900;font-size:clamp(12px,3.4vw,18px);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;padding:4px;overflow-wrap:anywhere;line-height:1.1;transition:transform .1s,background .1s}
.cn-w.l{font-size:clamp(10px,2.9vw,16px)}.cn-w.xl{font-size:clamp(9px,2.4vw,13.5px)}
.cn-w:hover{filter:brightness(.97)}
.cn-w.on{background:#5a594e;color:#fff;transform:scale(.97)}
html.pdd-dark .cn-w.on{background:#f3ece0;color:#15130f}
.cn-w.shake{animation:cn-shake .4s}
@keyframes cn-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.cn-lives{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 8px;font-size:14.5px;color:var(--mut)}
.cn-lives i{width:13px;height:13px;border-radius:50%;background:var(--tb)}
.cn-lives i.on{background:#5a594e}
html.pdd-dark .cn-lives i.on{background:#f3ece0}
.cn-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cn-end{margin:16px auto 0;text-align:center;border-top:2px solid var(--line);padding-top:12px}
.cn-end h3{margin:0 0 8px;font-size:21px}
.cn-share{font-size:22px;line-height:1.15;margin:6px auto;font-family:inherit}
.cn-note{color:var(--mut);font-size:14px}
.cn-row2{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
@media (max-width:420px){.cn-grid{gap:6px}.cn-w{border-radius:9px}.cn-btn{padding:9px 14px}}
/* Lavendel (wie Connections auf WordGames.club) */
.pdd.cn{--gbg:#fbf9ff;--kbg:#e4dbf6;--tb:#cbbdea;--line:#dfd4f3;--mut:#5d4f7c;--w-acc:#7b55c7;--cn-tile:#e6ddf6;--cn-ink:#2a2140;background:linear-gradient(160deg,#f5f0ff,#ece4fb);border-radius:16px;padding:12px 10px 16px}
.pdd.cn .cn-w.on{background:#5b3fa0;color:#fff}
.pdd.cn .cn-lives i.on{background:#5b3fa0}
html.pdd-dark .pdd.cn{--gbg:#231d33;--gfg:#eee8fb;--kbg:#3a2f55;--kfg:#eee8fb;--tb:#54467a;--line:#342a4b;--mut:#c4b7e3;--cn-tile:#3a2f55;--cn-ink:#eee8fb;background:linear-gradient(160deg,#1f1a2d,#261f38)}
html.pdd-dark .pdd.cn .cn-w.on{background:#eee8fb;color:#231d33}
html.pdd-dark .pdd.cn .cn-lives i.on{background:#eee8fb}
.cn-grid:empty{min-height:250px}
.cn-w.xxl{font-size:clamp(8px,2.15vw,12.5px);letter-spacing:0;padding:2px}
@media (max-width:420px){.pdd.cn{padding:10px 6px 14px;border-radius:12px}}