/* Shared, readable type scale; the three designs share all game interactions. */
:root {
    --muted:#515f54; --surface:#fffefa; --soft:#edf1e8;
    --accent:#344e40; --accent-hover:#263d31; --border:#d5ddcf;
    --page-art:url('images/page-background.svg'); --card-radius:14px;
}
html[data-design="desert"] {
    --ink:#493728; --muted:#705844; --paper:#fbf5e9; --surface:#fffaf1;
    --soft:#f3e7d4; --line:#ddcdb3; --border:#d7bfa1; --sage:#f2e3cb;
    --green:#854a32; --accent:#854a32; --accent-hover:#63351f; --gold:#9b692c;
    --serif:'Palatino Linotype','Book Antiqua',Georgia,serif;
    --page-art:url('images/background-desert.svg'); --card-radius:5px;
}
html[data-design="lake"] {
    --ink:#243f50; --muted:#486270; --paper:#f2f7f8; --surface:#fcfeff;
    --soft:#e4eff2; --line:#cddfe5; --border:#b7d1da; --sage:#dfedf0;
    --green:#245568; --accent:#245568; --accent-hover:#173d50; --gold:#967547;
    --page-art:url('images/background-lake.svg'); --card-radius:24px;
}
body { background-color:var(--paper); background-image:var(--page-art); }
p,small,.subtle,.level-help,.hero-features,.eyebrow,.brand small,.brand-light,
.site-header nav a,.site-footer,.site-footer .brand,.translation-bar,.translation-bar strong,
.translation-bar a,.card-count,.card-bottom,.level,.level-choice small,.round-details,
.back-link,.save-state,.progress-label,.question-footer>span,.picture-caption,
.stats-grid span,.saved-game small,.hint-button small,.reference-connection small,
.account-form .privacy-note,.account-form form>small { color:var(--muted); }
.hero-copy p,.card-copy p,.learning-note p,.prose p,.account-form>p,.discover-copy>p,
.answer,.hint,.match-item,.sequence-item strong,.feedback p,.result-hero p,
.review-list details,.team-discussion p { font-size:1.0625rem; line-height:1.65; }
small,.card-count,.card-bottom,.round-details,.progress-label,.picture-caption,
.question-footer>span,.save-state,.site-footer,.subtle,.level-help,.hero-features,
.translation-bar,.translation-bar strong,.translation-bar a { font-size:.9375rem; }
.eyebrow { font-size:.8125rem; letter-spacing:1.3px; }
.hero-features { flex-wrap:wrap; gap:10px 18px; }
.brand small { font-size:.6875rem; letter-spacing:1px; }
.site-header { min-height:110px; height:auto; padding-top:18px; padding-bottom:18px; background:color-mix(in srgb,var(--paper) 85%,transparent); }
.site-header nav { gap:18px; }
.site-header nav a { padding:12px 0; font-size:1rem; }
.site-header nav a.active:after { bottom:4px; }
.header-account { gap:14px; font-size:1rem; }
.translation-bar { flex-wrap:wrap; background:color-mix(in srgb,var(--paper) 88%,transparent); }
.difficulty-bar { flex-wrap:wrap; font-size:1rem; gap:12px 20px; }
.level-options { flex-wrap:wrap; gap:8px; }
.level { padding:11px 17px; font-size:1rem; min-height:46px; }
.level.selected,.level-choice.selected { color:var(--accent); background:var(--sage); border-color:var(--accent); }
.level-choice { background:var(--surface); padding:15px 44px 15px 18px; }
.level-choice strong { font-size:1.0625rem; font-weight:600; }
.level-choice small { font-size:.9375rem; }
.level-choice>span { right:14px; }
.button,.button.small,.button.full,.text-button,.learning-note .button { font-size:1rem; }
.button { background:var(--accent); border-color:var(--accent); min-height:44px; }
.button:hover:not(:disabled) { background:var(--accent-hover); }
.button.secondary { background:transparent; color:var(--accent); border-color:var(--border); }
.button.secondary:hover:not(:disabled) { background:var(--soft); }
.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid var(--accent); outline-offset:4px;
}
.game-card { background:var(--surface); border-color:var(--border); border-radius:var(--card-radius); }
.card-copy { padding:24px 24px 18px; }
.card-copy h3 { font-size:1.625rem; line-height:1.24; margin-bottom:13px; }
.card-copy p { min-height:0; margin-bottom:20px; }
.card-count { background:var(--surface); padding:4px 12px; }
.card-bottom { border-color:var(--line); }
.card-icon { border-color:var(--surface); }
.card-art { height:185px; }
.circle-arrow,.round-icon { background:var(--soft); color:var(--accent); }
.circle-arrow { width:36px; height:36px; }
.learning-note,.guest-note,.team-panel,.result-hero,.empty-state.compact {
    background:var(--soft); border-color:var(--border); color:var(--ink);
}
.team-score span,.team-setup small,.team-discussion p { color:var(--muted); }
.question-panel,.account-form,.stats-grid>div,.saved-game,.review-list details,.team-score,.quiz-dialog {
    color:var(--ink); background:var(--surface); border-color:var(--border);
}
.answer,.match-item,.sequence-item,.hint.visible { color:var(--ink); background:var(--surface); border-color:var(--border); }
.answer.chosen,.match-item.active { background:var(--soft); border-color:var(--accent); }
.account-form input,.quiz-dialog input:not([type=checkbox]),.quiz-dialog select,.quiz-dialog textarea,
.team-setup input,.team-setup select { color:var(--ink); background:var(--surface); border-color:var(--border); font-size:1rem; }
.account-art .eyebrow { color:#d9e0d3; }
.account-art p { color:#e6eadf; font-size:1.0625rem; }
.art-label { max-width:calc(100% - 50px); }
.art-label small { color:#515d4b; font-size:.875rem; }
.art-note { font-size:.6875rem; letter-spacing:1px; }
.question-footer { flex-wrap:wrap; }
.question-footer .button { font-size:1rem; }
.matching-board { gap:20px; }
.match-item small { font-size:.875rem; color:var(--muted); }
.move-button { width:40px; height:40px; }
.hint.locked { color:var(--muted); }
.map-pin { font-size:.8125rem; }
.prose ul { font-size:1.0625rem; line-height:1.8; }
.site-footer>a:last-child { font-size:.9375rem; }
.brand-mark { background:var(--accent); }
/* Wüstenlicht: parchment, sandstone arches, and a fine terracotta rule. */
html[data-design="desert"] .game-card { border-top:3px solid #b77753; box-shadow:0 5px 20px #66442709; }
html[data-design="desert"] .hero-art { border-radius:46% 46% 6px 6px; border:7px solid #ead8b9; }
html[data-design="desert"] .discover-art { border-radius:46% 46% 6px 6px; }
html[data-design="desert"] .button { border-radius:4px; }
html[data-design="desert"] .question-panel { border-radius:5px; border-top:4px solid #b77753; }
html[data-design="desert"] .eyebrow { color:#855c38; }
html[data-design="desert"] .hero-copy h1 em { color:#9a583a; }
html[data-design="desert"] .art-label { background:#fff6e7f2; border-color:#d8bd90; }
/* Abend am See: open, curved shapes, airy cards, and petrol accents. */
html[data-design="lake"] .hero-art { border-radius:48% 48% 28px 28px; border:6px solid #d9e8ec; }
html[data-design="lake"] .game-card { box-shadow:0 7px 24px #22485909; }
html[data-design="lake"] .card-art { border-bottom:4px solid #94bcc6; }
html[data-design="lake"] .button { border-radius:30px; }
html[data-design="lake"] .question-panel { border-radius:24px; }
html[data-design="lake"] .hero-copy h1 em { color:#367385; }
html[data-design="lake"] .art-label { background:#f3fbfdf2; border-color:#abcbd4; border-radius:18px; }
html[data-design="lake"] .card-icon { background:#e1eef1; color:#326276; border-radius:50%; }
@media(max-width:1150px) {
    .site-header { flex-wrap:wrap; justify-content:center; }
    .site-header nav { order:3; width:100%; }
    .header-account { margin-left:auto; }
    .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hero-features { justify-content:flex-start; }
    .discover-layout { gap:35px; }
}
@media(max-width:760px) {
    .site-header { padding:18px 20px 10px; }
    .site-header nav { gap:20px; }
    .site-header nav a { font-size:.9375rem; }
    .hero-features { justify-content:center; }
    .hero .eyebrow,.section-heading .eyebrow,.play-heading .eyebrow { font-size:.8125rem; }
    .level { font-size:1rem; padding:10px 12px; }
    .level-dots { display:inline; font-size:.875rem; }
    .translation-bar>span:not(.mini-book) { font-size:.9375rem; }
    .play-heading { gap:15px; align-items:flex-start; }
    .play-heading h1 { font-size:1.8rem; }
    .score-chip>span { font-size:.8125rem; }
    .saved-game { flex-wrap:wrap; }
    .saved-game strong { font-size:1rem; }
    .saved-game small { font-size:.875rem; }
    .stats-grid { gap:8px; }
    .stats-grid>div { padding:15px 10px; }
    .stats-grid span { font-size:.875rem; }
    .question-footer>span { font-size:.875rem; }
    .sequence-item { flex-wrap:wrap; }
    .sequence-item strong { flex-basis:calc(100% - 45px); }
    .matching-board { gap:12px; }
    .match-item { padding:12px; gap:8px; font-size:1rem; overflow-wrap:anywhere; }
    .pair-letter { display:none; }
    .question-panel h2 { font-size:1.5rem; }
    .brand small { display:none; }
    .round-details { gap:10px; }
}
@media(max-width:640px) {
    .game-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
    .card-art { height:180px; }
    .card-copy { padding:25px 22px 18px; }
    .card-copy h3 { font-size:1.625rem; }
    .card-count { font-size:.9375rem; top:12px; right:12px; }
    .card-icon { width:37px; height:37px; right:20px; top:-21px; }
    .card-bottom { font-size:.9375rem; }
    .level-options { flex-wrap:nowrap; }
    .level { padding:10px 8px; font-size:.9375rem; }
    .level-dots { display:block; }
    .hero-copy p { font-size:1.0625rem; }
    .brand { font-size:1.5rem; }
    .header-account .button { font-size:.9375rem; }
    .art-label { left:20px; bottom:27px; font-size:1rem; }
    .art-note { display:none; }
    .question-panel { padding:24px 17px; }
    .score-chip { flex-wrap:wrap; max-width:110px; justify-content:center; }
}