/* The Idiot-Sicher Bombenfest Fill-Out Engine — Rediscombobulator edition.
   Behaviour untouched. The wardrobe is now swappable: four complete
   skins, each defined purely as a block of custom properties on
   :root[data-skin]. Every rule below reads those properties and knows
   nothing about any particular look, so adding a fifth skin means
   adding one variable block and touching nothing else.

   The skin is a SEPARATE axis from the family-wide light/dark/slate
   theme toggle: each skin carries its own fixed palette, exactly as
   the newspaper always did ("a newspaper reads as a newspaper"). The
   theme toggle still drives the #controls bar via the shared --ui-*
   variables from redisco/style.css. */

/* ═══════════════════════════════════════════════════════════════
   SKIN 1 — POSTER (the original 1920s newspaper + wanted poster).
   ═══════════════════════════════════════════════════════════════ */

:root[data-skin="poster"] {
    --gf-body-font: "Old Standard TT", serif;
    --gf-display-font: "Rye", serif;
    --gf-size: 24px;
    --gf-line: 1.55;

    --gf-bg: #f0e9d8;
    --gf-ink: #2a2520;
    --gf-ink-strong: #1a1712;
    --gf-accent: #8b6914;
    --gf-rule: rgba(42, 37, 32, 0.35);
    --gf-border: rgba(42, 37, 32, 0.4);
    --gf-border-width: 1px;
    --gf-radius: 0px;
    --gf-hover-tint: rgba(42, 37, 32, 0.06);

    --gf-wrong: #6b1f1a;
    --gf-right: #2f5c3a;

    /* headline */
    --gf-h2-font: var(--gf-body-font);
    --gf-h2-size: 46px;
    --gf-h2-weight: 700;
    --gf-h2-align: center;
    --gf-h2-transform: uppercase;
    --gf-h2-spacing: 0.04em;
    --gf-h2-rule: 3px double var(--gf-ink);

    /* masthead */
    --gf-masthead-font: var(--gf-body-font);
    --gf-masthead-color: var(--gf-ink);
    --gf-masthead-align: center;

    /* word chips */
    --gf-chip-font: var(--gf-body-font);
    --gf-chip-style: italic;
    --gf-chip-size: 15px;
    --gf-chip-transform: none;
    --gf-chip-bg: transparent;

    /* the gaps */
    --gf-box-bg: transparent;
    --gf-box-underline: 1px solid var(--gf-ink);

    /* the popup */
    --gf-pop-bg:
        radial-gradient(ellipse at center, transparent 55%, rgba(90, 70, 40, 0.18) 100%),
        #e0c896;
    --gf-pop-border: 3px solid var(--gf-ink-strong);
    --gf-pop-shadow: 6px 6px 0 rgba(42, 37, 32, 0.85);
    --gf-pop-radius: 0px;
    --gf-tack-display: block;

    --gf-verdict-font: var(--gf-display-font);
    --gf-verdict-size: 1.8em;
    --gf-verdict-align: center;
    --gf-verdict-transform: none;
    --gf-verdict-spacing: 0.03em;
    --gf-verdict-rule: 2px solid var(--gf-rule);

    --gf-msg-font: var(--gf-body-font);
    --gf-msg-weight: 700;
    --gf-msg-align: center;

    --gf-btn-font: var(--gf-display-font);
    --gf-btn-size: 1.5em;
    --gf-btn-align: center;
    --gf-btn-spacing: 0.04em;
    --gf-btn-rule: 2px solid var(--gf-rule);
    --gf-btn-hover: #8b2f24;

    --gf-story-end: var(--gf-accent);
    --gf-column-rule: 1px solid var(--gf-rule);
}

/* ═══════════════════════════════════════════════════════════════
   SKIN 2 — SWISS. International Typographic Style: one grotesque,
   flush left, hairlines, a single red accent, nothing decorative.
   Red is the accent on rules and labels, but the verdict colours
   stay semantic (red wrong, green right) — students working under a
   bit of pressure need clarity more than they need orthodoxy.
   ═══════════════════════════════════════════════════════════════ */

:root[data-skin="swiss"] {
    --gf-body-font: "Archivo", sans-serif;
    --gf-display-font: "Archivo", sans-serif;
    --gf-size: 21px;
    --gf-line: 1.55;

    --gf-bg: #ffffff;
    --gf-ink: #111111;
    --gf-ink-strong: #000000;
    --gf-accent: #d9251d;
    --gf-rule: rgba(17, 17, 17, 0.28);
    --gf-border: rgba(17, 17, 17, 0.45);
    --gf-border-width: 1px;
    --gf-radius: 0px;
    --gf-hover-tint: rgba(17, 17, 17, 0.05);

    --gf-wrong: #d9251d;
    --gf-right: #007a3d;

    --gf-h2-font: var(--gf-body-font);
    --gf-h2-size: 42px;
    --gf-h2-weight: 700;
    --gf-h2-align: left;
    --gf-h2-transform: none;
    --gf-h2-spacing: -0.02em;
    --gf-h2-rule: 3px solid var(--gf-accent);

    --gf-masthead-font: var(--gf-body-font);
    --gf-masthead-color: var(--gf-accent);
    --gf-masthead-align: left;

    --gf-chip-font: var(--gf-body-font);
    --gf-chip-style: normal;
    --gf-chip-size: 15px;
    --gf-chip-transform: none;
    --gf-chip-bg: transparent;

    --gf-box-bg: transparent;
    --gf-box-underline: 2px solid var(--gf-ink);

    --gf-pop-bg: #ffffff;
    --gf-pop-border: 1px solid var(--gf-ink);
    --gf-pop-shadow: none;
    --gf-pop-radius: 0px;
    --gf-tack-display: none;

    --gf-verdict-font: var(--gf-body-font);
    --gf-verdict-size: 0.8em;
    --gf-verdict-align: left;
    --gf-verdict-transform: uppercase;
    --gf-verdict-spacing: 0.16em;
    --gf-verdict-rule: 3px solid var(--gf-accent);

    --gf-msg-font: var(--gf-body-font);
    --gf-msg-weight: 400;
    --gf-msg-align: left;

    --gf-btn-font: var(--gf-body-font);
    --gf-btn-size: 0.8em;
    --gf-btn-align: right;
    --gf-btn-spacing: 0.14em;
    --gf-btn-rule: none;
    --gf-btn-hover: var(--gf-accent);

    --gf-story-end: var(--gf-accent);
    --gf-column-rule: 1px solid var(--gf-rule);
}

:root[data-skin="swiss"] #ms-whatever {
    text-transform: uppercase;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   SKIN 3 — BAUHAUS. Primaries, hard geometry, heavy black rules.
   Keeps the poster's boldness but rebuilds it out of squares and
   circles instead of wood type.

   This is the default skin, so it doubles as the fallback: a bare
   :root, i.e. no data-skin attribute at all, gets these values. That
   matters for the JS-disabled case, where nothing ever sets the
   attribute and the page would otherwise render unstyled.
   ═══════════════════════════════════════════════════════════════ */

:root,
:root[data-skin="bauhaus"] {
    --gf-body-font: "Archivo", sans-serif;
    --gf-display-font: "Archivo", sans-serif;
    --gf-size: 21px;
    --gf-line: 1.5;

    --gf-bg: #f2f0eb;
    --gf-ink: #111111;
    --gf-ink-strong: #000000;
    --gf-accent: #1d4fd9;
    --gf-rule: #111111;
    --gf-border: #111111;
    --gf-border-width: 2px;
    --gf-radius: 0px;
    --gf-hover-tint: #f2c200;

    --gf-wrong: #d9251d;
    --gf-right: #2f8f3f;

    --gf-h2-font: var(--gf-body-font);
    --gf-h2-size: 44px;
    --gf-h2-weight: 700;
    --gf-h2-align: left;
    --gf-h2-transform: uppercase;
    --gf-h2-spacing: -0.01em;
    --gf-h2-rule: 4px solid var(--gf-ink);

    --gf-masthead-font: var(--gf-body-font);
    --gf-masthead-color: var(--gf-accent);
    --gf-masthead-align: left;

    --gf-chip-font: var(--gf-body-font);
    --gf-chip-style: normal;
    --gf-chip-size: 15px;
    --gf-chip-transform: uppercase;
    --gf-chip-bg: transparent;

    --gf-box-bg: transparent;
    --gf-box-underline: 3px solid var(--gf-accent);

    --gf-pop-bg: #f2f0eb;
    --gf-pop-border: 2px solid var(--gf-ink);
    --gf-pop-shadow: 8px 8px 0 var(--gf-accent);
    --gf-pop-radius: 0px;
    --gf-tack-display: none;

    --gf-verdict-font: var(--gf-body-font);
    --gf-verdict-size: 1.1em;
    --gf-verdict-align: left;
    --gf-verdict-transform: uppercase;
    --gf-verdict-spacing: 0.1em;
    --gf-verdict-rule: 2px solid var(--gf-ink);

    --gf-msg-font: var(--gf-body-font);
    --gf-msg-weight: 400;
    --gf-msg-align: left;

    --gf-btn-font: var(--gf-body-font);
    --gf-btn-size: 1em;
    --gf-btn-align: left;
    --gf-btn-spacing: 0.08em;
    --gf-btn-rule: 2px solid var(--gf-ink);
    --gf-btn-hover: var(--gf-accent);

    --gf-story-end: var(--gf-wrong);
    --gf-column-rule: 2px solid var(--gf-ink);
}

:root[data-skin="bauhaus"] #ms-whatever {
    text-transform: uppercase;
    font-weight: 700;
}

/* the circle in front of the dismiss button — Bauhaus only, and
   purely decorative, so it hangs off the button rather than sitting
   in the markup where every other skin would have to hide it */
:root[data-skin="bauhaus"] #ms-whatever::before {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: var(--gf-accent);
    margin-right: 0.55em;
}

/* ═══════════════════════════════════════════════════════════════
   SKIN 4 — TERMINAL. Monospace, near-black field, one phosphor
   accent, square brackets instead of ornament. Every gap reads as a
   cursor waiting for input.
   ═══════════════════════════════════════════════════════════════ */

:root[data-skin="terminal"] {
    --gf-body-font: "JetBrains Mono", monospace;
    --gf-display-font: "JetBrains Mono", monospace;
    --gf-size: 17px;
    --gf-line: 1.75;

    --gf-bg: #0e0e0e;
    --gf-ink: #d8d8d8;
    --gf-ink-strong: #ffffff;
    --gf-accent: #f0a202;
    --gf-rule: #2e2e2e;
    --gf-border: #2e2e2e;
    --gf-border-width: 1px;
    --gf-radius: 0px;
    --gf-hover-tint: rgba(240, 162, 2, 0.12);

    --gf-wrong: #ff5f56;
    --gf-right: #3ddc84;

    --gf-h2-font: var(--gf-body-font);
    --gf-h2-size: 26px;
    --gf-h2-weight: 700;
    --gf-h2-align: left;
    --gf-h2-transform: uppercase;
    --gf-h2-spacing: 0.02em;
    --gf-h2-rule: 1px solid var(--gf-rule);

    --gf-masthead-font: var(--gf-body-font);
    --gf-masthead-color: var(--gf-accent);
    --gf-masthead-align: left;

    --gf-chip-font: var(--gf-body-font);
    --gf-chip-style: normal;
    --gf-chip-size: 13px;
    --gf-chip-transform: none;
    --gf-chip-bg: #171717;

    --gf-box-bg: #1a1a1a;
    --gf-box-underline: 1px solid var(--gf-accent);

    --gf-pop-bg: #141414;
    --gf-pop-border: 1px solid var(--gf-rule);
    --gf-pop-shadow: none;
    --gf-pop-radius: 0px;
    --gf-tack-display: none;

    --gf-verdict-font: var(--gf-body-font);
    --gf-verdict-size: 0.8em;
    --gf-verdict-align: left;
    --gf-verdict-transform: uppercase;
    --gf-verdict-spacing: 0.1em;
    --gf-verdict-rule: 1px solid var(--gf-rule);

    --gf-msg-font: var(--gf-body-font);
    --gf-msg-weight: 400;
    --gf-msg-align: left;

    --gf-btn-font: var(--gf-body-font);
    --gf-btn-size: 0.85em;
    --gf-btn-align: left;
    --gf-btn-spacing: 0.02em;
    --gf-btn-rule: 1px solid var(--gf-rule);
    --gf-btn-hover: var(--gf-ink-strong);

    --gf-story-end: var(--gf-accent);
    --gf-column-rule: 1px solid var(--gf-rule);
}

/* the word chips read as arguments waiting to be passed */
:root[data-skin="terminal"] a.word::before {
    content: "[";
    color: var(--gf-accent);
    margin-right: 0.35em;
}
:root[data-skin="terminal"] a.word::after {
    content: "]";
    color: var(--gf-accent);
    margin-left: 0.35em;
}

/* a blinking block cursor on the dismiss line */
:root[data-skin="terminal"] #ms-whatever::after {
    content: "\2588";
    color: var(--gf-accent);
    animation: gfCaret 1.1s steps(1) infinite;
}

@keyframes gfCaret {
    0%,
    50% {
        opacity: 1;
    }
    51%,
    100% {
        opacity: 0;
    }
}

/* the shared #controls bar takes its colours from redisco/style.css
   via the light/dark/slate theme, which knows nothing about a
   near-black page -- so this skin supplies its own values rather
   than risk dark-on-dark */
:root[data-skin="terminal"] body {
    --ui-text: #8a8a8a;
    --ui-border: #2e2e2e;
    --ui-hover-border: var(--gf-accent);
    --ui-hover-text: var(--gf-accent);
}

/* ═══════════════════════════════════════════════════════════════
   Everything below is skin-agnostic: it reads the variables above
   and never names a colour, font or measurement of its own.
   ═══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--gf-body-font);
    font-weight: 400;
    font-size: var(--gf-size);
    line-height: var(--gf-line);
    color: var(--gf-ink);
    background-color: var(--gf-bg);
    margin: 0;
    padding: 3em 2em 4em;
    display: block;
}

.main-content {
    max-width: 720px;
    margin: 0 auto;
    display: block;
}

h2 {
    font-family: var(--gf-h2-font);
    font-weight: var(--gf-h2-weight);
    font-size: var(--gf-h2-size);
    text-align: var(--gf-h2-align);
    text-transform: var(--gf-h2-transform);
    letter-spacing: var(--gf-h2-spacing);
    line-height: 1.25;
    color: var(--gf-ink-strong);
    margin: 0 0 30px;
    border-bottom: var(--gf-h2-rule);
    padding-bottom: 30px;
}

/* ── Homepage: the fill-out picker as the main event ── */
#fo-home {
    max-width: 720px;
    margin: 10vh auto 0;
    padding: 0 2rem;
    text-align: center;
}

#fo-home h2 {
    margin-bottom: 1.2em;
}

/* ── First-run chooser: easy or hard, asked once, remembered quietly ── */
#fo-chooser {
    max-width: 640px;
    margin: 18vh auto 0;
    padding: 0 2rem;
    text-align: center;
}

#fo-chooser-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.fo-choice {
    font-family: var(--gf-body-font);
    font-style: var(--gf-chip-style);
    font-size: 17px;
    line-height: 1.5;
    max-width: 28em;
    padding: 0.9em 1.4em;
    border: var(--gf-border-width) solid var(--gf-border);
    border-radius: var(--gf-radius);
    background: none;
    color: var(--gf-ink);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.fo-choice:hover {
    border-color: var(--gf-ink);
    color: var(--gf-accent);
}

/* ── Controls row: the quiet way to change your mind later ── */
#level-switch {
    font-family: var(--ui-font);
    font-size: 13px;
    color: var(--ui-text);
    text-decoration: none;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 4px 10px;
    transition:
        border-color 0.2s,
        color 0.2s;
}

#level-switch:hover {
    border-color: var(--ui-hover-border);
    color: var(--ui-hover-text);
}

/* the skin cycler: same visual language as the existing theme
   button, so it reads as part of that quiet row rather than as a
   new feature shouting for attention */
#btn-skin {
    font-family: var(--ui-font);
    font-size: 13px;
    color: var(--ui-text);
    background: none;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}

#btn-skin:hover {
    border-color: var(--ui-hover-border);
    color: var(--ui-hover-text);
}

#fo-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

#fo-tiles .fo-item {
    font-size: 16px;
    padding: 10px 18px;
}

/* ── Exercise page: reroll to another random fill-out (icon) ── */
#fo-reroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--gf-ink);
    border: var(--gf-border-width) solid var(--gf-border);
    border-radius: 50%;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s;
}

#fo-reroll:hover {
    border-color: var(--gf-ink);
    color: var(--gf-accent);
}

/* shared pill style: homepage tiles and (formerly) the sidebar picker */
a.fo-item {
    font-family: var(--ui-font);
    font-size: 13px;
    color: var(--ui-text);
    text-decoration: none;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
}

a.fo-item:hover {
    border-color: var(--ui-hover-border);
    color: var(--ui-hover-text);
}

#fillout {
    position: relative;
}

#masthead {
    font-family: var(--gf-masthead-font);
    font-weight: 200;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: var(--gf-masthead-align);
    color: var(--gf-masthead-color);
    margin-bottom: 0.6em;
}

#fillout-text {
    text-align: left;
    columns: 2;
    column-gap: 3.4rem;
    column-rule: var(--gf-column-rule);
    margin-bottom: 30px;
}

/* <newcol> marks a new "ministory" -- a section clearly separated
   from the one before it, but still part of the same naturally
   flowing, auto-balanced two-column text, not a forced physical
   break (that approach fought against the browser's own column
   balancing and could land text in the wrong column entirely). A
   black square -- the classic magazine "end mark" -- closes each
   story (including the very last one, even if <newcol> was never
   used at all). No opening ornament any more; the square alone now
   carries the whole "a story just ended here" signal, so it's sized
   and coloured to actually read as one, not blend into the text. */
.story-end {
    font-size: 1.1em;
    color: var(--gf-story-end);
    margin-left: 0.4em;
}

/* the gaps: an underlined blank, not a coloured sticker -- 1920 had
   no highlighter pens. The terminal skin is the one exception, where
   a filled input field is exactly the right metaphor. */
span.box {
    border-bottom: var(--gf-box-underline);
    background-color: var(--gf-box-bg);
    padding: 0 0.3em;
    cursor: pointer;
}

span.box:hover {
    background-color: var(--gf-hover-tint);
}

/* during the intro reveal: looks like ordinary text, no highlight
   giving away which words are about to leave */
span.box.reveal-plain {
    background-color: transparent;
    border-bottom: none;
    padding: 0;
    border-radius: 0;
    font-weight: normal;
    cursor: default;
}
span.box.reveal-plain:hover {
    background-color: transparent;
}
/* a gentle fade at the two moments of change (disappearing from the
   text, reappearing in the word column) instead of a hard cut --
   scoped to the intro only, so normal gameplay stays snappy */
.intro-fade {
    transition: opacity 0.3s ease;
}

/* the word menu */
#words {
    padding-top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

/* the tools column: reroll + hardcore, clearly set apart from the
   words themselves by its own rule, matching the same "a vertical
   line means a separate section" language used for the passage's
   own two columns */
#words-tools-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-left: 1.6rem;
    border-left: var(--gf-column-rule);
}

#words ul {
    flex: 1;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    justify-content: center;
}

/* the <li> wrappers otherwise inherit the body's font-size/line-height
   and pad each row invisibly; collapsing their line boxes makes each
   row exactly the chip's height, so the gap is the only spacing */
#words li {
    font-size: 0;
    line-height: 0;
}

a.word {
    font-family: var(--gf-chip-font);
    font-style: var(--gf-chip-style);
    font-weight: 400;
    font-size: var(--gf-chip-size);
    text-transform: var(--gf-chip-transform);
    line-height: 1.3;
    color: var(--gf-ink);
    background-color: var(--gf-chip-bg);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 0.3em 0.9em;
    border: var(--gf-border-width) solid var(--gf-border);
    border-radius: var(--gf-radius);
}

a.word:hover {
    border-color: var(--gf-ink);
}

/* the mouser: the chosen word riding along with the cursor */
#mouser {
    font-family: var(--gf-chip-font);
    font-style: var(--gf-chip-style);
    font-weight: 400;
    font-size: var(--gf-chip-size);
    padding: 4px 10px;
    border: var(--gf-border-width) solid var(--gf-border);
    border-radius: var(--gf-radius);
    background-color: var(--gf-bg);
    color: var(--gf-ink);
    position: fixed;
    z-index: 10;
    overflow: hidden;
    display: none;
    pointer-events: none;
}

/* Milan says. */
#milan-says {
    display: none;
    flex-direction: column;
    min-height: 14em;
    padding: 1.8em 1.8em 1.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gf-pop-bg);
    border: var(--gf-pop-border);
    border-radius: var(--gf-pop-radius);
    box-shadow: var(--gf-pop-shadow);
    max-width: 24em;
    z-index: 20;
}

/* small pinned-to-the-wall nail details at two opposing corners --
   poster only; every other skin sets --gf-tack-display to none, so
   the markup stays identical across skins */
#milan-says::before,
#milan-says::after {
    content: "";
    display: var(--gf-tack-display);
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gf-ink-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
#milan-says::before {
    top: 10px;
    left: 10px;
}
#milan-says::after {
    bottom: 10px;
    right: 10px;
}

/* the verdict: WANTED / INCORRECT / NOPE / [ ERR ], written in by
   skins.js. Semantic in every skin -- red for wrong, green for
   right -- whatever the surrounding accent colour happens to be. */
#ms-verdict {
    font-family: var(--gf-verdict-font);
    font-size: var(--gf-verdict-size);
    line-height: 1.1;
    text-align: var(--gf-verdict-align);
    text-transform: var(--gf-verdict-transform);
    letter-spacing: var(--gf-verdict-spacing);
    border-bottom: var(--gf-verdict-rule);
    padding-bottom: 0.35em;
    margin-bottom: 0.7em;
}

#milan-says.wrong #ms-verdict {
    color: var(--gf-wrong);
}

#milan-says.right #ms-verdict {
    color: var(--gf-right);
}

#ms-message {
    font-family: var(--gf-msg-font);
    font-weight: var(--gf-msg-weight);
    font-size: 1.15em;
    color: var(--gf-ink);
    line-height: 1.5;
    margin: auto 0;
    text-align: var(--gf-msg-align);
}

#ms-whatever {
    display: block;
    width: 100%;
    font-family: var(--gf-btn-font);
    font-size: var(--gf-btn-size);
    line-height: 1.1;
    text-align: var(--gf-btn-align);
    background: none;
    color: var(--gf-ink-strong);
    border: none;
    border-top: var(--gf-btn-rule);
    padding: 0.55em 0 0.1em;
    margin: 0.9em 0 0;
    cursor: pointer;
    letter-spacing: var(--gf-btn-spacing);
    transition: opacity 0.3s ease;
}

#ms-whatever:hover {
    color: var(--gf-btn-hover);
}

#milan-says a {
    color: inherit;
}

#ms-pdf {
    display: none;
}

.dashed-underline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* hardcore mode: an old-timey lever switch instead of a checkbox */
#hardcore-label {
    font-family: var(--gf-body-font);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gf-ink);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}

/* two invisible hover zones layered over the switch itself -- left
   half (the "off" resting position) gets its own message, right
   half (the "on" resting position, where the knob slides to) gets
   the other. Pure hover targets, no visual presence of their own;
   the switch's actual click/toggle behaviour is untouched, since
   these sit on top of it rather than replacing it. */
.switch-zone {
    position: absolute;
    top: 0;
    width: 20px;
    height: 22px;
}
.switch-zone-off {
    left: 0;
}
.switch-zone-on {
    right: 0;
}

/* ── Intro: reveal-then-disappear-then-reappear sequence ── */
body.intro-playing #fillout-text,
body.intro-playing #words {
    pointer-events: none;
}

@keyframes justLanded {
    0% {
        background: var(--gf-hover-tint);
    }
    100% {
        background: transparent;
    }
}
a.word.just-landed {
    animation: justLanded 0.7s ease-out;
}

#hardcore-label:hover {
    color: var(--gf-accent);
}

#hardcore-mode {
    /* the real checkbox stays functional but invisible; the SVG
       beside it is the visible switch */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch-knob {
    transition: transform 0.2s ease;
}

#hardcore-mode:checked ~ .switch-graphic .switch-knob {
    transform: translateX(18px);
}

q {
    font-style: italic;
}