/* ===== Grundlayout ===== */
:root {

    /* LIGHT THEME */

    --bg: #f4f6f8;
    --card: rgba(255,255,255,0.92);

    --text: #222;
    --border: rgba(0,0,0,0.08);

    --link: #2563eb;
    --link-hover: #1d4ed8;

    --button: #2563eb;
    --button-hover: #1d4ed8;
}

[data-theme="dark"] {

    /* DARK THEME */

    --bg: #101216;
    --card: rgba(28,31,38,0.92);

    --text: #e8e8e8;
    --border: rgba(255,255,255,0.08);

    --link: #60a5fa;
    --link-hover: #93c5fd;

    --button: #3b82f6;
    --button-hover: #2563eb;
}
body {
    margin: 0;
    padding: 40px 20px;

    background: var(--bg);
    color: var(--text);

    font-family: "Inter", sans-serif;
    line-height: 1.8;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

#squiffy-container {
    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;
    padding: 40px;

    max-width: 800px;
    margin: auto;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

a.squiffy-link {
    color: var(--link);
    text-decoration: none;

    border-bottom: 1px solid transparent;

    transition: all .2s;
}

a.squiffy-link:hover {
    color: var(--link-hover);
    border-color: var(--link-hover);
}

button.squiffy-header-button {
    background: var(--button);
    color: white;

    border: none;
    border-radius: 12px;

    padding: 10px 18px;

    cursor: pointer;

    transition: all .2s;
}

button.squiffy-header-button:hover {
    background: var(--button-hover);
    transform: translateY(-2px);
}

div.squiffy-output-block:not(:last-child),
div.squiffy-output-passage:not(:last-child),
div.squiffy-output-section:not(:last-child) {

    border-bottom: 1px solid var(--border);

    margin-bottom: 2rem;
    padding-bottom: 2rem;
}


button.squiffy-header-button:active {
    transform: translateY(0);
}

/* ===== Storytext ===== */

#squiffy {
    font-size: 1.15rem;
}

#squiffy p {
    margin-bottom: 1.5em;
}

/* ===== Links / Entscheidungen ===== */

a.squiffy-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;

    transition: all 0.25s ease;
}

a.squiffy-link:hover {
    color: #93c5fd;
    border-color: #93c5fd;
}

a.squiffy-link.disabled,
div.squiffy-output-section:not(:last-child) a.squiffy-link,
div.squiffy-output-section.links-disabled a.squiffy-link {
    color: #777 !important;
    opacity: 0.6;
    pointer-events: none;
}

/* ===== Kapiteltrenner ===== */

div.squiffy-output-block:not(:last-child),
div.squiffy-output-passage:not(:last-child),
div.squiffy-output-section:not(:last-child) {

    margin-bottom: 2rem;
    padding-bottom: 2rem;

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ===== Bilder ===== */

#squiffy img {
    max-width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}

/* ===== Continue ===== */

.squiffy-continue {
    color: #60a5fa;
    cursor: pointer;
    font-weight: bold;
}

/* ===== Scrollbar ===== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}