/* Modernes Design in Olives/BWY-Farben. Greift nur mit .cs-root.cs-modern (Schalter im Spiel-Template).
 * Retro (spiele.css) bleibt unverändert darunter: Rollback = Schalter im Template auf 'retro'.
 * Farben wie auf /breathless-without-you/: Navy #253D48, Petrol #49757A, Salbei #4C6463, Grund #EBECE9, Creme #EDEBDC, Gold #c8ab6a. */
.cs-root.cs-modern{--nv:#253D48;--pt:#49757A;--sg:#4C6463;--bg:#EBECE9;--cr:#EDEBDC;--gd:#c8ab6a;--ln:#d9dedb;
 background:var(--bg);padding:8px 16px 56px;color:var(--nv);font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45}
.cs-modern .cs-window{width:100%;max-width:460px;background:#fff;border:0;border-radius:18px;box-shadow:0 10px 30px rgba(11,37,54,.10);padding:18px 16px 16px}
.cs-modern .cs-window.cs-wide{width:100%;max-width:460px}
@media(min-width:700px){.cs-modern .cs-window,.cs-modern .cs-window.cs-wide{max-width:480px}}
.cs-modern .cs-titlebar{background:none;color:var(--nv);padding:0 0 10px;min-height:0;border-bottom:1px solid var(--ln);margin-bottom:12px;justify-content:center}
.cs-modern .cs-titlebar>svg{display:none}
.cs-modern .cs-titlebar h1,.cs-modern .cs-titlebar h2{font-family:"League Gothic","Oswald",sans-serif;font-weight:400;font-size:24px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;color:var(--nv);white-space:normal;text-align:center}
.cs-modern button,.cs-modern select,.cs-modern summary{font-family:inherit}
.cs-root.cs-modern button:not(.sd-cell,.kw-cell,.sd-pick,.kw-q,.nk-key){border:1.5px solid var(--nv);border-radius:999px;background:#fff;color:var(--nv);box-shadow:none;transition:background .15s,color .15s,border-color .15s}
.cs-root.cs-modern button:not(.sd-cell,.kw-cell,.sd-pick,.kw-q,.nk-key):active,.cs-root.cs-modern button:not(.sd-cell,.kw-cell,.sd-pick,.kw-q,.nk-key)[aria-pressed=true]{background:var(--nv);color:#fff;border-color:var(--nv)}
.cs-root.cs-modern button:not(.sd-cell,.kw-cell,.sd-pick,.kw-q,.nk-key):disabled{opacity:.4;text-shadow:none;color:var(--nv)}
.cs-modern button:focus-visible,.cs-modern select:focus-visible,.cs-modern summary:focus-visible,.cs-modern a:focus-visible{outline:2px solid var(--gd);outline-offset:2px}
/* Menüleiste: Level als Pille, Hilfe als Textlink */
.cs-modern .cs-menubar{padding:0 0 12px;gap:8px;flex-wrap:wrap;justify-content:center}
.cs-modern .cs-menubar>label[for]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cs-root.cs-modern .cs-menubar select{width:auto;border:1.5px solid var(--nv);border-radius:999px;background:#fff;color:var(--nv);padding:6px 14px;font-size:13px;font-weight:600}
.cs-modern .cs-help{margin-left:0}
.cs-modern .cs-help summary{padding:6px 12px;font-size:13px;font-weight:600;color:var(--pt);text-decoration:underline;text-underline-offset:3px}
.cs-modern .cs-help summary u{text-decoration:none}
.cs-modern .cs-help[open] summary{background:none;color:var(--nv)}
.cs-modern .cs-help>div{border:0;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgba(11,37,54,.18);top:40px;right:50%;transform:translateX(50%);color:var(--nv)}
.cs-modern .cs-help p{color:var(--nv)}
.cs-modern .sd-numtoggle{font-size:13px;color:var(--nv)}
.cs-modern .sd-numtoggle input{accent-color:var(--pt)}
/* Anzeige: Zahlen statt roter Digitalanzeige, Neues-Spiel-Pille statt Smiley */
.cs-modern .cs-game{padding:0}
.cs-modern .cs-scoreboard{border:0;padding:0;height:auto;margin-bottom:12px;gap:10px}
.cs-root.cs-modern .cs-digits{background:var(--cr);border:0;border-radius:12px;width:auto;min-width:84px;height:auto;padding:6px 12px;display:flex;flex-direction:column;align-items:center;gap:0}
.cs-modern .cs-digits::before{content:attr(data-short);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sg);font-weight:600}
.cs-modern .cs-mval{font-family:"League Gothic","Oswald",sans-serif;font-size:24px;line-height:1.05;color:var(--nv);letter-spacing:.04em}
.cs-root.cs-modern button.cs-face{width:auto;height:auto;padding:9px 16px;box-shadow:none;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--pt);border-color:var(--pt);color:#fff}
.cs-modern .cs-face svg{display:none}
.cs-modern .cs-face::after{content:"Neues Spiel"}
.cs-modern .cs-status{border:0;padding:8px 2px 0;font-size:13px;color:var(--sg);min-height:2.9em;line-height:1.45}
.cs-modern .cs-mode{gap:8px;margin-top:12px}
.cs-root.cs-modern .cs-mode button{min-height:38px;font-size:13px;font-weight:600}
/* Fenster unter dem Spiel */
.cs-modern .cs-panel{margin-top:18px}
.cs-modern .cs-panel-body{padding:0;font-size:14px}
.cs-modern .cs-panel-body p{font-size:14px;color:var(--nv)}
.cs-modern .cs-panel-body strong{color:var(--pt)}
.cs-modern .cs-actions{gap:8px}
.cs-root.cs-modern .cs-btn,.cs-root.cs-modern button.cs-btn{border:1.5px solid var(--nv);border-radius:999px;background:#fff;color:var(--nv);box-shadow:none;padding:11px 16px;min-height:44px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cs-root.cs-modern .cs-btn-primary,.cs-root.cs-modern button.cs-btn-primary{background:var(--pt);border-color:var(--pt);color:#fff;outline:0}
.cs-modern .cs-stats th,.cs-modern .cs-stats td{border:0;border-bottom:1px solid var(--ln);background:#fff;padding:8px 6px;font-size:13px;color:var(--nv)}
.cs-modern .cs-stats thead th{background:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sg)}
.cs-modern .cs-hint{font-size:13px;color:var(--sg)}
.cs-modern .cs-dialog .cs-window{max-width:360px}
.cs-modern .cs-dialog .cs-titlebar{justify-content:space-between}
.cs-root.cs-modern .cs-close{width:32px;height:32px;padding:0;font-size:16px;line-height:1}
.cs-modern .cs-preview{border:0;border-radius:12px;background:var(--bg)}
@media(max-width:420px){.cs-root.cs-modern{padding-left:8px;padding-right:8px}.cs-modern .cs-window{padding:14px 10px 14px}}
.cs-modern>.cs-window:not(.cs-panel)>.cs-titlebar{display:none}