/* WortSpielen.de — Kaskade (kaskade.js): the .cs rules of the WordGames.club wu.css (tools/ws_cascade_port.py).
   Change: text on the site accent uses --w-acc-ink (the accent is light green in dark mode). */
.cs{max-width:640px;min-height:0;--cs-acc:var(--w-acc,#d9532a);--cs-tile:#fff6e6;--cs-tileb:#e2d4b4;--cs-ink:#1d2433;--cs-bg:#efe7d6;--cs-g:5px}
html.pdd-dark .cs{--cs-tile:#34322c;--cs-tileb:#4b4638;--cs-ink:#f3ece0;--cs-bg:#23221f}
.cs-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:4px auto 8px}
.cs-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.cs-chip{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--kbg);color:var(--kfg);font-weight:700;font-size:14.5px;white-space:nowrap}
.cs-strong{background:var(--gfg);color:var(--gbg)}
.cs-dim{background:transparent;color:var(--mut);border:1px solid var(--line)}
.cs-warn{background:#e05252;color:#fff}
.cs-clock{font-variant-numeric:tabular-nums;font-weight:900;font-size:20px;min-width:62px;text-align:center;padding:3px 10px;border-radius:10px;background:var(--kbg);color:var(--kfg)}
.cs-clock.cs-low{background:#e05252;color:#fff}
.cs-btn{border:0;border-radius:999px;padding:10px 18px;font:inherit;font-weight:800;cursor:pointer;background:var(--cs-acc);color:var(--w-acc-ink,#fff);line-height:1.1}
.cs-btn:hover{filter:brightness(1.05)}
.cs-btn.cs-ghost{background:var(--gbg);color:var(--gfg);border:1px solid var(--tb)}
.cs-btn.cs-go{background:var(--gfg);color:var(--gbg)}
.cs-btn.cs-small{padding:7px 13px;font-size:14px}
.cs-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.cs-goals{display:flex;gap:10px;justify-content:center;margin:0 auto 8px}
.cs-goal{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--kbg);font-weight:900;font-size:17px}
.cs-goal i{width:24px;height:24px;border-radius:7px;background:var(--cs-c)}
.cs-goal.done{opacity:.55}
.cs-r{--cs-c:#e8665a}.cs-b{--cs-c:#5b8fd9}.cs-g{--cs-c:#5bb46e}.cs-y{--cs-c:#f0c043}
.cs-wrap{position:relative;width:min(100%,calc(var(--cols-w,58px) * 7));margin:0 auto}
.cs-attack .cs-wrap{width:min(100%,400px)}
.cs-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--cs-g);padding:var(--cs-g);border-radius:14px;overflow:hidden;background:var(--cs-bg);touch-action:none;transition:box-shadow .2s}
.cs-board.cs-danger{box-shadow:0 0 0 3px #e05252}
.cs-board.cs-paused .cs-t{filter:blur(5px)}
.cs-cell{position:relative;aspect-ratio:1;border-radius:9px}
.cs-attack .cs-cell{background:rgba(0,0,0,.035)}
.cs-lab{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;border-radius:9px}
.cs-dl{background:#9fd0ec}.cs-tl{background:#4f95d8}.cs-dw{background:#f1a9a0}.cs-tw{background:#d9532a}
.cs-t{position:absolute;inset:0;border-radius:9px;background:var(--cs-tile);box-shadow:inset 0 -4px 0 var(--cs-tileb),0 2px 4px rgba(0,0,0,.12);color:var(--cs-ink);display:grid;place-items:center;cursor:pointer;transition:transform .08s}
.cs-t b{font-size:clamp(17px,5.4vw,27px);font-weight:900;line-height:1}
.cs-t small{position:absolute;right:5px;bottom:5px;font-size:10.5px;font-weight:800;opacity:.65}
.cs-t em{position:absolute;left:2px;top:1px;font-style:normal;font-size:11px;font-weight:900;color:#fff;background:#c0392b;border-radius:6px;padding:0 3px;line-height:1.4}
.cs-t.cs-bomb{background:#ffd9d2;box-shadow:inset 0 -4px 0 #e0907f,0 0 0 2px #c0392b}
html.pdd-dark .cs-t.cs-bomb{background:#5a2a24}
.cs-t.cs-blank b{opacity:.5}
.cs-dl .cs-t,.cs-tl .cs-t,.cs-dw .cs-t,.cs-tw .cs-t{inset:4px}
.cs-t.cs-r,.cs-t.cs-b,.cs-t.cs-g,.cs-t.cs-y{background:var(--cs-c);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.cs-t.on{background:var(--cs-acc);color:var(--w-acc-ink,#fff);transform:scale(.94);box-shadow:none}
.cs-t.cs-r.on,.cs-t.cs-b.on,.cs-t.cs-g.on,.cs-t.cs-y.on{box-shadow:0 0 0 3px var(--gfg);transform:scale(.9)}
.cs-t.fall{animation:cs-fall .32s cubic-bezier(.3,.1,.6,1)}
@keyframes cs-fall{from{transform:translateY(calc(var(--fall) * -1 * (100% + var(--cs-g) + 8px)))}}
.cs-lines{position:absolute;inset:var(--cs-g);width:calc(100% - 2 * var(--cs-g));height:calc(100% - 2 * var(--cs-g));pointer-events:none}
.cs-lines polyline{fill:none;stroke:var(--cs-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.45;vector-effect:non-scaling-stroke;stroke-width:9px}
.cs-spawn{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--cs-g);padding:0 var(--cs-g);width:min(100%,400px);margin:0 auto}
.cs-sc{position:relative;aspect-ratio:1}
.cs-spawn .cs-t{opacity:.9;animation:cs-bob 1s ease-in-out infinite alternate}
@keyframes cs-bob{to{transform:translateY(4px)}}
.cs-fuse{width:min(100%,400px);height:5px;margin:4px auto 6px;border-radius:9px;background:var(--kbg);overflow:hidden}
.cs-fuse i{display:block;height:100%;background:var(--cs-acc);animation:cs-fuse linear forwards}
@keyframes cs-fuse{from{width:100%}to{width:0}}
.cs-word{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin-top:8px}
.cs-cur{display:inline-block;padding:6px 16px;border-radius:12px;background:var(--kbg);color:var(--kfg);font-weight:900;font-size:24px;letter-spacing:.06em}
.cs-cur.ok{background:#2f9e5b;color:#fff}
.cs-pts{font-weight:900;color:#2f9e5b;font-size:18px}
.cs-msg{min-height:32px;display:flex;align-items:center;justify-content:center;font-weight:800;text-align:center}
.cs-msg.ok,.cs-msg.bad,.cs-msg.old,.cs-msg.big{padding:4px 14px;border-radius:999px;width:max-content;max-width:100%;margin:0 auto}
.cs-msg.ok{background:#e3f4e8;color:#1f7a45}.cs-msg.bad{background:#1d2433;color:#fff}.cs-msg.old{background:var(--kbg);color:var(--kfg)}
.cs-msg.big{background:var(--cs-acc);color:#fff}
.cs-log{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px auto;max-width:560px;min-height:10px}
.cs-lw{font-size:13px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--kbg);color:var(--kfg)}
.cs-lw.long{background:#e3f4e8;color:#1f7a45}
.cs-help{text-align:center;color:var(--mut);font-size:14px;margin:6px auto 0;max-width:500px}
.cs-note{color:var(--mut);font-size:14.5px;margin:6px 0}
.cs-end{margin:14px auto 0;text-align:center;border-top:2px solid var(--line);padding-top:12px}
.cs-end h3{margin:0 0 6px;font-size:21px}
.cs-shake{animation:cs-shake .4s}
@keyframes cs-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (max-width:420px){.cs{--cs-g:4px}.cs-t small{font-size:9px;right:3px;bottom:3px}.cs-cur{font-size:20px}.cs-lab{font-size:11px}}
.cs-legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:8px auto 0;max-width:520px;font-size:13px;color:var(--mut);font-weight:700}
.cs-legend span{display:inline-flex;align-items:center;gap:5px}
.cs-legend i{width:14px;height:14px;border-radius:4px}

