/* Dungeon Generator: the Encounter Builder's palette and panels, with the map editor's own pieces. */
.dungeon-generator {
    --dungeon-bg: #122027;
    --dungeon-surface: #0e171c;
    --dungeon-surface-2: #17262d;
    --dungeon-border: #31454d;
    --dungeon-text: #f2c080;
    --dungeon-muted: #b6cbd0;
    --dungeon-accent: #00a887;
    --dungeon-danger: #d85f5f;
    --dungeon-link: #80ead5;
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px 16px 56px;
    color: var(--dungeon-text);
}

.dungeon-generator h2,
.dungeon-generator h3,
.dungeon-generator p {
    margin-top: 0;
}

.dungeon-generator h2 {
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.dungeon-generator h3 {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.dungeon-header,
.dungeon-panel {
    background: var(--dungeon-surface);
    border: 1px solid rgba(242, 192, 128, 0.16);
    border-radius: 8px;
}

.dungeon-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 20px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

/* The dungeon's name heads the page, centred above its controls, with how its saving stands at its right. The empty
   first column balances the status, so the name sits in the middle of the header. */
.dungeon-title-row {
    display: grid;
    flex: 1 0 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px 14px;
}

.dungeon-title-row::before {
    content: "";
}

.dungeon-title-row .dungeon-save-status {
    justify-self: end;
}

.dungeon-title-input {
    min-width: 0;
    width: 100%;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 6px;
    padding: 4px 8px;
    color: #fff1cf;
    background: transparent;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}

.dungeon-title-input::placeholder {
    color: rgba(242, 192, 128, 0.55);
}

.dungeon-title-input:hover {
    border-color: var(--dungeon-border);
}

.dungeon-title-input:focus {
    outline: none;
    border-color: var(--dungeon-accent);
    background: var(--dungeon-bg);
}

.dungeon-save-status {
    white-space: normal;
}

.dungeon-save-status.is-error {
    border-color: rgba(216, 95, 95, 0.6);
    color: #ffd2d2;
    background: rgba(216, 95, 95, 0.12);
}

.dungeon-note,
.dungeon-empty,
.dungeon-card-summary {
    color: var(--dungeon-muted);
}

.dungeon-note {
    font-size: 0.86rem;
    margin: 10px 0 0;
}

.dungeon-note a,
.dungeon-history-item a,
.dungeon-card-actions a,
.dungeon-key a {
    color: var(--dungeon-link);
}

.dungeon-header-actions,
.dungeon-section-heading,
.dungeon-map-actions,
.dungeon-size-controls,
.dungeon-dialog-actions,
.dungeon-history-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dungeon-section-heading {
    justify-content: space-between;
    margin-bottom: 12px;
}

.dungeon-size-controls {
    flex-wrap: wrap;
    align-items: flex-end;
}

.dungeon-field--inline {
    margin-top: 0;
}

.dungeon-field--inline input {
    width: 92px;
}

.dungeon-size-times {
    color: var(--dungeon-muted);
    padding-bottom: 9px;
}

.dungeon-size-controls .dungeon-note {
    margin: 0 0 10px;
}

.dungeon-floor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.dungeon-floor-tab {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    font-weight: 700;
    font-size: 0.86rem;
}

.dungeon-floor-tab[aria-selected="true"] {
    border-color: var(--dungeon-accent);
    background: rgba(0, 168, 135, 0.16);
    color: #fff4df;
}

.dungeon-floor-tab--add {
    border-style: dashed;
    color: var(--dungeon-text);
}

.dungeon-full-width {
    width: 100%;
    margin-top: 12px;
}

.dungeon-link {
    color: var(--dungeon-link);
    margin-right: auto;
}

.dungeon-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid rgba(242, 192, 128, 0.35);
    border-radius: 8px;
    background: var(--dungeon-surface);
    color: var(--dungeon-text);
    padding: 20px;
}

.dungeon-dialog--wide {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.dungeon-rows {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.dungeon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(182, 203, 208, 0.12);
    border-radius: 6px;
    background: rgba(18, 32, 39, 0.72);
    padding: 6px 10px;
}

.dungeon-row.is-replacing {
    border-color: var(--dungeon-accent);
}

.dungeon-row-name {
    flex: 1 1 200px;
    min-width: 0;
    color: #fff1cf;
    overflow-wrap: anywhere;
}

.dungeon-row-name a {
    color: var(--dungeon-link);
}

.dungeon-row .dungeon-row-count {
    width: 72px;
    min-height: 34px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    padding: 4px 8px;
}

.dungeon-row .dungeon-field--check {
    margin-top: 0;
}

.dungeon-generator .dungeon-small-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.8rem;
}

.dungeon-picker {
    border-top: 1px solid rgba(182, 203, 208, 0.12);
    margin-top: 14px;
    padding-top: 12px;
}

.dungeon-picker-search,
.dungeon-picker-create {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dungeon-picker-create {
    margin-top: 10px;
}

.dungeon-picker-search select,
.dungeon-picker-search input,
.dungeon-picker-create input {
    min-height: 36px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    padding: 6px 10px;
}

.dungeon-picker-search input,
.dungeon-picker-create input {
    flex: 1 1 220px;
}

.dungeon-picker .dungeon-link {
    display: inline-block;
    margin-top: 8px;
}

.dungeon-dialog::backdrop {
    background: rgba(5, 10, 12, 0.72);
}

.dungeon-dialog h2 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.dungeon-dialog-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 16px;
}

.dungeon-section-heading h2 {
    margin-bottom: 0;
}

.dungeon-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
}

.dungeon-panel {
    padding: 18px;
    margin-bottom: 18px;
}

.dungeon-sidebar {
    align-self: start;
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
}

.dungeon-sidebar,
.dungeon-history-list {
    scrollbar-color: var(--dungeon-border) transparent;
    scrollbar-width: thin;
}

.dungeon-sidebar section + section {
    border-top: 1px solid rgba(182, 203, 208, 0.12);
    margin-top: 16px;
    padding-top: 16px;
}

.dungeon-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-top: 10px;
}

.dungeon-field span {
    color: var(--dungeon-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.dungeon-field input,
.dungeon-field select,
.dungeon-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    padding: 8px 10px;
}

.dungeon-field input:disabled,
.dungeon-field select:disabled,
.dungeon-field textarea:disabled {
    background: #20272c;
    border-color: rgba(182, 203, 208, 0.18);
    color: #83969b;
    cursor: not-allowed;
}

.dungeon-field textarea {
    min-height: 88px;
    resize: vertical;
}

.dungeon-field input:focus,
.dungeon-field select:focus,
.dungeon-field textarea:focus {
    border-color: var(--dungeon-accent);
    outline: 2px solid rgba(0, 168, 135, 0.24);
    outline-offset: 0;
}

.dungeon-field--check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dungeon-field--check input {
    width: auto;
    min-height: 0;
    accent-color: var(--dungeon-accent);
}

.dungeon-generator input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.dungeon-generator input[type="number"]::-webkit-outer-spin-button,
.dungeon-generator input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dungeon-btn,
.dungeon-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    border: 1px solid var(--dungeon-border);
    min-height: 40px;
    padding: 8px 12px;
    font-weight: 700;
    color: #fff4df;
    background: var(--dungeon-surface-2);
}

.dungeon-btn:disabled,
.dungeon-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.dungeon-generator .btn-buy {
    width: auto;
}

.dungeon-generator .btn-close-dnd {
    background-color: #151f25;
    border: 1px solid #e7bf8f;
    border-radius: 25px;
    color: #e7bf8f;
    margin-top: 0;
    text-transform: uppercase;
    width: auto;
}

.dungeon-generator .btn-close-dnd:hover,
.dungeon-generator .btn-close-dnd:focus {
    background-color: #e7bf8f;
    color: #151f25;
}

.dungeon-generator .dungeon-icon-btn {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
}

.dungeon-header-actions .dungeon-btn {
    white-space: nowrap;
}

/* A free plan's limits (web/dungeon_plans.py), on a row of their own under the header's controls; once its week's
   dungeons are used up, in the colours of a warning. */
.dungeon-plan-note {
    flex: 1 0 100%;
    margin: 0;
    border: 1px solid rgba(242, 192, 128, 0.35);
    border-radius: 8px;
    background: rgba(242, 192, 128, 0.08);
    color: var(--dungeon-text);
    padding: 10px 16px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.dungeon-plan-note.is-used-up {
    border-color: rgba(216, 95, 95, 0.7);
    background: rgba(216, 95, 95, 0.16);
    color: #ffe0e0;
}

.dungeon-plan-note a {
    color: var(--dungeon-link);
    font-weight: 700;
}

/* What the plan does not allow stays in sight, greyed out; a press tells why. */
.dungeon-generator .is-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The site's .btn-buy has a top margin of its own; in this row it would sit lower than its neighbours. */
.dungeon-header-actions .btn-buy {
    margin-top: 0;
}

.dungeon-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dungeon-tool,
.dungeon-swatch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    font-size: 0.88rem;
    text-align: left;
}

.dungeon-tool:hover,
.dungeon-swatch:hover {
    border-color: var(--dungeon-accent);
}

.dungeon-tool[aria-pressed="true"],
.dungeon-swatch[aria-checked="true"] {
    border-color: var(--dungeon-accent);
    background: rgba(0, 168, 135, 0.16);
    color: #fff4df;
}

.dungeon-tool i {
    width: 16px;
    text-align: center;
}

.dungeon-tool span {
    white-space: nowrap;
}

.dungeon-tool-grid .dungeon-tool {
    font-size: 0.84rem;
    padding-inline: 8px;
}

.dungeon-swatches {
    display: grid;
    gap: 6px;
}

/* The Place palette in the groups of Solasta's gadget library. */
.dungeon-placeables {
    display: grid;
    gap: 10px;
}

/* A long name (Teleport destination) wraps inside its button rather than spilling out of it. */
.dungeon-placeables .dungeon-tool span {
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: break-word;
    min-width: 0;
}

.dungeon-palette-heading {
    margin: 0 0 6px;
    color: var(--dungeon-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The room library: ready-made rooms by group, each with its plan. */
.dungeon-room-library {
    display: grid;
    gap: 8px;
}

.dungeon-template-group summary {
    cursor: pointer;
    color: #f7dfbf;
    font-size: 0.88rem;
    padding: 4px 0;
}

.dungeon-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.dungeon-template {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: var(--dungeon-bg);
    color: #f7dfbf;
    font-size: 0.8rem;
}

.dungeon-template canvas {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.dungeon-template:hover,
.dungeon-template[aria-pressed="true"] {
    border-color: var(--dungeon-accent);
}

.dungeon-template[aria-pressed="true"] {
    background: rgba(0, 168, 135, 0.16);
}

.dungeon-size-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dungeon-size-pair input {
    min-width: 0;
    flex: 1 1 0;
}

.dungeon-shift {
    display: flex;
    gap: 6px;
}

/* What the game sets on a floor by itself: a switch for each part, and a button that makes its pieces the author's. */
.dungeon-auto {
    margin: 10px 0 0;
    border: 0;
    padding: 0;
    min-width: 0;
}

.dungeon-auto legend {
    margin: 0;
    color: var(--dungeon-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.dungeon-generator .dungeon-auto-part {
    margin-top: 6px;
    white-space: nowrap;
}

.dungeon-auto-count {
    text-transform: none;
}

.dungeon-auto-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.dungeon-auto-edit span {
    flex-basis: 100%;
    color: var(--dungeon-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.dungeon-toggle {
    gap: 4px;
    cursor: pointer;
}

.dungeon-toggle input {
    margin: 0;
}

/* Why the ghost on the map cannot go where it is (Solasta's red caption). */
.dungeon-map-caption {
    margin: 8px 0 0;
    border: 1px solid rgba(216, 95, 95, 0.4);
    border-radius: 6px;
    background: rgba(216, 95, 95, 0.14);
    color: #ffd8d8;
    padding: 6px 10px;
    font-size: 0.86rem;
}

.dungeon-form-heading {
    margin: 12px 0 0;
    color: #f7dfbf;
}

.dungeon-small-btn.is-active {
    border-color: var(--dungeon-accent);
    background: rgba(0, 168, 135, 0.2);
}

.dungeon-swatch-chip {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.dungeon-summary {
    display: grid;
    gap: 8px;
    margin: 0;
}

.dungeon-summary div,
.dungeon-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(182, 203, 208, 0.12);
    border-radius: 6px;
    background: rgba(18, 32, 39, 0.72);
    padding: 10px;
}

.dungeon-summary dt,
.dungeon-summary dd {
    margin: 0;
}

.dungeon-summary dt {
    color: var(--dungeon-muted);
}

.dungeon-summary dd {
    color: #fff1cf;
    font-weight: 700;
}

.dungeon-warnings {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.dungeon-warning,
.dungeon-error {
    border-radius: 6px;
    padding: 10px;
    font-size: 0.88rem;
}

.dungeon-warning {
    background: rgba(242, 192, 128, 0.1);
    border: 1px solid rgba(242, 192, 128, 0.35);
    color: #f7dfbf;
}

.dungeon-error {
    background: rgba(216, 95, 95, 0.14);
    border: 1px solid rgba(216, 95, 95, 0.4);
    color: #ffd8d8;
}

.dungeon-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid rgba(242, 192, 128, 0.35);
    border-radius: 6px;
    padding: 2px 8px;
    color: #f7dfbf;
    background: rgba(242, 192, 128, 0.1);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

.dungeon-canvas-wrap {
    overflow: auto;
    max-height: 78vh;
    border: 1px solid var(--dungeon-border);
    border-radius: 6px;
    background: #0a1114;
}

/* Under the map while a piece is held (a room from the library, a moved or copied placement) or a target is picked. */
.dungeon-held-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* A touch screen's right button: on while pressed. */
.dungeon-touch-only {
    display: none;
}

.dungeon-generator #dungeon-right-click-btn[aria-pressed="true"] {
    border-color: var(--dungeon-accent);
    color: #ffffff;
    background: rgba(0, 168, 135, 0.22);
}

@media (any-pointer: coarse) {
    .dungeon-touch-only {
        display: inline-flex;
    }
}

/* The pointer's cell: with no hover (a touch screen) it would only ever tell the last touch. */
@media (hover: none) {
    #dungeon-cursor {
        display: none;
    }
}

/* The sidebar's sheet header and the Tools button that opens it show only where the sidebar is a sheet (narrow
   screens, below). */
.dungeon-sheet-header,
.dungeon-sheet-only {
    display: none;
}

.dungeon-canvas-wrap:focus-visible {
    outline: 2px solid var(--dungeon-accent);
    outline-offset: 2px;
}

#dungeon-canvas {
    display: block;
    margin: 0 auto;
    touch-action: none;
    cursor: crosshair;
}

.dungeon-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.dungeon-inspector-grid .dungeon-field--wide {
    grid-column: 1 / -1;
}

.dungeon-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.dungeon-search {
    display: grid;
    grid-template-columns: 180px minmax(200px, 1fr) 96px 96px auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 16px;
}

.dungeon-search .dungeon-field {
    margin-top: 0;
}

.dungeon-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dungeon-monster-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--dungeon-border);
    border-radius: 8px;
    background: rgba(6, 15, 19, 0.55);
    overflow: hidden;
}

.dungeon-monster-card.is-armed {
    border-color: var(--dungeon-accent);
    box-shadow: 0 0 0 2px rgba(0, 168, 135, 0.28);
}

.dungeon-monster-card__image {
    aspect-ratio: 16 / 10;
    display: block;
    width: 100%;
    object-fit: cover;
}

.dungeon-monster-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.dungeon-monster-card h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #fff1cf;
    overflow-wrap: anywhere;
}

.dungeon-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dungeon-card-summary {
    font-size: 0.84rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    margin: 0;
}

.dungeon-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.dungeon-card-actions .dungeon-btn {
    flex: 1 1 auto;
    min-height: 36px;
    text-transform: none;
}

.dungeon-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.dungeon-accordion-toggle,
.dungeon-collapsible-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--dungeon-text);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.dungeon-accordion-toggle i,
.dungeon-collapsible-toggle i {
    color: #f7dfbf;
    transition: transform 140ms ease;
}

.dungeon-accordion-toggle[aria-expanded="true"] i,
.dungeon-collapsible-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Each part of the sidebar folds away under its heading. */
.dungeon-generator .dungeon-collapsible-heading {
    margin: 0;
}

.dungeon-collapsible-toggle {
    font: inherit;
    font-weight: 700;
}

.dungeon-collapsible-toggle:focus-visible {
    outline: 2px solid var(--dungeon-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.dungeon-collapsible-body {
    margin-top: 14px;
}

.dungeon-accordion-title,
.dungeon-accordion-subtitle {
    display: block;
}

.dungeon-accordion-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.dungeon-accordion-subtitle {
    color: var(--dungeon-muted);
    font-size: 0.86rem;
    margin-top: 3px;
}

.dungeon-generate-body {
    border-top: 1px solid rgba(182, 203, 208, 0.12);
    margin-top: 14px;
    padding-top: 4px;
}

.dungeon-generate-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.dungeon-key {
    display: grid;
    gap: 10px;
}

.dungeon-key-entry {
    border: 1px solid rgba(182, 203, 208, 0.12);
    border-radius: 6px;
    background: rgba(18, 32, 39, 0.72);
    padding: 12px;
    cursor: pointer;
}

.dungeon-key-entry.is-selected {
    border-color: var(--dungeon-accent);
}

.dungeon-key-entry h3 {
    color: #fff1cf;
    margin-bottom: 6px;
}

.dungeon-key-entry ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--dungeon-muted);
    font-size: 0.88rem;
}

.dungeon-read-aloud {
    border-left: 3px solid var(--dungeon-text);
    padding: 4px 0 4px 10px;
    color: #f7dfbf;
    font-style: italic;
    white-space: pre-line;
    margin: 6px 0;
}

.dungeon-link-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.dungeon-history-list {
    display: grid;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.dungeon-history-list .dungeon-history-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.dungeon-history-title {
    font-weight: 700;
    color: #fff1cf;
    overflow-wrap: anywhere;
}

.dungeon-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--dungeon-muted);
    font-size: 0.86rem;
}

.dungeon-history-actions .dungeon-btn {
    min-height: 34px;
    padding: 6px 10px;
}

.dungeon-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    max-width: min(420px, calc(100vw - 40px));
    border: 1px solid var(--dungeon-border);
    border-radius: 8px;
    background: #0b1519;
    color: #f8e4c0;
    padding: 12px 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.dungeon-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dungeon-toast.dungeon-error {
    background: #2a1416;
}

/* Over the whole page while a random dungeon is generated: the Monster Generator's loading overlay (its spinner and
   its lines that pop in, monster_generator4.css .loading-overlay), above the tools sheet and the toast. */
.dungeon-generating {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.7);
}

.dungeon-generating[hidden] {
    display: none;
}

.dungeon-generating__spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(231, 191, 143, 0.3);
    border-top-color: #e7bf8f;
    border-radius: 50%;
    animation: dungeon-generating-spin 1.5s linear infinite;
}

.dungeon-generating__message {
    max-width: 32rem;
    margin: 0;
    color: #e7bf8f;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    animation: dungeon-generating-pop 0.5s ease-out forwards;
}

body.dungeon-is-generating {
    overflow: hidden;
}

@keyframes dungeon-generating-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dungeon-generating-pop {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    50% {
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dungeon-generating__spinner {
        animation-duration: 4s;
    }

    .dungeon-generating__message {
        animation: none;
    }
}

/* The printed sheet (dungeon_pdf_export.js): a white A4 page, built off screen and captured by html2pdf. */
.dungeon-print-host {
    position: fixed;
    left: -10000px;
    top: 0;
}

.dungeon-print-sheet {
    width: 718px;
    padding: 0;
    background: #ffffff;
    color: #1d1a16;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    line-height: 1.45;
}

.dungeon-print-sheet h1 {
    font-size: 24px;
    margin: 0 0 4px;
    color: #1d1a16;
}

.dungeon-print-sheet h2 {
    font-size: 16px;
    margin: 18px 0 8px;
    border-bottom: 2px solid #7a1f1f;
    padding-bottom: 3px;
    color: #7a1f1f;
}

.dungeon-print-sheet p {
    margin: 0 0 6px;
}

.dungeon-print-meta {
    color: #5b5148;
    font-style: italic;
}

.dungeon-print-map img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #1d1a16;
}

.dungeon-print-entry {
    margin-bottom: 12px;
}

.dungeon-print-notes {
    white-space: pre-line;
}

.dungeon-print-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    color: #5b5148;
}

.dungeon-print-roster {
    width: 100%;
    border-collapse: collapse;
}

.dungeon-print-roster th,
.dungeon-print-roster td {
    border-bottom: 1px solid #d8cdb8;
    padding: 4px 6px;
    text-align: left;
}

@media (max-width: 1180px) {
    .dungeon-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .dungeon-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dungeon-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones and upright tablets: one column with the map first; the sidebar is a sheet that slides up over the lower
   part of the screen from the Tools button, so the map stays in sight while a tool is chosen. */
@media (max-width: 920px) {
    .dungeon-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dungeon-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dungeon-header-actions .dungeon-btn {
        flex: 1 1 0;
        min-width: max-content;
    }

    .dungeon-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dungeon-sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        max-height: min(60vh, 620px);
        margin: 0;
        padding-top: 0;
        border-radius: 14px 14px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    .dungeon-sidebar.is-open {
        transform: none;
        visibility: visible;
        transition: transform 200ms ease;
    }

    .dungeon-sheet-header {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -18px 12px;
        padding: 10px 18px;
        border-bottom: 1px solid rgba(182, 203, 208, 0.12);
        background: var(--dungeon-surface);
        color: #f7dfbf;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .dungeon-sheet-only {
        display: inline-flex;
    }

    /* In the sheet the saved maps leave room for the tools below them. */
    .dungeon-sidebar .dungeon-history-list {
        max-height: 190px;
    }

    .dungeon-section-heading {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dungeon-map-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dungeon-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dungeon-link-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dungeon-generator {
        padding-inline: 10px;
    }

    .dungeon-header,
    .dungeon-panel {
        padding: 12px;
    }

    .dungeon-sheet-header {
        margin-inline: -12px;
        padding-inline: 12px;
    }

    .dungeon-title-input {
        font-size: 1.3rem;
    }

    .dungeon-card-grid,
    .dungeon-search,
    .dungeon-inspector-grid,
    .dungeon-history-item,
    .dungeon-title-row {
        grid-template-columns: 1fr;
    }

    .dungeon-title-row::before {
        display: none;
    }

    .dungeon-title-row .dungeon-save-status {
        justify-self: center;
    }
}