/* Shared UI contract for every world and book edition. Loaded last: shared controls and content hierarchy
   have one definition; illustrations, the reader and game boards keep theirs. */
html[data-theme] #mha-familienkarte {
  --ui-radius: 10px;
  --ui-panel-radius: 16px;
  --ui-shadow: 0 2px 8px var(--ui-shadow-tint);
  --ui-control-height: 44px;
  --ui-icon-size: 22px;
  --mha-ink: var(--ui-ink);
  --mha-muted: var(--ui-muted);
  --mha-wine: var(--ui-accent);
  --mha-green: var(--ui-accent);
  --mha-rule: var(--ui-line);
  font-size: 14px;
  line-height: 1.6;
}

/* Shared shell: themes may supply art and colors, never different navigation geometry. */
html[data-theme] #mha-familienkarte { padding: 14px; border: 0; border-radius: 0; box-shadow: none; --mha-paper: var(--ui-paper); --mha-light: var(--ui-paper); --mha-gold: var(--ui-brass); }
html[data-theme] #mha-familienkarte .mha-frame { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100dvh - 24px); position: relative; z-index: 1; background: transparent; border: 1px solid var(--ui-control-line); overflow: clip; box-shadow: 0 10px 45px var(--ui-primary-shadow); }
html[data-theme] #mha-familienkarte :is(.mha-corner, .mha-ornament, .mha-ink-border) { display: none; }
html[data-theme] #mha-familienkarte .mha-ink-defs { position: absolute; }
html[data-theme] #mha-familienkarte .mha-masthead { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 15px; border-bottom: 1px solid var(--ui-control-line); backdrop-filter: blur(14px); }
html[data-theme] #mha-familienkarte .mha-masthead::after { display: none; }
html[data-theme] #mha-familienkarte :is(.mha-monogram, .mha-brand-logo) { width: 72px; height: 72px; }
html[data-theme] #mha-familienkarte .mha-monogram { min-width: 44px; padding: 0; border: 0; background: none; }
html[data-theme] #mha-familienkarte .mha-monogram::before,
html[data-theme] #mha-familienkarte .mha-monogram::after { display: none; }
html[data-theme] #mha-familienkarte .mha-brand-logo { object-fit: contain; filter: drop-shadow(0 2px 4px var(--ui-primary-shadow)); }
html[data-theme] #mha-familienkarte .mha-brand { color: var(--ui-ink); letter-spacing: -.025em; }
html[data-theme] #mha-familienkarte .mha-brand-sub { color: var(--ui-muted); }
html[data-theme] #mha-familienkarte .mha-sidebar { display: flex; flex-direction: column; color: var(--ui-sidebar-ink); border-right: 1px solid var(--ui-sidebar-line); backdrop-filter: blur(9px); }
html[data-theme] #mha-familienkarte .mha-sidebar .mha-room-nav summary { color: var(--ui-sidebar-ink); }
html[data-theme] #mha-familienkarte .mha-side-caption { margin-top: 30px; text-align: left; padding-inline: 12px; color: var(--ui-sidebar-muted); }
html[data-theme] #mha-familienkarte .mha-footnote { min-height: 90px; color: var(--ui-muted); border-color: var(--ui-line); background: transparent; }
html[data-theme] #mha-familienkarte .mha-dialog::backdrop { background: color-mix(in srgb, var(--ui-ink) 70%, transparent); backdrop-filter: blur(5px); }
html[data-theme] #mha-familienkarte .sf-quick-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: none; border: 0; overflow: visible; }
html[data-theme] #mha-familienkarte .sf-quick-paths button { border: 1px solid var(--ui-control-line); color: var(--ui-ink); }
html[data-theme] #mha-familienkarte .sf-quick-paths button:hover { background: var(--ui-hover); border-color: var(--ui-accent); }
html[data-theme] #mha-familienkarte .building-categories .building-room { grid-column: auto; }
html[data-theme] #mha-familienkarte .building-room::before { display: none; }
html[data-theme] #mha-familienkarte .building-furniture .building-place { border: 1px solid var(--ui-control-line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); min-height: 44px; }
html[data-theme] #mha-familienkarte .building-furniture .building-place:hover { background: var(--ui-hover); }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-nav { border-color: var(--ui-line); }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-nav[open] > summary { color: var(--ui-accent); }
html[data-theme] #mha-familienkarte .sf-theme-choice { border-color: var(--ui-control-line); border-radius: var(--ui-radius); background: var(--ui-control); }
html[data-theme] #mha-familienkarte .sf-theme-choice[aria-pressed='true'] { background: var(--ui-selected); border-color: var(--ui-accent); }
html[data-theme] #mha-familienkarte .sf-theme-choice > svg { stroke: var(--ui-accent); }
html[data-theme] #mha-familienkarte .sf-theme-choice small { color: var(--ui-muted); }
html[data-theme] #mha-familienkarte .sf-crystal-choice { min-width: 0; }
html[data-theme] #mha-familienkarte .sf-crystal-choice > .sf-theme-choice { width: 100%; }
html[data-theme] #mha-familienkarte .sf-crystal-choice:has([data-design-choice][aria-pressed='true']) { border: 1px solid var(--ui-accent); border-radius: var(--ui-radius); overflow: hidden; }
html[data-theme] #mha-familienkarte .sf-crystal-choice:has([data-design-choice][aria-pressed='true']) > .sf-theme-choice { border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; padding: 12px; }
html[data-theme] #mha-familienkarte .sf-crystal-settings { margin: 0; padding: 16px 12px; background: var(--ui-surface); }
html[data-theme] #mha-familienkarte .sf-crystal-settings h3 { margin: 0 0 8px; font-size: 18px; }
html[data-theme] #mha-familienkarte .sf-crystal-settings p { color: var(--ui-muted); font-size: 13px; }
html[data-theme] #mha-familienkarte .sf-crystal-settings fieldset { border: 0; padding: 0; margin: 20px 0; min-width: 0; }
html[data-theme] #mha-familienkarte .sf-crystal-settings legend { font-weight: 650; margin-bottom: 10px; padding: 0; }
html[data-theme] #mha-familienkarte .sf-crystal-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
html[data-theme] #mha-familienkarte .sf-crystal-colors button { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 6px; min-width: 0; min-height: 64px; padding: 8px 0; border: 1px solid transparent; border-radius: var(--ui-radius); background: transparent; color: var(--ui-ink); font: 500 11px/1.3 var(--mha-font-body); white-space: nowrap; }
html[data-theme] #mha-familienkarte .sf-crystal-colors button:hover { background: var(--ui-hover); }
html[data-theme] #mha-familienkarte .sf-crystal-colors button[aria-pressed='true'] { border-color: var(--ui-accent); background: var(--ui-control); }
html[data-theme] #mha-familienkarte .sf-crystal-swatch { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--swatch-ink) 35%, var(--swatch)); border-radius: 50%; background: var(--swatch); color: transparent; font-size: 20px; font-weight: 700; }
html[data-theme] #mha-familienkarte [aria-pressed='true'] > .sf-crystal-swatch { color: var(--swatch-ink); }
html[data-theme] #mha-familienkarte .sf-crystal-colors button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
@media (max-width: 380px) { html[data-theme] #mha-familienkarte .sf-crystal-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-theme] #mha-familienkarte .sf-theme-sample { min-width: 0; overflow: hidden; }
html[data-theme] #mha-familienkarte .sf-theme-sample img { display: block; width: 100%; max-width: 76px; max-height: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
html[data-theme] #mha-familienkarte .sf-theme-sample-harry-potter { background: #ead7bb; }
html[data-theme] #mha-familienkarte .sf-theme-sample-waldglas { background: #dce6d4; }
html[data-theme] #mha-familienkarte .sf-theme-settings > img { width: 78px; height: 78px; object-fit: contain; }
html[data-theme] #mha-familienkarte .sf-mobile-crystal { display: block; isolation: isolate; }
html[data-theme] #mha-familienkarte .sf-mobile-crystal img { position: absolute; display: block; object-fit: contain; pointer-events: none; }
html[data-theme] #mha-familienkarte #family-mobile-nav .mha-mobile-map::before,
html[data-theme] #mha-familienkarte #family-mobile-nav .mha-mobile-map::after { display: none; }
html[data-theme] #mha-familienkarte .mha-mobile-nav button { color: var(--ui-sidebar-ink); }
html[data-theme] #mha-familienkarte .mha-mobile-nav button[aria-current='page'] { background: var(--ui-nav-selected); color: var(--ui-nav-selected-ink); box-shadow: none; }
html[data-theme] #mha-familienkarte .mha-mobile-nav button[aria-current='page']::before { display: none; }
html[data-theme]:not([data-theme='harry-potter']) #mha-familienkarte .mha-button.hp-only { display: none; }
@media (min-width: 1100px) { html[data-theme] #mha-familienkarte .mha-sidebar > div { position: sticky; top: 20px; } }
@media (max-width: 850px) {
  html[data-theme] #mha-familienkarte { padding: 0; }
  html[data-theme] #mha-familienkarte .mha-frame { border: 0; padding-bottom: 85px; min-height: 100dvh; overflow: visible; }
  html[data-theme] #mha-familienkarte .mha-sidebar { display: none; }
  html[data-theme] #mha-familienkarte .mha-main { grid-column: 1; }
  html[data-theme] #mha-familienkarte[data-entry='false'][data-cover='open'] .mha-mobile-nav { display: grid; }
  html[data-theme] #mha-familienkarte .mha-mobile-nav { position: fixed; z-index: 24; grid-template-columns: repeat(5, minmax(0, 1fr)); top: var(--mha-mobile-nav-top, auto); bottom: var(--mha-mobile-nav-bottom, 0px); left: 0; right: 0; width: 100%; height: auto; backdrop-filter: blur(10px); border-radius: 0; border: 0; border-top: 1px solid var(--ui-brass); box-shadow: 0 -3px 20px var(--ui-primary-shadow); padding: 7px 6px max(7px, env(safe-area-inset-bottom)); gap: 3px; }
  html[data-theme] #mha-familienkarte .mha-mobile-nav button { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 0; background: transparent; }
}
@media (max-width: 619px) {
  html[data-theme] #mha-familienkarte .mha-masthead { grid-template-columns: 55px minmax(0, 1fr) auto; gap: 8px; }
  html[data-theme] #mha-familienkarte :is(.mha-monogram, .mha-brand-logo) { width: 55px; height: 64px; }
  html[data-theme] #mha-familienkarte .mha-account { grid-column: auto; }
  html[data-theme] #mha-familienkarte .mha-brand-sub { max-width: 38ch; }
}
@media (max-width: 380px) {
  html[data-theme] #mha-familienkarte .mha-masthead { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 7px; }
  html[data-theme] #mha-familienkarte :is(.mha-monogram, .mha-brand-logo) { width: 44px; height: 57px; }
}

/* The atlas is the visual signature; reading surfaces are quiet and stable. */
html[data-theme] #mha-familienkarte .mha-frame { grid-template-columns: 244px minmax(0, 1fr); border-radius: 18px; }
html[data-theme] #mha-familienkarte .mha-frame::before { display: none; }
html[data-theme] #mha-familienkarte .mha-main { padding: 32px; background: var(--ui-canvas); }
html[data-theme] #mha-familienkarte .mha-masthead { padding: 12px 24px; background: var(--ui-masthead); }
html[data-theme] #mha-familienkarte .mha-brand { font-size: 28px; line-height: 1.15; }
html[data-theme] #mha-familienkarte .mha-brand-sub { font: 400 12px/1.5 var(--mha-font-body); letter-spacing: 0; text-transform: none; margin-top: 4px; }
html[data-theme] #mha-familienkarte .mha-account { gap: 8px; flex-wrap: wrap; }
html[data-theme] #mha-familienkarte .mha-account-logout:not([hidden]) { display: inline-flex; order: 10; width: 44px; padding: 10px; }
html[data-theme] #mha-familienkarte .mha-masthead > .mha-connection-status { grid-column: 1 / -1; text-align: left; max-width: none; }
html[data-theme] #mha-familienkarte .mha-account .mha-screen-start-button { width: 44px; padding: 10px; }

/* Every page starts with the same title, description and action alignment. */
html[data-theme] #mha-familienkarte :is(.mha-heading-row, .building-heading, .smart-heading, .nutrition-toolbar) {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; padding: 22px 24px; margin: 0 0 24px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow); min-width: 0;
}
html[data-theme] #mha-familienkarte :is(.mha-heading-row, .building-heading, .smart-heading, .nutrition-toolbar) > div { min-width: 0; }
html[data-theme] #mha-familienkarte :is(.mha-heading-row, .building-heading, .smart-heading) > div:first-child { flex: 1 1 220px; }
html[data-theme] #mha-familienkarte :is(.mha-title, .building-heading h1) > span { min-width: 0; }
html[data-theme] #mha-familienkarte :is(.mha-main, .mha-title):focus { outline: none; }
html[data-theme] #mha-familienkarte :is(.mha-title, .building-heading h1, .smart-heading h1, .nutrition-toolbar h1) {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 400 clamp(30px, 2.7vw, 38px)/1.16 var(--mha-font-heading);
  letter-spacing: -.025em; color: var(--ui-ink); overflow-wrap: anywhere;
}
html[data-theme] #mha-familienkarte :is(.mha-title, .smart-heading h1, .nutrition-toolbar h1) > :is(svg, .mha-symbol) { width: 26px; height: 26px; flex: 0 0 26px; color: var(--ui-accent); }
html[data-theme] #mha-familienkarte :is(.mha-heading-row .mha-kicker, .building-heading p, .smart-heading p) {
  display: block; margin: 8px 0 0; max-width: 64ch; color: var(--ui-muted);
  font: 400 13px/1.6 var(--mha-font-body); text-transform: none; letter-spacing: normal;
}
html[data-theme] #mha-familienkarte :is(.mha-heading-actions, .mha-tools, .mha-row-actions, .mha-form-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html[data-theme] #mha-familienkarte .mha-heading-actions { min-width: 0; max-width: 100%; }
html[data-theme] #mha-familienkarte .mha-identity-card > .mha-button { flex-shrink: 0; }
html[data-theme] #mha-familienkarte .mha-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
html[data-theme] #mha-familienkarte :is(.mha-shelf, .mha-note, .mha-recipe, .mha-dialog, .mha-collection, .smart-home, .nutrition-page) h2:not(.mha-library-chapter-title) {
  font-family: var(--mha-font-heading); font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -.015em;
}
html[data-theme] #mha-familienkarte :is(.mha-shelf, .mha-note, .smart-home) > h3 {
  font: 650 15px/1.5 var(--mha-font-body); margin-top: 24px; margin-bottom: 8px;
}
html[data-theme] #mha-familienkarte :is(.mha-small-note, .mha-detail-note, .mha-row small, .smart-home small, .nutrition-private) { font: 400 12px/1.6 var(--mha-font-body); color: var(--ui-muted); }

/* One control geometry. Primary, secondary, selected and destructive differ
   by meaning, never by a different font, shape or inconsistent hit target. */
html[data-theme] #mha-familienkarte :is(
  .mha-button, .smart-home .mha-button, .mha-icon-button, .mha-light-toggle,
  .mha-new-cards-button, .mha-dialog-close, .mha-library-text-button,
  .mha-screen-start-button, .mha-light-popup > header button
) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ui-control-height); min-width: var(--ui-control-height);
  max-width: 100%; padding: 10px 14px;
  border: 1px solid var(--ui-control-line); border-radius: var(--ui-radius);
  background: var(--ui-control); color: var(--ui-ink);
  box-shadow: inset 0 1px 0 var(--ui-highlight), var(--ui-shadow);
  font: 600 13px/1.4 var(--mha-font-body); letter-spacing: 0;
  white-space: normal; text-align: center; text-decoration: none;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] #mha-familienkarte :is(.mha-icon-button, .mha-light-toggle, .mha-new-cards-button, .mha-dialog-close, .mha-light-popup > header button) { width: 44px; height: 44px; padding: 10px; flex: 0 0 44px; }
html[data-theme] #mha-familienkarte .mha-streak-toggle { width: 44px; flex: 0 0 44px; padding: 3px; gap: 0; }
html[data-theme] #mha-familienkarte .mha-streak-flame { display: block; width: 36px; height: 38px; flex: 0 0 36px; overflow: visible; fill: var(--ui-primary); stroke: none; }
html[data-theme] #mha-familienkarte .mha-streak-count { fill: var(--ui-on-primary); stroke: none; font: 800 11px var(--mha-font-body); font-variant-numeric: tabular-nums; }
html[data-theme] #mha-familienkarte :is(.mha-button, .smart-home .mha-button, .mha-icon-button, .mha-light-toggle, .mha-new-cards-button, .mha-dialog-close, .mha-library-text-button, .mha-screen-start-button):hover:not(:disabled) { background: var(--ui-hover); border-color: var(--ui-accent); color: var(--ui-ink); filter: none; }
html[data-theme] #mha-familienkarte :is(.mha-button.mha-primary, .smart-home .mha-button.mha-primary, .is-featured .mha-library-text-button) {
  background: var(--ui-primary); border-color: var(--ui-primary-line); color: var(--ui-on-primary);
  box-shadow: inset 0 1px 0 var(--ui-primary-highlight), 0 2px 6px var(--ui-primary-shadow);
}
html[data-theme] #mha-familienkarte :is(.mha-button.mha-primary, .smart-home .mha-button.mha-primary, .is-featured .mha-library-text-button):hover:not(:disabled) { background: var(--ui-primary-hover); color: var(--ui-on-primary); }
html[data-theme] #mha-familienkarte :is(.mha-button, .smart-home .mha-button)[aria-pressed='true'],
html[data-theme] #mha-familienkarte .mha-button[aria-current='page'] { background: var(--ui-selected); border-color: var(--ui-accent); color: var(--ui-selected-ink); box-shadow: inset 0 0 0 1px var(--ui-accent); }
html[data-theme] #mha-familienkarte :is(.mha-button, .mha-icon-button).mha-danger { color: var(--ui-danger); border-color: var(--ui-danger-line); background: var(--ui-danger-surface); }
html[data-theme] #mha-familienkarte :is(.mha-button, .mha-icon-button):disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
html[data-theme] #mha-familienkarte :is(.mha-text-button, .mha-library-text-button, button[data-icon-button]) { min-height: 44px; }
html[data-theme] #mha-familienkarte button[data-icon-button] { min-width: 44px; }
html[data-theme] #mha-familienkarte :focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
html[data-theme] #mha-familienkarte button:active:not(:disabled) { transform: none; }
html[data-theme] #mha-familienkarte :is(svg.lucide, svg.mha-action-icon, button svg.mha-step-icon, .tracker-tools svg.mha-action-icon) {
  width: var(--ui-icon-size); height: var(--ui-icon-size); min-width: var(--ui-icon-size);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
html[data-theme] #mha-familienkarte button :is(svg.lucide.lucide-plus, svg.lucide.lucide-minus, svg.mha-action-icon.mha-step-icon) { width: 22px; height: 22px; min-width: 22px; stroke-width: 1.75; }

/* Forms keep a predictable reading order and the same touch geometry. */
html[data-theme] #mha-familienkarte :is(.mha-input, .mha-select, textarea, .nutrition-editor input, .nutrition-editor select) {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-control-line); border-radius: var(--ui-radius);
  background: var(--ui-input); color: var(--ui-ink); box-shadow: inset 0 1px 2px var(--ui-input-shadow);
  font: 400 16px/1.5 var(--mha-font-body);
}
html[data-theme] #mha-familienkarte textarea { min-height: 112px; }
html[data-theme] #mha-familienkarte :is(.mha-input, .mha-select, textarea)[aria-invalid='true'] { border-color: var(--ui-invalid); outline-color: var(--ui-invalid); }
html[data-theme] #mha-familienkarte :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--ui-accent); }
html[data-theme] #mha-familienkarte .mha-form-pair { gap: 16px; }
html[data-theme] #mha-familienkarte .mha-form-actions { margin-top: 24px; }

/* Reusable surfaces and rows, with decoration kept out of the reading path. */
html[data-theme] #mha-familienkarte :is(.mha-shelf, .mha-note, .mha-recipe, .mha-calendar, .smart-map-panel,
  .mha-game-invite, .mha-games-feature, .mha-learning-intro, .mha-year-person, .mha-year-chart,
  .mha-clock-case, .mha-clock-people, .mha-treasure-balance, .mha-treasure-details, .mha-wishes,
  .mha-trophy-collection, .mha-quiz-round, .mha-quiz-league, .mha-year-table) {
  border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius);
  background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
/* These former divider sections now have a complete panel surface, so their
   headings, controls and rows need the same inset on every side. */
html[data-theme] #mha-familienkarte :is(.mha-quiz-league, .mha-trophy-collection, .mha-year-table) {
  min-width: 0; padding: clamp(16px, 2.2vw, 24px);
}
/* Free-standing copy gets a quiet reading surface without changing the illustrated atlas. */
html[data-theme] #mha-familienkarte .mha-main > :is(h2, h3, p, .mha-tools, .mha-toolbar),
html[data-theme] #mha-familienkarte [data-reward-history] > .mha-small-note,
html[data-theme] #mha-familienkarte :is(.mha-year-intro, .mha-learning-intro, .sf-map-heading) {
  padding: 16px 20px; border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-surface); color: var(--ui-ink);
}
html[data-theme] #mha-familienkarte :is(.mha-clock-case, .mha-clock-people, .mha-treasure-balance, .mha-treasure-details, .mha-wishes, .mha-year-person, .mha-quiz-round) { padding: 22px; }
html[data-theme] #mha-familienkarte .mha-clock-case { min-width: 0; }
html[data-theme] #mha-familienkarte .mha-clock-case > h2 { margin-top: 0; }
html[data-theme] #mha-familienkarte .mha-clock-case > p { color: var(--ui-muted); font-size: 13px; max-width: 48ch; margin-inline: auto; }
html[data-theme] #mha-familienkarte .mha-clock-people > h2 { margin-top: 0; }
html[data-theme] #mha-familienkarte .mha-clock-person:last-child { border-bottom: 0; }
html[data-theme] #mha-familienkarte .mha-clock-screen > :is(header, footer),
html[data-theme] #mha-familienkarte .mha-clock-screen-people { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 16px 20px; }
html[data-theme] #mha-familienkarte .mha-treasure-person { padding: 18px 12px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius); }
html[data-theme] #mha-familienkarte .mha-treasure-person[aria-pressed='true'] { background: var(--ui-selected); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
html[data-theme] #mha-familienkarte .mha-treasure-glass { max-width: 205px; margin: 12px auto 4px; }
html[data-theme] #mha-familienkarte .mha-treasure-section-heading { margin: 12px 0; }
html[data-theme] #mha-familienkarte .mha-year-person > h2 { margin-top: 0; }
html[data-theme] #mha-familienkarte .mha-year-person .mha-treasure-glass { max-width: 160px; }
html[data-theme] #mha-familienkarte .mha-year-chart { padding: 20px; }
html[data-theme] #mha-familienkarte .mha-game-invite { display: grid; grid-template-columns: 120px minmax(0,1fr); column-gap: 22px; align-content: start; }
html[data-theme] #mha-familienkarte .mha-game-invite > div { grid-column: 1; grid-row: 1 / 5; width: 120px; margin: 0; align-self: center; }
html[data-theme] #mha-familienkarte .mha-game-invite > :is(h2,p,button) { grid-column: 2; }
html[data-theme] #mha-familienkarte .mha-game-invite > .mha-button { justify-self: start; }
html[data-theme] #mha-familienkarte .mha-game-art { filter: drop-shadow(0 5px 5px #4d331b22); }
html[data-theme] #mha-familienkarte .mha-quiz-trip { background: var(--ui-surface); }
html[data-theme] #mha-familienkarte .mha-quiz-trip:hover { background: var(--ui-hover); }
html[data-theme] #mha-familienkarte :is(.mha-shelf, .mha-note) { padding: 22px; }
html[data-theme] #mha-familienkarte .mha-collection { gap: 20px; margin: 20px 0; }
html[data-theme] #mha-familienkarte .mha-row { gap: 16px; padding: 16px 0; border-color: var(--ui-line); }
html[data-theme] #mha-familienkarte .mha-toolbar { border: 0; padding-top: 0; margin: 0 0 20px; gap: 12px; }
html[data-theme] #mha-familienkarte .mha-empty { padding: 28px 16px; font: 400 14px/1.7 var(--mha-font-body); color: var(--ui-muted); }
html[data-theme] #mha-familienkarte :is(.mha-secondary-tools, .mha-shopping-options, .mha-gallery-folder) > summary { font: 600 13px/1.5 var(--mha-font-body); min-height: 44px; align-items: center; }
html[data-theme] #mha-familienkarte :is(.mha-secondary-tools, .mha-gallery-folder) > summary::after { font: 400 20px/1 var(--mha-font-body); min-width: 22px; }
html[data-theme] #mha-familienkarte .mha-dialog { padding: 28px; border: 1px solid var(--ui-dialog-line); border-radius: 20px; background: var(--ui-dialog); box-shadow: 0 24px 80px var(--ui-dialog-shadow); }
html[data-theme] #mha-familienkarte .mha-dialog h2 { margin: 0 46px 20px 0; font-size: 28px; }
html[data-theme] #mha-familienkarte .mha-dialog-close { top: 12px; right: 12px; }
html[data-theme] #mha-familienkarte .mha-dialog.mha-more-dialog { inset: 12px; margin: auto; max-height: calc(100dvh - 24px); }
html[data-theme] #mha-familienkarte .mha-light-popup { border-radius: 16px; background: var(--ui-popover); padding: 20px; }
html[data-theme] #mha-familienkarte .mha-toast { border: 1px solid var(--ui-toast-line); border-radius: 12px; background: var(--ui-toast); font: 500 13px/1.6 var(--mha-font-body); }

/* Navigation and overview use the same categories and names. */
html[data-theme] #mha-familienkarte .mha-sidebar { padding: 24px 16px; gap: 24px; background: var(--ui-sidebar); }
html[data-theme] #mha-familienkarte .mha-sidebar .mha-kicker { padding: 0 10px; font: 400 24px/1.2 var(--mha-font-heading); color: var(--ui-sidebar-title); letter-spacing: 0; text-transform: none; }
html[data-theme] #mha-familienkarte .mha-nav { gap: 8px; margin-top: 16px; }
html[data-theme] #mha-familienkarte :is(.sf-nav-label, .mha-nav-section-label) { display: block; padding: 4px 10px 8px; font: 500 11px/1.5 var(--mha-font-body); letter-spacing: 0; text-transform: none; color: var(--ui-sidebar-muted); }
html[data-theme] #mha-familienkarte .mha-nav-favorites { margin: 0 0 8px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--ui-sidebar-line); }
html[data-theme] #mha-familienkarte :is(.mha-nav-sections, .mha-nav-utilities) { display: grid; gap: 4px; min-width: 0; }
html[data-theme] #mha-familienkarte .mha-nav-utilities { border-top: 1px solid var(--ui-sidebar-line); margin-top: 12px; padding-top: 12px; }
html[data-theme] #mha-familienkarte :is(.mha-nav button, .mha-room-nav > summary) { min-height: 44px; padding: 10px; gap: 10px; border-radius: 10px; font: 500 13px/1.45 var(--mha-font-body); white-space: normal; }
html[data-theme] #mha-familienkarte .mha-room-nav { border: 0; margin: 0; }
html[data-theme] #mha-familienkarte .mha-room-pages { margin: 4px 0 8px 20px; padding: 0 0 0 10px; border-left: 1px solid var(--ui-sidebar-branch); display: grid; gap: 4px; }
html[data-theme] #mha-familienkarte .mha-nav .mha-room-pages button { font-size: 12px; padding: 10px 8px; }
html[data-theme] #mha-familienkarte .mha-sidebar .mha-nav button { background: transparent; border-color: transparent; box-shadow: none; color: var(--ui-sidebar-ink); width: 100%; }
html[data-theme] #mha-familienkarte .mha-sidebar :is(.mha-nav button, .mha-room-nav > summary):hover { background: var(--ui-sidebar-hover); }
html[data-theme] #mha-familienkarte .mha-sidebar .mha-nav button:is([aria-current='page'], .is-current-parent) { background: var(--ui-nav-selected); color: var(--ui-nav-selected-ink); border-color: var(--ui-nav-selected-line); box-shadow: none; font-weight: 700; }
html[data-theme] #mha-familienkarte .mha-nav button[aria-current='page']::after { display: none; }
html[data-theme] #mha-familienkarte .mha-nav .is-current-group > summary { color: var(--ui-nav-current); }
html[data-theme] #mha-familienkarte :is(.mha-sidebar, .mha-mobile-nav, .mha-more-grid) :is(svg.lucide, .mha-family-symbol) { color: inherit; filter: none; }
html[data-theme] #mha-familienkarte .mha-more-grid { display: block; }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-nav { border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; border-radius: 0; }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-nav summary { padding: 15px 2px; font-size: 14px; }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-pages button { min-height: 44px; }

html[data-theme] #mha-familienkarte .mha-more-grid :is(.mha-nav-section-label, .sf-nav-label) { color: var(--ui-muted); }
html[data-theme] #mha-familienkarte .mha-more-grid :is(.mha-nav-favorites, .mha-nav-utilities) { border-color: var(--ui-line); }
html[data-theme] #mha-familienkarte .mha-more-grid button { border: 1px solid var(--ui-control-line); background: var(--ui-control); min-height: 44px; border-radius: 10px; font: 500 13px/1.45 var(--mha-font-body); box-shadow: none; }
html[data-theme] #mha-familienkarte .mha-more-grid button:is([aria-current='page'], .is-current-parent) { background: var(--ui-menu-selected); border-color: var(--ui-menu-selected-line); }
html[data-theme] #mha-familienkarte .mha-more-grid .mha-room-pages { border-color: var(--ui-line); }
html[data-theme] #mha-familienkarte .sf-map-heading { margin: 32px 0 18px; padding: 0 2px; }
html[data-theme] #mha-familienkarte .sf-map-heading h2 { font: 400 26px/1.25 var(--mha-font-heading); }
html[data-theme] #mha-familienkarte .sf-map-heading p { margin-top: 6px; font: 400 13px/1.6 var(--mha-font-body); color: var(--ui-muted); }
html[data-theme] #mha-familienkarte .building-plan.building-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; gap: 16px; padding: 0; border: 0; background: none; }
html[data-theme] #mha-familienkarte .building-categories .building-room { grid-area: auto; padding: 20px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
html[data-theme] #mha-familienkarte .building-categories .building-category-heading { margin: 0; }
html[data-theme] #mha-familienkarte .building-categories .building-room-title { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; font: 400 25px/1.25 var(--mha-font-heading); border: 0; background: none; color: var(--ui-ink); text-align: left; }
html[data-theme] #mha-familienkarte .building-room-title > svg:first-child { color: var(--ui-accent); }
html[data-theme] #mha-familienkarte .building-room-title > svg:last-child { margin-left: auto; width: 18px; height: 18px; }
html[data-theme] #mha-familienkarte .building-category-description { margin: 6px 0 14px; font: 400 12px/1.6 var(--mha-font-body); color: var(--ui-muted); }
html[data-theme] #mha-familienkarte .building-categories .building-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
html[data-theme] #mha-familienkarte .building-places .building-place { display: flex; flex-direction: row; align-items: center; gap: 9px; min-width: 0; min-height: 44px; padding: 9px 8px; border: 1px solid transparent; border-radius: 9px; font: 500 12px/1.45 var(--mha-font-body); color: var(--ui-ink); text-align: left; background: transparent; }
html[data-theme] #mha-familienkarte .building-places .building-place:hover { background: var(--ui-hover); border-color: var(--ui-line); }
html[data-theme] #mha-familienkarte .building-categories .building-room-smart { border-color: var(--ui-feature-line); background: var(--ui-feature); }
html[data-theme] #mha-familienkarte :is(.building-interior, .building-furniture) { border-radius: 16px; }
html[data-theme] #mha-familienkarte .sf-quick-paths { gap: 12px; }
html[data-theme] #mha-familienkarte .sf-quick-paths button { min-height: 52px; padding: 12px 16px; border-radius: 10px; background: var(--ui-surface); font: 600 13px/1.45 var(--mha-font-body); box-shadow: var(--ui-shadow); }

/* Keep the shopping list close to its primary actions; setup stays in one disclosure. */
html[data-theme] #mha-familienkarte .mha-shopping-list .mha-list-heading { padding:0 0 6px; }
html[data-theme] #mha-familienkarte .mha-shopping-list .mha-list-heading h2 { margin:0;font-size:28px; }
html[data-theme] #mha-familienkarte .mha-shopping-add { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 2px; }
html[data-theme] #mha-familienkarte .mha-shopping-add>.mha-button { margin:0;min-height:44px; }
/* The count belongs to the control layout, inside its clipped glass surface. */
html[data-theme] #mha-familienkarte [data-shopping-cart='open'] .shopping-cart-count { position: static; inset: auto; flex: 0 0 auto; min-width: 22px; height: 22px; margin-inline-start: 2px; padding: 0 5px; box-shadow: none; }
html[data-theme] #mha-familienkarte .mha-shopping-options { margin:0 0 6px; }
html[data-theme] #mha-familienkarte .mha-shopping-options>summary { min-height:44px;font-size:12px; }
html[data-theme] #mha-familienkarte .mha-shopping-options>.mha-toolbar { margin:0 0 12px;justify-content:flex-start; }
html[data-theme] #mha-familienkarte .mha-shopping-list .mha-market-list { margin-top:12px;padding-top:8px; }
html[data-theme] #mha-familienkarte .mha-shopping-list .mha-market-list-ungrouped { margin-top:0;padding-top:0; }
html[data-theme] #mha-familienkarte .mha-shopping-list .mha-shopping-category { padding:9px 0 7px;margin:0;font-size:16px; }
html[data-theme] #mha-familienkarte .mha-shopping-estimate { margin:15px 0 8px; }
/* Keep the article readable even with scanning, assignment and sort actions. */
html[data-theme] #mha-familienkarte .mha-shopping-item { display: grid; grid-template-columns: minmax(160px, 1fr) auto; align-items: center; }
html[data-theme] #mha-familienkarte .mha-shopping-item > .mha-inline-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); min-width: 0; width: 100%; }
html[data-theme] #mha-familienkarte .mha-shopping-item > .mha-inline-check:has(> svg) { grid-template-columns: 20px 30px minmax(0, 1fr); }
html[data-theme] #mha-familienkarte .mha-shopping-item > .mha-inline-check > :is(input, svg) { flex-shrink: 0; margin: 0; }
html[data-theme] #mha-familienkarte .mha-shopping-item > .mha-inline-check > span { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
html[data-theme] #mha-familienkarte .mha-shopping-item > .mha-row-actions { justify-content: flex-end; min-width: 0; }
@media (max-width:760px) {
  html[data-theme] #mha-familienkarte[data-page='shopping'] .mha-heading-row { margin-bottom:16px; }
  html[data-theme] #mha-familienkarte .mha-shopping-list .mha-list-heading h2 { font-size:26px; }
  html[data-theme] #mha-familienkarte .mha-shopping-add>.mha-button { font-size:12px;padding:10px 12px; }
  html[data-theme] #mha-familienkarte .mha-shopping-list .mha-row-actions [data-shopping-scan] { flex-direction:column;gap:1px;min-width:52px;padding:5px;font-size:10px; }
  html[data-theme] #mha-familienkarte .mha-shopping-item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
}
@media (max-width:360px) {
  html[data-theme] #mha-familienkarte[data-page='shopping'] .mha-heading-actions { gap:6px; }
}

/* Specialty modules inherit the common controls without restyling canvases. */
html[data-theme] #mha-familienkarte .smart-home { --smart-ink: var(--ui-ink); --smart-muted: var(--ui-muted); --smart-accent: var(--ui-accent); --smart-line: var(--ui-line); }
html[data-theme] #mha-familienkarte .smart-connection { padding: 0; font-size: 12px; }
html[data-theme] #mha-familienkarte .smart-office-tabs { gap: 8px; margin-bottom: 24px; }
html[data-theme] #mha-familienkarte .smart-home .smart-office-tabs .mha-button { flex: 0 1 auto; flex-direction: row; height: auto; min-height: 44px; padding: 10px 14px; font-size: 13px; background: var(--ui-control); border: 1px solid var(--ui-control-line); border-radius: var(--ui-radius); color: var(--ui-ink); }
html[data-theme] #mha-familienkarte .smart-home .smart-office-tabs .mha-button[aria-current='page'] { background: var(--ui-selected); color: var(--ui-selected-ink); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
html[data-theme] #mha-familienkarte .smart-home .smart-office-tabs .mha-button span { position: static; clip-path: none; width: auto; height: auto; overflow: visible; }
html[data-theme] #mha-familienkarte .nutrition-toolbar h1 { width: 100%; font-size: clamp(28px, 2.7vw, 38px); white-space: normal; }
html[data-theme] #mha-familienkarte .nutrition-toolbar h1 > span { position: static; width: auto; height: auto; clip-path: none; overflow: visible; white-space: normal; min-width: 0; }
html[data-theme] #mha-familienkarte .nutrition-toolbar h1 > svg { display: block; }
html[data-theme] #mha-familienkarte .nutrition-toolbar .nutrition-day-switch { margin-right: auto; flex: 0 1 auto; }
html[data-theme] #mha-familienkarte .nutrition-options { position: relative; padding: 0; margin: 0; border: 0; }
html[data-theme] #mha-familienkarte .nutrition-options > summary { display: flex; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-control-line); border-radius: var(--ui-radius); background: var(--ui-control); }
html[data-theme] #mha-familienkarte .nutrition-options > summary::after { display: none; }
html[data-theme] #mha-familienkarte .nutrition-option-actions { display: grid; gap: 8px; padding-top: 8px; }
html[data-theme] #mha-familienkarte .nutrition-option-actions .mha-button { justify-content: flex-start; }
html[data-theme] #mha-familienkarte .nutrition-options[open] { flex: 1 1 100%; }
html[data-theme] #mha-familienkarte .nutrition-meals > section { padding: 20px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); }
html[data-theme] #mha-familienkarte .nutrition-meals header h2 { font-size: 24px !important; }
html[data-theme] #mha-familienkarte .nutrition-meals article { flex-wrap: wrap; gap: 8px; }
html[data-theme] #mha-familienkarte .nutrition-meals article > div { flex-basis: calc(100% - 80px); }
html[data-theme] #mha-familienkarte .nutrition-meals article button { padding: 10px 12px !important; font-size: 12px !important; }

/* The original folded map and the forest stone sit freely above the mobile bar. */
html[data-theme] #mha-familienkarte #family-mobile-nav .mha-mobile-map,
html[data-theme] #mha-familienkarte #family-mobile-nav .mha-mobile-map:is(:hover, :active, :focus-visible, [aria-current='page']) { position: relative; height: 54px; min-height: 54px; width: 100%; padding: 0; margin: 0; transform: none; overflow: visible; background: transparent; border: 0; box-shadow: none; }
html[data-theme] #mha-familienkarte .sf-mobile-crystal { position: absolute; top: -5px; bottom: auto; left: 50%; transform: translateX(-50%); width: 66px; max-width: 100%; height: 54px; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; }
html[data-theme] #mha-familienkarte .sf-mobile-crystal::after { display: none; }
html[data-theme] #mha-familienkarte .sf-mobile-crystal img { top: 0; left: 50%; width: 66px; height: 54px; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 2px 4px var(--ui-primary-shadow)); }
html[data-theme] #mha-familienkarte .sf-mobile-crystal .sf-crystal-smoke { inset: -2px auto auto 50%; transform: translateX(-50%); width: 54px; height: 54px; }
html[data-theme] #mha-familienkarte .mha-mobile-map:focus-visible .sf-mobile-crystal img { filter: drop-shadow(0 0 2px var(--ui-on-primary)) drop-shadow(0 0 6px var(--ui-jewel-active)); }
html[data-theme] #mha-familienkarte .mha-mobile-nav { padding-top: 6px; background: var(--ui-mobile); }
html[data-theme] #mha-familienkarte .mha-mobile-nav button:not(.mha-mobile-map) { min-height: 54px; padding: 6px 2px; gap: 4px; border-radius: 9px; font: 500 10px/1.35 var(--mha-font-body); }

html[data-theme] #mha-familienkarte :is(.sf-map-folds, .sf-mobile-leaves) { display: none; pointer-events: none; }
html:is([data-palette='parchment-burgundy'], [data-palette='forest-glass']) #mha-familienkarte .sf-mobile-crystal { top: -10px; width: 62px; height: 62px; }
html[data-palette='forest-glass'] #mha-familienkarte .sf-mobile-crystal img { top: 0; width: 62px; height: 62px; filter: drop-shadow(0 3px 3px #122d2480); }
html[data-palette='parchment-burgundy'] #mha-familienkarte .sf-mobile-crystal img,
html[data-palette='parchment-burgundy'] #mha-familienkarte .sf-map-folds { top: 0; left: 50%; width: 42px; height: 62px; transform: translateX(-50%) rotate(-8deg); clip-path: polygon(0 3%, 32% 0, 67% 4%, 100% 1%, 100% 97%, 67% 100%, 32% 96%, 0 100%); }
html[data-palette='parchment-burgundy'] #mha-familienkarte .sf-mobile-crystal img { object-fit: fill; filter: drop-shadow(0 3px 3px #24111b99); }
html[data-palette='parchment-burgundy'] #mha-familienkarte .sf-map-folds { display: block; position: absolute; background: linear-gradient(90deg, transparent 27%, #4b281e40 32%, #fff0c060 34%, transparent 39%, transparent 62%, #44251f50 66%, #fff0c040 68%, transparent 74%); }
html:is([data-palette='parchment-burgundy'], [data-palette='forest-glass']) #mha-familienkarte .mha-mobile-map:focus-visible { outline: 2px solid var(--ui-jewel-active); outline-offset: 2px; border-radius: 9px; }
html:is([data-palette='parchment-burgundy'], [data-palette='forest-glass']) #mha-familienkarte .mha-mobile-map[aria-current='page'] .sf-mobile-crystal img { filter: drop-shadow(0 0 3px var(--ui-jewel-active)) drop-shadow(0 3px 4px var(--ui-jewel-dark)); }

/* Three small leaves share a breeze around the stone, never covering a control. */
html[data-palette='forest-glass'] #mha-familienkarte .sf-mobile-leaves { display: block; position: absolute; inset: -7px -9px -3px; overflow: hidden; }
html[data-palette='forest-glass'] #mha-familienkarte .sf-mobile-leaves i { position: absolute; left: 50%; top: 36%; width: 15px; aspect-ratio: 1 / 2; background: url('/assets/images/design-waldglas/leaves-photo-v1.webp') var(--leaf-position, 0%) center / 300% 100% no-repeat; filter: drop-shadow(0 1px 1px #122b2940); transform: translate(-28px, 11px) rotate(-30deg); }
html[data-palette='forest-glass'] #mha-familienkarte .sf-mobile-leaves i:nth-child(2) { width: 13px; transform: translate(18px, -13px) rotate(135deg); --leaf-position: 50%; --leaf-delay: -2.4s; --leaf-duration: 7.6s; }
html[data-palette='forest-glass'] #mha-familienkarte .sf-mobile-leaves i:nth-child(3) { width: 14px; transform: translate(20px, 17px) rotate(35deg); --leaf-position: 100%; --leaf-delay: -4.7s; --leaf-duration: 8.4s; }
html[data-palette='forest-glass'] #mha-familienkarte[data-motion='on'][data-cover='open'] .sf-mobile-leaves i { animation: sf-mobile-leaf-breeze var(--leaf-duration, 6.8s) ease-in-out var(--leaf-delay, 0s) infinite; }
html[data-palette='forest-glass'] #mha-familienkarte[data-background-paused='true'] .sf-mobile-leaves i { animation-play-state: paused; }
@keyframes sf-mobile-leaf-breeze {
  0% { opacity: 0; transform: translate(-40px, 16px) rotate(-35deg) rotateY(0deg); }
  15% { opacity: .9; }
  40% { opacity: .85; transform: translate(-11px, -25px) rotate(65deg) rotateY(95deg); }
  70% { opacity: .9; transform: translate(17px, -13px) rotate(150deg) rotateY(180deg); }
  90% { opacity: .7; }
  100% { opacity: 0; transform: translate(42px, 14px) rotate(230deg) rotateY(285deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-palette='forest-glass'] #mha-familienkarte[data-motion='on'][data-cover='open'] .sf-mobile-leaves i { animation: none; }
}

@media (max-width: 1100px) and (min-width: 851px) {
  html[data-theme] #mha-familienkarte .mha-frame { grid-template-columns: 220px minmax(0, 1fr); }
  html[data-theme] #mha-familienkarte .mha-main { padding: 24px; }
  html[data-theme] #mha-familienkarte .building-categories .building-places { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  /* Clipping must not turn the page root into a separate sticky scroll container. */
  html[data-theme] { scroll-padding-top: calc(var(--mha-masthead-height, 104px) + 12px); }
  html[data-theme] #mha-familienkarte[data-cover='open'] { overflow: clip; }
  html[data-theme] #mha-familienkarte .mha-frame { display: block; border-radius: 0; overflow: visible; }
  html[data-theme] #mha-familienkarte .mha-masthead {
    position: sticky; top: 0; z-index: 25;
    grid-template-columns: 44px minmax(0, 1fr); gap: 4px;
    padding: calc(8px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--ui-paper) 45%, transparent);
    backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08);
  }
  html[data-theme] #mha-familienkarte .mha-masthead > .mha-brand-copy { display: none; }
  html[data-theme] #mha-familienkarte .mha-monogram { width: 44px; height: 44px; }
  html[data-theme] #mha-familienkarte .mha-brand-logo { width: 36px; height: 36px; }
  html[data-theme] #mha-familienkarte .mha-masthead > .mha-account { grid-column: 2; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; gap: 3px; }
  html[data-theme] #mha-familienkarte .mha-masthead > .mha-connection-status { font-size: 11px; }
  html[data-theme] #mha-familienkarte .mha-main { padding: 24px 20px 104px; }
  html[data-theme] #mha-familienkarte .mha-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 619px) {
  html[data-theme] #mha-familienkarte .mha-main { padding: 20px 14px 100px; }
  html[data-theme] #mha-familienkarte :is(.mha-clock-case, .mha-clock-people, .mha-quiz-round, .mha-year-person) { padding: 16px; }
  html[data-theme] #mha-familienkarte .mha-game-invite { grid-template-columns: 82px minmax(0,1fr); gap: 10px 14px; padding: 20px 16px; }
  html[data-theme] #mha-familienkarte .mha-game-invite > div { width: 82px; }
  html[data-theme] #mha-familienkarte .mha-game-invite h2 { font-size: 25px; }
  html[data-theme] #mha-familienkarte :is(.mha-heading-row, .building-heading, .smart-heading, .nutrition-toolbar) { padding: 18px 16px; gap: 14px; margin-bottom: 20px; border-radius: 14px; }
  html[data-theme] #mha-familienkarte :is(.mha-heading-row, .building-heading, .smart-heading) > div:first-child { width: 100%; flex: 1 1 100%; }
  html[data-theme] #mha-familienkarte :is(.mha-title, .building-heading h1, .smart-heading h1, .nutrition-toolbar h1) { font-size: 30px; gap: 10px; }
  html[data-theme] #mha-familienkarte :is(.mha-title, .smart-heading h1, .nutrition-toolbar h1) > svg { width: 24px; height: 24px; flex-basis: 24px; }
  html[data-theme] #mha-familienkarte :is(.mha-shelf, .mha-note) { padding: 18px; }
  html[data-theme] #mha-familienkarte .building-plan.building-categories { grid-template-columns: 1fr; gap: 14px; }
  html[data-theme] #mha-familienkarte .building-categories .building-room { padding: 18px; }
  html[data-theme] #mha-familienkarte .sf-quick-paths { grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] #mha-familienkarte .sf-quick-paths button { padding: 10px; font-size: 12px; }
  html[data-theme] #mha-familienkarte .sf-quick-paths button > svg:last-child { display: none; }
  html[data-theme] #mha-familienkarte .mha-dialog { padding: 24px 18px; border-radius: 16px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  html[data-theme] #mha-familienkarte .mha-dialog h2 { font-size: 26px; margin-right: 40px; }
  html[data-theme] #mha-familienkarte .nutrition-meals > section { padding: 16px; }
  html[data-theme] #mha-familienkarte .nutrition-toolbar { gap: 8px; }
  html[data-theme] #mha-familienkarte .nutrition-toolbar h1 { font-size: 28px; }
}
@media (max-width: 360px) {
  html[data-theme] #mha-familienkarte .mha-main { padding-inline: 10px; }
  html[data-theme] #mha-familienkarte .building-categories .building-places { grid-template-columns: 1fr; }
  html[data-theme] #mha-familienkarte .mha-brand { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] #mha-familienkarte :is(.mha-button, .mha-icon-button, .mha-nav button) { transition: none; }
}
/* Active games deliberately give their viewport to the board and answers. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  html[data-theme] #mha-familienkarte:has(.mha-quiz-round, [data-character-session]) :is(.mha-masthead, .mha-sidebar, .mha-heading-row, .mha-footnote) { display: none; }
  html[data-theme] #mha-familienkarte[data-entry='false'][data-cover='open']:has([data-character-session]) .mha-mobile-nav { display: none; }
  html[data-theme] #mha-familienkarte:has(.mha-quiz-round, [data-character-session]) { padding-top: calc(8px + env(safe-area-inset-top)); }
  html[data-theme] #mha-familienkarte:has(.mha-quiz-round, [data-character-session]) .mha-frame { min-height: 0; padding-bottom: 0; }
  html[data-theme] #mha-familienkarte:has(.mha-quiz-round, [data-character-session]) .mha-main { padding: 0 8px; }
}
@media (max-width: 1000px) and (max-height: 500px) {
  html[data-theme] #mha-familienkarte[data-entry='false'][data-cover='open']:has(.mha-quiz-round) .mha-mobile-nav { display: none; }
}