/* A quiet sheet of paper, with the pressure and curves of a fountain pen. */
#mha-familienkarte {
  --mha-paper: #f2e8d3; --mha-light: #fbf5e8; --mha-ink: #302c28;
  --mha-muted: #665b4b; --mha-rule: #8b7859; --mha-green: #34564c;
  --mha-wine: #663b3d; --mha-gold: #b88731; --mha-hand: 'Caveat', 'Segoe Print', cursive;
  --mha-ink-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C106 1 172 8 291 5S486 3 598 5M3 7Q256 4 580 6' fill='none' stroke='%235d5141' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  max-width: 1800px; padding: 8px; box-sizing: border-box;
  background: linear-gradient(#f7efddaa, #f7efddaa), var(--mha-paper-image) center / 1100px, var(--mha-paper);
  box-shadow: inset 0 0 80px #80613216, 0 12px 60px #140d0926;
  font-size: 14px;
}
body { background: #ddd3bf; }
#mha-familienkarte::before { opacity: .45; }
#mha-familienkarte .mha-frame { grid-template-columns: 196px minmax(0, 1fr); min-height: calc(100dvh - 18px); border-color: #675a4599; }
#mha-familienkarte .mha-frame::before { border-color: #88734e30; }
#mha-familienkarte .mha-masthead { grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; padding: 8px 22px; min-height: 62px; border: 0; background: none; }
#mha-familienkarte .mha-masthead::after { content: ''; position: absolute; inset: auto 18px -2px; height: 7px; background: var(--mha-ink-line) center / 100% 100%; }
#mha-familienkarte .mha-monogram, #mha-familienkarte .mha-brand-logo { width: 44px; height: 44px; }
#mha-familienkarte .mha-brand { font: 500 25px/1 var(--mha-hand); letter-spacing: 0; }
#mha-familienkarte .mha-brand-sub { display: none; }
#mha-familienkarte .mha-account { display: flex; align-items: center; gap: 12px; min-width: 0; }
#mha-familienkarte .mha-identity-button { border: 0; background: none; font: 500 18px/1.2 var(--mha-hand); padding: 4px 7px; max-width: 240px; }
#mha-familienkarte .mha-identity-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mha-familienkarte .mha-identity-button svg { width: 15px; height: 20px; }
#mha-familienkarte .mha-main, #mha-familienkarte[data-linked='true'] .mha-main { padding: 26px clamp(20px, 3vw, 48px) 30px; }
#mha-familienkarte .mha-sidebar { padding: 20px 12px; border-right-color: #79644945; gap: 14px; }
#mha-familienkarte .mha-sidebar .mha-kicker { padding: 0 10px; font: 500 23px var(--mha-hand); }
#mha-familienkarte .mha-nav { gap: 0; margin-top: 8px; }
#mha-familienkarte .mha-nav button { min-height: 42px; padding: 8px 10px; font-size: 12px; gap: 10px; border: 0; border-radius: 7px 14px 8px 12px; white-space: normal; }
#mha-familienkarte .mha-nav button[aria-current='page'] { background: #604d2e0c; box-shadow: none; color: #573335; font-weight: 600; }
#mha-familienkarte .mha-nav button[aria-current='page']::after { content: ''; position: absolute; left: 36px; right: 10px; bottom: 2px; height: 5px; background: var(--mha-ink-line) center / 100% 100%; }
#mha-familienkarte .mha-nav button:hover { background: #604d2e10; }
#mha-familienkarte .mha-nav .mha-symbol { width: 21px; height: 21px; }
#mha-familienkarte .mha-side-caption { font: 500 20px/1.2 var(--mha-hand); margin-top: 8px; }
#mha-familienkarte .mha-kicker { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--mha-muted); }
#mha-familienkarte .mha-title { font: 500 clamp(34px, 3vw, 44px)/1.12 var(--mha-hand); letter-spacing: -.02em; margin-top: 2px; }
#mha-familienkarte .mha-heading-row { gap: 20px; margin-bottom: 20px; }
#mha-familienkarte .mha-ornament { display: block; width: 160px; height: 8px; font-size: 0; margin-top: 5px; background: var(--mha-ink-line) center / 100% 100%; }
#mha-familienkarte .mha-ornament::before, #mha-familienkarte .mha-ornament::after { display: none; }
#mha-familienkarte .mha-collection { gap: 24px; }
#mha-familienkarte .mha-note, #mha-familienkarte .mha-shelf, #mha-familienkarte .mha-recipe, #mha-familienkarte .mha-rank-row {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  border-top: 1px solid #77634580; padding: 20px 4px;
}
#mha-familienkarte .mha-shelf h2, #mha-familienkarte .mha-collection h2, #mha-familienkarte .mha-dialog h2 { font: 500 31px/1.16 var(--mha-hand); }
#mha-familienkarte .mha-toolbar { border-color: #79644970; }
#mha-familienkarte .mha-calendar { border-color: #79644980; border-radius: 8px 3px 9px 4px; background: #fffaf12b; box-shadow: none; }
#mha-familienkarte .mha-day-head { border-bottom-color: #79644990; }
#mha-familienkarte .mha-day-column { border-right-color: #79644948; }
#mha-familienkarte .mha-event { border-radius: 5px 12px 8px 4px; box-shadow: none; background: color-mix(in srgb, var(--event-color) 9%, #fcf7e9); }
#mha-familienkarte .mha-row { border-bottom-color: #79644948; }
#mha-familienkarte .mha-row small { font-size: 12px; }
#mha-familienkarte .mha-button { border: 1px solid #74634cc0; border-radius: 12px 17px 12px 15px / 15px 12px 16px 12px; min-height: 44px; padding: 10px 17px; background: #fffaf240; box-shadow: none; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#mha-familienkarte .mha-button:hover { background: #8b78591a; }
#mha-familienkarte .mha-button.mha-primary { background: #34564c; border-color: #34564c; color: #fff9e9; box-shadow: none; }
#mha-familienkarte .mha-button.mha-primary:hover { background: #29473e; }
#mha-familienkarte .mha-icon-button { border-color: #74634c75; border-radius: 50%; background: transparent; }
#mha-familienkarte .mha-input, #mha-familienkarte .mha-select, #mha-familienkarte textarea { background: #fffaf272; border-color: #847154b0; border-radius: 7px 11px 8px 10px; }
#mha-familienkarte :is(button,input,select,textarea,summary):focus-visible { outline: 2px solid #34564c; outline-offset: 3px; }
#mha-familienkarte .mha-dialog { border: 1px solid #75624d; border-radius: 9px 14px 11px 8px; background: linear-gradient(#fbf5e8c7,#fbf5e8c7),var(--mha-paper-image) center / cover; }
#mha-familienkarte svg.lucide { stroke-width: 1.8; }
#mha-familienkarte .mha-chapter-plan { opacity: .13; }
#mha-familienkarte .mha-chapter-sketch { top: 87px; width: min(32%, 400px); opacity: .21; }
#mha-familienkarte .mha-chapter-echo { opacity: .13; }
#mha-familienkarte .mha-background-walkers { opacity: .17; }
#mha-familienkarte .mha-footnote { min-height: 105px; padding: 20px 24px 12px; border-top-color: #79644955; }
#mha-familienkarte .mha-scribe { top: 12px; right: 9%; width: 195px; opacity: .72; }
#mha-familienkarte .mha-ink-sentence { font: 500 23px/1.05 var(--mha-hand); }
#mha-familienkarte .mha-toast { background: #34564c; }

/* The softly focused courtyard is supplied by family-cover-art.css. Only the mist moves. */
#mha-familienkarte .mha-cover-stage { background: #18201f; color: #f5eedc; justify-content: safe center; flex-direction: column; gap: 0; }
#mha-familienkarte .mha-cover-heading { position: relative; z-index: 2; font: 400 15px/1.4 'Manrope',sans-serif; text-transform: none; letter-spacing: .025em; color: #fffaf0; text-shadow: 0 2px 12px #14211f; margin-bottom: 18px; }
#mha-familienkarte .mha-cover-mist { position: absolute; inset: 20% -25% -8%; pointer-events: none; background: radial-gradient(ellipse at 20% 68%, #e3ece968, transparent 38%), radial-gradient(ellipse at 72% 80%, #ecf1e84a, transparent 42%); filter: blur(20px); will-change: transform; }
#mha-familienkarte .mha-cover-mist-far { animation: mha-mist-drift 22s -8s ease-in-out infinite alternate; opacity: .62; }
#mha-familienkarte .mha-cover-mist-near { top: 40%; opacity: .78; animation: mha-mist-drift 15s -6s ease-in-out infinite alternate-reverse; }
@keyframes mha-mist-drift { from { transform: translate3d(-12%, 2%, 0); } to { transform: translate3d(12%, -5%, 0); } }
#mha-familienkarte .mha-cover-folio { width: min(430px, 58dvh, 86vw); position: relative; z-index: 2; flex-shrink: 0; }
#mha-familienkarte .mha-cover-book { width: 100%; filter: drop-shadow(6px 18px 22px #07171490); }
#mha-familienkarte .mha-cover-lettering { position: absolute; z-index: 2; top: 51%; left: 23%; right: 23%; color: #fff0c8; text-align: center; font: 500 clamp(22px, 3.1vw, 37px)/1.07 var(--mha-hand); transform: rotate(-1deg); text-shadow: .4px .4px #2d1d19; }
#mha-familienkarte .mha-cover-lettering > span { display: block; font-size: .8em; margin-bottom: 6px; }
#mha-familienkarte .mha-cover-lettering strong { font-weight: 500; }
#mha-familienkarte .mha-cover-ribbon { position: absolute; left: 18%; right: 18%; top: 10.3%; color: #403329; font: 500 clamp(18px,2vw,25px)/1 var(--mha-hand); text-align: center; transform: rotate(-1deg); }
#mha-familienkarte .mha-cover-dedication { position: absolute; left: 18%; right: 18%; top: 20%; color: #403329; font: 500 clamp(22px,2.8vw,34px)/1 var(--mha-hand); text-align: center; }
#mha-familienkarte .mha-cover-controls { z-index: 2; margin-top: 20px; }
#mha-familienkarte .mha-cover-hint { color: #fff5dd; font: 500 23px/1.2 var(--mha-hand); text-shadow: 0 2px 10px #102b27; }
#mha-familienkarte .mha-cover-household { color: #efe9da; font: 400 12px 'Manrope',sans-serif; margin-top: 8px; text-shadow: 0 2px 8px #102b27; }
#mha-familienkarte[data-cover='opening'] .mha-cover-lettering { opacity: 0; transition: opacity .2s; }

/* Login is written on the closed cover, with no second page or modal behind it. */
#mha-familienkarte .mha-cover-clean-paper { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: url('/assets/images/family-map-login.svg') center / 100% 100%, var(--mha-paper-image) center / cover; background-blend-mode: multiply; }
#mha-familienkarte .mha-cover-ribbon, #mha-familienkarte .mha-cover-dedication { z-index: 2; }
#mha-familienkarte[data-login]:not([data-login='casting']) .mha-cover-clean-paper { opacity: 1; }
#mha-familienkarte[data-login]:not([data-login='casting']) :is(.mha-cover-lettering,.mha-cover-dedication,.mha-cover-ribbon) { opacity: 0; }
#mha-familienkarte[data-login] .mha-cover-book { pointer-events: none; }
#mha-familienkarte .mha-login-word { display: inline-block; white-space: nowrap; }
#mha-familienkarte .mha-login-glyph { display: inline-block; }
#mha-familienkarte .mha-cover-login[aria-busy='true'] .mha-login-actions button { border-bottom-color: transparent; }
#mha-familienkarte .mha-cover-login { position: absolute; inset: 23% 13% 10%; color: #302c28; overflow: auto; scrollbar-width: thin; transform: rotate(-.6deg); padding: 0 4px 10px; }
#mha-familienkarte .mha-cover-login h2 { margin: 0 0 15px; font: 500 clamp(28px,3.1vw,39px)/1.06 var(--mha-hand); text-align: center; text-shadow: .35px .25px #4d332b30; }
#mha-familienkarte .mha-cover-login label { font: 500 21px/1.15 var(--mha-hand); }
#mha-familienkarte .mha-cover-login .mha-input { font: 500 27px/1.2 var(--mha-hand); padding: 5px 3px; border: 0; border-bottom: 1.5px solid #594934; border-radius: 0 0 45% 8% / 0 0 4% 3%; background: transparent; box-shadow: none; min-height: 44px; }
#mha-familienkarte .mha-cover-login input[type='password'] { font-family: 'Manrope',sans-serif; font-size: 19px; letter-spacing: .12em; }
#mha-familienkarte .mha-cover-login input:autofill { -webkit-text-fill-color: #302c28; box-shadow: 0 0 0 60px #e4ce9c inset; }
#mha-familienkarte .mha-cover-login .mha-input:focus-visible { outline: 1px dashed #665239; outline-offset: 5px; }
#mha-familienkarte .mha-login-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 15px; }
#mha-familienkarte .mha-cover-login .mha-button { font: 500 25px/1 var(--mha-hand); min-height: 44px; border: 0; border-bottom: 1.5px solid #594934; border-radius: 50% 10% / 8% 30%; color: #302c28; background: transparent; padding: 8px 18px; }
#mha-familienkarte .mha-cover-login .mha-button:hover { background: #61482612; }
#mha-familienkarte .mha-cover-login .mha-error { font: 500 13px/1.4 'Manrope',sans-serif; padding: 6px 0; color: #782d2d; }
#mha-familienkarte .mha-cover-login .mha-error:empty { display: none; }
#mha-familienkarte .mha-login-loading { font: 500 28px var(--mha-hand); text-align: center; }

/* One personal treasure, then a wish list. No competing wallet cards. */
#mha-familienkarte .mha-treasury { max-width: 1060px; }
#mha-familienkarte .mha-treasure-people { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
#mha-familienkarte .mha-treasure-person { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; max-width: 100%; padding: 4px 16px 4px 5px; border: 1px solid transparent; border-radius: 28px 24px 27px 22px; background: transparent; font-size: 14px; }
#mha-familienkarte .mha-treasure-person > span:last-child { overflow-wrap: anywhere; }
#mha-familienkarte .mha-treasure-person[aria-pressed='true'] { border-color: #716048; background: #fffaf266; }
#mha-familienkarte .mha-treasure-initial { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #85745780; border-radius: 49% 46% 48% 45%; font: 500 28px var(--mha-hand); }
#mha-familienkarte .mha-treasure-person[aria-pressed='true'] .mha-treasure-initial { color: #fff8e3; background: #34564c; border-color: #34564c; }
#mha-familienkarte .mha-treasure-balance { display: flex; align-items: center; gap: 24px; padding: 24px 0 30px; position: relative; }
#mha-familienkarte .mha-treasure-balance::after { content: ''; position: absolute; inset: auto 0 0; height: 8px; background: var(--mha-ink-line) center / 100% 100%; }
#mha-familienkarte .mha-treasure-balance > div:nth-child(2) { flex: 1; min-width: 0; }
#mha-familienkarte .mha-treasure-name { font: 500 25px/1.2 var(--mha-hand); overflow-wrap: anywhere; }
#mha-familienkarte .mha-treasure-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1.2; margin: 4px 0; }
#mha-familienkarte .mha-treasure-total strong { font: 500 clamp(42px,4vw,58px)/1.1 'Manrope',sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
#mha-familienkarte .mha-treasure-total > span { font: 500 28px var(--mha-hand); }
#mha-familienkarte .mha-treasure-hint { font-size: 13px; color: var(--mha-muted); }
#mha-familienkarte .mha-coin { display: inline-grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px; border: 1px solid #896223; border-radius: 48% 51% 47% 49%; color: #74501a; font: 16px Georgia,serif; background: radial-gradient(circle at 30% 25%, #f4d98f, #d6ae56 65%, #bd8a31); box-shadow: inset 0 0 0 2px #efd18b, inset 0 0 0 3px #a8792b, 0 2px 0 #926822; }
#mha-familienkarte .mha-coin-pile { width: 115px; height: 104px; position: relative; flex-shrink: 0; }
#mha-familienkarte .mha-coin-pile .mha-coin { position: absolute; width: 70px; height: 70px; font-size: 41px; box-shadow: inset 0 0 0 4px #efd18b, inset 0 0 0 5px #a8792b, 0 3px 0 #926822, 1px 8px 9px #78551e29; }
#mha-familienkarte .mha-coin-pile .mha-coin:nth-child(1) { left: 2px; bottom: 7px; transform: rotate(-17deg); }
#mha-familienkarte .mha-coin-pile .mha-coin:nth-child(2) { right: 0; bottom: 12px; transform: rotate(12deg); }
#mha-familienkarte .mha-coin-pile .mha-coin:nth-child(3) { left: 25px; top: 0; transform: rotate(-8deg); }
#mha-familienkarte .mha-treasure-section-heading { margin: 25px 0 4px; }
#mha-familienkarte .mha-treasure-section-heading h2 { font: 500 32px/1.2 var(--mha-hand); }
#mha-familienkarte .mha-treasure-section-heading p { font-size: 13px; color: var(--mha-muted); margin-top: 3px; }
#mha-familienkarte .mha-wish { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid #85745770; }
#mha-familienkarte .mha-wish-emoji { display: grid; place-items: center; width: 64px; height: 64px; font: 40px/1 'Segoe UI Emoji',sans-serif; background: #fffaf252; border-radius: 48% 53% 43% 57%; }
#mha-familienkarte .mha-wish-copy h3 { font: 500 29px/1.2 var(--mha-hand); overflow-wrap: anywhere; }
#mha-familienkarte .mha-wish-price { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 5px 0 9px; }
#mha-familienkarte .mha-wish-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: #665b4b; }
#mha-familienkarte .mha-wish-progress progress { appearance: none; width: min(150px,100%); height: 7px; border: 0; border-radius: 5px; background: #b5a18345; overflow: hidden; }
#mha-familienkarte progress::-webkit-progress-bar { background: #b5a18345; border-radius: 5px; }
#mha-familienkarte progress::-webkit-progress-value { background: #ad7e31; border-radius: 5px; }
#mha-familienkarte progress::-moz-progress-bar { background: #ad7e31; border-radius: 5px; }
#mha-familienkarte .is-ready progress::-webkit-progress-value { background: #34564c; }
#mha-familienkarte .is-ready progress::-moz-progress-bar { background: #34564c; }
#mha-familienkarte .is-ready .mha-wish-progress { color: #34564c; }
#mha-familienkarte .mha-wish > button { min-width: 134px; min-height: 48px; }
#mha-familienkarte .mha-wish > button:disabled { opacity: 1; color: #76684f; background: transparent; border-color: #a8977766; }
#mha-familienkarte .mha-treasure-details { border-bottom: 1px solid #85745750; }
#mha-familienkarte .mha-treasure-details summary { cursor: pointer; min-height: 54px; padding: 16px 2px; font-size: 13px; }
#mha-familienkarte .mha-treasure-details summary svg { vertical-align: middle; margin: 0 6px; }
#mha-familienkarte .mha-treasure-details > div { padding: 0 4px 20px; }
#mha-familienkarte .mha-treasure-manage > p { color: var(--mha-muted); font-size: 13px; }
#mha-familienkarte .mha-treasure-manage .mha-form-actions { justify-content: flex-start; margin: 12px 0; }
#mha-familienkarte .mha-coins-earned { color: #34564c; }
#mha-familienkarte .mha-ledger-unit { font-size: 11px; font-weight: 400; }
#mha-familienkarte .mha-redeem-preview { text-align: center; }
#mha-familienkarte .mha-redeem-preview .mha-wish-emoji { margin: 0 auto 12px; }
#mha-familienkarte .mha-redeem-preview h2 { margin: 0 0 12px; }
#mha-familienkarte .mha-redeem-receipt { margin: 24px 0; }
#mha-familienkarte .mha-redeem-receipt > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; }
#mha-familienkarte .mha-redeem-receipt > div:last-child { border-top: 1.5px solid #796449; font-weight: 600; color: #34564c; }
#mha-familienkarte .mha-redeem-receipt dd { margin: 0; text-align: right; }

@media (max-width: 1100px) and (min-width: 761px) {
  #mha-familienkarte .mha-frame { grid-template-columns: 170px minmax(0,1fr); grid-template-rows: auto 1fr auto; }
  #mha-familienkarte .mha-sidebar { display: flex; grid-row: 2; border-right: 1px solid #79644945; border-bottom: 0; padding: 18px 8px; }
  #mha-familienkarte .mha-nav { display: flex; flex-direction: column; }
  #mha-familienkarte .mha-nav button { flex-direction: row; justify-content: flex-start; text-align: left; font-size: 12px; }
  #mha-familienkarte .mha-main { grid-row: 2; }
  #mha-familienkarte .mha-footnote { grid-row: 3; }
  #mha-familienkarte .mha-treasure-balance { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  #mha-familienkarte { padding: 4px; }
  #mha-familienkarte .mha-frame { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr auto; min-height: calc(100dvh - 90px); }
  #mha-familienkarte .mha-main { grid-row: 2; }
  #mha-familienkarte .mha-footnote { grid-row: 3; min-height: 140px; padding: 16px 14px 10px; font-size: 11px; }
  #mha-familienkarte .mha-main, #mha-familienkarte[data-linked='true'] .mha-main { padding: 22px 16px 24px; }
  #mha-familienkarte .mha-masthead { grid-template-columns: 35px minmax(0,1fr) auto; gap: 7px; padding: 7px 12px; min-height: 56px; }
  #mha-familienkarte .mha-monogram, #mha-familienkarte .mha-brand-logo { width: 35px; height: 40px; }
  #mha-familienkarte .mha-brand { font-size: 22px; }
  #mha-familienkarte .mha-account { grid-column: auto; gap: 4px; }
  #mha-familienkarte .mha-identity-button { width: 40px; min-height: 40px; justify-content: center; padding: 6px; }
  #mha-familienkarte .mha-identity-button span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  #mha-familienkarte .mha-account:has(.mha-connection-status:not([hidden])) { grid-column: 2 / -1; flex-wrap: wrap; }
  #mha-familienkarte .mha-connection-status { text-align: left; max-width: none; }
  #mha-familienkarte .mha-heading-row { align-items: flex-start; gap: 12px; }
  #mha-familienkarte .mha-title { font-size: 35px; }
  #mha-familienkarte .mha-scribe { top: 49px; right: 12%; width: 176px; }
  #mha-familienkarte .mha-ink-sentence { font-size: 21px; }
  #mha-familienkarte .mha-mobile-nav { border-top: 1.5px solid #74634c; background: linear-gradient(#f7efddcc,#f7efddcc),var(--mha-paper-image) center / cover; }
  #mha-familienkarte .mha-mobile-nav button[aria-current='page'] { background: transparent; }
  #mha-familienkarte .mha-more-grid button { background: transparent; border: 0; border-bottom: 1px solid #79644965; border-radius: 0; }
  #mha-familienkarte .mha-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  #mha-familienkarte .mha-cover-folio { width: min(420px, 62dvh, 88vw); }
  #mha-familienkarte .mha-cover-heading { font-size: 12px; margin-bottom: 16px; }
  #mha-familienkarte .mha-cover-controls { margin-top: 18px; }
  #mha-familienkarte .mha-cover-hint { font-size: 22px; }
  #mha-familienkarte .mha-treasure-balance { gap: 16px; padding: 16px 0 24px; flex-wrap: wrap; }
  #mha-familienkarte .mha-coin-pile { transform: scale(.8); transform-origin: left center; width: 90px; margin-right: -4px; }
  #mha-familienkarte .mha-treasure-name { font-size: 23px; }
  #mha-familienkarte .mha-treasure-hint { font-size: 12px; }
  #mha-familienkarte .mha-treasure-balance > .mha-button { width: 100%; }
  #mha-familienkarte .mha-wish { grid-template-columns: 48px minmax(0,1fr); gap: 10px 14px; padding: 20px 0; }
  #mha-familienkarte .mha-wish-emoji { width: 48px; height: 52px; font-size: 32px; align-self: start; }
  #mha-familienkarte .mha-wish > button { grid-column: 2; justify-self: start; min-width: 144px; }
  #mha-familienkarte .mha-treasure-person { padding-right: 10px; font-size: 13px; }
  #mha-familienkarte .mha-wish-copy h3 { font-size: 28px; }
  #mha-familienkarte .mha-input, #mha-familienkarte .mha-select, #mha-familienkarte textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  #mha-familienkarte .mha-cover-stage { padding-left: 8px; padding-right: 8px; }
  #mha-familienkarte .mha-cover-login { inset: 21% 12% 10%; }
  #mha-familienkarte .mha-cover-login h2 { font-size: 29px; margin-bottom: 10px; }
  #mha-familienkarte .mha-cover-login form > label { margin: 9px 0; }
  #mha-familienkarte .mha-cover-login label { font-size: 19px; }
  #mha-familienkarte .mha-cover-login .mha-input { font-size: 23px; }
  #mha-familienkarte .mha-cover-login .mha-button { font-size: 23px; }
  #mha-familienkarte .mha-treasure-balance { gap: 10px; }
  #mha-familienkarte .mha-coin-pile { width: 70px; transform: scale(.65); }
  #mha-familienkarte .mha-brand { font-size: 21px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  #mha-familienkarte .mha-cover-folio { width: 340px; }
  #mha-familienkarte .mha-cover-stage { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #mha-familienkarte .mha-cover-mist { animation: none; will-change: auto; }
}
#mha-familienkarte[data-motion='off'] .mha-cover-mist { animation: none; will-change: auto; }
#mha-familienkarte[data-hidden='true'] .mha-cover-mist { animation-play-state: paused; }

/* The household name belongs directly above the clock. */
#mha-familienkarte[data-chapter='clock'] #family-main { padding-top: 12px; }
#mha-familienkarte .mha-clock-layout { margin-top: 0; }
#mha-familienkarte .mha-clock-case { padding-top: 0; }
#mha-familienkarte .mha-clock-family-name { font: 500 clamp(34px, 3.8vw, 52px)/1.15 'Caveat', cursive; margin: 0 0 4px; color: var(--mha-ink); }
#mha-familienkarte .mha-family-clock { margin-top: 0; }