/* "My Father's Work" app theme — the default visual skin for every screen outside actual gameplay
 * (main menu, module select, continue list, manage modules, help, achievements) plus the
 * options/pause chrome when opened with no module loaded (see Masterwork.App.Shared's app.css,
 * which keeps only structural mws-* hooks and no colors/images of its own — same split already
 * established for module content). See NOTICE.md for asset provenance.
 *
 * Loaded via a <link> in both host pages, immediately after app.css's own <link> — cascade order
 * lets this file win on any selector it shares with app.css, the same principle module CSS already
 * relies on.
 *
 * Screens are themed incrementally; this file starts empty and fills in per the project's phased
 * plan (architecture first, then MainMenu, Module Select, Options/Pause default skin, then the
 * remaining lower-fidelity screens).
 */

/* -- Fonts -------------------------------------------------------------------------------------
 * Same two families my-fathers-work-template uses (Germania One display, Averia Libre body), but
 * as plain static files -- that module's font://slug indirection only works once a module is
 * loaded, and this file is active before that (main menu, etc). Only the regular weight of each
 * is bundled. Google Fonts, SIL Open Font License -- unrelated to NOTICE.md's RGS provenance. */
@font-face {
    font-family: 'Germania One';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/germania-one-v21-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/averia-libre-v16-latin-regular.woff2') format('woff2');
}

body {
    background: #0d1420;
    color: #e5e0d8;
}

/* -- Main menu -----------------------------------------------------------------------------------
 * Full-bleed hero screen that must never scroll -- position: fixed (not height: 100vh) takes it out
 * of document flow so its own box model can't contribute to a body scrollbar; overflow: hidden clips
 * the intentionally-oversized scene layers. Excluded from app.css's generic reading-column rule
 * (@media min-width: 48rem), same as every other full-bleed layout in this theme.
 *
 * Scene layers are sized in vh, not vw/%: on a narrower-but-not-shorter viewport (phone portrait)
 * they grow wider than the screen instead of shrinking, and get cropped by overflow: hidden -- no
 * per-breakpoint sizing needed for the scene itself, only the interactive content below. */
.mws-main-menu {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0d1420;
    font-family: 'Averia Libre', serif;
    color: #e5e0d8;
}

.mws-main-menu-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Sky -- background-size: 100% 100% deliberately compresses the native ~4:1 panorama horizontally
   rather than a cover/contain fit, which read as an oddly-wide smear. */
.mws-main-menu-sky {
    position: absolute;
    top: 22px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 70vh;
    background-image: url('images/backgrounds/sky-dome.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top center;
}

/* Mountain/village -- centered, bottom-anchored, sized in vh so they scale with height and overflow
   left/right on a narrow-but-tall viewport instead of shrinking. Both are square source canvases, so
   width is max(<vh>, 100%) rather than the vh value alone: on a viewport that's narrow without being
   tall (a resized desktop window), the vh value alone could come out smaller than the viewport,
   stranding the scene as a small floating square. max() guarantees it never shrinks below 100%. */
.mws-main-menu-mountain,
.mws-main-menu-village {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
}

.mws-main-menu-mountain {
    z-index: 2;
    width: 100%;
    height: 70vh;
    background-image: url('images/backgrounds/mountain.png');
}

.mws-main-menu-village {
    z-index: 3;
    width: 100%;
    height: 70vh;
    background-image: url('images/backgrounds/village.png');
}

/* Manor -- positioned with a fixed px offset from the left edge (not vw/%), so as the viewport
   narrows it drifts further off-screen, same principle as mountain/village above. */
.mws-main-menu-manor {
    position: absolute;
    bottom: 0;
    left: 22px;
    z-index: 4;
    height: 110vh;
    aspect-ratio: 1;
    background-image: url(
    'images/backgrounds/manor-combined.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left bottom;
}

.mws-main-menu-effect {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-image: url('images/backgrounds/vignette.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
}

/* The ornate frame -- same border-image technique/asset as the in-game "setup" passage layout
   (my-fathers-work-template); border thickness stays a fixed px regardless of viewport, unlike a
   background-size: cover image whose edges would scale. pointer-events: none so it never blocks the
   help/nav buttons near its edges. */
.mws-main-menu-border {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image-repeat: stretch;
    border-image-slice: 7.8% 4.2% fill;
    border-image-width: 42px 40px;
    border-image-source: url('images/backgrounds/border.png');
}

.mws-main-menu-help {
    position: absolute;
    top: 36px;
    left: 75px;
    z-index: 25;
    width: 3.25rem;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/ui/button_question.png');
}

/* Fixed rem width, not vw-derived -- stays a constant on-screen size as the window resizes (large-
   layout domain only; the narrow breakpoint below switches to a different stacked layout). */
.mws-main-menu-content {
    position: absolute;
    top: 40px;
    right: 50px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 25rem;
    height: calc(100vh - 105px);
}

.mws-main-menu-logo {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 1;
    background-image: url('images/myfatherswork-logo-512x512.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: -50px;
}

.mws-main-menu-tagline {
    margin: 0;
    text-align: center;
    font-size: 1.4em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(32, 32, 45, 0.7);
}

.mws-main-menu-tagline em {
    font-style: normal;
    color: #f2b17b;
}
.mws-main-menu-tagline em::before {
    content: '\A';
    white-space: pre;
}

.mws-main-menu-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

.mws-main-menu-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 17 / 6;
    padding: 0 0.5rem;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('images/ui/button_brown.png');
    border: none;
    border-radius: 0;
    color: #2b2016;
    font-family: 'Germania One', 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
    /* "New Game" is the only label with a space, so the only one that could wrap; at some sizes it
       wrapped to 2 lines while the single-word labels just overflowed instead -- inconsistent.
       Applies everywhere, not just the breakpoints below. */
    white-space: nowrap;
}

.mws-main-menu-buttons button:hover:not(:disabled) {
    filter: brightness(1.15);
}

.mws-main-menu-buttons button:active:not(:disabled) {
    transform: scale(0.95);
}

.mws-main-menu-buttons button:disabled {
    filter: grayscale(1);
    cursor: default;
}

/* -- Narrow (phone portrait) -----------------------------------------------------------------
 * The side-anchored content doesn't have room to breathe -- overlay a compact, centered column on
 * top of the scene instead (position: absolute + inset: 0, not static, which pushed button rows
 * below the visible/bordered area on tall content), and crop the border to just its top/bottom edges
 * via transform: scaleX, same trick my-fathers-work-template uses for chunky side posts at narrow
 * widths (border-image-width is a fixed px, so it dominates unless pushed off-screen).
 *
 * min-height: 30.01rem qualifier: every "portrait" (max-width: 45.99rem) rule in this file carries
 * it, pairing with "landscape" (max-height: 30rem, no width limit) to keep the two breakpoints
 * mutually exclusive. Width alone can't distinguish them -- a phone in landscape (iPhone SE:
 * 667x375px = 41.7rem x 23.4rem) is narrower than the portrait ceiling but needs landscape's
 * treatment (full border, one button row), not portrait's stacked column. The height floor excludes
 * exactly that overlap. (An earlier version required landscape to also be wide instead -- broke
 * iPhone SE landscape, whose real width never reaches a floor high enough to also clear the portrait
 * ceiling.) */
@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-main-menu-border {
        transform: scaleX(1.6667);
    }

    .mws-main-menu-manor {
        left: -22vh;
    }

    .mws-main-menu-help {
        top: 44px;
        left: 16px;
    }

    /* Logo occupies whatever vertical room is left above the tagline/buttons (flex: 1 1 auto +
       min-height: 0, no aspect-ratio -- background-size: contain on the logo itself already
       preserves the art's own aspect ratio inside whatever box results), full width; tagline and
       buttons then land directly after it, naturally pinned near the bottom edge. padding-bottom is
       the "stay inside the border" margin -- px, since border-image-width is itself a fixed px. */
    .mws-main-menu-content {
        position: absolute;
        inset: 0;
        height: auto;
        width: 100%;
        max-width: 24rem;
        margin: 0 auto;
        padding: 50px 0;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .mws-main-menu-logo {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        width: 100%;
    }

    /* justify-items: center -- buttons are capped to max-width: 35vw below (narrower than the
       single 1fr grid column), so without this they'd sit flush against the column's left edge. */
    .mws-main-menu-buttons {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.6rem;
    }

    .mws-main-menu-buttons button {
        aspect-ratio: 3 / 1;
        font-size: 1.85rem;
        min-width: 200px;
    }
}

/* -- Wide (phone landscape) --------------------------------------------------------------------
 * Width is ample here (full border stays), but height is tight -- content switches from the large
 * layout's right-anchored column to a single row spanning the border's own left/right inset (40px,
 * matching border-image-width), with buttons going to one row of four instead of stacking. Matches
 * my-fathers-work-template's own short-viewport breakpoint.
 *
 * No width qualifier -- landscape means "short," full stop; see the portrait rule just above for why
 * the two breakpoints stay mutually exclusive without one. */
@media (max-height: 30rem) {
    .mws-main-menu-border {
        transform: none;
    }

    .mws-main-menu-sky {
        height: 80vh;
    }

    .mws-main-menu-manor {
        height: 140vh;
    }

    .mws-main-menu-help {
        top: 36px;
        left: 75px;
    }

    /* Full-height row spanning the border's own left/right inset (40px) and a matching top/bottom
       inset -- logo fills the leftover vertical space above the buttons (flex: 1 1 auto +
       min-height: 0, same technique as portrait) but right-aligned instead of full-width; tagline
       and buttons stretch to the row's full width via align-items: stretch. Buttons land at the
       bottom because they're the last flex child in a container spanning the full height. */
    .mws-main-menu-content {
        position: absolute;
        top: 20px;
        right: 40px;
        bottom: 56px;
        left: 40px;
        width: auto;
        height: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .mws-main-menu-logo {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        align-self: flex-end;
        width: min(40%, 14rem);
        margin: 0;
        margin-right: 50px;
        transform: scale(1.4);
    }

    /* Ample width here, unlike portrait -- the forced line-break before the emphasized phrase
       (added for the narrow column) isn't needed. */
    .mws-main-menu-tagline em::before {
        content: none;
    }

    .mws-main-menu-buttons {
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }

    .mws-main-menu-buttons button {
        aspect-ratio: 17 / 6;
        font-size: 1.5rem;
        /* Resets the portrait rule's own min-width: 200px -- a viewport that's both narrow and
           short matches both breakpoints, so this needed restating here too. */
        min-width: auto;
    }
}

/* -- Web splash --------------------------------------------------------------------------------
 * Shown by Masterwork.App.Web/App.razor while the WASM bundle downloads -- see app.css's own
 * .mws-splash rule for the structural/themed split. Same colors as the main menu it hands off to,
 * so there's no color jump. */
.mws-splash {
    background: #0d1420;
    color: #e5e0d8;
    font-family: 'Averia Libre', serif;
}

.mws-splash-logo {
    width: min(60vw, 16rem);
    aspect-ratio: 1;
    background-image: url('images/myfatherswork-logo-512x512.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mws-splash-tagline {
    font-size: 1rem;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.mws-splash-tagline em {
    font-style: normal;
    color: #f2b17b;
}

.mws-spinner {
    border-color: rgba(229, 224, 216, 0.3);
    border-top-color: #f2b17b;
}

/* -- Settings dialog (OptionsDialog.razor) ------------------------------------------------------
 * app.css's chrome only emits structural class hooks; this is a close port of
 * my-fathers-work-template's own OptionsDialog skin (same assets/numbers) rather than a fresh
 * design, so the app's "no module loaded" dialog and a loaded module's in-game dialog read as the
 * same UI. Only real difference: plain relative url(...) paths instead of that module's
 * image://slug indirection, which only exists once a module is loaded. button_brown/green/red.png
 * are the same files already bundled for the main menu's own buttons. */

/* Standard brown/green/red buttons -- Apply/Cancel/Quit/Resume/Save/Abandon all go through these
   three classes (see OptionsDialog.razor and PauseBar.razor), so this skins both at once. */
.style-btn-brown,
.style-btn-green,
.style-btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6em;
    height: auto;
    padding: 0.8em 0.2em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    appearance: none;
    font-family: 'Germania One', 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.6em;
    letter-spacing: 0.1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.style-btn-brown {
    background-image: url('images/ui/button_brown.png');
    color: #2b2016;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.style-btn-green {
    background-image: url('images/ui/button_green.png');
    color: #152218;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.style-btn-red {
    background-image: url('images/ui/button_red.png');
    color: #2b0d0d;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.style-btn-brown:hover:not(:disabled),
.style-btn-green:hover:not(:disabled),
.style-btn-red:hover:not(:disabled) {
    filter: brightness(1.15);
}

.style-btn-brown:active:not(:disabled),
.style-btn-green:active:not(:disabled),
.style-btn-red:active:not(:disabled) {
    transform: scale(0.85);
    opacity: 0.75;
}

.style-btn-brown:disabled,
.style-btn-green:disabled,
.style-btn-red:disabled {
    filter: grayscale(1);
    cursor: default;
}

/* Quit-confirm/resume-confirm/save-name's 3-across small buttons (PauseBar/OptionsDialog). */
.mws-btn-sm.style-btn-brown,
.mws-btn-sm.style-btn-green,
.mws-btn-sm.style-btn-red {
    width: 12em;
    font-size: 1em;
}

/* Big Options panel -- panel_general.png (866x688), 9-slice border-image so corner ironwork stays
   a fixed on-screen thickness regardless of dialog size. */
.mws-options-dialog {
    position: relative;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    border-style: solid;
    border-color: transparent;
    border-width: 20px;
    border-image-source: url('images/backgrounds/panel_general.png');
    border-image-slice: 11.6% 9.2% fill;
    border-image-width: 40px;
    border-image-repeat: stretch;
    box-sizing: border-box;
    background: #14161c;
    box-shadow: none;
    border-radius: 0;
    color: #e8c9a0;
    font-family: 'Averia Libre', serif;
}

.mws-options-dialog h3 {
    margin: 0 0 0.75em;
    color: #f2c879;
    font-size: 1.6em;
    text-align: center;
    font-family: 'Germania One', 'Averia Libre', serif;
}

.mws-options-dialog .mws-dialog-actions {
    justify-content: center;
}

/* Small general panel -- quit-confirm, resume-confirm, and the save-name prompt (panel_general_small.png,
   866x417). Same border-image technique as the big panel above, scaled for this asset's shorter
   height. */
.mws-dialog--sm {
    position: relative;
    max-width: 36rem;
    max-height: 90vh;
    overflow-y: auto;
    border-style: solid;
    border-color: transparent;
    border-width: 20px;
    border-image-source: url('images/backgrounds/panel_general_small.png');
    border-image-slice: 19.2% 9.2% fill;
    border-image-width: 40px;
    border-image-repeat: stretch;
    box-sizing: border-box;
    background: #14161c;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
    font-family: 'Averia Libre', serif;
}

.mws-dialog--sm h3 {
    margin: 0 0 0.5em;
    color: #f2b17b;
    font-size: 1.375em;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Germania One', 'Averia Libre', serif;
}

.mws-dialog--sm p {
    color: #fff;
    font-size: 1.25em;
}

.mws-dialog--sm .mws-dialog-actions {
    justify-content: center;
}

@media (max-width: 35rem) {
    .mws-dialog--sm .mws-dialog-actions,
    .mws-options-dialog .mws-dialog-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Both panels can scroll (overflow-y: auto) when their content exceeds 90vh -- the default OS
   scrollbar is wide and light-colored, clashing with the dark parchment panel; thin + a color
   matching the panel's own border tone reads as part of the design instead of browser chrome. */
.mws-options-dialog,
.mws-dialog--sm {
    scrollbar-width: thin;
    scrollbar-color: #6b4a2e #14161c;
}

.mws-options-dialog::-webkit-scrollbar,
.mws-dialog--sm::-webkit-scrollbar {
    width: 8px;
}

.mws-options-dialog::-webkit-scrollbar-track,
.mws-dialog--sm::-webkit-scrollbar-track {
    background: #14161c;
}

.mws-options-dialog::-webkit-scrollbar-thumb,
.mws-dialog--sm::-webkit-scrollbar-thumb {
    background-color: #6b4a2e;
    border-radius: 4px;
}

/* Volume/text-size sliders -- slider_base.png (400x28) track, slider_button.png (64x64) thumb. */
.mws-options-input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 28px;
    background-image: url('images/ui/slider_base.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius: 0;
}

.mws-options-input[type="range"]::-webkit-slider-runnable-track,
.mws-options-input[type="range"]::-moz-range-track {
    height: 28px;
    background: transparent;
    border: none;
}

.mws-options-input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background-image: url('images/ui/slider_button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.mws-options-input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background-image: url('images/ui/slider_button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.mws-options-input[type="range"]:disabled {
    filter: grayscale(1);
    cursor: default;
}

.mws-options-input[type="range"]:disabled::-webkit-slider-thumb,
.mws-options-input[type="range"]:disabled::-moz-range-thumb {
    cursor: default;
}

.mws-options-value {
    display: inline-block;
    width: 3ch;
    flex-shrink: 0;
    text-align: right;
    color: #f2b781;
    font-weight: 700;
}

/* Mute checkbox -- checkbox_outline.png/checkbox_checkmark.png, scaled to the slider's own 28px
   row height. */
.mws-mute-checkbox {
    appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    background-image: url('images/ui/checkbox_outline.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    cursor: pointer;
    vertical-align: middle;
}

.mws-mute-checkbox:checked {
    background-image: url('images/ui/checkbox_checkmark.png'), url('images/ui/checkbox_outline.png');
    background-size: 75% 75%, 100% 100%;
    background-position: center, 0;
}

.mws-mute-label {
    color: #e8c9a0;
    font-size: 0.9em;
}

/* Save-name prompt's text input -- input_small.png, 9-slice so a typed name of any length doesn't
   distort the asset's rounded end caps. */
.mws-save-name-input {
    display: block;
    width: 100%;
    height: 3rem;
    margin-top: 0.75rem;
    border-style: solid;
    border-color: transparent;
    border-width: 15px;
    border-image-source: url('images/ui/input_small.png');
    border-image-slice: 20% 15% fill;
    border-image-width: 15px 48px;
    border-image-repeat: stretch;
    box-sizing: border-box;
    background-color: transparent;
    padding: 0 0.75rem;
    text-align: center;
    color: #f2b781;
    font-family: 'Averia Libre', serif;
    font-size: 1.2em;
    outline: none;
}

/* Manage Modules -- longer label than the standard button width was tuned for ("Apply"/"Cancel"/
   the main menu's own words), so it gets its own wider size rather than wrapping/overflowing.
   Centered via the footer's own text-align, not a per-button margin. */
.mws-manage-modules-button.style-btn-brown {
    width: 10em;
}

.mws-dialog-footer {
    text-align: center;
    border-top-color: rgba(232, 201, 160, 0.25);
}

/* Language dropdowns (UI language / preferred module language, MainMenu context; also reused
   as-is by Start New Game's own language dropdown, .mws-module-language) --
   dropdown_button.png supplies just the arrow-toggle graphic; appearance: none drops the native
   arrow so it doesn't double up. The closed control is fully stylable this way, but a native
   select's own open/expanded option list isn't -- there's no standard, cross-browser way to draw
   custom rounded-panel/checkmark chrome around it, so this only reaches the closed box and each
   option's own color/background (which most engines do respect). */
.mws-options-controls select,
.mws-module-language {
    appearance: none;
    -webkit-appearance: none;
    height: 2.5rem;
    padding: 0 2.5rem 0 0.75rem;
    background-color: #14161c;
    background-image: url('images/ui/dropdown_button.png');
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1.75rem;
    border: 2px solid #6b3226;
    border-radius: 0.3rem;
    color: #fff;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
}

.mws-options-controls select option,
.mws-module-language option {
    background-color: #14161c;
    color: #f2b781;
}

/* -- Module select (StartNewGame.razor) -------------------------------------------------------
 * Full-bleed chrome wrapper, same technique as the main menu: fixed backdrop below content, fixed
 * decorative frame on top (pointer-events: none). This screen's content doesn't fit one viewport in
 * general (carousel + description), so the screen itself still never scrolls, but the carousel and
 * detail "well" each get their own independent scroll region instead of the whole page scrolling. */
/* Top/right match .mws-scenario-back-button's own top/left exactly (both breakpoints below) -- keeps
   the back button and the toolbar symmetrically inset from the frame at every viewport size. */
.mws-scenario-screen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 36px 75px 56px 75px;
    color: #e5e0d8;
    font-family: 'Averia Libre', serif;
}

@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-scenario-screen {
        padding-top: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Pulled in to 10px INSIDE the border's own inner edge, not 10px from the raw viewport edge --
   border-image-width is 42px 40px and this breakpoint (unlike portrait) doesn't crop the side posts
   away, so the border is genuinely visible here. A flat 10px sat behind the frame art instead of
   inside it. Kept in lockstep with .mws-scenario-back-button's own landscape rule below. top is
   untouched -- only left/right were reported as too far in. */
@media (max-height: 30rem) {
    .mws-scenario-screen {
        padding-top: 36px;
        padding-right: 50px;
        padding-left: 50px;
    }
}

.mws-scenario-screen::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('images/module-select/leather-background.png');
    background-size: cover;
    background-position: center;
}

/* Same border asset/numbers as .mws-main-menu-border -- see that rule's own comment for why
   border-image (not object-fit: fill) keeps the frame's corner thickness constant regardless of
   viewport size. */
.mws-scenario-border {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image-repeat: stretch;
    border-image-slice: 7.8% 4.2% fill;
    border-image-width: 42px 40px;
    border-image-source: url('images/backgrounds/border.png');
}

/* Same narrow-viewport crop as .mws-main-menu-border -- was missing here, which is why the side
   posts weren't dropping away on a narrow/portrait viewport the way every other bordered screen's
   already does. */
@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-scenario-border {
        transform: scaleX(1.6667);
    }
}

/* Same position as .mws-main-menu-help (top/left values, both breakpoints) -- this screen's back
   button and the main menu's help button are the same "circular icon button pinned near the
   frame's top-left corner" role, just on different screens. */
.mws-scenario-back-button {
    position: fixed;
    top: 36px;
    left: 75px;
    z-index: 20;
    width: 3.25rem;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/ui/button_back_orange.png');
}

.mws-scenario-back-button:hover {
    filter: brightness(1.15);
}

@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-scenario-back-button {
        top: 44px;
        left: 16px;
        width: 2.7rem;
    }
}

/* Same 40px-border clearance as .mws-scenario-screen's own landscape rule above (kept in lockstep).
   top is untouched -- only left/right were reported as too far in. */
@media (max-height: 30rem) {
    .mws-scenario-back-button {
        top: 36px;
        left: 50px;
    }
}

/* app.css's own generic @media (min-width: 48rem) reading-column rule no longer includes
   .mws-start-new-game (excluded the same way .mws-main-menu is) -- a 40rem cap left barely room
   for a single row of carousel tiles. This wider cap still keeps text content (description,
   empty-state) readable while giving the carousel room to actually need horizontal scrolling.
   The whole thing is a flex column filling .mws-scenario-screen's own available height (minus its
   padding) -- min-height: 0 is what actually lets its flex children (the toolbar stays natural
   size, .mws-scenario-content stretches/shrinks) size correctly inside a fixed-height ancestor. */
.mws-start-new-game {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
}

.mws-start-new-game h1,
.mws-start-new-game h2 {
    color: #f2c879;
    font-family: 'Germania One', 'Averia Libre', serif;
}

/* Toolbar -- brown standard buttons, right-aligned, dialed down from the standard 13rem/1.6rem
   size (tuned for a big card-style Apply/Play button, too large sitting inline in a toolbar row).
   flex: none keeps it a fixed-height row at the top of the column regardless of how much space
   .mws-scenario-content ends up with. */
.mws-module-toolbar {
    flex: none;
    justify-content: flex-end;
    margin: 0 0 0.5rem;
}

.mws-module-toolbar .style-btn-brown,
.mws-upload-button.style-btn-brown {
    width: 7em;
    font-size: 1.2em;
}

/* The two content regions -- carousel and detail well -- split whatever vertical space is left
   under the toolbar. min-height: 0 on the flex column itself is required for the children's own
   min-height: 0/overflow rules below to actually take effect (a flex child's default min-height
   is auto, i.e. "at least my content's natural size", which silently defeats shrinking/scrolling
   otherwise). */
.mws-scenario-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Carousel row -- back/forward buttons flanking the carousel, same icon-button + "hide the native
   scrollbar, scroll the active element into view via JS" technique as PauseBar's own timeline
   scrubber, ported rather than reinvented.
   flex-basis: 50% is half of a fixed top/bottom split with .mws-module-detail below -- deliberately
   not content-driven/auto, since an auto-height carousel let a low-aspect-ratio thumbnail consume
   nearly the whole screen at some sizes, crowding the well's own Play/language controls off-screen.
   .mws-module-tile-image sizes itself from this row's height, so fixing the row's height is what
   makes the thumbnail shrink to fit (gaining empty space on either side) instead of the row growing
   to match the image.
   max-height caps how far 50% can grow on a tall/tablet-portrait viewport; .mws-module-detail's own
   uncapped flex-grow absorbs whatever the carousel doesn't use once it hits the ceiling, so the well
   gets more room rather than the carousel getting wastefully large. Only matters above 28rem/50%, so
   it doesn't touch the phone breakpoints below. */
.mws-module-carousel-row {
    flex: 1 1 50%;
    min-height: 6rem;
    max-height: 28rem;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.mws-carousel-nav-button {
    flex: none;
    align-self: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    width: 4.6rem;
    aspect-ratio: 176 / 144;
}

.mws-carousel-back {
    background-image: url('images/ui/arrow_left.png');
}

.mws-carousel-forward {
    background-image: url('images/ui/arrow_right.png');
}

/* opacity on top of grayscale (not just the filter alone, which reads fairly subtly against these
   already fairly desaturated arrow glyphs) -- makes "can't go further this way" unambiguous at the
   start/end of the module list. */
.mws-carousel-nav-button:disabled {
    filter: grayscale(1);
    opacity: 0.45;
    cursor: default;
}

/* justify-content: safe center keeps tiles centered when there are too few to scroll, without the
   unsafe centering that can clip an overflowing row in some browsers. No visible scrollbar --
   StepCarousel drives centerElement() instead of a drag affordance. */
.mws-module-carousel {
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
    justify-content: safe center;
    scrollbar-width: none;
}

.mws-module-carousel::-webkit-scrollbar {
    display: none;
}

/* Tile -- a card (image + border) with its title below, not overlaid on the artwork (read as too
   hard to read against busy thumbnail art). Sized from the carousel row's own height
   (.mws-module-tile-image below), not a fixed width, so every tile's width follows via aspect-ratio
   and shrinks together when the well needs more room. background-size: contain lets a differently-
   proportioned thumbnail letterbox instead of distorting. */
.mws-module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.mws-module-tile-image {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    aspect-ratio: 455 / 633;
    overflow: hidden;
}

.mws-module-tile-thumb {
    position: absolute;
    inset: 0;
    background-color: #45566b;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Unhighlighted/highlighted frame -- theme-owned, swapped by the .selected class SelectModule
   already toggles. A plain full-cover background-image, not border-image, since (unlike the outer
   frame) this asset has no repeating edge to preserve -- it's already drawn to the tile's own
   aspect-ratio. */
.mws-module-tile-border {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('images/module-select/tile-border-inactive.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.mws-module-tile.selected .mws-module-tile-border {
    background-image: url('images/module-select/tile-border-active.png');
}

/* Below the image, centered -- neutral grey normally, gold when selected, matching the border swap
   above. flex: none keeps it from being squeezed by the image's own flex: 1 1 auto. */
.mws-module-tile-title {
    flex: none;
    text-align: center;
    color: #9a9a9a;
    font-family: 'Germania One', 'Averia Libre', serif;
    font-size: 1.25rem;
    line-height: 1.2;
    text-shadow: 0.1em 0.1em 1px black;
}

.mws-module-tile.selected .mws-module-tile-title {
    color: #ffbc53;
}

.mws-tile-version {
    position: absolute;
    bottom: 0.35rem;
    right: 0.5rem;
    color: #e5e0d8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Detail panel ("information well") -- hub_section.png border-image, same numbers as
   my-fathers-work-template's own .mws-section.style-hub-card (a thin frame around a transparent
   interior, not a filled panel graphic).
   flex-basis: 50% is the other half of the fixed split with .mws-module-carousel-row above (see that
   rule's comment for why it's a fixed proportion rather than a max-height cap). Long descriptions
   scroll within their own share via .mws-module-detail-text's overflow-y: auto instead of growing
   the well past its allotted height. */
.mws-module-detail,
.mws-empty-state {
    flex: 1 1 50%;
    min-height: 0;
}

/* Applies at every screen size, not just the narrow breakpoints below -- the prompt reads oddly
   left-aligned against the centered carousel above it regardless of viewport. */
.mws-empty-state {
    text-align: center;
}

.mws-module-detail {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    background: rgba(18, 15, 13, 0.55);
    border: 7px silver solid;
    border-image-source: url('images/module-select/hub-section-border.png');
    border-image-slice: 14;
    border-image-width: 7px;
    border-image-repeat: stretch;
    border-radius: 15px;
    padding: 1em 1.2em;
}

/* First row -- title, language/version, Play -- deliberately outside the scrollable body below
   (flex: none), so it's always visible regardless of description length. */
.mws-module-detail-header {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mws-module-detail-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffbc53;
    font-family: 'Germania One', 'Averia Libre', serif;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: 0.1em 0.1em 1px black;
}

/* The only part of the well allowed to scroll -- min-height: 0 lets it shrink inside the column
   instead of forcing .mws-module-detail taller than available space. Extra bottom padding clears
   .mws-module-detail-version, which is absolutely positioned over this area. */
.mws-module-detail-text {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 1.2em;
    overflow-y: auto;
    margin-bottom: 0.7em;
    scrollbar-width: thin;
    scrollbar-color: grey transparent;
}

.mws-module-detail-text p {
    margin: 0;
}

/* Bottom-left of the well, not the header row -- keeps the title row focused on
   name/language/Play, per feedback that "v" read as ambiguous sitting next to the language
   dropdown up there. */
.mws-module-detail-version {
    position: absolute;
    right: 1.2em;
    bottom: 0.7em;
    color: #e8c9a0;
    font-size: 0.85em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Same closed-control treatment as the settings dialog's own dropdowns (see that rule's comment for
   why only the closed box is reachable). Sized down to fit inline in the header row. Greyscale when
   disabled (a module with only one language), same convention as every other disabled control. */
.mws-module-language {
    position: static;
    height: 2rem;
    font-size: 0.85rem;
}

.mws-module-language:disabled {
    filter: grayscale(1);
    cursor: default;
}

/* Play -- icon-only, same "graphical trigger, aria via visually-hidden text" pattern as the
   template's own ending-narration continue button. Sized to match the header row's other controls. */
.mws-scenario-play-button {
    flex: none;
    width: 2.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('images/ui/button_forward_orange.png');
}

.mws-scenario-play-button:hover {
    filter: brightness(1.15);
}

/* -- Narrow (phone portrait) --------------------------------------------------------------------
 * Toolbar buttons dialed down further. Carousel keeps the base rule's height-driven tile sizing --
 * only the SLOT each tile occupies while scrolling changes: flex: 0 0 100% makes each slot the full
 * carousel width (with the narrower image centered via .mws-module-tile's own align-items: center),
 * so exactly one tile is visible between the arrows. scroll-snap-type/-align keep StepCarousel's own
 * centerElement() landing cleanly on a slot boundary. */
@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-module-toolbar .style-btn-brown,
    .mws-upload-button.style-btn-brown {
        font-size: 1em;
    }

    .mws-module-carousel {
        scroll-snap-type: x mandatory;
    }

    .mws-module-tile {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: center;
    }

    .mws-module-tile-title {
        font-size: 1.4rem;
        white-space: normal;
    }
}

/* Title/version in the detail well are redundant here (title repeats the just-tapped tile's own
   name; version is shown on the tile too) and eat space better spent on the description -- hidden at
   both narrow breakpoints. Language + Play move below the description via flex order rather than a
   markup change (.mws-module-detail-header still renders first in the DOM). */
@media (max-width: 45.99rem) and (min-height: 30.01rem), (max-height: 30rem) {
    .mws-carousel-nav-button {
        width: 3rem;
    }

    .mws-module-detail-title,
    .mws-module-detail-version {
        display: none;
    }

    .mws-module-detail-text {
        order: 1;
    }

    .mws-module-detail-header {
        order: 2;
        justify-content: flex-end;
    }
}

/* -- Landscape (short viewport) -----------------------------------------------------------------
 * Same breakpoint the main menu and settings dialog use. Carousel and well switch from stacked to
 * side by side; align-items: stretch (inherited) matches their heights automatically. Row width
 * needs to fit the tile at the shared-breakpoint 3rem nav button size: 2 buttons + 2 gaps + one tile
 * from a ~300px available height comes to about 24rem, so 40vw leaves some breathing room on most
 * phone widths. */
@media (max-height: 30rem) {
    .mws-scenario-content {
        flex-direction: row;
        align-items: stretch;
    }

    .mws-module-carousel-row {
        flex: 0 0 auto;
        width: 40vw;
    }

    /* Unlike portrait, more than one tile can show here, but the row is usually narrow enough that
       only one fits -- without room to scroll past the list's own start/end, the first/last tile
       could never reach visual center the way a middle tile can. auto margins on just the
       first/last tile open up the scroll range enough for centerElement() to actually center them,
       adapting to the tile's real rendered width instead of a fixed padding guess. */
    .mws-module-tile:first-child {
        margin-inline-start: auto;
    }

    .mws-module-tile:last-child {
        margin-inline-end: auto;
    }

    .mws-module-detail,
    .mws-empty-state {
        min-width: 0;
        width: 0;
        margin-right: 1rem;
    }
}

/* -- Manage Modules / Continue (ManageModules.razor, ContinueList.razor) -----------------------
 * Both reuse .mws-scenario-screen/-border/-back-button verbatim -- no reason to fork identical
 * chrome. Unlike Start New Game, there's no carousel/well split, just a fixed title above a plain
 * scrollable list: the title gets flex: none (a sibling of the list, stays put while it scrolls),
 * and the list itself is the scrolling region (flex: 1 1 auto + min-height: 0 + overflow-y: auto).
 * app.css's reading-column rule still applies to both -- a list of rows reads fine at 40rem, unlike
 * Start New Game's carousel.
 *
 * Landscape/portrait breakpoints here follow the same pairing as the main menu's (see that section,
 * top of file). */
.mws-manage-modules,
.mws-continue-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6b4a2e #14161c;
}

.mws-manage-modules::-webkit-scrollbar,
.mws-continue-list::-webkit-scrollbar {
    width: 8px;
}

.mws-manage-modules::-webkit-scrollbar-track,
.mws-continue-list::-webkit-scrollbar-track {
    background: #14161c;
}

.mws-manage-modules::-webkit-scrollbar-thumb,
.mws-continue-list::-webkit-scrollbar-thumb {
    background-color: #6b4a2e;
    border-radius: 4px;
}

/* Above the scrollable list (a sibling, not a child -- see the flex comment above), same treatment
   as my-fathers-work-template's own .mws-section.style-hub-card > h3 (hub_section.png's own
   heading style), just sized up for a page-level title instead of a card-level one. */
.mws-screen-title {
    flex: none;
    text-align: center;
    margin: 10px 57px 0.75rem;
    color: #f2b17b;
    text-shadow: 4px 6px 4px rgba(0, 0, 0, 0.8);
    font-size: 2.6em;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Germania One', 'Averia Libre', serif;
}

/* Entries -- same hub_section.png border-image treatment as Start New Game's own detail well (see
   that rule's comment for the full reasoning). */
.mws-module-row,
.mws-save-row {
    background: rgba(18, 15, 13, 0.55);
    border: 7px silver solid;
    border-image-source: url('images/module-select/hub-section-border.png');
    border-image-slice: 14;
    border-image-width: 7px;
    border-image-repeat: stretch;
    border-radius: 15px;
}

.mws-module-version,
.mws-save-info span,
.mws-save-timestamp,
.mws-save-language {
    color: #c9b8a0;
}

.mws-save-info strong,
.mws-module-row-info strong {
    color: #e5e0d8;
}

.mws-save-actions {
    flex-direction: column;
    align-items: flex-end;
}

/* Import Save button -- reuses .mws-upload-button's base look but needs its own width/font-size:
   "Import Save" is longer than "Add" and clips at that rule's own sizing. Three-class selector
   deliberately outweighs .mws-upload-button.style-btn-brown's specificity, independent of source
   order. */
.mws-import-save-button.mws-upload-button.style-btn-brown {
    width: 8.5em;
    font-size: 1em;
}

/* Empty state -- reachable now that the main menu's Continue button no longer hides behind a
   "has any save" guard. Plain centered text, not a bordered panel -- there's nothing to frame. */
.mws-continue-empty {
    color: #c9b8a0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    padding: 3rem 1rem;
    font-size: 1.1em;
}

/* Landscape (short viewport) -- plain (max-height: 30rem), no width qualifier, same pairing as the
   main menu's own landscape rule.
   .mws-save-row/.mws-module-row are already full-width by default; width: 100% here is
   belt-and-suspenders in case anything upstream changes .mws-scenario-screen's own padding again.
   Continue's own title needs different centering than Manage Modules'/Help's shared rule: it sits
   between the back button (left) and a real toolbar (Import Save, right) that the others don't have,
   so centering across the full viewport (correct for those two) reads visibly off-center here.
   :has() scopes this to the one screen that combines a toolbar with this title, without a
   Continue-only markup class.
   Absolutely positioned with explicit left/right (rather than margins on a centered box) so each
   side clears the back button / Import Save button by its own actual width. rem, not em, throughout
   the calc()s -- em here would resolve against .mws-screen-title's OWN font-size (2.6em) rather than
   the flanking buttons', wildly overshooting. 50px + 3.25rem is the back button's inset + width;
   50px + 8.9rem is the screen's padding + the Import Save button's rendered width. +1rem on each side
   is breathing room before the title text starts. First-pass numbers (a calculation, not a measured
   value), tune live. */
@media (max-height: 30rem) {
    .mws-save-row,
    .mws-module-row {
        width: 100%;
        box-sizing: border-box;
    }

    .mws-scenario-screen:has(.mws-module-toolbar) .mws-screen-title {
        position: absolute;
        top: 36px;
        left: calc(50px + 3.25rem + 1rem);
        right: calc(50px + 8.9rem + 1rem);
        margin: 0;
    }
}

/* Narrow (phone portrait) -- buttons move from flanking the info block to stacked underneath it,
   centered; the info block's own text stays left-anchored (unchanged from the base rule), only the
   button row is centered. Manage Modules' row has no actions wrapper (just one Delete button), so
   it's centered via align-self on the button itself.
   .mws-screen-title's own 57px margin (tuned for the wide layout) left disproportionate empty space
   on a narrow phone -- cut to 16px here, same inset the back button's own portrait rule uses. */
@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-save-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .mws-save-actions {
        justify-content: center;
    }

    .mws-module-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .mws-screen-title {
        margin-left: 16px;
        margin-right: 16px;
    }

    .mws-module-row > button {
        align-self: center;
    }
}

/* -- Help (Help.razor) -------------------------------------------------------------------------
 * Same .mws-scenario-screen/-border/-back-button/-screen-title chrome as Continue/Manage Modules.
 * The original app's help screen used a pre-baked 3-tab border image -- not usable here since
 * Help.razor supports an arbitrary topic count. The hub border (same asset used for every other
 * list/entry panel in this theme) covers the sidebar instead, with plain CSS gradients for
 * hover/selected state -- scales to any topic count for free. The content pane reuses
 * my-fathers-work-template's popup_parchment_border.png for the "torn parchment page" look, hence
 * its dark-brown text color rather than this theme's usual light-on-dark palette. */
.mws-help {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
}

/* Sidebar -- hub border around the whole tab list, not each tab individually. Scrolls on its own if
   there are enough topics, same thin-scrollbar treatment as the settings dialog / Manage Modules /
   Continue. */
.mws-help-topics {
    flex: 0 0 14rem;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
    overflow-y: auto;
    gap: 0;
    background: rgba(18, 15, 13, 0.55);
    border: 7px silver solid;
    border-image-source: url('images/module-select/hub-section-border.png');
    border-image-slice: 14;
    border-image-width: 7px;
    border-image-repeat: stretch;
    border-radius: 15px;
    padding: 0.4em;
    scrollbar-width: thin;
    scrollbar-color: #6b4a2e #14161c;
}

.mws-help-topics::-webkit-scrollbar {
    width: 8px;
}

.mws-help-topics::-webkit-scrollbar-track {
    background: #14161c;
}

.mws-help-topics::-webkit-scrollbar-thumb {
    background-color: #6b4a2e;
    border-radius: 4px;
}

.mws-help-topics button {
    flex: none;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12));
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    color: #9a9a9a;
    font-family: 'Germania One', 'Averia Libre', serif;
    font-size: 1.05em;
    cursor: pointer;
}

.mws-help-topics button:last-child {
    border-bottom: none;
}

.mws-help-topics button:hover:not(.selected) {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.08));
    color: #c9b8a0;
}

.mws-help-topics button.selected {
    background: linear-gradient(to bottom, rgba(94, 116, 148, 0.6), rgba(38, 48, 63, 0.45));
    color: #f2c879;
}

/* Content pane -- fixed title above a scrollable body, same "header stays put, body scrolls"
   split as Start New Game's own detail well (.mws-module-detail-header/-text). */
.mws-help-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 20px;
    border-image-source: url('images/help/popup-parchment-border.png');
    border-image-slice: 6% 4% fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    background: transparent;
    color: #2b2016;
    padding: 8px 24px 24px;
}

.mws-help-content-title {
    flex: none;
    margin: 0 0 0.6em;
    color: #2b2016;
    font-family: 'Germania One', 'Averia Libre', serif;
}

.mws-help-content-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #8a6a4a rgba(0, 0, 0, 0.1);
}

.mws-help-content-body p {
    margin: 0;
}

.mws-help-content-body::-webkit-scrollbar {
    width: 8px;
}

.mws-help-content-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.mws-help-content-body::-webkit-scrollbar-thumb {
    background-color: #8a6a4a;
    border-radius: 4px;
}

/* Narrow (portrait) -- side by side doesn't fit a phone width; stack topics above content instead.
   .mws-help's own align-items: stretch now stretches both to full width for free. Topics gets a
   fixed height (not flex: 1), sized for about 3 visible rows, with the content pane taking whatever
   is left. No landscape override exists yet for this screen; if one gets added it wants a plain
   (max-height: 30rem), no width qualifier (same pairing as elsewhere in this file). */
@media (max-width: 45.99rem) and (min-height: 30.01rem) {
    .mws-help {
        flex-direction: column;
    }

    .mws-help-topics {
        flex: 0 0 10rem;
        margin: 0 5px;
    }

    .mws-help-content {
        margin: 0 5px;
    }
}