/* ILP shared visual system: loaded after page-specific styles. */
:root {
    --ilp-bg: #0b1220;
    --ilp-surface: #14213a;
    --ilp-surface-raised: #1a2b49;
    --ilp-surface-soft: #20375b;
    --ilp-text: #f8fafc;
    --ilp-muted: #bac8dc;
    --ilp-border: rgb(148 163 184 / 22%);
    --ilp-brand: #f6b642;
    --ilp-brand-strong: #ffca62;
    --ilp-success: #5ee6a5;
    --ilp-danger: #fb7185;
    --ilp-focus: #67d6ff;
    --ilp-shadow: 0 18px 45px rgb(2 8 23 / 36%);
    --ilp-radius-sm: 12px;
    --ilp-radius-md: 18px;
    --ilp-radius-lg: 24px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--ilp-bg);
    color-scheme: dark;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    color: var(--ilp-text);
    background:
        radial-gradient(circle at 50% -18%, rgb(73 217 255 / 10%), transparent 35%),
        radial-gradient(circle at 96% 12%, rgb(246 182 66 / 9%), transparent 28%),
        var(--ilp-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body > * {
    min-width: 0;
}

img,
svg,
canvas {
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgb(103 214 255 / 85%);
    outline-offset: 3px;
}

button:disabled {
    cursor: not-allowed;
    filter: saturate(0.65);
}

h1,
h2,
h3,
h4 {
    color: var(--ilp-text);
    letter-spacing: -0.02em;
}

p,
li {
    line-height: 1.55;
}

/* Shared mobile-safe content widths. Individual game layouts retain their sizing. */
.container,
.module-shell,
.game-shell,
.lab-shell,
#app {
    width: min(100%, 640px);
    max-width: 100%;
    margin-inline: auto;
}

.container,
.module-shell,
.lab-shell {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* Standard elevated surfaces. */
.card,
.stage-card,
.cooldown-card,
.popup-card,
.modal-card,
.xp-modal,
.overlay-card,
.consent-card,
.mission-card,
.core-strip {
    border-color: var(--ilp-border);
    box-shadow: var(--ilp-shadow);
}

.card,
.stage-card,
.cooldown-card,
.popup-card,
.modal-card,
.xp-modal,
.overlay-card,
.consent-card {
    border-radius: var(--ilp-radius-lg);
}

.card,
.stage-card,
.cooldown-card,
.popup-card,
.modal-card,
.xp-modal,
.overlay-card {
    background: linear-gradient(145deg, rgb(30 48 80 / 97%), rgb(15 27 48 / 98%));
}

/* Standard primary actions without altering module-specific action names. */
.primary-btn,
.primary-button,
.primary,
.generate-btn,
.cta-btn,
#introNextBtn,
#predictionNextBtn,
#predictBtn,
#checkBtn,
#revealBtn,
#startQuizBtn {
    min-height: 48px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ilp-brand-strong), var(--ilp-brand));
    color: #271700;
    box-shadow: 0 10px 24px rgb(246 182 66 / 20%);
    font-weight: 800;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.primary-btn:hover,
.primary-button:hover,
.primary:hover,
.generate-btn:hover,
.cta-btn:hover,
#introNextBtn:hover,
#predictionNextBtn:hover,
#predictBtn:hover,
#checkBtn:hover,
#revealBtn:hover,
#startQuizBtn:hover {
    filter: brightness(1.04);
    box-shadow: 0 13px 28px rgb(246 182 66 / 28%);
    transform: translateY(-1px);
}

.primary-btn:active,
.primary-button:active,
.primary:active,
.generate-btn:active,
.cta-btn:active,
#introNextBtn:active,
#predictionNextBtn:active,
#predictBtn:active,
#checkBtn:active,
#revealBtn:active,
#startQuizBtn:active {
    transform: translateY(1px) scale(0.985);
}

/* Consistent selectable controls and option chips. */
.option-btn,
.option-button,
.answer-button,
.answer,
.options button,
.mcq button,
.move-button,
.pattern-card,
.probability-row,
.attention-token,
.word {
    border-color: var(--ilp-border);
    background-color: rgb(30 48 80 / 92%);
}

.option-btn:hover:not(:disabled),
.option-button:hover:not(:disabled),
.answer-button:hover:not(:disabled),
.answer:hover:not(:disabled),
.options button:hover:not(:disabled),
.mcq button:hover:not(:disabled) {
    border-color: rgb(246 182 66 / 70%);
    background-color: var(--ilp-surface-soft);
}

.feedback,
.answer-explanation,
.result-note,
.note,
.fact-card,
.prompt-box,
.sentence-box,
.customer-message,
.reply-box,
.output-box {
    border-color: var(--ilp-border);
}

/* Standard XP and modal treatment across legacy and newer modules. */
#xpReward {
    z-index: 100;
    width: min(calc(100% - 32px), 360px);
    max-width: 360px;
}

.xp-box,
.xp-result {
    border: 1px solid rgb(255 202 98 / 44%);
    border-radius: var(--ilp-radius-md);
    background: linear-gradient(135deg, #ffd87c, var(--ilp-brand));
    color: #2a1a00;
    box-shadow: 0 18px 50px rgb(246 182 66 / 30%);
    font-weight: 900;
}

.modal-overlay,
.overlay,
.cooldown-overlay {
    background: rgb(2 8 23 / 78%);
    backdrop-filter: blur(10px);
}

.hidden,
[hidden] {
    display: none !important;
}

@media (max-width: 420px) {
    .container,
    .module-shell,
    .lab-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .card,
    .stage-card,
    .modal-card,
    .xp-modal,
    .overlay-card {
        border-radius: var(--ilp-radius-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}