/* Reset and Base Styles */

/* ===========================================================================
   The Arcade palette (Kyle, 2026-09-11), and the token layer under it.

   Read this before changing a colour in this file.

   WHAT REPLACED WHAT. The site was #ff6b6b coral plus #4ecdc4 teal over a
   three-stop 135deg navy gradient, which is the single most recognisable
   generated-dark-page combination there is. The tell was the TRIO, not any one
   colour. It is now a warm near-black with amber, magenta and lilac.

   THE TWO RULES THAT MATTER.

   1. An accent has a TEXT form and a FILL form and they are never the same
      token. A bright amber reads beautifully as text on the dark page and is
      unusable under a white label (2.04:1). This is the same lesson the old
      two-teal split recorded, generalised: --kb-accent* is for text, --kb-fill*
      is for a button, and a button's label is --kb-fill-label.

   2. Everything translucent is built from --kb-ink, never from a literal
      rgba(255,255,255,...). That is what makes light mode one token flip
      instead of an audit of 246 declarations. Write
      rgb(var(--kb-ink) / 0.05), not rgba(255,255,255,0.05).

   --kb-fill-label is deliberately the SAME dark value in both themes, so a
   bright-filled button looks identical light or dark and scores 9.12 (amber),
   5.13 (magenta) and 6.82 (lilac) either way. Do not make it theme-dependent.

   Every number in here is measured with tools/css-contrast.php or against the
   page itself. Re-measure rather than eyeball if you change one; that tool
   cannot see a translucent background, which is how the /blame vote buttons
   once passed at 5.1 while really being 3.56.

   The game boxes (quest, sloth, inventory, helicopter, microgames, and
   the monster cards) stay dark by construction. The page around them follows
   the theme; the box itself carries .kb-dark, which puts the dark tokens back
   for everything inside it.
   =========================================================================== */
:root {
    color-scheme: dark;

    --kb-bg: #141216;
    --kb-bg-nav: 20 18 22;          /* the nav's translucent backdrop */
    --kb-ink: 255 255 255;          /* every translucent surface is made of this */
    --kb-shade: 0 0 0;          /* ink's opposite: a panel wash that reads as
                                           "set back" in either theme */

    --kb-text: #ffffff;
    --kb-muted: #a9a39c;

    --kb-accent: #f5a524;           /* amber, AS TEXT. 9.12:1 */
    --kb-accent-rgb: 245 165 36;
    --kb-accent-2: #e0509a;         /* magenta, AS TEXT. 5.13:1 */
    --kb-accent-2-rgb: 224 80 154;
    --kb-accent-3: #a98cf0;         /* lilac, AS TEXT. 6.82:1 */
    --kb-accent-3-rgb: 169 140 240;

    --kb-fill: #f5a524;             /* bright fill, takes a dark label */
    --kb-fill-2: #e0509a;
    --kb-fill-3: #a98cf0;
    --kb-fill-label: #141216;       /* same in both themes, on purpose */

    /* Deep fills, for a button that carries a WHITE label. A bright fill needs
       --kb-fill-label instead; see rule 1 above. */
    --kb-fill-deep: #a83a70;        /* 5.99:1 under white */
    --kb-fill-deep-2: #6b4fc4;      /* 5.93:1 under white */
    /* A deep fill keeps a WHITE label in BOTH themes. --kb-text goes dark on
       paper, which would put near-black on deep magenta at 2.28:1. */
    --kb-fill-deep-label: #ffffff;
    /* Text on an adventure's coloured story panel. Fixed, because those panels are
       the same mid-tone colour in both themes: white clears 4.5 on every one of them
       (worst 5.00) where the muted grey measured 2.00 to 2.95. */
    --kb-on-panel: #ffffff;

    /* Kept so anything still asking for an old name gets the new palette rather
       than a dead value. Don't write these in new rules. The two FILL ones point
       at the deep colours on purpose: every existing use of them sits under a
       white label, and pointing them at the bright amber would have quietly
       dropped those buttons to 2.04:1. */
    --kb-teal: #f5a524;
    --kb-teal-dark: #f5a524;
    --kb-teal-fill: #a83a70;
    --kb-coral: #e0509a;
    --kb-purple: #6b4fc4;
}

/* Light Arcade. Warm paper rather than white, because the palette is warm and
   a cold white under amber reads as a different design.

   The accents all go DARK here and that is not optional: the amber that scores
   9.12 on the dark page scores about 1.9 on paper, so light mode needs its own
   text accents. The FILLS stay bright, since they carry a dark label. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --kb-bg: #f6f2ea;
        --kb-bg-nav: 246 242 234;
        --kb-ink: 27 24 20;
        --kb-shade: 255 255 255;          /* ink's opposite: a panel wash that reads as
                                               "set back" in either theme */

        --kb-text: #1b1814;         /* 15.84:1 */
        --kb-muted: #5c554c;        /* 6.58:1 */

        --kb-accent: #7d4a0c;       /* bronze. 6.58:1 */
        --kb-accent-rgb: 125 74 12;
        --kb-accent-2: #9c1b57;     /* 6.95:1 */
        --kb-accent-2-rgb: 156 27 87;
        --kb-accent-3: #513499;     /* 8.17:1 */
        --kb-accent-3-rgb: 81 52 153;

        --kb-fill-deep: #9c1b57;
        --kb-fill-deep-2: #513499;
        /* A deep fill keeps a WHITE label in BOTH themes. --kb-text goes dark on
           paper, which would put near-black on deep magenta at 2.28:1. */
        --kb-fill-deep-label: #ffffff;
        --kb-on-panel: #ffffff;

        --kb-teal: #7d4a0c;
        --kb-teal-dark: #7d4a0c;
        --kb-teal-fill: #9c1b57;
        --kb-coral: #9c1b57;
        --kb-purple: #513499;
    }
}

/* The toggle wins over the system setting, in both directions. */
:root[data-theme="light"] {
    color-scheme: light;

    --kb-bg: #f6f2ea;
    --kb-bg-nav: 246 242 234;
    --kb-ink: 27 24 20;
    --kb-shade: 255 255 255;          /* ink's opposite: a panel wash that reads as
                                           "set back" in either theme */

    --kb-text: #1b1814;
    --kb-muted: #5c554c;

    --kb-accent: #7d4a0c;
    --kb-accent-rgb: 125 74 12;
    --kb-accent-2: #9c1b57;
    --kb-accent-2-rgb: 156 27 87;
    --kb-accent-3: #513499;
    --kb-accent-3-rgb: 81 52 153;

    --kb-fill-deep: #9c1b57;
    --kb-fill-deep-2: #513499;
    /* A deep fill keeps a WHITE label in BOTH themes. --kb-text goes dark on
       paper, which would put near-black on deep magenta at 2.28:1. */
    --kb-fill-deep-label: #ffffff;
    --kb-on-panel: #ffffff;

    --kb-teal: #7d4a0c;
    --kb-teal-dark: #7d4a0c;
    --kb-teal-fill: #9c1b57;
    --kb-coral: #9c1b57;
    --kb-purple: #513499;
}

/* A game box stays dark on a light page: everything inside it gets the dark tokens back. */
.kb-dark {
    color-scheme: dark;
    color: #ffffff;

    --kb-bg: #141216;
    --kb-ink: 255 255 255;
    --kb-shade: 0 0 0;
    --kb-text: #ffffff;
    --kb-muted: #a9a39c;
    --kb-accent: #f5a524;
    --kb-accent-rgb: 245 165 36;
    --kb-accent-2: #e0509a;
    --kb-accent-2-rgb: 224 80 154;
    --kb-accent-3: #a98cf0;
    --kb-accent-3-rgb: 169 140 240;
    --kb-fill-deep: #a83a70;
    --kb-fill-deep-2: #6b4fc4;
    --kb-teal: #f5a524;
    --kb-teal-dark: #f5a524;
    --kb-teal-fill: #a83a70;
    --kb-coral: #e0509a;
    --kb-purple: #6b4fc4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--kb-bg);
    color: var(--kb-text);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Layout Components */

/* Site navigation bar (replaces the floating KyleBob logo) */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 48px;
    padding: 0 20px;
    background: rgb(var(--kb-bg-nav) / 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb(var(--kb-ink) / 0.1);
}

.site-nav-brand {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--kb-text);
    transition: opacity 0.2s ease;
}

.site-nav-brand:hover {
    opacity: 0.85;
}

.site-nav-brand-tld {
    color: var(--kb-teal);
}

.site-nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.site-nav-links::-webkit-scrollbar {
    display: none;
}

.site-nav-links a {
    display: block;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--kb-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible {
    color: var(--kb-text);
    background: rgb(var(--kb-accent-rgb) / 0.15);
    outline: none;
}

/* Light/dark toggle (2026-09-11). Quiet on purpose: it is a preference, not a
   destination, so it must not compete with the five section links beside it. Sized
   to the 44px touch target rather than to the glyph. */
.site-nav-theme {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgb(var(--kb-ink) / 0.15);
    border-radius: 999px;
    color: var(--kb-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.site-nav-theme:hover,
.site-nav-theme:focus-visible {
    color: var(--kb-accent);
    border-color: var(--kb-accent);
    background: rgb(var(--kb-accent-rgb) / 0.12);
    outline: none;
}

/* Hamburger toggle (hidden on desktop, shown on narrow screens) */
.site-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
}

.site-nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--kb-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-nav.is-open .site-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* 700, not 600 (Kyle, 2026-09-11). Measured on the real nav rather than guessed: the link
   row starts scrolling at 640px and the last item ("KBTV") runs under the theme toggle at
   620px, while the hamburger only appeared at 600 — so 601 to 655 was a band where the last
   item was cut off. The toggle added about 40px and made an existing squeeze visible. 700
   clears it with 45px to spare and leaves room for one more nav item later. */
@media (max-width: 700px) {
    .site-nav {
        padding: 0 14px;
    }
    .site-nav-toggle {
        display: flex;
    }
    .site-nav-links {
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 0;
        padding: 10px 12px 14px;
        overflow: visible;
        background: rgb(var(--kb-bg-nav) / 0.97);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgb(var(--kb-ink) / 0.1);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    }
    .site-nav.is-open .site-nav-links {
        display: flex;
    }
    .site-nav-links a {
        padding: 12px 14px;
        font-size: 1rem;
    }
}

/* KyleBob Logo (legacy floating button — no longer rendered; kept for easy revert) */
.whimsical-button {
    position: fixed;
    top: 10px;
    left: 2px;
    z-index: 1000;
    background: transparent;
    border: none;
    padding: 12px 18px;
    transition: all 0.4s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.whimsical-button:hover {
    transform: scale(1.05) rotate(1deg);
    opacity: 1;
}

.whimsical-button:active {
    transform: scale(0.98);
}

.whimsical-button span {
    color: var(--kb-text);
    font-family: 'Nunito', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -2px;
    display: block;
    text-align: center;
    line-height: 0.85;
    margin-bottom: 3px;
    white-space: nowrap;
}

.whimsical-button span:last-child {
    margin-bottom: 0;
    font-size: 1.0rem;
    letter-spacing: -1px;
}

/* No panel behind the hero (2026-10-27): the rounded translucent box on every page
   read as a landing-page template. */
.hero-section {
    text-align: center;
    margin-bottom: 48px;
    padding: 32px 20px;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    text-align: center;
}

.hero-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgb(var(--kb-ink) / 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--kb-text);
    text-align: center;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--kb-muted);
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--kb-muted);
    max-width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

/* One measure for the whole block: the title, subtitle and description all
   share this width, so a long title wraps instead of running wider than the
   paragraph beneath it. */
.hero-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
}

.hero-social {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgb(var(--kb-ink) / 0.1);
    border-radius: 50%;
    color: var(--kb-text);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgb(var(--kb-ink) / 0.2);
}

.hero-social a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-social svg {
    width: 24px;
    height: 24px;
}

.hero-social .hero-social-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.hero-social a.hero-social-youtube {
    background: #ff0000;
    color: var(--kb-text);
    border-color: rgba(0, 0, 0, 0.2);
}

.hero-social a.hero-social-youtube:hover {
    background: #cc0000;
}

.hero-social a.hero-social-instagram {
    background: #dc2743;
    color: var(--kb-text);
    border-color: rgba(0, 0, 0, 0.15);
}

.hero-social a.hero-social-instagram:hover {
    filter: brightness(1.08);
}

.hero-social a.hero-social-facebook {
    background: #1877f2;
    color: var(--kb-text);
    border-color: rgba(0, 0, 0, 0.15);
}

.hero-social a.hero-social-facebook:hover {
    background: #1464d8;
}

.hero-social a.hero-social-tiktok {
    background: #000000;
    color: var(--kb-text);
    border-color: rgb(var(--kb-ink) / 0.25);
}

.hero-social a.hero-social-tiktok:hover {
    background: #1a1a1a;
}

.hero-social a.hero-social-discord {
    background: #5865f2;
    color: var(--kb-text);
    border-color: rgba(0, 0, 0, 0.15);
}

.hero-social a.hero-social-discord:hover {
    background: #4752c4;
}

.hero-social a.hero-social-patreon {
    background: #ff424d;
    border-color: rgba(0, 0, 0, 0.15);
}

.hero-social a.hero-social-patreon .hero-social-img {
    filter: brightness(0) invert(1);
}

.hero-social a.hero-social-patreon:hover {
    background: #e63b46;
}

.featured-links + .section-heading {
    margin-top: 50px;
}

.section-heading {
    font-size: 2rem;
    font-weight: 700;
    margin: 60px 0 30px 0;
    text-align: center;
    color: var(--kb-text);
}

/* One line under a section heading, where the heading alone cannot say the whole
   condition. Only /wip uses it, for the Lunkus tools that need the dev server. Pulls
   up into the heading's own 30px bottom margin rather than adding to it. */
.wip-note {
    margin: -18px 0 30px 0;
    text-align: center;
    color: var(--kb-muted);
    font-size: 0.95rem;
}

/* Links Grid */
.featured-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 40px 0 60px 0;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Full-width variant. Used where the titles and descriptions run long enough
   that a half-width card wraps into an awkward column, and where there may only
   be one card, which otherwise sits stranded on the left. */
.links-grid--stacked {
    grid-template-columns: 1fr;
}

/* Comics sort */
.comics-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1.25rem;
}

.comics-sort-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kb-muted);
}

/* Links inside a hero description. Bare anchors are unstyled elsewhere in this
   file, so without this they fall back to the browser's default blue, which is
   unreadable on the dark background. Scoped to paragraphs so it can't touch the
   social icons, which sit in their own block. */
/* Each sentence of the homepage's description on a line of its own on desktop (Kyle,
   2026-10-21); on a phone they wrap as one paragraph. */
@media (min-width: 769px) {
    .hero-text p .hero-line {
        display: block;
    }
}

.hero-text p a {
    color: var(--kb-accent);
}

.hero-text p a:hover {
    color: var(--kb-accent);
}

.comics-sort-btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--kb-ink) / 0.2);
    background: rgb(var(--kb-ink) / 0.06);
    color: var(--kb-muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.comics-sort-btn:hover,
.comics-sort-btn:focus-visible {
    color: var(--kb-text);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
    background: rgb(var(--kb-accent-rgb) / 0.15);
    outline: none;
}

.comics-sort-btn.is-active {
    color: var(--kb-text);
    border-color: rgb(var(--kb-accent-rgb) / 0.6);
    background: rgb(var(--kb-accent-rgb) / 0.25);
}

/* Comics Grid */
.comics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.comics-grid.comics-grid-pending {
    visibility: hidden;
}

.comic-item {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

a.comic-item:hover,
a.comic-item:focus-visible {
    border-color: rgb(var(--kb-accent-rgb) / 0.45);
    background: rgb(var(--kb-ink) / 0.08);
    outline: none;
}

.comic-item-single {
    margin-bottom: 40px;
}

.comic-single {
    margin-bottom: 40px;
}

.comic-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 1.5rem 0 0;
    color: var(--kb-muted);
}

.comic-nav a {
    color: var(--kb-text);
    text-decoration: none;
    font-weight: 600;
}

.comic-nav a:hover,
.comic-nav a:focus-visible {
    color: var(--kb-accent);
    text-decoration: underline;
    outline: none;
}

.comic-nav-links {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.comic-nav-sep {
    color: rgb(var(--kb-ink) / 0.25);
}

.comic-nav-disabled {
    color: rgb(var(--kb-ink) / 0.28);
}

.comic-copy-link {
    font: inherit;
    font-weight: 600;
    color: var(--kb-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.comic-copy-link:hover,
.comic-copy-link:focus-visible {
    color: var(--kb-text);
    outline: none;
}

.comic-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--kb-text);
}

.comic-description {
    color: var(--kb-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.comic-image {
    width: 100%;
    max-width: 900px;
    max-height: 960px;
    height: auto;
    border-radius: 15px;
    object-fit: contain;
}

.comic-image.clickable-image {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comic-image.clickable-image:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgb(var(--kb-accent-rgb) / 0.4);
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--kb-shade) / 0.9);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    margin-top: 5%;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 30px;
    right: 50px;
    color: var(--kb-text);
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    line-height: 1;
}

.modal-close:hover {
    color: var(--kb-accent);
    transform: scale(1.2);
    text-shadow: 0 0 20px rgb(var(--kb-accent-rgb) / 0.8);
}

@media (max-width: 768px) {
    .modal-close {
        top: 20px;
        right: 30px;
        font-size: 40px;
    }
    
    .modal-content {
        max-width: 95%;
        max-height: 85%;
        margin-top: 10%;
    }
}

/* Designs Grid */
.designs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.design-item {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

/* Removed hover effects for designs */

.design-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--kb-text);
}

.design-description {
    color: var(--kb-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.design-image {
    width: 100%;
    max-width: 800px;
    max-height: 720px;
    height: auto;
    border-radius: 15px;
    border: 2px solid rgb(var(--kb-ink) / 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    object-fit: contain;
    margin-bottom: 25px;
}

.design-actions {
    margin-top: 20px;
}

.design-btn {
    display: inline-block;
    background: var(--kb-teal-fill);
    color: var(--kb-fill-deep-label);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.design-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 154, 150, 0.4);
    color: var(--kb-text);
}

/* Haikus Grid */
.haikus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Shared list tools (list-tools.js): the Random button and the per-item Copy
   control used by /haikus and /ideas. */
.list-tools {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.lt-random-btn {
    padding: 12px 28px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kb-fill-label);
    background: var(--kb-fill);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lt-random-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 154, 150, 0.4);
}

/* The copy button sits inside the item, so the item needs to be a positioning
   context. It stays quiet until the item is hovered or it's keyboard focused. */
.lt-item {
    position: relative;
}

.lt-copy {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 3px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--kb-muted);
    background: rgb(var(--kb-ink) / 0.07);
    border: 1px solid rgb(var(--kb-ink) / 0.18);
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lt-item:hover .lt-copy,
.lt-copy:focus-visible {
    opacity: 1;
}

.lt-copy:hover {
    color: var(--kb-text);
    border-color: rgb(var(--kb-accent-rgb) / 0.6);
}

.lt-copy.is-done {
    opacity: 1;
    color: var(--kb-accent);
    border-color: rgb(var(--kb-accent-rgb) / 0.6);
}

/* Touch devices have no hover, so never hide it there. */
@media (hover: none) {
    .lt-copy { opacity: 1; }
}

.lt-flash {
    animation: ltFlash 1.4s ease;
}

@keyframes ltFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--kb-accent-rgb) / 0); }
    15% { box-shadow: 0 0 0 3px rgb(var(--kb-accent-rgb) / 0.75); }
}

@media (prefers-reduced-motion: reduce) {
    .lt-flash { animation-duration: 0.01ms; }
}

.haiku-item {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.haiku-item:hover {
    background: rgb(var(--kb-ink) / 0.08);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Emoji drawn as a one-colour silhouette: a shadow, since background-clip: text clips below the line box */
.haiku-emoji {
    font-size: 3rem;
    margin-bottom: 20px;
    color: transparent;
    text-shadow: 0 0 0 var(--kb-muted);
}

.haiku-text {
    color: var(--kb-muted);
    font-size: 1.1rem;
    line-height: 1.8;
    font-style: italic;
    white-space: pre-line;
}

/* Ideas jump nav + grid */
.ideas-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 0 48px;
    padding: 22px 24px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.ideas-jump a {
    display: inline-block;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--kb-ink) / 0.2);
    background: rgb(var(--kb-ink) / 0.06);
    color: var(--kb-muted);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ideas-jump a:hover,
.ideas-jump a:focus-visible {
    color: var(--kb-text);
    border-color: rgb(var(--kb-accent-rgb) / 0.55);
    background: rgb(var(--kb-accent-rgb) / 0.18);
    outline: none;
    text-decoration: none;
}

.ideas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.idea-category {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    scroll-margin-top: 24px;
}

.category-title {
    color: var(--kb-text);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 0 var(--kb-text);
}

.idea-item {
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    transition: all 0.3s ease;
}

.idea-item:hover {
    background: rgb(var(--kb-ink) / 0.06);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.3);
}

.idea-title {
    color: var(--kb-text);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.idea-description {
    color: var(--kb-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.link-card {
    position: relative;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: border-color 0.2s ease;
}

/* One hover signal, not five. This used to lift the card, drop a 40px shadow,
   lighten the background, scale the image and slide a teal bar across the top
   edge, all at once. The border is already on the card, so brightening it is
   the cheapest signal there is. Uses the token so a palette change carries. */
.link-card:hover {
    border-color: var(--kb-teal, var(--kb-accent));
}

.link-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.link-image {
    width: 120px;
    height: 120px;
    border-radius: 15px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgb(var(--kb-ink) / 0.2);
}

.link-text {
    flex: 1;
}

.link-title {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--kb-text);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.link-title:hover {
    color: var(--kb-accent);
}

/* Stretched link: the title's box covers the whole card, so anywhere on it clicks through.
   ::before because external links use ::after for the arrow. */
.link-title::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.link-title.external-link::after {
    content: ' ↗';
    font-size: 0.8em;
    opacity: 0.7;
}

.link-description {
    color: var(--kb-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

a.link-description {
    display: block;
    margin: 0;
    text-decoration: none;
    color: var(--kb-muted);
    transition: color 0.3s ease;
}

a.link-description:hover {
    color: var(--kb-muted);
}

/* Footer */
/* 0.55, not 0.3 (2026-09-11). The seven adventure pages set their own saturated body colour
   per location, and a 30% wash let that colour through far enough that the muted footer prose
   measured 3.29 on the olive one. Checked against the eight worst location colours: 0.45 still
   left the olive at 4.31, 0.55 puts the worst at 5.08. On the ordinary dark page the footer
   only goes from 7.76 to 7.91, so this costs nothing where it was already fine. */
.footer {
    background: rgb(var(--kb-shade) / 0.55);
    border-radius: 20px;
    padding: 40px;
    margin-top: 60px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--kb-text);
}

.footer-section p {
    color: var(--kb-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Contact Form */
.contact-form {
    margin-top: 20px;
}

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.2);
    border-radius: 10px;
    background: rgb(var(--kb-ink) / 0.05);
    color: var(--kb-text);
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    resize: vertical;
    transition: all 0.3s ease;
}

.form-control[type="text"],
.form-control[type="email"],
.form-control[type="password"],
.form-control[type="search"] {
    min-height: auto;
}

textarea.form-control {
    min-height: 100px;
}

.form-control:focus {
    outline: none;
    border-color: var(--kb-accent);
    background: rgb(var(--kb-ink) / 0.08);
}

.form-control::placeholder {
    color: var(--kb-muted);
}

.submit-btn {
    background: var(--kb-teal-fill);
    color: var(--kb-fill-deep-label);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(177, 72, 90, 0.45);
}

.form-result {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-result.loading {
    background: rgb(var(--kb-accent-rgb) / 0.2);
    color: var(--kb-accent);
    border: 1px solid rgb(var(--kb-accent-rgb) / 0.3);
}

.form-result.success {
    background: rgb(var(--kb-accent-rgb) / 0.2);
    color: var(--kb-accent);
    border: 1px solid rgb(var(--kb-accent-rgb) / 0.3);
}

.form-result.error {
    background: rgb(var(--kb-accent-2-rgb) / 0.2);
    color: var(--kb-accent-2);
    border: 1px solid rgb(var(--kb-accent-2-rgb) / 0.3);
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--kb-muted);
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 10px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
}

.social-link:hover {
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

.social-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.social-link span {
    font-weight: 500;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-link {
    color: var(--kb-muted);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
}

.quick-link:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-text);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgb(var(--kb-ink) / 0.1);
    padding-top: 30px;
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.copyright {
    color: var(--kb-muted);
    font-size: 0.9rem;
}

.copyright a {
    color: var(--kb-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.copyright a:hover,
.copyright a:focus-visible {
    color: var(--kb-accent);
    text-decoration: underline;
}

.footer-divider {
    width: 1px;
    height: 20px;
    background: rgb(var(--kb-ink) / 0.2);
}

.privacy-link {
    color: var(--kb-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: var(--kb-accent);
}

.footer a {
    color: var(--kb-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover,
.footer a:focus-visible {
    color: var(--kb-accent);
    text-decoration: underline;
}

/* Mailing List */
.kylebob-mailing-list {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
}

.kylebob-mailing-list h3 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--kb-text);
}

.kylebob-mailing-list > p {
    color: var(--kb-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.embeddable-buttondown-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.mailing-list-email {
    padding: 12px 20px;
    border: 1px solid rgb(var(--kb-ink) / 0.2);
    border-radius: 25px;
    background: rgb(var(--kb-ink) / 0.05);
    color: var(--kb-text);
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    min-width: 200px;
    flex: 1;
    max-width: 300px;
    transition: all 0.3s ease;
}

.mailing-list-email::placeholder {
    color: var(--kb-muted);
}

.mailing-list-email:focus {
    outline: none;
    border-color: var(--kb-accent);
    background: rgb(var(--kb-ink) / 0.08);
}

.mailing-list-submit {
    background: var(--kb-teal-fill);
    color: var(--kb-fill-deep-label);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mailing-list-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(177, 72, 90, 0.45);
}

.mailing-list-note {
    color: var(--kb-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 0;
}

.mailing-list-note strong {
    color: var(--kb-text);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .featured-links {
        gap: 20px;
    }

    .links-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .link-card {
        padding: 20px;
    }
    
    .link-content {
        gap: 15px;
    }
    
    .link-image {
        width: 80px;
        height: 80px;
    }
    
    .hero-social {
        gap: 15px;
    }
    
    .hero-social a {
        width: 45px;
        height: 45px;
    }
    
    .hero-social svg {
        width: 20px;
        height: 20px;
    }

    .hero-social .hero-social-img {
        width: 20px;
        height: 20px;
    }
    
    /* Footer responsive */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .social-links {
        align-items: center;
    }
    
    .quick-links {
        align-items: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-divider {
        display: none;
    }
    
    /* Mailing list responsive */
    .kylebob-mailing-list {
        padding: 25px;
        margin-bottom: 30px;
    }
    
    .embeddable-buttondown-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mailing-list-email {
        max-width: 100%;
        width: 100%;
    }
    
    .mailing-list-submit {
        width: 100%;
    }
    
    /* Comics and Designs responsive */
    .design-item {
        padding: 25px;
    }

    .comic-item {
        padding: 12px;
        border-radius: 14px;
    }

    .comic-image {
        border-radius: 8px;
    }
    
    .comic-title,
    .design-title {
        font-size: 1.6rem;
    }
    
    .comic-description,
    .design-description {
        font-size: 1rem;
    }
    
    /* Haikus and Ideas responsive */
    .haikus-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .haiku-item {
        padding: 20px;
    }
    
    .haiku-emoji {
        font-size: 2.5rem;
    }
    
    .haiku-text {
        font-size: 1rem;
    }
    
    .idea-category {
        padding: 25px;
    }

    .ideas-jump {
        gap: 8px;
        padding: 16px 14px;
        margin-bottom: 36px;
    }

    .ideas-jump a {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    
    .category-title {
        font-size: 1.6rem;
    }
    
    .idea-item {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .idea-title {
        font-size: 1.1rem;
    }
    
    .idea-description {
        font-size: 0.9rem;
    }
    
    /* Privacy Policy responsive */
    .privacy-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .privacy-section h2 {
        font-size: 1.5rem;
    }
    
    .privacy-section p,
    .privacy-section ul {
        font-size: 0.95rem;
    }
    
    .privacy-footer {
        padding: 20px;
    }
    
         /* Game pages responsive */
     .blame-cards-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }
     
     .blame-card {
         padding: 20px;
         min-height: 150px;
     }
     
     .blame-card h4 {
         font-size: 1.2rem;
         margin-bottom: 15px;
     }
     
     .blame-card:hover {
         transform: translateY(-5px) rotate(1deg);
     }
    
    .quiz-question {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .question-number {
        font-size: 1.5rem;
    }
    
    .or-image {
        width: 240px;
        height: 240px;
    }
    
    .question-buttons {
        gap: 15px;
    }
    
    .input-section {
        gap: 20px;
    }
    
         .result-display {
         flex-direction: column;
         gap: 15px;
         padding: 20px;
     }
     
     /* Doomsday newspaper responsive */
     #doomsday-publication {
         font-size: 36px !important;
     }
     
     #doomsday-title {
         font-size: 24px !important;
     }
     
     #doomsday-newspaper {
         padding: 20px;
         margin-top: 15px;
     }
     
     /* Mountain story responsive */
     .story-content {
         padding: 25px;
     }
     

     
     .location-header h5 {
         font-size: 1.2rem;
         margin: 0 0 20px 0;
     }
     
     .story-text p {
         font-size: 1rem;
     }
     
     .story-text h5 {
         font-size: 1.1rem;
     }
     
     .story-footer {
         padding: 20px;
     }
     
     .story-footer h1 {
         font-size: 1.3rem;
     }
     
     .story-footer h4 {
         font-size: 1.1rem;
     }
     
          /* Table of Contents responsive */
     .story-footer {
         text-align: left;
     }
     
     .story-footer h4:first-of-type {
         text-align: left;
     }
     
     .story-footer a {
         text-align: left;
     }
     
     /* MadagascArkansas story responsive */
     .madagascarkansas-story .story-content {
         padding: 25px;
     }
     

     
     .madagascarkansas-story .location-header h5 {
         font-size: 1.2rem;
         margin: 0 0 20px 0;
     }
     
     .madagascarkansas-story .story-text p {
         font-size: 1rem;
     }
     
     .madagascarkansas-story .story-text h5 {
         font-size: 1.1rem;
     }
     
     .madagascarkansas-story .story-footer {
         padding: 20px;
     }
     
     .madagascarkansas-story .story-footer h1 {
         font-size: 1.3rem;
     }
     
           .madagascarkansas-story .story-footer h4 {
          font-size: 1.1rem;
      }
      
      /* Time Travel Tuesday story responsive */
      .time-story .story-content {
          padding: 25px;
      }
      
      
      
      .time-story .location-header h5 {
          font-size: 1.2rem;
          margin: 0 0 20px 0;
      }
      
      .time-story .story-text p {
          font-size: 1rem;
      }
      
      .time-story .story-text h5 {
          font-size: 1.1rem;
      }
      
      .time-story .story-footer {
          padding: 20px;
      }
      
      .time-story .story-footer h1 {
          font-size: 1.3rem;
      }
      
      .time-story .story-footer h4 {
          font-size: 1.1rem;
      }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-text p {
        font-size: 1rem;
    }
    
    .link-card {
        padding: 15px;
    }
    
    .link-content {
        gap: 12px;
    }
    
    .link-image {
        width: 60px;
        height: 60px;
    }
    
    .link-title {
        font-size: 1.1rem;
    }
    
    .link-description {
        font-size: 0.9rem;
    }
}

/* Entrance animation removed 2026-09-11. It was a staggered fadeInUp with 25
   hand-written nth-child delays, so the last card landed 3.1s after load and a
   fast scroll met blank space. See CLAUDE.md. */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
/* focus-visible, not focus: a mouse click drew this box around the text. */
.link-title:focus-visible,
a.link-description:focus-visible,
.hero-social a:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

/* Keyboard focus on a card's title rings the whole card. */
.link-card:has(.link-title:focus-visible) {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}
.link-title:focus-visible {
    outline: none;
}

/* Privacy Policy Page */
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-section {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.privacy-section h2 {
    color: var(--kb-text);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--kb-text);
}

.privacy-section p {
    color: var(--kb-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.privacy-section ul {
    color: var(--kb-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 20px;
}

.privacy-section li {
    margin-bottom: 8px;
}

.privacy-section strong {
    color: var(--kb-text);
    font-weight: 600;
}

.privacy-footer {
    text-align: center;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    padding: 25px;
    margin-top: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
}

.privacy-footer p {
    color: var(--kb-muted);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.privacy-footer p:last-child {
    margin-bottom: 0;
}

/* Game Pages Styling */

/* Blame Game */
.blame-game {
    max-width: 800px;
    margin: 0 auto;
}

.problem-section {
    margin-bottom: 40px;
    text-align: center;
}

.problem-card {
    background: rgb(var(--kb-accent-2-rgb) / 0.1);
    border: 2px solid rgb(var(--kb-accent-2-rgb) / 0.3);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgb(var(--kb-accent-2-rgb) / 0.2);
    position: relative;
    overflow: hidden;
    /* Playing card proportions: 2.5:3.5 ratio */
    aspect-ratio: 2.5 / 3.5;
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--kb-accent-2);
}

.problem-card h3 {
    color: var(--kb-accent-2);
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.problem-text {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.blame-cards-section {
    margin-bottom: 40px;
    text-align: center;
}

.blame-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.blame-card {
    background: rgb(var(--kb-accent-rgb) / 0.1);
    border: 2px solid rgb(var(--kb-accent-rgb) / 0.3);
    border-radius: 20px;
    padding: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgb(var(--kb-accent-rgb) / 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Playing card proportions: 2.5:3.5 ratio */
    aspect-ratio: 2.5 / 3.5;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.blame-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--kb-accent);
}

.blame-card:hover {
    background: rgb(var(--kb-accent-rgb) / 0.15);
    transform: translateY(-8px) rotate(2deg);
    box-shadow: 0 20px 50px rgb(var(--kb-accent-rgb) / 0.4);
    border-color: rgb(var(--kb-accent-rgb) / 0.6);
}

.blame-card:active {
    transform: translateY(-4px) rotate(1deg);
    box-shadow: 0 15px 35px rgb(var(--kb-accent-rgb) / 0.3);
}

.blame-card h4 {
    color: var(--kb-text);
    font-size: 1.4rem;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.blame-text {
    color: var(--kb-text);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon styling for blame game cards */
.blame-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 20px;
    line-height: 1;
    text-align: center;
}

.blame-card .blame-icon {
    font-size: 3.5rem;
    margin-bottom: 8px;
}

.game-actions {
    text-align: center;
    margin-bottom: 40px;
}

.game-btn {
    background: var(--kb-teal-fill);
    color: var(--kb-fill-deep-label);
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 154, 150, 0.4);
}

/* Oar/Ore quiz: merch / Etsy CTA — warm orange */
a.game-btn.game-btn--patreon {
    display: inline-block;
    text-decoration: none;
}

.game-btn--patreon {
    background: #b74a2a;
    color: var(--kb-text);
    box-shadow: 0 4px 16px rgba(255, 120, 68, 0.35);
}

.game-btn--patreon:hover {
    box-shadow: 0 8px 28px rgba(255, 130, 72, 0.5);
}

/* Oar/Ore quiz pages — darker button fills; label color stays white */
.page-or-quiz .game-btn {
    color: var(--kb-fill-deep-label);
    background: var(--kb-fill-deep);
}

.page-or-quiz .game-btn:hover {
    box-shadow: 0 8px 25px rgba(150, 62, 93, 0.45);
}

/* Bright fills, dark labels, same call as the generic set above. The old white-label
   values these replace were #c93f3f 4.92, #2f7a77 5.03 and #7c62d4 4.61. */
.page-or-quiz .game-btn.oar-btn {
    background: var(--kb-fill);
    color: var(--kb-fill-label);
}

.page-or-quiz .game-btn.ore-btn {
    background: var(--kb-fill-2);
    color: var(--kb-fill-label);
}

.page-or-quiz .game-btn.orr-btn {
    background: var(--kb-fill-3);
    color: var(--kb-fill-label);
}

.page-or-quiz .game-btn.game-btn--patreon {
    background: #b74a2a;
    box-shadow: 0 4px 16px rgba(150, 60, 35, 0.5);
}

.page-or-quiz .game-btn.game-btn--patreon:hover {
    box-shadow: 0 8px 28px rgba(165, 70, 40, 0.6);
}

.page-or-quiz a.game-btn {
    display: inline-block;
    text-decoration: none;
}

/* Compact quiz hero: a small square picture beside the title, so the first
   question starts on screen on a phone. */
.page-or-quiz .hero-section {
    margin-bottom: 28px;
    padding: 20px 0 8px;
}

.page-or-quiz .hero-content {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 32px;
}

.page-or-quiz .hero-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 0;
    box-shadow: none;
}

.page-or-quiz .hero-text {
    align-items: flex-start;
    text-align: left;
}

.page-or-quiz .hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 6px;
    text-align: left;
}

.page-or-quiz .hero-text p {
    margin-bottom: 0;
    text-align: left;
}

@media (max-width: 480px) {
    .page-or-quiz .hero-content {
        gap: 20px;
    }

    .page-or-quiz .hero-image {
        width: 88px;
        height: 88px;
    }

    .page-or-quiz .hero-text h1 {
        font-size: 1.6rem;
    }

    .page-or-quiz .hero-text p {
        font-size: 0.95rem;
    }
}

.game-instructions {
    text-align: center;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.game-instructions p {
    color: var(--kb-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Doomsday Calculator */
.doomsday-calculator {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 40px;   /* padding, since a margin collapses into More to Explore's 60 */
}

.date-input-section {
    text-align: center;
    margin-bottom: 40px;
}

.input-label {
    display: block;
    color: var(--kb-text);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.date-input {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    border: 2px solid rgb(var(--kb-ink) / 0.2);
    border-radius: 15px;
    background: rgb(var(--kb-ink) / 0.05);
    color: var(--kb-text);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.date-input:focus {
    outline: none;
    border-color: var(--kb-accent);
    background: rgb(var(--kb-ink) / 0.08);
}

.calculator-actions {
    text-align: center;
    margin-bottom: 40px;
}

.evidence-output {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
}

/* OR Quiz */
.or-quiz {
    max-width: 800px;
    margin: 0 auto;
}

.quiz-question {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    text-align: center;
}

.question-number {
    color: var(--kb-text);
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Homonym Quiz: the word shown above the zoomed image, repeated as "SEAL or SEAL?" */
.homonym-word {
    color: var(--kb-text);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
    text-wrap: balance;
}

/* Lowercase joiner, so it reads like the OAR or ORE?? buttons rather than
   a third shouted word. */
.homonym-word-or {
    text-transform: lowercase;
    font-weight: 600;
    font-size: 0.7em;
    letter-spacing: normal;
    opacity: 0.7;
}

/* Kept next to the rule above rather than in the shared 768px block further up
   the file - that block loses to these later declarations. "BOXING or BOXING?"
   is nearly three times the width of "BOXING", so it needs to come down a size
   to stay on one line on a phone. */
@media (max-width: 768px) {
    .homonym-word {
        font-size: 1.35rem;
        letter-spacing: 1px;
    }
}

.question-image {
    margin-bottom: 25px;
}

.or-image {
    width: 240px;
    height: 240px;
    border-radius: 15px;
    border: 2px solid rgb(var(--kb-ink) / 0.2);
    object-fit: cover;
}

.question-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* The three answer buttons are the one place on the site that uses a BRIGHT fill
   with a dark label (2026-09-11). Two reasons it is worth the exception: it is the
   quiz's core interaction and the three have to be told apart instantly, and bright
   plus dark scores 9.12 / 5.13 / 6.82 where the old deep fills under white labels
   were 4.92 / 5.03 / 4.61. The navigational quiz buttons stay deep-with-white, so
   "bright means an answer" reads as hierarchy rather than inconsistency. */
.oar-btn {
    background: var(--kb-fill);
    color: var(--kb-fill-label);
}

.ore-btn {
    background: var(--kb-fill-2);
    color: var(--kb-fill-label);
}

.orr-btn {
    background: var(--kb-fill-3);
    color: var(--kb-fill-label);
}

.or-separator {
    color: var(--kb-text);
    font-size: 1.2rem;
    font-weight: 600;
}

.quiz-results {
    text-align: center;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.quiz-results h2 {
    color: var(--kb-text);
    font-size: 2rem;
    font-weight: 700;
    color: var(--kb-text);
}

.quiz-copy-score {
    margin-top: 1rem;
}

/* Crawlable "About" blurb on quiz pages (SEO + reader context) */
.quiz-about {
    max-width: 640px;
    margin: 10px auto 40px;
    text-align: center;
    color: var(--kb-muted);
}

.quiz-about h2 {
    color: var(--kb-teal);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.quiz-about p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.quiz-about a {
    color: var(--kb-teal);
}

.quiz-about strong {
    color: var(--kb-text);
}

/* Share row shown on quiz completion (inside .quiz-results) */
/* Both blocks below set `display`, and an author display rule beats the browser's
   built-in [hidden] { display: none }. Without these guards or-quiz.js can set .hidden
   all it likes and the elements still render, which is exactly what happened: the share
   row was visible from page load on every quiz. .quiz-newsletter sets no display, so it
   needs no guard. Any new display rule in here does. */
.quiz-next[hidden],
.quiz-share[hidden] {
    display: none;
}

/* "Play the next quiz" CTA, shown on the result screen the moment a quiz is finished.
   Sits above the share row on purpose — continuing is the primary action, sharing the
   secondary one. */
.quiz-next {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.quiz-next .quiz-next-link {
    margin-top: 0;
    text-decoration: none;
    font-size: 1.1rem;
}

.quiz-share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

.quiz-share .game-btn {
    margin-top: 0;
    text-decoration: none;
}

.quiz-share .quiz-share-x {
    background: #000000;
    color: var(--kb-text);
}

.quiz-share .quiz-share-x:hover {
    background: #1a1a1a;
}

.quiz-share .quiz-share-fb {
    background: #1877f2;
    color: var(--kb-text);
}

.quiz-share .quiz-share-fb:hover {
    background: #0f6ae0;
}

.quiz-share .quiz-share-native {
    background: var(--kb-purple);
    color: var(--kb-fill-deep-label);
}

.quiz-share .quiz-share-native:hover {
    background: #55409f;
}

/* All three signup forms set display: flex below, and subscribe.js hides the form with the
   hidden attribute once Kit has accepted the address, so each needs this guard: an author
   display rule beats the browser's built-in [hidden] { display: none }. Same trap as the
   quiz share row (see the .quiz-next[hidden] note above and CLAUDE.md). Neither media query
   on these forms sets display, so one block here covers every breakpoint. */
.embeddable-buttondown-form[hidden],
.inline-signup-form[hidden],
.quiz-newsletter-form[hidden] {
    display: none;
}

/* Newsletter nudge shown on quiz completion (inside .quiz-results) */
/* .inline-signup is the same box used mid-page (see includes/mailing-list-inline.php);
   it shares the quiz styling so there's one signup look across the site. */
.quiz-newsletter,
.inline-signup {
    max-width: 520px;
    margin: 24px auto 0;
    padding: 22px 24px;
    background: rgb(var(--kb-accent-rgb) / 0.08);
    border: 1px solid rgb(var(--kb-accent-rgb) / 0.35);
    border-radius: 15px;
}

.inline-signup {
    margin: 40px auto;
    text-align: center;
}

.quiz-newsletter-text,
.inline-signup-text {
    color: var(--kb-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 14px;
}

.quiz-newsletter-form,
.inline-signup-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.inline-signup .mailing-list-note {
    margin-top: 12px;
    font-size: 0.85rem;
}

.answer-result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.answer-result:empty {
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    color: var(--kb-muted);
}

.answer-result:not(:empty) {
    background: rgb(var(--kb-accent-rgb) / 0.1);
    border: 1px solid rgb(var(--kb-accent-rgb) / 0.3);
    color: var(--kb-accent);
}

/* Earthquake Calculator */
.earthquake-calculator {
    max-width: 600px;
    margin: 0 auto;
}

.input-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.input-group {
    text-align: center;
}

.input-label {
    display: block;
    color: var(--kb-text);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    border: 2px solid rgb(var(--kb-ink) / 0.2);
    border-radius: 15px;
    background: rgb(var(--kb-ink) / 0.05);
    color: var(--kb-text);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--kb-accent) 50%),
      linear-gradient(135deg, var(--kb-accent) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

select.form-input option {
    background: var(--kb-bg);
    color: var(--kb-text);
}

.form-input:focus {
    outline: none;
    border-color: var(--kb-accent);
    background-color: rgb(var(--kb-ink) / 0.08);
}

.results-section {
    text-align: center;
    margin-bottom: 40px;
}

.result-display {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.result-label {
    color: var(--kb-text);
    font-size: 1.3rem;
    font-weight: 600;
}

.result-value {
    color: var(--kb-accent);
    font-size: 1.5rem;
    font-weight: 700;
}

.warning-section {
    text-align: center;
    background: rgb(var(--kb-accent-2-rgb) / 0.1);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgb(var(--kb-accent-2-rgb) / 0.2);
}

.warning-text {
    color: var(--kb-accent-2);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* Print styles */
@media print {
    .hero-social,
    .link-card:hover {
        display: none;
    }
    
    .link-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* Earthquake shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Mountain Story Page Styling */
.mountain-story {
    max-width: 800px;
    margin: 0 auto;
}

.mountain-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.location-header h5 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
}

.mountain-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.mountain-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.story-text {
    margin-bottom: 30px;
}

.story-text p {
    color: var(--kb-text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.story-text h5 {
    color: var(--kb-on-panel);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 15px 0;
    transition: all 0.3s ease;
}

/* Underline on hover, not a colour change (Kyle, 2026-09-11). This used to go magenta, which
   was hard to read on a lot of the location backgrounds and looked wrong besides. The panels are
   too many different colours for any one hover colour to work on all of them, so the cue is the
   underline and the text stays the fixed white that already clears 4.5 everywhere. Each
   adventure carries its own copy of this rule. */
.story-text h5:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateX(5px);
}

.story-text a {
    text-decoration: none;
    color: inherit;
}

.story-text #demoA {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
    margin-left: 16px;
}

.story-text #demoA:hover {
    opacity: 1;
}

.story-text #demoA:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Speech button styling for new location-header structure */
.speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
    margin-left: auto;
}

.speech-button:hover {
    opacity: 1;
}

.story-footer {
    text-align: center;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Table of Contents Styling */
.story-footer h4:first-of-type {
    text-align: left;
    margin-bottom: 15px;
}

.story-footer a {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Ensure all content in table of contents div is left-aligned */
.story-footer {
    text-align: left;
}

.location-icon {
    font-size: 1.4rem;
    display: inline;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* The location silhouettes, drawn 2026-09-13 and served by kbLocationIcon() in
   api/includes/location-icons.php. Sized in em so the one rule covers both render sites: the
   location header and the Table of Contents link both carry .location-icon and its 1.4rem.
   currentColor is what makes a single flat drawing work on every panel colour, since the panel
   text is already the fixed white --kb-on-panel. */
.location-icon .location-sil {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.15em;
}

/* The Listen to story button, same reasoning as above. It sits inside .story-content, so
   currentColor is the fixed white panel text, which is the whole point: the 📣 emoji this
   replaced carried its own red and yellow and vanished on several panel colours. The 0.7
   opacity on .speech-button still applies and is what keeps it secondary to the place name. */
.speech-button .speech-sil {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.12em;
}

/* The More Choose Your Own Adventures list. Each link takes that adventure's page-default
   silhouette. Sized off the link's own text rather than the 1.4rem .location-icon carries,
   because these sit in a plain list rather than in the Table of Contents pills. */
.adventure-icon .location-sil {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    vertical-align: -0.2em;
    margin-right: 0.15em;
}

/* Location header styling - matching choose-test.html */
.location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
}

.location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.location-header .speech-button:hover {
    opacity: 1;
}

/* Fixed white, not the muted grey (Kyle, 2026-09-11). These sit on the adventure's own
   coloured story panel, where the grey measured 2.00 to 2.95 against a 4.5 floor in both
   themes. Each of the seven adventures carries its own copy of this rule. */
.story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* MadagascArkansas Adventure Page Styling */
.madagascarkansas-story {
    max-width: 800px;
    margin: 0 auto;
}

.madagascarkansas-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

/* Time Travel Tuesday Adventure Page Styling */
.time-story {
    max-width: 800px;
    margin: 0 auto;
}

.time-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.time-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}



.time-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.time-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.time-story .story-text {
    margin-bottom: 30px;
}

.time-story .story-text p {
    color: var(--kb-text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.time-story .story-text h5 {
    color: var(--kb-on-panel);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 15px 0;
    transition: all 0.3s ease;
}

.time-story .story-text h5:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateX(5px);
}

.time-story .story-text a {
    text-decoration: none;
    color: inherit;
}

.time-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.time-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.time-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.time-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.time-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

.madagascarkansas-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}



.madagascarkansas-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.madagascarkansas-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.madagascarkansas-story .story-text {
    margin-bottom: 30px;
}

.madagascarkansas-story .story-text p {
    color: var(--kb-text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.madagascarkansas-story .story-text h5 {
    color: var(--kb-on-panel);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 15px 0;
    transition: all 0.3s ease;
}

.madagascarkansas-story .story-text h5:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateX(5px);
}

.madagascarkansas-story .story-text a {
    text-decoration: none;
    color: inherit;
}

.madagascarkansas-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.madagascarkansas-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.madagascarkansas-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.madagascarkansas-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.madagascarkansas-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* Doomsday Calculator Newspaper Styling */
#doomsday-publication {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(22px, 7vw, 48px) !important;
    text-transform: uppercase;
    color: #2f2f2f !important;
}

#doomsday-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 32px !important;
    text-transform: uppercase;
    text-align: center;
    color: #2f2f2f !important;
}

.doomsday-small {
    font-size: 12px !important;
    text-align: center;
    color: #2f2f2f !important;
}

#doomsday-newspaper {
    background-color: #f9f7f1;
    border: 2px solid #2f2f2f;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#doomsday-newspaper * {
    font-family: 'Droid Serif', serif;
    font-size: 14px;
    color: #2f2f2f !important;
}

#doomsday-newspaper hr {
    border: 1px solid #2f2f2f !important;
    margin: 20px 0;
}

.doomsday-image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 100%;
    border-radius: 5px;
}

/* Dune Story Page Styling */
.dune-story {
    max-width: 800px;
    margin: 0 auto;
}

.dune-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.dune-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.dune-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.dune-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.dune-story .story-text {
    color: var(--kb-text);
    line-height: 1.8;
    font-size: 1.1rem;
}

.dune-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.dune-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.dune-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.dune-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.dune-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* Farmer Story Page Styling */
.farmer-story {
    max-width: 800px;
    margin: 0 auto;
}

.farmer-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.farmer-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}



.farmer-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.farmer-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.farmer-story .story-text {
    color: var(--kb-text);
    line-height: 1.8;
    font-size: 1.1rem;
}

.farmer-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.farmer-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.farmer-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.farmer-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.farmer-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* Haunted Story Page Styling */
.haunted-story {
    max-width: 800px;
    margin: 0 auto;
}

.haunted-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.haunted-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}



.haunted-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.haunted-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.haunted-story .story-text {
    color: var(--kb-text);
    line-height: 1.8;
    font-size: 1.1rem;
}

.haunted-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.haunted-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.haunted-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.haunted-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.haunted-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* Choose Story Page Styling */
.choose-story {
    max-width: 800px;
    margin: 0 auto;
}

.choose-story .story-content {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.choose-story .location-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}



.choose-story .location-header h5 {
    color: var(--kb-text);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 30px 0;
    line-height: normal;
    color: var(--kb-text);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex: 1;
}

.choose-story .location-header .speech-button {
    cursor: pointer;
    float: right;
    opacity: 0.7;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.choose-story .story-text {
    color: var(--kb-text);
    line-height: 1.8;
    font-size: 1.1rem;
}

.choose-story .story-footer {
    text-align: left;
    padding: 30px;
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 30px;
}

.choose-story .story-footer h1 {
    color: var(--kb-text);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--kb-on-panel);
}

.choose-story .story-footer h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.choose-story .story-footer a {
    color: var(--kb-on-panel);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    background: rgb(var(--kb-ink) / 0.05);
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
    transition: all 0.3s ease;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
}

.choose-story .story-footer a:hover {
    background: rgb(var(--kb-ink) / 0.1);
    color: var(--kb-on-panel);
    transform: translateX(5px);
    border-color: rgb(var(--kb-accent-rgb) / 0.5);
}

/* The seven adventures. Dark mode paints the whole page in the location colour (--kb-loc, set
   per location on <body>). Light mode puts the page on paper and moves the colour onto the story
   panel, which carries .kb-dark, so the panel looks the same in both themes. The Table of
   Contents is off the panel there, so its "on panel" white follows the theme instead. */
.kb-adventure {
    background-color: var(--kb-loc);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .kb-adventure {
        background-color: var(--kb-bg);
    }

    :root:not([data-theme="dark"]) .kb-adventure .story-content {
        background-color: var(--kb-loc);
    }

    :root:not([data-theme="dark"]) .kb-adventure .story-footer {
        --kb-on-panel: var(--kb-text);
    }
}

:root[data-theme="light"] .kb-adventure {
    background-color: var(--kb-bg);
}

:root[data-theme="light"] .kb-adventure .story-content {
    background-color: var(--kb-loc);
}

:root[data-theme="light"] .kb-adventure .story-footer {
    --kb-on-panel: var(--kb-text);
}

/* Location-specific color themes for story-content divs */
.story-content.color-303 { 
    background: linear-gradient(135deg, rgba(51, 0, 51, 0.15), rgba(51, 0, 51, 0.05));
    border: 2px solid #303;
    box-shadow: 0 0 20px rgba(51, 0, 51, 0.3), inset 0 0 20px rgba(51, 0, 51, 0.1);
    position: relative;
}
.story-content.color-303::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgb(var(--kb-ink) / 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgb(var(--kb-ink) / 0.05) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 3px, rgb(var(--kb-ink) / 0.02) 3px, rgb(var(--kb-ink) / 0.02) 6px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-633 { 
    background: linear-gradient(135deg, rgba(102, 51, 51, 0.15), rgba(102, 51, 51, 0.05));
    border: 2px solid #633;
    box-shadow: 0 0 20px rgba(102, 51, 51, 0.3), inset 0 0 20px rgba(102, 51, 51, 0.1);
    position: relative;
}
.story-content.color-633::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 30%, rgb(var(--kb-ink) / 0.03) 30%, rgb(var(--kb-ink) / 0.03) 70%, transparent 70%),
        radial-gradient(ellipse at 70% 30%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-660 { 
    background: linear-gradient(135deg, rgba(102, 102, 0, 0.15), rgba(102, 102, 0, 0.05));
    border: 2px solid #660;
    box-shadow: 0 0 20px rgba(102, 102, 0, 0.3), inset 0 0 20px rgba(102, 102, 0, 0.1);
    position: relative;
}
.story-content.color-660::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at center, rgb(var(--kb-ink) / 0.05) 0%, transparent 70%),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgb(var(--kb-ink) / 0.02) 4px, rgb(var(--kb-ink) / 0.02) 8px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-666 { 
    background: linear-gradient(135deg, rgba(102, 102, 102, 0.15), rgba(102, 102, 102, 0.05));
    border: 2px solid #666;
    box-shadow: 0 0 20px rgba(102, 102, 102, 0.3), inset 0 0 20px rgba(102, 102, 102, 0.1);
    position: relative;
}
.story-content.color-666::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(var(--kb-ink) / 0.02) 5px, rgb(var(--kb-ink) / 0.02) 10px),
        radial-gradient(circle at 25% 75%, rgb(var(--kb-ink) / 0.03) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-333 { 
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0.05));
    border: 2px solid #333;
    box-shadow: 0 0 20px rgba(51, 51, 51, 0.3), inset 0 0 20px rgba(51, 51, 51, 0.1);
    position: relative;
}
.story-content.color-333::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 30%, rgb(var(--kb-ink) / 0.08) 0%, transparent 50%),
        linear-gradient(135deg, transparent 0%, rgb(var(--kb-ink) / 0.02) 50%, transparent 100%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-033 { 
    background: linear-gradient(135deg, rgba(0, 51, 51, 0.15), rgba(0, 51, 51, 0.05));
    border: 2px solid #033;
    box-shadow: 0 0 20px rgba(0, 51, 51, 0.3), inset 0 0 20px rgba(0, 51, 51, 0.1);
    position: relative;
}
.story-content.color-033::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(90deg, transparent 0%, rgb(var(--kb-ink) / 0.03) 50%, transparent 100%),
        repeating-linear-gradient(0deg, transparent, transparent 6px, rgb(var(--kb-ink) / 0.01) 6px, rgb(var(--kb-ink) / 0.01) 12px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-060 { 
    background: linear-gradient(135deg, rgba(0, 102, 0, 0.15), rgba(0, 102, 0, 0.05));
    border: 2px solid #060;
    box-shadow: 0 0 20px rgba(0, 102, 0, 0.3), inset 0 0 20px rgba(0, 102, 0, 0.1);
    position: relative;
}
.story-content.color-060::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 90%, rgb(var(--kb-ink) / 0.06) 0%, transparent 60%),
        radial-gradient(circle at 90% 10%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 7px, rgb(var(--kb-ink) / 0.015) 7px, rgb(var(--kb-ink) / 0.015) 14px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-360 { 
    background: linear-gradient(135deg, rgba(51, 102, 0, 0.15), rgba(51, 102, 0, 0.05));
    border: 2px solid #360;
    box-shadow: 0 0 20px rgba(51, 102, 0, 0.3), inset 0 0 20px rgba(51, 102, 0, 0.1);
    position: relative;
}
.story-content.color-360::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgb(var(--kb-ink) / 0.02) 8px, rgb(var(--kb-ink) / 0.02) 16px),
        radial-gradient(ellipse at 60% 40%, rgb(var(--kb-ink) / 0.03) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-606 { 
    background: linear-gradient(135deg, rgba(102, 0, 102, 0.15), rgba(102, 0, 102, 0.05));
    border: 2px solid #606;
    box-shadow: 0 0 20px rgba(102, 0, 102, 0.3), inset 0 0 20px rgba(102, 0, 102, 0.1);
    position: relative;
}
.story-content.color-606::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgb(var(--kb-ink) / 0.05) 0%, transparent 70%),
        repeating-linear-gradient(45deg, transparent, transparent 9px, rgb(var(--kb-ink) / 0.02) 9px, rgb(var(--kb-ink) / 0.02) 18px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-300 { 
    background: linear-gradient(135deg, rgba(51, 0, 0, 0.15), rgba(51, 0, 0, 0.05));
    border: 2px solid #300;
    box-shadow: 0 0 20px rgba(51, 0, 0, 0.3), inset 0 0 20px rgba(51, 0, 0, 0.1);
    position: relative;
}
.story-content.color-300::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(135deg, transparent 40%, rgb(var(--kb-ink) / 0.03) 40%, rgb(var(--kb-ink) / 0.03) 60%, transparent 60%),
        radial-gradient(circle at 15% 85%, rgb(var(--kb-ink) / 0.04) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-393 { 
    background: linear-gradient(135deg, rgba(51, 153, 51, 0.15), rgba(51, 153, 51, 0.05));
    border: 2px solid #393;
    box-shadow: 0 0 20px rgba(51, 153, 51, 0.3), inset 0 0 20px rgba(51, 153, 51, 0.1);
    position: relative;
}
.story-content.color-393::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 20% 80%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%),
        repeating-linear-gradient(90deg, transparent, transparent 5px, rgb(var(--kb-ink) / 0.015) 5px, rgb(var(--kb-ink) / 0.015) 10px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-090 { 
    background: linear-gradient(135deg, rgba(0, 153, 0, 0.15), rgba(0, 153, 0, 0.05));
    border: 2px solid #090;
    box-shadow: 0 0 20px rgba(0, 153, 0, 0.3), inset 0 0 20px rgba(0, 153, 0, 0.1);
    position: relative;
}
.story-content.color-090::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 6px, rgb(var(--kb-ink) / 0.02) 6px, rgb(var(--kb-ink) / 0.02) 12px),
        radial-gradient(circle at 75% 25%, rgb(var(--kb-ink) / 0.03) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

/* Additional color themes for other adventure pages */
.story-content.color-663 { 
    background: linear-gradient(135deg, rgba(102, 102, 51, 0.15), rgba(102, 102, 51, 0.05));
    border: 2px solid #663;
    box-shadow: 0 0 20px rgba(102, 102, 51, 0.3), inset 0 0 20px rgba(102, 102, 51, 0.1);
    position: relative;
}
.story-content.color-663::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 20%, rgb(var(--kb-ink) / 0.04) 20%, rgb(var(--kb-ink) / 0.04) 80%, transparent 80%),
        radial-gradient(ellipse at 40% 60%, rgb(var(--kb-ink) / 0.03) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-600 { 
    background: linear-gradient(135deg, rgba(102, 0, 0, 0.15), rgba(102, 0, 0, 0.05));
    border: 2px solid #600;
    box-shadow: 0 0 20px rgba(102, 0, 0, 0.3), inset 0 0 20px rgba(102, 0, 0, 0.1);
    position: relative;
}
.story-content.color-600::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 75%, rgb(var(--kb-ink) / 0.06) 0%, transparent 50%),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgb(var(--kb-ink) / 0.02) 7px, rgb(var(--kb-ink) / 0.02) 14px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-630 { 
    background: linear-gradient(135deg, rgba(102, 51, 0, 0.15), rgba(102, 51, 0, 0.05));
    border: 2px solid #630;
    box-shadow: 0 0 20px rgba(102, 51, 0, 0.3), inset 0 0 20px rgba(102, 51, 0, 0.1);
    position: relative;
}
.story-content.color-630::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 6px, rgb(var(--kb-ink) / 0.03) 6px, rgb(var(--kb-ink) / 0.03) 12px),
        radial-gradient(circle at 70% 30%, rgb(var(--kb-ink) / 0.04) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-036 { 
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.15), rgba(0, 51, 102, 0.05));
    border: 2px solid #036;
    box-shadow: 0 0 20px rgba(0, 51, 102, 0.3), inset 0 0 20px rgba(0, 51, 102, 0.1);
    position: relative;
}
.story-content.color-036::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 80% 20%, rgb(var(--kb-ink) / 0.05) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgb(var(--kb-ink) / 0.015) 8px, rgb(var(--kb-ink) / 0.015) 16px);
    pointer-events: none;
    border-radius: 18px;
}

/* Responsive rules for new story pages */
@media (max-width: 768px) {
    .dune-story .story-content,
    .farmer-story .story-content,
    .haunted-story .story-content,
    .choose-story .story-content,
    .mountain-story .story-content,
    .time-story .story-content,
    .madagascarkansas-story .story-content {
        padding: 25px;
    }
    
    .dune-story .location-header,
    .farmer-story .location-header,
    .haunted-story .location-header,
    .choose-story .location-header,
    .mountain-story .location-header,
    .time-story .location-header,
    .madagascarkansas-story .location-header {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .dune-story .location-header h5,
    .farmer-story .location-header h5,
    .haunted-story .location-header h5,
    .choose-story .location-header h5,
    .mountain-story .location-header h5,
    .time-story .location-header h5,
    .madagascarkansas-story .location-header h5 {
        font-size: 1.2rem;
        margin: 0 0 20px 0;
    }
    
    .dune-story .location-header .speech-button,
    .farmer-story .location-header .speech-button,
    .haunted-story .location-header .speech-button,
    .choose-story .location-header .speech-button,
    .mountain-story .location-header .speech-button,
    .time-story .location-header .speech-button,
    .madagascarkansas-story .location-header .speech-button {
        font-size: 1rem;
    }
    
    .dune-story .story-text,
    .farmer-story .story-text,
    .haunted-story .story-text,
    .choose-story .story-text,
    .mountain-story .story-text,
    .time-story .story-text,
    .madagascarkansas-story .story-text {
        font-size: 1rem;
    }
    
    .dune-story .story-footer,
    .farmer-story .story-footer,
    .haunted-story .story-footer,
    .choose-story .story-footer,
    .mountain-story .story-footer,
    .time-story .story-footer,
    .madagascarkansas-story .story-footer {
        padding: 20px;
    }
    
    .dune-story .story-footer h1,
    .farmer-story .story-footer h1,
    .haunted-story .story-footer h1,
    .choose-story .story-footer h1,
    .mountain-story .story-footer h1,
    .time-story .story-footer h1,
    .madagascarkansas-story .story-footer h1 {
        font-size: 1.3rem;
    }
    
    .dune-story .story-footer h4,
    .farmer-story .story-footer h4,
    .haunted-story .story-footer h4,
    .choose-story .story-footer h4,
    .mountain-story .story-footer h4,
    .time-story .story-footer h4,
    .madagascarkansas-story .story-footer h4 {
        font-size: 1.1rem;
    }
}

/* Additional color themes for other adventure pages */
.story-content.color-933 { 
    background: linear-gradient(135deg, rgba(153, 51, 51, 0.15), rgba(153, 51, 51, 0.05));
    border: 2px solid #933;
    box-shadow: 0 0 20px rgba(153, 51, 51, 0.3), inset 0 0 20px rgba(153, 51, 51, 0.1);
    position: relative;
}
.story-content.color-933::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgb(var(--kb-ink) / 0.07) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(var(--kb-ink) / 0.02) 10px, rgb(var(--kb-ink) / 0.02) 20px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-636 { 
    background: linear-gradient(135deg, rgba(102, 51, 102, 0.15), rgba(102, 51, 102, 0.05));
    border: 2px solid #636;
    box-shadow: 0 0 20px rgba(102, 51, 102, 0.3), inset 0 0 20px rgba(102, 51, 102, 0.1);
    position: relative;
}
.story-content.color-636::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(135deg, transparent 0%, rgb(var(--kb-ink) / 0.03) 50%, transparent 100%),
        radial-gradient(ellipse at 60% 40%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-363 { 
    background: linear-gradient(135deg, rgba(51, 102, 51, 0.15), rgba(51, 102, 51, 0.05));
    border: 2px solid #363;
    box-shadow: 0 0 20px rgba(51, 102, 51, 0.3), inset 0 0 20px rgba(51, 102, 51, 0.1);
    position: relative;
}
.story-content.color-363::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 40% 60%, rgb(var(--kb-ink) / 0.05) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 7px, rgb(var(--kb-ink) / 0.018) 7px, rgb(var(--kb-ink) / 0.018) 14px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-330 { 
    background: linear-gradient(135deg, rgba(51, 51, 0, 0.15), rgba(51, 51, 0, 0.05));
    border: 2px solid #330;
    box-shadow: 0 0 20px rgba(51, 51, 0, 0.3), inset 0 0 20px rgba(51, 51, 0, 0.1);
    position: relative;
}
.story-content.color-330::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgb(var(--kb-ink) / 0.02) 5px, rgb(var(--kb-ink) / 0.02) 10px),
        radial-gradient(circle at 70% 30%, rgb(var(--kb-ink) / 0.03) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-063 { 
    background: linear-gradient(135deg, rgba(0, 102, 51, 0.15), rgba(0, 102, 51, 0.05));
    border: 2px solid #063;
    box-shadow: 0 0 20px rgba(0, 102, 51, 0.3), inset 0 0 20px rgba(0, 102, 51, 0.1);
    position: relative;
}
.story-content.color-063::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 30% 70%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgb(var(--kb-ink) / 0.016) 8px, rgb(var(--kb-ink) / 0.016) 16px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-006 { 
    background: linear-gradient(135deg, rgba(0, 0, 102, 0.15), rgba(0, 0, 102, 0.05));
    border: 2px solid #006;
    box-shadow: 0 0 20px rgba(0, 0, 102, 0.3), inset 0 0 20px rgba(0, 0, 102, 0.1);
    position: relative;
}
.story-content.color-006::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgb(var(--kb-ink) / 0.06) 0%, transparent 70%),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgb(var(--kb-ink) / 0.02) 6px, rgb(var(--kb-ink) / 0.02) 12px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-066 { 
    background: linear-gradient(135deg, rgba(0, 102, 102, 0.15), rgba(0, 102, 102, 0.05));
    border: 2px solid #066;
    box-shadow: 0 0 20px rgba(0, 102, 102, 0.3), inset 0 0 20px rgba(0, 102, 102, 0.1);
    position: relative;
}
.story-content.color-066::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 0%, rgb(var(--kb-ink) / 0.03) 50%, transparent 100%),
        radial-gradient(ellipse at 80% 20%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-900 { 
    background: linear-gradient(135deg, rgba(153, 0, 0, 0.15), rgba(153, 0, 0, 0.05));
    border: 2px solid #900;
    box-shadow: 0 0 20px rgba(153, 0, 0, 0.3), inset 0 0 20px rgba(153, 0, 0, 0.1);
    position: relative;
}
.story-content.color-900::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 85%, rgb(var(--kb-ink) / 0.07) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 9px, rgb(var(--kb-ink) / 0.02) 9px, rgb(var(--kb-ink) / 0.02) 18px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-366 { 
    background: linear-gradient(135deg, rgba(51, 102, 102, 0.15), rgba(51, 102, 102, 0.05));
    border: 2px solid #366;
    box-shadow: 0 0 20px rgba(51, 102, 102, 0.3), inset 0 0 20px rgba(51, 102, 102, 0.1);
    position: relative;
}
.story-content.color-366::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 60% 40%, rgb(var(--kb-ink) / 0.04) 0%, transparent 60%),
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgb(var(--kb-ink) / 0.018) 7px, rgb(var(--kb-ink) / 0.018) 14px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-336 { 
    background: linear-gradient(135deg, rgba(51, 51, 102, 0.15), rgba(51, 51, 102, 0.05));
    border: 2px solid #336;
    box-shadow: 0 0 20px rgba(51, 51, 102, 0.3), inset 0 0 20px rgba(51, 51, 102, 0.1);
    position: relative;
}
.story-content.color-336::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 75%, rgb(var(--kb-ink) / 0.05) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(var(--kb-ink) / 0.016) 10px, rgb(var(--kb-ink) / 0.016) 20px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-669 { 
    background: linear-gradient(135deg, rgba(102, 102, 153, 0.15), rgba(102, 102, 153, 0.05));
    border: 2px solid #669;
    box-shadow: 0 0 20px rgba(102, 102, 153, 0.3), inset 0 0 20px rgba(102, 102, 153, 0.1);
    position: relative;
}
.story-content.color-669::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgb(var(--kb-ink) / 0.02) 8px, rgb(var(--kb-ink) / 0.02) 16px),
        radial-gradient(ellipse at 40% 60%, rgb(var(--kb-ink) / 0.03) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-999 { 
    background: linear-gradient(135deg, rgba(153, 153, 153, 0.15), rgba(153, 153, 153, 0.05));
    border: 2px solid #999;
    box-shadow: 0 0 20px rgba(153, 153, 153, 0.3), inset 0 0 20px rgba(153, 153, 153, 0.1);
    position: relative;
}
.story-content.color-999::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgb(var(--kb-ink) / 0.06) 0%, transparent 70%),
        repeating-linear-gradient(45deg, transparent, transparent 6px, rgb(var(--kb-ink) / 0.02) 6px, rgb(var(--kb-ink) / 0.02) 12px);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-000 { 
    background: linear-gradient(135deg, rgb(var(--kb-shade) / 0.15), rgb(var(--kb-shade) / 0.05));
    border: 2px solid #000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
    position: relative;
}
.story-content.color-000::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 4px, rgb(var(--kb-ink) / 0.03) 4px, rgb(var(--kb-ink) / 0.03) 8px),
        radial-gradient(circle at 20% 80%, rgb(var(--kb-ink) / 0.05) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

.story-content.color-690 { 
    background: linear-gradient(135deg, rgba(102, 153, 0, 0.15), rgba(102, 153, 0, 0.05));
    border: 2px solid #690;
    box-shadow: 0 0 20px rgba(102, 153, 0, 0.3), inset 0 0 20px rgba(102, 153, 0, 0.1);
    position: relative;
}
.story-content.color-690::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 70% 30%, rgb(var(--kb-ink) / 0.05) 0%, transparent 60%),
        repeating-linear-gradient(90deg, transparent, transparent 8px, rgb(var(--kb-ink) / 0.018) 8px, rgb(var(--kb-ink) / 0.018) 16px);
    pointer-events: none;
    border-radius: 18px;
}

/* Flash Games Page Styles */
.flash-games-container {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
    margin-bottom: 40px;
}

.game-container {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

.game-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: start;
}

.game-content {
    min-width: 0;
}

.game-sidebar {
    min-width: 0;
    min-height: 720px;
    margin-top: 200px;
}

.flash-games-container h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--kb-text);
    text-align: center;
}

.flash-games-container h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--kb-text);
    text-align: center;
}

.flash-games-container p {
    color: var(--kb-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: left;
}

/* Navigation styling */
nav[aria-label="Breadcrumb"] {
    background: rgb(var(--kb-ink) / 0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid rgb(var(--kb-ink) / 0.1);
}

nav[aria-label="Breadcrumb"] a {
    color: var(--kb-text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

nav[aria-label="Breadcrumb"] a:hover,
nav[aria-label="Breadcrumb"] a:focus-visible {
    color: var(--kb-accent);
    text-decoration: underline;
}

/* Game object styling */
object[type="application/x-shockwave-flash"] {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 2px solid rgb(var(--kb-ink) / 0.2);
    background: rgb(var(--kb-shade) / 0.1);
    max-width: 100%;
    height: auto;
}

/* The Random Game button, and the one "primary action" style on the site.
   Also /h's Transform button.

   Kyle, 2026-09-11: this was meant to stand out and always looked a little off.
   It was #006633 green inside a 3px #00ff00 border, wrapped in a black-then-lime
   double ring, with a lime glow, a white shine that swept across on hover, and a
   lift-and-scale. Five effects, and none of those colours appears anywhere else
   on the site, so it read as a button borrowed from another page.

   It is loud now by being the only BRIGHT FILLED thing in its neighbourhood. On
   /flash every sibling is a quiet text link, so one solid amber block wins on kind
   rather than on decoration. Same principle as the link-card hover: one signal,
   done properly, beats five stacked. 9.12:1 with the dark label.

   Don't add a border, a glow or a sweep back to it. If it ever needs MORE
   emphasis, make it bigger or give it more room, don't give it more effects. */
.btn-primary {
    background: var(--kb-fill);
    color: var(--kb-fill-label);
    border: none;
    padding: 16px 34px;
    border-radius: 25px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover brightens the fill rather than moving the button. The label goes with it,
   because the dark label needs the fill to stay bright to keep its 9:1. */
.btn-primary:hover,
.btn-primary:focus-visible {
    background: #ffc25c;
    color: var(--kb-fill-label);
    text-decoration: none;
}

.btn-primary:active {
    background: #dd9014;
}

/* Game links styling */
.game-link {
    display: block;
    color: var(--kb-text);
    text-decoration: none;
    padding: 8px 12px;
    margin: 2px;
    transition: all 0.3s ease;
    font-weight: 500;
    border-radius: 5px;
}

.game-link:hover,
.game-link:focus-visible {
    color: var(--kb-accent);
    background: rgb(var(--kb-ink) / 0.1);
    text-decoration: none;
}

.games-empty {
    text-align: center;
    color: var(--kb-muted);
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Games container styling */
#games-container {
    background: rgb(var(--kb-ink) / 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgb(var(--kb-ink) / 0.05);
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: left;
}

/* Flash Games Responsive adjustments */
@media (max-width: 768px) {
    .flash-games-container,
    .game-container {
        padding: 20px;
    }
    
    .flash-games-container h1 {
        font-size: 2rem;
    }
    
    .flash-games-container h2 {
        font-size: 1.5rem;
    }
    
    nav[aria-label="Breadcrumb"] {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    #games-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .game-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    #games-container {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* Adventure ending: the other adventures, listed in the story panel.
   Placed last so it wins over per-adventure `.X-story .story-text a` overrides. */
.adventure-next {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgb(var(--kb-ink) / 0.25);
}

/* Same look as the Table of Contents title below the panel: a heading, not a choice. */
.adventure-next h4 {
    color: var(--kb-on-panel);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 15px;
}

.story-text a.adventure-next-link,
.adventure-next a.adventure-next-link {
    display: inline-block;
    color: var(--kb-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.9;
}

.story-text a.adventure-next-link:hover,
.adventure-next a.adventure-next-link:hover {
    opacity: 1;
}

/* "Resume" banner on the /adventures hub (shown only when a saved spot exists) */
.adventure-resume {
    max-width: 620px;
    margin: 0 auto 40px;
    padding: 18px 22px;
    text-align: center;
    background: rgb(var(--kb-accent-rgb) / 0.08);
    border: 1px solid rgb(var(--kb-accent-rgb) / 0.35);
    border-radius: 15px;
}

.adventure-resume-label {
    display: block;
    color: var(--kb-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
}


/* Genre hubs (/flash/genre) and the genre rows on game pages. Links follow
   the site convention: teal, coral on hover. */
.genre-links a {
    color: var(--kb-text);
    text-decoration: none;
}

.genre-links a:hover,
.genre-links a:focus-visible {
    color: var(--kb-accent);
    text-decoration: underline;
}