/* FILE-SUMMARY: The site's theme in one place: colours and fonts as CSS variables, and the in-theme look of panels, the sign-in form, form fields and buttons (dark wood frame, parchment surface, warm gold accents). */

/*
  Change the look here. --dc-font-theme is replaced by the page when the page content names an uploaded theme font;
  Chinese text falls back to the reader's system fonts through the generic family at the end.
*/
:root {
    --dc-wood-dark: #24160b;
    --dc-wood: #3f2815;
    --dc-wood-light: #6b4626;
    --dc-parchment: #f1e3c2;
    --dc-parchment-dark: #d8bf8e;
    --dc-ink: #2b1d10;
    --dc-ink-soft: #5c4329;
    --dc-gold: #c9a24a;
    --dc-gold-light: #f2d68e;
    --dc-glow: rgba(255, 186, 96, 0.55);
    --dc-danger: #8e1f16;
    --dc-font-fallback: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --dc-font-theme: var(--dc-font-fallback);
}

/* Panels: a parchment sheet in a dark wood frame with a thin gold edge. */

.scene-panel {
    padding: 10px;
    border: 1px solid var(--dc-gold);
    border-radius: 6px;
    background: linear-gradient(160deg, var(--dc-wood-light), var(--dc-wood) 45%, var(--dc-wood-dark));
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 170, 80, 0.2);
    color: var(--dc-ink);
    font-family: var(--dc-font-theme);
}

.scene-panel::backdrop {
    background: rgba(5, 4, 3, 0.35);
}

.scene-panel__inner {
    max-height: calc(85vh - 20px);
    border-radius: 3px;
    background: radial-gradient(ellipse at 50% 40%, var(--dc-parchment) 55%, var(--dc-parchment-dark));
    box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.7), inset 0 0 36px rgba(110, 70, 30, 0.35);
}

.scene-panel__header {
    border-bottom: 1px solid rgba(107, 70, 38, 0.45);
}

.scene-panel__header h2 {
    color: var(--dc-wood-dark);
    font-size: 1.55rem;
    font-weight: normal;
    letter-spacing: 0.02em;
}

.scene-panel__body a {
    color: var(--dc-wood);
    text-decoration-color: var(--dc-gold);
}

/* Buttons: wood with a gold edge and gold lettering; the close control is a round one. */

.dc-button,
.scene-panel__close {
    border: 1px solid var(--dc-gold);
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--dc-wood-light), var(--dc-wood));
    color: var(--dc-gold-light);
    font-family: var(--dc-font-theme);
    cursor: pointer;
    transition: box-shadow 150ms ease, filter 150ms ease;
}

.dc-button {
    padding: 0.4em 1.2em;
    font-size: 1em;
    letter-spacing: 0.04em;
}

.scene-panel__close {
    border-radius: 50%;
    font-size: 1.3rem;
}

.dc-button:hover,
.dc-button:focus-visible,
.scene-panel__close:hover,
.scene-panel__close:focus-visible {
    box-shadow: 0 0 12px var(--dc-glow);
    filter: brightness(1.12);
    outline: none;
}

.dc-button:disabled {
    filter: grayscale(0.6);
    cursor: default;
}

/* Form fields on parchment. */

.dc-input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.35em 0.5em;
    border: 1px solid var(--dc-wood-light);
    border-radius: 3px;
    background: rgba(255, 250, 236, 0.85);
    color: var(--dc-ink);
    font-family: var(--dc-font-theme);
    font-size: 1em;
}

.dc-input:focus-visible {
    border-color: var(--dc-gold);
    box-shadow: 0 0 0 2px var(--dc-glow);
    outline: none;
}

/* The sign-in form: the same parchment in wood as a panel. */

.gate-signin {
    padding: 0.45em;
    border: 1px solid var(--dc-gold);
    border-radius: 6px;
    background: linear-gradient(160deg, var(--dc-wood-light), var(--dc-wood) 45%, var(--dc-wood-dark));
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 170, 80, 0.25);
    color: var(--dc-ink);
    font-family: var(--dc-font-theme);
}

.gate-signin__inner {
    padding: 0.6em 0.9em 0.9em;
    border-radius: 3px;
    background: radial-gradient(ellipse at 50% 40%, var(--dc-parchment) 55%, var(--dc-parchment-dark));
    box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.7), inset 0 0 30px rgba(110, 70, 30, 0.35);
}

.gate-signin__errors {
    color: var(--dc-danger);
}