/* Portrait gallery: ink teal, aged brass and the app's existing book typography. */
#mha-familienkarte .mha-character-games{--cg-ink:#183c43;--cg-brass:#cda767;--cg-paper:#f5efdd;--cg-plum:#685278;color:var(--cg-ink);max-width:1080px;margin:auto}
#mha-familienkarte .mha-character-gallery{display:flex;justify-content:center;align-items:center;gap:14px;height:200px;margin:10px 0 28px}
#mha-familienkarte .mha-character-photo{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#244951;border-radius:44% 44% 6px 6px;isolation:isolate}
#mha-familienkarte .mha-character-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
#mha-familienkarte .mha-character-photo>span{display:grid;place-items:center;height:100%;font:60px Georgia;color:var(--cg-brass)}
#mha-familienkarte .mha-character-gallery>.mha-character-photo{width:110px;box-shadow:0 0 0 3px #f5efdd,0 0 0 5px #a18450,0 12px 18px #183c4325;transform:rotate(-7deg)}
#mha-familienkarte .mha-character-gallery>.mha-character-photo:nth-child(2n){transform:rotate(5deg) translateY(10px)}
#mha-familienkarte .mha-character-gallery>.mha-character-photo:nth-child(3){width:140px;transform:translateY(-8px);z-index:1}
#mha-familienkarte .mha-character-intro{text-align:center;max-width:660px;margin:auto}
#mha-familienkarte .mha-character-intro h2{font:42px/1.1 'IM Fell English',Georgia,serif;margin:0 0 12px}
#mha-familienkarte .mha-character-intro p{font-size:14px;line-height:1.8}
#mha-familienkarte .mha-character-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}
#mha-familienkarte .mha-character-tabs button{display:grid;gap:8px;min-height:94px;border:1px solid #7b8d8277;border-radius:8px;background:#f5efdd99;padding:19px;text-align:left;color:var(--cg-ink);cursor:pointer;font:13px Manrope,sans-serif}
#mha-familienkarte .mha-character-tabs strong{font:28px/1.2 'IM Fell English',Georgia,serif}
#mha-familienkarte .mha-character-tabs button[aria-pressed=true]{background:var(--cg-ink);color:var(--cg-paper);border-color:var(--cg-ink);box-shadow:inset 0 -4px var(--cg-brass)}
#mha-familienkarte .mha-character-settings{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#mha-familienkarte .mha-character-settings label{display:grid;gap:9px;font-size:13px}
#mha-familienkarte .mha-character-settings p{grid-column:1/-1;margin:0;max-width:75ch;font-size:13px;line-height:1.8}
#mha-familienkarte .mha-character-games input,#mha-familienkarte .mha-character-games select{width:100%;min-width:0;max-width:100%}
#mha-familienkarte .mha-pyramid-settings>p{font-size:13px;line-height:1.8;max-width:78ch}
#mha-familienkarte .mha-pyramid-settings>label{display:flex;gap:15px;align-items:center;margin:13px 0}
#mha-familienkarte .mha-pyramid-settings>label>span:last-child{flex:1;min-width:0;display:grid;gap:6px;font-size:12px}
#mha-familienkarte .mha-pyramid-count{display:grid;place-items:center;width:42px;height:42px;background:var(--cg-ink);color:var(--cg-paper);font:26px Georgia;clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:7px;flex:none}
#mha-familienkarte .mha-character-config-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:18px 0}
#mha-familienkarte .mha-character-config-actions>span{font-size:12px}
#mha-familienkarte .mha-character-validation{color:#286353;font-weight:600}
#mha-familienkarte .mha-character-validation.is-error{color:#963f35}
#mha-familienkarte .mha-character-start,#mha-familienkarte .mha-character-actions{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0 16px}
#mha-familienkarte .mha-character-guide{border-top:1px solid #a1845070;padding-top:15px;margin:28px 0;font-size:12px;line-height:1.8}
#mha-familienkarte .mha-character-guide summary{cursor:pointer;font-weight:600;min-height:40px}
#mha-familienkarte .mha-character-guide dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
#mha-familienkarte .mha-character-guide dt{font-weight:700}#mha-familienkarte .mha-character-guide dd{margin:2px 0}
#mha-familienkarte .mha-character-play-title{display:flex;align-items:start;justify-content:space-between;gap:14px;margin:15px 0 25px}
#mha-familienkarte .mha-character-play-title h2{font:32px/1.15 'IM Fell English',Georgia,serif;margin:0 0 8px;overflow-wrap:anywhere}
#mha-familienkarte .mha-character-play-title p{font-size:12px;line-height:1.6;margin:0;max-width:65ch}
#mha-familienkarte .mha-character-progress{font:26px Georgia;border-bottom:3px solid var(--cg-brass);white-space:nowrap;padding-bottom:8px}
#mha-familienkarte .mha-character-table{display:grid;grid-template-columns:230px minmax(0,1fr);gap:35px;align-items:start}
#mha-familienkarte .mha-character-draw{position:sticky;top:20px;text-align:center;min-width:0}
#mha-familienkarte .mha-character-drawn-frame{position:relative;margin:8px 12px 26px;border:6px double var(--cg-brass);border-radius:46% 46% 9px 9px;padding:5px;background:var(--cg-ink);box-shadow:0 12px 28px #183c4329}
#mha-familienkarte .mha-character-draw-seal{position:absolute;bottom:-16px;left:calc(50% - 19px);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cg-brass);color:var(--cg-ink);border:3px double #f5efdd;font:24px Georgia}
#mha-familienkarte .mha-character-draw p{font-size:11px;margin:0 0 8px}
#mha-familienkarte .mha-character-draw h3{font:30px/1.2 'IM Fell English',Georgia,serif;margin:0 0 10px}
#mha-familienkarte .mha-character-draw>div>span:not(.mha-character-draw-seal):not(.mha-character-photo){font-size:12px;line-height:1.7}
#mha-familienkarte .mha-character-ranking{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,minmax(74px,auto));grid-auto-flow:column;gap:10px}
#mha-familienkarte .mha-character-slot{display:flex;align-items:center;position:relative;gap:9px;min-width:0;min-height:74px;padding:8px;background:#f9f3e5b8;color:var(--cg-ink);border:1px dashed #8b8e7880;border-radius:6px;text-align:left;font:12px/1.4 Manrope,sans-serif;cursor:pointer}
#mha-familienkarte .mha-character-slot:hover:enabled{background:#e3eddf;border-color:#418478;border-style:solid}
#mha-familienkarte .mha-character-slot:focus-visible,#mha-familienkarte .mha-character-tabs button:focus-visible{outline:3px solid #43897c;outline-offset:3px}
#mha-familienkarte .mha-character-slot.is-placed{border-style:solid;border-color:#9d865f80;background:#e9e1cc;color:var(--cg-ink);cursor:default;opacity:1}
#mha-familienkarte .mha-character-rank{font:26px Georgia;color:#785d32;width:26px;text-align:center;flex:none}
#mha-familienkarte .mha-character-slot .mha-character-photo{width:40px;flex:none;border-radius:42% 42% 3px 3px}
#mha-familienkarte .mha-character-slot-name{overflow-wrap:anywhere;min-width:0}
#mha-familienkarte .mha-character-empty{font:20px Georgia;color:#8d896d;display:grid;place-items:center;width:25px;flex:none}
#mha-familienkarte .mha-character-lock{position:absolute;right:5px;top:3px;font-size:9px;color:#47745c}
#mha-familienkarte .mha-character-pyramid{display:grid;gap:15px}
#mha-familienkarte .mha-pyramid-row h3{text-align:center;font:20px/1.25 'IM Fell English',Georgia,serif;margin:0 0 8px}
#mha-familienkarte .mha-pyramid-row h3 small{font:11px Manrope,sans-serif;color:#68786c;padding-left:5px}
#mha-familienkarte .mha-pyramid-row>div{display:grid;grid-template-columns:repeat(var(--row-size),minmax(0,90px));justify-content:center;gap:10px}
#mha-familienkarte .mha-pyramid-row .mha-character-slot{display:flex;flex-direction:column;justify-content:center;min-height:112px;gap:5px;padding:6px 3px;text-align:center}
#mha-familienkarte .mha-pyramid-row .mha-character-photo{width:55px}
#mha-familienkarte .mha-pyramid-row .mha-character-slot-name{font-size:10px;line-height:1.35}
#mha-familienkarte .mha-character-message{min-height:35px;margin:15px 0 0;font-size:12px;line-height:1.6;color:#655548}
#mha-familienkarte .mha-character-play.is-complete .mha-character-table{grid-template-columns:1fr;max-width:740px;margin:auto}
#mha-familienkarte .mha-character-play.is-complete .mha-character-actions{justify-content:center}
#mha-familienkarte .mha-character-draw.is-revealing .mha-character-photo{animation:mha-character-reveal .5s ease-out both}
@keyframes mha-character-reveal{from{opacity:.1;transform:translateY(-10px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:760px){
 #mha-familienkarte .mha-character-gallery{gap:9px;height:145px;margin-bottom:19px}
 #mha-familienkarte .mha-character-gallery>.mha-character-photo{width:66px;box-shadow:0 0 0 2px #f5efdd,0 0 0 3px #a18450,0 8px 12px #183c4325}
 #mha-familienkarte .mha-character-gallery>.mha-character-photo:nth-child(3){width:87px}
 #mha-familienkarte .mha-character-intro h2{font-size:32px}#mha-familienkarte .mha-character-intro p{font-size:12px}
 #mha-familienkarte .mha-character-tabs{gap:8px;margin:20px 0}#mha-familienkarte .mha-character-tabs button{padding:13px 10px;min-height:90px;font-size:11px}#mha-familienkarte .mha-character-tabs strong{font-size:24px}
 #mha-familienkarte .mha-character-settings{grid-template-columns:1fr;gap:15px}#mha-familienkarte .mha-character-guide dl{grid-template-columns:1fr}
 #mha-familienkarte .mha-character-play-title{margin:9px 0 12px}#mha-familienkarte .mha-character-play-title h2{font-size:26px}#mha-familienkarte .mha-character-play-title p{font-size:11px}
 #mha-familienkarte .mha-character-table{display:flex;flex-direction:column;gap:14px}#mha-familienkarte .mha-character-board{width:100%}
 #mha-familienkarte .mha-character-draw{position:static;display:flex;align-items:center;gap:18px;text-align:left;width:100%;padding:0 6px}
 #mha-familienkarte .mha-character-drawn-frame{width:88px;flex:none;margin:0 0 8px;border-width:4px;padding:3px}
 #mha-familienkarte .mha-character-draw h3{font-size:25px;margin-bottom:6px}#mha-familienkarte .mha-character-draw p{font-size:10px;margin-bottom:4px}
 #mha-familienkarte .mha-character-draw-seal{width:25px;height:25px;left:calc(50% - 12px);bottom:-10px;font-size:16px;border-width:2px}
 #mha-familienkarte .mha-character-ranking{gap:7px;grid-template-rows:repeat(5,minmax(58px,auto))}
 #mha-familienkarte .mha-character-slot{min-height:58px;padding:6px 4px;gap:4px;font-size:10px}
 #mha-familienkarte .mha-character-rank{font-size:22px;width:22px}#mha-familienkarte .mha-character-slot .mha-character-photo{width:30px}
 #mha-familienkarte .mha-character-empty{width:19px;font-size:18px}#mha-familienkarte .mha-character-progress{font-size:22px}
 #mha-familienkarte .mha-character-pyramid{gap:11px}#mha-familienkarte .mha-pyramid-row h3{font-size:18px;margin-bottom:5px}
 #mha-familienkarte .mha-pyramid-row>div{grid-template-columns:repeat(var(--row-size),minmax(0,67px));gap:6px}
 #mha-familienkarte .mha-pyramid-row .mha-character-slot{min-height:88px;padding:5px 2px}
 #mha-familienkarte .mha-pyramid-row .mha-character-photo{width:40px}#mha-familienkarte .mha-pyramid-row .mha-character-slot-name{font-size:9px}
 #mha-familienkarte .mha-character-message{font-size:11px;margin-top:10px;min-height:28px}
 #mha-familienkarte .mha-character-actions{margin-top:15px;gap:7px}
}
@media(max-width:360px){#mha-familienkarte .mha-character-gallery{gap:6px}#mha-familienkarte .mha-character-gallery>.mha-character-photo{width:46px}#mha-familienkarte .mha-character-gallery>.mha-character-photo:nth-child(3){width:68px}#mha-familienkarte .mha-character-slot-name{font-size:9px}}
@media(prefers-reduced-motion:reduce){#mha-familienkarte .mha-character-draw.is-revealing .mha-character-photo{animation:none}}

#mha-familienkarte .mha-character-skip{display:grid;gap:7px;margin-top:15px}
#mha-familienkarte .mha-character-skip small{font:10px/1.5 Manrope,sans-serif;color:#655548}
#mha-familienkarte .mha-character-skip button{min-height:44px}