.portal-main{max-width:1100px}.portal-intro{text-align:center;padding:2rem 1rem}.portal-intro h2{font:normal bold clamp(2rem,5vw,3.2rem) Garamond,Georgia,serif;color:#fad9e9;text-shadow:0 0 18px #ff9cff88}.portal-stars{display:block;color:#b6f5d8;font-size:2rem;letter-spacing:1rem;text-shadow:0 0 18px #55f4bc}.portal-intro p{margin:.5rem auto;max-width:40rem}.portal-note{font-size:.85rem;color:#d5e9e1}.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1.2rem;margin:1.4rem 0}.portal-character{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1.3rem;cursor:pointer;border:1px solid #4fa37c;border-radius:16px;background:linear-gradient(155deg,#305b54,#19332e);color:#fad9e9;box-shadow:0 8px 20px #0008;font:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}.portal-character:hover,.portal-character:focus-visible{transform:translateY(-5px);border-color:#ff9cff;box-shadow:0 0 22px #ff9cff88}.portal-character-symbol{font-size:3.8rem;color:#b6f5d8;text-shadow:0 0 20px #55f4bc}.portal-character strong{font:normal bold 1.6rem Garamond,Georgia,serif}.portal-character span:last-child{font-size:.85rem;color:#c9e9db}.portal-home-profile{text-align:center}.portal-home-profile #portal-greeting{font:normal bold 1.8rem Garamond,Georgia,serif;color:#fad9e9}.portal-home-actions{display:flex;justify-content:center;align-items:center;gap:1.3rem;flex-wrap:wrap;margin:1rem 0}.portal-button{background:#694568;border:1px solid #ffb3ff;color:#ffe9f6;border-radius:999px;padding:.65rem 1.2rem;text-decoration:none;box-shadow:0 0 12px #ff9cff66}.portal-switch{color:#b6f5d8}#portal-status{text-align:center;color:#e7f7ed}
/* Separate storykeeper entrance below the adventurer cards. */
.portal-dm-section{text-align:center;margin:2.5rem auto 1.5rem;padding:1.3rem 1rem 1.8rem;max-width:650px;border-top:1px solid #4fa37c88}
.portal-dm-section[hidden]{display:none}
.portal-dm-divider{color:#b6f5d8;letter-spacing:.7rem;text-shadow:0 0 15px #55f4bc;margin-bottom:.5rem}
.portal-dm-section h3{font:normal bold 1.75rem Garamond,Georgia,serif;color:#fad9e9;margin:.35rem 0}
.portal-dm-section p{color:#d5e9e1;margin:.4rem auto 1.2rem}
.portal-dm-grid{display:flex;justify-content:center}
.portal-dm-grid .portal-character{width:min(100%,280px);min-height:165px;background:linear-gradient(155deg,#49394f,#213a36);border-color:#bc9bca}
.portal-dm-grid .portal-character-symbol{color:#ffd4ef;text-shadow:0 0 18px #ff9cff}

@media(max-width:600px){
 .portal-intro{padding:1rem .75rem}
 .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:.85rem 0}
 .portal-grid .portal-character{min-width:0;min-height:125px;padding:.7rem .35rem;gap:.35rem;border-radius:12px}
 .portal-grid .portal-character-symbol{font-size:2rem}
 .portal-grid .portal-character strong{font-size:clamp(1rem,4vw,1.25rem);overflow-wrap:anywhere}
 .portal-grid .portal-character span:last-child{font-size:.7rem}
 .portal-dm-section{margin-top:1.6rem;padding-top:1rem}
 .portal-dm-grid .portal-character{min-height:125px;width:min(100%,220px)}
 .portal-dm-grid .portal-character-symbol{font-size:2.3rem}
}

/* Compact character-selection heading without changing the main Feywild banner. */
.portal-intro{max-width:650px;margin:0 auto 1rem;padding:.85rem 1rem}
.portal-intro h2{font-size:clamp(1.35rem,3.5vw,2rem);line-height:1.2}
.portal-intro .portal-stars{font-size:1.15rem;letter-spacing:.45rem;line-height:1.3;margin-bottom:.25rem}
@media(max-width:600px){.portal-intro{max-width:100%;padding:.7rem .55rem;margin-bottom:.75rem}.portal-intro h2{font-size:clamp(1.2rem,5vw,1.55rem)}.portal-intro .portal-stars{font-size:1rem;letter-spacing:.3rem}}

/* Slightly smaller adventurer cards, keeping the same magical look. */
.portal-grid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1rem;max-width:950px;margin:1rem auto}
.portal-grid .portal-character{min-height:170px;padding:1rem;gap:.55rem}
.portal-grid .portal-character-symbol{font-size:3.1rem}
.portal-grid .portal-character strong{font-size:1.45rem}
@media(max-width:600px){
 .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.7rem auto}
 .portal-grid .portal-character{min-height:108px;padding:.55rem .3rem;gap:.25rem}
 .portal-grid .portal-character-symbol{font-size:1.7rem}
 .portal-grid .portal-character strong{font-size:clamp(.95rem,3.7vw,1.15rem)}
 .portal-grid .portal-character span:last-child{font-size:.65rem}
}

/* Match the DM card's icon, text and proportions to player cards on desktop and mobile. */
.portal-dm-grid .portal-character{min-height:170px;padding:1rem;gap:.55rem}
.portal-dm-grid .portal-character-symbol{font-size:3.1rem}
.portal-dm-grid .portal-character strong{font-size:1.45rem}
@media(max-width:600px){
 .portal-dm-grid .portal-character{min-height:108px;padding:.55rem .3rem;gap:.25rem;border-radius:12px}
 .portal-dm-grid .portal-character-symbol{font-size:1.7rem}
 .portal-dm-grid .portal-character strong{font-size:clamp(.95rem,3.7vw,1.15rem)}
 .portal-dm-grid .portal-character span:last-child{font-size:.65rem}
}

/* Storybook court portraits: soft scenic art under a translucent veil. */
.portal-character{position:relative;isolation:isolate;overflow:hidden;background-size:cover;background-position:center;border:2px solid var(--court-border,#c4a8b9);box-shadow:0 8px 22px #0007,inset 0 0 18px #fff2}
.portal-character::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#14201e35 0%,#192b2b4d 43%,#172423b8 100%);transition:background .25s}
.portal-character:hover::before,.portal-character:focus-visible::before{background:linear-gradient(180deg,#14201e1f,#192b2b40 40%,#172423ad)}
.portal-character-symbol{line-height:1.1;filter:drop-shadow(0 2px 5px #201924a6);text-shadow:0 2px 10px #fff9}
.portal-character strong{position:relative;color:#fff2e9;text-shadow:0 2px 5px #1c1a27,0 0 12px #1c1a27;letter-spacing:.025em}
.portal-theme-mion{--court-border:#edaa98;background-image:url("../images/portal-mion.svg")}
.portal-theme-ruin{--court-border:#c6d6a7;background-image:url("../images/portal-ruin.svg")}
.portal-theme-crotus{--court-border:#f0cb89;background-image:url("../images/portal-crotus.svg")}
.portal-theme-hayden{--court-border:#c7c4ee;background-image:url("../images/portal-hayden.svg")}
.portal-dm-grid .portal-theme-dm{--court-border:#f6b5d9;background-image:url("../images/portal-dm.svg")}
.portal-dm-grid .portal-character-symbol{filter:drop-shadow(0 0 8px #ff9cce)}
.portal-intro{border-color:#e6a7ca;background:linear-gradient(125deg,#4c3b52e8,#35534eea);box-shadow:0 0 20px #eea5d438}
.portal-dm-section{border-top-color:#d5a2c288}
@media(max-width:600px){.portal-character{border-width:1.5px}.portal-character-symbol{line-height:1}}

/* Illustrated portrait assets. Upload the matching PNG/WebP files to assets/images/. */
.portal-character-symbol{display:flex;align-items:center;justify-content:center;min-height:3.1rem}
.portal-character-portrait{display:block;width:4.8rem;height:4.8rem;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #1a182a80)}
.portal-grid .portal-character,.portal-dm-grid .portal-character{background-size:cover;background-position:center}
.portal-theme-mion{background-image:linear-gradient(#302a302b,#302a3040),url("../images/mion_bg.png"),url("../images/portal-mion.svg")}
.portal-theme-ruin{background-image:linear-gradient(#263e302b,#263e3040),url("../images/ruin_bg.png"),url("../images/portal-ruin.svg")}
.portal-theme-crotus{background-image:linear-gradient(#42331f2b,#42331f40),url("../images/crotus_bg.png"),url("../images/portal-crotus.svg")}
.portal-theme-hayden{background-image:linear-gradient(#30344b2b,#30344b40),url("../images/hayden_bg.png"),url("../images/portal-hayden.svg")}
.portal-dm-grid .portal-theme-dm{background-image:linear-gradient(#51364a2b,#51364a40),url("../images/dm_bg.png"),url("../images/portal-dm.svg")}
@media(max-width:600px){
 .portal-character-symbol{min-height:1.7rem}
 .portal-character-portrait{width:2.8rem;height:2.8rem}
}

/* Preserve the original landscape proportions. Cover fills the card by
   cropping overflow horizontally or vertically instead of stretching the art. */
.portal-grid .portal-character,
.portal-dm-grid .portal-character{
 background-size:100% 100%, cover, cover;
 background-position:center, center, center;
 background-repeat:no-repeat;
}