* {
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
}

/* Display face for headings and actions; reading text stays Quicksand. */
.type-title,
.quest-card h3,
#header-brand span,
#current-step-title,
#intermediate-modal h3,
#resume-modal h3,
.btn-primary,
.btn-secondary {
    font-family: var(--font-display);
}

/* Fit the play area to the viewport on phones without stretching it on desktop. */
.game-shell {
    min-height: 670px; /* fallback where dvh/min() are unsupported */
    min-height: min(670px, calc(100dvh - 24px));
}

body {
    background-color: #f3f8f2;
    background-image:
        radial-gradient(#dcecdb 2px, transparent 2px),
        radial-gradient(#dcecdb 2px, #f3f8f2 2px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
}

.watercolor-bg {
    background: linear-gradient(135deg, #fff9e6 0%, #e8f5e9 40%, #fce4ec 100%);
}

.soft-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 4px solid #ffffff;
    box-shadow: 0 12px 30px -5px rgba(100, 150, 120, 0.18), 0 8px 12px -6px rgba(0, 0, 0, 0.05);
}

.quest-card {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid #ffffff;
    box-shadow: 0 8px 0 rgba(0,0,0,0.06), 0 10px 15px rgba(0,0,0,0.05);
}

.quest-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 14px 0 rgba(0,0,0,0.06), 0 18px 25px rgba(0,0,0,0.1);
}

.quest-card:active {
    transform: translateY(2px) scale(0.99);
    box-shadow: 0 4px 0 rgba(0,0,0,0.06);
}

.btn-option {
    min-height: var(--tap-comfortable);
    background: linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
    border: 3px solid #b2dfdb;
    box-shadow: 0 6px 0 #80cbd3, 0 8px 15px rgba(0,0,0,0.05);
    transition: all 0.15s ease;
}

.btn-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #80cbd3, 0 12px 18px rgba(0,0,0,0.08);
    border-color: #4db6ac;
}

.btn-option:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #80cbd3;
}

.btn-primary {
    min-height: var(--tap-comfortable);
    background: linear-gradient(180deg, #81c784 0%, #66bb6a 100%);
    border: 3px solid #ffffff;
    box-shadow: 0 6px 0 #388e3c, 0 8px 15px rgba(0,0,0,0.15);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #388e3c, 0 12px 18px rgba(0,0,0,0.2);
    background: linear-gradient(180deg, #91d794 0%, #76cb7a 100%);
}

.btn-primary:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #388e3c;
}

.btn-secondary {
    min-height: var(--tap-min);
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 0 #d1d5db;
    color: #4b5563;
}

.btn-secondary:hover {
    background: #f9fafb;
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d1d5db;
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

.floating {
    animation: floatSlow 3s ease-in-out infinite;
}

@keyframes bounceCorrect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.animate-correct {
    animation: bounceCorrect 0.4s ease-in-out;
}

@keyframes shakeWrong {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.animate-wrong {
    animation: shakeWrong 0.4s ease-in-out;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 10px;
}