:root {
    --base: #f3f3f1;
    --contrast: #2500ff;
    --muted: rgba(37, 0, 255, 0.7);
    --line: rgba(37, 0, 255, 0.18);
    --content: 650px;
    --wide: 1200px;
    --page-padding-x: clamp(1.75rem, 5vw, 3rem);
    --page-padding-y: clamp(1.8rem, 5vw, 3rem);
}
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--page-padding-y) 0;
    background: var(--base);
    color: var(--contrast);
    font-family: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    line-height: 1.6;
}

body.welcome-page {
    --base: #050806;
    --contrast: #b7ff3c;
    --muted: rgba(183, 255, 60, 0.68);
    --line: rgba(183, 255, 60, 0.2);

    min-height: 100vh;
    padding: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -20%, rgba(183, 255, 60, 0.16), transparent 34rem),
        linear-gradient(180deg, #061007 0%, #020403 100%);
    color: var(--contrast);
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* Welkomstpagina */
.welcome-shell {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 1rem;
}

.terminal-phone {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    width: min(100%, 430px);
    height: min(840px, calc(100vh - 2rem));
    min-height: min(840px, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid rgba(183, 255, 60, 0.5);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(183, 255, 60, 0.07), transparent 22rem),
        rgba(2, 8, 4, 0.96);
    box-shadow:
        0 0 0 1px rgba(183, 255, 60, 0.12),
        0 1.5rem 5rem rgba(0, 0, 0, 0.55),
        inset 0 0 4rem rgba(183, 255, 60, 0.07);
}

.terminal-phone::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(183, 255, 60, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 255, 60, 0.04) 1px, transparent 1px);
    background-size: 100% 4px, 28px 100%;
    mix-blend-mode: screen;
    opacity: 0.62;
}

.terminal-bar,
.system-readout,
.chat-window,
.choice-panel,
.terminal-actions {
    position: relative;
    z-index: 1;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border-bottom: 1px solid var(--line);
    color: rgba(183, 255, 60, 0.74);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.terminal-bar span {
    width: 0.58rem;
    height: 0.58rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.terminal-bar strong {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-scan {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(183, 255, 60, 0.12), transparent);
    animation: terminal-scan 5.5s linear infinite;
}

.system-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.system-readout p {
    min-width: 0;
    margin: 0;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(183, 255, 60, 0.28);
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

.chat-window {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
    padding: 1rem 0.85rem 1.25rem;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.message {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 91%;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(183, 255, 60, 0.36);
    background: rgba(183, 255, 60, 0.08);
    color: #dcff9b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.message p {
    margin: 0;
}

.message-story {
    display: grid;
    width: 100%;
    max-width: 100%;
    padding: 0.85rem;
    overflow: hidden;
    border-color: rgba(183, 255, 60, 0.5);
    background: rgba(183, 255, 60, 0.06);
}

.story-frame {
    margin: 0;
    padding: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(183, 255, 60, 0.24);
    background: rgba(0, 0, 0, 0.28);
    color: var(--contrast);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: pre-wrap;
}

.story-frame-fluid {
    min-height: 14rem;
    font-size: 0.72rem;
    line-height: 1.12;
}

.message-bot {
    align-self: flex-start;
    box-shadow: 0 0 1.5rem rgba(183, 255, 60, 0.08);
}

.message-user {
    align-self: flex-end;
    background: var(--contrast);
    color: #071006;
}

.message-intro {
    min-height: 4.35rem;
    margin-top: auto;
}

.typing-line {
    display: inline-block;
    overflow-wrap: anywhere;
}

.typing-line::after {
    content: "";
    display: inline-block;
    width: 0.52ch;
    height: 1em;
    margin-left: 0.12rem;
    background: currentColor;
    vertical-align: -0.13em;
    animation: cursor-blink 0.8s step-end infinite;
}

.typing-line.is-complete::after {
    display: none;
}

.skip-intro {
    align-self: flex-end;
    min-height: 1.8rem;
    margin-top: -0.35rem;
    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(183, 255, 60, 0.24);
    border-radius: 999px;
    background: transparent;
    color: rgba(183, 255, 60, 0.52);
    font: inherit;
    font-size: 0.64rem;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.skip-intro:hover,
.skip-intro:focus-visible {
    outline: 0;
    border-color: rgba(183, 255, 60, 0.7);
    color: var(--contrast);
}

.skip-intro.is-hidden {
    pointer-events: none;
    opacity: 0;
}

.choice-panel {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border-top: 1px solid var(--line);
}

.choice-panel-primary {
    opacity: 0;
    transform: translateY(0.6rem);
    transition: opacity 400ms ease, transform 400ms ease;
}

.choice-panel-primary.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.choice-panel button,
.choice-panel a,
.terminal-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.05rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(183, 255, 60, 0.55);
    border-radius: 6px;
    background: rgba(183, 255, 60, 0.08);
    color: var(--contrast);
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.choice-panel button::before,
.choice-panel a::before {
    content: ">";
    margin-right: 0.28rem;
}

.choice-panel button:hover,
.choice-panel button:focus-visible,
.choice-panel a:hover,
.choice-panel a:focus-visible,
.terminal-actions a:hover,
.terminal-actions a:focus-visible {
    outline: 0;
    background: var(--contrast);
    color: #071006;
}

.choice-panel button:disabled {
    cursor: default;
    opacity: 0.42;
}

.choice-panel-secondary {
    grid-template-columns: 1fr;
}

.terminal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 0 0.85rem 0.85rem;
}

.terminal-actions a {
    min-height: 2.75rem;
    border-color: rgba(183, 255, 60, 0.28);
    background: transparent;
    color: var(--muted);
}

@keyframes cursor-blink {
    50% {
        opacity: 0;
    }
}

@keyframes terminal-scan {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(100%);
    }
}

.site-header,
main,
.site-footer {
    width: min(calc(100% - (var(--page-padding-x) * 2)), var(--wide));
    margin: 0 auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(4rem, 10vw, 7rem);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-weight: 400;
}

.brand img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.site-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    font-size: 0.96rem;
}

.site-nav a {
    text-decoration: none;
}

.nav-menu {
    position: relative;
}

.nav-menu summary {
    cursor: pointer;
    list-style: none;
}

.nav-menu summary::-webkit-details-marker {
    display: none;
}

.nav-menu summary::after {
    content: " ↓";
}

.nav-menu[open] summary::after {
    content: " ↑";
}

.nav-menu div {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 10;
    display: grid;
    gap: 0.75rem;
    min-width: 15rem;
    padding: 1rem;
    border: 1px solid var(--line);
    background: var(--base);
    box-shadow: 0 1rem 2rem rgba(37, 0, 255, 0.08);
}

.site-nav a:hover,
.text-link:hover,
.nav-menu summary:hover {
    text-decoration: underline;
}

.hero,
.page-title,
.content,
.stats,
.final-cta {
    margin-left: auto;
    margin-right: auto;
}

.hero {
    width: min(100%, var(--wide));
    margin-bottom: clamp(3rem, 8vw, 6rem);
}

.hero h1,
.hero h2 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 4rem);
    line-height: 1.08;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.page-title {
    width: min(100%, var(--content));
    margin-bottom: clamp(3rem, 8vw, 5rem);
}

.page-title h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 1;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.page-title h2,
.page-title p {
    margin-top: 2rem;
}

.stats {
    width: min(100%, var(--wide));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vw, 5rem);
    margin-bottom: clamp(4rem, 9vw, 7rem);
}

.stats div {
    border-top: 2px solid var(--contrast);
    padding-top: 1.5rem;
}

.stats strong {
    display: block;
    font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: 1;
    font-weight: 400;
}

.stats span,
.stats small {
    display: block;
}

.stats small,
.kicker {
    color: var(--muted);
}

.content {
    width: min(100%, var(--wide));
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    border-top: 1px solid var(--line);
}

.content.narrow {
    width: min(100%, var(--content));
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
}

.two-column > .text-link {
    grid-column: 2;
}

h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.2;
    font-weight: 400;
}

p {
    margin: 0 0 1.5rem;
}

ul {
    margin: 0;
    padding-left: 1.25rem;
}

li + li {
    margin-top: 1rem;
}

blockquote {
    margin: 2rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--contrast);
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    line-height: 1.3;
}

cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-style: normal;
}

.text-link {
    display: inline-block;
    margin-top: 0.5rem;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--contrast);
    background: var(--contrast);
    color: var(--base);
    text-decoration: none;
}

.buttons a:hover {
    background: transparent;
    color: var(--contrast);
}

.auth-form {
    display: grid;
    gap: 1.25rem;
}

.auth-form label {
    display: grid;
    gap: 0.5rem;
}

.auth-form .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.auth-form .checkbox-label input {
    width: 1.1rem;
    min-height: 1.1rem;
    margin-top: 0.25rem;
}

.auth-form input {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--contrast);
    border-radius: 0;
    background: transparent;
    color: var(--contrast);
    font: inherit;
}

.auth-form button {
    width: fit-content;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--contrast);
    border-radius: 0;
    background: var(--contrast);
    color: var(--base);
    font: inherit;
    cursor: pointer;
}

.auth-form button:hover {
    background: transparent;
    color: var(--contrast);
}

.notice {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 2px solid var(--contrast);
}

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

.legal-content h2:not(:first-child) {
    margin-top: 3rem;
}

.final-cta {
    width: min(100%, var(--content));
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    text-align: center;
    border-top: 1px solid var(--line);
}

.final-cta .buttons {
    justify-content: center;
}

.site-footer {
    display: grid;
    gap: 0.45rem;
    padding-top: clamp(3rem, 7vw, 5rem);
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.footer-brand {
    color: var(--contrast);
}

.site-footer p {
    margin: 0;
}

/* Rijst-schaakbord */
.rice-chessboard {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.rice-chessboard__intro p:last-child {
    margin-bottom: 0;
}

.rice-chessboard__board-wrap {
    display: grid;
    gap: 1.5rem;
}

.rice-chessboard__board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    aspect-ratio: 1;
    border: 2px solid var(--contrast);
}

.rice-chessboard__cell {
    display: grid;
    place-items: center;
    min-width: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: rgba(37, 0, 255, 0.34);
    font-size: clamp(0.62rem, 1.6vw, 0.82rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.rice-chessboard__cell:nth-child(8n) {
    border-right: 0;
}

.rice-chessboard__cell:nth-last-child(-n + 8) {
    border-bottom: 0;
}

.rice-chessboard__cell:nth-child(16n + 1),
.rice-chessboard__cell:nth-child(16n + 3),
.rice-chessboard__cell:nth-child(16n + 5),
.rice-chessboard__cell:nth-child(16n + 7),
.rice-chessboard__cell:nth-child(16n + 10),
.rice-chessboard__cell:nth-child(16n + 12),
.rice-chessboard__cell:nth-child(16n + 14),
.rice-chessboard__cell:nth-child(16n + 16) {
    background: rgba(37, 0, 255, 0.05);
}

.rice-chessboard__cell.is-past {
    background: rgba(37, 0, 255, 0.14);
    color: rgba(37, 0, 255, 0.58);
}

.rice-chessboard__cell.is-active {
    position: relative;
    z-index: 1;
    background: var(--contrast);
    color: var(--base);
    box-shadow: 0 0 0 2px var(--contrast);
}

.rice-chessboard__panel {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 2px solid var(--contrast);
}

.rice-chessboard__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(12rem, 24vw, 18rem);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.rice-chessboard__grain {
    position: absolute;
    width: 0.42rem;
    height: 1rem;
    border: 1px solid var(--contrast);
    border-radius: 999px;
    background: var(--base);
    transform: translate(calc(var(--grain-x) * 0.72rem), calc(var(--grain-y) * 0.62rem)) rotate(var(--grain-rotation));
}

.rice-chessboard__visual.is-heap::before,
.rice-chessboard__visual.is-mass::before {
    content: "";
    display: block;
    width: calc(42% + (var(--heap-scale, var(--mass-scale, 0)) * 42%));
    max-width: 92%;
    aspect-ratio: 1.75 / 1;
    border: 2px solid var(--contrast);
    border-radius: 50% 50% 12% 12% / 60% 60% 18% 18%;
    background:
        radial-gradient(circle at 24% 32%, var(--contrast) 0 2px, transparent 2.5px),
        radial-gradient(circle at 58% 42%, var(--contrast) 0 1.5px, transparent 2px),
        radial-gradient(circle at 72% 28%, var(--contrast) 0 2px, transparent 2.5px),
        linear-gradient(to top, rgba(37, 0, 255, 0.18), rgba(37, 0, 255, 0.04));
}

.rice-chessboard__visual.is-mass::before {
    width: calc(62% + (var(--mass-scale, 0) * 32%));
    aspect-ratio: 1.1 / 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 52%, rgba(37, 0, 255, 0.2) 0 6px, rgba(37, 0, 255, 0.04) 6px 13px),
        rgba(37, 0, 255, 0.08);
}

.rice-chessboard__visual.is-mass::after {
    content: "te groot om letterlijk te tonen";
    position: absolute;
    bottom: 1rem;
    left: 50%;
    width: min(90%, 16rem);
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
}

.rice-chessboard__facts dl {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.rice-chessboard__facts dl div {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.rice-chessboard__facts dt {
    color: var(--muted);
    font-size: 0.82rem;
}

.rice-chessboard__facts dd {
    margin: 0.35rem 0 0;
    font-size: clamp(1.35rem, 3vw, 2.3rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.rice-chessboard__closing {
    color: var(--muted);
}

.rice-chessboard__closing:last-child {
    margin-bottom: 0;
}

/* Kelly-spel */
.kelly-game {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.kelly-game__intro p:last-child {
    margin-bottom: 0;
}

.kelly-game__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 2rem 0;
    padding: 0;
    border: 0;
}

.kelly-game__choices legend {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.kelly-game__choices label {
    display: grid;
    min-width: 0;
    cursor: pointer;
}

.kelly-game__choices input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kelly-game__choices span {
    display: grid;
    gap: 0.2rem;
    min-height: 5rem;
    padding: 1rem;
    border: 2px solid var(--contrast);
    background: transparent;
    color: var(--contrast);
    line-height: 1.25;
}

.kelly-game__choices small {
    color: var(--muted);
    font-size: 0.8rem;
}

.kelly-game__choices input:checked + span {
    background: var(--contrast);
    color: var(--base);
}

.kelly-game__choices input:checked + span small {
    color: rgba(243, 243, 241, 0.7);
}

.kelly-game__choices input:focus-visible + span {
    outline: 2px solid var(--contrast);
    outline-offset: 4px;
}

.kelly-game__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.kelly-game__actions button {
    min-height: 48px;
    border-radius: 0;
    color: var(--contrast);
    font: inherit;
    cursor: pointer;
}

.kelly-game__primary {
    padding: 0.7rem 1.25rem;
    border: 2px solid var(--contrast);
    background: var(--contrast);
    color: var(--base) !important;
}

.kelly-game__primary:hover {
    background: transparent;
    color: var(--contrast) !important;
}

.kelly-game__link {
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
}

.kelly-game__actions button:disabled {
    cursor: default;
    opacity: 0.45;
}

.kelly-game__help {
    margin-top: 1rem;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.16);
}

.kelly-game__help summary {
    min-height: 2.4rem;
    padding: 0.58rem 0.72rem;
    color: var(--contrast);
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
}

.kelly-game__help summary::-webkit-details-marker {
    display: none;
}

.kelly-game__help summary::before {
    content: "> ";
}

.kelly-game__help p {
    margin: 0;
    padding: 0 0.72rem 0.72rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.kelly-game__help p + p {
    padding-top: 0;
}

.kelly-game__stage {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 2px solid var(--contrast);
}

.kelly-game__status {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    min-height: 5.3rem;
}

.kelly-game__status p {
    margin: 0;
}

.kelly-game__status strong {
    display: block;
    min-height: 2.45em;
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.1;
}

.kelly-game__dice {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.42rem;
    width: min(8rem, 42vw);
    aspect-ratio: 1;
    margin: 0 0 1.5rem;
    padding: 1rem;
    border: 2px solid var(--contrast);
    background: rgba(37, 0, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--line);
}

.kelly-game__dice::after {
    content: attr(data-roll);
    position: absolute;
    right: 0.45rem;
    bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.kelly-game__dice.is-winning {
    box-shadow:
        inset 0 0 0 1px var(--line),
        0 0 1.25rem rgba(183, 255, 60, 0.18);
}

.kelly-game__dice.is-losing {
    opacity: 0.78;
}

.kelly-game__pip {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.14;
}

.kelly-game__pip.is-active {
    background: var(--contrast);
    opacity: 1;
}

.kelly-game__result {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 1.4rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.2);
}

.kelly-game__result span {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.kelly-game__result strong {
    color: var(--contrast);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 400;
    line-height: 1.2;
}

.kelly-game__track {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.kelly-game__track-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.kelly-game__track-row > span {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.2;
}

.kelly-game__track-row.is-selected > span {
    color: var(--contrast);
}

.kelly-game__track-line {
    position: relative;
    height: 3.4rem;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.kelly-game__track-line i {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--contrast);
    border-radius: 50%;
    background: var(--base);
    transform: translate(-50%, 50%);
}

.kelly-game__track-row.is-selected .kelly-game__track-line i {
    background: var(--contrast);
}

.kelly-game__track-line i.is-zero {
    width: 0.62rem;
    height: 0.62rem;
    background: transparent;
}

.kelly-game__strategies {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.kelly-game__card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.kelly-game__card.is-selected {
    border-color: var(--contrast);
    box-shadow: inset 0 0 0 1px var(--contrast);
}

.kelly-game__card.is-leader {
    background: rgba(183, 255, 60, 0.08);
}

.kelly-game__rank {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 400;
}

.kelly-game__card.is-out {
    color: var(--muted);
}

.kelly-game__card-head {
    display: grid;
    gap: 0.2rem;
    min-height: 3.4rem;
}

.kelly-game__card-head span {
    line-height: 1.2;
}

.kelly-game__card-head small,
.kelly-game__card p {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.kelly-game__card strong {
    display: block;
    font-size: clamp(1.45rem, 3vw, 2.7rem);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.kelly-game__meter {
    height: 0.45rem;
    border: 1px solid var(--contrast);
}

.kelly-game__meter span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--contrast);
    transition: width 180ms ease;
}

.kelly-game__card p {
    margin: 0;
}

.kelly-game__card.is-out p {
    color: var(--contrast);
}

.kelly-game__card.is-out .kelly-game__meter span {
    display: none;
}

.kelly-game__explanation {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.kelly-game__explanation p:first-child {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.35;
}

.kelly-game__explanation p:nth-child(2) {
    color: var(--muted);
}

.kelly-game__explanation p:last-of-type {
    margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .rice-chessboard__cell,
    .kelly-game__card,
    .kelly-game__meter span,
    .terminal-scan,
    .typing-line,
    .choice-panel-primary {
        animation: none;
        transition: none;
    }
}

@media (max-width: 840px) {
    :root {
        --page-padding-x: clamp(1.75rem, 7vw, 2.25rem);
        --page-padding-y: 1.75rem;
    }

    .site-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: clamp(3rem, 10vw, 5rem);
    }

    .site-nav {
        justify-content: flex-start;
        width: 100%;
    }

    .hero h1,
    .hero h2 {
        font-size: clamp(1.85rem, 8vw, 2.75rem);
        line-height: 1.1;
    }

    .nav-menu div {
        left: 0;
        right: auto;
    }

    .stats,
    .two-column,
    .simulator,
    .generation-section,
    .rice-chessboard,
    .kelly-game {
        grid-template-columns: 1fr;
    }

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

    .simulator-controls {
        border-right: 0;
        border-bottom: 2px solid var(--contrast);
    }

    .reset-button {
        margin-top: 2rem;
    }

    .two-column > .text-link {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    :root {
        --page-padding-x: 2rem;
        --page-padding-y: 1.5rem;
    }

    body {
        min-width: 320px;
    }

    .brand span {
        max-width: 13rem;
        line-height: 1.25;
    }

    .simulator-intro h1 {
        font-size: clamp(2.7rem, 15vw, 4.4rem);
    }

    .simulator {
        margin-right: -1rem;
        margin-left: -1rem;
    }

    .simulator-form,
    .result-cards {
        grid-template-columns: 1fr;
    }

    .rice-chessboard {
        gap: 2rem;
    }

    .kelly-game__choices,
    .kelly-game__strategies {
        grid-template-columns: 1fr;
    }

    .kelly-game__track-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .kelly-game__track-line {
        height: 3rem;
    }

    .slider-heading {
        grid-template-columns: minmax(0, 1fr) 7.75rem;
    }

    .slider-heading output {
        width: 7.75rem;
        font-size: 0.95rem;
    }

    .chart-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .generation-list article {
        grid-template-columns: 1fr;
    }

    .generation-list small,
    .generation-list p {
        text-align: left;
    }
}

/* Terminal-stijl voor interactieve modules */
body.terminal-page {
    --base: #050806;
    --contrast: #b7ff3c;
    --muted: rgba(183, 255, 60, 0.68);
    --line: rgba(183, 255, 60, 0.2);
    --page-padding-x: clamp(1rem, 4vw, 2.4rem);
    --page-padding-y: clamp(1rem, 3vw, 1.6rem);

    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -18%, rgba(183, 255, 60, 0.15), transparent 34rem),
        linear-gradient(180deg, #061007 0%, #020403 100%);
    color: var(--contrast);
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body.terminal-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(183, 255, 60, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 255, 60, 0.035) 1px, transparent 1px);
    background-size: 100% 4px, 28px 100%;
}

.terminal-page .site-header,
.terminal-page main,
.terminal-page .site-footer {
    width: min(calc(100% - (var(--page-padding-x) * 2)), 1180px);
}

.terminal-page .site-header {
    margin-bottom: clamp(2rem, 6vw, 4rem);
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(183, 255, 60, 0.28);
    border-radius: 8px;
    background: rgba(2, 8, 4, 0.72);
    box-shadow: inset 0 0 2rem rgba(183, 255, 60, 0.04);
}

.terminal-page .brand img {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(183, 255, 60, 0.5);
    filter: grayscale(1) contrast(1.25);
}

.terminal-page .brand,
.terminal-page .site-nav {
    font-size: 0.82rem;
    text-transform: uppercase;
}

.terminal-page .nav-menu div {
    border-color: rgba(183, 255, 60, 0.28);
    border-radius: 8px;
    background: #061007;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42);
}

.terminal-page .simulator-intro,
.terminal-page .page-title {
    position: relative;
    width: min(100%, 980px);
    margin-bottom: clamp(2rem, 6vw, 4rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    overflow: hidden;
    border: 1px solid rgba(183, 255, 60, 0.36);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(183, 255, 60, 0.08), transparent 70%),
        rgba(2, 8, 4, 0.78);
    box-shadow: inset 0 0 3rem rgba(183, 255, 60, 0.05);
}

.terminal-page .simulator-intro::before,
.terminal-page .page-title::before {
    content: "> interactive module";
    display: block;
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

/* Chat-interface voor alle vervolgpagina's */
.chat-page {
    --chat-max: 860px;
}

.chat-page .site-header {
    margin-bottom: 1rem;
}

.chat-page main {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: var(--chat-max);
}

.chat-page main::before {
    content: "lijn: ok        modus: chat        status: live";
    display: block;
    padding: 0.72rem 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(183, 255, 60, 0.22);
    border-radius: 8px;
    background: rgba(2, 8, 4, 0.62);
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-page .page-title,
.chat-page .simulator-intro,
.chat-page .content,
.chat-page .final-cta {
    width: min(100%, var(--chat-max));
    margin: 0;
}

.chat-page .page-title,
.chat-page .simulator-intro,
.chat-page .content.narrow,
.chat-page .legal-content,
.chat-page .final-cta {
    max-width: min(100%, 720px);
}

.chat-page .page-title,
.chat-page .simulator-intro,
.chat-page .content {
    position: relative;
    padding: clamp(0.9rem, 3vw, 1.35rem);
    border: 1px solid rgba(183, 255, 60, 0.34);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.055);
    color: #dcff9b;
    box-shadow: 0 0 1.35rem rgba(183, 255, 60, 0.055);
}

.chat-page .page-title,
.chat-page .simulator-intro {
    align-self: flex-start;
}

.chat-page .content {
    align-self: flex-start;
}

.chat-page .content:nth-of-type(even),
.chat-page .final-cta {
    align-self: flex-end;
}

.chat-page .page-title::before,
.chat-page .simulator-intro::before,
.chat-page .content::before {
    content: "> stichting";
    display: block;
    margin-bottom: 0.85rem;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.chat-page .page-title::before,
.chat-page .simulator-intro::before {
    content: "> gesprek gestart";
}

.chat-page .simulator::before,
.chat-page .rice-chessboard::before,
.chat-page .kelly-game::before {
    content: "> interactieve module";
    display: block;
    grid-column: 1 / -1;
    padding: 0.85rem 0.95rem 0;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.chat-page h1,
.chat-page h2,
.chat-page h3,
.chat-page p,
.chat-page ul,
.chat-page ol,
.chat-page blockquote,
.chat-page dl {
    margin-top: 0;
}

.chat-page h1 {
    font-size: clamp(1.7rem, 7vw, 3.4rem);
    line-height: 1.05;
}

.chat-page h2 {
    font-size: clamp(1.05rem, 4vw, 1.65rem);
    line-height: 1.15;
}

.chat-page .page-title h2,
.chat-page .page-title p,
.chat-page .simulator-intro p,
.chat-page .content p,
.chat-page .content li {
    color: #dcff9b;
}

.chat-page ul,
.chat-page ol {
    display: grid;
    gap: 0.55rem;
    padding-left: 1.1rem;
}

.chat-page li::marker {
    color: var(--contrast);
}

.chat-page blockquote {
    padding: 0.85rem;
    border-left: 2px solid var(--contrast);
    background: rgba(0, 0, 0, 0.18);
    color: #dcff9b;
}

.chat-page blockquote cite {
    display: block;
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.chat-page .buttons,
.chat-page .final-cta .buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.chat-page .buttons a,
.chat-page .auth-form button,
.chat-page .final-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(183, 255, 60, 0.55);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.08);
    color: var(--contrast);
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.chat-page .buttons a::before,
.chat-page .final-cta a::before {
    content: ">";
    margin-right: 0.28rem;
}

.chat-page .buttons a:hover,
.chat-page .buttons a:focus-visible,
.chat-page .auth-form button:hover,
.chat-page .auth-form button:focus-visible,
.chat-page .final-cta a:hover,
.chat-page .final-cta a:focus-visible {
    outline: 0;
    background: var(--contrast);
    color: #071006;
}

.chat-page .final-cta {
    padding: 0.85rem;
    border: 1px solid rgba(183, 255, 60, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.chat-page .final-cta h2 {
    font-size: 0.86rem;
    color: var(--muted);
    text-transform: uppercase;
}

.chat-page .auth-form {
    display: grid;
    gap: 0.85rem;
}

.chat-page .auth-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.chat-page .auth-form input[type="text"],
.chat-page .auth-form input[type="email"],
.chat-page .auth-form input[type="password"] {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(183, 255, 60, 0.34);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.26);
    color: var(--contrast);
    font: inherit;
}

.chat-page .checkbox-label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.chat-page .notice {
    padding: 0.8rem;
    border: 1px solid rgba(183, 255, 60, 0.34);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.08);
}

.chat-page .simulator,
.chat-page .rice-chessboard,
.chat-page .kelly-game {
    width: 100%;
    max-width: var(--chat-max);
    margin: 0;
}

.terminal-page .simulator-intro h1,
.terminal-page .page-title h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 8vw, 5rem);
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 0 1.2rem rgba(183, 255, 60, 0.18);
}

.terminal-page .simulator-intro > p:last-child,
.terminal-page .page-title > p:last-child {
    max-width: 720px;
    color: #dcff9b;
    font-size: clamp(0.95rem, 2vw, 1.18rem);
}

.terminal-page .kicker {
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.terminal-page .content {
    border-top-color: rgba(183, 255, 60, 0.22);
}

.terminal-page .simulator,
.terminal-page .kelly-game {
    overflow: hidden;
    border: 1px solid rgba(183, 255, 60, 0.48);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(183, 255, 60, 0.05), transparent 28rem),
        rgba(2, 8, 4, 0.86);
    box-shadow:
        0 1.25rem 4rem rgba(0, 0, 0, 0.46),
        inset 0 0 3rem rgba(183, 255, 60, 0.05);
}

.terminal-page .simulator-controls,
.terminal-page .kelly-game__intro {
    border-right: 1px solid rgba(183, 255, 60, 0.24);
    background: rgba(0, 0, 0, 0.18);
}

.terminal-page .simulator-results,
.terminal-page .kelly-game__stage {
    border: 0;
    background:
        radial-gradient(circle at 50% 0, rgba(183, 255, 60, 0.16), transparent 24rem),
        rgba(183, 255, 60, 0.045);
    color: #dcff9b;
}

.terminal-page .simulator-controls h2,
.terminal-page .kelly-game__intro h2 {
    color: var(--contrast);
    font-size: clamp(1.55rem, 4vw, 2.6rem);
}

.terminal-page .slider-field {
    padding: 0.85rem;
    border: 1px solid rgba(183, 255, 60, 0.18);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.045);
}

.terminal-page .slider-heading output {
    color: #dcff9b;
}

.terminal-page .slider-field input[type="range"] {
    accent-color: var(--contrast);
}

.terminal-page .slider-field input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(183, 255, 60, 0.72);
}

.terminal-page .slider-field input[type="range"]::-webkit-slider-thumb {
    border-color: var(--contrast);
    background: #061007;
    box-shadow: 0 0 1rem rgba(183, 255, 60, 0.34);
}

.terminal-page .slider-field input[type="range"]::-moz-range-track {
    background: rgba(183, 255, 60, 0.72);
}

.terminal-page .slider-field input[type="range"]::-moz-range-thumb {
    border-color: var(--contrast);
    background: #061007;
    box-shadow: 0 0 1rem rgba(183, 255, 60, 0.34);
}

.terminal-page .reset-button,
.terminal-page .kelly-game__link,
.terminal-page .text-link {
    color: var(--contrast);
}

.terminal-page .result-headline strong {
    color: var(--contrast);
    letter-spacing: 0;
    text-shadow: 0 0 1.4rem rgba(183, 255, 60, 0.18);
}

.terminal-page .result-headline > p:last-child,
.terminal-page .result-cards small {
    color: var(--muted);
}

.terminal-page .chart-card {
    padding: 1rem;
    border: 1px solid rgba(183, 255, 60, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
}

.terminal-page #chart-grid line {
    stroke: rgba(183, 255, 60, 0.16);
}

.terminal-page #chart-labels text {
    fill: rgba(220, 255, 155, 0.72);
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.terminal-page .fund-line {
    stroke: var(--contrast);
    filter: drop-shadow(0 0 0.35rem rgba(183, 255, 60, 0.4));
}

.terminal-page .fund-area {
    fill: rgba(183, 255, 60, 0.12);
}

.terminal-page .contribution-line {
    stroke: rgba(220, 255, 155, 0.62);
}

.terminal-page .contribution-area {
    fill: rgba(220, 255, 155, 0.04);
}

.terminal-page .chart-legend i {
    border-color: var(--contrast);
    background: var(--contrast);
}

.terminal-page .chart-legend span:last-child i {
    background: transparent;
}

.terminal-page .result-cards article,
.terminal-page .generation-list article,
.terminal-page .kelly-game__card {
    padding: 1rem;
    border: 1px solid rgba(183, 255, 60, 0.18);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.045);
}

.terminal-page .result-cards strong,
.terminal-page .generation-list strong,
.terminal-page .kelly-game__card strong,
.terminal-page .kelly-game__status strong {
    color: var(--contrast);
    letter-spacing: 0;
    text-shadow: 0 0 1rem rgba(183, 255, 60, 0.15);
}

.terminal-page .generation-section {
    padding: clamp(2rem, 6vw, 4rem) 0;
}

.terminal-page .generation-list {
    display: grid;
    gap: 0.85rem;
}

.terminal-page .generation-list article {
    grid-template-columns: 1fr auto;
}

.terminal-page .simulator-note {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid rgba(183, 255, 60, 0.28);
    border-radius: 8px;
    background: rgba(2, 8, 4, 0.72);
}

.terminal-page .kelly-game {
    padding: 0;
}

.terminal-page .kelly-game__choices span,
.terminal-page .kelly-game__primary {
    border-color: rgba(183, 255, 60, 0.55);
    border-radius: 8px;
    background: rgba(183, 255, 60, 0.08);
    color: var(--contrast) !important;
}

.terminal-page .kelly-game__choices input:checked + span,
.terminal-page .kelly-game__primary:hover {
    background: var(--contrast);
    color: #071006 !important;
}

.terminal-page .kelly-game__choices input:checked + span small {
    color: rgba(7, 16, 6, 0.72);
}

.terminal-page .kelly-game__track-line {
    border-color: rgba(183, 255, 60, 0.18);
}

.terminal-page .kelly-game__dice {
    border-color: rgba(183, 255, 60, 0.48);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.26);
}

.terminal-page .kelly-game__track-line i {
    border-color: var(--contrast);
    background: #061007;
    box-shadow: 0 0 0.65rem rgba(183, 255, 60, 0.28);
}

.terminal-page .kelly-game__track-row.is-selected .kelly-game__track-line i,
.terminal-page .kelly-game__meter span,
.terminal-page .kelly-game__pip.is-active {
    background: var(--contrast);
}

.terminal-page .kelly-game__meter {
    border-color: rgba(183, 255, 60, 0.4);
}

.terminal-page .kelly-game__explanation {
    border-top-color: rgba(183, 255, 60, 0.22);
}

.terminal-page .kelly-game__explanation p:nth-child(2),
.terminal-page .kelly-game__card-head small,
.terminal-page .kelly-game__card p {
    color: var(--muted);
}

.terminal-page .site-footer {
    border-top-color: rgba(183, 255, 60, 0.22);
}

.terminal-kelly-page .kelly-game__dice.is-rolling {
    animation: dice-pop 260ms ease-out;
}

@keyframes dice-pop {
    0% {
        transform: scale(0.96) rotate(-2deg);
    }

    55% {
        transform: scale(1.08) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@media (max-width: 640px) {
    body.terminal-kelly-page {
        --page-padding-x: 0.45rem;
        --page-padding-y: 0.45rem;
        height: 100svh;
        padding: var(--page-padding-y) 0;
        overflow: hidden;
    }

    .terminal-kelly-page .site-header,
    .terminal-kelly-page .site-footer,
    .terminal-kelly-page main::before,
    .terminal-kelly-page .page-title,
    .terminal-kelly-page .kelly-game::before,
    .terminal-kelly-page .kelly-game__track,
    .terminal-kelly-page .kelly-game__explanation {
        display: none;
    }

    .terminal-kelly-page main {
        width: min(calc(100% - (var(--page-padding-x) * 2)), 430px);
        height: calc(100svh - (var(--page-padding-y) * 2));
        max-width: 430px;
        gap: 0;
    }

    .terminal-page.terminal-kelly-page .kelly-game {
        position: relative;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-radius: 8px;
    }

    .terminal-page.terminal-kelly-page .kelly-game__intro,
    .terminal-page.terminal-kelly-page .kelly-game__stage {
        min-height: 0;
        padding: 0.48rem;
        border: 0;
    }

    .terminal-page.terminal-kelly-page .kelly-game__intro {
        display: grid;
        gap: 0.26rem;
        position: relative;
        z-index: 4;
        border-bottom: 1px solid rgba(183, 255, 60, 0.22);
    }

    .terminal-page.terminal-kelly-page .kelly-game__intro h2 {
        margin: 0;
        font-size: 1.05rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__intro p {
        margin: 0;
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .terminal-page.terminal-kelly-page .kelly-game__intro .kicker {
        font-size: 0.52rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__choices {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.28rem;
        margin: 0.08rem 0;
    }

    .terminal-page.terminal-kelly-page .kelly-game__choices legend {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .terminal-page.terminal-kelly-page .kelly-game__choices span {
        min-height: 2.45rem;
        padding: 0.3rem 0.2rem;
        place-items: center;
        gap: 0.12rem;
        font-size: 0.56rem;
        text-align: center;
    }

    .terminal-page.terminal-kelly-page .kelly-game__choices small {
        font-size: 0.54rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__actions {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 0.28rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__actions button {
        min-height: 2.05rem;
        padding: 0.32rem 0.25rem;
        font-size: 0.56rem;
        line-height: 1.12;
    }

    .terminal-page.terminal-kelly-page .kelly-game__help {
        margin-top: 0;
        border-color: rgba(183, 255, 60, 0.22);
        border-radius: 8px;
        background: rgba(183, 255, 60, 0.045);
    }

    .terminal-page.terminal-kelly-page .kelly-game__help[open] {
        position: absolute;
        left: 0.55rem;
        right: 0.55rem;
        top: 10.8rem;
        z-index: 8;
        background: rgba(2, 8, 4, 0.96);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.52);
    }

    .terminal-page.terminal-kelly-page .kelly-game__help summary {
        min-height: 1.85rem;
        padding: 0.38rem 0.48rem;
        font-size: 0.58rem;
        line-height: 1.1;
    }

    .terminal-page.terminal-kelly-page .kelly-game__help p {
        padding: 0 0.48rem 0.48rem;
        font-size: 0.56rem;
        line-height: 1.28;
    }

    .terminal-page.terminal-kelly-page .kelly-game__stage {
        display: grid;
        grid-template-rows: 2.95rem auto auto minmax(0, 1fr);
        gap: 0.18rem;
        overflow: hidden;
    }

    .terminal-page.terminal-kelly-page .kelly-game__status {
        gap: 0.2rem;
        margin: 0;
        min-height: 0;
        height: 2.95rem;
        overflow: hidden;
    }

    .terminal-page.terminal-kelly-page .kelly-game__status .kicker {
        font-size: 0.54rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__status strong {
        min-height: 1.7rem;
        font-size: clamp(0.86rem, 4.3vw, 1.08rem);
        line-height: 1.08;
        overflow: hidden;
    }

    .terminal-page.terminal-kelly-page .kelly-game__dice {
        justify-self: center;
        width: min(5.1rem, 22svh, 29vw);
        gap: 0.2rem;
        margin: 0;
        padding: 0.54rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__dice::after {
        font-size: 0.58rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__result {
        gap: 0.12rem;
        height: 2.45rem;
        margin: 0;
        padding: 0.34rem 0.45rem;
        overflow: hidden;
        border-color: rgba(183, 255, 60, 0.22);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.2);
    }

    .terminal-page.terminal-kelly-page .kelly-game__result span {
        font-size: 0.5rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__result strong {
        display: block;
        min-height: 1.18rem;
        overflow: hidden;
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .terminal-page.terminal-kelly-page .kelly-game__strategies {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
        min-height: 0;
        overflow: hidden;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card {
        grid-template-rows: auto auto auto 1fr auto;
        gap: 0.12rem;
        min-height: 0;
        padding: 0.34rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__rank {
        top: 0.35rem;
        right: 0.4rem;
        font-size: 0.52rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card-head {
        display: flex;
        justify-content: space-between;
        gap: 0.28rem;
        padding-right: 1.05rem;
        min-height: 0;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card-head span {
        font-size: 0.58rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card-head small,
    .terminal-page.terminal-kelly-page .kelly-game__card p {
        font-size: 0.52rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card strong {
        font-size: clamp(0.96rem, 5.6vw, 1.25rem);
    }

    .terminal-page.terminal-kelly-page .kelly-game__meter {
        height: 0.32rem;
    }

}

@media (max-width: 840px) {
    .terminal-page .site-header {
        gap: 1rem;
    }

    .terminal-page .simulator,
    .terminal-page .kelly-game {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }

    .terminal-page .simulator-controls,
    .terminal-page .kelly-game__intro {
        border-right: 0;
        border-bottom: 1px solid rgba(183, 255, 60, 0.24);
    }

    .terminal-page .simulator {
        margin-right: 0;
        margin-left: 0;
    }

    .terminal-page .nav-menu div {
        right: 0;
        left: auto;
        max-width: calc(100vw - 2rem);
    }
}

/* Eindoverride voor de chatapp-shell */
body.app-page {
    height: 100svh !important;
    overflow: hidden !important;
}

body.app-page .app-shell {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    margin: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 520px) {
    body.terminal-page {
        --page-padding-x: 0.55rem;
        --page-padding-y: 0.55rem;
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .terminal-page .site-header {
        align-items: stretch;
        margin-bottom: 0.65rem;
        padding: 0.45rem;
    }

    .terminal-page .brand {
        min-width: 0;
    }

    .terminal-page .brand img {
        width: 28px;
        height: 28px;
    }

    .terminal-page .brand span {
        max-width: 10rem;
        font-size: 0.64rem;
    }

    .terminal-page .site-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.25rem;
        width: 100%;
        font-size: 0.52rem;
    }

    .terminal-page .site-nav > a,
    .terminal-page .nav-menu summary {
        display: inline-flex;
        justify-content: center;
        min-height: 1.65rem;
        padding: 0.25rem 0.2rem;
        border: 1px solid rgba(183, 255, 60, 0.22);
        border-radius: 6px;
        text-align: center;
    }

    .terminal-page .nav-menu {
        display: grid;
    }

    .terminal-page .nav-menu div {
        right: 0;
        left: auto;
        width: min(18rem, calc(100vw - 1.6rem));
    }

    .terminal-page .simulator-intro,
    .terminal-page .page-title {
        margin-bottom: 0.5rem;
        padding: 0.55rem;
    }

    .terminal-page .simulator-intro::before,
    .terminal-page .page-title::before {
        display: none;
    }

    .terminal-page .simulator-intro h1,
    .terminal-page .page-title h1 {
        margin-bottom: 0.4rem;
        font-size: clamp(1.25rem, 7.2vw, 1.85rem);
        line-height: 1.06;
    }

    .terminal-page .simulator-intro > p:last-child,
    .terminal-page .page-title > p:last-child {
        font-size: 0.7rem;
        line-height: 1.32;
    }

    .terminal-page .simulator-intro,
    .terminal-page .page-title,
    .terminal-page .simulator,
    .terminal-page .kelly-game,
    .terminal-page .simulator-note {
        border-radius: 8px;
    }

    .terminal-page .simulator {
        margin-bottom: 1.25rem;
    }

    .terminal-page .simulator-controls,
    .terminal-page .simulator-results,
    .terminal-page .kelly-game__intro,
    .terminal-page .kelly-game__stage {
        padding: 0.55rem;
    }

    .terminal-page .simulator-controls h2,
    .terminal-page .kelly-game__intro h2 {
        font-size: 1rem;
        line-height: 1.1;
    }

    .terminal-page .simulator-controls .kicker,
    .terminal-page .kelly-game__intro .kicker,
    .terminal-page .kelly-game__status .kicker {
        font-size: 0.55rem;
    }

    .terminal-page .kelly-game__intro p {
        margin-bottom: 0.55rem;
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .terminal-page .simulator-form {
        gap: 0.36rem;
        margin-top: 0.45rem;
    }

    .terminal-page .slider-field {
        gap: 0.28rem;
        padding: 0.38rem;
        font-size: 0.62rem;
    }

    .terminal-page .slider-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.4rem;
        min-height: 0;
    }

    .terminal-page .slider-heading output {
        width: auto;
        text-align: right;
        font-size: 0.72rem;
    }

    .terminal-page .slider-field input[type="range"] {
        height: 24px;
    }

    .terminal-page .slider-limits {
        font-size: 0.58rem;
    }

    .terminal-page .reset-button {
        margin-top: 0.5rem;
        min-height: 1.8rem;
        font-size: 0.66rem;
    }

    .terminal-page .reset-button,
    .terminal-page .kelly-game__actions button {
        width: 100%;
    }

    .terminal-page .result-headline strong {
        font-size: clamp(1.45rem, 9vw, 2.25rem);
    }

    .terminal-page .result-headline > p:first-child,
    .terminal-page .result-headline > p:last-child {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .terminal-page .chart-card {
        margin: 0.65rem 0;
        padding: 0.45rem;
    }

    .terminal-page .chart-heading {
        gap: 0.45rem;
    }

    .terminal-page .chart-legend {
        display: grid;
        gap: 0.22rem;
        font-size: 0.58rem;
    }

    .terminal-page .fund-chart {
        min-height: 8rem;
    }

    .terminal-page .result-cards,
    .terminal-page .kelly-game__strategies {
        grid-template-columns: 1fr;
    }

    .terminal-page .result-cards article,
    .terminal-page .generation-list article,
    .terminal-page .kelly-game__card {
        padding: 0.55rem;
    }

    .terminal-page .result-cards,
    .terminal-page .generation-list,
    .terminal-page .kelly-game__strategies {
        gap: 0.45rem;
    }

    .terminal-page .result-cards strong {
        margin: 0.22rem 0;
        font-size: 1.05rem;
    }

    .terminal-page .result-cards span,
    .terminal-page .result-cards small {
        font-size: 0.64rem;
    }

    .terminal-page .generation-section {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1.2rem 0;
    }

    .terminal-page .generation-intro h2 {
        font-size: clamp(1.3rem, 8vw, 2rem);
        line-height: 1.05;
    }

    .terminal-page .generation-list article {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .terminal-page .generation-list small,
    .terminal-page .generation-list p {
        text-align: left;
    }

    .terminal-page .kelly-game__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
        margin: 0.6rem 0;
    }

    .terminal-page .kelly-game__choices span {
        min-height: 2.35rem;
        padding: 0.38rem 0.45rem;
        font-size: 0.68rem;
    }

    .terminal-page .kelly-game__choices legend,
    .terminal-page .kelly-game__choices small,
    .terminal-page .kelly-game__card-head small,
    .terminal-page .kelly-game__card p {
        font-size: 0.62rem;
    }

    .terminal-page .kelly-game__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .terminal-page .kelly-game__actions button {
        min-height: 2rem;
        padding: 0.34rem 0.45rem;
        font-size: 0.66rem;
    }

    .terminal-page .kelly-game__status {
        margin-bottom: 0.7rem;
    }

    .terminal-page .kelly-game__status strong {
        font-size: 1rem;
    }

    .terminal-page .kelly-game__dice {
        width: min(5.2rem, 32vw);
        gap: 0.26rem;
        margin-bottom: 0.7rem;
        padding: 0.62rem;
    }

    .terminal-page .kelly-game__dice::after {
        right: 0.32rem;
        bottom: 0.16rem;
        font-size: 0.58rem;
    }

    .terminal-page .kelly-game__track {
        gap: 0.42rem;
        margin-bottom: 0.75rem;
    }

    .terminal-page .kelly-game__track-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .terminal-page .kelly-game__track-line {
        height: 1.65rem;
    }

    .terminal-page .kelly-game__card {
        gap: 0.42rem;
    }

    .terminal-page .kelly-game__card-head {
        min-height: 0;
    }

    .terminal-page .kelly-game__card strong {
        font-size: 1.18rem;
    }

    .terminal-page .kelly-game__explanation {
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        font-size: 0.72rem;
    }

    .terminal-page .kelly-game__explanation p:first-child {
        font-size: 0.9rem;
    }

    .chat-page main {
        gap: 0.55rem;
    }

    .chat-page main::before {
        padding: 0.52rem 0.62rem;
        font-size: 0.56rem;
    }

    .chat-page .page-title,
    .chat-page .simulator-intro,
    .chat-page .content,
    .chat-page .final-cta {
        padding: 0.7rem;
    }

    .chat-page .page-title::before,
    .chat-page .simulator-intro::before,
    .chat-page .content::before,
    .chat-page .simulator::before,
    .chat-page .rice-chessboard::before,
    .chat-page .kelly-game::before {
        margin-bottom: 0.5rem;
        font-size: 0.56rem;
    }

    .chat-page h1 {
        font-size: clamp(1.45rem, 9vw, 2.25rem);
    }

    .chat-page h2 {
        font-size: 1rem;
    }

    .chat-page .page-title p,
    .chat-page .page-title h2,
    .chat-page .simulator-intro p,
    .chat-page .content p,
    .chat-page .content li,
    .chat-page .auth-form label {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .chat-page ul,
    .chat-page ol {
        gap: 0.36rem;
        padding-left: 0.95rem;
    }

    .chat-page .buttons,
    .chat-page .final-cta .buttons {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .chat-page .buttons a,
    .chat-page .auth-form button,
    .chat-page .final-cta a,
    .chat-page .auth-form input[type="text"],
    .chat-page .auth-form input[type="email"],
    .chat-page .auth-form input[type="password"] {
        min-height: 2.25rem;
        padding: 0.48rem 0.6rem;
        font-size: 0.68rem;
    }
}

/* Definitieve campagne-cascade */
body,
body.terminal-page,
body.chat-page,
body.welcome-page {
    --base: #fff7d9;
    --contrast: #17153b;
    --muted: rgba(23, 21, 59, 0.66);
    --line: rgba(23, 21, 59, 0.24);
    --paper: #fffdf0;
    --ink: #17153b;
    --blue: #352dff;
    --green: #b7ff3c;
    --pink: #ff5d8f;
    --orange: #ff7a1a;
    --lilac: #d8c7ff;
    --shadow: #17153b;

    background:
        linear-gradient(90deg, rgba(23, 21, 59, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 21, 59, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #fff7d9 0%, #fffdf0 42%, #d8c7ff 100%);
    background-size: 34px 34px, 34px 34px, auto;
    color: var(--ink);
    font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

body.terminal-page::before,
.chat-page main::before,
.chat-page .page-title::before,
.chat-page .simulator-intro::before,
.chat-page .content::before,
.chat-page .simulator::before,
.chat-page .rice-chessboard::before,
.chat-page .kelly-game::before {
    display: none;
}

body,
body.terminal-page,
body.chat-page,
body.welcome-page {
    --base: #fff9e8;
    --contrast: #14122f;
    --muted: rgba(20, 18, 47, 0.84);
    --line: rgba(20, 18, 47, 0.32);
    --paper: #fffdf5;
    --ink: #14122f;
    --blue: #2418d8;
    --green: #cfff3f;
    --pink: #ff7aa6;
    --orange: #ff8a22;
    --lilac: #eadfff;
    --shadow: #14122f;

    background:
        linear-gradient(90deg, rgba(20, 18, 47, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(20, 18, 47, 0.03) 1px, transparent 1px),
        linear-gradient(135deg, #fff9e8 0%, #fffdf5 58%, #f0e8ff 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

.site-header,
.page-title,
.simulator-intro,
.content,
.simulator,
.rice-chessboard,
.kelly-game,
.generation-section,
.simulator-note,
.site-footer,
.terminal-phone {
    border: 2px solid var(--ink);
    border-radius: 8px;
    box-shadow: 7px 7px 0 var(--shadow);
}

.site-header {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    padding: 0.72rem;
    background: rgba(255, 253, 240, 0.94);
    color: var(--ink);
    backdrop-filter: blur(14px);
}

.brand {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.brand img {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--green);
    object-fit: cover;
    transform: rotate(-5deg);
}

.site-nav a,
.nav-menu summary,
.buttons a,
.text-link,
.reset-button,
.choice-panel button,
.choice-panel a,
.terminal-actions a,
.kelly-game__actions button,
.auth-form button {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font-weight: 800;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.nav-menu summary:hover,
.nav-menu summary:focus-visible,
.buttons a:hover,
.buttons a:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.reset-button:hover,
.reset-button:focus-visible,
.choice-panel button:hover,
.choice-panel button:focus-visible,
.choice-panel a:hover,
.choice-panel a:focus-visible,
.terminal-actions a:hover,
.terminal-actions a:focus-visible,
.kelly-game__actions button:hover,
.kelly-game__actions button:focus-visible,
.auth-form button:hover,
.auth-form button:focus-visible {
    outline: 0;
    background: var(--green);
    color: var(--ink);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px) rotate(-1deg);
}

.site-nav a:nth-child(2n),
.choice-panel button:nth-child(2n),
.choice-panel a:nth-child(2n),
.result-cards article:nth-child(2n),
.kelly-game__card:nth-child(2n) {
    background: #f4edff;
}

.site-nav a:nth-child(3n),
.choice-panel button:nth-child(3n),
.choice-panel a:nth-child(3n),
.result-cards article:nth-child(3n),
.kelly-game__card:nth-child(3n) {
    background: #fff1f6;
}

.nav-menu div {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--shadow);
}

.page-title,
.simulator-intro {
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(207, 255, 63, 0.55) 0 26%, transparent 26%),
        linear-gradient(162deg, transparent 0 70%, rgba(255, 122, 166, 0.22) 70%),
        var(--paper);
}

.page-title h1,
.simulator-intro h1,
.content h1,
.content h2,
.rice-chessboard__intro h2,
.kelly-game__intro h2 {
    color: var(--ink);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.92;
    text-transform: uppercase;
}

.page-title h1,
.simulator-intro h1 {
    max-width: 10ch;
    font-size: clamp(2.5rem, 11vw, 7.2rem);
}

.page-title p,
.simulator-intro p,
.content p,
.rice-chessboard__intro p,
.kelly-game__intro p,
.simulator-note p,
.auth-form p {
    color: var(--ink);
}

.kicker {
    display: inline-flex;
    width: fit-content;
    padding: 0.28rem 0.48rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--green);
    color: var(--ink) !important;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

blockquote,
.slider-field,
.simulator-controls,
.simulator-results,
.chart-card,
.result-headline,
.result-cards article,
.generation-list article,
.rice-chessboard__intro,
.rice-chessboard__board-wrap,
.rice-chessboard__panel,
.kelly-game__intro,
.kelly-game__stage,
.kelly-game__help,
.kelly-game__result,
.kelly-game__card,
.auth-form,
.dashboard-panel {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.simulator {
    background: #fbf7ff;
}

.rice-chessboard {
    background: #f4edff;
}

.kelly-game {
    background: #fff1f6;
}

.result-headline,
.kelly-game__card.is-selected,
.kelly-game__card.is-leader {
    background: var(--green);
}

.chart-card {
    background: #fff7e5;
}

.slider-heading output,
.result-headline strong,
.result-cards strong,
.rice-chessboard__facts dd,
.kelly-game__card strong {
    color: var(--blue);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    letter-spacing: 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
textarea {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
}

input[type="range"] {
    accent-color: var(--blue);
}

.fund-line,
.fund-area {
    stroke: var(--blue);
}

.contribution-line,
.contribution-area {
    stroke: var(--pink);
}

.rice-chessboard__board {
    border: 2px solid var(--ink);
    border-radius: 8px;
    overflow: hidden;
}

.rice-chessboard__cell:nth-child(2n) {
    background: #fffdf0;
}

.rice-chessboard__cell:nth-child(2n + 1) {
    background: #b7ff3c;
}

.rice-chessboard__cell.is-active {
    background: var(--pink);
    color: var(--ink);
}

.kelly-game__choices span {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fffdf0;
    box-shadow: 3px 3px 0 var(--shadow);
}

.kelly-game__choices input:checked + span,
.kelly-game__primary {
    background: var(--blue);
    color: #fffdf0 !important;
}

.kelly-game__dice {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--green);
    box-shadow: 5px 5px 0 var(--shadow);
}

.kelly-game__pip {
    border-color: var(--ink);
}

.kelly-game__pip.is-active {
    background: var(--ink);
}

.kelly-game__meter {
    border-color: var(--ink);
    border-radius: 999px;
    overflow: hidden;
}

.kelly-game__meter span {
    background: var(--blue);
}

.terminal-phone {
    background:
        linear-gradient(135deg, rgba(183, 255, 60, 0.82) 0 20%, transparent 20%),
        linear-gradient(12deg, transparent 0 72%, rgba(255, 93, 143, 0.45) 72%),
        var(--paper);
}

.terminal-phone::before {
    background-image:
        linear-gradient(rgba(23, 21, 59, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 21, 59, 0.06) 1px, transparent 1px);
    background-size: 100% 8px, 30px 100%;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.terminal-bar {
    border-color: var(--ink);
    background: var(--green);
    color: var(--ink);
    font-weight: 900;
}

.system-readout,
.choice-panel {
    border-color: var(--ink);
}

.message {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--shadow);
}

.message-user {
    background: var(--blue);
    color: #fffdf0;
}

.message-story {
    width: 100%;
    background: #fff7e5;
}

.story-frame,
.story-world {
    border: 2px solid var(--ink);
    border-radius: 8px;
}

.story-world {
    position: relative;
    width: 100%;
    min-height: 16rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, #e9f4ff 0 46%, #dff9c4 46% 74%, #a76c45 74% 100%);
    color: var(--ink);
    isolation: isolate;
}

.story-world span,
.story-world i,
.story-world b {
    position: absolute;
    display: block;
}

.story-sun {
    top: 1.1rem;
    left: 1.1rem;
    width: 2.7rem;
    height: 2.7rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #ffd84a;
    box-shadow: 3px 3px 0 var(--shadow);
    animation: story-sun 18s ease-in-out forwards;
}

.story-rain {
    top: 2rem;
    width: 0.22rem;
    height: 2.8rem;
    border-radius: 999px;
    background: var(--blue);
    opacity: 0;
    animation: story-rain 18s ease-in-out forwards;
}

.story-rain-1 {
    left: 43%;
}

.story-rain-2 {
    left: 52%;
    animation-delay: 0.18s;
}

.story-rain-3 {
    left: 61%;
    animation-delay: 0.34s;
}

.story-path {
    left: -8%;
    bottom: 18%;
    width: 116%;
    height: 1.2rem;
    border: 2px solid var(--ink);
    border-inline: 0;
    background: rgba(255, 253, 245, 0.5);
    transform: rotate(-2deg);
}

.story-person {
    left: 6%;
    bottom: 21%;
    width: 1.25rem;
    height: 3.2rem;
    animation: story-walk 18s linear forwards;
}

.story-person::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.22rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--orange);
}

.story-person::after {
    content: "";
    position: absolute;
    top: 0.95rem;
    left: 0.5rem;
    width: 0.22rem;
    height: 1.35rem;
    background: var(--ink);
}

.story-person i {
    left: 0.1rem;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    border-left: 0.2rem solid var(--ink);
    border-right: 0.2rem solid var(--ink);
    animation: story-steps 0.52s steps(2) infinite;
}

.story-person-later {
    left: auto;
    right: 12%;
    opacity: 0;
    transform: scale(0.82);
    animation: story-appear 18s ease-in-out forwards;
}

.story-person-next {
    left: 64%;
    bottom: 21%;
    opacity: 0;
    transform: translateX(0) scale(0.82);
    animation: story-next-walk 18s linear forwards;
}

.story-seed {
    bottom: 24%;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 50% 50% 50% 0;
    background: var(--orange);
    opacity: 0;
    transform: rotate(-35deg) scale(0.2);
}

.story-seed-1 {
    left: 30%;
    animation: story-seed-main 18s ease-in-out forwards;
}

.story-seed-2 {
    left: 56%;
    animation: story-seed-next 18s ease-in-out forwards;
}

.story-seed-3 {
    left: 73%;
    animation: story-seed-next 18s ease-in-out 0.4s forwards;
}

.story-seed-4 {
    left: 68%;
    animation: story-seed-generation 18s ease-in-out forwards;
}

.story-seed-5 {
    left: 82%;
    animation: story-seed-generation 18s ease-in-out 0.45s forwards;
}

.story-sprout {
    left: 30.2%;
    bottom: 25%;
    width: 1.2rem;
    height: 1.8rem;
    opacity: 0;
    transform-origin: bottom center;
    animation: story-sprout 18s ease-in-out forwards;
}

.story-sprout::before,
.story-sprout::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    width: 0.75rem;
    height: 0.45rem;
    border: 2px solid var(--ink);
    border-radius: 999px 999px 0 999px;
    background: var(--green);
}

.story-sprout::before {
    left: -0.35rem;
    transform: rotate(-24deg);
}

.story-sprout::after {
    right: -0.35rem;
    transform: rotate(24deg) scaleX(-1);
}

.story-sprout-later {
    left: 67.8%;
    animation: story-sprout-generation 18s ease-in-out forwards;
}

.story-sprout-later-2 {
    left: 81.6%;
    animation: story-sprout-generation 18s ease-in-out 0.45s forwards;
}

.story-tree {
    bottom: 24%;
    width: 3.5rem;
    height: 7.5rem;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: bottom center;
}

.story-tree i {
    left: 50%;
    bottom: 0;
    width: 0.72rem;
    height: 4.2rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #9b653a;
    transform: translateX(-50%);
}

.story-tree b {
    left: 50%;
    top: 0;
    width: 3.6rem;
    height: 3.6rem;
    border: 2px solid var(--ink);
    border-radius: 54% 46% 44% 56%;
    background: var(--green);
    box-shadow: 3px 3px 0 var(--shadow);
    transform: translateX(-50%) rotate(-8deg);
}

.story-tree-main {
    left: 25%;
    animation: story-tree-main 18s ease-in-out forwards;
}

.story-tree-2 {
    left: 49%;
    height: 6.4rem;
    animation: story-tree-later 18s ease-in-out forwards;
}

.story-tree-3 {
    left: 66%;
    height: 6.8rem;
    animation: story-tree-later 18s ease-in-out 0.45s forwards;
}

.story-tree-4 {
    left: 78%;
    height: 5.8rem;
    animation: story-tree-later 18s ease-in-out 0.85s forwards;
}

.story-tree-5 {
    left: 62%;
    height: 5.9rem;
    animation: story-tree-generation 18s ease-in-out forwards;
}

.story-tree-6 {
    left: 84%;
    height: 5.3rem;
    animation: story-tree-generation 18s ease-in-out 0.45s forwards;
}

.story-fruit {
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--pink);
    opacity: 0;
}

.story-fruit-1 {
    left: 30%;
    top: 35%;
    animation: story-fruit 18s ease-in-out forwards;
}

.story-fruit-2 {
    left: 34%;
    top: 42%;
    animation: story-fruit 18s ease-in-out 0.35s forwards;
}

.story-gift {
    left: 36%;
    bottom: 42%;
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--ink);
    border-radius: 50% 50% 50% 0;
    background: var(--pink);
    opacity: 0;
    transform: rotate(-35deg) scale(0.3);
    animation: story-gift 18s ease-in-out forwards;
}

.story-mark {
    right: 0.8rem;
    top: 0.75rem;
    padding: 0.18rem 0.38rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 900;
    opacity: 0;
    animation: story-mark 18s ease-in-out forwards;
}

@keyframes story-sun {
    0%,
    18% {
        transform: translate(-0.7rem, 1.4rem) scale(0.75);
    }

    62%,
    100% {
        transform: translate(10rem, -0.25rem) scale(1);
    }
}

@keyframes story-rain {
    0%,
    20%,
    38%,
    100% {
        opacity: 0;
        transform: translateY(-1rem);
    }

    24%,
    34% {
        opacity: 0.78;
        transform: translateY(3.4rem);
    }
}

@keyframes story-walk {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    28% {
        transform: translateX(28vw) scale(1);
        opacity: 1;
    }

    52% {
        transform: translateX(42vw) scale(0.92);
        opacity: 0.55;
    }

    100% {
        transform: translateX(74vw) scale(0.82);
        opacity: 0;
    }
}

@keyframes story-next-walk {
    0%,
    66% {
        opacity: 0;
        transform: translateX(0) scale(0.82);
    }

    72% {
        opacity: 1;
        transform: translateX(0) scale(0.9);
    }

    86% {
        opacity: 1;
        transform: translateX(14vw) scale(0.9);
    }

    100% {
        opacity: 0.88;
        transform: translateX(17vw) scale(0.86);
    }
}

@keyframes story-steps {
    0% {
        transform: skewX(-12deg);
    }

    100% {
        transform: skewX(12deg);
    }
}

@keyframes story-seed-main {
    0%,
    15% {
        opacity: 0;
        transform: rotate(-35deg) translateY(-1rem) scale(0.2);
    }

    21%,
    45% {
        opacity: 1;
        transform: rotate(-35deg) translateY(0) scale(1);
    }

    58%,
    100% {
        opacity: 0;
        transform: rotate(-35deg) translateY(0.4rem) scale(0.8);
    }
}

@keyframes story-sprout {
    0%,
    25% {
        opacity: 0;
        transform: scaleY(0);
    }

    34%,
    52% {
        opacity: 1;
        transform: scaleY(1);
    }

    64%,
    100% {
        opacity: 0;
        transform: scaleY(1.05);
    }
}

@keyframes story-tree-main {
    0%,
    38% {
        opacity: 0;
        transform: scale(0.16);
    }

    58%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes story-fruit {
    0%,
    58% {
        opacity: 0;
        transform: translateY(-0.6rem) scale(0.2);
    }

    68%,
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes story-seed-next {
    0%,
    65% {
        opacity: 0;
        transform: rotate(-35deg) translateY(-1rem) scale(0.2);
    }

    76%,
    100% {
        opacity: 1;
        transform: rotate(-35deg) translateY(0) scale(1);
    }
}

@keyframes story-gift {
    0%,
    66% {
        opacity: 0;
        transform: translate(0, 0) rotate(-35deg) scale(0.25);
    }

    70% {
        opacity: 1;
        transform: translate(8vw, -1.2rem) rotate(-35deg) scale(1);
    }

    78% {
        opacity: 1;
        transform: translate(28vw, 0.2rem) rotate(-35deg) scale(0.9);
    }

    84%,
    100% {
        opacity: 0;
        transform: translate(33vw, 2.4rem) rotate(-35deg) scale(0.55);
    }
}

@keyframes story-seed-generation {
    0%,
    78% {
        opacity: 0;
        transform: rotate(-35deg) translateY(-1rem) scale(0.2);
    }

    86%,
    100% {
        opacity: 1;
        transform: rotate(-35deg) translateY(0) scale(0.92);
    }
}

@keyframes story-sprout-generation {
    0%,
    84% {
        opacity: 0;
        transform: scaleY(0);
    }

    92%,
    100% {
        opacity: 1;
        transform: scaleY(0.95);
    }
}

@keyframes story-tree-later {
    0%,
    72% {
        opacity: 0;
        transform: scale(0.18);
    }

    92%,
    100% {
        opacity: 1;
        transform: scale(0.88);
    }
}

@keyframes story-tree-generation {
    0%,
    88% {
        opacity: 0;
        transform: scale(0.16);
    }

    98%,
    100% {
        opacity: 1;
        transform: scale(0.76);
    }
}

@keyframes story-appear {
    0%,
    76% {
        opacity: 0;
    }

    88%,
    100% {
        opacity: 1;
    }
}

@keyframes story-mark {
    0%,
    82% {
        opacity: 0;
        transform: rotate(8deg) scale(0.7);
    }

    92%,
    100% {
        opacity: 1;
        transform: rotate(8deg) scale(1);
    }
}

.typing-line::after {
    background: var(--blue);
}

.site-footer {
    background: var(--ink);
    color: #fffdf0;
}

.footer-brand {
    color: var(--green);
}

@media (max-width: 840px) {
    .site-header {
        position: relative;
        top: auto;
        box-shadow: 5px 5px 0 var(--shadow);
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .site-nav a,
    .nav-menu summary {
        justify-content: center;
        min-height: 2.5rem;
        padding: 0.48rem;
        font-size: 0.76rem;
        text-align: center;
    }

    .nav-menu {
        grid-column: 1 / -1;
    }

    .nav-menu div {
        position: static;
        margin-top: 0.45rem;
        box-shadow: none;
    }

    .page-title h1,
    .simulator-intro h1 {
        font-size: clamp(2.35rem, 15vw, 4.6rem);
    }
}

@media (max-width: 520px) {
    .site-nav {
        gap: 0.35rem;
    }

    .site-nav a,
    .nav-menu summary {
        font-size: 0.68rem;
    }

    .page-title,
    .simulator-intro,
    .content {
        padding: 1rem;
    }

    .terminal-phone {
        box-shadow: 5px 5px 0 var(--shadow);
    }
}

/* Leesbaarheidsfix: neon alleen als accent, niet als lopende tekst */
.chat-page .page-title h2,
.chat-page .page-title p,
.chat-page .simulator-intro p,
.chat-page .content p,
.chat-page .content li,
.chat-page .content h2,
.chat-page .content h3,
.terminal-page .page-title h2,
.terminal-page .page-title p,
.terminal-page .content p,
.terminal-page .content li,
.terminal-page .content h2,
.terminal-page .content h3,
.terminal-page .simulator-note p,
.terminal-page .rice-chessboard__intro p,
.terminal-page .kelly-game__intro p {
    color: var(--ink) !important;
    text-shadow: none !important;
}

.chat-page .content,
.chat-page .page-title,
.chat-page .simulator-intro,
.terminal-page .content,
.terminal-page .page-title,
.terminal-page .simulator-intro {
    background:
        linear-gradient(115deg, rgba(207, 255, 63, 0.24) 0 22%, transparent 22%),
        var(--paper) !important;
    color: var(--ink) !important;
}

.chat-page .content li::marker,
.terminal-page .content li::marker {
    color: var(--blue) !important;
}

.chat-page .kicker,
.terminal-page .kicker {
    background: var(--green) !important;
    color: var(--ink) !important;
}

/* Welkomstscherm-consistentie voor alle pagina's */
.terminal-page,
.chat-page {
    --base: #fff9e8;
    --contrast: #14122f;
    --muted: rgba(20, 18, 47, 0.78);
    --line: rgba(20, 18, 47, 0.24);
}

.terminal-page .site-header,
.terminal-page .site-footer,
.terminal-page .nav-menu div,
.terminal-page .page-title,
.terminal-page .simulator-intro,
.terminal-page .content,
.terminal-page .final-cta,
.terminal-page .legal-content,
.terminal-page .simulator,
.terminal-page .simulator-controls,
.terminal-page .simulator-results,
.terminal-page .chart-card,
.terminal-page .result-cards article,
.terminal-page .generation-section,
.terminal-page .generation-list article,
.terminal-page .simulator-note,
.terminal-page .rice-chessboard,
.terminal-page .rice-chessboard__intro,
.terminal-page .rice-chessboard__board-wrap,
.terminal-page .rice-chessboard__panel,
.terminal-page .kelly-game,
.terminal-page .kelly-game__intro,
.terminal-page .kelly-game__stage,
.terminal-page .kelly-game__help,
.terminal-page .kelly-game__result,
.terminal-page .kelly-game__card,
.terminal-page .auth-form,
.terminal-page .notice {
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--shadow) !important;
}

.terminal-page .page-title,
.terminal-page .simulator-intro,
.terminal-page .final-cta {
    background:
        linear-gradient(135deg, rgba(207, 255, 63, 0.42) 0 22%, transparent 22%),
        linear-gradient(12deg, transparent 0 76%, rgba(255, 122, 166, 0.22) 76%),
        var(--paper) !important;
}

.terminal-page .simulator,
.terminal-page .rice-chessboard,
.terminal-page .kelly-game {
    background:
        linear-gradient(135deg, rgba(207, 255, 63, 0.18) 0 18%, transparent 18%),
        var(--paper) !important;
}

.terminal-page .simulator-results,
.terminal-page .kelly-game__stage,
.terminal-page .rice-chessboard__panel,
.terminal-page .chart-card {
    background: #fff7e5 !important;
}

.terminal-page .result-headline,
.terminal-page .kelly-game__card.is-selected,
.terminal-page .kelly-game__card.is-leader {
    background: var(--green) !important;
    color: var(--ink) !important;
}

.terminal-page .site-nav > a,
.terminal-page .nav-menu summary,
.terminal-page .buttons a,
.terminal-page .final-cta a,
.terminal-page .auth-form button,
.terminal-page .reset-button,
.terminal-page .text-link,
.terminal-page .kelly-game__actions button,
.terminal-page .kelly-game__choices span {
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 3px 3px 0 var(--shadow) !important;
    text-shadow: none !important;
}

.terminal-page .site-nav > a:nth-child(2n),
.terminal-page .buttons a:nth-child(2n),
.terminal-page .final-cta a:nth-child(2n),
.terminal-page .kelly-game__choices label:nth-child(2n) span,
.terminal-page .kelly-game__card:nth-child(2n),
.terminal-page .result-cards article:nth-child(2n) {
    background: #f4edff !important;
}

.terminal-page .site-nav > a:hover,
.terminal-page .site-nav > a:focus-visible,
.terminal-page .nav-menu summary:hover,
.terminal-page .nav-menu summary:focus-visible,
.terminal-page .buttons a:hover,
.terminal-page .buttons a:focus-visible,
.terminal-page .final-cta a:hover,
.terminal-page .final-cta a:focus-visible,
.terminal-page .auth-form button:hover,
.terminal-page .auth-form button:focus-visible,
.terminal-page .reset-button:hover,
.terminal-page .reset-button:focus-visible,
.terminal-page .text-link:hover,
.terminal-page .text-link:focus-visible,
.terminal-page .kelly-game__actions button:hover,
.terminal-page .kelly-game__actions button:focus-visible,
.terminal-page .kelly-game__choices input:checked + span {
    background: var(--blue) !important;
    color: #fffdf5 !important;
    box-shadow: 1px 1px 0 var(--shadow) !important;
}

.terminal-page .brand,
.terminal-page .brand span,
.terminal-page .footer-brand,
.terminal-page h1,
.terminal-page h2,
.terminal-page h3,
.terminal-page h4,
.terminal-page p,
.terminal-page li,
.terminal-page label,
.terminal-page legend,
.terminal-page summary,
.terminal-page dt,
.terminal-page dd,
.terminal-page small,
.terminal-page span,
.terminal-page output,
.terminal-page cite,
.terminal-page blockquote,
.terminal-page .slider-limits,
.terminal-page .result-cards small,
.terminal-page .result-cards span,
.terminal-page .generation-list small,
.terminal-page .kelly-game__card p,
.terminal-page .kelly-game__card-head small,
.terminal-page .kelly-game__result span,
.terminal-page .kelly-game__result strong,
.terminal-page .kelly-game__status strong,
.terminal-page .kelly-game__help p,
.terminal-page .notice {
    color: var(--ink) !important;
    text-shadow: none !important;
}

.terminal-page .site-footer,
.terminal-page .site-footer p,
.terminal-page .site-footer a {
    background: var(--ink) !important;
    color: #fffdf5 !important;
}

.terminal-page .footer-brand {
    color: var(--green) !important;
}

.terminal-page input[type="text"],
.terminal-page input[type="email"],
.terminal-page input[type="password"],
.terminal-page textarea {
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: #fffdf5 !important;
    color: var(--ink) !important;
    box-shadow: 3px 3px 0 var(--shadow) !important;
}

.terminal-page input[type="range"] {
    accent-color: var(--blue) !important;
}

.terminal-page input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(20, 18, 47, 0.2) !important;
}

.terminal-page input[type="range"]::-webkit-slider-thumb {
    border-color: var(--ink) !important;
    background: var(--blue) !important;
    box-shadow: none !important;
}

.terminal-page input[type="range"]::-moz-range-track {
    background: rgba(20, 18, 47, 0.2) !important;
}

.terminal-page input[type="range"]::-moz-range-thumb {
    border-color: var(--ink) !important;
    background: var(--blue) !important;
    box-shadow: none !important;
}

.terminal-page #chart-grid line {
    stroke: rgba(20, 18, 47, 0.18) !important;
}

.terminal-page #chart-labels text {
    fill: var(--ink) !important;
}

.terminal-page .fund-line {
    stroke: var(--blue) !important;
    filter: none !important;
}

.terminal-page .fund-area {
    fill: rgba(36, 24, 216, 0.14) !important;
}

.terminal-page .contribution-line {
    stroke: var(--pink) !important;
}

.terminal-page .contribution-area {
    fill: rgba(255, 122, 166, 0.14) !important;
}

.terminal-page .chart-legend i {
    border-color: var(--blue) !important;
}

.terminal-page .chart-legend span:last-child i {
    border-color: var(--pink) !important;
}

.terminal-page .rice-chessboard__cell:nth-child(2n) {
    background: #fffdf5 !important;
}

.terminal-page .rice-chessboard__cell:nth-child(2n + 1) {
    background: var(--green) !important;
}

.terminal-page .rice-chessboard__cell.is-active {
    background: var(--pink) !important;
    color: var(--ink) !important;
}

.terminal-page .rice-chessboard__visual {
    color: var(--blue) !important;
}

.terminal-page .kelly-game__dice {
    border: 2px solid var(--ink) !important;
    background: var(--green) !important;
    box-shadow: 4px 4px 0 var(--shadow) !important;
}

.terminal-page .kelly-game__track-line,
.terminal-page .kelly-game__meter {
    border-color: rgba(20, 18, 47, 0.28) !important;
}

.terminal-page .kelly-game__track-line i,
.terminal-page .kelly-game__pip {
    border-color: var(--ink) !important;
    background: var(--paper) !important;
    box-shadow: none !important;
}

.terminal-page .kelly-game__track-row.is-selected .kelly-game__track-line i,
.terminal-page .kelly-game__meter span,
.terminal-page .kelly-game__pip.is-active {
    background: var(--blue) !important;
}

@media (max-width: 640px) {
    .terminal-page.terminal-kelly-page .kelly-game__intro,
    .terminal-page.terminal-kelly-page .kelly-game__stage,
    .terminal-page.terminal-kelly-page .kelly-game__help,
    .terminal-page.terminal-kelly-page .kelly-game__result,
    .terminal-page.terminal-kelly-page .kelly-game__card,
    .terminal-page.terminal-kelly-page .kelly-game__dice {
        box-shadow: 2px 2px 0 var(--shadow) !important;
    }
}

/* Welkomstscherm zonder telefoonframe */
body.welcome-page {
    min-height: 100svh;
    padding: 0;
}

.welcome-page .welcome-shell {
    min-height: 100svh;
    padding: 0;
}

.welcome-page .terminal-phone {
    width: 100%;
    max-width: none;
    height: 100svh;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.welcome-page .terminal-phone::after {
    display: none;
}

.welcome-page .chat-window {
    padding-inline: clamp(0.85rem, 4vw, 1.35rem);
}

.welcome-page .choice-panel,
.welcome-page .terminal-actions,
.welcome-page .system-readout,
.welcome-page .terminal-bar {
    padding-inline: clamp(0.85rem, 4vw, 1.35rem);
}

/* Over ons als gesprek */
.about-chat {
    width: min(100%, 760px);
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(207, 255, 63, 0.32) 0 18%, transparent 18%),
        var(--paper);
    box-shadow: 7px 7px 0 var(--shadow);
}

.about-chat__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border-bottom: 2px solid var(--ink);
    background: var(--green);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.about-chat__bar span {
    width: 0.58rem;
    height: 0.58rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: var(--paper);
}

.about-chat__bar strong {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-chat__body {
    display: grid;
    gap: 0.85rem;
    padding: clamp(0.85rem, 4vw, 1.25rem);
}

.chat-bubble {
    width: fit-content;
    max-width: min(92%, 38rem);
    padding: 0.85rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--shadow);
}

.chat-bubble p,
.chat-bubble ul {
    margin: 0;
}

.chat-bubble ul {
    display: grid;
    gap: 0.55rem;
    padding-left: 1.1rem;
}

.chat-bubble li {
    color: var(--ink);
}

.chat-bubble--user {
    justify-self: end;
    background: var(--blue);
    color: #fffdf5;
}

.chat-bubble--user,
.chat-bubble--user *,
.chat-bubble--user p,
.chat-bubble--user li {
    color: #fffdf5;
}

.chat-bubble--bot {
    justify-self: start;
    background: var(--paper);
}

.chat-bubble--bot:nth-of-type(4n) {
    background: #f4edff;
}

.chat-bubble h1 {
    max-width: 11ch;
    margin: 0.45rem 0 0.7rem;
    color: var(--ink);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    font-size: clamp(2rem, 12vw, 4.8rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.92;
    text-transform: uppercase;
}

.about-chat__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding-top: 0.35rem;
}

.about-chat__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--green);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.about-chat__actions a:nth-child(2) {
    background: #f4edff;
}

.about-chat__actions a:nth-child(3) {
    background: #fff1f6;
}

/* Footer als compacte systeemregel */
.site-footer,
.terminal-page .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    width: min(calc(100% - (var(--page-padding-x) * 2)), var(--wide));
    padding: 0.85rem;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 4px 4px 0 var(--shadow) !important;
    font-size: 0.72rem;
}

.site-footer::before {
    content: "status: in ontwikkeling";
    width: fit-content;
    padding: 0.25rem 0.45rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--green);
    color: var(--ink);
    font-weight: 900;
    text-transform: uppercase;
}

.site-footer a,
.site-footer p,
.terminal-page .site-footer a,
.terminal-page .site-footer p {
    margin: 0;
    background: transparent !important;
    color: var(--ink) !important;
    text-decoration: none;
}

.site-footer .footer-brand,
.terminal-page .site-footer .footer-brand {
    color: var(--blue) !important;
    font-weight: 900;
}

@media (max-width: 640px) {
    .about-chat {
        width: 100%;
        border-radius: 0;
        border-inline: 0;
        box-shadow: none;
    }

    .about-chat__actions {
        grid-template-columns: 1fr;
    }
}

/* App-achtige header en echte chatflow */
.site-header,
.terminal-page .site-header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
    padding: 0.58rem 0.75rem;
    border: 0 !important;
    border-bottom: 2px solid var(--ink) !important;
    border-radius: 0 !important;
    background: rgba(255, 253, 245, 0.94) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
}

.brand,
.terminal-page .brand {
    min-width: 0;
}

.brand img,
.terminal-page .brand img {
    width: 2.1rem;
    height: 2.1rem;
    box-shadow: 2px 2px 0 var(--shadow);
}

.brand span,
.terminal-page .brand span {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav,
.terminal-page .site-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
}

.site-nav > a,
.terminal-page .site-nav > a {
    min-height: 2.1rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.68rem;
}

.nav-menu summary,
.terminal-page .nav-menu summary {
    min-height: 2.1rem;
    padding: 0.42rem 0.55rem;
    font-size: 0.68rem;
}

body.welcome-page .terminal-phone {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.welcome-page .terminal-bar,
.welcome-page .terminal-scan,
.welcome-page .system-readout {
    display: none !important;
}

.welcome-page .chat-window {
    padding-top: clamp(0.85rem, 3svh, 1.5rem);
}

.welcome-question {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.85rem;
    padding: clamp(1rem, 4vw, 1.35rem);
    border-bottom: 2px solid var(--ink);
    background:
        linear-gradient(135deg, rgba(183, 255, 60, 0.4) 0 24%, transparent 24%),
        linear-gradient(14deg, transparent 0 74%, rgba(255, 93, 143, 0.24) 74%),
        rgba(255, 253, 240, 0.94);
}

.welcome-kicker {
    width: fit-content;
    margin: 0;
    padding: 0.25rem 0.45rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--green);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--shadow);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.welcome-question h1 {
    max-width: 22ch;
    margin: 0;
    color: var(--ink);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    font-size: clamp(2rem, 6.2vw, 4.15rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.welcome-question > p:not(.welcome-kicker) {
    max-width: 42rem;
    margin: 0;
    color: var(--ink);
    font-size: clamp(0.88rem, 2.4vw, 1rem);
    line-height: 1.42;
}

.welcome-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.welcome-paths button,
.welcome-paths a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.welcome-paths button:nth-child(2) {
    background: #f4edff;
}

.welcome-paths a {
    background: #fff1f6;
}

.welcome-paths button:hover,
.welcome-paths button:focus-visible,
.welcome-paths a:hover,
.welcome-paths a:focus-visible {
    outline: 0;
    background: var(--blue);
    color: #fffdf5;
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.welcome-paths button:disabled {
    cursor: default;
    opacity: 0.48;
}

.welcome-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.welcome-status div {
    min-width: 0;
    padding: 0.62rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(255, 253, 240, 0.76);
}

.welcome-status dt {
    margin-bottom: 0.25rem;
    color: var(--blue);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.welcome-status dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.68rem;
    line-height: 1.25;
}

.welcome-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.8rem;
    padding: 0.7rem clamp(0.85rem, 4vw, 1.35rem);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.92);
    backdrop-filter: blur(14px);
}

.welcome-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: var(--ink);
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
}

.welcome-brand img {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--green);
    object-fit: cover;
    box-shadow: 2px 2px 0 var(--shadow);
    transform: rotate(-5deg);
}

.welcome-brand span {
    min-width: 0;
    max-width: 14rem;
    overflow-wrap: anywhere;
    font-size: clamp(0.72rem, 3.2vw, 0.9rem);
    line-height: 1.02;
}

.welcome-nav {
    display: flex;
    gap: 0.4rem;
}

.welcome-nav a,
.welcome-menu summary,
.skip-intro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.45rem 0.58rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--shadow);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
}

.welcome-menu {
    position: relative;
}

.welcome-menu summary {
    list-style: none;
    cursor: pointer;
}

.welcome-menu summary::-webkit-details-marker {
    display: none;
}

.welcome-menu div {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.4rem;
    width: min(17rem, calc(100vw - 1.5rem));
    padding: 0.55rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.welcome-menu:not([open]) div {
    display: none;
}

.welcome-menu div a {
    justify-content: flex-start;
    min-height: 2.25rem;
    background: #fff1f6;
}

.welcome-nav > a {
    background: #f4edff;
}

.skip-intro {
    align-self: flex-end;
    margin-top: -0.25rem;
    background: var(--blue);
    color: #fffdf5;
    cursor: pointer;
}

.welcome-nav a:hover,
.welcome-nav a:focus-visible,
.welcome-menu summary:hover,
.welcome-menu summary:focus-visible,
.skip-intro:hover,
.skip-intro:focus-visible {
    outline: 0;
    background: var(--green);
    color: var(--ink);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(1px, 1px);
}

@media (max-width: 640px) {
    .welcome-question {
        gap: 0.72rem;
    }

    .welcome-question h1 {
        max-width: 18ch;
        font-size: clamp(1.85rem, 8vw, 2.75rem);
    }

    .welcome-question > p:not(.welcome-kicker) {
        font-size: 0.82rem;
        line-height: 1.34;
    }

    .welcome-paths,
    .welcome-status {
        grid-template-columns: 1fr;
    }

    .welcome-paths button,
    .welcome-paths a {
        min-height: 2.6rem;
        padding: 0.55rem;
    }
}

@media (max-width: 380px) {
    .welcome-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem;
    }

    .welcome-nav {
        gap: 0.3rem;
    }

    .welcome-brand {
        gap: 0.45rem;
    }

    .welcome-brand img {
        width: 1.85rem;
        height: 1.85rem;
    }

    .welcome-brand span {
        max-width: 8.6rem;
        font-size: 0.68rem;
    }

    .welcome-nav a {
        min-height: 2rem;
        padding-inline: 0.45rem;
        font-size: 0.62rem;
    }

    .welcome-question {
        gap: 0.7rem;
    }

    .welcome-question h1 {
        font-size: clamp(1.75rem, 11vw, 2.7rem);
    }

    .welcome-paths,
    .welcome-status {
        grid-template-columns: 1fr;
    }

    .welcome-paths button,
    .welcome-paths a {
        min-height: 2.65rem;
    }
}

.conversation-app {
    display: block;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    background:
        linear-gradient(90deg, rgba(23, 21, 59, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 21, 59, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #fff7d9 0%, #fffdf0 42%, #d8c7ff 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

.conversation-hero {
    min-height: calc(100svh - 3.8rem);
    align-content: center;
}

.conversation-hero h1 {
    max-width: 15ch;
}

.conversation-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.conversation-shortcuts a,
.conversation-shortcuts button,
.role-grid a,
.role-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    padding: 0.58rem 0.72rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--green);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.conversation-shortcuts button:nth-child(3n),
.role-grid article:nth-child(2n) button,
.role-grid article:nth-child(2n) a {
    background: #f4edff;
}

.conversation-shortcuts a:hover,
.conversation-shortcuts a:focus-visible,
.conversation-shortcuts button:hover,
.conversation-shortcuts button:focus-visible,
.role-grid a:hover,
.role-grid a:focus-visible,
.role-grid button:hover,
.role-grid button:focus-visible {
    outline: 0;
    background: var(--blue);
    color: #fffdf5;
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.conversation-stage {
    display: grid;
    grid-template-rows: minmax(18rem, auto) auto;
    min-height: 72svh;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 253, 240, 0.72);
}

.conversation-log {
    min-height: 22rem;
    max-height: none;
    padding: clamp(1rem, 4vw, 1.35rem);
}

.conversation-log .message {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--shadow);
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.conversation-log .message-user {
    background: var(--blue);
    color: #fffdf5;
}

.conversation-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.92);
}

.conversation-choices:empty {
    display: none;
}

.prototype-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 1.35rem);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 253, 240, 0.94);
}

.prototype-panel h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--ink);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 0.96;
    text-transform: uppercase;
}

.prototype-panel > p:not(.welcome-kicker) {
    max-width: 48rem;
    margin: 0;
    color: var(--ink);
}

.chess-demo {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(18rem, 26rem);
    justify-content: center;
    align-items: start;
    gap: 1.25rem;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.chess-board span {
    min-width: 0;
    border-right: 1px solid rgba(23, 21, 59, 0.22);
    border-bottom: 1px solid rgba(23, 21, 59, 0.22);
    background: #fffdf0;
    transition: background 160ms ease, transform 160ms ease;
}

.chess-board span:nth-child(16n + 2),
.chess-board span:nth-child(16n + 4),
.chess-board span:nth-child(16n + 6),
.chess-board span:nth-child(16n + 8),
.chess-board span:nth-child(16n + 9),
.chess-board span:nth-child(16n + 11),
.chess-board span:nth-child(16n + 13),
.chess-board span:nth-child(16n + 15) {
    background: #f4edff;
}

.chess-board span.is-active {
    background: var(--green);
    transform: scale(0.9);
}

.chess-board span.is-current {
    position: relative;
    z-index: 1;
    background: var(--blue);
    box-shadow: inset 0 0 0 2px var(--paper);
    transform: scale(0.76);
}

.chess-readout {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.chess-readout dl,
.project-status {
    margin: 0;
}

.chess-readout dl {
    display: grid;
    gap: 0.65rem;
}

.chess-readout dl div {
    padding-top: 0.65rem;
    border-top: 2px solid var(--ink);
}

.chess-readout dt,
.role-grid h3 {
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.chess-readout dd {
    margin: 0.2rem 0 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    font-weight: 900;
    line-height: 1.1;
}

.chess-readout p {
    margin: 0;
}

.chess-followup {
    margin-top: 0.25rem;
}

.open-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.open-list li {
    margin: 0;
    padding: 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff1f6;
    color: var(--ink);
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.role-grid article {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 0.85rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.role-grid h3,
.role-grid p {
    margin: 0;
}

.role-grid p {
    font-size: 0.82rem;
    line-height: 1.35;
}

.role-grid button,
.role-grid a {
    align-self: end;
}

@media (max-width: 900px) {
    .conversation-choices,
    .chess-demo,
    .role-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .conversation-hero {
        min-height: auto;
    }

    .conversation-shortcuts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .conversation-log {
        min-height: 18rem;
    }

    .prototype-panel h2 {
        font-size: clamp(1.8rem, 10vw, 2.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chess-board span,
    .conversation-shortcuts a,
    .conversation-shortcuts button,
    .role-grid a,
    .role-grid button {
        transition: none;
    }
}

/* Chatapp-prototype */
body.app-page {
    height: 100svh;
    padding: 0;
    overflow: hidden;
}

.app-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100% !important;
    max-width: none !important;
    height: 100svh;
    margin: 0 !important;
    min-width: 320px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(23, 21, 59, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 21, 59, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #fff7d9 0%, #fffdf0 42%, #d8c7ff 100%);
    background-size: 34px 34px, 34px 34px, auto;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.app-header svg,
.app-tabbar svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-header,
.app-tabbar {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem clamp(0.75rem, 3vw, 1rem);
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.94);
    backdrop-filter: blur(14px);
}

.app-header__actions {
    display: flex;
    gap: 0.4rem;
}

.account-action-form {
    display: contents;
    margin: 0;
}

.app-header .welcome-brand span {
    max-width: none;
    overflow-wrap: normal;
    font-size: 0.78rem;
    line-height: 1.1;
}

.app-header__actions button,
.app-header__actions a,
.app-tabbar button,
.chat-room__choices button,
.home-chat-window__choices button,
.page-conversation__choices a,
.app-card-grid button,
.app-card-grid a,
.app-question-actions button,
.game-picker a,
.game-picker button,
.chess-readout button,
.profile-actions button,
.profile-actions a,
.share-actions button,
.page-conversation__action,
.content-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.5rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.app-header__actions button,
.app-header__actions a {
    gap: 0.35rem;
}

.app-header__actions button:hover,
.app-header__actions button:focus-visible,
.app-header__actions a:hover,
.app-header__actions a:focus-visible,
.app-tabbar button:hover,
.app-tabbar button:focus-visible,
.chat-room__choices button:hover,
.chat-room__choices button:focus-visible,
.home-chat-window__choices button:hover,
.home-chat-window__choices button:focus-visible,
.page-conversation__choices a:hover,
.page-conversation__choices a:focus-visible,
.app-card-grid button:hover,
.app-card-grid button:focus-visible,
.app-card-grid a:hover,
.app-card-grid a:focus-visible,
.app-question-actions button:hover,
.app-question-actions button:focus-visible,
.game-picker a:hover,
.game-picker a:focus-visible,
.game-picker button:hover,
.game-picker button:focus-visible,
.chess-readout button:hover,
.chess-readout button:focus-visible,
.profile-actions button:hover,
.profile-actions button:focus-visible,
.profile-actions a:hover,
.profile-actions a:focus-visible,
.share-actions button:hover,
.share-actions button:focus-visible,
.page-conversation__action:hover,
.page-conversation__action:focus-visible,
.content-action:hover,
.content-action:focus-visible {
    outline: 0;
    background: var(--green);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.app-view {
    display: none;
    min-height: 0;
    overflow: hidden;
}

.app-view.is-active {
    display: block;
}

.app-scroll {
    height: 100%;
    overflow-y: auto;
    padding: clamp(1rem, 4vw, 1.35rem);
    scroll-behavior: smooth;
}

.app-scroll h1 {
    max-width: 32rem;
    margin: 0 0 0.85rem;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

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

.typed-question {
    display: inline;
}

.typed-question::after {
    content: "";
    display: inline-block;
    width: 0.48ch;
    height: 0.95em;
    margin-left: 0.1rem;
    background: currentColor;
    vertical-align: -0.08em;
    animation: cursor-blink 0.8s step-end infinite;
}

.typed-question.is-complete::after {
    display: none;
}

[hidden] {
    display: none !important;
}

.home-chat-window {
    width: min(100%, 54rem);
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(255, 253, 245, 0.92);
    box-shadow: 5px 5px 0 var(--shadow);
}

.home-chat-window__messages {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 7rem;
    padding: clamp(0.85rem, 3vw, 1.2rem);
    background:
        linear-gradient(90deg, rgba(23, 21, 59, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 21, 59, 0.035) 1px, transparent 1px),
        rgba(255, 253, 240, 0.55);
    background-size: 28px 28px;
}

.home-chat-window .message {
    max-width: min(88%, 38rem);
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font-size: 0.92rem;
    line-height: 1.45;
}

.home-chat-window .home-question-message {
    width: auto;
}

.home-chat-window h1 {
    max-width: none;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.home-chat-window__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.8rem;
    border-top: 2px solid var(--ink);
    background: var(--paper);
}

.home-chat-window__choices button {
    min-width: 0;
}

.home-chat-window__choices button:nth-child(2) {
    background: #f4edff;
}

.home-chat-window__choices button:nth-child(3) {
    background: #fff1f6;
}

.home-pages,
.page-tile-grid {
    width: min(100%, 54rem);
}

.home-pages {
    margin-top: 1.4rem;
}

.home-discovery-chat .home-chat-window__messages {
    min-height: 0;
    padding: 0 0 0.75rem;
    background: transparent;
}

.home-discovery-chat .message {
    font-size: 0.82rem;
}

.page-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.page-tile {
    display: grid;
    min-width: 0;
    min-height: 7rem;
    place-items: center;
    align-content: center;
    gap: 0.6rem;
    padding: 0.9rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.page-tile:nth-child(3n + 2) {
    background: #f4edff;
}

.page-tile:nth-child(3n) {
    background: #fff1f6;
}

.page-tile svg {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.page-tile:hover,
.page-tile:focus-visible {
    outline: 0;
    background: var(--green);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.tools-page {
    scroll-behavior: smooth;
}

.chess-tool {
    width: min(100%, 54rem);
}

.chess-tool {
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--ink);
    scroll-margin-top: 1rem;
}

.chess-tool__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chess-tool__heading div {
    display: grid;
    gap: 0.25rem;
    width: min(100%, 38rem);
    margin-inline: auto;
}

.chess-tool__heading span {
    color: var(--blue);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.chess-tool__heading h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.chess-tool__heading h1 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.app-chess .chess-board {
    width: 100%;
    max-width: 18rem;
    justify-self: center;
}

.app-chess .chess-readout {
    gap: 0.85rem;
}

.app-chess .chess-readout dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.app-chess .chess-readout dl div {
    min-width: 0;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fffdf0;
}

.app-chess .chess-readout dd {
    overflow-wrap: anywhere;
}

.rice-page .chess-tool {
    margin-top: 0.9rem;
    padding-top: 0;
    border-top: 0;
}

.chess-story {
    width: min(100%, 38rem);
    margin: 1rem auto 0;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #f4edff;
    box-shadow: 2px 2px 0 var(--shadow);
}

.chess-story summary {
    padding: 0.7rem 0.8rem;
    font-weight: 900;
    cursor: pointer;
}

.chess-story p {
    margin: 0;
    line-height: 1.45;
}

.chess-story__body {
    padding: 0 0.8rem 0.85rem;
}

.chess-story__body p + p {
    margin-top: 0.7rem;
}

.rice-game {
    display: grid;
    gap: 1rem;
}

.rice-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(100%, 38rem);
    margin-inline: auto;
}

.rice-stage .chess-board {
    width: 100%;
    align-self: center;
}

.rice-amount {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0.4rem;
    min-width: 0;
    aspect-ratio: 1;
    padding: 0.8rem;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--blue);
    color: #fffdf5;
    box-shadow: 4px 4px 0 var(--shadow);
}

.rice-amount strong {
    min-width: 0;
    font-size: clamp(0.78rem, 2vw, 1rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.rice-amount small {
    font-size: 0.55rem;
    line-height: 1.25;
}

.rice-pile {
    --rice-fill: #fffdf0;
    --rice-detail: var(--blue);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 0.13rem;
    flex-wrap: wrap;
    min-height: 0;
    padding: 0.35rem;
    overflow: hidden;
    border: 1px solid rgba(255, 253, 245, 0.48);
    border-radius: 6px;
    background: rgba(255, 253, 245, 0.08);
}

.rice-zoom-label {
    display: block;
    min-width: 0;
    color: var(--green);
    font-size: 0.52rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.rice-pile i {
    display: none;
    position: relative;
    flex: 0 0 auto;
    font-style: normal;
}

.rice-pile i.is-visible {
    display: grid;
}

.rice-pile i span {
    display: none;
}

.rice-pile.is-grains i {
    width: 1.05rem;
    height: 0.4rem;
    border: 2px solid rgba(23, 21, 59, 0.76);
    border-radius: 60% 40% 60% 40%;
    background: #fffdf0;
    transform: rotate(35deg);
}

.rice-pile.is-grains i:nth-of-type(3n) {
    transform: rotate(-25deg);
}

.rice-pile.is-grains i:nth-of-type(5n) {
    background: var(--green);
    transform: rotate(70deg);
}

.rice-pile.is-clusters i,
.rice-pile.is-superclusters i,
.rice-pile.is-deep i {
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0.12rem;
    border: 1px solid var(--ink);
    box-shadow: 1px 1px 0 rgba(23, 21, 59, 0.72);
}

.rice-pile.is-clusters i {
    border-radius: 50%;
    background: var(--rice-fill);
}

.rice-pile.is-clusters i span {
    display: block;
    width: 0.18rem;
    height: 0.09rem;
    border-radius: 60%;
    background: var(--rice-detail);
    transform: rotate(35deg);
}

.rice-pile.is-superclusters i {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 5px;
    background: var(--rice-fill);
}

.rice-pile.is-superclusters i span {
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--rice-detail);
}

.rice-pile.is-deep i {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px double #fffdf0;
    border-radius: 4px;
    background: var(--rice-fill);
}

.rice-pile.is-deep i span {
    display: block;
    width: 0.22rem;
    height: 0.22rem;
    border: 1px solid var(--ink);
    background: var(--rice-detail);
}

.rice-pile.is-deep.is-even-level i {
    border-radius: 50%;
}

.rice-pile.is-deep.is-even-level i span {
    border-radius: 50%;
}

.rice-pile[data-level="1"] {
    --rice-fill: #fffdf0;
    --rice-detail: #2f20e0;
}

.rice-pile[data-level="2"] {
    --rice-fill: #b7ff3c;
    --rice-detail: #17153b;
}

.rice-pile[data-level="3"] {
    --rice-fill: #ffc3d7;
    --rice-detail: #8e254e;
}

.rice-pile[data-level="4"] {
    --rice-fill: #ff91b6;
    --rice-detail: #742042;
}

.rice-pile[data-level="5"] {
    --rice-fill: #f35f91;
    --rice-detail: #fffdf0;
}

.rice-pile[data-level="6"] {
    --rice-fill: #c93e75;
    --rice-detail: #fffdf0;
}

.rice-pile[data-level="7"] {
    --rice-fill: #962e67;
    --rice-detail: #fffdf0;
}

.rice-pile[data-level="8"] {
    --rice-fill: #682657;
    --rice-detail: #b7ff3c;
}

.rice-pile[data-level="9"] {
    --rice-fill: #3e1c49;
    --rice-detail: #b7ff3c;
}

.rice-pile[data-level="10"] {
    --rice-fill: #17112f;
    --rice-detail: #b7ff3c;
}

.rice-pile.has-few-units i {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.22rem;
}

.rice-pile.has-medium-units i {
    width: 1.3rem;
    height: 1.3rem;
    padding: 0.16rem;
}

.rice-pile.has-few-units i span {
    width: 0.38rem;
    height: 0.28rem;
}

.rice-pile.is-superclusters.has-few-units i span,
.rice-pile.is-deep.has-few-units i span {
    width: 0.48rem;
    height: 0.48rem;
}

.rice-pile.is-zooming i.is-visible {
    animation: rice-zoom-out 500ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes rice-zoom-out {
    0% {
        opacity: 0;
        transform: scale(2.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rice-game .chess-readout {
    width: min(100%, 38rem);
    margin-inline: auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.rice-game .rice-simulator-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
}

.rice-game .rice-simulator-field > span,
.rice-game .rice-simulator-field > small {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.rice-game .rice-simulator-field b {
    font-size: 0.65rem;
    line-height: 1.3;
}

.rice-game .rice-simulator-field output {
    flex: 0 0 auto;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--ink);
    border-radius: 5px;
    background: var(--green);
    color: var(--ink);
    font-size: 0.6rem;
    font-weight: 900;
}

.rice-game .rice-simulator-field > small {
    color: rgba(20, 18, 47, 0.62);
    font-size: 0.5rem;
}

.rice-game .rice-simulator-field input[type="range"] {
    width: 100%;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--blue);
}

.home-conversation-starter {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.home-conversation-starter h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.app-scroll > p:not(.welcome-kicker) {
    max-width: 46rem;
    margin: 0 0 1rem;
}

.app-card-grid,
.app-question-actions,
.game-picker,
.app-status,
.app-roles {
    margin-top: 1rem;
}

.app-question-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.app-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.game-picker article {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    padding: 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.game-picker h2,
.game-picker p {
    margin: 0;
}

.game-picker h2 {
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.app-card-grid article {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--shadow);
}

.app-card-grid h2,
.role-grid h2,
.app-card-grid p {
    margin: 0;
}

.app-card-grid h2,
.role-grid h2 {
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
}

.app-card-grid article:nth-child(2),
.app-card-grid article:nth-child(2) button,
.game-picker article:nth-child(2),
.game-picker article:nth-child(2) a,
.app-tabbar button:nth-child(2n),
.chat-start button:nth-child(2n),
.app-question-actions button:nth-child(2n),
.chat-room__choices button:nth-child(2n) {
    background: #f4edff;
}

.app-card-grid article:nth-child(3),
.app-card-grid article:nth-child(3) button,
.app-question-actions button:nth-child(3n),
.chat-room__choices button:nth-child(3n) {
    background: #fff1f6;
}

.app-tabbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
}

.app-tabbar button {
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.56rem;
}

.app-tabbar button.is-active {
    background: var(--blue);
    color: #fffdf5;
}

.app-chat-view.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
}

.app-chat-view.has-active-chat {
    grid-template-columns: minmax(0, 1fr);
}

.chat-room {
    display: none;
}

.app-chat-view.has-active-chat .chat-room {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    background: rgba(255, 253, 240, 0.62);
}

.menu-layout {
    display: grid;
    align-content: start;
    gap: 1.25rem;
}

.page-conversation-layout {
    max-width: 54rem;
}

.page-conversation {
    width: 100%;
}

.page-conversation,
.page-intro-chat,
.share-chat,
.home-chat-window--unframed,
.standalone-chat {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-conversation .home-chat-window__messages,
.page-intro-chat .home-chat-window__messages,
.share-chat .home-chat-window__messages,
.home-chat-window--unframed .home-chat-window__messages,
.standalone-chat .home-chat-window__messages {
    padding-inline: 0;
    background: transparent;
}

.home-chat-window--unframed .home-chat-window__choices {
    padding: 0.75rem 0 0;
    border-top: 0;
    background: transparent;
}

.page-conversation .page-conversation__messages {
    min-height: 0;
    gap: 0.85rem;
    padding-block: clamp(0.85rem, 3vw, 1.2rem);
}

.page-conversation .message {
    font-size: 0.82rem;
}

.page-conversation__choices a,
.page-conversation__choices button {
    gap: 0.4rem;
    min-width: 0;
}

.page-conversation__choices {
    padding: 0.75rem 0 0;
    border-top: 0;
    background: transparent;
}

.page-conversation__choices > :nth-child(2) {
    background: #f4edff;
}

.page-conversation__choices > :nth-child(3) {
    background: #fff1f6;
}

.page-conversation__choices svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-conversation__action {
    width: min(100%, 24rem);
    margin-top: 1rem;
}

.menu-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: min(100%, 48rem);
}

.menu-links a,
.menu-links button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-links svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-links a:hover,
.menu-links a:focus-visible,
.menu-links button:hover,
.menu-links button:focus-visible {
    outline: 0;
    background: var(--green);
}

.chat-room__messages {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.chat-room__messages .message {
    max-width: min(88%, 42rem);
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--shadow);
}

.chat-room__messages .message-user {
    align-self: flex-end;
    background: var(--blue);
    color: #fffdf5;
}

.home-chat-window__messages .message,
.chat-room__messages .message {
    --bubble-fill: var(--paper);
    position: relative;
    max-width: min(calc(100% - 5rem), 38rem);
    overflow: visible;
    border-radius: 16px 16px 16px 5px;
    background: var(--bubble-fill);
    box-shadow: 2px 3px 0 var(--shadow);
}

.home-chat-window__messages .message-bot,
.chat-room__messages .message-bot {
    align-self: flex-start;
    margin-left: 2.15rem;
}

.home-chat-window__messages .message-user,
.chat-room__messages .message-user {
    --bubble-fill: var(--blue);
    align-self: flex-end;
    margin-right: 2.85rem;
    border-radius: 16px 16px 5px 16px;
    color: #fffdf5;
}

.message-avatar {
    position: absolute;
    bottom: -0.05rem;
    z-index: 2;
    display: inline-grid;
    min-width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    padding: 0 0.25rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--green);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.message-bot > .message-avatar {
    left: -2.35rem;
}

.message-user > .message-avatar {
    right: -3.05rem;
    min-width: 2.35rem;
    border-radius: 999px;
    background: #f4edff;
}

.home-chat-window__messages .message-bot::before,
.chat-room__messages .message-bot::before,
.home-chat-window__messages .message-user::before,
.chat-room__messages .message-user::before,
.home-chat-window__messages .message-bot::after,
.chat-room__messages .message-bot::after,
.home-chat-window__messages .message-user::after,
.chat-room__messages .message-user::after {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
}

.home-chat-window__messages .message-bot::before,
.chat-room__messages .message-bot::before {
    bottom: 9px;
    left: -11px;
    border-top: 9px solid transparent;
    border-right: 11px solid var(--ink);
    border-bottom: 9px solid transparent;
}

.home-chat-window__messages .message-bot::after,
.chat-room__messages .message-bot::after {
    bottom: 11px;
    left: -7px;
    border-top: 7px solid transparent;
    border-right: 9px solid var(--bubble-fill);
    border-bottom: 7px solid transparent;
}

.home-chat-window__messages .message-user::before,
.chat-room__messages .message-user::before {
    right: -11px;
    bottom: 9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 11px solid var(--ink);
}

.home-chat-window__messages .message-user::after,
.chat-room__messages .message-user::after {
    right: -7px;
    bottom: 11px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid var(--bubble-fill);
}

.home-chat-window__messages .message-bot + .message-bot,
.chat-room__messages .message-bot + .message-bot,
.home-chat-window__messages .message-user + .message-user,
.chat-room__messages .message-user + .message-user {
    margin-top: -0.45rem;
}

.home-chat-window__messages .message-bot:has(+ .message-bot),
.chat-room__messages .message-bot:has(+ .message-bot) {
    border-bottom-left-radius: 16px;
}

.home-chat-window__messages .message-user:has(+ .message-user),
.chat-room__messages .message-user:has(+ .message-user) {
    border-bottom-right-radius: 16px;
}

.home-chat-window__messages .message-bot:has(+ .message-bot)::after,
.chat-room__messages .message-bot:has(+ .message-bot)::after,
.home-chat-window__messages .message-user:has(+ .message-user)::after,
.chat-room__messages .message-user:has(+ .message-user)::after {
    display: none;
}

.home-chat-window__messages .message-bot:has(+ .message-bot)::before,
.chat-room__messages .message-bot:has(+ .message-bot)::before,
.home-chat-window__messages .message-user:has(+ .message-user)::before,
.chat-room__messages .message-user:has(+ .message-user)::before {
    display: none;
}

.home-chat-window__messages .message-bot:has(+ .message-bot) > .message-avatar,
.chat-room__messages .message-bot:has(+ .message-bot) > .message-avatar,
.home-chat-window__messages .message-user:has(+ .message-user) > .message-avatar,
.chat-room__messages .message-user:has(+ .message-user) > .message-avatar {
    display: none;
}

.chat-room__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.85rem;
    border-top: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.92);
}

.chat-room__choices:empty {
    display: none;
}

.chat-room__choices .chat-choice-continue {
    background: transparent;
    box-shadow: none;
}

.app-chess {
    margin-top: 1rem;
}

.app-form {
    margin-top: 1rem;
}

.profile-layout {
    max-width: 760px;
}

.profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: min(100%, 32rem);
    margin-top: 0.2rem;
}

.profile-actions a {
    gap: 0.45rem;
    min-height: 3rem;
    background: #f4edff;
}

.profile-actions a.is-primary {
    background: var(--green);
}

.profile-actions svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-intro-chat {
    width: min(100%, 54rem);
    margin-bottom: 1rem;
}

.page-intro-chat .home-chat-window__messages {
    min-height: 0;
    padding-block: 0.85rem;
}

.page-intro-chat .message {
    font-size: 0.82rem;
}

.share-panel {
    display: block;
    width: min(100%, 54rem);
    margin-top: 1.2rem;
    padding: 0;
}

.share-panel p {
    margin: 0;
}

.share-chat .share-chat__messages {
    min-height: 0;
    padding-block: 0.85rem;
}

.share-chat .message {
    font-size: 0.82rem;
}

.share-actions button {
    gap: 0.35rem;
}

.share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.75rem 0 0;
    border-top: 0;
    background: transparent;
}

.share-actions svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.share-actions button:first-child {
    background: var(--green);
}

.share-status {
    color: var(--blue);
    font-size: 0.62rem;
    font-weight: 900;
}

.share-status:not(:empty) {
    min-height: 1rem;
    padding: 0.55rem 0 0;
}

@media (max-width: 900px) {
    .app-card-grid,
    .app-question-actions,
    .game-picker,
    .app-status,
    .app-roles,
    .chat-room__choices,
    .home-chat-window__choices {
        grid-template-columns: 1fr;
    }

    .app-chat-view.has-active-chat {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 640px) {
    .share-actions {
        grid-template-columns: 1fr;
    }

    .app-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .app-header__actions {
        display: flex;
    }

    .app-header__actions button,
    .app-header__actions a {
        min-height: 2.1rem;
        padding: 0.42rem 0.52rem;
        font-size: 0.6rem;
    }

    .app-scroll h1 {
        font-size: 1.3rem;
    }

    .home-chat-window h1 {
        font-size: 0.92rem;
    }

    .home-chat-window__messages {
        min-height: 7rem;
    }

    .app-tabbar {
        gap: 0.25rem;
        padding-inline: 0.35rem;
    }

    .app-tabbar button {
        min-height: 3rem;
        font-size: 0.52rem;
    }

    .menu-links {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .chess-tool__heading {
        align-items: stretch;
    }

    .chess-tool__heading div {
        width: 100%;
    }

    .app-chess .chess-board {
        width: min(54vw, 12.5rem);
    }

    .app-chess .chess-readout {
        width: 100%;
        padding: 0.8rem;
    }

    .app-chess .chess-readout dd {
        font-size: 0.88rem;
    }
}

.about-chat-live {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: calc(100svh - 8.5rem);
}

.about-chat-live .about-chat__body {
    align-content: end;
    max-height: calc(100svh - 15rem);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.about-chat__intro {
    max-width: min(100%, 42rem);
}

.about-skip {
    justify-self: start;
    margin: -0.35rem 0 0;
}

.about-chat__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.85rem;
    border-top: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.9);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 280ms ease, transform 280ms ease;
}

.about-chat__choices.is-pending {
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.45rem);
}

.page-chat-start > .is-pending,
.about-chat__body > .is-pending {
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.45rem);
    transition: opacity 280ms ease, transform 280ms ease;
}

.about-chat__choices button {
    min-height: 3rem;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}

.about-chat__choices button:nth-child(2n) {
    background: #f4edff;
}

.about-chat__choices button:nth-child(3n) {
    background: #fff1f6;
}

.about-chat__choices button:hover,
.about-chat__choices button:focus-visible {
    outline: 0;
    background: var(--green);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.about-chat__choices button:disabled {
    cursor: default;
    opacity: 0.48;
}

@media (max-width: 760px) {
    .site-header,
    .terminal-page .site-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .site-nav,
    .terminal-page .site-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .nav-menu,
    .terminal-page .nav-menu {
        grid-column: auto;
    }

    .site-nav > a,
    .terminal-page .site-nav > a,
    .nav-menu summary,
    .terminal-page .nav-menu summary {
        justify-content: center;
        font-size: 0.64rem;
        text-align: center;
    }

    .nav-menu div,
    .terminal-page .nav-menu div {
        position: absolute;
        right: 0;
        left: auto;
        min-width: min(18rem, calc(100vw - 1.5rem));
        box-shadow: 4px 4px 0 var(--shadow) !important;
    }

    .about-chat-live {
        min-height: calc(100svh - 9.5rem);
    }

    .about-chat-live .about-chat__body {
        max-height: calc(100svh - 18rem);
    }

    .about-chat__choices {
        grid-template-columns: 1fr;
    }
}

/* Chatstarts op inhoudspagina's */
.page-chat {
    display: grid;
    gap: 0.85rem;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(0.85rem, 4vw, 1.25rem);
    border: 2px solid var(--ink);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(207, 255, 63, 0.28) 0 18%, transparent 18%),
        var(--paper);
    box-shadow: 7px 7px 0 var(--shadow);
}

.page-chat-start {
    margin-bottom: clamp(1rem, 4vw, 2rem);
}

.page-chat-followup {
    margin-top: clamp(1rem, 4vw, 2rem);
}

.page-chat .chat-bubble h1,
.page-chat .chat-bubble h2 {
    max-width: 11ch;
    margin: 0.45rem 0 0.7rem;
    color: var(--ink);
    font-family: "Arial Black", Impact, "IBM Plex Mono", ui-monospace, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.92;
    text-transform: uppercase;
}

.page-chat .chat-bubble h1 {
    font-size: clamp(2rem, 12vw, 5.2rem);
}

.page-chat .chat-bubble h2 {
    font-size: clamp(1.45rem, 8vw, 3.2rem);
}

.page-chat__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 280ms ease, transform 280ms ease;
}

.page-chat__choices.is-pending {
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.45rem);
}

.page-skip {
    justify-self: start;
    margin: -0.35rem 0 0;
}

.page-chat__choices a,
.page-chat__choices button,
.about-chat__choices button {
    text-decoration: none;
}

.page-chat__choices a,
.page-chat__choices button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--green);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font-size: 0.78rem;
    font-weight: 900;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.page-chat__choices a:nth-child(3n),
.page-chat__choices button:nth-child(3n) {
    background: #f4edff;
}

.page-chat__choices a:hover,
.page-chat__choices a:focus-visible,
.page-chat__choices button:hover,
.page-chat__choices button:focus-visible {
    outline: 0;
    background: var(--blue);
    color: #fffdf5;
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.message-typing,
.chat-bubble--typing {
    display: inline-flex;
    justify-content: center;
    gap: 0.3rem;
    align-items: center;
    width: 4rem;
    min-width: 4rem;
    min-height: 2.65rem;
    padding: 0.65rem 0.8rem;
}

.message-user.message-typing,
.chat-bubble--user.chat-bubble--typing {
    justify-self: end;
    align-self: flex-end;
    background: var(--blue) !important;
    color: #fffdf5 !important;
}

.message-typing .typing-dot,
.chat-bubble--typing span {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: currentColor;
    animation: visitor-dot 760ms ease-in-out infinite;
}

.message-typing .typing-dot:nth-of-type(3),
.chat-bubble--typing span:nth-child(2) {
    animation-delay: 120ms;
}

.message-typing .typing-dot:nth-of-type(4),
.chat-bubble--typing span:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes visitor-dot {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.38;
    }

    50% {
        transform: translateY(-0.18rem);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .page-chat {
        width: 100%;
        border-radius: 0;
        border-inline: 0;
        box-shadow: none;
    }

    .page-chat__choices {
        grid-template-columns: 1fr;
    }
}

.terminal-page .chat-bubble--user,
.terminal-page .chat-bubble--user *,
.chat-page .chat-bubble--user,
.chat-page .chat-bubble--user *,
.welcome-page .message-user,
.welcome-page .message-user * {
    color: #fffdf5 !important;
    text-shadow: none !important;
}

.kelly-game__mini-chart {
    display: flex;
    align-items: end;
    gap: 0.16rem;
    height: 2.7rem;
    padding: 0.24rem;
    border: 1px solid rgba(20, 18, 47, 0.28);
    border-radius: 6px;
    background:
        linear-gradient(rgba(20, 18, 47, 0.08) 1px, transparent 1px),
        #fffdf5;
    background-size: 100% 50%;
}

.kelly-game__mini-chart span {
    flex: 1 1 0;
    min-width: 0.12rem;
    border: 1px solid var(--ink);
    border-radius: 999px 999px 0 0;
    background: var(--blue);
    transition: height 180ms ease;
}

.kelly-game__mini-chart span.is-zero {
    height: 0.18rem !important;
    background: transparent;
}

.kelly-game__card.is-out .kelly-game__mini-chart span {
    opacity: 0.32;
}

@media (max-width: 640px) {
    body.terminal-kelly-page {
        height: auto !important;
        min-height: 100svh;
        padding: 0.45rem 0 !important;
        overflow: visible !important;
    }

    .terminal-kelly-page main {
        width: min(calc(100% - 0.9rem), 430px) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 0.65rem !important;
    }

    .terminal-page.terminal-kelly-page .page-chat {
        display: grid !important;
        margin-bottom: 0 !important;
        border: 2px solid var(--ink) !important;
        border-radius: 8px !important;
        box-shadow: 4px 4px 0 var(--shadow) !important;
    }

    .terminal-page.terminal-kelly-page .page-chat__choices {
        grid-template-columns: 1fr 1fr;
        padding-top: 0.2rem;
    }

    .terminal-page.terminal-kelly-page .page-chat__choices button {
        min-height: 2.45rem;
        padding: 0.45rem;
        font-size: 0.68rem;
    }

    .terminal-page.terminal-kelly-page .kelly-game {
        height: auto !important;
        overflow: visible !important;
        grid-template-rows: auto auto !important;
    }

    .terminal-page.terminal-kelly-page .kelly-game__stage {
        grid-template-rows: auto auto auto auto !important;
        overflow: visible !important;
    }

    .terminal-page.terminal-kelly-page .kelly-game__strategies {
        overflow: visible !important;
    }

    .terminal-page.terminal-kelly-page .kelly-game__card {
        grid-template-rows: auto auto auto auto auto !important;
    }

    .terminal-page.terminal-kelly-page .kelly-game__mini-chart {
        height: 1.8rem;
        padding: 0.16rem;
    }
}

/* Compacte Kelly-game */
body.terminal-kelly-page {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(23, 21, 59, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 21, 59, 0.04) 1px, transparent 1px),
        #fffdf0 !important;
    background-size: 28px 28px !important;
    color: var(--ink) !important;
}

.kelly-app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    height: 3.45rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 2px solid var(--ink);
    background: rgba(255, 253, 245, 0.96);
}

.kelly-app-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 900;
    text-decoration: none;
}

.kelly-app-brand img {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 2px solid var(--ink);
    border-radius: 50%;
    object-fit: cover;
}

.kelly-app-back {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--shadow);
    font-size: 0.62rem;
    font-weight: 900;
    text-decoration: none;
}

.terminal-kelly-page .kelly-app-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - 3.45rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.45rem !important;
    overflow-y: auto !important;
}

.terminal-page.terminal-kelly-page .kelly-game {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    width: min(100%, 30rem) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    box-shadow: 4px 4px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__intro,
.terminal-page.terminal-kelly-page .kelly-game__stage {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.6rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.terminal-page.terminal-kelly-page .kelly-game__intro {
    display: grid !important;
    gap: 0.45rem !important;
    border-bottom: 2px solid var(--ink) !important;
}

.terminal-kelly-page .kelly-game__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.15rem 0.6rem;
}

.terminal-page.terminal-kelly-page .kelly-game__title .kicker {
    grid-column: 1 / -1;
    margin: 0 !important;
    color: var(--blue) !important;
    font-size: 0.52rem !important;
    font-weight: 900;
}

.terminal-page.terminal-kelly-page .kelly-game__title h1 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__title > p:last-child {
    max-width: 14rem;
    margin: 0 !important;
    font-size: 0.54rem !important;
    line-height: 1.2 !important;
    text-align: right;
}

.terminal-page.terminal-kelly-page .kelly-game__choices {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__choices legend {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__choices span {
    display: grid !important;
    min-height: 3rem !important;
    place-items: center !important;
    align-content: center !important;
    gap: 0.08rem !important;
    padding: 0.3rem 0.12rem !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
    font-size: 0.5rem !important;
    font-weight: 900;
    line-height: 1.05 !important;
    text-align: center;
}

.terminal-page.terminal-kelly-page .kelly-game__choices small {
    color: var(--blue) !important;
    font-size: 0.72rem !important;
    font-weight: 900;
}

.terminal-page.terminal-kelly-page .kelly-game__choices input:checked + span {
    background: var(--blue) !important;
    color: #fffdf5 !important;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__choices input:checked + span small {
    color: var(--green) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__stage {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 0.5rem !important;
}

.terminal-page.terminal-kelly-page .kelly-game__status {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.55rem !important;
    min-height: 2.25rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.4rem 0.5rem !important;
    overflow: hidden !important;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #f4edff;
}

.terminal-page.terminal-kelly-page .kelly-game__status .kicker {
    margin: 0 !important;
    color: var(--blue) !important;
    font-size: 0.54rem !important;
    font-weight: 900;
    white-space: nowrap;
}

.terminal-page.terminal-kelly-page .kelly-game__status strong {
    min-height: 0 !important;
    color: var(--ink) !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: right;
    text-shadow: none !important;
}

.terminal-kelly-page .kelly-game__arena {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
}

.terminal-page.terminal-kelly-page .kelly-game__dice {
    justify-self: stretch !important;
    width: 5.8rem !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.65rem !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--green) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__result {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    overflow: hidden !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__result > span {
    color: var(--blue) !important;
    font-size: 0.52rem !important;
    font-weight: 900;
    text-transform: uppercase;
}

.terminal-page.terminal-kelly-page .kelly-game__result > strong {
    min-height: 0 !important;
    color: var(--ink) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__result.is-win > strong {
    color: #246400 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__result.is-loss > strong {
    color: #b11857 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__result > small {
    align-self: end;
    color: var(--ink) !important;
    font-size: 0.5rem !important;
    line-height: 1.15 !important;
}

.kelly-game__swing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
    align-items: stretch;
    height: 0.8rem;
    margin: 0.12rem 0;
}

.kelly-game__swing > b {
    background: var(--ink);
}

.kelly-game__swing-half {
    display: flex;
    overflow: hidden;
    border-block: 1px solid rgba(23, 21, 59, 0.28);
    background: #fffdf0;
}

.kelly-game__swing-half.is-loss {
    justify-content: flex-end;
    border-left: 1px solid rgba(23, 21, 59, 0.28);
}

.kelly-game__swing-half.is-win {
    justify-content: flex-start;
    border-right: 1px solid rgba(23, 21, 59, 0.28);
}

.kelly-game__swing-half i {
    display: block;
    width: 0;
    height: 100%;
    transition: width 180ms ease;
}

.kelly-game__swing-half.is-loss i {
    background: #ff83b8;
}

.kelly-game__swing-half.is-win i {
    background: var(--green);
}

.terminal-page.terminal-kelly-page .kelly-game__actions {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap: 0.35rem !important;
    margin: 0 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__actions button {
    min-height: 2.45rem !important;
    padding: 0.4rem !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
    font-size: 0.6rem !important;
    font-weight: 900;
    line-height: 1 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__actions .kelly-game__primary {
    background: var(--blue) !important;
    color: #fffdf5 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__actions button:disabled {
    opacity: 0.42 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__track {
    display: none !important;
}

.terminal-page.terminal-kelly-page .kelly-game__strategies {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto 1.25rem !important;
    gap: 0.08rem 0.35rem !important;
    min-height: 4.5rem !important;
    padding: 0.38rem !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: var(--paper) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card.is-selected {
    background: #f4edff !important;
    box-shadow: inset 0 0 0 1px var(--blue), 2px 2px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card.is-leader {
    background: var(--green) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__rank {
    top: 0.28rem !important;
    right: 0.35rem !important;
    color: var(--blue) !important;
    font-size: 0.48rem !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card-head {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid !important;
    align-content: start;
    gap: 0.1rem !important;
    min-height: 0 !important;
    padding-right: 0 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card-head span {
    font-size: 0.56rem !important;
    font-weight: 900;
}

.terminal-page.terminal-kelly-page .kelly-game__card-head small {
    color: var(--ink) !important;
    font-size: 0.46rem !important;
}

.terminal-page.terminal-kelly-page .kelly-game__card > strong {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding-right: 0.85rem;
    color: var(--ink) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.terminal-page.terminal-kelly-page .kelly-game__meter,
.terminal-page.terminal-kelly-page .kelly-game__card > p {
    display: none !important;
}

.terminal-page.terminal-kelly-page .kelly-game__mini-chart {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 1.25rem !important;
    padding: 0.1rem !important;
    border: 1px solid rgba(23, 21, 59, 0.28) !important;
    border-radius: 4px !important;
    background: #fffdf0 !important;
}

.terminal-page.terminal-kelly-page .kelly-game__mini-chart span {
    border-width: 1px !important;
    background: var(--blue) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__help {
    position: static !important;
    margin: 0 !important;
    border: 2px solid var(--ink) !important;
    border-radius: 8px !important;
    background: #f4edff !important;
    color: var(--ink) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
}

.terminal-page.terminal-kelly-page .kelly-game__help summary {
    min-height: 2.1rem !important;
    padding: 0.48rem 0.55rem !important;
    color: var(--ink) !important;
    font-size: 0.58rem !important;
    font-weight: 900;
}

.terminal-page.terminal-kelly-page .kelly-game__help p {
    margin: 0 !important;
    padding: 0 0.55rem 0.5rem !important;
    color: var(--ink) !important;
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
}

@media (max-width: 350px) {
    .terminal-kelly-page .kelly-game__arena {
        grid-template-columns: 5.25rem minmax(0, 1fr);
    }

    .terminal-page.terminal-kelly-page .kelly-game__dice {
        width: 5.25rem !important;
        padding: 0.55rem !important;
    }

    .terminal-page.terminal-kelly-page .kelly-game__choices span {
        min-height: 2.75rem !important;
        font-size: 0.46rem !important;
    }
}

/* Leesbare afzenderbadge in gebruikersberichten */
.welcome-page .message-user > .message-avatar,
.app-page .message-user > .message-avatar {
    min-width: 2.55rem;
    background: var(--green) !important;
    color: var(--ink) !important;
    font-size: 0.68rem;
    font-weight: 900;
    text-shadow: none !important;
}

/* Gecentreerde tablet-app op brede schermen */
@media (min-width: 901px) {
    body.app-page {
        background:
            linear-gradient(90deg, rgba(23, 21, 59, 0.055) 1px, transparent 1px),
            linear-gradient(180deg, rgba(23, 21, 59, 0.055) 1px, transparent 1px),
            #e8e5ed;
        background-size: 42px 42px;
    }

    body.app-page .app-shell {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(720px, calc(100vw - 2rem)) !important;
        max-width: 720px !important;
        height: min(960px, calc(100svh - 2rem)) !important;
        border: 2px solid var(--ink);
        border-radius: 8px;
        box-shadow: 8px 8px 0 rgba(20, 18, 47, 0.28);
        transform: translate(-50%, -50%);
    }
}

/* Gedeeld appkader voor account-, juridische en toolpagina's */
.standalone-app-page .app-header__actions a,
.standalone-app-page .app-header__actions button,
.standalone-tabbar a,
.standalone-back,
.standalone-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.5rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
}

.standalone-app-page .app-header__actions a,
.standalone-app-page .app-header__actions button {
    gap: 0.35rem;
}

.standalone-app-page .app-header__actions a:hover,
.standalone-app-page .app-header__actions a:focus-visible,
.standalone-app-page .app-header__actions button:hover,
.standalone-app-page .app-header__actions button:focus-visible,
.standalone-tabbar a:hover,
.standalone-tabbar a:focus-visible,
.standalone-back:hover,
.standalone-back:focus-visible,
.standalone-form button:hover,
.standalone-form button:focus-visible {
    outline: 0;
    background: var(--green);
    box-shadow: 1px 1px 0 var(--shadow);
    transform: translate(2px, 2px);
}

.profile-privacy-link {
    margin: 0;
    font-size: 0.78rem;
}

.profile-privacy-link a {
    color: var(--ink);
    font-weight: 800;
}

.account-danger-zone {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(23, 21, 59, 0.25);
}

.account-danger-zone summary {
    cursor: pointer;
    font-weight: 900;
}

.account-danger-zone p {
    font-size: 0.76rem;
}

.account-danger-zone form {
    display: grid;
    gap: 0.85rem;
}

.account-danger-zone .danger-button {
    min-height: 2.75rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff0f2;
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.standalone-main {
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.standalone-scroll {
    height: 100%;
    padding: clamp(1rem, 4vw, 1.35rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.standalone-scroll--narrow {
    max-width: 44rem;
    margin: 0 auto;
}

.standalone-back {
    width: fit-content;
    margin-bottom: 1rem;
}

.standalone-chat {
    width: 100%;
    margin-bottom: 1rem;
}

.standalone-chat .message {
    max-width: min(88%, 38rem);
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--ink);
    font-size: 0.86rem;
    line-height: 1.45;
}

.standalone-chat .message p {
    margin: 0;
}

.standalone-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(0.9rem, 3vw, 1.2rem);
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: rgba(244, 237, 255, 0.94);
    box-shadow: 5px 5px 0 var(--shadow);
}

.standalone-panel__heading {
    display: grid;
    gap: 0.35rem;
}

.standalone-panel__heading > span {
    color: var(--blue);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.standalone-panel__heading h1,
.standalone-panel__heading p {
    margin: 0;
}

.standalone-panel__heading h1 {
    color: var(--ink);
    font-family: inherit;
    font-size: 1.25rem;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

.standalone-form {
    display: grid;
    gap: 0.85rem;
}

.standalone-form label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 800;
}

.standalone-form label small {
    font-size: 0.58rem;
    font-weight: 600;
}

.standalone-form input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.55rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
}

.standalone-form input:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 1px;
}

.standalone-form .checkbox-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
    font-weight: 600;
    line-height: 1.45;
}

.standalone-form .checkbox-label input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    accent-color: var(--blue);
}

.standalone-form button {
    width: 100%;
    background: var(--green);
    cursor: pointer;
}

.form-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auth-switch {
    margin: 0;
    font-size: 0.7rem;
}

.notice.error {
    padding: 0.75rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff1f6;
}

.notice.error p {
    margin: 0;
}

.profile-data {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.profile-data div {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
}

.profile-data dt {
    color: var(--blue);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-data dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.legal-page {
    max-width: 50rem;
    margin: 0 auto;
}

.legal-panel section {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.9rem;
    border-top: 2px solid rgba(20, 18, 47, 0.18);
}

.legal-panel h2,
.legal-panel p {
    margin: 0;
}

.legal-panel h2 {
    color: var(--blue);
    font-size: 0.82rem;
    line-height: 1.25;
}

.legal-panel p {
    font-size: 0.75rem;
    line-height: 1.55;
}

.legal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.legal-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
    font-size: 0.7rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.standalone-tabbar a {
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    min-height: 3.15rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.56rem;
}

.standalone-tabbar a:nth-child(2n) {
    background: #f4edff;
}

.standalone-tabbar a.is-active {
    background: var(--blue);
    color: #fffdf5;
}

.standalone-app-page .app-header svg,
.standalone-tabbar svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 640px) {
    .standalone-app-page .app-header__actions a {
        min-height: 2.1rem;
        padding: 0.42rem 0.52rem;
        font-size: 0.6rem;
    }

    .standalone-tabbar a {
        min-height: 3rem;
        font-size: 0.52rem;
    }

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

    .legal-actions {
        grid-template-columns: 1fr;
    }

    .standalone-chat .message {
        max-width: 94%;
    }
}