/* Aged paper, writing ink and people living in the map rather than in a toolbar. */
#mha-familienkarte {
  --mha-paper: #e6d2ac; --mha-light: #f3e7cc; --mha-ink: #382921; --mha-muted: #715943; --mha-decor: .32;
  --mha-paper-image: url('/assets/images/aged-paper.webp');
  background: linear-gradient(100deg, #8b613a12, #fff5dc15 42%, #81542d18), var(--mha-paper-image) center / cover, var(--mha-paper);
  box-shadow: inset 0 0 95px #7d512c32, 0 12px 80px #140d0960;
}
#mha-familienkarte::before { z-index: -1; background: linear-gradient(90deg, transparent 29.6%, #72533322 30%, #fff6df33 30.3%, transparent 30.9%, transparent 69.1%, #60422923 69.6%, #fff9e33b 69.9%, transparent 70.7%), linear-gradient(0deg, transparent 49.7%, #69442b18 50%, #fff9df25 50.3%, transparent 50.8%); }
#mha-familienkarte .mha-frame { z-index: 1; grid-template-rows: auto 1fr auto; }
#mha-familienkarte .mha-sidebar, #mha-familienkarte .mha-main { grid-row: 2; }
#mha-familienkarte .mha-footnote { grid-row: 3; position: relative; min-height: 150px; align-items: flex-end; }
#mha-familienkarte .mha-drawing { color: #62452f; }
#mha-familienkarte .mha-hand-drawing { opacity: .2; color: #62442d; }
#mha-familienkarte .mha-drawing text, #mha-familienkarte .mha-hand-drawing text { font-family: 'IM Fell English', Georgia, serif; font-style: italic; letter-spacing: 1px; filter: url('#mha-ink-bleed'); }
#mha-familienkarte .mha-main { perspective: 1800px; }
#mha-familienkarte[data-linked='true'] .mha-main { padding-top: 103px; }
#mha-familienkarte .mha-title, #mha-familienkarte .mha-brand { text-shadow: .35px .25px #62432b24; }
#mha-familienkarte .mha-monogram::before, #mha-familienkarte .mha-monogram::after { display: none; }
#mha-familienkarte .mha-brand-logo { display: block; width: 68px; height: 68px; object-fit: contain; pointer-events: none; }
#mha-familienkarte .mha-note, #mha-familienkarte .mha-shelf, #mha-familienkarte .mha-recipe, #mha-familienkarte .mha-rank-row { border-radius: 1px 4px 2px 3px; border-color: #8d673c55; background: linear-gradient(#f8efdbb8, #f8efdba8), var(--mha-paper-image) center / cover, #f2e5c8; box-shadow: 1px 3px 0 #a58c6320, 0 8px 16px #75513408; }
#mha-familienkarte .mha-calendar { background: linear-gradient(#f8efdbe8, #f8efdbe8), var(--mha-paper-image) center / cover; }
#mha-familienkarte .mha-dialog { background: linear-gradient(#f8ebd1bb, #f8ebd1bb), var(--mha-paper-image) center / cover; }

/* Staggered gatefold. The slight initial resistance and changing shade reveal the crease. */
#mha-familienkarte .mha-cover-book { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; transform: rotate(-1.4deg); perspective: 1800px; touch-action: manipulation; }
#mha-familienkarte .mha-cover-book:disabled { opacity: 1; }
#mha-familienkarte .mha-cover-book:focus-visible { outline: 2px solid #ead4a4; outline-offset: 12px; }
#mha-familienkarte .mha-cover-book > span { pointer-events: none; }
#mha-familienkarte .mha-cover-hint { color: #e5cda0; font: italic 16px 'IM Fell English', Georgia, serif; }
/* One wooden-wand tap on the crest, followed by the existing gatefold. */
#mha-familienkarte .mha-map-spell { position: absolute; inset: 0; z-index: 6; visibility: hidden; pointer-events: none; }
#mha-familienkarte .mha-map-spell > svg { width: 100%; height: 100%; overflow: visible; }
#mha-familienkarte .mha-tapping-wand, #mha-familienkarte .mha-wand-light { opacity: 0; transform-box: view-box; transform-origin: 200px 354px; }
#mha-familienkarte .mha-tapping-wand { transform-origin: 341px 505px; filter: drop-shadow(2px 4px 2px #170e0a48); }
#mha-familienkarte[data-spell='casting'] .mha-map-spell { visibility: visible; }
#mha-familienkarte[data-spell='casting'] .mha-tapping-wand { will-change: transform,opacity; animation: mha-wand-tap 1.32s linear both; }
#mha-familienkarte[data-spell='casting'] .mha-wand-light { animation: mha-wand-touch .62s .58s ease-out both; }
@keyframes mha-wand-tap {
  0% { opacity: 0; transform: translate3d(74px,48px,0) rotate(13deg); animation-timing-function: cubic-bezier(.16,.7,.3,1); }
  35% { opacity: 1; transform: translate3d(1px,-7px,0) rotate(-3deg); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  49% { opacity: 1; transform: translate3d(0,0,0) rotate(0deg); animation-timing-function: cubic-bezier(.35,0,.65,1); }
  65% { opacity: 1; transform: translate3d(3px,-10px,0) rotate(2deg); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  100% { opacity: 0; transform: translate3d(90px,38px,0) rotate(15deg); }
}
@keyframes mha-wand-touch {
  0% { opacity: 0; transform: scale(.15); }
  18% { opacity: .95; transform: scale(.65); }
  55% { opacity: .65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { #mha-familienkarte .mha-map-spell { display: none !important; } }
#mha-familienkarte[data-motion='off'] .mha-map-spell { display: none !important; }
#mha-familienkarte .mha-cover-book::before { background: url('/assets/images/family-map-interior.svg') center / 100% 100%, var(--mha-paper-image) center / cover; background-blend-mode: multiply; }
#mha-familienkarte .mha-cover-leaf { background-image: url('/assets/images/family-map-cover.svg'), var(--mha-paper-image); background-size: 200% 100%; background-blend-mode: multiply; }
#mha-familienkarte .mha-cover-leaf::before { background: url('/assets/images/family-map-interior.svg') center / 200% 100%, var(--mha-paper-image) center / cover; background-blend-mode: multiply; box-shadow: inset 0 0 24px #68442b30; }
#mha-familienkarte .mha-cover-leaf::after { backface-visibility: hidden; transform: translateZ(.8px); }
#mha-familienkarte[data-cover='opening'] .mha-cover-stage { animation: mha-aged-cover-reveal 1.7s both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-left { animation: mha-aged-open-left 1.5s cubic-bezier(.35,.03,.25,1) both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-right { animation: mha-aged-open-right 1.5s .16s cubic-bezier(.35,.03,.25,1) both; }
#mha-familienkarte[data-cover='opening'] .mha-cover-book { animation: mha-aged-expand 1.7s ease both; }
#mha-familienkarte[data-cover='opening'] > .mha-frame { animation: mha-aged-inner-reveal 1.7s both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-left { animation: mha-aged-open-left 1.2s .12s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-right { animation: mha-aged-open-right 1.2s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-stage { animation: mha-aged-cover-reveal 1.35s reverse both; }
#mha-familienkarte[data-cover='closing'] .mha-cover-controls, #mha-familienkarte[data-cover='closing'] .mha-cover-heading { animation: mha-aged-inner-reveal 1.35s both; }
@keyframes mha-aged-open-left { 0% { transform: rotateY(0); } 18% { transform: rotateY(-8deg) rotateZ(-.5deg); } 60% { filter: brightness(.8); } 100% { transform: rotateY(-158deg); filter: brightness(.92); } }
@keyframes mha-aged-open-right { 0% { transform: rotateY(0); } 18% { transform: rotateY(6deg) rotateZ(.4deg); } 60% { filter: brightness(.78); } 100% { transform: rotateY(158deg); filter: brightness(.92); } }
@keyframes mha-aged-expand { 40% { transform: rotate(-.3deg) scale(1.04); } 100% { transform: rotate(0) scale(1.6); } }
@keyframes mha-aged-cover-reveal { 0%,60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mha-aged-inner-reveal { 0%,40% { opacity: 0; } 100% { opacity: 1; } }

/* Others wander below content. The account's chosen person follows the active chapter. */
#mha-familienkarte .mha-background-walkers { z-index: 0; opacity: .48; mix-blend-mode: multiply; }
#mha-familienkarte .mha-foreground-walkers { z-index: 4; }
#mha-familienkarte[data-turning='true'] > .mha-foreground-walkers { visibility: hidden; }
#mha-familienkarte .mha-name-ribbon text { filter: url('#mha-ink-bleed'); }
#mha-familienkarte .mha-map-person-self .mha-ribbon-face { fill: #f2dfb6; stroke: #703b32; stroke-width: 1.1; }
#mha-familienkarte .mha-map-person-self .mha-shoe-print { fill: #532b27; }
#mha-familienkarte .mha-account { display: grid; justify-items: end; gap: 6px; }
#mha-familienkarte .mha-identity-button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; min-height: 40px; border: 0; border-bottom: 1px solid #87674360; background: #edddbc60; font: italic 16px 'IM Fell English', Georgia, serif; text-align: left; }
#mha-familienkarte .mha-identity-button svg { width: 20px; height: 25px; fill: currentColor; flex-shrink: 0; }
#mha-familienkarte .mha-identity-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 18px 0; }
#mha-familienkarte .mha-identity-card p { max-width: 600px; }
#mha-familienkarte .mha-identity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
#mha-familienkarte .mha-identity-option { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 13px; border: 1px solid #90724960; cursor: pointer; background: #fff2d240; }
#mha-familienkarte .mha-identity-option:has(input:checked) { border-color: #743b37; background: #b9895c20; }
#mha-familienkarte .mha-identity-option small { display: block; margin-top: 3px; color: #755d44; font-size: 11px; }
#mha-familienkarte .mha-identity-option input { accent-color: #713439; width: 18px; height: 18px; flex-shrink: 0; }
#mha-familienkarte .mha-identity-option.is-claimed { opacity: .6; cursor: default; }

/* The actual old page travels with three connected paper sections. */
#mha-familienkarte .mha-turning-leaf { inset: auto; top: 0; left: 0; z-index: 20; display: block; overflow: visible; perspective: 1800px; transform-style: preserve-3d; background: none; border: 0; box-shadow: none; }
#mha-familienkarte .mha-turning-leaf::before { display: none; }
#mha-familienkarte .mha-turning-leaf span { font: inherit; color: inherit; }
#mha-familienkarte .mha-paper-section { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
#mha-familienkarte .mha-paper-face, #mha-familienkarte .mha-paper-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: var(--mha-paper-image) center / cover, #e2cda6; }
#mha-familienkarte .mha-paper-face { transform: translateZ(.3px); box-shadow: inset -5px 0 12px #5b3e251b; }
#mha-familienkarte .mha-paper-back { transform: rotateY(180deg) translateZ(.3px); background: url('/assets/images/family-map-interior.svg') center / cover, var(--mha-paper-image) center / cover; background-blend-mode: multiply; border-left: 1px solid #8c673d55; box-shadow: inset 16px 0 24px #62402538; }
#mha-familienkarte .mha-page-imprint { position: absolute; top: 0; }

/* Every chapter has its own ink illustration, room names and floor plan. */
#mha-familienkarte[data-chapter] > .mha-drawing,
#mha-familienkarte[data-chapter] > .mha-hand-drawing { visibility: hidden; }
#mha-familienkarte .mha-chapter-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; color: #63432e; }
#mha-familienkarte .mha-chapter-plan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .23; }
#mha-familienkarte .mha-chapter-sketch { position: absolute; width: min(43%, 565px); height: auto; top: 119px; right: 5%; opacity: .36; }
#mha-familienkarte .mha-chapter-echo { position: absolute; width: 330px; bottom: 120px; left: -65px; opacity: .17; transform: rotate(-13deg); }
#mha-familienkarte .mha-chapter-backdrop text,
#mha-familienkarte .mha-chapter-reverse text { fill: currentColor; stroke: none; font-family: 'IM Fell English', Georgia, serif; font-style: italic; filter: url('#mha-ink-bleed'); }
#mha-familienkarte .mha-chapter-room-labels { font-size: 13px; letter-spacing: 2px; }
#mha-familienkarte .mha-scene-title { font-size: 18px; letter-spacing: .7px; }
#mha-familienkarte .mha-page-imprint { isolation: isolate; }
#mha-familienkarte .mha-paper-back:has(.mha-chapter-reverse) { background-image: var(--mha-paper-image); }
#mha-familienkarte .mha-chapter-reverse { position: absolute; top: 20px; height: auto; color: #63432e; opacity: .5; }

/* A quill writes once per chapter, then the writing stays quietly in the background. */
#mha-familienkarte .mha-scribe { position: absolute; z-index: 0; right: 7%; top: 30px; width: 225px; transform: rotate(-5deg); pointer-events: none; color: #67432d; opacity: .65; }
#mha-familienkarte .mha-ink-sentence { display: block; font: italic 23px/1.15 'IM Fell English', Georgia, serif; filter: url('#mha-ink-bleed'); }
#mha-familienkarte .mha-footnote .mha-scribe .mha-ink-line { display: block; font: inherit; letter-spacing: 0; white-space: nowrap; }
#mha-familienkarte .mha-ink-flourish { display: block; width: 100%; height: 28px; fill: none; stroke: currentColor; stroke-width: .9; }
#mha-familienkarte .mha-quill { position: absolute; display: none; width: 70px; height: 100px; bottom: 16px; left: 0; transform-origin: 8% 96%; }
#mha-familienkarte .mha-quill svg { width: 100%; height: 100%; }
#mha-familienkarte[data-scribing='true'] .mha-ink-line { animation: mha-write-sentence 2.25s linear both; }
#mha-familienkarte[data-scribing='true'] .mha-ink-line + .mha-ink-line { animation-delay: 2.5s; }
#mha-familienkarte[data-scribing='true'] .mha-ink-flourish { animation: mha-write-sentence .65s 4.75s linear both; }
#mha-familienkarte[data-scribing='true'] .mha-quill { display: block; animation: mha-quill-travel 5.4s linear both; }
#mha-familienkarte[data-scribing='true'] .mha-quill svg { animation: mha-quill-stroke .21s alternate infinite ease-in-out; transform-origin: 8% 96%; }
@keyframes mha-write-sentence { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mha-quill-travel { 0% { left: 0; bottom: 46px; opacity: 0; } 5% { opacity: 1; } 43% { left: 94%; bottom: 43px; } 48% { left: 0; bottom: 20px; } 88% { left: 91%; bottom: 19px; opacity: 1; } 92% { left: 0; bottom: 0; } 100% { left: 95%; bottom: 0; opacity: 0; } }
@keyframes mha-quill-stroke { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(-4deg) translateY(-1.5px); } }

#mha-familienkarte .mha-mobile-nav { display: none; }
#mha-familienkarte .mha-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#mha-familienkarte .mha-more-grid button { display: flex; align-items: center; gap: 10px; min-height: 58px; background: #f6e8cd65; border: 1px solid #95754d55; padding: 13px; text-align: left; }
#mha-familienkarte .mha-more-grid button[aria-current='page'] { border-color: var(--mha-wine); background: #b7855c20; color: var(--mha-wine); }
@media (max-width: 850px) {
  #mha-familienkarte .mha-frame { grid-template-rows: auto auto 1fr auto; }
  #mha-familienkarte .mha-main { grid-row: 3; }
  #mha-familienkarte .mha-footnote { grid-row: 4; }
}
@media (max-width: 760px) {
  #mha-familienkarte .mha-chapter-sketch { width: 310px; right: -40px; top: 167px; opacity: .24; }
  #mha-familienkarte .mha-chapter-echo { display: none; }
  #mha-familienkarte .mha-chapter-plan { opacity: .16; }
  #mha-familienkarte[data-entry='false'][data-cover='open'] { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  #mha-familienkarte .mha-sidebar { display: none; }
  #mha-familienkarte[data-entry='false'][data-cover='open'] .mha-mobile-nav { display: grid; }
  #mha-familienkarte .mha-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 24; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border-top: 3px double #927247; box-shadow: 0 -5px 18px #4e35271c; background: linear-gradient(#f1e2c6cc, #f1e2c6cc), var(--mha-paper-image) center / cover; }
  #mha-familienkarte .mha-mobile-nav button { position: relative; min-height: 58px; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; font-size: 10px; }
  #mha-familienkarte .mha-mobile-nav svg { width: 21px; height: 21px; }
  #mha-familienkarte .mha-mobile-nav button[aria-current='page'] { color: #713439; background: #a6764b18; }
  #mha-familienkarte .mha-mobile-nav button[aria-current='page']::before { content: ''; position: absolute; top: -5px; left: 22%; right: 22%; height: 2px; background: #713439; }
  #mha-familienkarte .mha-more-dialog { margin: auto 0 0; inset: auto 0 0; max-width: none; width: 100%; max-height: 85dvh; padding-bottom: max(25px, env(safe-area-inset-bottom)); border-radius: 13px 13px 0 0; }
}
@media (max-width: 560px) {
  #mha-familienkarte .mha-masthead { grid-template-columns: 48px minmax(0, 1fr); }
  #mha-familienkarte .mha-brand-logo { width: 48px; height: 48px; }
  #mha-familienkarte { --mha-decor: .22; }
  #mha-familienkarte .mha-hand-drawing { display: block; opacity: .14; }
  #mha-familienkarte .mha-account { grid-column: 1 / -1; justify-items: start; gap: 5px; }
  #mha-familienkarte .mha-identity-button { font-size: 15px; min-height: 44px; }
  #mha-familienkarte .mha-identity-card { align-items: flex-start; flex-direction: column; }
  #mha-familienkarte .mha-identity-options { grid-template-columns: 1fr; }
  #mha-familienkarte .mha-scribe { right: 17%; width: 198px; opacity: .6; }
  #mha-familienkarte .mha-ink-sentence { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { #mha-familienkarte .mha-quill { display: none !important; } #mha-familienkarte .mha-ink-line, #mha-familienkarte .mha-ink-flourish { clip-path: none !important; } }
#mha-familienkarte[data-motion='off'] .mha-quill { display: none !important; }