/* Le Monde de Plume — habillage de la page d’aventure, sans ressources distantes. */
body.plume-adventure[data-universe='plume'] {
    --pa-focus: #ffe8a1;
    --pa-universe-blue: #afdfe8;
    --pa-universe-line: rgba(242, 217, 141, 0.3);
    background: #151b2a;
}

.plume-adventure .pa-skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: -10000px;
    padding: 0.75rem 1rem;
    color: #211b33;
    border-radius: 0.75rem;
    background: #fff3cb;
}

.plume-adventure .pa-skip-link:focus {
    left: 1rem;
}

.plume-adventure .pa-title-content {
    gap: 0;
    padding-block: clamp(2rem, 5vh, 4rem);
}

.plume-adventure .pa-title-content::before {
    width: min(690px, 61%);
    height: 90%;
    border-radius: 2rem 4rem 3rem 2rem;
    background: linear-gradient(110deg, rgba(19, 25, 40, 0.92), rgba(28, 31, 48, 0.75));
}

.plume-adventure .pa-universe-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #cbe9eb;
    font-size: 0.8rem;
    letter-spacing: 0.17em;
}

.plume-adventure .pa-universe-name::before {
    width: 8px;
    height: 8px;
    border: 1px solid #e1ffff;
    border-radius: 50%;
    background: #a8d9ec;
    box-shadow: 0 0 14px #75b8e3;
    content: '';
}

.plume-adventure .pa-title h1 {
    max-width: 10ch;
    font-size: clamp(3.8rem, 7vw, 6.7rem);
    line-height: 0.96;
}

.plume-adventure .pa-title h1 span {
    max-width: 18ch;
    margin-top: 0.25em;
    font-size: 0.44em;
    line-height: 1.13;
}

.plume-adventure .pa-title-description {
    max-width: 49ch;
    margin-top: 1.15rem;
    font-size: clamp(1rem, 1.4vw, 1.13rem);
    line-height: 1.65;
}

.plume-adventure .pa-title-plume {
    right: clamp(0.6rem, 3vw, 3.5rem);
    bottom: 2%;
    width: min(39vw, 600px);
    max-height: 79%;
}

.plume-adventure .pa-episode-card {
    display: grid;
    width: min(100%, 530px);
    gap: 0.3rem;
    margin-top: 1.3rem;
    padding: 0.85rem 1rem;
    color: var(--pa-cream);
    border: 1px solid rgba(175, 223, 232, 0.35);
    border-left: 3px solid var(--pa-universe-blue);
    border-radius: 0.3rem 1rem 1rem 0.3rem;
    background: rgba(22, 45, 57, 0.83);
}

.plume-adventure .pa-episode-card p {
    margin: 0;
    color: #d6edf2;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.plume-adventure .pa-episode-card strong {
    font-family: 'Nunito', 'Open Sans', sans-serif;
    font-size: 1.1rem;
}

.plume-adventure .pa-episode-card > span {
    font-size: 0.9rem;
    line-height: 1.5;
}

.plume-adventure .pa-start-actions {
    margin-block: 1.3rem 0.9rem;
}

.plume-adventure .pa-start-actions .pa-button {
    min-height: 52px;
    padding: 0.75rem 1.1rem;
}

.plume-adventure .pa-fineprint {
    color: #d9d4d2;
}

.plume-adventure .pa-family-reference {
    margin-top: 0.8rem;
    max-width: 100%;
    font-size: 0.78rem;
    white-space: normal;
}

/* Le carnet et les objectifs quittent la scène : les objets restent visibles. */
.plume-adventure .pa-play {
    padding: clamp(0.5rem, 1.2vw, 1rem);
}

.plume-adventure .pa-chapter-bar,
.plume-adventure .pa-travel-tools {
    display: grid;
    width: min(100%, 1440px);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0.8rem;
    margin: 0 auto 0.85rem;
}

.plume-adventure .pa-location {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0.55rem 0.8rem;
    border-color: #c5a870;
    background: #20293d;
    backdrop-filter: none;
}

.plume-adventure .pa-location p {
    display: block;
    margin: 0 0 0.3rem;
    color: #d9d8d1;
    font-size: 0.76rem;
}

.plume-adventure .pa-location h2 {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.25;
}

.plume-adventure .pa-chapter-bar .pa-objective {
    position: static;
    display: grid;
    min-width: 0;
    max-width: none;
    gap: 0.25rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.8rem;
    background: #f5edda;
    visibility: visible;
    opacity: 1;
}

.plume-adventure .pa-objective > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
}

.plume-adventure .pa-objective span {
    display: inline;
    font-size: 0.67rem;
}

.plume-adventure .pa-objective strong {
    font-size: 0.92rem;
    line-height: 1.3;
}

.plume-adventure .pa-chapter-goal {
    margin: 0;
    color: #3b3448;
    font-size: 0.88rem;
    line-height: 1.45;
}

.plume-adventure .pa-chapter-goal:empty,
.plume-adventure .pa-trail-progress:empty {
    display: none;
}

.plume-adventure .pa-scene-controls {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.plume-adventure .pa-scene-controls button {
    display: inline-flex;
    width: auto;
    min-width: 44px;
    height: auto;
    min-height: 48px;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.8rem;
    background: #30324c;
    font-size: 0.9rem;
    backdrop-filter: none;
}

.plume-adventure .pa-stage {
    width: min(100%, 1440px);
    border-width: 3px;
    border-radius: 1.2rem;
    box-shadow: 0 0 0 1px var(--pa-universe-line), 0 14px 38px rgba(6, 8, 20, 0.4);
}

.plume-adventure .pa-scene-messages {
    position: absolute;
    z-index: 24;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

.plume-adventure .pa-travel-tools {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2fr);
    align-items: start;
    margin-block: 0.85rem 0;
}

.plume-adventure .pa-travel-tools .pa-field-notes {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    backdrop-filter: none;
}

.plume-adventure .pa-field-notes-toggle,
.plume-adventure .pa-field-notes > [data-action='quest-toggle'] {
    min-height: 62px;
    padding: 0.65rem 0.8rem;
}

.plume-adventure .pa-field-notes-heading {
    display: block;
    font-size: 0.65rem;
}

.plume-adventure .pa-field-notes-title {
    margin-top: 0.2rem;
    overflow: visible;
    font-size: 0.92rem;
    text-overflow: clip;
    white-space: normal;
}

.plume-adventure .pa-field-notes-progress {
    display: inline-flex;
    margin-top: 0.25rem;
    font-size: 0.76rem;
}

.plume-adventure .pa-travel-tools .pa-field-notes-body {
    position: static;
    width: auto;
    padding: 0.2rem 0.8rem 0.8rem;
    border: 0;
    border-top: 1px dashed #baa78d;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
}

.plume-adventure .pa-field-notes-body p {
    font-size: 0.88rem;
    line-height: 1.5;
}

.plume-adventure .pa-travel-tools .pa-dock {
    width: 100%;
    max-height: none;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem;
    border-radius: 0.9rem;
    overflow: visible;
    background: #252d43;
}

.plume-adventure .pa-journal-btn {
    min-height: 48px;
    padding: 0.6rem 0.8rem;
}

.plume-adventure .pa-dock #pa-expedition {
    width: auto;
    min-width: 44px;
    min-height: 48px;
    padding: 0.6rem 0.8rem;
    overflow: visible;
    font-size: 0.9rem;
    white-space: normal;
}

.plume-adventure .pa-dock #pa-expedition::before {
    content: none;
}

.plume-adventure .pa-dock .pa-inventory {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0;
    overflow: visible;
}

.plume-adventure .pa-item {
    min-width: 48px;
    min-height: 48px;
}

.plume-adventure .pa-item.is-empty {
    opacity: 0.7;
}

.plume-adventure .pa-item-label {
    display: block;
    max-width: 66px;
    font-size: 0.64rem;
}

.plume-adventure .pa-trail-progress {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.45rem 0.65rem;
    color: #d7f2f5;
    border-left: 2px solid #9dd9e8;
    background: #1b2739;
    font-size: 0.85rem;
    line-height: 1.45;
}

.plume-adventure .pa-dock-hint {
    display: none;
}

.plume-adventure .pa-controls-hint {
    width: min(100%, 1440px);
    margin: 0.7rem auto 0;
    color: #c4cbd3;
    font-size: 0.78rem;
    text-align: center;
}

/* Lisibilité du carnet, des dialogues et des manipulations. */
.plume-adventure .pa-dialogue-copy p,
.plume-adventure #pa-dialogue-text {
    font-size: 1rem;
    line-height: 1.55;
}

.plume-adventure #pa-dialogue-next {
    min-height: 48px;
    border-radius: 0.75rem;
}

.plume-adventure .pa-panel .pa-button,
.plume-adventure .pa-panel button {
    min-height: 44px;
}

.plume-adventure .pa-panel-head {
    gap: 0.5rem;
}

.plume-adventure .pa-panel-head h2 {
    line-height: 1.25;
}

.plume-adventure #pa-panel-body {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.plume-adventure .pa-journal-list {
    gap: 0.8rem;
}

.plume-adventure .pa-journal-list li {
    padding-block: 0.9rem;
}

.plume-adventure .pa-journal-list p {
    line-height: 1.55;
}

.plume-adventure .pa-hotspot[data-value^='prelude-'] .pa-hotspot-dot {
    border-color: #c4f0f5;
    background: #24495c;
    box-shadow: 0 0 0 4px rgba(164, 225, 242, 0.13), 0 4px 12px rgba(12, 25, 35, 0.45);
}

@media (min-width: 431px) {
    .plume-adventure .pa-hotspots .pa-hotspot.pa-prelude-friend .pa-hotspot-label {
        opacity: 0;
        transform: translate(-50%, 7px) scale(0.96);
    }

    .plume-adventure .pa-hotspots .pa-hotspot.pa-prelude-friend:hover .pa-hotspot-label,
    .plume-adventure .pa-hotspots .pa-hotspot.pa-prelude-friend:focus-visible .pa-hotspot-label {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@media (max-width: 1100px) {
    .plume-adventure .pa-title-content::before {
        width: min(690px, 69%);
    }

    .plume-adventure .pa-title-description,
    .plume-adventure .pa-episode-card {
        max-width: 53%;
    }

    .plume-adventure .pa-travel-tools .pa-dock {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .plume-adventure .pa-dock .pa-inventory {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Un rail distinct du dessin évite de couvrir les planches et les petites lumières. */
@media (pointer: coarse), (max-width: 820px) {
    .plume-adventure .pa-stage {
        --pa-mobile-rail: 64px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto var(--pa-mobile-rail) auto;
        aspect-ratio: auto;
    }

    .plume-adventure .pa-stage::after {
        position: relative;
        display: block;
        width: 100%;
        grid-row: 1;
        aspect-ratio: 1659 / 948;
        content: '';
        pointer-events: none;
    }

    .plume-adventure #pa-canvas,
    .plume-adventure .pa-stage .pa-scene-shade,
    .plume-adventure .pa-stage .pa-hotspots {
        top: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1659 / 948;
    }

    .plume-adventure .pa-scene-messages {
        height: auto;
        aspect-ratio: 1659 / 948;
    }

    .plume-adventure .pa-touch-controls {
        position: relative;
        inset: auto;
        grid-row: 2;
        grid-column: 1;
        align-self: center;
        justify-self: center;
        grid-template-columns: repeat(4, 44px);
        grid-template-rows: 44px;
        gap: 0.2rem;
    }

    .plume-adventure .pa-touch-controls button:nth-child(n) {
        grid-row: 1;
        grid-column: auto;
    }

    .plume-adventure .pa-interact {
        position: relative;
        inset: auto;
        grid-row: 3;
        grid-column: 1;
        align-self: start;
        justify-self: stretch;
        width: calc(100% - 1rem);
        max-width: none;
        min-height: 48px;
        margin: 0 0.5rem 0.5rem;
        padding: 0.65rem 0.8rem;
        border-radius: 0.8rem;
        font-size: 0.9rem;
        line-height: 1.4;
        white-space: normal;
    }

    .plume-adventure .pa-dialogue {
        bottom: calc(var(--pa-mobile-rail) + 0.5rem);
    }

    .plume-adventure .pa-scene-messages .pa-toast {
        bottom: 0.5rem;
        max-width: calc(100% - 1rem);
        border-radius: 0.8rem;
    }
}

@media (max-width: 760px) {
    .plume-adventure .pa-header {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
        padding: 0.4rem 0.65rem;
    }

    .plume-adventure .pa-brand {
        overflow: visible;
        white-space: normal;
    }

    .plume-adventure .pa-header-actions {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .plume-adventure .pa-title {
        min-height: auto;
    }

    .plume-adventure .pa-title-content {
        padding: 9rem 1rem 1.4rem;
    }

    .plume-adventure .pa-title-content::before {
        inset: 7rem 0.4rem 0.4rem;
        width: auto;
        height: auto;
        border-radius: 1.2rem;
        background: rgba(18, 25, 41, 0.9);
    }

    .plume-adventure .pa-title-plume {
        top: 0.5rem;
        right: 1rem;
        width: 130px;
        height: 145px;
        max-height: none;
    }

    .plume-adventure .pa-universe-name {
        max-width: calc(100% - 6rem);
        margin-bottom: 0.8rem;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    .plume-adventure .pa-title h1 {
        max-width: 100%;
        font-size: clamp(2.6rem, 14vw, 5rem);
        overflow-wrap: anywhere;
    }

    .plume-adventure .pa-title h1 span {
        max-width: none;
        font-size: 0.45em;
    }

    .plume-adventure .pa-title-description,
    .plume-adventure .pa-episode-card {
        max-width: 100%;
    }

    .plume-adventure .pa-title-description {
        font-size: 1rem;
    }

    .plume-adventure .pa-level {
        max-width: 100%;
        flex-wrap: wrap;
        border-radius: 0.75rem;
        font-size: 0.8rem;
    }

    .plume-adventure .pa-fineprint {
        display: block;
    }

    .plume-adventure .pa-play {
        display: block;
        padding: 0.55rem;
    }

    .plume-adventure .pa-chapter-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.6rem;
        margin-bottom: 0.65rem;
    }

    .plume-adventure .pa-location {
        padding: 0.5rem 0.65rem;
    }

    .plume-adventure .pa-location p {
        font-size: 0.7rem;
    }

    .plume-adventure .pa-location h2 {
        font-size: 1rem;
    }

    .plume-adventure .pa-chapter-bar .pa-objective {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .plume-adventure .pa-scene-controls {
        flex-direction: column;
        gap: 0.3rem;
    }

    .plume-adventure .pa-scene-controls button {
        min-height: 44px;
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
    }

    .plume-adventure .pa-stage {
        width: 100%;
        border-radius: 0.8rem;
    }

    .plume-adventure .pa-travel-tools {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
        margin-top: 0.65rem;
    }

    .plume-adventure .pa-travel-tools .pa-dock {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .plume-adventure .pa-field-notes-toggle,
    .plume-adventure .pa-field-notes > [data-action='quest-toggle'] {
        min-height: 56px;
    }

    .plume-adventure .pa-field-notes-heading {
        display: inline;
    }

    .plume-adventure .pa-field-notes-progress {
        display: inline-flex;
    }

    .plume-adventure .pa-dialogue {
        max-height: calc(100% - var(--pa-mobile-rail) - 0.5rem);
        grid-template-columns: 45px minmax(0, 1fr);
        padding: 0.65rem;
        overflow-y: auto;
    }

    .plume-adventure .pa-dialogue-copy p,
    .plume-adventure #pa-dialogue-text {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .plume-adventure #pa-dialogue-skip {
        position: static;
        grid-column: 1 / -1;
        padding: 0.35rem;
        color: #51435b;
        background: transparent;
    }

    .plume-adventure .pa-controls-hint {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    .plume-adventure .pa-panel {
        width: calc(100% - 1rem);
    }

    .plume-adventure .pa-panel .pa-map-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .plume-adventure .pa-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .plume-adventure .pa-header-actions > button {
        font-size: 0.8rem;
    }

    .plume-adventure .pa-start-actions {
        width: 100%;
    }

    .plume-adventure .pa-start-actions .pa-button {
        width: 100%;
        white-space: normal;
    }

    .plume-adventure .pa-episode-card {
        padding: 0.75rem;
    }

    .plume-adventure .pa-dialogue-portrait {
        display: none;
    }

    .plume-adventure .pa-dialogue-copy {
        grid-column: 1 / -1;
    }

    .plume-adventure .pa-dialogue-copy p,
    .plume-adventure #pa-dialogue-text {
        font-size: 0.9rem;
    }

    /* Les cibles conservent 44 px sans se chevaucher sur une scène de 300 px. */
    .plume-adventure .pa-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto var(--pa-mobile-rail) auto auto;
    }

    .plume-adventure .pa-stage .pa-hotspots {
        position: relative;
        inset: auto;
        display: grid;
        height: auto;
        grid-row: 4;
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        padding: 0.5rem;
        aspect-ratio: auto;
        background: #1d273b;
        pointer-events: auto;
    }

    .plume-adventure .pa-hotspots .pa-hotspot {
        position: static;
        display: flex;
        width: 100%;
        min-width: 44px;
        height: auto;
        min-height: 64px;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.55rem;
        border: 1px solid #7d8c9f;
        border-radius: 0.7rem;
        background: #2a374d;
        text-align: left;
        transform: none;
    }

    .plume-adventure .pa-hotspots .pa-hotspot-dot {
        width: 24px;
        min-width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-width: 1px;
        font-size: 0.75rem;
        box-shadow: none;
        animation: none;
    }

    .plume-adventure .pa-hotspots .pa-hotspot-dot::after,
    .plume-adventure .pa-hotspots .pa-hotspot-dot::before {
        display: none;
    }

    .plume-adventure .pa-hotspots .pa-hotspot:hover .pa-hotspot-dot,
    .plume-adventure .pa-hotspots .pa-hotspot:focus-visible .pa-hotspot-dot,
    .plume-adventure .pa-hotspots .pa-hotspot.is-near .pa-hotspot-dot {
        box-shadow: none;
    }

    .plume-adventure .pa-hotspots .pa-hotspot-label {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        color: #fff9e9;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 0.74rem;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .plume-adventure .pa-scene-messages .pa-scene-caption {
        top: 0.5rem;
        max-width: calc(100% - 1rem);
        padding: 0.35rem 0.5rem;
        font-size: 1rem;
        transform: translate(-50%, 8px);
    }

    .plume-adventure .pa-scene-messages .pa-scene-caption.is-visible,
    .plume-adventure .pa-scene-messages .pa-scene-caption[data-visible='true'] {
        transform: translate(-50%, 0);
    }

    .plume-adventure .pa-dialogue {
        top: 0.4rem;
        bottom: auto;
        max-height: min(65dvh, 420px);
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .plume-adventure .pa-play {
        display: block;
    }

    .plume-adventure .pa-stage {
        width: min(100%, 1100px);
        margin-inline: auto;
    }

    .plume-adventure .pa-title-content {
        padding-block: 1.5rem;
    }

    .plume-adventure .pa-title-description,
    .plume-adventure .pa-episode-card {
        max-width: 60%;
    }

    .plume-adventure .pa-fineprint {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plume-adventure .pa-universe-name::before {
        box-shadow: none;
    }

    .plume-adventure .pa-skip-link,
    .plume-adventure .pa-episode-card,
    .plume-adventure .pa-travel-tools * {
        animation: none;
        transition: none;
    }
}

/* Le carnet repose sur du papier clair : garder son intertitre bien lisible. */
.plume-adventure .pa-village-journal .pa-kicker {
    color: #5c3d68;
}

/* Les colonnes suivent aussi la taille du texte, pour garder les mots lisibles. */
@media (max-width: 430px) {
    .plume-adventure .pa-stage .pa-hotspots {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    }
    .plume-adventure .pa-chapter-bar {
        grid-template-columns: minmax(0, 1fr);
    }
    .plume-adventure .pa-chapter-bar .pa-location,
    .plume-adventure .pa-chapter-bar .pa-objective,
    .plume-adventure .pa-chapter-bar .pa-scene-controls {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .plume-adventure .pa-chapter-bar .pa-scene-controls {
        justify-content: flex-start;
    }
    .plume-adventure .pa-travel-tools .pa-dock {
        grid-template-columns: minmax(0, 1fr);
    }
    .plume-adventure .pa-dock .pa-journal-btn,
    .plume-adventure .pa-dock .pa-expedition-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }
    .plume-adventure .pa-dock .pa-inventory {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
        width: 100%;
        min-width: 0;
    }
    .plume-adventure .pa-dock .pa-item {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    .plume-adventure .pa-stage .pa-hotspots .pa-hotspot .pa-hotspot-label {
        position: static;
        inset: auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 0;
        white-space: normal;
        overflow-wrap: break-word;
        transform: none;
    }
    .plume-adventure .pa-dock .pa-item-label {
        width: auto;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .plume-adventure .pa-stage {
        grid-template-rows: auto auto var(--pa-mobile-rail) auto auto;
    }
    .plume-adventure .pa-stage .pa-scene-messages {
        position: relative;
        inset: auto;
        display: grid;
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
    }
    .plume-adventure .pa-stage .pa-scene-messages #pa-scene-caption,
    .plume-adventure .pa-stage .pa-scene-messages #pa-celebration,
    .plume-adventure .pa-stage .pa-scene-messages #pa-toast {
        position: static;
        inset: auto;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0.35rem 0.5rem;
        transform: none;
    }
    .plume-adventure .pa-stage .pa-scene-messages #pa-scene-caption:not(.is-visible),
    .plume-adventure .pa-stage .pa-scene-messages #pa-celebration:not(.is-visible) {
        display: none;
    }
    .plume-adventure .pa-stage .pa-touch-controls { grid-row: 3; }
    .plume-adventure .pa-stage #pa-interact { grid-row: 4; }
    .plume-adventure .pa-stage .pa-hotspots { grid-row: 5; }
}

@media (max-width: 430px) {
    .plume-adventure .pa-dock .pa-item {
        min-height: 4rem;
        grid-template-rows: auto auto;
        gap: 0.25rem;
        padding: 0.4rem;
    }
    .plume-adventure .pa-dock .pa-item-icon {
        width: 1.75em;
        height: 1.75em;
        line-height: 1;
    }
}

@media (min-width: 761px) { .plume-adventure .pa-prelude-plank { margin-top: -16px; } }
/* Objects are visible while each resident offers them, in every level. */
.plume-adventure .pa-dialogue.has-story-visual {
    grid-template-columns: 64px minmax(140px, 185px) minmax(0, 1fr) auto;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.plume-adventure .has-story-visual > .pa-dialogue-portrait { grid-column: 1; grid-row: 1; align-self: center; height: 90px; }
.plume-adventure .has-story-visual > .pa-dialogue-portrait img { object-fit: contain; }
.plume-adventure .has-story-visual > .pa-dialogue-copy { grid-column: 3; grid-row: 1; }
.plume-adventure .has-story-visual > #pa-dialogue-next { grid-column: 4; grid-row: 1; }
.plume-adventure .pa-dialogue-visual { grid-column: 2; grid-row: 1; min-width: 0; padding: .5rem 0; background: radial-gradient(ellipse, #ffe7a8b0, transparent 72%); }
.plume-adventure .pa-dialogue-visual[hidden] { display: none; }
.plume-adventure .pa-story-objects { display: grid; justify-items: center; align-items: start; gap: .4rem; }
.plume-adventure .pa-story-objects:not(.count-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plume-adventure .pa-story-object, .plume-adventure .pa-story-plan { min-width: 0; margin: 0; text-align: center; }
.plume-adventure .pa-story-object > .age-icon { display: block; width: 118px; height: 118px; max-width: 100%; margin: auto; filter: drop-shadow(0 5px 3px #775a3c30); animation: pa-story-offer .28s ease-out; }
.plume-adventure .pa-story-objects:not(.count-1) .age-icon { width: 66px; height: 66px; }
.plume-adventure .pa-story-object figcaption, .plume-adventure .pa-story-plan figcaption { margin-top: .3rem; color: #4d365c; font: 900 .8rem/1.25 Nunito, system-ui; }
.plume-adventure .pa-story-object blockquote { margin: .5rem 0 0; padding: .35rem; color: #42312b; font: 800 .85rem/1.4 Nunito, system-ui; background: #fff8df; border: 1px solid #c7a66b; border-radius: 7px; }
.plume-adventure .pa-story-plan > .age-route-board { width: 162px; max-width: 100%; padding: 5px; box-sizing: border-box; }
.plume-adventure .pa-story-plan .age-grid { gap: 3px; }
.plume-adventure .pa-story-plan .age-route-cell { min-width: 0; border-radius: 5px; }
.plume-adventure .pa-story-plan .age-route-cell > img, .plume-adventure .pa-story-plan .age-route-cell > .age-icon { width: 26px; height: 26px; max-width: 80%; max-height: 80%; }
.plume-adventure .pa-story-plan .age-route-cell > span { font-size: 1rem; }
.plume-adventure .pa-item-icon > .age-icon { width: 38px; height: 38px; margin: auto; }
.plume-adventure .pa-story-reward { margin: 1rem auto; width: min(100%, 240px); padding: 1rem; border-radius: 18px; background: radial-gradient(ellipse, #ffe7a8, #fff4d960 65%, transparent 75%); }
.plume-adventure .pa-story-reward .age-icon { width: 150px; height: 150px; }
@keyframes pa-story-offer { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    .plume-adventure .pa-dialogue.has-story-visual { grid-template-columns: 45px minmax(0, 1fr); gap: .45rem .6rem; max-height: min(80dvh, 610px); }
    .plume-adventure .has-story-visual > .pa-dialogue-portrait { grid-column: 1; grid-row: 1; height: 64px; }
    .plume-adventure .has-story-visual > .pa-dialogue-copy { grid-column: 2; grid-row: 1; }
    .plume-adventure .has-story-visual > .pa-dialogue-visual { grid-column: 1 / -1; grid-row: 2; padding: .25rem; }
    .plume-adventure .has-story-visual > #pa-dialogue-next { grid-column: 1 / -1; grid-row: 3; }
    .plume-adventure .has-story-visual > #pa-dialogue-skip { grid-column: 1 / -1; grid-row: 4; position: static; }
    .plume-adventure .pa-story-object > .age-icon { width: 88px; height: 88px; }
    .plume-adventure .pa-story-objects.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plume-adventure .pa-story-objects.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .plume-adventure .pa-story-objects:not(.count-1) .age-icon { width: 48px; height: 48px; }
    .plume-adventure .pa-story-object figcaption { font-size: .72rem; }
}
@media (max-width: 430px) {
    .plume-adventure .has-story-visual > .pa-dialogue-copy { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .plume-adventure .pa-story-object > .age-icon { animation: none; } }

.plume-adventure .pa-story-glyph { display: block; width: 100%; font: 900 92px/1.3 Nunito, sans-serif; color: #5a405c; }
.plume-adventure .pa-story-objects:not(.count-1) .pa-story-glyph { font-size: 48px; }

.plume-adventure .pa-pieces .age-icon, .plume-adventure .pa-slots .age-icon { display: block; width: 64px; height: 64px; margin: auto; }

.plume-adventure .pa-learning { border: 1px solid #baa780; border-radius: 12px; padding: .7rem 1rem; margin: 1rem 0; background: #fff5d8; }
.plume-adventure .pa-learning p { margin: .35rem 0 0; }
.plume-adventure .pa-bridge-span { position: relative; gap: 0; padding: 0; border-width: 0; overflow-x: auto; min-height: 72px; background: repeating-linear-gradient(90deg,#c8d9d1 0,#c8d9d1 calc(10% - 1px),#86aba5 calc(10% - 1px),#86aba5 10%); }
.plume-adventure .pa-bridge-span .pa-plank { box-sizing: border-box; min-width: 0; padding: .25rem 0; border-radius: 2px; flex-grow: 0; flex-shrink: 0; margin-top: 22px; }
.plume-adventure .pa-bridge-meter { position: absolute; top: 2px; left: 0; width: 10%; min-height: 17px; border: 2px solid #65503b; border-top: 0; text-align: center; font: 800 .7rem/1.1 Nunito, sans-serif; box-sizing: border-box; }
.plume-adventure .pa-bridge-goal { position: absolute; top: 0; height: 72px; border-left: 4px dashed #e0b64f; pointer-events: none; }
.plume-adventure .pa-sown-seed { display: block; width: 17px; height: 24px; border-radius: 55% 45%; transform: rotate(25deg); background: #b98548; border: 2px solid #654323; margin: auto; }