.mf-wrap { --mf-brett: #2f5d3a; --mf-brett-hell: #3d7349; --mf-mulde: #1b3a24; --mf-text: #fff; --mf-akzent: #8fd19e;
  --mf-rahmen: #7a5230; --mf-rahmen2: #6a4527;
  --mf-c0: #f2c14e; --mf-c1: #5cc8ff; --mf-c0-soft: rgba(242,193,78,.55); --mf-c1-soft: rgba(92,200,255,.55);
  --mf-pill-bg: #f4fbf1; --mf-pill-text: #1f4a2c; --mf-pill-rand: #2f6b3a;
  max-width: 760px; margin: 0 auto; padding: 8px; font-family: system-ui, sans-serif; }
.mf-auszeit { --mf-brett: #3b2a5c; --mf-brett-hell: #4d397a; --mf-mulde: #25183f; --mf-akzent: #e6b94a;
  --mf-rahmen: #5c4a1e; --mf-rahmen2: #4a3b16; }
body.mf-schule { background: transparent; }
/* Seiten-CSS (custom.css) faerbt span-Elemente: hier zurücksetzen */
.mf-wrap span { color: inherit; }
.mf-wrap .mf-c0 { color: var(--mf-c0); }
.mf-wrap .mf-c1 { color: var(--mf-c1); }

/* Steuerleiste: kompakt, helle Pillen im Gruen der Seite */
.mf-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 0 0 10px; }
.mf-bar select, .mf-bar button, .mf-dlg button { width: auto !important; margin: 0 !important; height: auto;
  padding: 5px 14px; font: inherit; font-size: .95rem; line-height: 1.3; cursor: pointer;
  color: var(--mf-pill-text); background: var(--mf-pill-bg); border: 2px solid var(--mf-pill-rand);
  border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mf-bar button:hover:not(:disabled), .mf-dlg button:hover { background: var(--mf-pill-rand); color: #fff; }
.mf-bar button:disabled { opacity: .45; cursor: default; }
.mf-bar :focus-visible, .mf-dlg :focus-visible { outline: 3px solid var(--mf-pill-rand); outline-offset: 2px; }

/* Umschalter (Modus, Schwierigkeit): runde Segmente statt eckiger Auswahlfelder */
.mf-seg { display: inline-flex; overflow: hidden; border: 2px solid var(--mf-pill-rand); border-radius: 999px;
  background: var(--mf-pill-bg); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mf-seg button { border: 0 !important; border-radius: 0; box-shadow: none; background: transparent; }
.mf-seg button[aria-pressed="true"] { background: var(--mf-pill-rand); color: #fff; }
.mf-seg button:hover:not([aria-pressed="true"]) { background: rgba(47,107,58,.15); color: var(--mf-pill-text); }
.mf-quellen { margin: 10px 0 0; font-size: .8rem; line-height: 1.35; }
.mf-dlg a { color: var(--mf-pill-rand); }

/* Brett: Holzrahmen mit Maserung, Filz, Mittelrille; Namen und Status sitzen im Brett */
#mf-board { position: relative; display: grid; grid-template-columns: 1.2fr repeat(6, 1fr) 1.2fr;
  grid-template-rows: auto 1fr 1fr auto; gap: 8px; padding: 12px 14px; border: 12px solid transparent; border-radius: 30px;
  background: radial-gradient(ellipse at center, var(--mf-brett-hell) 0%, var(--mf-brett) 100%) padding-box,
              repeating-linear-gradient(95deg, var(--mf-rahmen) 0 7px, var(--mf-rahmen2) 7px 9px) border-box;
  box-shadow: inset 0 4px 14px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.3); }
#mf-board::before { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 4px; background: rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.12); }

.mf-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 34px; }
.mf-top { grid-row: 1; }
.mf-bot { grid-row: 4; }
.mf-chip { padding: 1px 14px; border: 2px solid currentColor; border-radius: 999px; background: var(--mf-mulde); font-weight: 700; }
.mf-wrap .mf-st { padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; font-size: .9rem; font-weight: 600; }
.mf-st:empty { display: none; }

.mf-store { grid-row: 2 / span 2; display: flex; align-items: center; justify-content: center; border-radius: 60px;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,.55), var(--mf-mulde) 75%);
  box-shadow: inset 0 6px 12px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.12);
  font-size: 1.9rem; font-weight: 700; border: 3px solid transparent; }
.mf-s1 { grid-column: 1; color: var(--mf-c1); border-color: var(--mf-c1-soft); }
.mf-s0 { grid-column: 8; color: var(--mf-c0); border-color: var(--mf-c0-soft); }
.mf-r1 { grid-row: 2; --mf-ring: var(--mf-c1); --mf-ring-soft: var(--mf-c1-soft); }
.mf-r2 { grid-row: 3; --mf-ring: var(--mf-c0); --mf-ring-soft: var(--mf-c0-soft); }

.mf-pit { position: relative; aspect-ratio: 1; padding: 0; cursor: pointer; color: var(--mf-text);
  border: 3px solid transparent; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,.55), var(--mf-mulde) 70%);
  box-shadow: inset 0 5px 10px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.12); }
.mf-pit:disabled { cursor: default; }
.mf-pit.mf-turn { border-color: var(--mf-ring-soft); }
.mf-pit.mf-turn:not(:disabled):hover { border-color: var(--mf-ring); transform: translateY(-2px); }
.mf-pit:focus-visible { outline: 3px solid var(--mf-akzent); outline-offset: 2px; }
.mf-pit.mf-hint { border-color: var(--mf-ring); box-shadow: inset 0 5px 10px rgba(0,0,0,.55), 0 0 14px var(--mf-ring); }
.mf-pit .mf-n { position: absolute; right: 8%; bottom: 4%; font-size: .9rem; font-weight: 700; }
.mf-dots { position: absolute; inset: 14%; display: flex; flex-wrap: wrap; gap: 3px; align-content: center; justify-content: center; }
.mf-dots i { width: 22%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -1px -2px 2px rgba(0,0,0,.3); }
.mf-r1 .mf-dots i { background: var(--mf-c1); }
.mf-r2 .mf-dots i { background: var(--mf-c0); }

/* Saeen-Animation */
.mf-drop { animation: mf-pop .28s ease-out; }
@keyframes mf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .mf-drop { animation: none; } }
@media (prefers-reduced-motion: no-preference) { .mf-pit { transition: border-color .15s, transform .15s, box-shadow .15s; } }

/* Info-Dialog mit Reitern (Spielregeln / Geschichte) */
.mf-dlg { max-width: 540px; width: calc(100% - 32px); padding: 16px 22px 18px; color: var(--mf-pill-text);
  background: var(--mf-pill-bg); border: 3px solid var(--mf-pill-rand); border-radius: 22px; }
.mf-dlg::backdrop { background: rgba(0,0,0,.55); }
.mf-dlg h2 { margin: 0 0 8px; font-size: 1.25rem; color: inherit; }
.mf-dlg ul { margin: 0 0 14px; padding-left: 1.2em; }
.mf-dlg li { margin-bottom: 6px; }
.mf-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.mf-dlg [aria-pressed="true"] { background: var(--mf-pill-rand); color: #fff; }

@media (max-width: 480px) {
  #mf-board { gap: 4px; padding: 6px; border-width: 8px; border-radius: 22px; }
  .mf-store { font-size: 1.2rem; border-radius: 30px; }
  .mf-pit .mf-n { font-size: .7rem; }
}

/* Symbol-Leiste */
.mf-bar { gap: 8px; margin: 0 0 8px; }
.mf-bar .mf-ico { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px !important; height: 40px; padding: 0; border-radius: 50%; }
.mf-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mf-wrap .mf-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--mf-pill-rand); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
.mf-wrap .mf-badge:empty { display: none; }
.mf-bar button:hover:not(:disabled) .mf-badge { background: #fff; color: var(--mf-pill-rand); }
#mf-sound[aria-pressed="true"] .ico-off, #mf-sound[aria-pressed="false"] .ico-on { display: none; }

/* Einstellungen */
.mf-lbl { margin: 12px 0 6px; font-weight: 600; }
.mf-done { margin-top: 16px; }

/* Online-Bereich in den Einstellungen */
.mf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.mf-small { margin: 10px 0 0; font-size: .85rem; }
.mf-dlg p { color: inherit; }
.mf-wrap .mf-code { font-size: 1.4rem; font-weight: 700; letter-spacing: .2em; }
#mf-on-code { width: 7.5em; padding: 5px 14px; font: inherit; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mf-pill-text); background: #fff; border: 2px solid var(--mf-pill-rand); border-radius: 999px; }
#mf-on-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .9rem; word-break: break-all; }

/* Steine in den Speichern, Siegerehrung */
.mf-store { position: relative; }
.mf-store .mf-n { position: absolute; top: 6%; left: 0; right: 0; text-align: center; line-height: 1.1; }
.mf-store .mf-dots { inset: 26% 12% 5%; align-content: flex-start; }
.mf-s1 .mf-dots i { background: var(--mf-c1); }
.mf-s0 .mf-dots i { background: var(--mf-c0); }
.mf-store.mf-win { animation: mf-glow 1.2s ease-in-out 3; }
.mf-win .mf-dots i { animation: mf-hop .7s ease-in-out 4; animation-delay: calc(var(--k, 0) * 40ms); }
.mf-win .mf-n { animation: mf-pulse .9s ease-in-out 3; }
@keyframes mf-glow { 50% { box-shadow: inset 0 6px 12px rgba(0,0,0,.55), 0 0 24px currentColor; } }
@keyframes mf-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px) scale(1.2); } }
@keyframes mf-pulse { 50% { transform: scale(1.35); } }
.mf-rain { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; pointer-events: none; }
.mf-rain i { position: absolute; top: -16px; border-radius: 50%; box-shadow: inset -1px -2px 2px rgba(0,0,0,.25); animation: mf-fall linear forwards; }
@keyframes mf-fall { from { top: -16px; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .mf-store.mf-win, .mf-win .mf-dots i, .mf-win .mf-n { animation: none; }
  .mf-rain { display: none; }
}

/* Lernmodus */
.mf-wrap .mf-coach { margin: 10px 0 0; padding: 8px 14px; border: 2px solid var(--mf-pill-rand); border-radius: 16px;
  background: var(--mf-pill-bg); color: var(--mf-pill-text); font-size: .95rem; line-height: 1.35; }
.mf-pit.mf-pick { border-color: var(--mf-ring); }
.mf-pit.mf-land, .mf-store.mf-land { outline: 3px dashed var(--mf-akzent); outline-offset: 2px; }
.mf-pit.mf-extra::after { content: "\2605"; position: absolute; top: 4%; left: 12%; font-size: 1.05rem; color: var(--mf-ring); text-shadow: 0 1px 2px #000; }