/* DeepSquare-News sign-up dialog after the third solved puzzle (newsletter 2026-09-25) */
.nl-dialog [hidden]{display:none!important}
.nl-dialog .nl-label{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px}
.nl-dialog input[type=email]{width:100%;min-height:40px;padding:8px 11px;border-radius:8px;border:1px solid #354355;background:#0b1320;color:var(--text);font:inherit;font-size:13px}
.nl-dialog .nl-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0 14px;font-size:11.5px;line-height:1.5;color:#bdc8d8}
.nl-dialog .nl-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--mint)}
.nl-dialog .nl-msg{margin:10px 0 0;font-size:12px;color:var(--mint)}
.nl-dialog .nl-msg[data-nl-state=error]{color:var(--error)}
.nl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Growth 2026-09-26: tester framing in the dialog, persistent footer link, feedback widget */
.site-footer .nl-footer-link{color:var(--mint)}
.fb[hidden]{display:none}
.fb .fb-q,.fb .fb-note,.fb .fb-msg{margin:0}
.fb .fb-stars{display:inline-flex;gap:1px}
.fb .fb-star{padding:0;border:0;border-radius:6px;background:none;color:var(--muted);line-height:1;cursor:pointer}
.fb .fb-stars:hover .fb-star,.fb .fb-star.is-on{color:var(--mint)}
.fb .fb-stars .fb-star:hover~.fb-star{color:var(--muted)}
.fb .fb-star:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.fb .fb-star:disabled{cursor:default;opacity:.7}
.fb .fb-note a,.fb .fb-msg a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fb .fb-text{border:1px solid #354355;border-radius:7px;background:#0b1320;color:var(--text);font:inherit}
.fb .fb-send{border:1px solid #acd6c1;border-radius:7px;background:#abd5be;color:#15241d;font:inherit;font-weight:600;cursor:pointer}
.fb .fb-send:disabled{opacity:.55;cursor:default}
.fb .fb-msg{color:var(--mint)}
.fb .fb-msg:empty{display:none}
.fb[data-fb-state=fail] .fb-msg{color:var(--error)}
/* footer (wide screens): one calm line between © and the links. flex-basis 0 means it never wraps the footer
   (the row keeps its height); the question shortens with an ellipsis if space is tight. */
.site-footer .fb-footer{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;font-size:inherit}
.site-footer .fb-footer .fb-q{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-footer .fb-footer .fb-stars,.site-footer .fb-footer .fb-send,.site-footer .fb-footer .fb-note{flex:none}
.site-footer .fb-footer .fb-note{font-size:0}
.site-footer .fb-footer .fb-note a{font-size:10px}
.site-footer .fb-footer .fb-star{min-width:20px;min-height:22px;font-size:15px}
.site-footer .fb-footer .fb-text{flex:1 0 190px;min-width:190px;max-width:280px;height:22px;min-height:0;padding:2px 7px;font-size:11px;resize:none;overflow:hidden}
.site-footer .fb-footer .fb-send{min-height:22px;padding:1px 10px;font-size:10px}
/* help / puzzle dialog (narrow screens) */
.fb-dialog{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.fb-dialog .fb-q{margin-bottom:2px;color:#d5dce5}
.fb-dialog .fb-star{min-width:40px;min-height:40px;font-size:22px}
.fb-dialog .fb-note{font-size:11.5px;color:var(--muted)}
.fb-dialog .fb-text{display:block;width:100%;min-height:70px;margin:6px 0 8px;padding:8px 10px;font-size:13px;resize:vertical}
.fb-dialog .fb-send{min-height:38px;padding:8px 14px;font-size:12px}
.fb-dialog .fb-msg{margin-top:6px;font-size:12px}
@media(max-width:1279px){.site-footer .fb-footer{display:none!important}}
@media(min-width:1280px){.fb-dialog{display:none!important}}
.top-tools .ds-landing-link{color:var(--mint);white-space:nowrap}

/* MateBlade after a solve (owner decisions 2026-09-27) ------------------------------------------------------------
   1) Bobby + DeepSquare in the post-puzzle slot on every solve: two compact pill buttons side by side, inside the
      feedback row's existing height (60 px, 68 px on large screens). newsletter-form.js shortens "Gegen Bobby
      spielen" to "Gegen Bobby" (.pl-short) where that makes both fit, otherwise shows one pill per solve,
      alternating (.pl-alt, .pl-alt-ds). */
.feedback-copy .play-line{height:20px;margin-top:2px;line-height:normal;overflow:hidden;white-space:nowrap}
.play-line>span:not([hidden]){display:inline-flex;gap:5px;vertical-align:top}
.play-line .pl-pill{display:inline-flex;align-items:center;box-sizing:border-box;height:20px;padding:0 7px;border:1px solid #3a4a5d;border-radius:999px;background:#111a28;color:#dfe6ee;font-size:10.5px;line-height:1;text-decoration:none;white-space:nowrap}
.play-line .pl-pill:hover,.play-line .pl-pill:focus-visible{border-color:var(--mint);color:var(--text)}
.play-line .pl-s,.play-line.pl-short .pl-l{display:none}
.play-line.pl-short .pl-s{display:inline}
.play-line.pl-alt.pl-alt-ds .pl-bobby,.play-line.pl-alt:not(.pl-alt-ds) .pl-ds{display:none}
@media(min-width:781px) and (min-height:621px){.feedback-copy .play-line{height:21px}.play-line .pl-pill{height:21px;padding:0 8px;font-size:12px}}
/* 2) Offer cards (Tagesrätsel sign-up, tester): non-modal, only in the solved state. .oc-side: beside the board in the
      free side space (covers nothing). .oc-over: over the lower part of the solved board; the feedback row with
      "Neue Aufgabe →" stays uncovered. × (40 px target) and Esc close a card. */
.offer-card[hidden]{display:none!important}
.offer-card{position:absolute;z-index:30;box-sizing:border-box;margin:0;padding:12px 14px 13px;border:1px solid #354355;border-radius:12px;background:#111a28;box-shadow:0 18px 50px rgba(0,0,0,.5);color:var(--text);font-size:12px;line-height:1.4;text-align:left;animation:oc-in .3s ease-out .8s both}
.offer-card.oc-side{left:calc(100% + 22px);bottom:0;width:300px}
.offer-card.oc-over{left:3px;right:3px;bottom:3px}
.puzzle:not(:has(#feedback.success)) .offer-card{display:none}
body:has(dialog:modal) .offer-card{visibility:hidden}
@keyframes oc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.offer-card{animation:none}}
.offer-card .oc-close{position:absolute;top:2px;right:2px;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.offer-card .oc-close:hover,.offer-card .oc-close:focus-visible{color:var(--text)}
.offer-card .oc-title{margin:0 34px 8px 0}
.offer-card .oc-title strong{display:block;font-size:14px;line-height:1.3;color:var(--text)}
.offer-card .oc-lead{display:block;margin-top:3px;color:var(--muted);font-size:11.5px}
.offer-card .oc-actions{margin:10px 0 0}
.offer-card .oc-cta{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:7px;border:1px solid #acd6c1;background:#abd5be;color:#15241d;font-weight:600;text-decoration:none}
.offer-card .oc-cta:hover,.offer-card .oc-cta:focus-visible{background:#c2e4d2}
.rt-card .rt-freq{display:flex;flex-wrap:wrap;gap:0 14px;min-width:0;margin:0 0 7px;padding:0;border:0}
.rt-card .rt-freq label{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:12px;color:#d5dce5;cursor:pointer}
.rt-card .rt-freq input{margin:0;width:15px;height:15px;accent-color:var(--mint)}
.rt-card .rt-row{display:flex;gap:6px}
.rt-card input[type=email]{flex:1 1 auto;min-width:0;min-height:36px;padding:6px 10px;border-radius:7px;border:1px solid #354355;background:#0b1320;color:var(--text);font:inherit;font-size:13px}
.rt-card .rt-submit{flex:none;min-height:36px;padding:6px 12px;border-radius:7px;border:1px solid #acd6c1;background:#abd5be;color:#15241d;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.rt-card .rt-submit:disabled{opacity:.55;cursor:default}
.rt-card .rt-consent{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:10px;line-height:1.38;color:#aab5c5;cursor:pointer}
.rt-card .rt-consent input{flex:none;width:15px;height:15px;margin:1px 0 0;accent-color:var(--mint)}
.rt-card .rt-consent a{color:var(--mint)}
.rt-card .rt-msg{margin:8px 0 0;font-size:12px;color:var(--mint)}
.rt-card .rt-msg[data-nl-state=error]{color:var(--error)}
/* Small boards (phones): tighter card so it fits the board without scrolling (JS adds .oc-tight under 330 px). */
.offer-card.oc-tight{padding:7px 10px 8px;font-size:11px}
.offer-card.oc-tight .oc-lead{display:none}
.offer-card.oc-tight .oc-title{margin-bottom:4px}
.offer-card.oc-tight .oc-title strong{font-size:13px}
.offer-card.oc-tight .oc-close{top:0;right:0}
.rt-card.oc-tight .rt-freq{margin-bottom:4px}
.rt-card.oc-tight .rt-freq label{min-height:20px;font-size:11.5px}
.rt-card.oc-tight input[type=email],.rt-card.oc-tight .rt-submit{min-height:34px}
.rt-card.oc-tight .rt-consent{margin-top:5px;font-size:9.5px;line-height:1.25}
/* Footer: "Tagesrätsel per E-Mail", shortened to "Tagesrätsel" on narrow phones (one footer line). */
/* The phone footer is already full (375 px: 339 of 339 px), so the link shows from 481 px on. */
@media(max-width:480px){.site-footer .rt-footer-link{display:none!important}}

/* Dialog pass (2026-09-27): every dialog has a 40 px × top right and Esc; actions are buttons; no scrolling at
   375×667, 390×844, 768×1024 and 1280×800. */
.compact-dialog .dialog-close{right:8px;top:8px;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:999px;line-height:1;cursor:pointer}
.compact-dialog .dialog-close:hover,.compact-dialog .dialog-close:focus-visible{color:var(--text);background:#1f2735}
.compact-dialog .dialog-actions{display:flex;flex-wrap:wrap;gap:8px}
.compact-dialog .dialog-action{display:inline-flex;align-items:center;min-height:36px;padding:7px 14px;border:1px solid #354355;border-radius:7px;background:#0e1723;color:#d5dce5;font:inherit;font-size:12px;line-height:1.2;text-decoration:none;cursor:pointer}
.compact-dialog .dialog-action:hover,.compact-dialog .dialog-action:focus-visible{border-color:var(--mint);color:var(--text)}
#promotion h2{margin-right:40px}
#promotion .dialog-action{margin-top:2px}
@media(max-height:700px){
  .compact-dialog{padding:22px 22px 20px;line-height:1.5}
  .compact-dialog h2{font-size:21px;margin-bottom:10px}
  .compact-dialog p{margin:0 0 10px}
  .fb-dialog{margin-top:10px;padding-top:8px}
}
/* 320 px in German: the mode row (Mattaufgaben · Studien · filter) was 1 px too wide, so phones laid the page out
   360 px wide. A slightly narrower filter select keeps the row inside the screen. */
@media(max-width:359px){.mode-controls select{max-width:110px}}
/* Serie (streak), owner decision 2026-09-27: at the start of the session line, which keeps its height (the trainer
   layout is unchanged; without a streak the line renders exactly as before). Guests: the count is a button that opens
   the account dialog ("Serie im DeepSquare-Konto speichern"). Signed in: text plus the last seven days, oldest first:
   active (filled), protected (❄, weekly freeze), missed (ring), today still open (dashed ring). */
.session-note:has(> .streak-chip:not([hidden]),> .streak-info:not([hidden])){display:flex;align-items:center;gap:10px}
.session-note:has(> .streak-chip:not([hidden]),> .streak-info:not([hidden])) #session-status{flex:none;white-space:nowrap}
.streak-chip,.streak-info{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#cfd8e3;font:inherit;line-height:inherit;white-space:nowrap}
.streak-label{min-width:0;display:inline-flex}
.streak-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.streak-short{display:none}
.streak-chip{position:relative;cursor:pointer;text-decoration:underline;text-decoration-color:#6b7a8f;text-underline-offset:3px}
.streak-chip::before{content:"";position:absolute;inset:-6px -4px}
.streak-chip:hover,.streak-chip:focus-visible{color:var(--mint);text-decoration-color:var(--mint)}
.streak-chip small,.streak-info small{font-size:inherit;color:#a3aec0}
.streak-dots{display:inline-flex;align-items:center;gap:3px}
.streak-dots i{box-sizing:border-box;width:7px;height:7px;border-radius:50%;border:1px solid #6b7a8f}
.streak-dots i.active{border-color:var(--mint);background:var(--mint)}
.streak-dots i.pending{border-style:dashed;border-color:#a3aec0}
.streak-dots i.frozen{width:auto;height:auto;border:0;border-radius:0;font-style:normal;font-size:9px;line-height:1;color:#9fd3ff}
.compact-dialog .account-streak{color:#d5dce5}
/* Phones: while the account hint ("Fortschritt sichern · kostenlos") shares the line, the count drops its qualifier (still in the button name and the dialog). */
@media(max-width:600px){.session-note:has(> #account-hint:not([hidden])) .streak-chip small{display:none}}
@media(max-width:480px){.session-note:has(> .streak-chip:not([hidden]),> .streak-info:not([hidden])){gap:7px}.streak-chip,.streak-info{gap:4px}.streak-info .streak-best{display:none}.streak-dots{gap:2px}.streak-dots i{width:6px;height:6px}}
@media(max-width:374px){.streak-dots,.streak-full{display:none}.streak-short{display:inline}}
.streak-tight .streak-dots,.streak-compact .streak-full{display:none}.streak-compact .streak-short{display:inline}
@media(min-width:781px) and (min-height:621px){.streak-dots{gap:4px}.streak-dots i{width:9px;height:9px}.streak-dots i.frozen{font-size:12px}}
/* 2026-09-27: at 320-359 px the German footer links (with "Datenschutz-Einstellungen") pushed the whole page 40 px sideways,
   so the header looked cut off. A tighter gap keeps them on the same line; nothing moves or wraps. */
@media(max-width:359px){.site-footer nav{gap:6px}}