/* Meducated · Fokus-Insel (Minispiel) – Entwurf 20.10.2026, CHR-140.
   Nach tokens.css → teamwork.css → liquid-glass.css und fokus-ansicht.css laden (Kopfzeile von dort). */

html:has(.fi-root),body:has(.fi-root){margin:0;height:100%;overflow:hidden;background:#f6dcea}
.fi-root{--fi-card-w:344px;--fi-gap:clamp(14px,2vw,24px);--fi-coin:radial-gradient(circle at 35% 30%,#ffe9a3 0 18%,#ffc83d 45%,#f0a400 100%);
  position:fixed;inset:0;overflow:hidden;font-family:var(--twc-font);color:var(--twc-ink);
  background:radial-gradient(120% 80% at 70% 10%,#fff1e4 0,rgba(255,241,228,0) 55%),linear-gradient(180deg,#fde1e6 0%,#f7d5ea 48%,#e8d5f4 100%)}
.fi-root button{font-family:inherit;cursor:pointer}
.fi-root button:disabled{cursor:default}
.fi-root :focus-visible{outline:2px solid var(--twc-purple);outline-offset:3px}
.fi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fi-welt{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* Liquid Glass (liquid-glass.css): Karte, Kapsel, Leiste, Haus-Knopf und Testfeld sind .twc-glass mit [data-twc-glass].
   Bedienelemente darin sind getönt (--twc-glass-fill), nie gläsern – kein Glas auf Glas.
   .fi-root vorn, damit Lage, Innenabstand und Ecken gegen „.twc .twc-glass“ (liquid-glass.css) und die ältere Glasregel
   in teamwork.css (Z. 182–184: padding 10px, jedes Kind border-radius 10px) gewinnen. */
.fi-root{--fi-fill:var(--twc-glass-fill);--fi-fill-hover:var(--twc-glass-fill-hover);--fi-fill-an:rgba(255,255,255,.88);
  /* Weniger Milch hinter dem Text als im Standard (.5): Die Szene scheint sichtbar durch. Kontrast gemessen ≥ 4,5:1, siehe CHR-140. */
  --twc-glass-legibility:rgba(255,255,255,.3)}
.fi-root .twc-glass{position:absolute;--twc-glass-r:var(--twc-glass-r-popover);border-radius:var(--twc-glass-r)}
.fi-root .fi-kapsel.twc-glass,.fi-root .fi-haus.twc-glass{--twc-glass-r:var(--twc-r-pill)}
/* Große Flächen geben beim Antippen nicht nach (nur kleine Glasknöpfe tun das) */
.fi-root .fi-karte.is-pressed{transform:none}

/* Münzkapsel oben links (P-056/F13) */
.fi-root .fi-kapsel{position:absolute;z-index:20;top:calc(max(14px,env(safe-area-inset-top,0px)) + 70px);left:max(var(--fi-gap),env(safe-area-inset-left,0px));
  display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:6px 22px 6px 8px;border:0;border-radius:999px;font-size:15px;color:var(--twc-text-2);user-select:none;-webkit-user-select:none}
.fi-root .fi-kapsel__muenze{width:40px;height:40px;border-radius:50%;background:var(--fi-coin);box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 2px 6px rgba(240,164,0,.4)}
.fi-kapsel__zahl{font-size:30px;font-weight:var(--twc-w-semibold);letter-spacing:-.5px;color:var(--twc-ink);font-variant-numeric:tabular-nums}
.fi-kapsel[data-puls]{animation:fi-puls .45s var(--twc-ease-spring,cubic-bezier(.2,1.4,.4,1))}
@keyframes fi-puls{40%{transform:scale(1.08)}}
/* Neben der Kapsel, nicht darin: Glas schneidet überstehenden Inhalt ab (overflow:hidden) */
.fi-delta{position:absolute;z-index:20;left:calc(max(var(--fi-gap),env(safe-area-inset-left,0px)) + 62px);top:calc(max(14px,env(safe-area-inset-top,0px)) + 130px);font-size:15px;font-weight:var(--twc-w-semibold);white-space:nowrap;opacity:0;pointer-events:none}
.fi-delta[data-an]{animation:fi-delta 1.5s ease-out both}
.fi-delta--plus{color:#1f8a5b}
.fi-delta--minus{color:var(--twc-purple-80)}
@keyframes fi-delta{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Karte rechts: Fokus vorbereiten, laufen, Ergebnis */
.fi-root .fi-karte{position:absolute;z-index:20;top:calc(max(14px,env(safe-area-inset-top,0px)) + 70px);right:max(var(--fi-gap),env(safe-area-inset-right,0px));
  width:var(--fi-card-w);max-height:calc(100% - 100px - 120px);overflow:hidden auto;overscroll-behavior:contain;
  padding:24px 20px var(--twc-glass-inset);display:flex;flex-direction:column;gap:14px;text-align:center}
/* Letzte Zeile (Baumzeile oder Knopf) hält Abstand; ein Knopf ganz unten sitzt konzentrisch im Rand */
.fi-karte > :last-child:not(.fi-knopf){margin-bottom:14px}
.fi-marke{margin:0;font-size:13px;font-weight:var(--twc-w-semibold);letter-spacing:3px;text-transform:uppercase;color:var(--twc-purple-80)}
.fi-titel{margin:0;font-size:28px;line-height:1.15;font-weight:var(--twc-w-semibold);letter-spacing:-.5px}
.fi-text{margin:0;font-size:15px;line-height:1.45;color:var(--twc-text)}
.fi-klein{margin:0;font-size:13.5px;line-height:1.4;color:var(--twc-text)}
/* Umschalter Timer/Stoppuhr: getönte Rinne, ausgewählter Teil hell (wie iPadOS) */
.fi-root .fi-seg{display:inline-flex;align-self:center;gap:2px;padding:4px;border-radius:var(--twc-r-pill);background:var(--fi-fill)}
.fi-seg button{min-height:40px;padding:0 18px;border:0;border-radius:var(--twc-r-pill);background:none;color:var(--twc-text);font-size:15px;font-weight:var(--twc-w-medium);
  transition:background-color var(--twc-dur-ui) var(--twc-ease-ui),box-shadow var(--twc-dur-ui) var(--twc-ease-ui)}
.fi-seg button[aria-pressed="true"]{background:var(--fi-fill-an);color:var(--twc-ink);font-weight:var(--twc-w-semibold);box-shadow:0 1px 2px rgba(29,28,57,.08),0 4px 12px -4px rgba(29,28,57,.18)}
.fi-dauer{display:flex;align-items:center;justify-content:center;gap:16px}
.fi-schritt{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--fi-fill);color:var(--twc-ink);font-size:24px;line-height:1;
  transition:background-color var(--twc-dur-ui) var(--twc-ease-ui),transform .15s}
.fi-schritt:not(:disabled):hover{background:var(--fi-fill-hover)}
.fi-schritt:not(:disabled):active{transform:scale(.94)}
.fi-schritt:disabled{opacity:.4}
.fi-zahl{font-size:64px;line-height:1;font-weight:var(--twc-w-semibold);letter-spacing:-2px;font-variant-numeric:tabular-nums}
.fi-vorschlaege{display:flex;justify-content:center;gap:8px}
.fi-vorschlaege button{min-height:36px;padding:0 14px;border:0;border-radius:var(--twc-r-pill);background:var(--fi-fill);font-size:14px;color:var(--twc-text);
  transition:background-color var(--twc-dur-ui) var(--twc-ease-ui)}
.fi-vorschlaege button:hover{background:var(--fi-fill-hover)}
.fi-vorschlaege button[aria-pressed="true"]{background:var(--fi-fill-an);color:var(--twc-ink);font-weight:var(--twc-w-semibold);box-shadow:inset 0 0 0 2px var(--twc-purple)}
/* Hauptknopf: Verlauf bleibt (Chris, 20.10.), Pink so weit abgedunkelt, dass weiße Schrift 4,5:1 erreicht */
.fi-root .fi-knopf{min-height:52px;padding:0 26px;border:0;border-radius:var(--twc-r-pill);font-size:16px;font-weight:var(--twc-w-semibold);color:#fff;
  background:linear-gradient(100deg,#c4359b,#7b4fe6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -6px rgba(123,79,230,.45);transition:transform .15s,box-shadow .2s}
.fi-knopf:active{transform:scale(.97)}
.fi-root .fi-knopf--leise{color:var(--twc-ink);background:var(--fi-fill);box-shadow:none;transition:background-color var(--twc-dur-ui) var(--twc-ease-ui),transform .15s}
.fi-root .fi-knopf--leise:hover{background:var(--fi-fill-hover)}
/* Knopf als letztes Element: konzentrisch zum Kartenrand (28 − 8 = 20), rundum 8 px Abstand
   (seitlich den Karten-Innenabstand von 20 px auf 8 px zurücknehmen) */
.fi-root .fi-karte > .fi-knopf:last-child{min-height:56px;margin-inline:calc(var(--twc-glass-inset) - 20px);border-radius:calc(var(--twc-glass-r) - var(--twc-glass-inset))}
.fi-ring{position:relative;width:216px;height:216px;align-self:center}
.fi-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fi-ring__mitte{position:absolute;inset:0;display:grid;place-content:center;gap:2px}
.fi-ring__zeit{font-size:52px;line-height:1;font-weight:var(--twc-w-semibold);letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.fi-baum{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;color:var(--twc-text)}
.fi-baum__punkte{display:inline-flex;gap:4px}
.fi-baum__punkte i{width:9px;height:9px;border-radius:50%;background:rgba(137,94,247,.22)}
.fi-baum__punkte i[data-voll]{background:linear-gradient(135deg,#86c9ff,#5a8cff)}
.fi-zeile{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Leiste „Was machst du mit deinen Münzen?“ */
/* Schub über eine Variable, damit das Nachgeben beim Antippen (.is-pressed) die Klapplage nicht verliert */
.fi-root .fi-leiste{position:absolute;z-index:20;left:max(var(--fi-gap),env(safe-area-inset-left,0px));
  right:calc(max(var(--fi-gap),env(safe-area-inset-right,0px)) + var(--fi-card-w) + var(--fi-gap));bottom:max(var(--fi-gap),env(safe-area-inset-bottom,0px));
  --fi-schub:0px;transform:translateY(var(--fi-schub));
  padding:12px var(--twc-glass-inset) var(--twc-glass-inset);transition:transform .45s cubic-bezier(.2,1,.3,1),opacity .3s,box-shadow var(--twc-dur-glass-press) var(--twc-ease-spring)}
.fi-root .fi-leiste.is-pressed{transform:translateY(var(--fi-schub))}
.fi-leiste[data-zu]{--fi-schub:calc(100% - 56px)}
.fi-leiste[hidden]{display:block;opacity:0;pointer-events:none;--fi-schub:40px}
.fi-leiste__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 10px 12px}
.fi-leiste__titel{margin:0;font-size:17px;font-weight:var(--twc-w-semibold)}
/* Hell getönt wie die Kacheln: dunkle Tönung fällt in der Innenansicht (dunkle Szene) unter 4,5:1 */
.fi-leiste__auf{min-height:36px;padding:0 14px;border:0;border-radius:var(--twc-r-pill);background:rgba(255,255,255,.5);font-size:14px;font-weight:var(--twc-w-medium);color:var(--twc-ink);
  transition:background-color var(--twc-dur-ui) var(--twc-ease-ui)}
.fi-leiste__auf:hover{background:rgba(255,255,255,.68)}
.fi-angebote{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
/* Kacheln sind getönt, nicht gläsern; Ecken konzentrisch zur Leiste (28 − 8 = 20) */
.fi-angebot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:118px;padding:12px 8px 10px;border:0;
  border-radius:calc(var(--twc-glass-r-popover) - var(--twc-glass-inset));background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);color:var(--twc-ink);text-align:center;transition:transform .2s,box-shadow .2s,background-color .2s}
.fi-angebot:not(:disabled):hover{background:rgba(255,255,255,.68);box-shadow:inset 0 0 0 2px var(--twc-purple-20)}
.fi-angebot:not(:disabled):active{transform:scale(.96)}
.fi-angebot__bild{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--fi-tint,#f3effe);font-size:26px;line-height:1}
.fi-angebot__name{font-size:14px;font-weight:var(--twc-w-semibold);line-height:1.2}
.fi-angebot__preis{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:var(--twc-w-semibold);font-variant-numeric:tabular-nums}
.fi-angebot__preis::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--fi-coin)}
.fi-angebot__grund{font-size:12px;line-height:1.25;color:var(--twc-text)}
/* Gesperrt: Kachel tritt zurück (getönt statt hell), Schrift bleibt lesbar – nur Bild und Münze verblassen */
.fi-root .fi-angebot:disabled{opacity:1;background:rgba(255,255,255,.34);box-shadow:none} /* hebt „.fk-root button:disabled{opacity:.55}“ aus fokus-ansicht.css auf */
.fi-angebot:disabled .fi-angebot__bild,.fi-angebot:disabled .fi-angebot__preis::before{opacity:.45}
.fi-angebot:disabled .fi-angebot__name,.fi-angebot:disabled .fi-angebot__preis{color:var(--twc-text)}
.fi-angebot[data-gekauft] .fi-angebot__preis{display:none}

/* Knopf für den Puppenhaus-Blick */
.fi-root .fi-haus{position:absolute;z-index:20;left:max(var(--fi-gap),env(safe-area-inset-left,0px));top:calc(max(14px,env(safe-area-inset-top,0px)) + 140px);
  min-height:52px;padding:0 24px;border:0;font-size:16px;font-weight:var(--twc-w-semibold);color:var(--twc-ink)}

/* Rückfrage vor dem Beenden */
.fi-dialog{border:0;padding:24px;max-width:340px;border-radius:24px;box-shadow:0 30px 80px rgba(40,20,70,.3);font-family:var(--twc-font);color:var(--twc-ink);text-align:center}
.fi-dialog::backdrop{background:rgba(40,25,70,.25);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fi-dialog h2{margin:0 0 8px;font-size:21px}
.fi-dialog p{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--twc-text)}
.fi-dialog .fi-zeile{gap:10px}

/* Testschalter (nur im Testmodus) */
.fi-root .fi-test{position:absolute;z-index:30;left:max(var(--fi-gap),env(safe-area-inset-left,0px));top:calc(max(14px,env(safe-area-inset-top,0px)) + 200px);
  --twc-glass-r:20px;--twc-glass-legibility:rgba(255,255,255,.88);display:block;flex-direction:column;gap:6px;padding:12px var(--twc-glass-inset) var(--twc-glass-inset);font-size:13px;line-height:1.35;color:var(--twc-ink);max-width:220px}
.fi-test summary{cursor:pointer;padding:0 6px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8c1a4a;list-style:none}
.fi-test > span{padding:0 6px}
.fi-root .fi-test:not([open]){padding:9px 14px}
.fi-test[open]{display:flex}
.fi-root .fi-test button{min-height:36px;border:0;border-radius:calc(var(--twc-glass-r) - var(--twc-glass-inset));background:var(--fi-fill);font-size:13px;color:var(--twc-ink);text-align:left;padding:0 12px}
.fi-test button:hover{background:var(--fi-fill-hover)}
.fi-fehler{position:absolute;z-index:40;left:50%;top:84px;transform:translateX(-50%);max-width:min(520px,90vw);padding:12px 18px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(60,20,40,.2);color:#9b1c3c;font-size:15px}

@media (max-width:900px){
  .fi-root{--fi-card-w:300px}
  .fi-angebote{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .fi-root .fi-karte{left:var(--fi-gap);right:var(--fi-gap);width:auto;top:auto;bottom:calc(var(--fi-gap) + 74px);max-height:46%}
  .fi-root .fi-leiste{right:var(--fi-gap)}
}
@media (prefers-reduced-motion:reduce){
  .fi-root *{animation:none!important;transition:none!important}
}
/* „Kontrast erhöhen“: getönte Flächen werden klare Umrisse (wie .twc-glass-fill in liquid-glass.css) */
@media (prefers-contrast:more){
  .fi-root{--fi-fill:transparent;--fi-fill-hover:rgba(29,28,57,.08);--fi-fill-an:var(--twc-white)}
  /* Selektoren so stark wie die Grundregeln (.fi-root …), sonst gewinnt deren box-shadow:none */
  .fi-root .fi-seg,.fi-root .fi-schritt,.fi-root .fi-vorschlaege button,.fi-root .fi-knopf--leise,.fi-root .fi-leiste__auf,
  .fi-root .fi-angebot,.fi-root .fi-angebot:disabled,.fi-root .fi-angebot:not(:disabled):hover,.fi-root .fi-test button{box-shadow:inset 0 0 0 1.5px var(--twc-ink)}
  .fi-root .fi-seg button[aria-pressed="true"],.fi-root .fi-vorschlaege button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--twc-ink)}
  .fi-root .fi-kapsel{color:var(--twc-ink)}
}