/* Frau Berger stage - styles - v9 - 13.08.2026
   v9: stagehead week counter ('Woche 1 / 8', .weeknum) to MNS green (dark shade),
   matching the .twk timeline labels. '82 · Zimmer 14' (.who span) deliberately unchanged.
   v8: review labels upgraded per Robert 13.08 — scorecard labels (.sc h4) and
   'Verlauf Woche für Woche' (.belowlabel) to ink; timeline week labels (.twk) to
   MNS green (dark shade, AA-safe at 11px; swap to --green if the brighter one is wanted).
   v7: card radius aligned to the site token (Robert 13.08) — --radius now var(--mns-card-radius,12px);
   applies to .stage, .review, .inv and the share dialog. Inner radii (10/8px) and the speech
   bubble stay as-is.
   v6: text-colour alignment per Robert 13.08 — ALL secondary reading text (--grey) now renders
   mns-ink; the tiny uppercase micro-labels (--grey-light) are promoted one step, #B0B6BD → mns-grey.
   Side effect: neutral timeline dots (.tl .m) darken to mns-grey. Token names kept for stability.
   v5: brand-token alignment — the shared palette tokens now CONSUME the site's Bricks
   variables (var(--mns-*)) with the previous hex values as fallbacks. No visual change
   today (all fallbacks equal the live values); palette edits in Bricks now propagate
   into the game automatically. Existing site variables consumed: mns-green, mns-green-dark,
   mns-ink, mns-grey, mns-white, mns-card-border. The names mns-green-tint, mns-green-pale,
   mns-grey-light, mns-surface, mns-border, mns-green-grey do NOT exist in Bricks yet —
   they are referenced here with fallbacks so they light up automatically once created.
   Game-only colours (amber/brick states, Frau Berger warm portrait palette) stay scoped.
   v4: page played-state rules (.fb-before-game/.fb-after-game), secondary button .btn-s,
   share dialog (.fbshare). v3 - 07.08.2026
   v3: font-family leads with the site-hosted family 'Poppins (LOCAL)' so the game renders the true site font (plain 'Poppins' had no font-face and fell back to the system font).
   v2: game portrait column matches the start-screen portrait column (same card size,
   no size jump when the game begins). v1 - 25.06.2026
   Every selector scoped under .fbg (no theme collisions). Enqueue from the child theme. */
.fbg{
  --green:var(--mns-green,#3F9923);--green-dark:var(--mns-green-dark,#2F7A18);--green-tint:var(--mns-green-tint,#F2F8EE);--green-pale:var(--mns-green-pale,#D9ECCD);
  --ink:var(--mns-ink,#38434D);--grey:var(--mns-ink,#38434D);--grey-light:var(--mns-grey,#6B7280);--surface:var(--mns-surface,#F8F9FA);--border:var(--mns-border,var(--mns-card-border,#E1E4E8));--white:var(--mns-white,#FFFFFF);
  --amber:#E0A23C;--amber-ink:#9a7a1f;--brick:#C0392B;
  /* Frau Berger warm palette — ONLY in the portrait */
  --fb-paper:#F7EEE9;--fb-tint:#F4E8E9;--fb-rose:#C07A86;--fb-rose-deep:#9A5765;--fb-soft:#7A7065;--fb-line:#D8C7C2;
  --radius:var(--mns-card-radius,12px); /* v7: site card token adopted (Robert 13.08) */
  font-family:'Poppins (LOCAL)','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink);max-width:920px;margin:0 auto;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.fbg *{box-sizing:border-box}
.fbg button{font-family:inherit}
.fbg /* START */
.fbg-start{text-align:center;padding:36px 22px}
.fbg .fbg-start .s-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:12px}
.fbg .fbg-start .s-title{font-size:30px;font-weight:600;color:var(--ink);margin-bottom:12px}
.fbg .fbg-start .s-lead{font-size:16px;color:var(--grey);max-width:52ch;margin:0 auto 24px}
.fbg .btn-p{cursor:pointer;background:var(--green);color:#fff;border:2px solid var(--green);font-size:15px;font-weight:500;border-radius:8px;padding:12px 24px}
.fbg .btn-p:hover{background:var(--green-dark);border-color:var(--green-dark)}
.fbg .btn-p:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fbg /* STAGE */
.stage{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:0 6px 20px rgba(56,67,77,.06)}
.fbg .stagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--border)}
.fbg .who{font-weight:600;font-size:15px}.fbg .who span{color:var(--grey-light);font-weight:400}
.fbg .statusright{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbg .track{display:flex;gap:5px}
.fbg .seg{width:15px;height:6px;border-radius:3px;background:var(--border);transition:background .4s} /* v5: was raw #E1E4E8 */
.fbg .seg.on{background:var(--green)}
.fbg .weeknum{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark)}
.fbg .moodpill{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.fbg .dot{width:10px;height:10px;border-radius:50%;background:var(--green);transition:background .6s}
.fbg .grid{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:22px;padding-top:16px} /* v2: was 260px — now matches .inv so the portrait card keeps its size when play starts */
@media(max-width:640px){.fbg .grid{grid-template-columns:1fr}}
.fbg .portrait{display:flex;flex-direction:column;gap:8px}
.fbg .portrait .imgwrap{aspect-ratio:3/4;border:1.5px solid var(--fb-line);border-radius:12px;overflow:hidden;background:var(--fb-tint)}
.fbg .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.fbg .portrait .pname{font-weight:600;color:var(--ink);font-size:13px;text-align:center}
@media(max-width:640px){.fbg .portrait .imgwrap{max-width:170px;margin:0 auto}}
.fbg .content{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.fbg .content.in{opacity:1;transform:none}
.fbg .echo{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:0 10px 10px 0;padding:10px 14px;margin-bottom:14px;font-size:14px;color:var(--ink)}
.fbg .echo.bad{border-left-color:var(--brick)}.fbg .echo.good{border-left-color:var(--green)}
.fbg .echo .etag{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-light);margin-bottom:4px}
.fbg .wk{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:7px}
.fbg .obs{font-size:20px;font-weight:600;line-height:1.32;color:var(--ink);margin-bottom:4px}
.fbg .osub{color:var(--grey);font-size:14px;margin-bottom:16px}
.fbg .opts{display:flex;flex-direction:column;gap:10px}
.fbg .opt{text-align:left;cursor:pointer;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;color:var(--ink);transition:border-color .15s,background .15s}
.fbg .opt:hover{border-color:var(--green);background:var(--green-tint)}
.fbg .opt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fbg .opt b{display:block;font-weight:600;font-size:14.5px;margin-bottom:1px}
.fbg .opt small{color:var(--grey);font-size:12.5px}
.fbg .opt.locked{opacity:.5;pointer-events:none}
.fbg /* REVIEW */
.review{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.fbg .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin-bottom:10px}
.fbg .tag.good{background:#EAF4E4;color:var(--green-dark)}.fbg .tag.mixed{background:#F7ECCF;color:var(--amber-ink)}.fbg .tag.bad{background:#F7DDD9;color:var(--brick)}
.fbg .verdict-title{font-size:23px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fbg .verdict{color:var(--grey);font-size:15.5px;max-width:60ch;margin-bottom:20px}
.fbg .scorecards{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.fbg .sc{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.fbg .sc h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.fbg .bar{height:9px;border-radius:999px;background:var(--mns-green-grey,#E7EFE1);overflow:hidden} /* v5: brand green-grey via future token */
.fbg .bar i{display:block;height:100%;width:0;border-radius:999px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.fbg .scval{font-size:22px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.fbg .insight{background:var(--green-tint);border:1px solid var(--green-pale);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.fbg .insight .ilabel{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);margin-bottom:6px}
.fbg .insight p{font-size:14.5px;color:var(--ink)}
.fbg .belowlabel{font-size:11px;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.fbg .timeline{margin-bottom:18px}
.fbg .tl{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)}
.fbg .tl:last-child{border:none}
.fbg .tl .m{width:11px;height:11px;border-radius:50%;margin-top:6px;flex:none;background:var(--grey-light)}
.fbg .tl.good .m{background:var(--green)}.fbg .tl.neutral .m{background:var(--grey-light)}.fbg .tl.bad .m{background:var(--brick)}
.fbg .tl .twk{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark)}
.fbg .tl .tchoice{font-weight:600;font-size:14px;color:var(--ink);margin:1px 0}
.fbg .tl .timpact{font-size:13.5px;color:var(--grey)}
.fbg .cmpwrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.fbg .cmpwrap h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.fbg .cmprow{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;border-bottom:1px solid var(--border)}
.fbg .cmprow:last-child{border:none}.fbg .cmprow span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.fbg .btnrow{display:flex;gap:10px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.fbg *{transition:none!important}.fbg .content{opacity:1;transform:none}}

.fbg /* mood-reactive portrait */
.portrait .imgwrap{position:relative;background:radial-gradient(ellipse 72% 55% at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(180deg,#F7EEE9,#F2E4E5)}
.fbg .fbsprite{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:0}
@media(prefers-reduced-motion:reduce){.fbg .fbsprite{transition:none!important}}

.fbg /* INVITATION start screen */
.fbg .fbg-start{padding:0}
.fbg .inv{display:grid;grid-template-columns:minmax(240px,360px) 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;text-align:left}
@media(max-width:640px){.fbg .inv{grid-template-columns:1fr}}
.fbg .inv-portrait{position:relative;min-height:400px;border-right:1px solid var(--border);background:radial-gradient(ellipse 72% 55% at 50% 32%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--fb-paper),var(--fb-tint))}
@media(max-width:640px){.fbg .inv-portrait{border-right:0;border-bottom:1px solid var(--border);min-height:320px}}
.fbg .inv-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%}
.fbg .inv-portrait img.blink{opacity:0;transition:opacity 80ms}
.fbg .inv-bubble{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.94);border:1px solid var(--fb-line);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:14px;font-style:italic;color:var(--fb-rose-deep);max-width:72%;box-shadow:0 6px 16px rgba(154,87,101,.12)}
.fbg .inv-cap{position:absolute;left:16px;bottom:14px;background:rgba(255,255,255,.85);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--fb-rose-deep)}
.fbg .inv-body{padding:28px 30px}
.fbg .inv-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:8px}
.fbg .inv-h{font-size:31px;font-weight:600;line-height:1.1;color:var(--ink);margin-bottom:10px}
.fbg .inv-sub{font-size:15.5px;color:var(--grey);margin-bottom:18px;max-width:46ch}
.fbg .inv-how{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:20px}
.fbg .inv-how-l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-light);margin-bottom:9px}
.fbg .inv-track{display:flex;gap:5px;margin-bottom:11px}
.fbg .inv-track i{width:22px;height:6px;border-radius:3px;background:var(--green-pale)}
.fbg .inv-track i.on{background:var(--green)}
.fbg .inv-obs{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.fbg .inv-way{border:1.3px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px;color:var(--grey);background:#fff;margin-bottom:5px;opacity:.75}
.fbg .inv-how-cap{font-size:12px;color:var(--grey-light);margin-top:8px}
.fbg .inv-cta{font-size:16px;padding:14px 26px}
.fbg .inv-reassure{font-size:12px;color:var(--grey-light);margin-top:11px}

/* ===== v4 11.08.2026: page state before/after the game =====
   stage.js adds fb-played to <body> when the end review renders.
   Give any Bricks element the class fb-after-game to appear only after play,
   fb-before-game to disappear after play. In-memory only: a reload resets the
   game AND the state together (deliberate: no storage, no consent questions). */
body:not(.fb-played) .fb-after-game{display:none}
body.fb-played .fb-before-game{display:none}
/* ===== v4: secondary button (share) ===== */
.fbg .btn-s{cursor:pointer;background:#fff;color:var(--green-dark);border:2px solid var(--green);font-size:15px;font-weight:500;border-radius:8px;padding:12px 24px}
.fbg .btn-s:hover{background:var(--green-tint)}
.fbg .btn-s:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* ===== v4: share dialog ===== */
.fbg .fbshare{border:none;border-radius:var(--radius);padding:0;max-width:520px;width:calc(100vw - 40px);box-shadow:0 20px 60px rgba(56,67,77,.25)}
.fbg .fbshare::backdrop{background:rgba(56,67,77,.45)}
.fbg .fbshare-head{display:flex;justify-content:space-between;align-items:center;background:var(--green-dark);color:#fff;font-weight:600;font-size:17px;padding:14px 18px}
.fbg .fbshare-x{cursor:pointer;background:none;border:none;color:#fff;font-size:24px;line-height:1;padding:0 2px}
.fbg .fbshare-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fbg .fbshare-body{padding:18px}
.fbg .fbshare-prev{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.fbg .fbshare-prev img{width:96px;height:96px;object-fit:cover;object-position:center 20%;border-radius:10px;border:1px solid var(--fb-line);flex:none}
.fbg .fbshare-prevtxt{font-size:14px;color:var(--grey)}
.fbg .fbshare-prevtxt b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.fbg .fbshare-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.fbg .fbshare-btns{grid-template-columns:1fr}}
.fbg .fbshare-btn{cursor:pointer;display:block;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 10px;font-size:14.5px;font-weight:500;color:var(--green-dark);text-decoration:none;font-family:inherit}
.fbg .fbshare-btn:hover{border-color:var(--green);background:var(--green-tint)}
.fbg .fbshare-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}